glances widget test 1

This commit is contained in:
Ben Phelps 2023-08-01 03:54:19 +03:00
parent 5221ed06ed
commit 9aba70d214
19 changed files with 1018 additions and 9 deletions

View file

@ -24,6 +24,7 @@ const components = {
freshrss: dynamic(() => import("./freshrss/component")),
gamedig: dynamic(() => import("./gamedig/component")),
ghostfolio: dynamic(() => import("./ghostfolio/component")),
glances: dynamic(() => import("./glances/component")),
gluetun: dynamic(() => import("./gluetun/component")),
gotify: dynamic(() => import("./gotify/component")),
grafana: dynamic(() => import("./grafana/component")),

View file

@ -0,0 +1,46 @@
import { PureComponent } from "react";
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
import CustomTooltip from "./custom_tooltip";
class Chart extends PureComponent {
render() {
const { dataPoints, formatter, label } = this.props;
return (
<div className="overflow-clip z-10 w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<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}/>
</linearGradient>
</defs>
<Area
name={label[0]}
isAnimationActive={false}
type="monotoneX"
dataKey="value"
stroke="rgb(var(--color-500))"
fillOpacity={1} fill="url(#color)"
baseLine={0}
/>
<Tooltip
allowEscapeViewBox={{ x: false, y: false }}
formatter={formatter}
content={<CustomTooltip formatter={formatter} />}
classNames="rounded-md text-xs p-0.5"
contentStyle={{
backgroundColor: "rgb(var(--color-800))",
color: "rgb(var(--color-100))"
}}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}
}
export default Chart;

View file

@ -0,0 +1,61 @@
import { PureComponent } from "react";
import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
import CustomTooltip from "./custom_tooltip";
class ChartDual extends PureComponent {
render() {
const { dataPoints, formatter, stack, label } = this.props;
return (
<div className="overflow-clip z-10 w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={dataPoints} stackOffset={stack ?? "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}/>
</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}/>
</linearGradient>
</defs>
<Area
name={label[0]}
stackId="1"
isAnimationActive={false}
type="monotoneX"
dataKey="a"
stroke="rgb(var(--color-700))"
fillOpacity={1} fill="url(#colorA)"
/>
<Area
name={label[1]}
stackId="1"
isAnimationActive={false}
type="monotoneX"
dataKey="b"
stroke="rgb(var(--color-500))"
fillOpacity={1} fill="url(#colorB)"
/>
<Tooltip
allowEscapeViewBox={{ x: false, y: false }}
formatter={formatter}
content={<CustomTooltip formatter={formatter} />}
classNames="rounded-md text-xs p-0.5"
contentStyle={{
backgroundColor: "rgb(var(--color-800))",
color: "rgb(var(--color-100))"
}}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}
}
export default ChartDual;

View file

@ -0,0 +1,34 @@
import Memory from "./memory";
import Cpu from "./cpu";
import Sensor from "./sensor";
import Net from "./net";
import Process from "./process";
import Disk from "./disk";
export default function Component({ service }) {
const { widget } = service;
if (widget.metric === "memory") {
return <Memory service={service} />;
}
if (widget.metric === "process") {
return <Process service={service} />;
}
if (widget.metric.match(/^network:/)) {
return <Net service={service} />;
}
if (widget.metric.match(/^sensor:/)) {
return <Sensor service={service} />;
}
if (widget.metric.match(/^disk:/)) {
return <Disk service={service} />;
}
if (widget.metric === "cpu") {
return <Cpu service={service} />;
}
}

100
src/widgets/glances/cpu.jsx Normal file
View file

@ -0,0 +1,100 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "utils/proxy/use-widget-api";
const Chart = dynamic(() => import("./chart"), { ssr: false });
const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(service.widget, 'cpu', {
refreshInterval: 1000,
});
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;
});
}
}, [data]);
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-75">
-
</div>
</div>
</div>;
}
return (
<>
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<Chart
dataPoints={dataPoints}
label={[t("resources.used")]}
formatter={(value) => t("common.number", {
value,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
/>
</div>
<div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
{systemData && !systemError && (
<>
{systemData.linux_distro && (
<div className="text-xs opacity-80">
{systemData.linux_distro}
</div>
)}
{systemData.os_version && (
<div className="text-xs opacity-80">
{systemData.os_version}
</div>
)}
{systemData.hostname && (
<div className="text-xs font-bold">
{systemData.hostname}
</div>
)}
</>
)}
</div>
<div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
{t("common.number", {
value: data.total,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})} {t("resources.used")}
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,15 @@
export default function Tooltip({ active, payload, formatter }) {
if (active && payload && payload.length) {
return (
<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>
))}
</div>
);
}
return null;
};

View file

@ -0,0 +1,113 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "utils/proxy/use-widget-api";
const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
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 [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
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
}));
useEffect(() => {
if (data) {
const diskData = data.find((item) => item.disk_name === diskName);
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, diskData];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
}, [data, diskName]);
useEffect(() => {
setRatePoints(calculateRates(dataPoints));
}, [dataPoints]);
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
-
</div>
</div>
</div>;
}
const diskData = data.find((item) => item.disk_name === diskName);
if (!diskData) {
return <div>
<div className="h-[68px] overflow-clip" />
</div>;
}
const diskRates = calculateRates(dataPoints);
const currentRate = diskRates[diskRates.length - 1];
return (
<>
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<ChartDual
dataPoints={ratePoints}
label={[t("glances.read"), t("glances.write")]}
max={diskData.critical}
formatter={(value) => t("common.bitrate", {
value,
})}
/>
</div>
<div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
{currentRate && !error && (
<>
<div className="text-xs opacity-80">
{t("common.bitrate", {
value: currentRate.a,
})} {t("glances.read")}
</div>
<div className="text-xs opacity-80">
{t("common.bitrate", {
value: currentRate.b,
})} {t("glances.write")}
</div>
</>
)}
</div>
<div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
{t("common.bitrate", {
value: currentRate.a + currentRate.b,
})}
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,96 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "utils/proxy/use-widget-api";
const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(service.widget, 'mem', {
refreshInterval: 1000,
});
useEffect(() => {
if (data) {
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
}, [data]);
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
-
</div>
</div>
</div>;
}
return (
<>
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<ChartDual
dataPoints={dataPoints}
max={data.total}
label={[t("resources.used"), t("resources.free")]}
formatter={(value) => t("common.bytes", {
value,
maximumFractionDigits: 0,
})}
/>
</div>
<div className="absolute bottom-3 left-3 z-10 opacity-50 pointer-events-none">
{data && !error && (
<>
{data.free && (
<div className="text-xs opacity-80">
{t("common.bytes", {
value: data.free,
maximumFractionDigits: 0,
})} {t("resources.free")}
</div>
)}
{data.total && (
<div className="text-xs font-bold">
{t("common.bytes", {
value: data.total,
maximumFractionDigits: 0,
})} {t("resources.total")}
</div>
)}
</>
)}
</div>
<div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
{t("common.bytes", {
value: data.used,
maximumFractionDigits: 0,
})} {t("resources.used")}
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,96 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "utils/proxy/use-widget-api";
const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const [, interfaceName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(widget, 'network', {
refreshInterval: 1000,
});
useEffect(() => {
if (data) {
const interfaceData = data.find((item) => item[item.key] === interfaceName);
if (interfaceData) {
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { a: interfaceData.tx, b: interfaceData.rx }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
}
}, [data, interfaceName]);
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
-
</div>
</div>
</div>;
}
const interfaceData = data.find((item) => item[item.key] === interfaceName);
if (!interfaceData) {
return <div>
<div className="h-[68px] overflow-clip" />
</div>;
}
return (
<>
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<ChartDual
dataPoints={dataPoints}
label={[t("docker.tx"), t("docker.rx")]}
formatter={(value) => t("common.byterate", {
value,
maximumFractionDigits: 0,
})}
/>
</div>
<div className="absolute bottom-3 left-3 z-10 text-xs opacity-80 pointer-events-none">
{interfaceData && interfaceData.interface_name && (
<div className="text-xs opacity-80">
{interfaceData.interface_name}
</div>
)}
{t("common.bitrate", {
value: interfaceData.tx,
maximumFractionDigits: 0,
})} {t("docker.tx")}
</div>
<div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
{t("common.bitrate", {
value: interfaceData.rx,
maximumFractionDigits: 0,
})} {t("docker.rx")}
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,72 @@
import { useTranslation } from "next-i18next";
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
};
export default function Component({ service }) {
const { t } = useTranslation();
const { data, error } = useWidgetAPI(service.widget, 'processlist', {
refreshInterval: 1000,
});
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
-
</div>
</div>
</div>;
}
data.splice(5);
return (
<>
<div className="absolute top-4 right-3 left-3 opacity-30 z-10 pointer-events-none">
<div className="flex items-center text-xs">
<div className="grow" />
<div className="w-14 text-right italic">{t("resources.cpu")}</div>
<div className="w-14 text-right">{t("resources.mem")}</div>
</div>
</div>
<div className="absolute bottom-4 right-3 left-3 z-10 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-60">
{statusMap[item.status]}
</div>
<div className="opacity-60 grow">{item.name}</div>
<div className="opacity-30 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
<div className="opacity-30 w-14 text-right">{t("common.bytes", {
value: item.memory_info[0],
maximumFractionDigits: 0,
})}</div>
</div>
</div>) }
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,99 @@
import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import useWidgetAPI from "utils/proxy/use-widget-api";
const Chart = dynamic(() => import("./chart"), { ssr: false });
const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const [, sensorName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(service.widget, 'sensors', {
refreshInterval: 1000,
});
useEffect(() => {
if (data) {
const sensorData = data.find((item) => item.label === sensorName);
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
}, [data, sensorName]);
if (error) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
{t("widget.api_error")}
</div>
</div>
</div>;
}
if (!data) {
return <div>
<div className="h-[68px] overflow-clip">
<div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
-
</div>
</div>
</div>;
}
const sensorData = data.find((item) => item.label === sensorName);
if (!sensorData) {
return <div>
<div className="h-[68px] overflow-clip" />
</div>;
}
return (
<>
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<Chart
dataPoints={dataPoints}
label={[sensorData.unit]}
max={sensorData.critical}
formatter={(value) => t("common.number", {
value,
})}
/>
</div>
<div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
{sensorData && !error && (
<>
{sensorData.warning && (
<div className="text-xs opacity-80">
{sensorData.warning}{sensorData.unit} {t("glances.warn")}
</div>
)}
{sensorData.critical && (
<div className="text-xs opacity-80">
{sensorData.critical} {sensorData.unit} {t("glances.crit")}
</div>
)}
</>
)}
</div>
<div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
{t("common.number", {
value: sensorData.value,
})} {sensorData.unit}
</div>
<div className="h-[68px] overflow-clip" />
</>
);
}

View file

@ -0,0 +1,8 @@
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
const widget = {
api: "{url}/api/3/{endpoint}",
proxyHandler: credentialedProxyHandler,
};
export default widget;

View file

@ -19,6 +19,7 @@ import flood from "./flood/widget";
import freshrss from "./freshrss/widget";
import gamedig from "./gamedig/widget";
import ghostfolio from "./ghostfolio/widget";
import glances from "./glances/widget";
import gluetun from "./gluetun/widget";
import gotify from "./gotify/widget";
import grafana from "./grafana/widget";
@ -111,6 +112,7 @@ const widgets = {
freshrss,
gamedig,
ghostfolio,
glances,
gluetun,
gotify,
grafana,