diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 7a8fe0237..45402ce0d 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -374,7 +374,9 @@ "hours": "h", "crit": "Crit", "read": "Read", - "write": "Write" + "write": "Write", + "gpu": "GPU", + "mem": "Mem" }, "quicklaunch": { "bookmark": "Bookmark", diff --git a/src/widgets/glances/component.jsx b/src/widgets/glances/component.jsx index 4fa1a9ffa..310fae5ac 100644 --- a/src/widgets/glances/component.jsx +++ b/src/widgets/glances/component.jsx @@ -4,6 +4,7 @@ import Sensor from "./metrics/sensor"; import Net from "./metrics/net"; import Process from "./metrics/process"; import Disk from "./metrics/disk"; +import GPU from "./metrics/gpu"; export default function Component({ service }) { const { widget } = service; @@ -28,6 +29,10 @@ export default function Component({ service }) { return ; } + if (widget.metric.match(/^gpu:/)) { + return ; + } + if (widget.metric === "cpu") { return ; } diff --git a/src/widgets/glances/metrics/gpu.jsx b/src/widgets/glances/metrics/gpu.jsx new file mode 100644 index 000000000..edd603e3d --- /dev/null +++ b/src/widgets/glances/metrics/gpu.jsx @@ -0,0 +1,104 @@ +import dynamic from "next/dynamic"; +import { useState, useEffect } from "react"; +import { useTranslation } from "next-i18next"; + +import Error from "../components/error"; +import Container from "../components/container"; +import Block from "../components/block"; + +import useWidgetAPI from "utils/proxy/use-widget-api"; + +const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false }); + +const pointsLimit = 15; + +export default function Component({ service }) { + const { t } = useTranslation(); + const { widget } = service; + const [, gpuName] = widget.metric.split(':'); + + const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit)); + + const { data, error } = useWidgetAPI(widget, 'gpu', { + refreshInterval: 1000, + }); + + useEffect(() => { + if (data) { + // eslint-disable-next-line eqeqeq + const gpuData = data.find((item) => item[item.key] == gpuName); + + if (gpuData) { + setDataPoints((prevDataPoints) => { + const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }]; + if (newDataPoints.length > pointsLimit) { + newDataPoints.shift(); + } + return newDataPoints; + }); + } + } + }, [data, gpuName]); + + if (error) { + return ; + } + + if (!data) { + return -; + } + + // eslint-disable-next-line eqeqeq + const gpuData = data.find((item) => item[item.key] == gpuName); + + if (!gpuData) { + return -; + } + + return ( + + t("common.percent", { + value, + maximumFractionDigits: 1, + })} + /> + + + {gpuData && gpuData.name && ( +
+ {gpuData.name} +
+ )} + +
+ {t("common.number", { + value: gpuData.mem, + maximumFractionDigits: 1, + })}% {t("glances.mem")} {t("resources.used")} +
+
+ + +
+ {t("common.number", { + value: gpuData.proc, + maximumFractionDigits: 1, + })}% {t("glances.gpu")} +
+
+ + +
+ {t("common.number", { + value: gpuData.temperature, + maximumFractionDigits: 1, + })}° +
+
+
+ ); +}