Kubernetes support

* Total CPU and Memory usage for the entire cluster
* Total CPU and Memory usage for kubernetes pods
* Service discovery via annotations on ingress
* No storage stats yet
* No network stats yet

.gitignore

@@ -41,3 +41,6 @@ next-env.d.ts
 
 # homepage
 /config
+
+# idea
+.idea/

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.2",
+    "@kubernetes/client-node": "^0.17.1",
     "classnames": "^2.3.2",
     "compare-versions": "^5.0.1",
     "dockerode": "^3.3.4",

src/components/services/item.jsx

@@ -3,8 +3,10 @@ import { useContext, useState } from "react";
 
 import Status from "./status";
 import Widget from "./widget";
+import KubernetesStatus from "./kubernetes-status";
 
 import Docker from "widgets/docker/component";
+import Kubernetes from "widgets/kubernetes/component";
 import { SettingsContext } from "utils/contexts/settings";
 import ResolvedIcon from "components/resolvedicon";
 
@@ -80,6 +82,16 @@ export default function Item({ service }) {
               <span className="sr-only">View container stats</span>
             </button>
           )}
+          {service.app && (
+            <button
+              type="button"
+              onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
+              className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
+            >
+              <KubernetesStatus service={service} />
+              <span className="sr-only">View container stats</span>
+            </button>
+          )}
         </div>
 
         {service.container && service.server && (
@@ -92,6 +104,16 @@ export default function Item({ service }) {
             {statsOpen && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
           </div>
         )}
+        {service.app && (
+          <div
+            className={classNames(
+              statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+              "w-full overflow-hidden transition-all duration-300 ease-in-out"
+            )}
+          >
+            {statsOpen && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app } }} />}
+          </div>
+        )}
 
         {service.widget && <Widget service={service} />}
       </div>

src/components/services/kubernetes-status.jsx

@@ -0,0 +1,19 @@
+import useSWR from "swr";
+
+export default function KubernetesStatus({ service }) {
+  const { data, error } = useSWR(`/api/kubernetes/status/${service.namespace}/${service.app}`);
+
+  if (error) {
+    return <div className="w-3 h-3 bg-rose-300 dark:bg-rose-500 rounded-full" />;
+  }
+
+  if (data && data.status === "running") {
+    return <div className="w-3 h-3 bg-emerald-300 dark:bg-emerald-500 rounded-full" />;
+  }
+
+  if (data && data.status === "not found") {
+    return <div className="h-2.5 w-2.5 bg-orange-400/50 dark:bg-yellow-200/40 -rotate-45" />;
+  }
+
+  return <div className="w-3 h-3 bg-black/20 dark:bg-white/40 rounded-full" />;
+}

src/components/widgets/resources/cpu.jsx

@@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Cpu({ expanded }) {
+export default function Cpu({ expanded, backend }) {
   const { t } = useTranslation();
 
-  const { data, error } = useSWR(`/api/widgets/resources?type=cpu`, {
+  const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=cpu`, {
     refreshInterval: 1500,
   });
 

src/components/widgets/resources/disk.jsx

@@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Disk({ options, expanded }) {
+export default function Disk({ options, expanded, backend }) {
   const { t } = useTranslation();
 
-  const { data, error } = useSWR(`/api/widgets/resources?type=disk&target=${options.disk}`, {
+  const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=disk&target=${options.disk}`, {
     refreshInterval: 1500,
   });
 

src/components/widgets/resources/memory.jsx

@@ -5,10 +5,10 @@ import { useTranslation } from "next-i18next";
 
 import UsageBar from "./usage-bar";
 
-export default function Memory({ expanded }) {
+export default function Memory({ expanded, backend }) {
   const { t } = useTranslation();
 
-  const { data, error } = useSWR(`/api/widgets/resources?type=memory`, {
+  const { data, error } = useSWR(`/api/widgets/${backend || 'resources'}?type=memory`, {
     refreshInterval: 1500,
   });
 

src/components/widgets/resources/resources.jsx

@@ -3,15 +3,15 @@ import Cpu from "./cpu";
 import Memory from "./memory";
 
 export default function Resources({ options }) {
-  const { expanded } = options;
+  const { expanded, backend } = options;
   return (
     <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
-        {options.cpu && <Cpu expanded={expanded} />}
-        {options.memory && <Memory expanded={expanded} />}
+        {options.cpu && <Cpu expanded={expanded} backend={backend} />}
+        {options.memory && <Memory expanded={expanded} backend={backend} />}
         {Array.isArray(options.disk)
-          ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} />)
-          : options.disk && <Disk options={options} expanded={expanded} />}
+          ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} backend={backend} />)
+          : options.disk && <Disk options={options} expanded={expanded} backend={backend} />}
       </div>
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>

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

@@ -0,0 +1,79 @@
+import { CoreV1Api, Metrics } from "@kubernetes/client-node";
+
+import getKubeConfig from "../../../../utils/config/kubernetes";
+import { parseCpu, parseMemory } from "../../../../utils/kubernetes/kubernetes-utils";
+
+export default async function handler(req, res) {
+  const APP_LABEL =  "app.kubernetes.io/name";
+  const { service } = req.query;
+
+  const [namespace, appName] = service;
+  if (!namespace && !appName) {
+    res.status(400).send({
+      error: "kubernetes query parameters are required",
+    });
+    return;
+  }
+  const labelSelector = `${APP_LABEL}=${appName}`;
+
+  try {
+    const kc = getKubeConfig();
+    const coreApi = kc.makeApiClient(CoreV1Api);
+    const metricsApi = new Metrics(kc);
+    const podsResponse = await coreApi.listNamespacedPod(namespace, null, null, null, null, labelSelector);
+    const pods = podsResponse.body.items;
+
+    if (pods.length === 0) {
+      res.status(200).send({
+        error: "not found",
+      });
+      return;
+    }
+
+    let cpuLimit = 0;
+    let memLimit = 0;
+    pods.forEach((pod) => {
+      pod.spec.containers.forEach((container) => {
+        if (container?.resources?.limits?.cpu) {
+          cpuLimit += parseCpu(container?.resources?.limits?.cpu);
+        }
+        if (container?.resources?.limits?.memory) {
+          memLimit += parseMemory(container?.resources?.limits?.memory);
+        }
+      });
+    });
+
+    const stats = await pods.map(async (pod) => {
+      let depMem = 0;
+      let depCpu = 0;
+      const podMetrics = await metricsApi.getPodMetrics(namespace, pod.metadata.name);
+      podMetrics.containers.forEach((container) => {
+        depMem += parseMemory(container.usage.memory);
+        depCpu += parseCpu(container.usage.cpu);
+      });
+      return {
+        mem: depMem,
+        cpu: depCpu
+      }
+    }).reduce(async (finalStats, podStatPromise) => {
+      const podStats = await podStatPromise;
+      return {
+        mem: finalStats.mem + podStats.mem,
+        cpu: finalStats.cpu + podStats.cpu
+      };
+    });
+    stats.cpuLimit = cpuLimit;
+    stats.memLimit = memLimit;
+    stats.cpuUsage = stats.cpu / cpuLimit;
+    stats.memUsage = stats.mem / memLimit;
+
+    res.status(200).json({
+      stats,
+    });
+  } catch (e) {
+    console.log("error", e);
+    res.status(500).send({
+      error: "unknown error",
+    });
+  }
+}

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

@@ -0,0 +1,42 @@
+import { CoreV1Api } from "@kubernetes/client-node";
+
+import getKubeConfig from "../../../../utils/config/kubernetes";
+
+export default async function handler(req, res) {
+  const APP_LABEL =  "app.kubernetes.io/name";
+  const { service } = req.query;
+
+  const [namespace, appName] = service;
+  if (!namespace && !appName) {
+    res.status(400).send({
+      error: "kubernetes query parameters are required",
+    });
+    return;
+  }
+  const labelSelector = `${APP_LABEL}=${appName}`;
+
+  try {
+    const kc = getKubeConfig();
+    const coreApi = kc.makeApiClient(CoreV1Api);
+    const podsResponse = await coreApi.listNamespacedPod(namespace, null, null, null, null, labelSelector);
+    const pods = podsResponse.body.items;
+
+    if (pods.length === 0) {
+      res.status(200).send({
+        error: "not found",
+      });
+      return;
+    }
+
+    // at least one pod must be in the "Running" phase, otherwise its "down"
+    const runningPod = pods.find(pod => pod.status.phase === "Running");
+    const status = runningPod ? "running" : "down";
+    res.status(200).json({
+      status
+    });
+  } catch {
+    res.status(500).send({
+      error: "unknown error",
+    });
+  }
+}

src/pages/api/widgets/kubernetes.js

@@ -0,0 +1,72 @@
+import { CoreV1Api, Metrics } from "@kubernetes/client-node";
+
+import getKubeConfig from "../../../utils/config/kubernetes";
+import { parseCpu, parseMemory } from "../../../utils/kubernetes/kubernetes-utils";
+
+export default async function handler(req, res) {
+  const { type } = req.query;
+
+  const kc = getKubeConfig();
+  const coreApi = kc.makeApiClient(CoreV1Api);
+  const metricsApi = new Metrics(kc);
+
+  const nodes = await coreApi.listNode();
+  const nodeCapacity = new Map();
+  let cpuTotal = 0;
+  let cpuUsage = 0;
+  let memTotal = 0;
+  let memUsage = 0;
+
+  nodes.body.items.forEach((node) => {
+    nodeCapacity.set(node.metadata.name, node.status.capacity);
+    cpuTotal += Number.parseInt(node.status.capacity.cpu, 10);
+    memTotal += parseMemory(node.status.capacity.memory);
+  });
+
+  const nodeMetrics = await metricsApi.getNodeMetrics();
+  const nodeUsage = new Map();
+  nodeMetrics.items.forEach((metrics) => {
+    nodeUsage.set(metrics.metadata.name, metrics.usage);
+    cpuUsage += parseCpu(metrics.usage.cpu);
+    memUsage += parseMemory(metrics.usage.memory);
+  });
+
+  if (type === "cpu") {
+    return res.status(200).json({
+      cpu: {
+        usage: (cpuUsage / cpuTotal) * 100,
+        load: cpuUsage
+      }
+    });
+  }
+  // Maybe Storage CSI can provide this information
+  // if (type === "disk") {
+  //   if (!existsSync(target)) {
+  //     return res.status(404).json({
+  //       error: "Target not found",
+  //     });
+  //   }
+  //
+  //   return res.status(200).json({
+  //     drive: await drive.info(target || "/"),
+  //   });
+  // }
+  //
+  if (type === "memory") {
+    const SCALE_MB = 1024 * 1024;
+    const usedMemMb = memUsage / SCALE_MB;
+    const totalMemMb = memTotal / SCALE_MB;
+    const freeMemMb = totalMemMb - usedMemMb;
+    return res.status(200).json({
+      memory: {
+        usedMemMb,
+        freeMemMb,
+        totalMemMb
+      }
+    });
+  }
+
+  return res.status(400).json({
+    error: "invalid type"
+  });
+}

src/skeleton/kubernetes.yaml

@@ -0,0 +1,2 @@
+---
+# sample kubernetes config