Merge pull request #1905 from benphelps/glances-fs

Add glances filesystem graph

src/widgets/glances/component.jsx

@@ -6,6 +6,7 @@ import Process from "./metrics/process";
 import Disk from "./metrics/disk";
 import GPU from "./metrics/gpu";
 import Info from "./metrics/info";
+import Fs from "./metrics/fs";
 
 export default function Component({ service }) {
   const { widget } = service;
@@ -22,6 +23,10 @@ export default function Component({ service }) {
     return <Process service={service} />;
   }
 
+  if (widget.metric === "cpu") {
+    return <Cpu service={service} />;
+  }
+
   if (widget.metric.match(/^network:/)) {
     return <Net service={service} />;
   }
@@ -38,7 +43,7 @@ export default function Component({ service }) {
     return <GPU service={service} />;
   }
 
-  if (widget.metric === "cpu") {
+  if (widget.metric.match(/^fs:/)) {
-    return <Cpu service={service} />;
+    return <Fs service={service} />;
   }
 }

src/widgets/glances/metrics/fs.jsx

@@ -0,0 +1,69 @@
+import dynamic from "next/dynamic";
+import { useTranslation } from "next-i18next";
+
+import Error from "../components/error";
+import Container from "../components/container";
+import Block from "../components/block";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const Chart = dynamic(() => import("../components/chart"), { ssr: false });
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const [, fsName] = widget.metric.split(':');
+
+  const { data, error } = useWidgetAPI(widget, 'fs', {
+    refreshInterval: 1000,
+  });
+
+  if (error) {
+    return <Container><Error error={error} /></Container>;
+  }
+
+  if (!data) {
+    return <Container><Block position="bottom-3 left-3">-</Block></Container>;
+  }
+
+  const fsData = data.find((item) => item[item.key] === fsName);
+
+  if (!fsData) {
+    return <Container><Block position="bottom-3 left-3">-</Block></Container>;
+  }
+
+  return (
+    <Container>
+      <div className="absolute top-0 left-0 right-0 bottom-0">
+        <div style={{
+          height: `${Math.max(20, (fsData.size/fsData.free))}%`,
+        }} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
+          <div style={{
+            top: `${100-Math.max(18, (fsData.size/fsData.free))}%`,
+          }} className="relative -my-5 ml-2.5 text-xs opacity-50">
+            {t("common.bbytes", {
+              value: fsData.used,
+              maximumFractionDigits: 0,
+            })} {t("resources.used")}
+          </div>
+          <div style={{
+            top: `${100-Math.max(22, (fsData.size/fsData.free))}%`,
+          }} className="relative my-7 ml-2.5 text-xs opacity-50">
+            {t("common.bbytes", {
+              value: fsData.free,
+              maximumFractionDigits: 0,
+            })} {t("resources.free")}
+          </div>
+      </div>
+
+      <Block position="top-3 right-3">
+        <div className="border rounded-md px-1.5 py-0.5 bg-theme-400/30 border-white/30 font-bold opacity-75">
+          {t("common.bbytes", {
+            value: fsData.size,
+            maximumFractionDigits: 1,
+          })}
+        </div>
+      </Block>
+    </Container>
+  );
+}

src/widgets/glances/metrics/info.jsx

@@ -96,7 +96,7 @@ export default function Component({ service }) {
           </div>
         )}
 
-        {quicklookData && quicklookData.swap && (
+        {quicklookData && quicklookData.swap !== 0 && (
           <div className="text-xs opacity-25 flex place-content-between">
             <div>{t("glances.swap")}</div>
             <div className="opacity-75">