Revert "Added optional boxed styling for information widgets and refactored information widgets"

src/components/widgets/kubernetes/kubernetes.jsx

@@ -1,15 +1,12 @@
 import useSWR from "swr";
+import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import Error from "../widget/error";
-import Container from "../widget/container";
-import Raw from "../widget/raw";
-
 import Node from "./node";
 
 export default function Widget({ options }) {
   const { cluster, nodes } = options;
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const defaultData = {
     cpu: {
@@ -21,7 +18,7 @@ export default function Widget({ options }) {
       used: 0,
       total: 0,
       free: 0,
-      percent: 0
+      precent: 0
     }
   };
 
@@ -32,12 +29,23 @@ export default function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return <Error options={options} />
+    return (
+      <div className="flex flex-col justify-center first:ml-0 ml-4">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-row items-center">
+            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
+            <div className="flex flex-col ml-3 text-left">
+              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   if (!data) {
-    return <Container options={options}>
-      <Raw>
+    return (
+      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
         <div className="flex flex-row self-center flex-wrap justify-between">
           {cluster.show &&
             <Node type="cluster" key="cluster" options={options.cluster} data={defaultData} />
@@ -46,12 +54,12 @@ export default function Widget({ options }) {
             <Node type="node" key="nodes" options={options.nodes} data={defaultData} />
           }
         </div>
-      </Raw>
-    </Container>;
+      </div>
+    );
   }
 
-  return <Container options={options}>
-    <Raw>
+  return (
+    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
         {cluster.show &&
           <Node key="cluster" type="cluster" options={options.cluster} data={data.cluster} />
@@ -61,6 +69,6 @@ export default function Widget({ options }) {
             <Node key={node.name} type="node" options={options.nodes} data={node} />)
         }
       </div>
-    </Raw>
-  </Container>;
+    </div>
+  );
 }

src/components/widgets/kubernetes/node.jsx

@@ -3,7 +3,8 @@ import { FiAlertTriangle, FiCpu, FiServer } from "react-icons/fi";
 import { SiKubernetes } from "react-icons/si";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "../resources/usage-bar";
+import UsageBar from "./usage-bar";
+
 
 export default function Node({ type, options, data }) {
   const { t } = useTranslation();
@@ -28,7 +29,7 @@ export default function Node({ type, options, data }) {
             <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
               <div className="pl-0.5">
                 {t("common.number", {
-                  value: data?.cpu?.percent ?? 0,
+                  value: data.cpu.percent,
                   style: "unit",
                   unit: "percent",
                   maximumFractionDigits: 0
@@ -36,18 +37,18 @@ export default function Node({ type, options, data }) {
               </div>
               <FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
             </div>
-            <UsageBar percent={data?.cpu?.percent ?? 0} />
+            <UsageBar percent={data.cpu.percent} />
             <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
               <div className="pl-0.5">
                 {t("common.bytes", {
-                  value: data?.memory?.free ?? 0,
+                  value: data.memory.free,
                   maximumFractionDigits: 0,
                   binary: true
                 })}
               </div>
               <FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" />
             </div>
-            <UsageBar percent={data?.memory?.percent} />
+            <UsageBar percent={data.memory.percent} />
             {options.showLabel && (
               <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{type === "cluster" ? options.label : data.name}</div>
             )}

src/components/widgets/kubernetes/usage-bar.jsx

@@ -0,0 +1,12 @@
+export default function UsageBar({ percent }) {
+  return (
+    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
+      <div
+        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
+        style={{
+          width: `${percent}%`,
+        }}
+      />
+    </div>
+  );
+}