Enhancement: support for glances v4 (#3196)

docs/widgets/info/glances.md

@@ -12,6 +12,7 @@ The Glances widget allows you to monitor the resources (CPU, memory, storage, te
     url: http://host.or.ip:port
     username: user # optional if auth enabled in Glances
     password: pass # optional if auth enabled in Glances
+    version: 4 # required only if running glances v4 or higher, defaults to 3
     cpu: true # optional, enabled by default, disable by setting to false
     mem: true # optional, enabled by default, disable by setting to false
     cputemp: true # disabled by default

docs/widgets/services/glances.md

@@ -17,6 +17,7 @@ widget:
   url: http://glances.host.or.ip:port
   username: user # optional if auth enabled in Glances
   password: pass # optional if auth enabled in Glances
+  version: 4 # required only if running glances v4 or higher, defaults to 3
   metric: cpu
   diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
   refreshInterval: 5000 # optional - in milliseconds, defaults to 1000 or more, depending on the metric

src/pages/api/widgets/glances.js

@@ -13,7 +13,7 @@ async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
     throw new Error(errorMessage);
   }
 
-  const apiUrl = `${url}/api/3/${endpoint}`;
+  const apiUrl = `${url}/api/${privateWidgetOptions.version}/${endpoint}`;
   const headers = {
     "Accept-Encoding": "application/json",
   };
@@ -42,9 +42,10 @@ async function retrieveFromGlancesAPI(privateWidgetOptions, endpoint) {
 }
 
 export default async function handler(req, res) {
-  const { index, cputemp: includeCpuTemp, uptime: includeUptime, disk: includeDisks } = req.query;
+  const { index, cputemp: includeCpuTemp, uptime: includeUptime, disk: includeDisks, version } = req.query;
 
   const privateWidgetOptions = await getPrivateWidgetOptions("glances", index);
+  privateWidgetOptions.version = version ?? 3;
 
   try {
     const cpuData = await retrieveFromGlancesAPI(privateWidgetOptions, "cpu");

src/utils/config/service-helpers.js

@@ -394,6 +394,7 @@ export function cleanServiceGroups(groups) {
           enableNowPlaying,
 
           // glances
+          version,
           chart,
           metric,
           pointsLimit,
@@ -528,6 +529,7 @@ export function cleanServiceGroups(groups) {
           if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
         }
         if (type === "glances") {
+          if (version) cleanedService.widget.version = version;
           if (metric) cleanedService.widget.metric = metric;
           if (chart !== undefined) {
             cleanedService.widget.chart = chart;

src/widgets/glances/metrics/cpu.jsx

@@ -16,15 +16,16 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "cpu", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
-  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook");
+  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook", { version });
 
   useEffect(() => {
     if (data) {

src/widgets/glances/metrics/disk.jsx

@@ -16,7 +16,7 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const [, diskName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(
@@ -26,6 +26,7 @@ export default function Component({ service }) {
 
   const { data, error } = useWidgetAPI(service.widget, "diskio", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   const calculateRates = (d) =>

src/widgets/glances/metrics/fs.jsx

@@ -11,12 +11,13 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
   const [, fsName] = widget.metric.split("fs:");
   const diskUnits = widget.diskUnits === "bbytes" ? "common.bbytes" : "common.bytes";
 
   const { data, error } = useWidgetAPI(widget, "fs", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   if (error) {

src/widgets/glances/metrics/gpu.jsx

@@ -16,13 +16,14 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   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: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   useEffect(() => {

src/widgets/glances/metrics/info.jsx

@@ -74,14 +74,16 @@ const defaultSystemInterval = 30000; // This data (OS, hostname, distribution) i
 
 export default function Component({ service }) {
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
 
   const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, "quicklook", {
     refreshInterval,
+    version,
   });
 
   const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, "system", {
     refreshInterval: defaultSystemInterval,
+    version,
   });
 
   if (quicklookError) {

src/widgets/glances/metrics/memory.jsx

@@ -17,12 +17,13 @@ export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart } = widget;
-  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "mem", {
     refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+    version,
   });
 
   useEffect(() => {

src/widgets/glances/metrics/net.jsx

@@ -17,7 +17,10 @@ export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart, metric } = widget;
-  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit, version = 3 } = widget;
+
+  const rxKey = version === 3 ? "rx" : "bytes_recv";
+  const txKey = version === 3 ? "tx" : "bytes_sent";
 
   const [, interfaceName] = metric.split(":");
 
@@ -25,6 +28,7 @@ export default function Component({ service }) {
 
   const { data, error } = useWidgetAPI(widget, "network", {
     refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+    version,
   });
 
   useEffect(() => {
@@ -36,8 +40,8 @@ export default function Component({ service }) {
           const newDataPoints = [
             ...prevDataPoints,
             {
-              a: (interfaceData.rx * 8) / interfaceData.time_since_update,
+              a: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
-              b: (interfaceData.tx * 8) / interfaceData.time_since_update,
+              b: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
             },
           ];
           if (newDataPoints.length > pointsLimit) {
@@ -97,7 +101,7 @@ export default function Component({ service }) {
 
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
-            value: (interfaceData.rx * 8) / interfaceData.time_since_update,
+            value: (interfaceData[rxKey] * 8) / interfaceData.time_since_update,
             maximumFractionDigits: 0,
           })}{" "}
           {t("docker.rx")}
@@ -115,7 +119,7 @@ export default function Component({ service }) {
       <Block position="bottom-3 right-3">
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
-            value: (interfaceData.tx * 8) / interfaceData.time_since_update,
+            value: (interfaceData[txKey] * 8) / interfaceData.time_since_update,
             maximumFractionDigits: 0,
           })}{" "}
           {t("docker.tx")}

src/widgets/glances/metrics/process.jsx

@@ -22,10 +22,13 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval } = widget;
+  const { chart, refreshInterval = defaultInterval, version = 3 } = widget;
+
+  const memoryInfoKey = version === 3 ? 0 : "data";
 
   const { data, error } = useWidgetAPI(service.widget, "processlist", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   if (error) {
@@ -66,7 +69,7 @@ export default function Component({ service }) {
                 <div className="opacity-25 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
                 <div className="opacity-25 w-14 text-right">
                   {t("common.bytes", {
-                    value: item.memory_info[0],
+                    value: item.memory_info[memoryInfoKey],
                     maximumFractionDigits: 0,
                   })}
                 </div>

src/widgets/glances/metrics/sensor.jsx

@@ -16,13 +16,14 @@ const defaultInterval = 1000;
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit, version = 3 } = widget;
   const [, sensorName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "sensors", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   useEffect(() => {

src/widgets/glances/widget.js

@@ -1,7 +1,7 @@
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
-  api: "{url}/api/3/{endpoint}",
+  api: "{url}/api/{version}/{endpoint}",
   proxyHandler: credentialedProxyHandler,
 };