Support v4 for service widgets

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,7 @@ 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 [, interfaceName] = metric.split(":");
 
@@ -25,6 +25,7 @@ export default function Component({ service }) {
 
   const { data, error } = useWidgetAPI(widget, "network", {
     refreshInterval: Math.max(defaultInterval(chart), refreshInterval),
+    version,
   });
 
   useEffect(() => {

src/widgets/glances/metrics/process.jsx

@@ -22,10 +22,11 @@ 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 { data, error } = useWidgetAPI(service.widget, "processlist", {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
+    version,
   });
 
   if (error) {

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,
 };