feat(glances-service): add support for configurable refresh interval and points

src/utils/config/service-helpers.js

@@ -337,47 +337,47 @@ export function cleanServiceGroups(groups) {
       if (cleanedService.widget) {
         // whitelisted set of keys to pass to the frontend
         const {
-          type, // all widgets
+          allowFullscreen,
-          fields,
+          allowPolicy,
-          hideErrors,
+          allowScrolling,
-          server, // docker widget
+          app,
+          chart, // glances
+          classes,
           container,
           currency, // coinmarketcap widget
-          symbols,
-          slugs,
           defaultinterval,
-          site, // unifi widget
-          namespace, // kubernetes widget
-          app,
-          podSelector,
-          wan, // opnsense widget, pfsense widget
           enableBlocks, // emby/jellyfin
           enableNowPlaying,
-          volume, // diskstation widget,
           enableQueue, // sonarr/radarr
+          fields,
+          firstDayInWeek,
+          fit,
+          hideErrors,
+          integrations, // calendar widget
+          loadingStrategy,
+          mappings, // customapi widget
+          maxEvents,
+          method, // openmediavault widget
+          metric, // glances
+          namespace, // kubernetes widget
           node, // Proxmox
+          podSelector,
+          pointsLimit, // glances
+          refreshInterval,
+          referrerPolicy,
+          repositoryId,
+          server, // docker widget
+          site, // unifi widget
           snapshotHost, // kopia
           snapshotPath,
-          userEmail, // azuredevops
-          repositoryId,
-          metric, // glances
-          chart, // glances
-          stream, // mjpeg
-          fit,
-          method, // openmediavault widget
-          mappings, // customapi widget
-          refreshInterval,
-          integrations, // calendar widget
-          firstDayInWeek,
-          view,
-          maxEvents,
           src, // iframe widget
-          classes,
+          stream, // mjpeg
-          referrerPolicy,
+          symbols,
-          allowPolicy,
+          type, // all widgets
-          allowFullscreen,
+          userEmail, // azuredevops
-          loadingStrategy,
+          view,
-          allowScrolling,
+          volume, // diskstation widget,
+          wan, // opnsense widget, pfsense widget
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -459,6 +459,12 @@ export function cleanServiceGroups(groups) {
           } else {
             cleanedService.widget.chart = true;
           }
+          if(refreshInterval && Number.isInteger(refreshInterval) && refreshInterval > 0){
+            cleanedService.widget.refreshInterval = refreshInterval;
+          }
+          if(pointsLimit && Number.isInteger(pointsLimit) && pointsLimit > 0){
+            cleanedService.widget.pointsLimit = pointsLimit;
+          }
         }
         if (type === "mjpeg") {
           if (stream) cleanedService.widget.stream = stream;

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
   });
 
   const { data: systemData, error: systemError } = useWidgetAPI(service.widget, "system");

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,
   });
 
   const calculateRates = (d) =>

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,
   });
 
   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,
   });
 
   useEffect(() => {

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 { 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,
   });
 
   useEffect(() => {

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,
   });
 
   useEffect(() => {

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,
   });
 
   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,
   });
 
   useEffect(() => {