Update

2025-09-25 09:56:00 +00:00
parent 5cf9853c7d
commit 8d1d04c1ae
2 changed files with 0 additions and 266 deletions
@@ -1,112 +0,0 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-import { io } from "socket.io-client";
-
-export default function Stacks() {
-  const [stacks, setStacks] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-
-  // Socket.IO initialisieren (Proxy leitet /socket.io an Backend)
-  useEffect(() => {
-    const socket = io("/", { transports: ["websocket"] });
-    console.log("🔌 Socket connected");
-
-    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.disconnect();
-  }, []);
-
-  // Stacks initial laden
-  const fetchStacks = async () => {
-    setLoading(true);
-    try {
-      const res = await axios.get("/api/stacks");
-      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");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchStacks();
-  }, []);
-
-  // Redeploy starten
-  const handleRedeploy = async (stackId) => {
-    // 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`);
-      // Backend sendet Socket-Event → UI aktualisiert automatisch
-    } catch (err) {
-      console.error("❌ Fehler beim Redeploy:", err);
-      setStacks(prev =>
-        prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: false } : stack)
-      );
-    }
-  };
-
-  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 = stack.redeploying;
-
-        return (
-          <div
-            key={stack.Id}
-            className={`flex justify-between items-center p-5 rounded-xl shadow-lg transition
-              ${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>
-                <p className="text-lg font-semibold text-white">{stack.Name}</p>
-                <p className="text-sm text-gray-400">ID: {stack.Id}</p>
-              </div>
-            </div>
-
-            {/* 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>
-        );
-      })}
-      {stacks.length === 0 && <p className="text-gray-400">Keine Stacks gefunden.</p>}
-    </div>
-  );
-}