8x48/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2026-01-05 15:02:08 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Refactored information widgets, improve widget-boxed style

Browse Source 
Signed-off-by: Denis Papec <denis.papec@gmail.com>
This commit is contained in:
Denis Papec
2023-06-03 01:10:15 +01:00
parent c79d45f91e
commit d4fd923be5
37 changed files with 701 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/widgets/kubernetes/node.jsx
View File

@@ -3,8 +3,7 @@ import { FiAlertTriangle, FiCpu, FiServer } from "react-icons/fi";
import { SiKubernetes } from "react-icons/si";
import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar";
import UsageBar from "../resources/usage-bar";
export default function Node({ type, options, data }) {
const { t } = useTranslation();
@@ -29,7 +28,7 @@ export default function Node({ type, options, data }) {
<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.cpu.percent,
value: data?.cpu?.percent ?? 0,
style: "unit",
unit: "percent",
maximumFractionDigits: 0
@@ -37,18 +36,18 @@ export default function Node({ type, options, data }) {
</div>
<FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
</div>
<UsageBar percent={data.cpu.percent} />
<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,
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} />
<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>
)}