Enhancement: Add configurable refresh interval and max points for glances services (#2363)

---------

Co-authored-by: Quentin de Grandmaison <quentin.degrandmaison@7speaking.com>
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/glances/metrics/cpu.jsx

@@ -10,17 +10,18 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const Chart = dynamic(() => import("../components/chart"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = 1000;
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "cpu", {
-    refreshInterval: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   const { data: systemData, error: systemError } = useWidgetAPI(service.widget, "system");
@@ -35,7 +36,7 @@ export default function Component({ service }) {
         return newDataPoints;
       });
     }
-  }, [data]);
+  }, [data, pointsLimit]);
 
   if (error) {
     return (

src/widgets/glances/metrics/disk.jsx

@@ -10,12 +10,13 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = 1000;
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = widget;
   const [, diskName] = widget.metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(
@@ -24,7 +25,7 @@ export default function Component({ service }) {
   const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "diskio", {
-    refreshInterval: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   const calculateRates = (d) =>
@@ -45,7 +46,7 @@ export default function Component({ service }) {
         return newDataPoints;
       });
     }
-  }, [data, diskName]);
+  }, [data, diskName, pointsLimit]);
 
   useEffect(() => {
     setRatePoints(calculateRates(dataPoints));

src/widgets/glances/metrics/fs.jsx

@@ -6,14 +6,16 @@ import Block from "../components/block";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const defaultInterval = 1000;
+
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval } = widget;
   const [, fsName] = widget.metric.split("fs:");
 
   const { data, error } = useWidgetAPI(widget, "fs", {
-    refreshInterval: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   if (error) {

src/widgets/glances/metrics/gpu.jsx

@@ -10,18 +10,19 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = 1000;
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = 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: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   useEffect(() => {
@@ -39,7 +40,7 @@ export default function Component({ service }) {
         });
       }
     }
-  }, [data, gpuName]);
+  }, [data, gpuName, pointsLimit]);
 
   if (error) {
     return (

src/widgets/glances/metrics/info.jsx

@@ -69,16 +69,19 @@ function Mem({ quicklookData, className = "" }) {
   );
 }
 
+const defaultInterval = 1000;
+const defaultSystemInterval = 30000; // This data (OS, hostname, distribution) is usually super stable.
+
 export default function Component({ service }) {
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval } = widget;
 
   const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, "quicklook", {
-    refreshInterval: 1000,
+    refreshInterval,
   });
 
   const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, "system", {
-    refreshInterval: 30000,
+    refreshInterval: defaultSystemInterval,
   });
 
   if (quicklookError) {

src/widgets/glances/metrics/memory.jsx

@@ -10,17 +10,19 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = (isChart) => (isChart ? 1000 : 5000);
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(service.widget, "mem", {
-    refreshInterval: chart ? 1000 : 5000,
+    refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
   });
 
   useEffect(() => {
@@ -33,7 +35,7 @@ export default function Component({ service }) {
         return newDataPoints;
       });
     }
-  }, [data]);
+  }, [data, pointsLimit]);
 
   if (error) {
     return (

src/widgets/glances/metrics/net.jsx

@@ -10,18 +10,21 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const ChartDual = dynamic(() => import("../components/chart_dual"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = (isChart) => (isChart ? 1000 : 5000);
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
   const { chart, metric } = widget;
+  const { refreshInterval = defaultInterval(chart), pointsLimit = defaultPointsLimit } = widget;
+
   const [, interfaceName] = metric.split(":");
 
   const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
 
   const { data, error } = useWidgetAPI(widget, "network", {
-    refreshInterval: chart ? 1000 : 5000,
+    refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
   });
 
   useEffect(() => {
@@ -44,7 +47,7 @@ export default function Component({ service }) {
         });
       }
     }
-  }, [data, interfaceName]);
+  }, [data, interfaceName, pointsLimit]);
 
   if (error) {
     return (

src/widgets/glances/metrics/process.jsx

@@ -17,13 +17,15 @@ const statusMap = {
   X: <ResolvedIcon icon="mdi-rhombus-outline" width={32} height={32} />, // dead
 };
 
+const defaultInterval = 1000;
+
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval } = widget;
 
   const { data, error } = useWidgetAPI(service.widget, "processlist", {
-    refreshInterval: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   if (error) {

src/widgets/glances/metrics/sensor.jsx

@@ -10,18 +10,19 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 
 const Chart = dynamic(() => import("../components/chart"), { ssr: false });
 
-const pointsLimit = 15;
+const defaultPointsLimit = 15;
+const defaultInterval = 1000;
 
 export default function Component({ service }) {
   const { t } = useTranslation();
   const { widget } = service;
-  const { chart } = widget;
+  const { chart, refreshInterval = defaultInterval, pointsLimit = defaultPointsLimit } = 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: 1000,
+    refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function Component({ service }) {
         return newDataPoints;
       });
     }
-  }, [data, sensorName]);
+  }, [data, sensorName, pointsLimit]);
 
   if (error) {
     return (