mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-19 11:09:50 +00:00
Run pre-commit hooks over existing codebase
Co-Authored-By: Ben Phelps <ben@phelps.io>
This commit is contained in:
shamoon
parent
fa50bbad9c
commit
19c25713c4
387 changed files with 4785 additions and 4109 deletions
|
|
@ -19,87 +19,86 @@ export default function Component({ service }) {
|
|||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'cpu', {
|
||||
const { data, error } = useWidgetAPI(service.widget, "cpu", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const { data: systemData, error: systemError } = useWidgetAPI(service.widget, 'system');
|
||||
const { data: systemData, error: systemError } = useWidgetAPI(service.widget, "system");
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { value: data.total }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<Chart
|
||||
dataPoints={dataPoints}
|
||||
label={[t("resources.used")]}
|
||||
formatter={(value) => t("common.number", {
|
||||
value,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
formatter={(value) =>
|
||||
t("common.number", {
|
||||
value,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{ !chart && systemData && !systemError && (
|
||||
{!chart && systemData && !systemError && (
|
||||
<Block position="top-3 right-3">
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.linux_distro && `${systemData.linux_distro} - ` }
|
||||
{systemData.os_version && systemData.os_version }
|
||||
{systemData.linux_distro && `${systemData.linux_distro} - `}
|
||||
{systemData.os_version && systemData.os_version}
|
||||
</div>
|
||||
</Block>
|
||||
)}
|
||||
|
||||
{systemData && !systemError && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{systemData.linux_distro && chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.linux_distro}
|
||||
</div>
|
||||
)}
|
||||
{systemData.linux_distro && chart && <div className="text-xs opacity-50">{systemData.linux_distro}</div>}
|
||||
|
||||
{systemData.os_version && chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.os_version}
|
||||
</div>
|
||||
)}
|
||||
{systemData.os_version && chart && <div className="text-xs opacity-50">{systemData.os_version}</div>}
|
||||
|
||||
{systemData.hostname && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.hostname}
|
||||
</div>
|
||||
)}
|
||||
{systemData.hostname && <div className="text-xs opacity-50">{systemData.hostname}</div>}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs font-bold opacity-75">
|
||||
{t("common.number", {
|
||||
value: data.total,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.used")}
|
||||
</div>
|
||||
{t("common.number", {
|
||||
value: data.total,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}{" "}
|
||||
{t("resources.used")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,19 +16,22 @@ export default function Component({ service }) {
|
|||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
const [, diskName] = widget.metric.split(':');
|
||||
const [, diskName] = widget.metric.split(":");
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit));
|
||||
const [dataPoints, setDataPoints] = useState(
|
||||
new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit),
|
||||
);
|
||||
const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'diskio', {
|
||||
const { data, error } = useWidgetAPI(service.widget, "diskio", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const calculateRates = (d) => d.map(item => ({
|
||||
a: item.read_bytes / item.time_since_update,
|
||||
b: item.write_bytes / item.time_since_update
|
||||
}));
|
||||
const calculateRates = (d) =>
|
||||
d.map((item) => ({
|
||||
a: item.read_bytes / item.time_since_update,
|
||||
b: item.write_bytes / item.time_since_update,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
|
|
@ -36,10 +39,10 @@ export default function Component({ service }) {
|
|||
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, diskData];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data, diskName]);
|
||||
|
|
@ -49,17 +52,29 @@ export default function Component({ service }) {
|
|||
}, [dataPoints]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const diskData = data.find((item) => item.disk_name === diskName);
|
||||
|
||||
if (!diskData) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const diskRates = calculateRates(dataPoints);
|
||||
|
|
@ -67,14 +82,16 @@ export default function Component({ service }) {
|
|||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<ChartDual
|
||||
dataPoints={ratePoints}
|
||||
label={[t("glances.read"), t("glances.write")]}
|
||||
max={diskData.critical}
|
||||
formatter={(value) => t("common.bitrate", {
|
||||
value,
|
||||
})}
|
||||
formatter={(value) =>
|
||||
t("common.bitrate", {
|
||||
value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -83,12 +100,14 @@ export default function Component({ service }) {
|
|||
<div className="text-xs opacity-50 text-right">
|
||||
{t("common.bitrate", {
|
||||
value: currentRate.a,
|
||||
})} {t("glances.read")}
|
||||
})}{" "}
|
||||
{t("glances.read")}
|
||||
</div>
|
||||
<div className="text-xs opacity-50 text-right">
|
||||
{t("common.bitrate", {
|
||||
value: currentRate.b,
|
||||
})} {t("glances.write")}
|
||||
})}{" "}
|
||||
{t("glances.write")}
|
||||
</div>
|
||||
</Block>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -10,43 +10,59 @@ export default function Component({ service }) {
|
|||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
const [, fsName] = widget.metric.split('fs:');
|
||||
const [, fsName] = widget.metric.split("fs:");
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, 'fs', {
|
||||
const { data, error } = useWidgetAPI(widget, "fs", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const fsData = data.find((item) => item[item.key] === fsName);
|
||||
|
||||
if (!fsData) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<div className="absolute top-0 left-0 right-0 bottom-0">
|
||||
<div style={{
|
||||
height: `${Math.max(20, (fsData.size/fsData.free))}%`,
|
||||
}} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
|
||||
<div
|
||||
style={{
|
||||
height: `${Math.max(20, fsData.size / fsData.free)}%`,
|
||||
}}
|
||||
className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 left-3">
|
||||
{ fsData.used && chart && (
|
||||
{fsData.used && chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bbytes", {
|
||||
value: fsData.used,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.used")}
|
||||
})}{" "}
|
||||
{t("resources.used")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -54,18 +70,20 @@ export default function Component({ service }) {
|
|||
{t("common.bbytes", {
|
||||
value: fsData.free,
|
||||
maximumFractionDigits: 1,
|
||||
})} {t("resources.free")}
|
||||
})}{" "}
|
||||
{t("resources.free")}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
{ !chart && (
|
||||
{!chart && (
|
||||
<Block position="top-3 right-3">
|
||||
{fsData.used && (
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.bbytes", {
|
||||
value: fsData.used,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("resources.used")}
|
||||
})}{" "}
|
||||
{t("resources.used")}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
|
|
@ -76,7 +94,8 @@ export default function Component({ service }) {
|
|||
{t("common.bbytes", {
|
||||
value: fsData.size,
|
||||
maximumFractionDigits: 1,
|
||||
})} {t("resources.total")}
|
||||
})}{" "}
|
||||
{t("resources.total")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ export default function Component({ service }) {
|
|||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
const [, gpuName] = widget.metric.split(':');
|
||||
const [, gpuName] = widget.metric.split(":");
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, 'gpu', {
|
||||
const { data, error } = useWidgetAPI(widget, "gpu", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
|
|
@ -32,68 +32,80 @@ export default function Component({ service }) {
|
|||
if (gpuData) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [data, gpuName]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line eqeqeq
|
||||
const gpuData = data.find((item) => item[item.key] == gpuName);
|
||||
|
||||
if (!gpuData) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
<ChartDual
|
||||
{chart && (
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
label={[t("glances.mem"), t("glances.gpu")]}
|
||||
stack={['mem', 'proc']}
|
||||
formatter={(value) => t("common.percent", {
|
||||
value,
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
stack={["mem", "proc"]}
|
||||
formatter={(value) =>
|
||||
t("common.percent", {
|
||||
value,
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{gpuData && gpuData.name && (
|
||||
<div className="text-xs opacity-50">
|
||||
{gpuData.name}
|
||||
</div>
|
||||
)}
|
||||
{gpuData && gpuData.name && <div className="text-xs opacity-50">{gpuData.name}</div>}
|
||||
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.number", {
|
||||
value: gpuData.mem,
|
||||
maximumFractionDigits: 1,
|
||||
})}% {t("resources.mem")}
|
||||
})}
|
||||
% {t("resources.mem")}
|
||||
</div>
|
||||
</Block>
|
||||
)}
|
||||
|
||||
{ !chart && (
|
||||
{!chart && (
|
||||
<Block position="bottom-3 left-3">
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.number", {
|
||||
value: gpuData.temperature,
|
||||
maximumFractionDigits: 1,
|
||||
})}° C
|
||||
})}
|
||||
° C
|
||||
</div>
|
||||
</Block>
|
||||
)}
|
||||
|
|
@ -105,36 +117,33 @@ export default function Component({ service }) {
|
|||
{t("common.number", {
|
||||
value: gpuData.proc,
|
||||
maximumFractionDigits: 1,
|
||||
})}% {t("glances.gpu")}
|
||||
})}
|
||||
% {t("glances.gpu")}
|
||||
</div>
|
||||
)}
|
||||
{ !chart && (
|
||||
<>•</>
|
||||
)}
|
||||
{!chart && <>•</>}
|
||||
<div className="inline-block ml-1">
|
||||
{t("common.number", {
|
||||
value: gpuData.proc,
|
||||
maximumFractionDigits: 1,
|
||||
})}% {t("glances.gpu")}
|
||||
})}
|
||||
% {t("glances.gpu")}
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block position="top-3 right-3">
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{t("common.number", {
|
||||
value: gpuData.temperature,
|
||||
maximumFractionDigits: 1,
|
||||
})}° C
|
||||
})}
|
||||
° C
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gpuData && gpuData.name && !chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{gpuData.name}
|
||||
</div>
|
||||
)}
|
||||
{gpuData && gpuData.name && !chart && <div className="text-xs opacity-50">{gpuData.name}</div>}
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,58 +6,66 @@ import Block from "../components/block";
|
|||
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
|
||||
function Swap({ quicklookData, className = "" }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return quicklookData && quicklookData.swap !== 0 && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.swap")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.swap,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
return (
|
||||
quicklookData &&
|
||||
quicklookData.swap !== 0 && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.swap")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.swap,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CPU({ quicklookData, className = "" }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return quicklookData && quicklookData.cpu && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.cpu")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.cpu,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
return (
|
||||
quicklookData &&
|
||||
quicklookData.cpu && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.cpu")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.cpu,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function Mem({ quicklookData, className = "" }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return quicklookData && quicklookData.mem && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.mem")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.mem,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
return (
|
||||
quicklookData &&
|
||||
quicklookData.mem && (
|
||||
<div className="text-xs flex place-content-between">
|
||||
<div className={className}>{t("glances.mem")}</div>
|
||||
<div className={className}>
|
||||
{t("common.number", {
|
||||
value: quicklookData.mem,
|
||||
style: "unit",
|
||||
unit: "percent",
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -65,20 +73,28 @@ export default function Component({ service }) {
|
|||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
|
||||
const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', {
|
||||
const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, "quicklook", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, 'system', {
|
||||
const { data: systemData, errorL: systemError } = useWidgetAPI(service.widget, "system", {
|
||||
refreshInterval: 30000,
|
||||
});
|
||||
|
||||
if (quicklookError) {
|
||||
return <Container chart={chart}><Error error={quicklookError} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={quicklookError} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (systemError) {
|
||||
return <Container chart={chart}><Error error={systemError} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={systemError} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const dataCharts = [];
|
||||
|
|
@ -95,45 +111,25 @@ export default function Component({ service }) {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
|
||||
<Block position="top-3 right-3">
|
||||
{quicklookData && quicklookData.cpu_name && chart && (
|
||||
<div className="text-[0.6rem] opacity-50">
|
||||
{quicklookData.cpu_name}
|
||||
</div>
|
||||
<div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>
|
||||
)}
|
||||
|
||||
{ !chart && quicklookData?.swap === 0 && (
|
||||
<div className="text-[0.6rem] opacity-50">
|
||||
{quicklookData.cpu_name}
|
||||
</div>
|
||||
{!chart && quicklookData?.swap === 0 && (
|
||||
<div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>
|
||||
)}
|
||||
|
||||
<div className="w-[4rem]">
|
||||
{ !chart && <Swap quicklookData={quicklookData} className="opacity-25" /> }
|
||||
</div>
|
||||
<div className="w-[4rem]">{!chart && <Swap quicklookData={quicklookData} className="opacity-25" />}</div>
|
||||
</Block>
|
||||
|
||||
|
||||
{chart && (
|
||||
<Block position="bottom-3 left-3">
|
||||
{systemData && systemData.linux_distro && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.linux_distro}
|
||||
</div>
|
||||
)}
|
||||
{systemData && systemData.os_version && (
|
||||
<div className="text-xs opacity-50">
|
||||
{systemData.os_version}
|
||||
</div>
|
||||
)}
|
||||
{systemData && systemData.hostname && (
|
||||
<div className="text-xs opacity-75">
|
||||
{systemData.hostname}
|
||||
</div>
|
||||
)}
|
||||
{systemData && systemData.linux_distro && <div className="text-xs opacity-50">{systemData.linux_distro}</div>}
|
||||
{systemData && systemData.os_version && <div className="text-xs opacity-50">{systemData.os_version}</div>}
|
||||
{systemData && systemData.hostname && <div className="text-xs opacity-75">{systemData.hostname}</div>}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
|
|
@ -144,12 +140,12 @@ export default function Component({ service }) {
|
|||
)}
|
||||
|
||||
<Block position="bottom-3 right-3 w-[4rem]">
|
||||
{ chart && <CPU quicklookData={quicklookData} className="opacity-50" /> }
|
||||
{chart && <CPU quicklookData={quicklookData} className="opacity-50" />}
|
||||
|
||||
{ chart && <Mem quicklookData={quicklookData} className="opacity-50" /> }
|
||||
{ !chart && <Mem quicklookData={quicklookData} className="opacity-75" /> }
|
||||
{chart && <Mem quicklookData={quicklookData} className="opacity-50" />}
|
||||
{!chart && <Mem quicklookData={quicklookData} className="opacity-75" />}
|
||||
|
||||
{ chart && <Swap quicklookData={quicklookData} className="opacity-50" /> }
|
||||
{chart && <Swap quicklookData={quicklookData} className="opacity-50" />}
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,10 +17,9 @@ export default function Component({ service }) {
|
|||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'mem', {
|
||||
const { data, error } = useWidgetAPI(service.widget, "mem", {
|
||||
refreshInterval: chart ? 1000 : 5000,
|
||||
});
|
||||
|
||||
|
|
@ -28,34 +27,44 @@ export default function Component({ service }) {
|
|||
if (data) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart} >
|
||||
<Container chart={chart}>
|
||||
{chart && (
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
max={data.total}
|
||||
label={[t("resources.used"), t("resources.free")]}
|
||||
formatter={(value) => t("common.bytes", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
binary: true,
|
||||
})}
|
||||
formatter={(value) =>
|
||||
t("common.bytes", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
binary: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -67,7 +76,8 @@ export default function Component({ service }) {
|
|||
value: data.free,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})} {t("resources.free")}
|
||||
})}{" "}
|
||||
{t("resources.free")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -77,13 +87,14 @@ export default function Component({ service }) {
|
|||
value: data.total,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})} {t("resources.total")}
|
||||
})}{" "}
|
||||
{t("resources.total")}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
)}
|
||||
|
||||
{ !chart && (
|
||||
{!chart && (
|
||||
<Block position="top-3 right-3">
|
||||
{data.free && (
|
||||
<div className="text-xs opacity-50">
|
||||
|
|
@ -91,7 +102,8 @@ export default function Component({ service }) {
|
|||
value: data.free,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})} {t("resources.free")}
|
||||
})}{" "}
|
||||
{t("resources.free")}
|
||||
</div>
|
||||
)}
|
||||
</Block>
|
||||
|
|
@ -103,7 +115,8 @@ export default function Component({ service }) {
|
|||
value: data.used,
|
||||
maximumFractionDigits: 1,
|
||||
binary: true,
|
||||
})} {t("resources.used")}
|
||||
})}{" "}
|
||||
{t("resources.used")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ export default function Component({ service }) {
|
|||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { chart, metric } = widget;
|
||||
const [, interfaceName] = metric.split(':');
|
||||
const [, interfaceName] = metric.split(":");
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, 'network', {
|
||||
const { data, error } = useWidgetAPI(widget, "network", {
|
||||
refreshInterval: chart ? 1000 : 5000,
|
||||
});
|
||||
|
||||
|
|
@ -30,64 +30,81 @@ export default function Component({ service }) {
|
|||
|
||||
if (interfaceData) {
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { a: (interfaceData.rx * 8) / interfaceData.time_since_update, b: (interfaceData.tx * 8) / interfaceData.time_since_update }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
const newDataPoints = [
|
||||
...prevDataPoints,
|
||||
{
|
||||
a: (interfaceData.rx * 8) / interfaceData.time_since_update,
|
||||
b: (interfaceData.tx * 8) / interfaceData.time_since_update,
|
||||
},
|
||||
];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [data, interfaceName]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const interfaceData = data.find((item) => item[item.key] === interfaceName);
|
||||
|
||||
if (!interfaceData) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<ChartDual
|
||||
dataPoints={dataPoints}
|
||||
label={[t("docker.rx"), t("docker.tx")]}
|
||||
formatter={(value) => t("common.bitrate", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
formatter={(value) =>
|
||||
t("common.bitrate", {
|
||||
value,
|
||||
maximumFractionDigits: 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Block position="bottom-3 left-3">
|
||||
{interfaceData && interfaceData.interface_name && chart && (
|
||||
<div className="text-xs opacity-50">
|
||||
{interfaceData.interface_name}
|
||||
</div>
|
||||
<div className="text-xs opacity-50">{interfaceData.interface_name}</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs opacity-75">
|
||||
{t("common.bitrate", {
|
||||
value: (interfaceData.rx * 8) / interfaceData.time_since_update,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("docker.rx")}
|
||||
})}{" "}
|
||||
{t("docker.rx")}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
{ !chart && (
|
||||
{!chart && (
|
||||
<Block position="top-3 right-3">
|
||||
{interfaceData && interfaceData.interface_name && (
|
||||
<div className="text-xs opacity-50">
|
||||
{interfaceData.interface_name}
|
||||
</div>
|
||||
<div className="text-xs opacity-50">{interfaceData.interface_name}</div>
|
||||
)}
|
||||
</Block>
|
||||
)}
|
||||
|
|
@ -97,7 +114,8 @@ export default function Component({ service }) {
|
|||
{t("common.bitrate", {
|
||||
value: (interfaceData.tx * 8) / interfaceData.time_since_update,
|
||||
maximumFractionDigits: 0,
|
||||
})} {t("docker.tx")}
|
||||
})}{" "}
|
||||
{t("docker.tx")}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
|
|||
import ResolvedIcon from "components/resolvedicon";
|
||||
|
||||
const statusMap = {
|
||||
"R": <ResolvedIcon icon="mdi-circle" width={32} height={32} />, // running
|
||||
"S": <ResolvedIcon icon="mdi-circle-outline" width={32} height={32} />, // sleeping
|
||||
"D": <ResolvedIcon icon="mdi-circle-double" width={32} height={32} />, // disk sleep
|
||||
"Z": <ResolvedIcon icon="mdi-circle-opacity" width={32} height={32} />, // zombie
|
||||
"T": <ResolvedIcon icon="mdi-decagram-outline" width={32} height={32} />, // traced
|
||||
"t": <ResolvedIcon icon="mdi-hexagon-outline" width={32} height={32} />, // traced
|
||||
"X": <ResolvedIcon icon="mdi-rhombus-outline" width={32} height={32} />, // dead
|
||||
R: <ResolvedIcon icon="mdi-circle" width={32} height={32} />, // running
|
||||
S: <ResolvedIcon icon="mdi-circle-outline" width={32} height={32} />, // sleeping
|
||||
D: <ResolvedIcon icon="mdi-circle-double" width={32} height={32} />, // disk sleep
|
||||
Z: <ResolvedIcon icon="mdi-circle-opacity" width={32} height={32} />, // zombie
|
||||
T: <ResolvedIcon icon="mdi-decagram-outline" width={32} height={32} />, // traced
|
||||
t: <ResolvedIcon icon="mdi-hexagon-outline" width={32} height={32} />, // traced
|
||||
X: <ResolvedIcon icon="mdi-rhombus-outline" width={32} height={32} />, // dead
|
||||
};
|
||||
|
||||
export default function Component({ service }) {
|
||||
|
|
@ -22,16 +22,24 @@ export default function Component({ service }) {
|
|||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'processlist', {
|
||||
const { data, error } = useWidgetAPI(service.widget, "processlist", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
data.splice(chart ? 5 : 1);
|
||||
|
|
@ -48,19 +56,21 @@ export default function Component({ service }) {
|
|||
|
||||
<Block position="bottom-4 right-3 left-3">
|
||||
<div className="pointer-events-none text-theme-900 dark:text-theme-200">
|
||||
{ data.map((item) => <div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 mr-1.5 opacity-50">
|
||||
{statusMap[item.status]}
|
||||
{data.map((item) => (
|
||||
<div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 mr-1.5 opacity-50">{statusMap[item.status]}</div>
|
||||
<div className="opacity-75 grow">{item.name}</div>
|
||||
<div className="opacity-25 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
|
||||
<div className="opacity-25 w-14 text-right">
|
||||
{t("common.bytes", {
|
||||
value: item.memory_info[0],
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="opacity-75 grow">{item.name}</div>
|
||||
<div className="opacity-25 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
|
||||
<div className="opacity-25 w-14 text-right">{t("common.bytes", {
|
||||
value: item.memory_info[0],
|
||||
maximumFractionDigits: 0,
|
||||
})}</div>
|
||||
</div>
|
||||
</div>) }
|
||||
))}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ export default function Component({ service }) {
|
|||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { chart } = widget;
|
||||
const [, sensorName] = widget.metric.split(':');
|
||||
const [, sensorName] = widget.metric.split(":");
|
||||
|
||||
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
|
||||
|
||||
const { data, error } = useWidgetAPI(service.widget, 'sensors', {
|
||||
const { data, error } = useWidgetAPI(service.widget, "sensors", {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
|
||||
|
|
@ -29,38 +29,52 @@ export default function Component({ service }) {
|
|||
const sensorData = data.find((item) => item.label === sensorName);
|
||||
setDataPoints((prevDataPoints) => {
|
||||
const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
if (newDataPoints.length > pointsLimit) {
|
||||
newDataPoints.shift();
|
||||
}
|
||||
return newDataPoints;
|
||||
});
|
||||
}
|
||||
}, [data, sensorName]);
|
||||
|
||||
if (error) {
|
||||
return <Container chart={chart}><Error error={error} /></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Error error={error} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const sensorData = data.find((item) => item.label === sensorName);
|
||||
|
||||
if (!sensorData) {
|
||||
return <Container chart={chart}><Block position="bottom-3 left-3">-</Block></Container>;
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
<Block position="bottom-3 left-3">-</Block>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container chart={chart}>
|
||||
{ chart && (
|
||||
{chart && (
|
||||
<Chart
|
||||
dataPoints={dataPoints}
|
||||
label={[sensorData.unit]}
|
||||
max={sensorData.critical}
|
||||
formatter={(value) => t("common.number", {
|
||||
value,
|
||||
})}
|
||||
formatter={(value) =>
|
||||
t("common.number", {
|
||||
value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -80,18 +94,20 @@ export default function Component({ service }) {
|
|||
)}
|
||||
|
||||
<Block position="bottom-3 right-3">
|
||||
<div className="text-xs opacity-50">
|
||||
{sensorData.warning && !chart && (
|
||||
<>
|
||||
{t("glances.warn")} {sensorData.warning} {sensorData.unit}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs opacity-75">
|
||||
{t("glances.temp")} {t("common.number", {
|
||||
value: sensorData.value,
|
||||
})} {sensorData.unit}
|
||||
</div>
|
||||
<div className="text-xs opacity-50">
|
||||
{sensorData.warning && !chart && (
|
||||
<>
|
||||
{t("glances.warn")} {sensorData.warning} {sensorData.unit}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs opacity-75">
|
||||
{t("glances.temp")}{" "}
|
||||
{t("common.number", {
|
||||
value: sensorData.value,
|
||||
})}{" "}
|
||||
{sensorData.unit}
|
||||
</div>
|
||||
</Block>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue