Clean this up

src/widgets/glances/components/container.jsx

@@ -1,19 +1,10 @@
-import { useContext } from "react";
+export default function Container({ children, chart = true, className = "" }) {
-import { useTranslation } from "next-i18next";
-import { SettingsContext } from "utils/contexts/settings";
-import Error from "./error"
-
-export default function Container({ service, children, chart = true, error = false, className = "" }) {
-  const { t } = useTranslation();
-  const { settings } = useContext(SettingsContext);
-  const hideErrors = (settings.hideErrors || service.widget.hide_errors)
   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 && <Error />}
     </div>
   );
 }

src/widgets/glances/components/error.jsx

@@ -1,7 +1,17 @@
 import { useTranslation } from "next-i18next";
+import { useContext } from "react";
 
-export default function Error() {
+import { SettingsContext } from "utils/contexts/settings";
+
+export default function Error({ service, error }) {
   const { t } = useTranslation();
+  const { settings } = useContext(SettingsContext);
+
+  if (error) {
+    if (settings.hideErrors || service?.widget.hide_errors) {
+      return null;
+    }
 
     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

@@ -4,6 +4,7 @@ import { useTranslation } from "next-i18next";
 
 import Container from "../components/container";
 import Block from "../components/block";
+import Error from "../components/error";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
@@ -39,22 +40,22 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
-        <Error error={error} />
+        <Error error={error} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <Chart
           dataPoints={dataPoints}

src/widgets/glances/metrics/disk.jsx

@@ -2,6 +2,7 @@ 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";
 
@@ -34,7 +35,7 @@ export default function Component({ service }) {
     }));
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const diskData = data.find((item) => item.disk_name === diskName);
 
       setDataPoints((prevDataPoints) => {
@@ -51,16 +52,18 @@ export default function Component({ service }) {
     setRatePoints(calculateRates(dataPoints));
   }, [dataPoints]);
 
-  if (error) {
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
+        <Error error={finalError} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -70,7 +73,7 @@ export default function Component({ service }) {
 
   if (!diskData) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -80,7 +83,7 @@ export default function Component({ service }) {
   const currentRate = diskRates[diskRates.length - 1];
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={ratePoints}

src/widgets/glances/metrics/fs.jsx

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

src/widgets/glances/metrics/gpu.jsx

@@ -2,6 +2,7 @@ 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";
 
@@ -25,16 +26,7 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
-
-      if (data.hasOwnProperty("error")) {
-        return (
-          <Container service={service} chart={chart} error={true}>
-          </Container>
-        )
-      }
-
-      else {
       // eslint-disable-next-line eqeqeq
       const gpuData = data.find((item) => item[item.key] == gpuName);
 
@@ -48,20 +40,20 @@ export default function Component({ service }) {
         });
       }
     }
-
-    }
   }, [data, gpuName, pointsLimit]);
 
-  if (error) {
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
+        <Error error={finalError} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -72,14 +64,14 @@ export default function Component({ service }) {
 
   if (!gpuData) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/info.jsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next";
 
+import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -83,32 +84,26 @@ export default function Component({ service }) {
     refreshInterval: defaultSystemInterval,
   });
 
-  if (quicklookError) {
+  if (quicklookError || (quicklookData && quicklookData.error)) {
+    const qlError = quicklookError || quicklookData.error;
     return (
-      <Container service={service} chart={chart} error={quicklookError}>
+      <Container chart={chart}>
+        <Error error={qlError} service={service} />
       </Container>
     );
   }
 
   if (systemError) {
     return (
-      <Container service={service} chart={chart} error={systemError}>
+      <Container chart={chart}>
+        <Error error={systemError} service={service} />
       </Container>
     );
   }
 
   const dataCharts = [];
 
-
   if (quicklookData) {
-    if (quicklookData.hasOwnProperty("error")) {
-      const quicklookError = true;
-      return (
-        <Container service={service} chart={chart} error={quicklookError} >
-        </Container>
-      );
-    }
-    else {
     quicklookData.percpu.forEach((cpu, index) => {
       dataCharts.push({
         name: `CPU ${index}`,
@@ -120,10 +115,8 @@ export default function Component({ service }) {
     });
   }
 
-  }
-
   return (
-    <Container service={service} chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
+    <Container 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,6 +2,7 @@ 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";
 
@@ -38,21 +39,22 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
+        <Error error={error} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/net.jsx

@@ -2,6 +2,7 @@ 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";
 
@@ -30,7 +31,7 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const interfaceData = data.find((item) => item[item.key] === interfaceName);
 
       if (interfaceData) {
@@ -51,16 +52,18 @@ export default function Component({ service }) {
     }
   }, [data, interfaceName, pointsLimit, rxKey, txKey]);
 
-  if (error) {
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
+        <Error error={finalError} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -70,14 +73,14 @@ export default function Component({ service }) {
 
   if (!interfaceData) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <ChartDual
           dataPoints={dataPoints}

src/widgets/glances/metrics/process.jsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next";
 
+import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -31,14 +32,15 @@ export default function Component({ service }) {
 
   if (error) {
     return (
-      <Container service={service} chart={chart} error={true}>
+      <Container chart={chart}>
+        <Error error={error} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -47,7 +49,7 @@ export default function Component({ service }) {
   data.splice(chart ? 5 : 1);
 
   return (
-    <Container service={service} chart={chart}>
+    <Container 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,6 +2,7 @@ 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";
 
@@ -25,7 +26,7 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const sensorData = data.find((item) => item.label === sensorName);
       setDataPoints((prevDataPoints) => {
         const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
@@ -37,16 +38,18 @@ export default function Component({ service }) {
     }
   }, [data, sensorName, pointsLimit]);
 
-  if (error) {
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
     return (
-      <Container service={service} chart={chart} error={error}>
+      <Container chart={chart}>
+        <Error error={finalError} service={service} />
       </Container>
     );
   }
 
   if (!data) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
@@ -56,14 +59,14 @@ export default function Component({ service }) {
 
   if (!sensorData) {
     return (
-      <Container service={service} chart={chart}>
+      <Container chart={chart}>
         <Block position="bottom-3 left-3">-</Block>
       </Container>
     );
   }
 
   return (
-    <Container service={service} chart={chart}>
+    <Container chart={chart}>
       {chart && (
         <Chart
           dataPoints={dataPoints}