Fix: Glances widget display (#3164)

Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/glances.md

@@ -19,6 +19,8 @@ widget:
   password: pass # optional if auth enabled in Glances
   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
+  pointsLimit: 15 # optional, defaults to 15
 ```
 
 _Please note, this widget does not need an `href`, `icon` or `description` on its parent service. To achieve the same effect as the examples above, see as an example:_

src/widgets/glances/metrics/cpu.jsx

@@ -24,7 +24,7 @@ export default function Component({ service }) {
     refreshInterval: Math.max(defaultInterval, refreshInterval),
   });
 
-  const { data: systemData, error: systemError } = useWidgetAPI(service.widget, "system");
+  const { data: quicklookData, error: quicklookError } = useWidgetAPI(service.widget, "quicklook");
 
   useEffect(() => {
     if (data) {
@@ -71,22 +71,15 @@ export default function Component({ service }) {
         />
       )}
 
-      {!chart && systemData && !systemError && (
+      {!chart && quicklookData && !quicklookError && (
         <Block position="top-3 right-3">
-          <div className="text-xs opacity-50">
-            {systemData.linux_distro && `${systemData.linux_distro} - `}
-            {systemData.os_version && systemData.os_version}
-          </div>
+          <div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name && quicklookData.cpu_name}</div>
         </Block>
       )}
 
-      {systemData && !systemError && (
+      {quicklookData && !quicklookError && (
         <Block position="bottom-3 left-3">
-          {systemData.linux_distro && chart && <div className="text-xs opacity-50">{systemData.linux_distro}</div>}
-
-          {systemData.os_version && chart && <div className="text-xs opacity-50">{systemData.os_version}</div>}
-
-          {systemData.hostname && <div className="text-xs opacity-50">{systemData.hostname}</div>}
+          {quicklookData.cpu_name && chart && <div className="text-xs opacity-50">{quicklookData.cpu_name}</div>}
         </Block>
       )}
 

src/widgets/glances/metrics/info.jsx

@@ -122,7 +122,10 @@ export default function Component({ service }) {
         )}
 
         {!chart && quicklookData?.swap === 0 && (
-          <div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>
+          <div className="text-[0.6rem] opacity-50">
+            {systemData && systemData.linux_distro && `${systemData.linux_distro} - `}
+            {systemData && systemData.os_version}
+          </div>
         )}
 
         <div className="w-[4rem]">{!chart && <Swap quicklookData={quicklookData} className="opacity-25" />}</div>
@@ -137,7 +140,7 @@ export default function Component({ service }) {
       )}
 
       {!chart && (
-        <Block position="bottom-3 left-3 w-[3rem]">
+        <Block position="bottom-3 left-3 w-[4rem]">
           <CPU quicklookData={quicklookData} className="opacity-75" />
         </Block>
       )}