From 17b0f635d88e324589fe01ababd633630e0cb387 Mon Sep 17 00:00:00 2001 From: Ben Phelps Date: Wed, 6 Sep 2023 13:53:39 +0300 Subject: [PATCH] mini-non-chart charts --- public/locales/en/common.json | 1 + src/utils/config/service-helpers.js | 150 +++++++++++------- src/widgets/glances/components/container.jsx | 5 +- src/widgets/glances/metrics/cpu.jsx | 43 +++-- src/widgets/glances/metrics/disk.jsx | 29 ++-- src/widgets/glances/metrics/fs.jsx | 56 ++++--- src/widgets/glances/metrics/gpu.jsx | 105 +++++++++---- src/widgets/glances/metrics/info.jsx | 155 ++++++++++++------- src/widgets/glances/metrics/memory.jsx | 45 ++++-- src/widgets/glances/metrics/net.jsx | 37 +++-- src/widgets/glances/metrics/process.jsx | 6 +- src/widgets/glances/metrics/sensor.jsx | 44 ++++-- 12 files changed, 434 insertions(+), 242 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index cc7674f02..9a6da7a45 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -365,6 +365,7 @@ "load": "Load", "wait": "Please wait", "temp": "TEMP", + "_temp": "Temp", "warn": "Warn", "uptime": "UP", "total": "Total", diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js index a9af9cd07..023c89e3e 100644 --- a/src/utils/config/service-helpers.js +++ b/src/utils/config/service-helpers.js @@ -13,7 +13,6 @@ import getKubeConfig from "utils/config/kubernetes"; const logger = createLogger("service-helpers"); - export async function servicesFromConfig() { checkAndCopyConfig("services.yaml"); @@ -32,14 +31,14 @@ export async function servicesFromConfig() { services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({ name: Object.keys(entries)[0], ...entries[Object.keys(entries)[0]], - type: 'service' + type: "service", })), })); // add default weight to services based on their position in the configuration servicesArray.forEach((group, groupIndex) => { group.services.forEach((service, serviceIndex) => { - if(!service.weight) { + if (!service.weight) { servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100; } }); @@ -66,7 +65,9 @@ export async function servicesFromDocker() { const isSwarm = !!servers[serverName].swarm; const docker = new Docker(getDockerArguments(serverName).conn); const listProperties = { all: true }; - const containers = await ((isSwarm) ? docker.listServices(listProperties) : docker.listContainers(listProperties)); + const containers = await (isSwarm + ? docker.listServices(listProperties) + : docker.listContainers(listProperties)); // bad docker connections can result in a object? // in any case, this ensures the result is the expected array @@ -76,8 +77,8 @@ export async function servicesFromDocker() { const discovered = containers.map((container) => { let constructedService = null; - const containerLabels = isSwarm ? shvl.get(container, 'Spec.Labels') : container.Labels; - const containerName = isSwarm ? shvl.get(container, 'Spec.Name') : container.Names[0]; + const containerLabels = isSwarm ? shvl.get(container, "Spec.Labels") : container.Labels; + const containerName = isSwarm ? shvl.get(container, "Spec.Name") : container.Names[0]; Object.keys(containerLabels).forEach((label) => { if (label.startsWith("homepage.")) { @@ -85,10 +86,14 @@ export async function servicesFromDocker() { constructedService = { container: containerName.replace(/^\//, ""), server: serverName, - type: 'service' + type: "service", }; } - shvl.set(constructedService, label.replace("homepage.", ""), substituteEnvironmentVars(containerLabels[label])); + shvl.set( + constructedService, + label.replace("homepage.", ""), + substituteEnvironmentVars(containerLabels[label]) + ); } }); @@ -132,12 +137,12 @@ export async function servicesFromDocker() { function getUrlFromIngress(ingress) { const urlHost = ingress.spec.rules[0].host; const urlPath = ingress.spec.rules[0].http.paths[0].path; - const urlSchema = ingress.spec.tls ? 'https' : 'http'; + const urlSchema = ingress.spec.tls ? "https" : "http"; return `${urlSchema}://${urlHost}${urlPath}`; } export async function servicesFromKubernetes() { - const ANNOTATION_BASE = 'gethomepage.dev'; + const ANNOTATION_BASE = "gethomepage.dev"; const ANNOTATION_WIDGET_BASE = `${ANNOTATION_BASE}/widget.`; const ANNOTATION_POD_SELECTOR = `${ANNOTATION_BASE}/pod-selector`; @@ -151,39 +156,52 @@ export async function servicesFromKubernetes() { const networking = kc.makeApiClient(NetworkingV1Api); const crd = kc.makeApiClient(CustomObjectsApi); - const ingressList = await networking.listIngressForAllNamespaces(null, null, null, null) + const ingressList = await networking + .listIngressForAllNamespaces(null, null, null, null) .then((response) => response.body) .catch((error) => { logger.error("Error getting ingresses: %d %s %s", error.statusCode, error.body, error.response); return null; }); - const traefikIngressListContaino = await crd.listClusterCustomObject("traefik.containo.us", "v1alpha1", "ingressroutes") + const traefikIngressListContaino = await crd + .listClusterCustomObject("traefik.containo.us", "v1alpha1", "ingressroutes") .then((response) => response.body) .catch(async (error) => { if (error.statusCode !== 404) { - logger.error("Error getting traefik ingresses from traefik.containo.us: %d %s %s", error.statusCode, error.body, error.response); + logger.error( + "Error getting traefik ingresses from traefik.containo.us: %d %s %s", + error.statusCode, + error.body, + error.response + ); } return []; }); - const traefikIngressListIo = await crd.listClusterCustomObject("traefik.io", "v1alpha1", "ingressroutes") + const traefikIngressListIo = await crd + .listClusterCustomObject("traefik.io", "v1alpha1", "ingressroutes") .then((response) => response.body) .catch(async (error) => { if (error.statusCode !== 404) { - logger.error("Error getting traefik ingresses from traefik.io: %d %s %s", error.statusCode, error.body, error.response); - } - + logger.error( + "Error getting traefik ingresses from traefik.io: %d %s %s", + error.statusCode, + error.body, + error.response + ); + } + return []; }); - - + const traefikIngressList = [...traefikIngressListContaino, ...traefikIngressListIo]; if (traefikIngressList && traefikIngressList.items.length > 0) { - const traefikServices = traefikIngressList.items - .filter((ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/href`]) + const traefikServices = traefikIngressList.items.filter( + (ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/href`] + ); ingressList.items.push(...traefikServices); } @@ -191,43 +209,51 @@ export async function servicesFromKubernetes() { return []; } const services = ingressList.items - .filter((ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/enabled`] === 'true') + .filter( + (ingress) => + ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/enabled`] === "true" + ) .map((ingress) => { - let constructedService = { - app: ingress.metadata.name, - namespace: ingress.metadata.namespace, - href: ingress.metadata.annotations[`${ANNOTATION_BASE}/href`] || getUrlFromIngress(ingress), - name: ingress.metadata.annotations[`${ANNOTATION_BASE}/name`] || ingress.metadata.name, - group: ingress.metadata.annotations[`${ANNOTATION_BASE}/group`] || "Kubernetes", - weight: ingress.metadata.annotations[`${ANNOTATION_BASE}/weight`] || '0', - icon: ingress.metadata.annotations[`${ANNOTATION_BASE}/icon`] || '', - description: ingress.metadata.annotations[`${ANNOTATION_BASE}/description`] || '', - external: false, - type: 'service' - }; - if (ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]) { - constructedService.external = String(ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]).toLowerCase() === "true" - } - if (ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]) { - constructedService.podSelector = ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]; - } - if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) { - constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]; - } - Object.keys(ingress.metadata.annotations).forEach((annotation) => { - if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) { - shvl.set(constructedService, annotation.replace(`${ANNOTATION_BASE}/`, ""), ingress.metadata.annotations[annotation]); + let constructedService = { + app: ingress.metadata.name, + namespace: ingress.metadata.namespace, + href: ingress.metadata.annotations[`${ANNOTATION_BASE}/href`] || getUrlFromIngress(ingress), + name: ingress.metadata.annotations[`${ANNOTATION_BASE}/name`] || ingress.metadata.name, + group: ingress.metadata.annotations[`${ANNOTATION_BASE}/group`] || "Kubernetes", + weight: ingress.metadata.annotations[`${ANNOTATION_BASE}/weight`] || "0", + icon: ingress.metadata.annotations[`${ANNOTATION_BASE}/icon`] || "", + description: ingress.metadata.annotations[`${ANNOTATION_BASE}/description`] || "", + external: false, + type: "service", + }; + if (ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]) { + constructedService.external = + String(ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]).toLowerCase() === "true"; } - }); + if (ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]) { + constructedService.podSelector = ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]; + } + if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) { + constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]; + } + Object.keys(ingress.metadata.annotations).forEach((annotation) => { + if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) { + shvl.set( + constructedService, + annotation.replace(`${ANNOTATION_BASE}/`, ""), + ingress.metadata.annotations[annotation] + ); + } + }); - try { - constructedService = JSON.parse(substituteEnvironmentVars(JSON.stringify(constructedService))); - } catch (e) { - logger.error("Error attempting k8s environment variable substitution."); - } + try { + constructedService = JSON.parse(substituteEnvironmentVars(JSON.stringify(constructedService))); + } catch (e) { + logger.error("Error attempting k8s environment variable substitution."); + } - return constructedService; - }); + return constructedService; + }); const mappedServiceGroups = []; @@ -251,7 +277,6 @@ export async function servicesFromKubernetes() { }); return mappedServiceGroups; - } catch (e) { logger.error(e); throw e; @@ -264,7 +289,7 @@ export function cleanServiceGroups(groups) { services: serviceGroup.services.map((service) => { const cleanedService = { ...service }; if (cleanedService.showStats !== undefined) cleanedService.showStats = JSON.parse(cleanedService.showStats); - if (typeof service.weight === 'string') { + if (typeof service.weight === "string") { const weight = parseInt(service.weight, 10); if (Number.isNaN(weight)) { cleanedService.weight = 0; @@ -303,6 +328,7 @@ export function cleanServiceGroups(groups) { userEmail, // azuredevops repositoryId, metric, // glances + chart, // glances stream, // mjpeg fit, method, // openmediavault widget @@ -311,9 +337,10 @@ export function cleanServiceGroups(groups) { } = cleanedService.widget; let fieldsList = fields; - if (typeof fields === 'string') { - try { JSON.parse(fields) } - catch (e) { + if (typeof fields === "string") { + try { + JSON.parse(fields); + } catch (e) { logger.error("Invalid fields list detected in config for service '%s'", service.name); fieldsList = null; } @@ -373,6 +400,11 @@ export function cleanServiceGroups(groups) { } if (type === "glances") { if (metric) cleanedService.widget.metric = metric; + if (chart !== undefined) { + cleanedService.widget.chart = chart; + } else { + cleanedService.widget.chart = true; + } } if (type === "mjpeg") { if (stream) cleanedService.widget.stream = stream; diff --git a/src/widgets/glances/components/container.jsx b/src/widgets/glances/components/container.jsx index b27553051..fc642986f 100644 --- a/src/widgets/glances/components/container.jsx +++ b/src/widgets/glances/components/container.jsx @@ -1,9 +1,10 @@ -export default function Container({ children, className = "" }) { +export default function Container({ children, chart = true, className = "" }) { return (
{children}
-
+ { chart &&
} + { !chart &&
}
); } diff --git a/src/widgets/glances/metrics/cpu.jsx b/src/widgets/glances/metrics/cpu.jsx index f3acd0450..d0c5d943f 100644 --- a/src/widgets/glances/metrics/cpu.jsx +++ b/src/widgets/glances/metrics/cpu.jsx @@ -14,6 +14,8 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); + const { widget } = service; + const { chart } = widget; const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); @@ -44,32 +46,45 @@ export default function Component({ service }) { } return ( - - t("common.number", { - value, - style: "unit", - unit: "percent", - maximumFractionDigits: 0, - })} - /> + + { chart && ( + t("common.number", { + value, + style: "unit", + unit: "percent", + maximumFractionDigits: 0, + })} + /> + )} + + { !chart && ( + +
+ {systemData.linux_distro && `${systemData.linux_distro} - ` } + {systemData.os_version && systemData.os_version } +
+ + )} {systemData && !systemError && ( - {systemData.linux_distro && ( + {systemData.linux_distro && chart && (
{systemData.linux_distro}
)} - {systemData.os_version && ( + + {systemData.os_version && chart && (
{systemData.os_version}
)} + {systemData.hostname && ( -
+
{systemData.hostname}
)} diff --git a/src/widgets/glances/metrics/disk.jsx b/src/widgets/glances/metrics/disk.jsx index e831a7001..c08a6f64e 100644 --- a/src/widgets/glances/metrics/disk.jsx +++ b/src/widgets/glances/metrics/disk.jsx @@ -15,6 +15,7 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; + const { chart } = widget; const [, diskName] = widget.metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit)); @@ -65,24 +66,26 @@ export default function Component({ service }) { const currentRate = diskRates[diskRates.length - 1]; return ( - - t("common.bitrate", { - value, - })} - /> + + { chart && ( + t("common.bitrate", { + value, + })} + /> + )} {currentRate && !error && ( - -
+ +
{t("common.bitrate", { value: currentRate.a, })} {t("glances.read")}
-
+
{t("common.bitrate", { value: currentRate.b, })} {t("glances.write")} @@ -90,7 +93,7 @@ export default function Component({ service }) { )} - +
{t("common.bitrate", { value: currentRate.a + currentRate.b, diff --git a/src/widgets/glances/metrics/fs.jsx b/src/widgets/glances/metrics/fs.jsx index 1a468ef69..e94bf3c86 100644 --- a/src/widgets/glances/metrics/fs.jsx +++ b/src/widgets/glances/metrics/fs.jsx @@ -9,6 +9,7 @@ import useWidgetAPI from "utils/proxy/use-widget-api"; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; + const { chart } = widget; const [, fsName] = widget.metric.split(':'); const { data, error } = useWidgetAPI(widget, 'fs', { @@ -30,35 +31,52 @@ export default function Component({ service }) { } return ( - -
-
+ + { chart && ( +
+ height: `${Math.max(20, (fsData.size/fsData.free))}%`, + }} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" /> +
+ )} + + + { fsData.used && chart && ( +
{t("common.bbytes", { value: fsData.used, maximumFractionDigits: 0, })} {t("resources.used")}
-
- {t("common.bbytes", { - value: fsData.free, - maximumFractionDigits: 0, - })} {t("resources.free")} -
-
+ )} + +
+ {t("common.bbytes", { + value: fsData.free, + maximumFractionDigits: 0, + })} {t("resources.free")} +
+ + + { !chart && ( + + {fsData.used && ( +
+ {t("common.bbytes", { + value: fsData.used, + maximumFractionDigits: 0, + })} {t("resources.used")} +
+ )} + + )} - -
+ +
{t("common.bbytes", { value: fsData.size, maximumFractionDigits: 1, - })} + })} {t("resources.total")}
diff --git a/src/widgets/glances/metrics/gpu.jsx b/src/widgets/glances/metrics/gpu.jsx index c83710cef..c706073b4 100644 --- a/src/widgets/glances/metrics/gpu.jsx +++ b/src/widgets/glances/metrics/gpu.jsx @@ -15,6 +15,7 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; + const { chart } = widget; const [, gpuName] = widget.metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit)); @@ -56,48 +57,84 @@ export default function Component({ service }) { } return ( - - t("common.percent", { - value, - maximumFractionDigits: 1, - })} - /> - - - {gpuData && gpuData.name && ( -
- {gpuData.name} -
- )} - -
- {t("common.number", { - value: gpuData.mem, + + { chart && ( + t("common.percent", { + value, maximumFractionDigits: 1, - })}% {t("glances.mem")} {t("resources.used")} -
- + })} + /> + )} + + { chart && ( + + {gpuData && gpuData.name && ( +
+ {gpuData.name} +
+ )} + +
+ {t("common.number", { + value: gpuData.mem, + maximumFractionDigits: 1, + })}% {t("resources.mem")} +
+ + )} + + { !chart && ( + +
+ {t("common.number", { + value: gpuData.temperature, + maximumFractionDigits: 1, + })}° C +
+ + )}
- {t("common.number", { - value: gpuData.proc, - maximumFractionDigits: 1, - })}% {t("glances.gpu")} + {!chart && ( +
+ {t("common.number", { + value: gpuData.proc, + maximumFractionDigits: 1, + })}% {t("glances.gpu")} +
+ )} + { !chart && ( + <>• + )} +
+ {t("common.number", { + value: gpuData.proc, + maximumFractionDigits: 1, + })}% {t("glances.gpu")} +
-
- {t("common.number", { - value: gpuData.temperature, - maximumFractionDigits: 1, - })}° -
+ { chart && ( +
+ {t("common.number", { + value: gpuData.temperature, + maximumFractionDigits: 1, + })}° C +
+ )} + + {gpuData && gpuData.name && !chart && ( +
+ {gpuData.name} +
+ )} ); diff --git a/src/widgets/glances/metrics/info.jsx b/src/widgets/glances/metrics/info.jsx index 0f82a5aff..fd854d726 100644 --- a/src/widgets/glances/metrics/info.jsx +++ b/src/widgets/glances/metrics/info.jsx @@ -6,9 +6,65 @@ import Block from "../components/block"; import useWidgetAPI from "utils/proxy/use-widget-api"; -export default function Component({ service }) { + +function Swap({ quicklookData, className = "" }) { const { t } = useTranslation(); + return quicklookData && quicklookData.swap !== 0 && ( +
+
{t("glances.swap")}
+
+ {t("common.number", { + value: quicklookData.swap, + style: "unit", + unit: "percent", + maximumFractionDigits: 0, + })} +
+
+ ); +} + +function CPU({ quicklookData, className = "" }) { + const { t } = useTranslation(); + + return quicklookData && quicklookData.cpu && ( +
+
{t("glances.cpu")}
+
+ {t("common.number", { + value: quicklookData.cpu, + style: "unit", + unit: "percent", + maximumFractionDigits: 0, + })} +
+
+ ); +} + +function Mem({ quicklookData, className = "" }) { + const { t } = useTranslation(); + + return quicklookData && quicklookData.mem && ( +
+
{t("glances.mem")}
+
+ {t("common.number", { + value: quicklookData.mem, + style: "unit", + unit: "percent", + maximumFractionDigits: 0, + })} +
+
+ ); +} + +export default function Component({ service }) { + const { widget } = service; + const { chart } = widget; + const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', { refreshInterval: 1000, }); @@ -41,74 +97,59 @@ export default function Component({ service }) { return ( - + - {quicklookData && quicklookData.cpu_name && ( + {quicklookData && quicklookData.cpu_name && chart && (
{quicklookData.cpu_name}
)} - - - {systemData && systemData.linux_distro && ( -
- {systemData.linux_distro} -
- )} - {systemData && systemData.os_version && ( -
- {systemData.os_version} -
- )} - {systemData && systemData.hostname && ( -
- {systemData.hostname} + + { !chart && quicklookData?.swap === 0 && ( +
+ {quicklookData.cpu_name}
)} + +
+ { !chart && } +
- - {quicklookData && quicklookData.cpu && ( -
-
{t("glances.cpu")}
-
- {t("common.number", { - value: quicklookData.cpu, - style: "unit", - unit: "percent", - maximumFractionDigits: 0, - })} -
-
- )} - {quicklookData && quicklookData.mem && ( -
-
{t("glances.mem")}
-
- {t("common.number", { - value: quicklookData.mem, - style: "unit", - unit: "percent", - maximumFractionDigits: 0, - })} + {chart && ( + + {systemData && systemData.linux_distro && ( +
+ {systemData.linux_distro}
-
- )} - - {quicklookData && quicklookData.swap !== 0 && ( -
-
{t("glances.swap")}
-
- {t("common.number", { - value: quicklookData.swap, - style: "unit", - unit: "percent", - maximumFractionDigits: 0, - })} + )} + {systemData && systemData.os_version && ( +
+ {systemData.os_version}
-
- )} + )} + {systemData && systemData.hostname && ( +
+ {systemData.hostname} +
+ )} + + )} + + {!chart && ( + + + + )} + + + { chart && } + + { chart && } + { !chart && } + + { chart && } ); diff --git a/src/widgets/glances/metrics/memory.jsx b/src/widgets/glances/metrics/memory.jsx index 7ff3dda47..183bc97de 100644 --- a/src/widgets/glances/metrics/memory.jsx +++ b/src/widgets/glances/metrics/memory.jsx @@ -14,11 +14,14 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); + const { widget } = service; + const { chart } = widget; + const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const { data, error } = useWidgetAPI(service.widget, 'mem', { - refreshInterval: 1000, + refreshInterval: chart ? 1000 : 5000, }); useEffect(() => { @@ -42,21 +45,23 @@ export default function Component({ service }) { } return ( - - t("common.bytes", { - value, - maximumFractionDigits: 0, - binary: true, - })} - /> + + {chart && ( + t("common.bytes", { + value, + maximumFractionDigits: 0, + binary: true, + })} + /> + )} {data && !error && ( - {data.free && ( + {data.free && chart && (
{t("common.bytes", { value: data.free, @@ -78,6 +83,20 @@ export default function Component({ service }) { )} + { !chart && ( + + {data.free && ( +
+ {t("common.bytes", { + value: data.free, + maximumFractionDigits: 0, + binary: true, + })} {t("resources.free")} +
+ )} + + )} +
{t("common.bytes", { diff --git a/src/widgets/glances/metrics/net.jsx b/src/widgets/glances/metrics/net.jsx index adc325bb1..688d105d3 100644 --- a/src/widgets/glances/metrics/net.jsx +++ b/src/widgets/glances/metrics/net.jsx @@ -15,12 +15,13 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; - const [, interfaceName] = widget.metric.split(':'); + const { chart, metric } = widget; + const [, interfaceName] = metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const { data, error } = useWidgetAPI(widget, 'network', { - refreshInterval: 1000, + refreshInterval: chart ? 1000 : 5000, }); useEffect(() => { @@ -54,18 +55,20 @@ export default function Component({ service }) { } return ( - - t("common.byterate", { - value, - maximumFractionDigits: 0, - })} - /> + + { chart && ( + t("common.byterate", { + value, + maximumFractionDigits: 0, + })} + /> + )} - {interfaceData && interfaceData.interface_name && ( + {interfaceData && interfaceData.interface_name && chart && (
{interfaceData.interface_name}
@@ -79,6 +82,16 @@ export default function Component({ service }) {
+ { !chart && ( + + {interfaceData && interfaceData.interface_name && ( +
+ {interfaceData.interface_name} +
+ )} + + )} +
{t("common.bitrate", { diff --git a/src/widgets/glances/metrics/process.jsx b/src/widgets/glances/metrics/process.jsx index 3ff63a569..51b788244 100644 --- a/src/widgets/glances/metrics/process.jsx +++ b/src/widgets/glances/metrics/process.jsx @@ -19,6 +19,8 @@ const statusMap = { export default function Component({ service }) { const { t } = useTranslation(); + const { widget } = service; + const { chart } = widget; const { data, error } = useWidgetAPI(service.widget, 'processlist', { refreshInterval: 1000, @@ -32,10 +34,10 @@ export default function Component({ service }) { return -; } - data.splice(5); + data.splice(chart ? 5 : 1); return ( - +
diff --git a/src/widgets/glances/metrics/sensor.jsx b/src/widgets/glances/metrics/sensor.jsx index 02ce68122..aee25394e 100644 --- a/src/widgets/glances/metrics/sensor.jsx +++ b/src/widgets/glances/metrics/sensor.jsx @@ -15,6 +15,7 @@ const pointsLimit = 15; export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; + const { chart } = widget; const [, sensorName] = widget.metric.split(':'); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); @@ -51,37 +52,46 @@ export default function Component({ service }) { } return ( - - t("common.number", { - value, - })} - /> + + { chart && ( + t("common.number", { + value, + })} + /> + )} {sensorData && !error && ( - {sensorData.warning && ( + {sensorData.warning && chart && (
- {sensorData.warning}{sensorData.unit} {t("glances.warn")} + {t("glances.warn")} {sensorData.warning} {sensorData.unit}
)} {sensorData.critical && (
- {sensorData.critical} {sensorData.unit} {t("glances.crit")} + {t("glances.crit")} {sensorData.critical} {sensorData.unit}
)} )} -
- {t("common.number", { - value: sensorData.value, - })} {sensorData.unit} -
+
+ {sensorData.warning && !chart && ( + <> + {t("glances.warn")} {sensorData.warning} {sensorData.unit} + + )} +
+
+ {t("glances.temp")} {t("common.number", { + value: sensorData.value, + })} {sensorData.unit} +
);