vh/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2026-03-30 23:02:39 -07:00
Code Issues Actions 37 Packages Projects Releases Wiki Activity

Enhancement: better support for raw values in block highlighting (#6434)

Browse Source
This commit is contained in:
shamoon
2026-03-17 09:12:01 -07:00
committed by GitHub
parent 6bdea294c1
commit fadb03ad27
35 changed files with 300 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/services/widget/block.jsx
View File

@@ -6,7 +6,7 @@ import { BlockHighlightContext } from "./highlight-context";
import { evaluateHighlight, getHighlightClass } from "utils/highlights";
export default function Block({ value, label, field }) {
export default function Block({ value, highlightValue, label, field }) {
const { t } = useTranslation();
const highlightConfig = useContext(BlockHighlightContext);
@@ -20,12 +20,12 @@ export default function Block({ value, label, field }) {
}
for (const candidate of candidates) {
const result = evaluateHighlight(candidate, value, highlightConfig);
const result = evaluateHighlight(candidate, highlightValue ?? value, highlightConfig);
if (result) return result;
}
return null;
}, [field, label, value, highlightConfig]);
}, [field, label, value, highlightValue, highlightConfig]);
const highlightClass = useMemo(() => {
if (!highlight?.level) return undefined;

23
src/components/services/widget/block.test.jsx
View File

@@ -38,4 +38,27 @@ describe("components/services/widget/block", () => {
expect(el.getAttribute("data-highlight-level")).toBe("danger");
expect(el.className).toContain("danger-class");
});
it("prefers highlightValue over the rendered value for numeric highlighting", () => {
const highlightConfig = {
levels: { warn: "warn-class" },
fields: {
foo: {
numeric: { when: "gt", value: 5, level: "warn" },
},
},
};
const { container } = renderWithProviders(
<BlockHighlightContext.Provider value={highlightConfig}>
<Block label="foo.label" field="foo" value="5.791 ms" highlightValue={5.791} />
</BlockHighlightContext.Provider>,
{ settings: {} },
);
const el = container.querySelector(".service-block");
expect(el).not.toBeNull();
expect(el.getAttribute("data-highlight-level")).toBe("warn");
expect(el.className).toContain("warn-class");
});
});

1
src/widgets/adguard/component.jsx
View File

@@ -37,6 +37,7 @@ export default function Component({ service }) {
<Block
label="adguard.latency"
value={t("common.ms", { value: adguardData.avg_processing_time * 1000, style: "unit", unit: "millisecond" })}
highlightValue={adguardData.avg_processing_time * 1000}
/>
</Container>
);

19
src/widgets/beszel/component.jsx
View File

@@ -51,12 +51,25 @@ export default function Component({ service }) {
<Block label="beszel.name" value={system.name} />
<Block label="beszel.status" value={t(`beszel.${system.status}`)} />
<Block label="beszel.updated" value={t("common.relativeDate", { value: system.updated })} />
<Block label="beszel.cpu" value={t("common.percent", { value: system.info.cpu, maximumFractionDigits: 2 })} />
<Block label="beszel.memory" value={t("common.percent", { value: system.info.mp, maximumFractionDigits: 2 })} />
<Block label="beszel.disk" value={t("common.percent", { value: system.info.dp, maximumFractionDigits: 2 })} />
<Block
label="beszel.cpu"
value={t("common.percent", { value: system.info.cpu, maximumFractionDigits: 2 })}
highlightValue={system.info.cpu}
/>
<Block
label="beszel.memory"
value={t("common.percent", { value: system.info.mp, maximumFractionDigits: 2 })}
highlightValue={system.info.mp}
/>
<Block
label="beszel.disk"
value={t("common.percent", { value: system.info.dp, maximumFractionDigits: 2 })}
highlightValue={system.info.dp}
/>
<Block
label="beszel.network"
value={t("common.byterate", { value: system.info.bb, maximumFractionDigits: 2 })}
highlightValue={system.info.bb}
/>
</Container>
);

4
src/widgets/deluge/component.jsx
View File

@@ -52,9 +52,9 @@ export default function Component({ service }) {
<>
<Container service={service}>
<Block label="deluge.leech" value={t("common.number", { value: leech })} />
<Block label="deluge.download" value={t("common.byterate", { value: rateDl })} />
<Block label="deluge.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
<Block label="deluge.seed" value={t("common.number", { value: completed })} />
<Block label="deluge.upload" value={t("common.byterate", { value: rateUl })} />
<Block label="deluge.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
</Container>
{widget?.enableLeechProgress &&
leechTorrents.map((queueEntry) => (

10
src/widgets/docker/component.jsx
View File

@@ -41,17 +41,19 @@ export default function Component({ service }) {
}
const { rxBytes, txBytes } = calculateThroughput(statsData.stats);
const cpuPercent = calculateCPUPercent(statsData.stats);
const usedMemory = calculateUsedMemory(statsData.stats);
return (
<Container service={service}>
<Block label="docker.cpu" value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
<Block label="docker.cpu" value={t("common.percent", { value: cpuPercent })} highlightValue={cpuPercent} />
{statsData.stats.memory_stats.usage && (
<Block label="docker.mem" value={t("common.bytes", { value: calculateUsedMemory(statsData.stats) })} />
<Block label="docker.mem" value={t("common.bytes", { value: usedMemory })} highlightValue={usedMemory} />
)}
{statsData.stats.networks && (
<>
<Block label="docker.rx" value={t("common.bytes", { value: rxBytes })} />
<Block label="docker.tx" value={t("common.bytes", { value: txBytes })} />
<Block label="docker.rx" value={t("common.bytes", { value: rxBytes })} highlightValue={rxBytes} />
<Block label="docker.tx" value={t("common.bytes", { value: txBytes })} highlightValue={txBytes} />
</>
)}
</Container>

12
src/widgets/dockhand/component.jsx
View File

@@ -105,8 +105,16 @@ export default function Component({ service }) {
<Block label="dockhand.paused" value={t("common.number", { value: paused ?? 0 })} />
<Block label="dockhand.pending_updates" value={t("common.number", { value: pendingUpdates ?? 0 })} />
<Block label="dockhand.total" value={t("common.number", { value: totalContainers })} />
<Block label="dockhand.cpu" value={t("common.percent", { value: cpuPercent, maximumFractionDigits: 1 })} />
<Block label="dockhand.memory" value={t("common.percent", { value: memoryPercent, maximumFractionDigits: 1 })} />
<Block
label="dockhand.cpu"
value={t("common.percent", { value: cpuPercent, maximumFractionDigits: 1 })}
highlightValue={cpuPercent}
/>
<Block
label="dockhand.memory"
value={t("common.percent", { value: memoryPercent, maximumFractionDigits: 1 })}
highlightValue={memoryPercent}
/>
<Block label="dockhand.images" value={t("common.number", { value: imagesTotal ?? 0 })} />
<Block label="dockhand.volumes" value={t("common.number", { value: volumesTotal ?? 0 })} />
<Block

4
src/widgets/downloadstation/component.jsx
View File

@@ -33,9 +33,9 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="downloadstation.leech" value={t("common.number", { value: leech })} />
<Block label="downloadstation.download" value={t("common.byterate", { value: rateDl })} />
<Block label="downloadstation.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
<Block label="downloadstation.seed" value={t("common.number", { value: completed })} />
<Block label="downloadstation.upload" value={t("common.byterate", { value: rateUl })} />
<Block label="downloadstation.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
</Container>
);
}

15
src/widgets/filebrowser/component.jsx
View File

@@ -25,14 +25,21 @@ export default function Component({ service }) {
);
}
const available = (usage?.total ?? 0) - (usage?.used ?? 0);
return (
<Container service={service}>
<Block label="filebrowser.available" value={t("common.bytes", { value: available })} highlightValue={available} />
<Block
label="filebrowser.available"
value={t("common.bytes", { value: (usage?.total ?? 0) - (usage?.used ?? 0) })}
label="filebrowser.used"
value={t("common.bytes", { value: usage?.used ?? 0 })}
highlightValue={usage?.used ?? 0}
/>
<Block
label="filebrowser.total"
value={t("common.bytes", { value: usage?.total ?? 0 })}
highlightValue={usage?.total ?? 0}
/>
<Block label="filebrowser.used" value={t("common.bytes", { value: usage?.used ?? 0 })} />
<Block label="filebrowser.total" value={t("common.bytes", { value: usage?.total ?? 0 })} />
</Container>
);
}

4
src/widgets/flood/component.jsx
View File

@@ -45,9 +45,9 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="flood.leech" value={t("common.number", { value: leech })} />
<Block label="flood.download" value={t("common.byterate", { value: rateDl })} />
<Block label="flood.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
<Block label="flood.seed" value={t("common.number", { value: completed })} />
<Block label="flood.upload" value={t("common.byterate", { value: rateUl })} />
<Block label="flood.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
</Container>
);
}

36
src/widgets/fritzbox/component.jsx
View File

@@ -47,12 +47,36 @@ export default function Component({ service }) {
<Container service={service}>
<Block label="fritzbox.connectionStatus" value={t(`fritzbox.connectionStatus${fritzboxData.connectionStatus}`)} />
<Block label="fritzbox.uptime" value={t("common.duration", { value: fritzboxData.uptime })} />
<Block label="fritzbox.maxDown" value={t("common.byterate", { value: fritzboxData.maxDown / 8, decimals: 1 })} />
<Block label="fritzbox.maxUp" value={t("common.byterate", { value: fritzboxData.maxUp / 8, decimals: 1 })} />
<Block label="fritzbox.down" value={t("common.byterate", { value: fritzboxData.down, decimals: 1 })} />
<Block label="fritzbox.up" value={t("common.byterate", { value: fritzboxData.up, decimals: 1 })} />
<Block label="fritzbox.received" value={t("common.bytes", { value: fritzboxData.received })} />
<Block label="fritzbox.sent" value={t("common.bytes", { value: fritzboxData.sent })} />
<Block
label="fritzbox.maxDown"
value={t("common.byterate", { value: fritzboxData.maxDown / 8, decimals: 1 })}
highlightValue={fritzboxData.maxDown / 8}
/>
<Block
label="fritzbox.maxUp"
value={t("common.byterate", { value: fritzboxData.maxUp / 8, decimals: 1 })}
highlightValue={fritzboxData.maxUp / 8}
/>
<Block
label="fritzbox.down"
value={t("common.byterate", { value: fritzboxData.down, decimals: 1 })}
highlightValue={fritzboxData.down}
/>
<Block
label="fritzbox.up"
value={t("common.byterate", { value: fritzboxData.up, decimals: 1 })}
highlightValue={fritzboxData.up}
/>
<Block
label="fritzbox.received"
value={t("common.bytes", { value: fritzboxData.received })}
highlightValue={fritzboxData.received}
/>
<Block
label="fritzbox.sent"
value={t("common.bytes", { value: fritzboxData.sent })}
highlightValue={fritzboxData.sent}
/>
<Block label="fritzbox.externalIPAddress" value={fritzboxData.externalIPAddress} />
<Block label="fritzbox.externalIPv6Address" value={fritzboxData.externalIPv6Address} />
<Block label="fritzbox.externalIPv6Prefix" value={fritzboxData.externalIPv6Prefix} />

2
src/widgets/gamedig/component.jsx
View File

@@ -58,7 +58,7 @@ export default function Component({ service }) {
<Block label="gamedig.players" value={players} />
<Block label="gamedig.maxPlayers" value={maxPlayers} />
<Block label="gamedig.bots" value={bots} />
<Block label="gamedig.ping" value={ping} />
<Block label="gamedig.ping" value={ping} highlightValue={serverData.online ? serverData.ping : undefined} />
</Container>
);
}

2
src/widgets/gatus/component.jsx
View File

@@ -45,7 +45,7 @@ export default function Component({ service }) {
<Container service={service}>
<Block label="gatus.up" value={t("common.number", { value: sitesUp })} />
<Block label="gatus.down" value={t("common.number", { value: sitesDown })} />
<Block label="gatus.uptime" value={t("common.percent", { value: uptime })} />
<Block label="gatus.uptime" value={t("common.percent", { value: uptime })} highlightValue={Number(uptime)} />
</Container>
);
}

13
src/widgets/jdownloader/component.jsx
View File

@@ -31,12 +31,21 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="jdownloader.downloadCount" value={t("common.number", { value: jdownloaderData.downloadCount })} />
<Block label="jdownloader.downloadTotalBytes" value={t("common.bytes", { value: jdownloaderData.totalBytes })} />
<Block
label="jdownloader.downloadTotalBytes"
value={t("common.bytes", { value: jdownloaderData.totalBytes })}
highlightValue={jdownloaderData.totalBytes}
/>
<Block
label="jdownloader.downloadBytesRemaining"
value={t("common.bytes", { value: jdownloaderData.bytesRemaining })}
highlightValue={jdownloaderData.bytesRemaining}
/>
<Block
label="jdownloader.downloadSpeed"
value={t("common.byterate", { value: jdownloaderData.totalSpeed })}
highlightValue={jdownloaderData.totalSpeed}
/>
<Block label="jdownloader.downloadSpeed" value={t("common.byterate", { value: jdownloaderData.totalSpeed })} />
</Container>
);
}

13
src/widgets/kubernetes/component.jsx
View File

@@ -43,14 +43,23 @@ export default function Component({ service }) {
return (
<Container service={service}>
{(statsData.stats.cpuLimit && (
<Block label="docker.cpu" value={t("common.percent", { value: statsData.stats.cpuUsage })} />
<Block
label="docker.cpu"
value={t("common.percent", { value: statsData.stats.cpuUsage })}
highlightValue={statsData.stats.cpuUsage}
/>
)) || (
<Block
label="docker.cpu"
value={t("common.number", { value: statsData.stats.cpu, maximumFractionDigits: 4 })}
highlightValue={statsData.stats.cpu}
/>
)}
<Block label="docker.mem" value={t("common.bytes", { value: statsData.stats.mem })} />
<Block
label="docker.mem"
value={t("common.bytes", { value: statsData.stats.mem })}
highlightValue={statsData.stats.mem}
/>
</Container>
);
}

12
src/widgets/mikrotik/component.jsx
View File

@@ -35,8 +35,16 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="mikrotik.uptime" value={statsData.uptime} />
<Block label="mikrotik.cpuLoad" value={t("common.percent", { value: statsData["cpu-load"] })} />
<Block label="mikrotik.memoryUsed" value={t("common.percent", { value: memoryUsed })} />
<Block
label="mikrotik.cpuLoad"
value={t("common.percent", { value: statsData["cpu-load"] })}
highlightValue={statsData["cpu-load"]}
/>
<Block
label="mikrotik.memoryUsed"
value={t("common.percent", { value: memoryUsed })}
highlightValue={memoryUsed}
/>
<Block label="mikrotik.numberOfLeases" value={t("common.number", { value: numberOfLeases })} />
</Container>
);

1
src/widgets/myspeed/component.jsx
View File

@@ -54,6 +54,7 @@ export default function Component({ service }) {
style: "unit",
unit: "millisecond",
})}
highlightValue={data[0].ping}
/>
</Container>
);

15
src/widgets/nextcloud/component.jsx
View File

@@ -56,12 +56,23 @@ export default function Component({ service }) {
return (
<Container service={service}>
{showCpuLoad && (
<Block label="nextcloud.cpuload" value={t("common.percent", { value: nextcloudInfo.system.cpuload[0] })} />
<Block
label="nextcloud.cpuload"
value={t("common.percent", { value: nextcloudInfo.system.cpuload[0] })}
highlightValue={nextcloudInfo.system.cpuload[0]}
/>
)}
{showMemoryUsage && (
<Block
label="nextcloud.memoryusage"
value={t("common.percent", { value: memoryUsage })}
highlightValue={memoryUsage}
/>
)}
{showMemoryUsage && <Block label="nextcloud.memoryusage" value={t("common.percent", { value: memoryUsage })} />}
<Block
label="nextcloud.freespace"
value={t("common.bbytes", { value: nextcloudInfo.system.freespace, maximumFractionDigits: 1 })}
highlightValue={nextcloudInfo.system.freespace}
/>
<Block label="nextcloud.activeusers" value={t("common.number", { value: activeUsers.last24hours })} />
<Block label="nextcloud.numfiles" value={t("common.number", { value: nextcloudInfo.storage.num_files })} />

13
src/widgets/nzbget/component.jsx
View File

@@ -27,11 +27,20 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="nzbget.rate" value={t("common.byterate", { value: statusData.DownloadRate })} />
<Block label="nzbget.remaining" value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })} />
<Block
label="nzbget.rate"
value={t("common.byterate", { value: statusData.DownloadRate })}
highlightValue={statusData.DownloadRate}
/>
<Block
label="nzbget.remaining"
value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })}
highlightValue={statusData.RemainingSizeMB * 1024 * 1024}
/>
<Block
label="nzbget.downloaded"
value={t("common.bytes", { value: statusData.DownloadedSizeMB * 1024 * 1024 })}
highlightValue={statusData.DownloadedSizeMB * 1024 * 1024}
/>
</Container>
);

4
src/widgets/openwrt/methods/interface.jsx
View File

@@ -21,8 +21,8 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="widget.status" value={up ? t("openwrt.up") : t("openwrt.down")} />
<Block label="openwrt.bytesTx" value={t("common.bytes", { value: bytesTx })} />
<Block label="openwrt.bytesRx" value={t("common.bytes", { value: bytesRx })} />
<Block label="openwrt.bytesTx" value={t("common.bytes", { value: bytesTx })} highlightValue={bytesTx} />
<Block label="openwrt.bytesRx" value={t("common.bytes", { value: bytesRx })} highlightValue={bytesRx} />
</Container>
);
}

18
src/widgets/opnsense/component.jsx
View File

@@ -36,10 +36,22 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })} />
<Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })} highlightValue={cpu} />
<Block label="opnsense.memory" value={memory} />
{wan && <Block label="opnsense.wanUpload" value={t("common.bytes", { value: wan["bytes transmitted"] })} />}
{wan && <Block label="opnsense.wanDownload" value={t("common.bytes", { value: wan["bytes received"] })} />}
{wan && (
<Block
label="opnsense.wanUpload"
value={t("common.bytes", { value: wan["bytes transmitted"] })}
highlightValue={wan["bytes transmitted"]}
/>
)}
{wan && (
<Block
label="opnsense.wanDownload"
value={t("common.bytes", { value: wan["bytes received"] })}
highlightValue={wan["bytes received"]}
/>
)}
</Container>
);
}

12
src/widgets/peanut/component.jsx
View File

@@ -52,8 +52,16 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="peanut.battery_charge" value={t("common.percent", { value: upsData.battery_charge })} />
<Block label="peanut.ups_load" value={t("common.percent", { value: upsData.ups_load })} />
<Block
label="peanut.battery_charge"
value={t("common.percent", { value: upsData.battery_charge })}
highlightValue={upsData.battery_charge}
/>
<Block
label="peanut.ups_load"
value={t("common.percent", { value: upsData.ups_load })}
highlightValue={upsData.ups_load}
/>
<Block label="peanut.ups_status" value={status} />
</Container>
);

15
src/widgets/pfsense/component.jsx
View File

@@ -51,14 +51,25 @@ export default function Component({ service }) {
label="pfsense.load"
value={version === 1 ? systemData.data.load_avg[0] : systemData.data.cpu_load_avg[0]}
/>
<Block label="pfsense.memory" value={t("common.percent", { value: memUsage.toFixed(2) })} />
<Block
label="pfsense.memory"
value={t("common.percent", { value: memUsage.toFixed(2) })}
highlightValue={memUsage}
/>
<Block
label="pfsense.temp"
value={t("common.number", { value: systemData.data.temp_c, style: "unit", unit: "celsius" })}
highlightValue={systemData.data.temp_c}
/>
<Block label="pfsense.wanStatus" value={wan.status === "up" ? t("pfsense.up") : t("pfsense.down")} />
{showWanIP && <Block label="pfsense.wanIP" value={wan.ipaddr} />}
{showDiskUsage && <Block label="pfsense.disk" value={t("common.percent", { value: diskUsage.toFixed(2) })} />}
{showDiskUsage && (
<Block
label="pfsense.disk"
value={t("common.percent", { value: diskUsage.toFixed(2) })}
highlightValue={diskUsage}
/>
)}
</Container>
);
}

12
src/widgets/proxmox/component.jsx
View File

@@ -67,8 +67,16 @@ export default function Component({ service }) {
<Container service={service}>
<Block label="proxmox.vms" value={`${runningVMs} / ${vms.length}`} />
<Block label="proxmox.lxc" value={`${runningLXC} / ${lxc.length}`} />
<Block label="resources.cpu" value={t("common.percent", { value: (usedCpu / maxCpu) * 100 })} />
<Block label="resources.mem" value={t("common.percent", { value: (usedMemory / maxMemory) * 100 })} />
<Block
label="resources.cpu"
value={t("common.percent", { value: (usedCpu / maxCpu) * 100 })}
highlightValue={(usedCpu / maxCpu) * 100}
/>
<Block
label="resources.mem"
value={t("common.percent", { value: (usedMemory / maxMemory) * 100 })}
highlightValue={(usedMemory / maxMemory) * 100}
/>
</Container>
);
}

18
src/widgets/proxmoxbackupserver/component.jsx
View File

@@ -47,10 +47,22 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="proxmoxbackupserver.datastore_usage" value={t("common.percent", { value: datastoreUsage })} />
<Block
label="proxmoxbackupserver.datastore_usage"
value={t("common.percent", { value: datastoreUsage })}
highlightValue={datastoreUsage}
/>
<Block label="proxmoxbackupserver.failed_tasks_24h" value={failedTasks} />
<Block label="proxmoxbackupserver.cpu_usage" value={t("common.percent", { value: cpuUsage })} />
<Block label="proxmoxbackupserver.memory_usage" value={t("common.percent", { value: memoryUsage })} />
<Block
label="proxmoxbackupserver.cpu_usage"
value={t("common.percent", { value: cpuUsage })}
highlightValue={cpuUsage}
/>
<Block
label="proxmoxbackupserver.memory_usage"
value={t("common.percent", { value: memoryUsage })}
highlightValue={memoryUsage}
/>
</Container>
);
}

8
src/widgets/proxmoxvm/component.jsx
View File

@@ -25,8 +25,12 @@ export default function ProxmoxVM({ service }) {
return (
<Container service={service}>
<Block label="resources.cpu" value={t("common.percent", { value: data.cpu * 100 })} />
<Block label="resources.mem" value={t("common.bytes", { value: data.mem })} />
<Block
label="resources.cpu"
value={t("common.percent", { value: data.cpu * 100 })}
highlightValue={data.cpu * 100}
/>
<Block label="resources.mem" value={t("common.bytes", { value: data.mem })} highlightValue={data.mem} />
</Container>
);
}

6
src/widgets/pyload/component.jsx
View File

@@ -26,7 +26,11 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="pyload.speed" value={t("common.byterate", { value: pyloadData.speed })} />
<Block
label="pyload.speed"
value={t("common.byterate", { value: pyloadData.speed })}
highlightValue={pyloadData.speed}
/>
<Block label="pyload.active" value={t("common.number", { value: pyloadData.active })} />
<Block label="pyload.queue" value={t("common.number", { value: pyloadData.queue })} />
<Block label="pyload.total" value={t("common.number", { value: pyloadData.total })} />

12
src/widgets/qbittorrent/component.jsx
View File

@@ -74,9 +74,17 @@ export default function Component({ service }) {
<>
<Container service={service}>
<Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
<Block label="qbittorrent.download" value={t("common.bibyterate", { value: rateDl, decimals: 1 })} />
<Block
label="qbittorrent.download"
value={t("common.bibyterate", { value: rateDl, decimals: 1 })}
highlightValue={rateDl}
/>
<Block label="qbittorrent.seed" value={t("common.number", { value: completedCount })} />
<Block label="qbittorrent.upload" value={t("common.bibyterate", { value: rateUl, decimals: 1 })} />
<Block
label="qbittorrent.upload"
value={t("common.bibyterate", { value: rateUl, decimals: 1 })}
highlightValue={rateUl}
/>
</Container>
{widget?.enableLeechProgress &&
leechTorrents.map((queueEntry) => (

4
src/widgets/rutorrent/component.jsx
View File

@@ -34,8 +34,8 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="rutorrent.active" value={active.length} />
<Block label="rutorrent.upload" value={t("common.byterate", { value: upload })} />
<Block label="rutorrent.download" value={t("common.byterate", { value: download })} />
<Block label="rutorrent.upload" value={t("common.byterate", { value: upload })} highlightValue={upload} />
<Block label="rutorrent.download" value={t("common.byterate", { value: download })} highlightValue={download} />
</Container>
);
}

1
src/widgets/speedtest/component.jsx
View File

@@ -54,6 +54,7 @@ export default function Component({ service }) {
style: "unit",
unit: "millisecond",
})}
highlightValue={speedtestData.data.ping}
/>
</Container>
);

7
src/widgets/strelaysrv/component.jsx
View File

@@ -29,10 +29,15 @@ export default function Component({ service }) {
<Container service={service}>
<Block label="strelaysrv.numActiveSessions" value={t("common.number", { value: statsData.numActiveSessions })} />
<Block label="strelaysrv.numConnections" value={t("common.number", { value: statsData.numConnections })} />
<Block label="strelaysrv.dataRelayed" value={t("common.bytes", { value: statsData.bytesProxied })} />
<Block
label="strelaysrv.dataRelayed"
value={t("common.bytes", { value: statsData.bytesProxied })}
highlightValue={statsData.bytesProxied}
/>
<Block
label="strelaysrv.transferRate"
value={t("common.bitrate", { value: statsData.kbps10s1m5m15m30m60m[5] })}
highlightValue={statsData.kbps10s1m5m15m30m60m[5]}
/>
</Container>
);

2
src/widgets/tdarr/component.jsx
View File

@@ -46,7 +46,7 @@ export default function Component({ service }) {
<Block label="tdarr.queue" value={t("common.number", { value: queue })} />
<Block label="tdarr.processed" value={t("common.number", { value: processed })} />
<Block label="tdarr.errored" value={t("common.number", { value: errored })} />
<Block label="tdarr.saved" value={t("common.bytes", { value: saved })} />
<Block label="tdarr.saved" value={t("common.bytes", { value: saved })} highlightValue={saved} />
</Container>
);
}

4
src/widgets/transmission/component.jsx
View File

@@ -36,9 +36,9 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="transmission.leech" value={t("common.number", { value: leech })} />
<Block label="transmission.download" value={t("common.byterate", { value: rateDl })} />
<Block label="transmission.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
<Block label="transmission.seed" value={t("common.number", { value: completed })} />
<Block label="transmission.upload" value={t("common.byterate", { value: rateUl })} />
<Block label="transmission.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
</Container>
);
}

48
src/widgets/unraid/component.jsx
View File

@@ -58,35 +58,59 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block label="unraid.status" value={t(`unraid.${data.arrayState}`)} />
<Block label="unraid.memoryAvailable" value={t("common.bbytes", { value: data.memoryAvailable })} />
<Block label="unraid.memoryUsed" value={t("common.bbytes", { value: data.memoryUsed })} />
<Block
label="unraid.memoryAvailable"
value={t("common.bbytes", { value: data.memoryAvailable })}
highlightValue={data.memoryAvailable}
/>
<Block
label="unraid.memoryUsed"
value={t("common.bbytes", { value: data.memoryUsed })}
highlightValue={data.memoryUsed}
/>
<Block
field="unraid.memoryPercent"
label="unraid.memoryUsed"
value={t("common.percent", { value: data.memoryUsedPercent })}
highlightValue={data.memoryUsedPercent}
/>
<Block
label="unraid.cpu"
value={t("common.percent", { value: data.cpuPercent })}
highlightValue={data.cpuPercent}
/>
<Block label="unraid.cpu" value={t("common.percent", { value: data.cpuPercent })} />
<Block label="unraid.notifications" value={t("common.number", { value: data.unreadNotifications })} />
<Block
field="unraid.arrayUsedSpace"
label="unraid.arrayUsed"
value={t("common.bytes", { value: data.arrayUsed })}
highlightValue={data.arrayUsed}
/>
<Block
label="unraid.arrayFree"
value={t("common.bytes", { value: data.arrayFree })}
highlightValue={data.arrayFree}
/>
<Block label="unraid.arrayFree" value={t("common.bytes", { value: data.arrayFree })} />
<Block
field="unraid.arrayUsedPercent"
label="unraid.arrayUsed"
value={t("common.percent", { value: data.arrayUsedPercent })}
highlightValue={data.arrayUsedPercent}
/>
{...POOLS.flatMap((pool) =>
POOL_FIELDS.map(({ param, label, valueKey, valueType }) => (
<Block
key={`${pool}-${param}`}
field={`unraid.${pool}${param}`}
label={t(`unraid.${label}`, { pool: widget?.[pool] || pool })}
value={t(valueType, { value: data.caches?.[widget?.[pool]]?.[valueKey] || "-" })}
/>
)),
POOL_FIELDS.map(({ param, label, valueKey, valueType }) => {
const poolValue = data.caches?.[widget?.[pool]]?.[valueKey] || "-";
return (
<Block
key={`${pool}-${param}`}
field={`unraid.${pool}${param}`}
label={t(`unraid.${label}`, { pool: widget?.[pool] || pool })}
value={t(valueType, { value: poolValue })}
highlightValue={poolValue}
/>
);
}),
)}
</Container>
);

2
src/widgets/uptimekuma/component.jsx
View File

@@ -50,7 +50,7 @@ export default function Component({ service }) {
<Container service={service}>
<Block label="uptimekuma.up" value={t("common.number", { value: sitesUp })} />
<Block label="uptimekuma.down" value={t("common.number", { value: sitesDown })} />
<Block label="uptimekuma.uptime" value={t("common.percent", { value: uptime })} />
<Block label="uptimekuma.uptime" value={t("common.percent", { value: uptime })} highlightValue={Number(uptime)} />
{incidentTime && (
<Block
label="uptimekuma.incident"