percents, bytes

This commit is contained in:
shamoon
2026-03-16 18:39:26 -07:00
parent 6431fae5d6
commit d141f46a30
7 changed files with 94 additions and 27 deletions

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>

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

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>
);
}

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>
);
}

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>
);
}

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>
);
}

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>
);