Update

2025-09-25 09:18:19 +00:00
parent 55a9c3327f
commit d49605001e
5 changed files with 139 additions and 167 deletions
@@ -6,37 +6,40 @@ export default function Stacks() {
  const [stacks, setStacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
-  const [redeploying, setRedeploying] = useState({});

-  // WebSocket initialisieren
  useEffect(() => {
-    const socket = io("/");
-    console.log("Socket connected");
+    const socket = io("/", { transports: ["websocket"] });
+    console.log("🔌 Socket connected");

    socket.on("redeployStatus", async ({ stackId, status }) => {
-      setRedeploying(prev => ({ ...prev, [stackId]: status }));
+      console.log(`🔄 Stack ${stackId} Redeploy Status: ${status ? "running" : "finished"}`);

-      // Wenn Redeploy beendet, Stack-Status neu laden
      if (!status) {
+        // Status nach Redeploy neu vom Server holen
        try {
          const res = await axios.get("/api/stacks");
-          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
-          setStacks(sortedStacks);
+          setStacks(res.data.sort((a, b) => a.Name.localeCompare(b.Name)));
        } catch (err) {
-          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
+          console.error("Fehler beim Aktualisieren nach Redeploy:", err);
        }
+      } else {
+        // UI direkt auf redeploying setzen
+        setStacks(prev =>
+          prev.map(stack =>
+            stack.Id === stackId ? { ...stack, redeploying: true } : stack
+          )
+        );
      }
    });

    return () => socket.disconnect();
  }, []);

-  // Stacks initial laden
  const fetchStacks = async () => {
+    setLoading(true);
    try {
      const res = await axios.get("/api/stacks");
-      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
-      setStacks(sortedStacks);
+      setStacks(res.data.map(stack => ({ ...stack, redeploying: stack.redeploying || false })));
    } catch (err) {
      console.error("❌ Fehler beim Abrufen der Stacks:", err);
      setError("Fehler beim Laden der Stacks");
@@ -49,15 +52,19 @@ export default function Stacks() {
    fetchStacks();
  }, []);

-  // Redeploy eines Stacks
  const handleRedeploy = async (stackId) => {
-    setRedeploying(prev => ({ ...prev, [stackId]: true }));
+    setStacks(prev =>
+      prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: true } : stack)
+    );

    try {
      await axios.put(`/api/stacks/${stackId}/redeploy`);
+      // Socket.IO Event aktualisiert Status automatisch
    } catch (err) {
      console.error("❌ Fehler beim Redeploy:", err);
-      setRedeploying(prev => ({ ...prev, [stackId]: false }));
+      setStacks(prev =>
+        prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: false } : stack)
+      );
    }
  };

@@ -67,8 +74,7 @@ export default function Stacks() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
      {stacks.map(stack => {
-        const isRedeploying = redeploying[stack.Id] || false;
-        const isUpToDate = stack.updateStatus === "✅";
+        const isRedeploying = stack.redeploying;

        return (
          <div
@@ -77,29 +83,26 @@ export default function Stacks() {
              ${isRedeploying ? "bg-gray-700 cursor-not-allowed" : "bg-gray-800 hover:bg-gray-700"}`}
          >
            <div className="flex items-center space-x-4">
-              {/* Status Indicator */}
              <div className={`w-12 h-12 flex items-center justify-center rounded-full
                ${stack.updateStatus === "✅" ? "bg-green-500" :
                  stack.updateStatus === "⚠️" ? "bg-yellow-500" :
                  "bg-red-500"}`}
-              >
-              </div>
+              />
              <div>
                <p className="text-lg font-semibold text-white">{stack.Name}</p>
                <p className="text-sm text-gray-400">ID: {stack.Id}</p>
              </div>
            </div>

-            {!isUpToDate && (
-              <button
-                onClick={() => handleRedeploy(stack.Id)}
-                disabled={isRedeploying}
-                className={`px-5 py-2 rounded-lg font-medium transition
-                  ${isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"}`}
-              >
-                {isRedeploying ? "Redeploying" : "Redeploy"}
-              </button>
-            )}
+            <button
+              onClick={() => handleRedeploy(stack.Id)}
+              disabled={isRedeploying}
+              className={`px-5 py-2 rounded-lg font-medium transition
+                ${isRedeploying ? "bg-orange-500 cursor-not-allowed" :
+                  "bg-blue-500 hover:bg-blue-600"}`}
+            >
+              {isRedeploying ? "Redeploying" : "Redeploy"}
+            </button>
          </div>
        );
      })}
@@ -6,59 +6,36 @@ export default function Stacks() {
  const [stacks, setStacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
-  // Map: { [stackId]: boolean }
-  const [redeploying, setRedeploying] = useState({});

-  // -------------------------
-  // WebSocket: connect + events
-  // -------------------------
+  // Socket.IO initialisieren (Proxy leitet /socket.io an Backend)
  useEffect(() => {
-    // wenn Frontend und Backend auf verschiedenen Hosts/Ports laufen:
-    // const socket = io("http://localhost:4001");
-    const socket = io(); // gleiche Origin (Express static) -> passt normalerweise
-    socket.on("connect", () => console.log("Socket connected:", socket.id));
+    const socket = io("/", { transports: ["websocket"] });
+    console.log("🔌 Socket connected");

-    socket.on("redeployStatus", async ({ stackId, status }) => {
-      // sofort den lokalen map-state setzen (optimistisch)
-      setRedeploying(prev => ({ ...prev, [stackId]: status }));
-
-      // Wenn der Redeploy zu false geht, holen wir die aktuellen Stacks (aktualisieren UI)
-      if (!status) {
-        try {
-          const res = await axios.get("/api/stacks");
-          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
-          setStacks(sortedStacks);
-
-          // Map aus API-Daten aufbauen (wichtig für F5 / Konsistenz)
-          const map = {};
-          sortedStacks.forEach(s => { map[s.Id] = !!s.redeploying; });
-          setRedeploying(map);
-        } catch (err) {
-          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
-        }
-      }
+    socket.on("redeployStatus", ({ stackId, status }) => {
+      console.log(`🔄 Stack ${stackId} Redeploy Status: ${status ? "running" : "finished"}`);
+      setStacks(prevStacks =>
+        prevStacks.map(stack =>
+          stack.Id === stackId
+            ? { ...stack, redeploying: status, updateStatus: status ? stack.updateStatus : "✅" }
+            : stack
+        )
+      );
    });

-    return () => {
-      socket.off("redeployStatus");
-      socket.disconnect();
-    };
+    return () => socket.disconnect();
  }, []);

-  // -------------------------
-  // Initiale Stacks laden (auch setzt redeploying map)
-  // -------------------------
+  // Stacks initial laden
  const fetchStacks = async () => {
    setLoading(true);
    try {
      const res = await axios.get("/api/stacks");
-      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
-      setStacks(sortedStacks);
-
-      // Wichtig: redeploying-Map aus API-Daten setzen, damit F5 den echten Zustand zeigt
-      const map = {};
-      sortedStacks.forEach(s => { map[s.Id] = !!s.redeploying; });
-      setRedeploying(map);
+      setStacks(
+        res.data
+          .sort((a, b) => a.Name.localeCompare(b.Name))
+          .map(stack => ({ ...stack, redeploying: stack.redeploying || false }))
+      );
    } catch (err) {
      console.error("❌ Fehler beim Abrufen der Stacks:", err);
      setError("Fehler beim Laden der Stacks");
@@ -71,43 +48,40 @@ export default function Stacks() {
    fetchStacks();
  }, []);

-  // -------------------------
-  // Redeploy Trigger
-  // -------------------------
+  // Redeploy starten
  const handleRedeploy = async (stackId) => {
-    // sofort UI-Feedback
-    setRedeploying(prev => ({ ...prev, [stackId]: true }));
+    // Sofort UI auf redeploying setzen
+    setStacks(prev =>
+      prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: true } : stack)
+    );

    try {
      await axios.put(`/api/stacks/${stackId}/redeploy`);
-      // kein sofortiges setRedeploying(false) – Backend sendet das finale Event
+      // Backend sendet Socket-Event → UI aktualisiert automatisch
    } catch (err) {
      console.error("❌ Fehler beim Redeploy:", err);
-      // Fehlerfall: wieder auf false setzen damit UI nicht hängen bleibt
-      setRedeploying(prev => ({ ...prev, [stackId]: false }));
+      setStacks(prev =>
+        prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: false } : stack)
+      );
    }
  };

-  // -------------------------
-  // Render
-  // -------------------------
  if (loading) return <p className="text-gray-400">Lade Stacks...</p>;
  if (error) return <p className="text-red-400">{error}</p>;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
      {stacks.map(stack => {
-        const isRedeploying = Boolean(redeploying[stack.Id]);
+        const isRedeploying = stack.redeploying;

        return (
          <div
            key={stack.Id}
-            // wenn redeploying -> "gedämpfter" Container (sichtbar deaktiviert)
            className={`flex justify-between items-center p-5 rounded-xl shadow-lg transition
-              ${isRedeploying ? "bg-gray-700 opacity-60" : "bg-gray-800 hover:bg-gray-700"}`}
-            aria-disabled={isRedeploying}
+              ${isRedeploying ? "bg-gray-700 cursor-not-allowed" : "bg-gray-800 hover:bg-gray-700"}`}
          >
            <div className="flex items-center space-x-4">
+              {/* Status Indicator */}
              <div className={`w-12 h-12 flex items-center justify-center rounded-full
                ${stack.updateStatus === "✅" ? "bg-green-500" :
                  stack.updateStatus === "⚠️" ? "bg-yellow-500" :
@@ -119,23 +93,19 @@ export default function Stacks() {
              </div>
            </div>

-            {/* Button ist jetzt immer sichtbar */}
+            {/* Redeploy Button */}
            <button
              onClick={() => handleRedeploy(stack.Id)}
              disabled={isRedeploying}
              className={`px-5 py-2 rounded-lg font-medium transition
-                ${isRedeploying
-                  ? "bg-orange-500 cursor-not-allowed"
-                  : "bg-blue-500 hover:bg-blue-600"}`}
-              // Browser-Default Disabled-Opacity überschreiben
-              style={isRedeploying ? { opacity: 1 } : {}}
+                ${isRedeploying ? "bg-orange-500 cursor-not-allowed" :
+                  "bg-blue-500 hover:bg-blue-600"}`}
            >
-              {isRedeploying ? "Redeploying…" : "Redeploy"}
+              {isRedeploying ? "Redeploying" : "Redeploy"}
            </button>
          </div>
        );
      })}
-
      {stacks.length === 0 && <p className="text-gray-400">Keine Stacks gefunden.</p>}
    </div>
  );
@@ -1,17 +1,21 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';

 export default defineConfig({
  plugins: [react()],
  server: {
-    host: true,
-    port: 5173,
+    host: true, // Hört auf allen Netzwerk-Interfaces, kein localhost notwendig
+    port: 5173, // optional, Standardport für Vite
    proxy: {
-      "/api": {
-        target: "http://127.0.0.1:4001", // dein Backend
-        changeOrigin: true,
+      '/api': {
+        target: 'http://127.0.0.1:4001', // Backend lokal auf Port 4001
+        changeOrigin: true
      },
-    },
-    allowedHosts: "all",
-  },
+      '/socket.io': {
+        target: 'http://127.0.0.1:4001', // WebSocket-Verbindungen über Proxy weiterleiten
+        ws: true,
+        changeOrigin: true
+      }
+    }
+  }
 });