dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-15 01:10:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Run pre-commit hooks over existing codebase

Browse source 
Co-Authored-By: Ben Phelps <ben@phelps.io>
This commit is contained in:
shamoon 2023-10-17 23:26:55 -07:00
parent fa50bbad9c
commit 19c25713c4
387 changed files with 4785 additions and 4109 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/widgets/glances/components/block.jsx
View file

@ -1,7 +1,3 @@
export default function Block({ position, children }) {
return (
<div className={`absolute ${position} z-20 text-sm pointer-events-none`}>
{children}
</div>
);
return <div className={`absolute ${position} z-20 text-sm pointer-events-none`}>{children}</div>;
}

9
src/widgets/glances/components/chart.jsx
View file

@ -14,8 +14,8 @@ class Chart extends PureComponent {
<AreaChart data={dataPoints}>
<defs>
<linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4} />
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1} />
</linearGradient>
</defs>
<Area
@ -24,7 +24,8 @@ class Chart extends PureComponent {
type="monotoneX"
dataKey="value"
stroke="rgb(var(--color-500))"
fillOpacity={1} fill="url(#color)"
fillOpacity={1}
fill="url(#color)"
baseLine={0}
/>
<Tooltip
@ -34,7 +35,7 @@ class Chart extends PureComponent {
classNames="rounded-md text-xs p-0.5"
contentStyle={{
backgroundColor: "rgb(var(--color-800))",
color: "rgb(var(--color-100))"
color: "rgb(var(--color-100))",
}}
/>
</AreaChart>

19
src/widgets/glances/components/chart_dual.jsx
View file

@ -11,15 +11,15 @@ class ChartDual extends PureComponent {
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<div className="overflow-clip z-10 w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={dataPoints} stackOffset={stackOffset ?? "none"}>
<AreaChart data={dataPoints} stackOffset={stackOffset ?? "none"}>
<defs>
<linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8}/>
<stop offset="95%" stopColor="rgb(var(--color-800))" stopOpacity={0.5}/>
<stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8} />
<stop offset="95%" stopColor="rgb(var(--color-800))" stopOpacity={0.5} />
</linearGradient>
<linearGradient id="colorB" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
<stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4} />
<stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1} />
</linearGradient>
</defs>
@ -30,7 +30,8 @@ class ChartDual extends PureComponent {
type="monotoneX"
dataKey="a"
stroke="rgb(var(--color-700))"
fillOpacity={1} fill="url(#colorA)"
fillOpacity={1}
fill="url(#colorA)"
/>
<Area
name={label[1]}
@ -39,7 +40,8 @@ class ChartDual extends PureComponent {
type="monotoneX"
dataKey="b"
stroke="rgb(var(--color-500))"
fillOpacity={1} fill="url(#colorB)"
fillOpacity={1}
fill="url(#colorB)"
/>
<Tooltip
allowEscapeViewBox={{ x: false, y: false }}
@ -48,9 +50,8 @@ class ChartDual extends PureComponent {
classNames="rounded-md text-xs p-0.5"
contentStyle={{
backgroundColor: "rgb(var(--color-800))",
color: "rgb(var(--color-100))"
color: "rgb(var(--color-100))",
}}
/>
</AreaChart>
</ResponsiveContainer>

4
src/widgets/glances/components/container.jsx
View file

@ -3,8 +3,8 @@ export default function Container({ children, chart = true, className = "" }) {
<div>
{children}
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
{ chart && <div className="h-[68px] overflow-clip" /> }
{ !chart && <div className="h-[16px] overflow-clip" /> }
{chart && <div className="h-[68px] overflow-clip" />}
{!chart && <div className="h-[16px] overflow-clip" />}
</div>
);
}

6
src/widgets/glances/components/custom_tooltip.jsx
View file

@ -4,7 +4,9 @@ export default function Tooltip({ active, payload, formatter }) {
<div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
{payload.map((pld, id) => (
<div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
<div>{formatter(pld.value)} {payload[id].name}</div>
<div>
{formatter(pld.value)} {payload[id].name}
</div>
</div>
))}
</div>
@ -12,4 +14,4 @@ export default function Tooltip({ active, payload, formatter }) {
}
return null;
};
}

4
src/widgets/glances/components/error.jsx
View file

@ -3,7 +3,5 @@ import { useTranslation } from "next-i18next";
export default function Error() {
const { t } = useTranslation();
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">
{t("widget.api_error")}
</div>;
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">{t("widget.api_error")}</div>;
}

79
src/widgets/glances/metrics/cpu.jsx
View file

@ -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>
);

59
src/widgets/glances/metrics/disk.jsx
View file

@ -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>
)}

49
src/widgets/glances/metrics/fs.jsx
View file

@ -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>

83
src/widgets/glances/metrics/gpu.jsx
View file

@ -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,
})}&deg; C
})}
&deg; 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 && (
<>&bull;</>
)}
{!chart && <>&bull;</>}
<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,
})}&deg; C
})}
&deg; 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>
);

134
src/widgets/glances/metrics/info.jsx
View file

@ -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>
);

51
src/widgets/glances/metrics/memory.jsx
View file

@ -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>

66
src/widgets/glances/metrics/net.jsx
View file

@ -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>

52
src/widgets/glances/metrics/process.jsx
View file

@ -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>

66
src/widgets/glances/metrics/sensor.jsx
View file

@ -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>
);