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