Improve error handling for Glances widgets when host is unreachable

src/widgets/glances/components/container.jsx

@@ -1,10 +1,19 @@
-export default function Container({ children, chart = true, className = "" }) {
+import { useContext } from "react";
+import { useTranslation } from "next-i18next";
+import { SettingsContext } from "utils/contexts/settings";
+import { Settings } from "luxon";
+
+export default function Container({ service, children, chart = true, error = false, className = "" }) {
+  const { t } = useTranslation();
+  const { settings } = useContext(SettingsContext);
+  const hideErrors = (service.widget.hide_errors || settings.hideErrors)
   return (
     <div>
       {children}
       <div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
       {chart && <div className="h-[68px] overflow-clip" />}
       {!chart && <div className="h-[16px] overflow-clip" />}
+      {error && !hideErrors && <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">{t("widget.api_error")}</div>}
     </div>
   );
 }

src/widgets/glances/components/error.jsx

@@ -1,7 +0,0 @@
-import { useTranslation } from "next-i18next";
-
-export default function Error() {
-  const { t } = useTranslation();
-
-  return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">{t("widget.api_error")}</div>;
-}

src/widgets/glances/metrics/cpu.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -40,7 +39,7 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
         <Error error={error} />
       </Container>
     );
@@ -48,14 +47,14 @@ export default function Component({ service }) {
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <Chart
           dataPoints={dataPoints}

src/widgets/glances/metrics/disk.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -54,15 +53,14 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -72,7 +70,7 @@ export default function Component({ service }) {
 
   if (!diskData) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -82,7 +80,7 @@ export default function Component({ service }) {
   const currentRate = diskRates[diskRates.length - 1];
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={ratePoints}

src/widgets/glances/metrics/fs.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -21,15 +20,14 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -39,14 +37,14 @@ export default function Component({ service }) {
 
   if (!fsData) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <div className="absolute top-0 left-0 right-0 bottom-0">
           <div

src/widgets/glances/metrics/gpu.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -27,32 +26,42 @@ export default function Component({ service }) {
 
   useEffect(() => {
     if (data) {
-      // eslint-disable-next-line eqeqeq
-      const gpuData = data.find((item) => item[item.key] == gpuName);
 
-      if (gpuData) {
+      if (data.hasOwnProperty("error")) {
-        setDataPoints((prevDataPoints) => {
+        return (
-          const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
+          <Container service={service} chart={chart} error={true}>
-          if (newDataPoints.length > pointsLimit) {
+          </Container>
-            newDataPoints.shift();
+        )
-          }
-          return newDataPoints;
-        });
       }
+
+      else {
+        // eslint-disable-next-line eqeqeq
+        const gpuData = data.find((item) => item[item.key] == gpuName);
+
+        if (gpuData) {
+          setDataPoints((prevDataPoints) => {
+            const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
+            if (newDataPoints.length > pointsLimit) {
+              newDataPoints.shift();
+            }
+            return newDataPoints;
+          });
+        }
+      }
+
     }
   }, [data, gpuName, pointsLimit]);
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -63,14 +72,14 @@ export default function Component({ service }) {
 
   if (!gpuData) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/info.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -86,36 +85,45 @@ export default function Component({ service }) {
 
   if (quicklookError) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={quicklookError}>
-        <Error error={quicklookError} />
       </Container>
     );
   }
 
   if (systemError) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={systemError}>
-        <Error error={systemError} />
       </Container>
     );
   }
 
   const dataCharts = [];
 
+
   if (quicklookData) {
-    quicklookData.percpu.forEach((cpu, index) => {
+    if (quicklookData.hasOwnProperty("error")) {
-      dataCharts.push({
+      const quicklookError = true;
-        name: `CPU ${index}`,
+      return (
-        cpu: cpu.total,
+        <Container service={service} chart={chart} error={quicklookError} >
-        mem: quicklookData.mem,
+        </Container>
-        swap: quicklookData.swap,
+      );
-        proc: quicklookData.cpu,
+    }
+    else {
+      quicklookData.percpu.forEach((cpu, index) => {
+        dataCharts.push({
+          name: `CPU ${index}`,
+          cpu: cpu.total,
+          mem: quicklookData.mem,
+          swap: quicklookData.swap,
+          proc: quicklookData.cpu,
+        });
       });
-    });
+    }
+    
   }
 
   return (
-    <Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
+    <Container service={service} chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
       <Block position="top-3 right-3">
         {quicklookData && quicklookData.cpu_name && chart && (
           <div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>

src/widgets/glances/metrics/memory.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -39,22 +38,21 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/net.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -54,15 +53,14 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -72,14 +70,14 @@ export default function Component({ service }) {
 
   if (!interfaceData) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/process.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -32,15 +31,14 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={true}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -49,7 +47,7 @@ export default function Component({ service }) {
   data.splice(chart ? 5 : 1);
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       <Block position="top-4 right-3 left-3">
         <div className="flex items-center text-xs">
           <div className="grow" />

src/widgets/glances/metrics/sensor.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -40,15 +39,14 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart} error={error}>
-        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -58,14 +56,14 @@ export default function Component({ service }) {
 
   if (!sensorData) {
     return (
-      <Container chart={chart}>
+      <Container service={service} chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container chart={chart}>
+    <Container service={service} chart={chart}>
       {chart && (
         <Chart
           dataPoints={dataPoints}