Enhancement: Add enablePools option to TrueNAS service widget (#2908)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
Derek Stotz 2024-02-15 23:38:55 -06:00 committed by GitHub
parent a251c34059
commit 0d47dcaac7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 77 additions and 35 deletions

View file

@ -3,6 +3,7 @@ import { useTranslation } from "next-i18next";
import Container from "components/services/widget/container";
import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api";
import Pool from "widgets/truenas/pool";
export default function Component({ service }) {
const { t } = useTranslation();
@ -11,9 +12,10 @@ export default function Component({ service }) {
const { data: alertData, error: alertError } = useWidgetAPI(widget, "alerts");
const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
const { data: poolsData, error: poolsError } = useWidgetAPI(widget, "pools");
if (alertError || statusError) {
const finalError = alertError ?? statusError;
if (alertError || statusError || poolsError) {
const finalError = alertError ?? statusError ?? poolsError;
return <Container service={service} error={finalError} />;
}
@ -27,11 +29,19 @@ export default function Component({ service }) {
);
}
const enablePools = widget?.enablePools && Array.isArray(poolsData) && poolsData.length > 0;
return (
<Container service={service}>
<Block label="truenas.load" value={t("common.number", { value: statusData.loadavg[0] })} />
<Block label="truenas.uptime" value={t("common.uptime", { value: statusData.uptime_seconds })} />
<Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
</Container>
<>
<Container service={service}>
<Block label="truenas.load" value={t("common.number", { value: statusData.loadavg[0] })} />
<Block label="truenas.uptime" value={t("common.uptime", { value: statusData.uptime_seconds })} />
<Block label="truenas.alerts" value={t("common.number", { value: alertData.pending })} />
</Container>
{enablePools &&
poolsData.map((pool) => (
<Pool key={pool.id} name={pool.name} healthy={pool.healthy} allocated={pool.allocated} free={pool.free} />
))}
</>
);
}

View file

@ -0,0 +1,31 @@
import classNames from "classnames";
import prettyBytes from "pretty-bytes";
export default function Pool({ name, free, allocated, healthy }) {
const total = free + allocated;
const usedPercent = Math.round((allocated / total) * 100);
const statusColor = healthy ? "bg-green-500" : "bg-yellow-500";
return (
<div className="flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<div
className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
style={{
width: `${usedPercent}%`,
}}
/>
<span className="ml-2 h-2 w-2 z-10">
<span className={classNames("block w-2 h-2 rounded", statusColor)} />
</span>
<div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
<div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden text-left">{name}</div>
</div>
<div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
<span>
{prettyBytes(allocated)} / {prettyBytes(total)}
</span>
<span className="pl-2">({usedPercent}%)</span>
</div>
</div>
);
}

View file

@ -1,32 +1,9 @@
import { jsonArrayFilter } from "utils/proxy/api-helpers";
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
import genericProxyHandler from "utils/proxy/handlers/generic";
import getServiceWidget from "utils/config/service-helpers";
import { asJson, jsonArrayFilter } from "utils/proxy/api-helpers";
const widget = {
api: "{url}/api/v2.0/{endpoint}",
proxyHandler: async (req, res, map) => {
// choose proxy handler based on widget settings
const { group, service } = req.query;
if (group && service) {
const widgetOpts = await getServiceWidget(group, service);
let handler;
if (widgetOpts.username && widgetOpts.password) {
handler = genericProxyHandler;
} else if (widgetOpts.key) {
handler = credentialedProxyHandler;
}
if (handler) {
return handler(req, res, map);
}
return res.status(500).json({ error: "Username / password or API key required" });
}
return res.status(500).json({ error: "Error parsing widget request" });
},
proxyHandler: credentialedProxyHandler,
mappings: {
alerts: {
@ -39,6 +16,17 @@ const widget = {
endpoint: "system/info",
validate: ["loadavg", "uptime_seconds"],
},
pools: {
endpoint: "pool",
map: (data) =>
asJson(data).map((entry) => ({
id: entry.name,
name: entry.name,
healthy: entry.healthy,
allocated: entry.allocated,
free: entry.free,
})),
},
},
};