mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-09 06:48:47 +00:00
Enhanced glances widget (#1534)
* Enhanced glances widget (resource match) * Make widget clickable + cleanup helperrs * Prevent unused glances API calls --------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
parent
3bc750bfe7
commit
cdd7b2d44b
4 changed files with 115 additions and 33 deletions
|
@ -1,11 +1,14 @@
|
|||
import useSWR from "swr";
|
||||
import { useContext } from "react";
|
||||
import { BiError } from "react-icons/bi";
|
||||
import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
|
||||
import { FiCpu } from "react-icons/fi";
|
||||
import { FiCpu, FiHardDrive } from "react-icons/fi";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import UsageBar from "../resources/usage-bar";
|
||||
|
||||
import { SettingsContext } from "utils/contexts/settings";
|
||||
|
||||
const cpuSensorLabels = ["cpu_thermal", "Core", "Tctl"];
|
||||
|
||||
function convertToFahrenheit(t) {
|
||||
|
@ -14,6 +17,7 @@ function convertToFahrenheit(t) {
|
|||
|
||||
export default function Widget({ options }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { settings } = useContext(SettingsContext);
|
||||
|
||||
const { data, error } = useSWR(
|
||||
`/api/widgets/glances?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`, {
|
||||
|
@ -88,8 +92,16 @@ export default function Widget({ options }) {
|
|||
}
|
||||
const tempPercent = Math.round((mainTemp / maxTemp) * 100);
|
||||
|
||||
let disks = [];
|
||||
|
||||
if (options.disk) {
|
||||
disks = Array.isArray(options.disk)
|
||||
? options.disk.map((disk) => data.fs.find((d) => d.mnt_point === disk)).filter((d) => d)
|
||||
: [data.fs.find((d) => d.mnt_point === options.disk)].filter((d) => d);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4">
|
||||
<a href={options.url} target={settings.target ?? "_blank"} 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">
|
||||
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
|
||||
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
|
||||
|
@ -97,7 +109,7 @@ export default function Widget({ options }) {
|
|||
<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.quicklook.cpu,
|
||||
value: data.cpu.total,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
|
@ -105,7 +117,20 @@ export default function Widget({ options }) {
|
|||
</div>
|
||||
<div className="pr-1">{t("glances.cpu")}</div>
|
||||
</div>
|
||||
<UsageBar percent={data.quicklook.cpu} />
|
||||
{options.expanded && (
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5 pr-1">
|
||||
{t("common.number", {
|
||||
value: data.load.min15,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
<div className="pr-1">{t("glances.load")}</div>
|
||||
</span>
|
||||
)}
|
||||
<UsageBar percent={data.cpu.total} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
|
||||
|
@ -113,18 +138,46 @@ export default function Widget({ options }) {
|
|||
<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: data.quicklook.mem,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
{t("common.bytes", {
|
||||
value: data.mem.free,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})}
|
||||
</div>
|
||||
<div className="pr-1">{t("glances.mem")}</div>
|
||||
<div className="pr-1">{t("glances.free")}</div>
|
||||
</div>
|
||||
<UsageBar percent={data.quicklook.mem} />
|
||||
{options.expanded && (
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5 pr-1">
|
||||
{t("common.bytes", {
|
||||
value: data.mem.total,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})}
|
||||
</div>
|
||||
<div className="pr-1">{t("glances.total")}</div>
|
||||
</span>
|
||||
)}
|
||||
<UsageBar percent={data.mem.percent} />
|
||||
</div>
|
||||
</div>
|
||||
{disks.map((disk) => (
|
||||
<div key={disk.mnt_point} className="flex-none flex flex-row items-center mr-3 py-1.5">
|
||||
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
|
||||
<div className="flex flex-col ml-3 text-left min-w-[85px]">
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5">{t("common.bytes", { value: disk.free })}</div>
|
||||
<div className="pr-1">{t("glances.free")}</div>
|
||||
</span>
|
||||
{options.expanded && (
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5 pr-1">{t("common.bytes", { value: disk.size })}</div>
|
||||
<div className="pr-1">{t("glances.total")}</div>
|
||||
</span>
|
||||
)}
|
||||
<UsageBar percent={disk.percent} />
|
||||
</div>
|
||||
</div>))}
|
||||
{options.cputemp && mainTemp > 0 &&
|
||||
(<div className="flex-none flex flex-row items-center mr-3 py-1.5">
|
||||
<FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
|
||||
|
@ -140,6 +193,19 @@ export default function Widget({ options }) {
|
|||
</div>
|
||||
<div className="pr-1">{t("glances.temp")}</div>
|
||||
</span>
|
||||
{options.expanded && (
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
|
||||
<div className="pl-0.5 pr-1">
|
||||
{t("common.number", {
|
||||
value: maxTemp,
|
||||
maximumFractionDigits: 1,
|
||||
style: "unit",
|
||||
unit
|
||||
})}
|
||||
</div>
|
||||
<div className="pr-1">{t("glances.warn")}</div>
|
||||
</span>
|
||||
)}
|
||||
<UsageBar percent={tempPercent} />
|
||||
</div>
|
||||
</div>)}
|
||||
|
@ -160,6 +226,6 @@ export default function Widget({ options }) {
|
|||
{options.label && (
|
||||
<div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue