Refactor Kube resources to reusable component

src/components/widgets/kubernetes/node.jsx

@@ -1,13 +1,9 @@
-import { FaMemory } from "react-icons/fa";
+import { FiAlertTriangle, FiServer } from "react-icons/fi";
-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 ServiceResource from "../resources/serviceResource";
 
 export default function Node({ type, options, data }) {
-  const { t } = useTranslation();
-
   function icon() {
     if (type === "cluster") {
       return <SiKubernetes className="text-theme-800 dark:text-theme-200 w-5 h-5" />;
@@ -19,42 +15,13 @@ export default function Node({ type, options, data }) {
   }
 
   return (
-    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4">
+    <ServiceResource
-      <div className="flex flex-row self-center flex-wrap justify-between">
+      icon={icon()}
-        <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      label={options.showLabel && options.label}
-          {icon()}
+      cpuPercent={data?.cpu?.percent}
-          <div className="flex flex-col ml-3 text-left min-w-[85px]">
+      memFree={data?.memory?.free}
-            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+      memPercent={data?.memory?.percent}
-              <div className="pl-0.5">
+      error={data?.error}
-                {t("common.number", {
+    />
-                  value: data?.cpu?.percent ?? 0,
-                  style: "unit",
-                  unit: "percent",
-                  maximumFractionDigits: 0,
-                })}
-              </div>
-              <FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
-            </div>
-            <UsageBar percent={data?.cpu?.percent ?? 0} />
-            <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,
-                  maximumFractionDigits: 0,
-                  binary: true,
-                })}
-              </div>
-              <FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" />
-            </div>
-            <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>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
   );
 }

src/components/widgets/resources/serviceResource.jsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "next-i18next";
+import { FiCpu, FiServer } from "react-icons/fi";
+import { FaMemory } from "react-icons/fa";
+
+import Error from "../widget/error";
+
+import UsageBar from "./usage-bar";
+
+/**
+ * Represents a service resource with optional details.
+ *
+ * @param {Object} props - The properties of the service resource.
+ * @param {JSX.Element} [props.icon] - The JSX element representing the icon.
+ * @param {string} [props.label] - The label describing the service resource.
+ * @param {number} [props.cpuPercent] - The CPU usage percentage.
+ * @param {number} [props.memFree] - The amount of free memory.
+ * @param {number} [props.memPercent] - The memory usage percentage.
+ * @param {any} [props.error] - Any additional error information.
+ *
+ * @returns {JSX.Element} - The JSX element representing the service resource.
+ */
+export default function ServiceResource({ icon, label, cpuPercent, memFree, memPercent, error }) {
+  const { t } = useTranslation();
+
+  const widgetIcon = icon ?? <FiServer className="text-theme-800 dark:text-theme-200 w-5 h-5" />;
+
+  if (error) {
+    return <Error />;
+  }
+
+  return (
+    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4">
+      <div className="flex flex-row self-center flex-wrap justify-between">
+        <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+          <div className="flex-none w-5 h-5">{widgetIcon}</div>
+          <div className="flex flex-col ml-3 text-left min-w-[85px]">
+            <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: cpuPercent ?? 0,
+                  style: "unit",
+                  unit: "percent",
+                  maximumFractionDigits: 0,
+                })}
+              </div>
+              <FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
+            </div>
+            <UsageBar percent={cpuPercent ?? 0} />
+            <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: memFree ?? 0,
+                  maximumFractionDigits: 0,
+                  binary: true,
+                })}
+              </div>
+              <FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" />
+            </div>
+            <UsageBar percent={memPercent ?? 0} />
+            {label && <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}