feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation

2025-12-18 02:18:08 -06:00
parent 7c9762562b
commit 4b4bff4b29
25 changed files with 843 additions and 80 deletions
--- a/src/ui/desktop/apps/docker/DockerManager.tsx
+++ b/src/ui/desktop/apps/docker/DockerManager.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import { useTranslation } from "react-i18next";
+
+interface HostConfig {
+  id: number;
+  name: string;
+  ip: string;
+  username: string;
+  folder?: string;
+  enableFileManager?: boolean;
+  tunnelConnections?: unknown[];
+  [key: string]: unknown;
+}
+
+interface DockerManagerProps {
+  hostConfig?: HostConfig;
+  title?: string;
+  isVisible?: boolean;
+  isTopbarOpen?: boolean;
+  embedded?: boolean;
+}
+
+export function DockerManager({
+  hostConfig,
+  title,
+  isVisible = true,
+  isTopbarOpen = true,
+  embedded = false,
+}: DockerManagerProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { state: sidebarState } = useSidebar();
+  const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
+
+  React.useEffect(() => {
+    if (hostConfig?.id !== currentHostConfig?.id) {
+      setCurrentHostConfig(hostConfig);
+    }
+  }, [hostConfig?.id]);
+
+  React.useEffect(() => {
+    const fetchLatestHostConfig = async () => {
+      if (hostConfig?.id) {
+        try {
+          const { getSSHHosts } = await import("@/ui/main-axios.ts");
+          const hosts = await getSSHHosts();
+          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
+          if (updatedHost) {
+            setCurrentHostConfig(updatedHost);
+          }
+        } catch {
+          // Silently handle error
+        }
+      }
+    };
+
+    fetchLatestHostConfig();
+
+    const handleHostsChanged = async () => {
+      if (hostConfig?.id) {
+        try {
+          const { getSSHHosts } = await import("@/ui/main-axios.ts");
+          const hosts = await getSSHHosts();
+          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
+          if (updatedHost) {
+            setCurrentHostConfig(updatedHost);
+          }
+        } catch {
+          // Silently handle error
+        }
+      }
+    };
+
+    window.addEventListener("ssh-hosts:changed", handleHostsChanged);
+    return () =>
+      window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
+  }, [hostConfig?.id]);
+
+  const topMarginPx = isTopbarOpen ? 74 : 16;
+  const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
+  const bottomMarginPx = 8;
+
+  const wrapperStyle: React.CSSProperties = embedded
+    ? { opacity: isVisible ? 1 : 0, height: "100%", width: "100%" }
+    : {
+        opacity: isVisible ? 1 : 0,
+        marginLeft: leftMarginPx,
+        marginRight: 17,
+        marginTop: topMarginPx,
+        marginBottom: bottomMarginPx,
+        height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+      };
+
+  const containerClass = embedded
+    ? "h-full w-full text-white overflow-hidden bg-transparent"
+    : "bg-dark-bg text-white rounded-lg border-2 border-dark-border overflow-hidden";
+
+  return (
+    <div style={wrapperStyle} className={containerClass}>
+      <div className="h-full w-full flex flex-col">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
+          <div className="flex items-center gap-4 min-w-0">
+            <div className="min-w-0">
+              <h1 className="font-bold text-lg truncate">
+                {currentHostConfig?.folder} / {title}
+              </h1>
+            </div>
+          </div>
+        </div>
+        <Separator className="p-0.25 w-full" />
+
+        <div className="flex-1 overflow-hidden min-h-0 p-1">
+          {/* Empty body as requested */}
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <p className="text-gray-400 text-lg">
+                Docker management UI will be here.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}