Feature: Proxmox status & stats integration (#5385)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/services/item.jsx

@@ -4,9 +4,11 @@ import { useContext, useState } from "react";
 import { SettingsContext } from "utils/contexts/settings";
 import Docker from "widgets/docker/component";
 import Kubernetes from "widgets/kubernetes/component";
+import ProxmoxVM from "widgets/proxmoxvm/component";
 
 import KubernetesStatus from "./kubernetes-status";
 import Ping from "./ping";
+import ProxmoxStatus from "./proxmox-status";
 import SiteMonitor from "./site-monitor";
 import Status from "./status";
 import Widget from "./widget";
@@ -121,6 +123,16 @@ export default function Item({ service, groupName, useEqualHeights }) {
                 <span className="sr-only">View container stats</span>
               </button>
             )}
+            {service.proxmoxNode && service.proxmoxVMID && (
+              <button
+                type="button"
+                onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
+                className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-proxmoxstatus"
+              >
+                <ProxmoxStatus service={service} style={statusStyle} />
+                <span className="sr-only">View Proxmox stats</span>
+              </button>
+            )}
           </div>
         </div>
 
@@ -152,6 +164,26 @@ export default function Item({ service, groupName, useEqualHeights }) {
             )}
           </div>
         )}
+        {service.proxmoxNode && service.proxmoxVMID && (
+          <div
+            className={classNames(
+              showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-0 opacity-0",
+              "w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
+            )}
+          >
+            {(showStats || statsOpen) && (
+              <ProxmoxVM
+                service={{
+                  widget: {
+                    node: service.proxmoxNode,
+                    vmid: service.proxmoxVMID,
+                    type: service.proxmoxType,
+                  },
+                }}
+              />
+            )}
+          </div>
+        )}
 
         {service.widgets.map((widget) => (
           <Widget widget={widget} service={service} key={widget.index} />

src/components/services/proxmox-status.jsx

@@ -0,0 +1,65 @@
+import { useTranslation } from "next-i18next";
+import useSWR from "swr";
+
+export default function ProxmoxStatus({ service, style }) {
+  const { t } = useTranslation();
+
+  const vmType = service.proxmoxType || "qemu";
+  const apiUrl = `/api/proxmox/stats/${service.proxmoxNode}/${service.proxmoxVMID}?type=${vmType}`;
+
+  const { data, error } = useSWR(apiUrl);
+
+  let statusLabel = t("docker.unknown");
+  let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
+  let colorClass = "text-black/20 dark:text-white/40 ";
+
+  if (error) {
+    statusLabel = t("docker.error");
+    colorClass = "text-rose-500/80";
+  } else if (data) {
+    if (data.status === "running") {
+      statusLabel = t("docker.running");
+      colorClass = "text-emerald-500/80";
+    }
+
+    if (data.status === "stopped") {
+      statusLabel = t("docker.exited");
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
+    }
+
+    if (data.status === "paused") {
+      statusLabel = "paused";
+      colorClass = "text-blue-500/80";
+    }
+
+    if (data.status === "offline") {
+      statusLabel = "offline";
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
+    }
+
+    if (data.status === "not found") {
+      statusLabel = t("docker.not_found");
+      colorClass = "text-orange-400/50 dark:text-orange-400/80";
+    }
+  }
+
+  if (style === "dot") {
+    colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, "");
+    backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
+  }
+
+  return (
+    <div
+      className={`w-auto text-center overflow-hidden ${backgroundClass} rounded-b-[3px] proxmoxstatus proxmoxstatus-${statusLabel
+        .toLowerCase()
+        .replace(" ", "-")}`}
+      title={statusLabel}
+    >
+      {style !== "dot" ? (
+        <div className={`text-[8px] font-bold ${colorClass} uppercase`}>{statusLabel}</div>
+      ) : (
+        <div className={`rounded-full h-3 w-3 ${colorClass}`} />
+      )}
+    </div>
+  );
+}