Ben Phelps
1 year ago
parent
5221ed06ed
commit
9aba70d214
@ -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;
|
||||
@ -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;
|
||||
@ -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} />;
|
||||
}
|
||||
}
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
};
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
|
||||
|
||||
const widget = {
|
||||
api: "{url}/api/3/{endpoint}",
|
||||
proxyHandler: credentialedProxyHandler,
|
||||
};
|
||||
|
||||
export default widget;
|
||||
Loading…
Reference in new issue