Further improvements to simplify information widgets

Signed-off-by: Denis Papec <denis.papec@gmail.com>
2025-12-07 09:35:54 -08:00 · 2023-06-05 23:18:18 +01:00
parent d4fd923be5
commit a55fe939cb
12 changed files with 181 additions and 267 deletions
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -2,14 +2,9 @@ import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
 import { useTranslation } from "next-i18next";

-import SingleResource from "../widget/single_resource";
-import WidgetIcon from "../widget/widget_icon";
-import ResourceValue from "../widget/resource_value";
-import ResourceLabel from "../widget/resource_label";
+import Resource from "../widget/resource";
 import Error from "../widget/error";

-import UsageBar from "./usage-bar";
-
 export default function Cpu({ expanded }) {
  const { t } = useTranslation();

@@ -22,34 +17,25 @@ export default function Cpu({ expanded }) {
  }

  if (!data) {
-    return <SingleResource expanded={expanded}>
-      <WidgetIcon icon={FiCpu} />
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.cpu")}</ResourceLabel>
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.load")}</ResourceLabel>
-      <UsageBar percent={0} />
-    </SingleResource>
+    return <Resource icon={FiCpu} value="-" label={t("resources.cpu")} expandedValue="-"
+                     expandedLabel={t("resources.load")} percentage="0" expanded={expanded} />
  }

-  return <SingleResource expanded={expanded}>
-    <WidgetIcon icon={FiCpu} />
-    <ResourceValue>
-      {t("common.number", {
-        value: data.cpu.usage,
-        style: "unit",
-        unit: "percent",
-        maximumFractionDigits: 0,
-      })}
-    </ResourceValue>
-    <ResourceLabel>{t("resources.cpu")}</ResourceLabel>
-    <ResourceValue>
-      {t("common.number", {
-        value: data.cpu.load,
-        maximumFractionDigits: 2,
-      })}
-    </ResourceValue>
-    <ResourceLabel>{t("resources.load")}</ResourceLabel>
-    <UsageBar percent={data.cpu.usage} />
-  </SingleResource>
+  return <Resource
+    icon={FiCpu}
+    value={t("common.number", {
+      value: data.cpu.usage,
+      style: "unit",
+      unit: "percent",
+      maximumFractionDigits: 0,
+    })}
+    label={t("resources.cpu")}
+    expandedValue={t("common.number", {
+      value: data.cpu.load,
+      maximumFractionDigits: 2,
+    })}
+    expandedLabel={t("resources.load")}
+    percentage={data.cpu.usage}
+    expanded={expanded}
+  />
 }
--- a/src/components/widgets/resources/cputemp.jsx
+++ b/src/components/widgets/resources/cputemp.jsx
@@ -2,14 +2,9 @@ import useSWR from "swr";
 import { FaThermometerHalf } from "react-icons/fa";
 import { useTranslation } from "next-i18next";

-import SingleResource from "../widget/single_resource";
-import WidgetIcon from "../widget/widget_icon";
-import ResourceValue from "../widget/resource_value";
-import ResourceLabel from "../widget/resource_label";
+import Resource from "../widget/resource";
 import Error from "../widget/error";

-import UsageBar from "./usage-bar";
-
 function convertToFahrenheit(t) {
  return t * 9/5 + 32
 }
@@ -26,13 +21,14 @@ export default function CpuTemp({ expanded, units }) {
  }

  if (!data || !data.cputemp) {
-    return <SingleResource expanded={expanded}>
-      <WidgetIcon icon={FaThermometerHalf} />
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.temp")}</ResourceLabel>
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.max")}</ResourceLabel>
-    </SingleResource>
+    return <Resource
+      icon={FaThermometerHalf}
+      value="-"
+      label={t("resources.temp")}
+      expandedValue="-"
+      expandedLabel={t("resources.max")}
+      expanded={expanded}
+    />;
  }

  let mainTemp = data.cputemp.main;
@@ -43,26 +39,23 @@ export default function CpuTemp({ expanded, units }) {
  mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
  const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);

-  return <SingleResource expanded={expanded}>
-    <WidgetIcon icon={FaThermometerHalf} />
-    <ResourceValue>
-      {t("common.number", {
-        value: mainTemp,
-        maximumFractionDigits: 1,
-        style: "unit",
-        unit
-      })}
-    </ResourceValue>
-    <ResourceLabel>{t("resources.temp")}</ResourceLabel>
-    <ResourceValue>
-      {t("common.number", {
-        value: maxTemp,
-        maximumFractionDigits: 1,
-        style: "unit",
-        unit
-      })}
-    </ResourceValue>
-    <ResourceLabel>{t("resources.max")}</ResourceLabel>
-    <UsageBar percent={Math.round((mainTemp / maxTemp) * 100)} />
-  </SingleResource>;
+  return  <Resource
+    icon={FaThermometerHalf}
+    value={t("common.number", {
+      value: mainTemp,
+      maximumFractionDigits: 1,
+      style: "unit",
+      unit
+    })}
+    label={t("resources.temp")}
+    expandedValue={t("common.number", {
+      value: maxTemp,
+      maximumFractionDigits: 1,
+      style: "unit",
+      unit
+    })}
+    expandedLabel={t("resources.max")}
+    percentage={Math.round((mainTemp / maxTemp) * 100)}
+    expanded={expanded}
+  />;
 }
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -2,14 +2,9 @@ import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
 import { useTranslation } from "next-i18next";

-import SingleResource from "../widget/single_resource";
-import WidgetIcon from "../widget/widget_icon";
-import ResourceValue from "../widget/resource_value";
-import ResourceLabel from "../widget/resource_label";
+import Resource from "../widget/resource";
 import Error from "../widget/error";

-import UsageBar from "./usage-bar";
-
 export default function Disk({ options, expanded }) {
  const { t } = useTranslation();

@@ -22,25 +17,27 @@ export default function Disk({ options, expanded }) {
  }

  if (!data) {
-    return <SingleResource expanded={expanded}>
-      <WidgetIcon icon={FiHardDrive} />
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.free")}</ResourceLabel>
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.total")}</ResourceLabel>
-      <UsageBar percent={0} />
-    </SingleResource>;
+    return <Resource
+      icon={FiHardDrive}
+      value="-"
+      label={t("resources.free")}
+      expandedValue="-"
+      expandedLabel={t("resources.total")}
+      expanded={expanded}
+      percentage="0"
+    />;
  }

  // data.drive.used not accurate?
  const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);

-  return <SingleResource expanded={expanded}>
-    <WidgetIcon icon={FiHardDrive} />
-    <ResourceValue>{t("common.bytes", { value: data.drive.available })}</ResourceValue>
-    <ResourceLabel>{t("resources.free")}</ResourceLabel>
-    <ResourceValue>{t("common.bytes", { value: data.drive.size })}</ResourceValue>
-    <ResourceLabel>{t("resources.total")}</ResourceLabel>
-    <UsageBar percent={percent} />
-  </SingleResource>;
+  return <Resource
+    icon={FiHardDrive}
+    value={t("common.bytes", { value: data.drive.available })}
+    label={t("resources.free")}
+    expandedValue={t("common.bytes", { value: data.drive.size })}
+    expandedLabel={t("resources.total")}
+    percentage={percent}
+    expanded={expanded}
+  />;
 }
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -2,14 +2,9 @@ import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
 import { useTranslation } from "next-i18next";

-import SingleResource from "../widget/single_resource";
-import WidgetIcon from "../widget/widget_icon";
-import ResourceValue from "../widget/resource_value";
-import ResourceLabel from "../widget/resource_label";
+import Resource from "../widget/resource";
 import Error from "../widget/error";

-import UsageBar from "./usage-bar";
-
 export default function Memory({ expanded }) {
  const { t } = useTranslation();

@@ -22,30 +17,26 @@ export default function Memory({ expanded }) {
  }

  if (!data) {
-    return <SingleResource expanded={expanded}>
-      <WidgetIcon icon={FaMemory} />
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.free")}</ResourceLabel>
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.total")}</ResourceLabel>
-      <UsageBar percent={0} />
-    </SingleResource>;
+    return <Resource
+      icon={FaMemory}
+      value="-"
+      label={t("resources.free")}
+      expandedValue="-"
+      expandedLabel={t("resources.total")}
+      expanded={expanded}
+      percentage="0"
+    />;
  }

  const percent = Math.round((data.memory.active / data.memory.total) * 100);

-  return <SingleResource expanded={expanded}>
-    <WidgetIcon icon={FaMemory} />
-    <ResourceValue>{t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}</ResourceValue>
-    <ResourceLabel>{t("resources.free")}</ResourceLabel>
-    <ResourceValue>
-      {t("common.bytes", {
-        value: data.memory.total,
-        maximumFractionDigits: 1,
-        binary: true,
-      })}
-    </ResourceValue>
-    <ResourceLabel>{t("resources.total")}</ResourceLabel>
-    <UsageBar percent={percent} />
-  </SingleResource>;
+  return <Resource
+    icon={FaMemory}
+    value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
+    label={t("resources.free")}
+    expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
+    expandedLabel={t("resources.total")}
+    percentage={percent}
+    expanded={expanded}
+  />;
 }
--- a/src/components/widgets/resources/uptime.jsx
+++ b/src/components/widgets/resources/uptime.jsx
@@ -2,14 +2,9 @@ import useSWR from "swr";
 import { FaRegClock } from "react-icons/fa";
 import { useTranslation } from "next-i18next";

-import SingleResource from "../widget/single_resource";
-import WidgetIcon from "../widget/widget_icon";
-import ResourceValue from "../widget/resource_value";
-import ResourceLabel from "../widget/resource_label";
+import Resource from "../widget/resource";
 import Error from "../widget/error";

-import UsageBar from "./usage-bar";
-
 export default function Uptime() {
  const { t } = useTranslation();

@@ -22,11 +17,7 @@ export default function Uptime() {
  }

  if (!data) {
-    return <SingleResource>
-      <WidgetIcon icon={FaRegClock} />
-      <ResourceValue>-</ResourceValue>
-      <ResourceLabel>{t("resources.uptime")}</ResourceLabel>
-    </SingleResource>;
+    return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
  }

  const mo = Math.floor(data.uptime / (3600 * 24 * 31));
@@ -39,12 +30,7 @@ export default function Uptime() {
  else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
  else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;

-  const percent = Math.round((new Date().getSeconds() / 60) * 100);
+  const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();

-  return <SingleResource>
-    <WidgetIcon icon={FaRegClock} />
-    <ResourceValue>{uptime}</ResourceValue>
-    <ResourceLabel>{t("resources.uptime")}</ResourceLabel>
-    <UsageBar percent={percent} />
-  </SingleResource>;
+  return <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
 }