refactor information widgets

src/components/widgets/resources/cpu.jsx

@@ -0,0 +1,45 @@
+import useSWR from "swr";
+import { FiCpu } from "react-icons/fi";
+import { BiError } from "react-icons/bi";
+
+export default function Cpu() {
+  const { data, error } = useSWR(`/api/widgets/resources?type=cpu`, {
+    refreshInterval: 1500,
+  });
+
+  if (error || data?.error) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- Usage</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- Load</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-none flex flex-row items-center justify-center">
+      <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left font-mono">
+        <span className="text-theme-800 dark:text-theme-200 text-xs">{Math.round(data.cpu.usage)}% Usage</span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {(Math.round(data.cpu.load * 100) / 100).toFixed(1)} Load
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/widgets/resources/disk.jsx

@@ -0,0 +1,48 @@
+import useSWR from "swr";
+import { FiHardDrive } from "react-icons/fi";
+import { BiError } from "react-icons/bi";
+import { formatBytes } from "utils/stats-helpers";
+
+export default function Disk({ options }) {
+  const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
+    refreshInterval: 1500,
+  });
+
+  if (error || data?.error) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- Free</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- Used</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-none flex flex-row items-center justify-center">
+      <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left font-mono">
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {formatBytes(data.drive.freeGb * 1024 * 1024 * 1024)} Free
+        </span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {formatBytes(data.drive.usedGb * 1024 * 1024 * 1024)} Used
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/widgets/resources/memory.jsx

@@ -0,0 +1,48 @@
+import useSWR from "swr";
+import { FaMemory } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
+import { formatBytes } from "utils/stats-helpers";
+
+export default function Memory() {
+  const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
+    refreshInterval: 1500,
+  });
+
+  if (error || data?.error) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex-none flex flex-row items-center justify-center">
+        <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left font-mono">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Used</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Free</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-none flex flex-row items-center justify-center">
+      <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left font-mono">
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {formatBytes(data.memory.usedMemMb * 1024 * 1024)} Used
+        </span>
+        <span className="text-theme-800 dark:text-theme-200 text-xs">
+          {formatBytes(data.memory.freeMemMb * 1024 * 1024)} Free
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/widgets/resources/resources.jsx

@@ -1,102 +1,22 @@
-import useSWR from "swr";
+import Disk from "./disk";
-import { FiHardDrive, FiCpu } from "react-icons/fi";
+import Cpu from "./cpu";
-import { FaMemory } from "react-icons/fa";
+import Memory from "./memory";
-import { BiError } from "react-icons/bi";
 
 export default function Resources({ options }) {
-  const { data, error } = useSWR(`/api/widgets/resources?disk=${options.disk}`, {
-    refreshInterval: 1500,
-  });
-
-  if (error) {
-    return (
-      <div className="flex-none flex flex-row items-center justify-center mr-5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left font-mono">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Resources</span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <>
-        {options.disk && (
-          <div className="flex-none flex flex-row items-center justify-center mr-5">
-            <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left font-mono">
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- GB free</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- GB used</span>
-            </div>
-          </div>
-        )}
-
-        {options.cpu && (
-          <div className="flex-none flex flex-row items-center justify-center mr-5">
-            <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left font-mono">
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- Usage</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- Load</span>
-            </div>
-          </div>
-        )}
-
-        {options.memory && (
-          <div className="flex-none flex flex-row items-center justify-center mr-5">
-            <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left font-mono">
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Used</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">- GB Free</span>
-            </div>
-          </div>
-        )}
-      </>
-    );
-  }
-
-  if (data.error) {
-    return <div className="flex flex-col items-center justify-center"></div>;
-  }
-
   return (
     <>
-      {options.disk && (
+      <div className="pr-2 flex flex-col mr-2">
-        <div className="flex-none flex flex-row items-center justify-center mr-5">
+        <div className="flex flex-row space-x-4">
-          <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+          {options.disk && <Disk options={options} />}
-          <div className="flex flex-col ml-3 text-left font-mono">
+          {options.cpu && <Cpu />}
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{Math.round(data.drive.freeGb)} GB free</span>
+          {options.memory && <Memory />}
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{Math.round(data.drive.usedGb)} GB used</span>
-          </div>
         </div>
-      )}
+        {options.label && (
-
+          <div className="border-t-2 border-theme-800 dark:border-theme-200 mt-1 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">
-      {options.cpu && (
+            {options.label}
-        <div className="flex-none flex flex-row items-center justify-center mr-5">
-          <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-          <div className="flex flex-col ml-3 text-left font-mono">
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{Math.round(data.cpu.usage)}% Usage</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">
-              {Math.round(data.cpu.load * 100) / 100} Load
-            </span>
           </div>
-        </div>
+        )}
-      )}
+      </div>
-
-      {options.memory && (
-        <div className="flex-none flex flex-row items-center justify-center mr-5">
-          <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-          <div className="flex flex-col ml-3 text-left font-mono">
-            <span className="text-theme-800 dark:text-theme-200 text-xs">
-              {Math.round((data.memory.usedMemMb / 1024) * 100) / 100} GB Used
-            </span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">
-              {Math.round((data.memory.freeMemMb / 1024) * 100) / 100} GB Free
-            </span>
-          </div>
-        </div>
-      )}
     </>
   );
 }

src/components/widgets/weather/weather.jsx

@@ -10,7 +10,7 @@ export default function Weather({ options }) {
 
   if (error) {
     return (
-      <div className="order-last grow flex-none flex flex-row items-center justify-end">
+      <div className="flex flex-row items-center">
         <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
@@ -21,22 +21,25 @@ export default function Weather({ options }) {
   }
 
   if (!data) {
-    return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center"></div>;
   }
 
   if (data.error) {
-    return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center"></div>;
   }
 
   return (
-    <div className="order-last grow flex-none flex flex-row items-center justify-end">
+    <div className=" flex flex-col">
-      <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
+      <div className="flex flex-row items-center justify-end">
-      <div className="flex flex-col ml-3 text-left">
+        <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
-        <span className="text-theme-800 dark:text-theme-200 text-sm">
+        <div className="flex flex-col ml-3 text-left">
-          {options.units === "metric" ? data.current.temp_c : data.current.temp_f}&deg;
+          <span className="text-theme-800 dark:text-theme-200 text-sm">
-        </span>
+            {options.units === "metric" ? data.current.temp_c : data.current.temp_f}&deg;
-        <span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
+          </span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
+        </div>
       </div>
+      {options.label && <div className="text-right text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>}
     </div>
   );
 }

src/pages/api/docker/stats/[...service].js

@@ -14,7 +14,9 @@ export default async function handler(req, res) {
 
   try {
     const docker = new Docker(await getDockerArguments(containerServer));
-    const containers = await docker.listContainers();
+    const containers = await docker.listContainers({
+      all: true,
+    });
 
     // bad docker connections can result in a <Buffer ...> object?
     // in any case, this ensures the result is the expected array
@@ -30,7 +32,7 @@ export default async function handler(req, res) {
     const containerExists = containerNames.includes(containerName);
 
     if (!containerExists) {
-      return res.status(404).send({
+      return res.status(200).send({
         error: "not found",
       });
     }

src/pages/api/docker/status/[...service].js

@@ -13,7 +13,9 @@ export default async function handler(req, res) {
 
   try {
     const docker = new Docker(await getDockerArguments(containerServer));
-    const containers = await docker.listContainers();
+    const containers = await docker.listContainers({
+      all: true,
+    });
 
     // bad docker connections can result in a <Buffer ...> object?
     // in any case, this ensures the result is the expected array
@@ -29,7 +31,7 @@ export default async function handler(req, res) {
     const containerExists = containerNames.includes(containerName);
 
     if (!containerExists) {
-      return res.status(404).send({
+      return res.status(200).send({
         error: "not found",
       });
     }

src/pages/api/widgets/resources.js

@@ -1,14 +1,26 @@
 import { cpu, drive, mem, netstat } from "node-os-utils";
 
 export default async function handler(req, res) {
-  const { disk } = req.query;
+  const { type, target } = req.query;
 
-  res.send({
+  if (type == "cpu") {
-    cpu: {
+    return res.status(200).json({
-      usage: await cpu.usage(),
+      cpu: {
-      load: cpu.loadavgTime(5),
+        usage: await cpu.usage(1000),
-    },
+        load: cpu.loadavgTime(5),
-    drive: await drive.info(disk || "/"),
+      },
-    memory: await mem.info(),
+    });
-  });
+  } else if (type == "disk") {
+    return res.status(200).json({
+      drive: await drive.info(target || "/"),
+    });
+  } else if (type == "memory") {
+    return res.status(200).json({
+      memory: await mem.info(),
+    });
+  } else {
+    return res.status(400).json({
+      error: "invalid type",
+    });
+  }
 }

src/pages/index.js

@@ -32,9 +32,17 @@ export default function Home() {
           <div className="flex flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
             {widgets && (
               <>
-                {widgets.map((widget) => (
+                {widgets
-                  <Widget key={widget.type} widget={widget} />
+                  .filter((widget) => widget.type !== "weather")
-                ))}
+                  .map((widget, i) => (
+                    <Widget key={i} widget={widget} />
+                  ))}
+                <div className="grow"></div>
+                {widgets
+                  .filter((widget) => widget.type === "weather")
+                  .map((widget, i) => (
+                    <Widget key={i} widget={widget} />
+                  ))}
               </>
             )}
           </div>

src/utils/stats-helpers.js

@@ -19,5 +19,5 @@ export function formatBytes(bytes, decimals = 2) {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+  return parseFloat(bytes / Math.pow(k, i)).toFixed(dm) + " " + sizes[i];
 }