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

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>