open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Further improvements to simplify information widgets

Browse Source 
Signed-off-by: Denis Papec <denis.papec@gmail.com>
pull/1574/head
Denis Papec 1 year ago
parent d4fd923be5
commit a55fe939cb
No known key found for this signature in database
GPG Key ID: DE0912C69A47222C
12 changed files with 181 additions and 267 deletions
Show Stats Download Patch File Download Diff File

130
src/components/widgets/glances/glances.jsx
Unescape View File

@ -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 <Resources options={options}>
<SingleResource>
<WidgetIcon icon={FiCpu} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
<SingleResource>
<WidgetIcon icon={FaMemory} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
{options.cputemp &&
<SingleResource>
<WidgetIcon icon={FaThermometerHalf} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
}
{options.uptime &&
<SingleResource>
<WidgetIcon icon={FaRegClock} />
<ResourceLabel>{t("glances.wait")}</ResourceLabel>
<UsageBar percent="0" />
</SingleResource>
}
{options.label && <WidgetLabel label={options.label} />}
<Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
<Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
{ options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
{ options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
{ options.label && <WidgetLabel label={options.label} /> }
</Resources>;
}
@ -93,77 +69,81 @@ export default function Widget({ options }) {
return (
<Resources options={options} target={settings.target ?? "_blank"}>
<SingleResource>
<WidgetIcon icon={FiCpu} />
<ResourceValue>{t("common.number", {
<Resource
icon={FiCpu}
value={t("common.number", {
value: data.cpu.total,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}</ResourceValue>
<ResourceLabel>{t("glances.cpu")}</ResourceLabel>
<ResourceValue>{t("common.number", {
})}
label={t("glances.cpu")}
expandedValue={t("common.number", {
value: data.load.min15,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}</ResourceValue>
<ResourceLabel>{t("glances.load")}</ResourceLabel>
<UsageBar percent={data.cpu.total} />
</SingleResource>
<SingleResource>
<WidgetIcon icon={FaMemory} />
<ResourceValue>{t("common.bytes", {
maximumFractionDigits: 0
})}
expandedLabel={t("glances.load")}
percentage={data.cpu.total}
expanded={options.expanded}
/>
<Resource
icon={FaMemory}
value={t("common.bytes", {
value: data.mem.free,
maximumFractionDigits: 1,
binary: true,
})}</ResourceValue>
<ResourceLabel>{t("glances.free")}</ResourceLabel>
<ResourceValue>{t("common.bytes", {
})}
label={t("glances.free")}
expandedValue={t("common.bytes", {
value: data.mem.total,
maximumFractionDigits: 1,
binary: true,
})}</ResourceValue>
<ResourceLabel>{t("glances.total")}</ResourceLabel>
<UsageBar percent={data.mem.percent} />
</SingleResource>
})}
expandedLabel={t("glances.total")}
percentage={data.mem.percent}
expanded={options.expanded}
/>
{disks.map((disk) => (
<SingleResource key={disk.mnt_point}>
<WidgetIcon icon={FiHardDrive} />
<ResourceValue>{t("common.bytes", { value: disk.free })}</ResourceValue>
<ResourceLabel>{t("glances.free")}</ResourceLabel>
<ResourceValue>{t("common.bytes", { value: disk.size })}</ResourceValue>
<ResourceLabel>{t("glances.total")}</ResourceLabel>
<UsageBar percent={disk.percent} />
</SingleResource>
<Resource key={disk.mnt_point}
icon={FiHardDrive}
value={t("common.bytes", { value: disk.free })}
label={t("glances.free")}
expandedValue={t("common.bytes", { value: disk.size })}
expandedLabel={t("glances.total")}
percentage={disk.percent}
expanded={options.expanded}
/>
))}
{options.cputemp && mainTemp > 0 &&
<SingleResource>
<WidgetIcon icon={FaThermometerHalf} />
<ResourceValue>{t("common.number", {
<Resource
icon={FaThermometerHalf}
value={t("common.number", {
value: mainTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}</ResourceValue>
<ResourceLabel>{t("glances.temp")}</ResourceLabel>
<ResourceValue>{t("common.number", {
})}
label={t("glances.temp")}
expandedValue={t("common.number", {
value: maxTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}</ResourceValue>
<ResourceLabel>{t("glances.warn")}</ResourceLabel>
<UsageBar percent={tempPercent} />
</SingleResource>
})}
expandedLabel={t("glances.warn")}
percentage={tempPercent}
expanded={options.expanded}
/>
}
{options.uptime && data.uptime &&
<SingleResource>
<WidgetIcon icon={FaRegClock} />
<ResourceValue>{data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}</ResourceValue>
<ResourceLabel>{t("glances.uptime")}</ResourceLabel>
<UsageBar percent={Math.round((new Date().getSeconds() / 60) * 100)} />
</SingleResource>
<Resource
icon={FaRegClock}
value={data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
label={t("glances.uptime")}
percentage={Math.round((new Date().getSeconds() / 60) * 100).toString()}
/>
}
{options.label && <WidgetLabel label={options.label} />}
</Resources>

25
src/components/widgets/longhorn/node.jsx
Unescape View File

@ -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 <SingleResource expanded={expanded}>
<WidgetIcon icon={FaThermometerHalf} />
<ResourceValue>{t("common.bytes", { value: data.node.available })}</ResourceValue>
<ResourceLabel>{t("resources.free")}</ResourceLabel>
<ResourceValue>{t("common.bytes", { value: data.node.maximum })}</ResourceValue>
<ResourceLabel>{t("resources.total")}</ResourceLabel>
<UsageBar percent={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)} />
{ labels && <WidgetLabel label={data.node.id} /> }
</SingleResource>
return <Resource
icon={FaThermometerHalf}
value={t("common.bytes", { value: data.node.available })}
label={t("resources.free")}
expandedValue={t("common.bytes", { value: data.node.maximum })}
expandedLabel={t("resources.total")}
percentage={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)}
expanded={expanded}
>{ labels && <WidgetLabel label={data.node.id} /> }
</Resource>
}

38
src/components/widgets/resources/cpu.jsx
Unescape View File

@ -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", {
return <Resource
icon={FiCpu}
value={t("common.number", {
value: data.cpu.usage,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</ResourceValue>
<ResourceLabel>{t("resources.cpu")}</ResourceLabel>
<ResourceValue>
{t("common.number", {
label={t("resources.cpu")}
expandedValue={t("common.number", {
value: data.cpu.load,
maximumFractionDigits: 2,
})}
</ResourceValue>
<ResourceLabel>{t("resources.load")}</ResourceLabel>
<UsageBar percent={data.cpu.usage} />
</SingleResource>
expandedLabel={t("resources.load")}
percentage={data.cpu.usage}
expanded={expanded}
/>
}

43
src/components/widgets/resources/cputemp.jsx
Unescape View File

@ -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", {
return <Resource
icon={FaThermometerHalf}
value={t("common.number", {
value: mainTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</ResourceValue>
<ResourceLabel>{t("resources.temp")}</ResourceLabel>
<ResourceValue>
{t("common.number", {
label={t("resources.temp")}
expandedValue={t("common.number", {
value: maxTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</ResourceValue>
<ResourceLabel>{t("resources.max")}</ResourceLabel>
<UsageBar percent={Math.round((mainTemp / maxTemp) * 100)} />
</SingleResource>;
expandedLabel={t("resources.max")}
percentage={Math.round((mainTemp / maxTemp) * 100)}
expanded={expanded}
/>;
}

41
src/components/widgets/resources/disk.jsx
Unescape View File

@ -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}
/>;
}

47
src/components/widgets/resources/memory.jsx
Unescape View File

@ -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}
/>;
}

22
src/components/widgets/resources/uptime.jsx
Unescape View File

@ -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} />;
}

22
src/components/widgets/widget/resource.jsx
Unescape View File

@ -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 <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
<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">{value}</div>
<div className="pr-1">{label}</div>
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{expandedValue}</div>
<div className="pr-1">{expandedLabel}</div>
</div>
}
{ percentage && <UsageBar percent={percentage} /> }
{ children }
</div>
</div>;
}

5
src/components/widgets/widget/resource_label.jsx
Unescape View File

@ -1,5 +0,0 @@
export default function ResourceLabel({ children }) {
return (
<div className="pr-1">{children}</div>
);
}

5
src/components/widgets/widget/resource_value.jsx
Unescape View File

@ -1,5 +0,0 @@
export default function ResourceValue({ children }) {
return (
<div className="pl-0.5">{children}</div>
);
}

6
src/components/widgets/widget/resources.jsx
Unescape View File

@ -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 <ContainerLink options={options} target={target}>
<Raw>
<div className="flex flex-row self-center flex-wrap justify-between">
{children.filter(child => child && child.type === SingleResource)}
{ children.filter(child => child && child.type === Resource) }
</div>
{children.filter(child => child && child.type === WidgetLabel)}
{ children.filter(child => child && child.type === WidgetLabel) }
</Raw>
</ContainerLink>;
}

28
src/components/widgets/widget/single_resource.jsx
Unescape View File

@ -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 <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
{children.find(child => child.type === WidgetIcon)}
<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">
{values.pop()}
{labels.pop()}
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
{values.pop()}
{labels.pop()}
</div>
}
{children.find(child => child.type === UsageBar)}
</div>
{children.find(child => child.type === Raw)}
</div>;
}
Write Preview
Loading…
Cancel
Save