glances widget test 1

src/widgets/components.js

@@ -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")),

src/widgets/glances/chart.jsx

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

src/widgets/glances/chart_dual.jsx

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

src/widgets/glances/component.jsx

@@ -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} />;
+  }
+}

src/widgets/glances/cpu.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/custom_tooltip.jsx

@@ -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;
+};

src/widgets/glances/disk.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/memory.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/net.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/process.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/sensor.jsx

@@ -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" />
+    </>
+  );
+}

src/widgets/glances/widget.js

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

src/widgets/widgets.js

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