diff --git a/src/components/widgets/glances/glances.jsx b/src/components/widgets/glances/glances.jsx index debb09c7..b45dfefe 100644 --- a/src/components/widgets/glances/glances.jsx +++ b/src/components/widgets/glances/glances.jsx @@ -4,12 +4,8 @@ import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa"; import { FiCpu, FiHardDrive } from "react-icons/fi"; import { useTranslation } from "next-i18next"; -import UsageBar from "../resources/usage-bar"; import Error from "../widget/error"; -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 Resources from "../widget/resources"; import WidgetLabel from "../widget/widget_label"; @@ -37,31 +33,11 @@ export default function Widget({ options }) { if (!data) { return - - - {t("glances.wait")} - - - - - {t("glances.wait")} - - - {options.cputemp && - - - {t("glances.wait")} - - - } - {options.uptime && - - - {t("glances.wait")} - - - } - {options.label && } + + + { options.cputemp && } + { options.uptime && } + { options.label && } ; } @@ -93,77 +69,81 @@ export default function Widget({ options }) { return ( - - - {t("common.number", { + - {t("glances.cpu")} - {t("common.number", { + })} + label={t("glances.cpu")} + expandedValue={t("common.number", { value: data.load.min15, style: "unit", unit: "percent", - maximumFractionDigits: 0, - })} - {t("glances.load")} - - - - - {t("common.bytes", { + maximumFractionDigits: 0 + })} + expandedLabel={t("glances.load")} + percentage={data.cpu.total} + expanded={options.expanded} + /> + - {t("glances.free")} - {t("common.bytes", { + })} + label={t("glances.free")} + expandedValue={t("common.bytes", { value: data.mem.total, maximumFractionDigits: 1, binary: true, - })} - {t("glances.total")} - - + })} + expandedLabel={t("glances.total")} + percentage={data.mem.percent} + expanded={options.expanded} + /> {disks.map((disk) => ( - - - {t("common.bytes", { value: disk.free })} - {t("glances.free")} - {t("common.bytes", { value: disk.size })} - {t("glances.total")} - - + ))} {options.cputemp && mainTemp > 0 && - - - {t("common.number", { + - {t("glances.temp")} - {t("common.number", { + })} + label={t("glances.temp")} + expandedValue={t("common.number", { value: maxTemp, maximumFractionDigits: 1, style: "unit", unit - })} - {t("glances.warn")} - - + })} + expandedLabel={t("glances.warn")} + percentage={tempPercent} + expanded={options.expanded} + /> } {options.uptime && data.uptime && - - - {data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))} - {t("glances.uptime")} - - + } {options.label && } diff --git a/src/components/widgets/longhorn/node.jsx b/src/components/widgets/longhorn/node.jsx index 9983486e..5235698a 100644 --- a/src/components/widgets/longhorn/node.jsx +++ b/src/components/widgets/longhorn/node.jsx @@ -1,23 +1,20 @@ import { useTranslation } from "next-i18next"; import { FaThermometerHalf } from "react-icons/fa"; -import UsageBar from "../resources/usage-bar"; -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 WidgetLabel from "../widget/widget_label"; export default function Node({ data, expanded, labels }) { const { t } = useTranslation(); - return - - {t("common.bytes", { value: data.node.available })} - {t("resources.free")} - {t("common.bytes", { value: data.node.maximum })} - {t("resources.total")} - - { labels && } - + return { labels && } + } diff --git a/src/components/widgets/resources/cpu.jsx b/src/components/widgets/resources/cpu.jsx index 242e7a3d..12972fe8 100644 --- 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 - - - - {t("resources.cpu")} - - - {t("resources.load")} - - + return } - return - - - {t("common.number", { - value: data.cpu.usage, - style: "unit", - unit: "percent", - maximumFractionDigits: 0, - })} - - {t("resources.cpu")} - - {t("common.number", { - value: data.cpu.load, - maximumFractionDigits: 2, - })} - - {t("resources.load")} - - + return } diff --git a/src/components/widgets/resources/cputemp.jsx b/src/components/widgets/resources/cputemp.jsx index 1a62aa31..ba6d9b73 100644 --- 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 - - - - {t("resources.temp")} - - - {t("resources.max")} - + return ; } 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 - - - {t("common.number", { - value: mainTemp, - maximumFractionDigits: 1, - style: "unit", - unit - })} - - {t("resources.temp")} - - {t("common.number", { - value: maxTemp, - maximumFractionDigits: 1, - style: "unit", - unit - })} - - {t("resources.max")} - - ; + return ; } diff --git a/src/components/widgets/resources/disk.jsx b/src/components/widgets/resources/disk.jsx index 742ff9d7..ab56624d 100644 --- 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 - - - - {t("resources.free")} - - - {t("resources.total")} - - ; + return ; } // data.drive.used not accurate? const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100); - return - - {t("common.bytes", { value: data.drive.available })} - {t("resources.free")} - {t("common.bytes", { value: data.drive.size })} - {t("resources.total")} - - ; + return ; } diff --git a/src/components/widgets/resources/memory.jsx b/src/components/widgets/resources/memory.jsx index 97c74acc..19ae8687 100644 --- 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 - - - - {t("resources.free")} - - - {t("resources.total")} - - ; + return ; } const percent = Math.round((data.memory.active / data.memory.total) * 100); - return - - {t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })} - {t("resources.free")} - - {t("common.bytes", { - value: data.memory.total, - maximumFractionDigits: 1, - binary: true, - })} - - {t("resources.total")} - - ; + return ; } diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx index 6cc2b8c5..3984975f 100644 --- 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 - - - - {t("resources.uptime")} - ; + return ; } 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 - - {uptime} - {t("resources.uptime")} - - ; + return ; } diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx new file mode 100644 index 00000000..e77bcb5a --- /dev/null +++ b/src/components/widgets/widget/resource.jsx @@ -0,0 +1,22 @@ +import UsageBar from "../resources/usage-bar"; + +export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) { + const Icon = icon; + + return
+ +
+
+
{value}
+
{label}
+
+ { expanded &&
+
{expandedValue}
+
{expandedLabel}
+
+ } + { percentage && } + { children } +
+
; +} diff --git a/src/components/widgets/widget/resource_label.jsx b/src/components/widgets/widget/resource_label.jsx deleted file mode 100644 index 87f2ad22..00000000 --- a/src/components/widgets/widget/resource_label.jsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function ResourceLabel({ children }) { - return ( -
{children}
- ); -} diff --git a/src/components/widgets/widget/resource_value.jsx b/src/components/widgets/widget/resource_value.jsx deleted file mode 100644 index 8971c748..00000000 --- a/src/components/widgets/widget/resource_value.jsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function ResourceValue({ children }) { - return ( -
{children}
- ); -} diff --git a/src/components/widgets/widget/resources.jsx b/src/components/widgets/widget/resources.jsx index 0771ec5e..19fb021d 100644 --- a/src/components/widgets/widget/resources.jsx +++ b/src/components/widgets/widget/resources.jsx @@ -1,5 +1,5 @@ import ContainerLink from "./container_link"; -import SingleResource from "./single_resource"; +import Resource from "./resource"; import Raw from "./raw"; import WidgetLabel from "./widget_label"; @@ -7,9 +7,9 @@ export default function Resources({ options, children, target }) { return
- {children.filter(child => child && child.type === SingleResource)} + { children.filter(child => child && child.type === Resource) }
- {children.filter(child => child && child.type === WidgetLabel)} + { children.filter(child => child && child.type === WidgetLabel) } ; } diff --git a/src/components/widgets/widget/single_resource.jsx b/src/components/widgets/widget/single_resource.jsx deleted file mode 100644 index 7a83d8be..00000000 --- a/src/components/widgets/widget/single_resource.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import UsageBar from "../resources/usage-bar"; - -import WidgetIcon from "./widget_icon"; -import ResourceValue from "./resource_value"; -import ResourceLabel from "./resource_label"; -import Raw from "./raw"; - -export default function SingleResource({ children, key, expanded = false }) { - const values = children.filter(child => child.type === ResourceValue); - const labels = children.filter(child => child.type === ResourceLabel); - - return
- {children.find(child => child.type === WidgetIcon)} -
-
- {values.pop()} - {labels.pop()} -
- { expanded &&
- {values.pop()} - {labels.pop()} -
- } - {children.find(child => child.type === UsageBar)} -
- {children.find(child => child.type === Raw)} -
; -}