Fix

backend/index.js

@@ -56,6 +56,36 @@ const broadcastRedeployStatus = (stackId, status) => {
   console.log(`🔄 [RedeployStatus] Stack ${stackId} ist jetzt ${status ? "im Redeploy" : "fertig"}`);
 };
 
+const REDEPLOY_TYPES = {
+  SINGLE: 'Einzeln',
+  ALL: 'Alle',
+  SELECTION: 'Auswahl'
+};
+
+const isStackOutdated = async (stackId) => {
+  try {
+    const statusRes = await axiosInstance.get(`/api/stacks/${stackId}/images_status?refresh=true`);
+    return statusRes.data?.Status === 'outdated';
+  } catch (err) {
+    console.error(`⚠️ Konnte Update-Status für Stack ${stackId} nicht ermitteln:`, err.message);
+    return true;
+  }
+};
+
+const filterOutdatedStacks = async (stacks = []) => {
+  const results = await Promise.all(
+    stacks.map(async (stack) => ({
+      stack,
+      outdated: await isStackOutdated(stack.Id)
+    }))
+  );
+
+  return {
+    eligibleStacks: results.filter((entry) => entry.outdated).map((entry) => entry.stack),
+    skippedStacks: results.filter((entry) => !entry.outdated).map((entry) => entry.stack),
+  };
+};
+
 // --- API Endpoints ---
 
 // Stacks abrufen
@@ -226,7 +256,7 @@ app.put('/api/stacks/:id/redeploy', async (req, res) => {
       status: 'started',
       message: 'Redeploy gestartet',
       endpoint: stack.EndpointId,
-      redeployType: 'Einzeln'
+      redeployType: REDEPLOY_TYPES.SINGLE
     });
 
     if (stack.Type === 1) {
@@ -265,7 +295,7 @@ app.put('/api/stacks/:id/redeploy', async (req, res) => {
       status: 'success',
       message: 'Redeploy erfolgreich abgeschlossen',
       endpoint: stack.EndpointId,
-      redeployType: 'Einzeln'
+      redeployType: REDEPLOY_TYPES.SINGLE
     });
     console.log(`✅ PUT /api/stacks/${id}/redeploy: Redeploy erfolgreich abgeschlossen`);
     res.json({ success: true, message: 'Stack redeployed' });
@@ -278,7 +308,7 @@ app.put('/api/stacks/:id/redeploy', async (req, res) => {
       status: 'error',
       message: errorMessage,
       endpoint: stack?.EndpointId || ENDPOINT_ID,
-      redeployType: 'Einzeln'
+      redeployType: REDEPLOY_TYPES.SINGLE
     });
     console.error(`❌ Fehler beim Redeploy von Stack ${id}:`, errorMessage);
     res.status(500).json({ error: errorMessage });
@@ -296,7 +326,15 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
     console.log("📦 Redeploy ALL für folgende Stacks:");
     filteredStacks.forEach(s => console.log(`   - ${s.Name}`));
 
-    const stackSummaryList = filteredStacks.map((stack) => `${stack.Name} (${stack.Id})`);
+    const { eligibleStacks, skippedStacks } = await filterOutdatedStacks(filteredStacks);
+
+    if (skippedStacks.length) {
+      skippedStacks.forEach((stack) => {
+        console.log(`⏭️ Übersprungen (aktuell): ${stack.Name} (${stack.Id})`);
+      });
+    }
+
+    const stackSummaryList = eligibleStacks.map((stack) => `${stack.Name} (${stack.Id})`);
     const stackSummary = stackSummaryList.length ? stackSummaryList.join(', ') : 'keine Stacks';
     logRedeployEvent({
       stackId: '---',
@@ -304,10 +342,22 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
       status: 'started',
       message: `Redeploy ALL gestartet für: ${stackSummary}`,
       endpoint: ENDPOINT_ID,
-      redeployType: 'Alle'
+      redeployType: REDEPLOY_TYPES.ALL
     });
 
-    filteredStacks.forEach(async (stack) => {
+    if (!eligibleStacks.length) {
+      logRedeployEvent({
+        stackId: '---',
+        stackName: '---',
+        status: 'success',
+        message: 'Redeploy ALL übersprungen: keine veralteten Stacks',
+        endpoint: ENDPOINT_ID,
+        redeployType: REDEPLOY_TYPES.ALL
+      });
+      return res.json({ success: true, message: 'Keine veralteten Stacks für Redeploy ALL' });
+    }
+
+    for (const stack of eligibleStacks) {
       try {
         broadcastRedeployStatus(stack.Id, true);
         logRedeployEvent({
@@ -316,7 +366,7 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
           status: 'started',
           message: 'Redeploy ALL gestartet',
           endpoint: stack.EndpointId,
-          redeployType: 'Alle'
+          redeployType: REDEPLOY_TYPES.ALL
         });
 
         if (stack.Type === 1) {
@@ -341,7 +391,7 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
           status: 'success',
           message: 'Redeploy ALL abgeschlossen',
           endpoint: stack.EndpointId,
-          redeployType: 'Alle'
+          redeployType: REDEPLOY_TYPES.ALL
         });
         console.log(`✅ Redeploy abgeschlossen: ${stack.Name}`);
       } catch (err) {
@@ -353,11 +403,11 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
           status: 'error',
           message: errorMessage,
           endpoint: stack.EndpointId,
-          redeployType: 'Alle'
+          redeployType: REDEPLOY_TYPES.ALL
         });
         console.error(`❌ Fehler beim Redeploy von Stack ${stack.Name}:`, errorMessage);
       }
-    });
+    }
 
     res.json({ success: true, message: 'Redeploy ALL gestartet' });
   } catch (err) {
@@ -368,7 +418,7 @@ app.put('/api/stacks/redeploy-all', async (req, res) => {
       status: 'error',
       message: err.message,
       endpoint: ENDPOINT_ID,
-      redeployType: 'Alle'
+      redeployType: REDEPLOY_TYPES.ALL
     });
     res.status(500).json({ error: err.message });
   }
@@ -398,7 +448,15 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
       return res.status(400).json({ error: `Ungültige Stack-IDs: ${missingIds.join(', ')}` });
     }
 
-    const stackSummaryList = selectedStacks.map((stack) => `${stack.Name} (${stack.Id})`);
+    const { eligibleStacks, skippedStacks } = await filterOutdatedStacks(selectedStacks);
+
+    if (skippedStacks.length) {
+      skippedStacks.forEach((stack) => {
+        console.log(`⏭️ Übersprungen (aktuell): ${stack.Name} (${stack.Id})`);
+      });
+    }
+
+    const stackSummaryList = eligibleStacks.map((stack) => `${stack.Name} (${stack.Id})`);
     const stackSummary = stackSummaryList.length ? stackSummaryList.join(', ') : 'keine Stacks';
     logRedeployEvent({
       stackId: '---',
@@ -406,10 +464,22 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
       status: 'started',
       message: `Redeploy Auswahl gestartet für: ${stackSummary}`,
       endpoint: ENDPOINT_ID,
-      redeployType: 'Auswahl'
+      redeployType: REDEPLOY_TYPES.SELECTION
     });
 
-    selectedStacks.forEach(async (stack) => {
+    if (!eligibleStacks.length) {
+      logRedeployEvent({
+        stackId: '---',
+        stackName: '---',
+        status: 'success',
+        message: 'Redeploy Auswahl übersprungen: keine veralteten Stacks',
+        endpoint: ENDPOINT_ID,
+        redeployType: REDEPLOY_TYPES.SELECTION
+      });
+      return res.json({ success: true, message: 'Keine veralteten Stacks in der Auswahl' });
+    }
+
+    for (const stack of eligibleStacks) {
       try {
         broadcastRedeployStatus(stack.Id, true);
         logRedeployEvent({
@@ -418,7 +488,7 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
           status: 'started',
           message: 'Redeploy Auswahl gestartet',
           endpoint: stack.EndpointId,
-          redeployType: 'Auswahl'
+          redeployType: REDEPLOY_TYPES.SELECTION
         });
 
         if (stack.Type === 1) {
@@ -443,7 +513,7 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
           status: 'success',
           message: 'Redeploy Auswahl erfolgreich abgeschlossen',
           endpoint: stack.EndpointId,
-          redeployType: 'Auswahl'
+          redeployType: REDEPLOY_TYPES.SELECTION
         });
         console.log(`✅ Redeploy Auswahl abgeschlossen: ${stack.Name}`);
       } catch (err) {
@@ -455,11 +525,11 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
           status: 'error',
           message: errorMessage,
           endpoint: stack.EndpointId,
-          redeployType: 'Auswahl'
+          redeployType: REDEPLOY_TYPES.SELECTION
         });
         console.error(`❌ Fehler beim Redeploy Auswahl für Stack ${stack.Name}:`, errorMessage);
       }
-    });
+    }
 
     res.json({ success: true, message: 'Redeploy Auswahl gestartet' });
   } catch (err) {
@@ -471,7 +541,7 @@ app.put('/api/stacks/redeploy-selection', async (req, res) => {
       status: 'error',
       message: errorMessage,
       endpoint: ENDPOINT_ID,
-      redeployType: 'Auswahl'
+      redeployType: REDEPLOY_TYPES.SELECTION
     });
     res.status(500).json({ error: errorMessage });
   }

frontend/src/Logs.jsx

@@ -250,7 +250,7 @@ export default function Logs() {
     if (!filtersReady) return;
 
     let cancelled = false;
-    axios.get("/api/logs", { params: { ...buildFilterParams(), perPage: 'all', page: 1 } })
+    axios.get("/api/logs", { params: { perPage: 'all', page: 1 } })
       .then((response) => {
         if (cancelled) return;
         updateFilterOptions(response.data);
@@ -263,7 +263,7 @@ export default function Logs() {
     return () => {
       cancelled = true;
     };
-  }, [filtersReady, buildFilterParams, updateFilterOptions, refreshSignal]);
+  }, [filtersReady, updateFilterOptions, refreshSignal]);
 
   const currentFilters = useMemo(() => ({
     stacks: selectedStacks,
@@ -300,7 +300,6 @@ export default function Logs() {
 
         setLogs(items);
         setTotalLogs(total);
-        updateFilterOptions(response.data);
 
         if (perPage === 'all') {
           if (page !== 1) setPage(1);
@@ -357,6 +356,27 @@ export default function Logs() {
     setPage(1);
   };
 
+  const handleOptionMouseDown = (event, currentValues, setter) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { value } = event.target;
+    if (value === ALL_OPTION_VALUE) {
+      if (currentValues.length) {
+        setter([]);
+        setPage(1);
+      }
+      return;
+    }
+
+    const nextValues = currentValues.includes(value)
+      ? currentValues.filter((entry) => entry !== value)
+      : [...currentValues, value];
+
+    setter(nextValues);
+    setPage(1);
+  };
+
   const handleResetFilters = () => {
     setSelectedStacks([]);
     setSelectedStatuses([]);
@@ -613,6 +633,7 @@ export default function Logs() {
                     <option
                       key={value}
                       value={value}
+                      onMouseDown={(event) => handleOptionMouseDown(event, selectedStacks, setSelectedStacks)}
                       className={`bg-gray-900 text-gray-200 ${value === ALL_OPTION_VALUE ? 'font-semibold text-gray-100' : ''}`}
                     >
                       {label}
@@ -651,6 +672,7 @@ export default function Logs() {
                     <option
                       key={value}
                       value={value}
+                      onMouseDown={(event) => handleOptionMouseDown(event, selectedStatuses, setSelectedStatuses)}
                       className={`bg-gray-900 text-gray-200 ${value === ALL_OPTION_VALUE ? 'font-semibold text-gray-100' : ''}`}
                     >
                       {label}
@@ -689,6 +711,7 @@ export default function Logs() {
                     <option
                       key={value}
                       value={value}
+                      onMouseDown={(event) => handleOptionMouseDown(event, selectedEndpoints, setSelectedEndpoints)}
                       className={`bg-gray-900 text-gray-200 ${value === ALL_OPTION_VALUE ? 'font-semibold text-gray-100' : ''}`}
                     >
                       {label}
@@ -727,6 +750,7 @@ export default function Logs() {
                     <option
                       key={value}
                       value={value}
+                      onMouseDown={(event) => handleOptionMouseDown(event, selectedRedeployTypes, setSelectedRedeployTypes)}
                       className={`bg-gray-900 text-gray-200 ${value === ALL_OPTION_VALUE ? 'font-semibold text-gray-100' : ''}`}
                     >
                       {label}

frontend/src/Stacks.jsx

@@ -22,7 +22,8 @@ export default function Stacks() {
         // Status nach Redeploy neu vom Server holen
         try {
           const res = await axios.get("/api/stacks");
-          setStacks(res.data.sort((a, b) => a.Name.localeCompare(b.Name)));
+          const sortedStacks = [...res.data].sort((a, b) => a.Name.localeCompare(b.Name));
+          setStacks(sortedStacks.map(stack => ({ ...stack, redeploying: stack.redeploying || false })));
         } catch (err) {
           console.error("Fehler beim Aktualisieren nach Redeploy:", err);
         }
@@ -59,7 +60,10 @@ export default function Stacks() {
 
   useEffect(() => {
     setSelectedStackIds(prev => {
-      const filtered = prev.filter(id => stacks.some(stack => stack.Id === id));
+      const filtered = prev.filter(id => {
+        const match = stacks.find(stack => stack.Id === id);
+        return match && match.updateStatus !== '✅';
+      });
       return filtered.length === prev.length ? prev : filtered;
     });
   }, [stacks]);
@@ -74,55 +78,88 @@ export default function Stacks() {
   };
 
   const handleRedeploy = async (stackId) => {
-    setSelectedStackIds(prev => prev.filter(id => id !== stackId));
+    setSelectedStackIds((prev) => prev.filter((id) => id !== stackId));
-    setStacks(prev =>
+    setStacks((prev) =>
-      prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: true } : stack)
+      prev.map((stack) =>
+        stack.Id === stackId ? { ...stack, redeploying: true } : stack
+      )
     );
 
     try {
       await axios.put(`/api/stacks/${stackId}/redeploy`);
-      // Socket.IO Event aktualisiert Status automatisch
+      // Statusupdates kommen über Socket.IO
     } catch (err) {
       console.error("❌ Fehler beim Redeploy:", err);
-      setStacks(prev =>
+      setStacks((prev) =>
-        prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: false } : stack)
+        prev.map((stack) =>
+          stack.Id === stackId ? { ...stack, redeploying: false } : stack
+        )
       );
     }
   };
 
   const handleRedeployAll = async () => {
-    setStacks(prev => prev.map(stack => ({ ...stack, redeploying: true })));
+    const outdatedStacks = stacks.filter((stack) => stack.updateStatus !== '✅');
+    if (!outdatedStacks.length) return;
 
-    try {
+    const outdatedIds = new Set(outdatedStacks.map((stack) => stack.Id));
-      await axios.put("/api/stacks/redeploy-all");
-      setSelectedStackIds([]);
-      // Statusupdates kommen über Socket.IO
-    } catch (err) {
-      console.error("❌ Fehler beim Redeploy ALL:", err);
-      setStacks(prev => prev.map(stack => ({ ...stack, redeploying: false })));
-    }
-  };
-
-  const handleRedeploySelection = async () => {
-    if (!selectedStackIds.length) return;
 
     setStacks(prev =>
       prev.map(stack =>
-        selectedStackIds.includes(stack.Id)
+        outdatedIds.has(stack.Id)
           ? { ...stack, redeploying: true }
           : stack
       )
     );
 
     try {
-      await axios.put("/api/stacks/redeploy-selection", { stackIds: selectedStackIds });
+      await axios.put("/api/stacks/redeploy-all");
+      setSelectedStackIds((prev) => prev.filter((id) => !outdatedIds.has(id)));
+      // Statusupdates kommen über Socket.IO
+    } catch (err) {
+      console.error("❌ Fehler beim Redeploy ALL:", err);
+      setStacks(prev =>
+        prev.map(stack =>
+          outdatedIds.has(stack.Id)
+            ? { ...stack, redeploying: false }
+            : stack
+        )
+      );
+    }
+  };
+
+  const handleRedeploySelection = async () => {
+    if (!selectedStackIds.length) return;
+
+    const eligibleIds = selectedStackIds.filter((id) => {
+      const stack = stacks.find((entry) => entry.Id === id);
+      return stack && stack.updateStatus !== '✅';
+    });
+
+    if (!eligibleIds.length) {
       setSelectedStackIds([]);
+      return;
+    }
+
+    const eligibleSet = new Set(eligibleIds);
+
+    setStacks(prev =>
+      prev.map(stack =>
+        eligibleSet.has(stack.Id)
+          ? { ...stack, redeploying: true }
+          : stack
+      )
+    );
+
+    try {
+      await axios.put("/api/stacks/redeploy-selection", { stackIds: eligibleIds });
+      setSelectedStackIds((prev) => prev.filter((id) => !eligibleSet.has(id)));
       // Statusupdates kommen über Socket.IO
     } catch (err) {
       console.error("❌ Fehler beim Redeploy Auswahl:", err);
       setStacks(prev =>
         prev.map(stack =>
-          selectedStackIds.includes(stack.Id)
+          eligibleSet.has(stack.Id)
             ? { ...stack, redeploying: false }
             : stack
         )
@@ -131,16 +168,17 @@ export default function Stacks() {
   };
 
   const hasSelection = selectedStackIds.length > 0;
+  const hasOutdatedStacks = stacks.some((stack) => stack.updateStatus !== '✅');
   const bulkButtonLabel = hasSelection
     ? `Redeploy Auswahl (${selectedStackIds.length})`
     : 'Redeploy All';
 
   const bulkActionDisabled = hasSelection
-    ? selectedStackIds.every(id => {
+    ? selectedStackIds.length === 0 || selectedStackIds.every(id => {
         const targetStack = stacks.find(stack => stack.Id === id);
-        return targetStack?.redeploying;
+        return !targetStack || targetStack.redeploying || targetStack.updateStatus === '✅';
       })
-    : stacks.every(stack => stack.redeploying);
+    : !hasOutdatedStacks || stacks.every(stack => stack.updateStatus !== '✅' || stack.redeploying);
 
   const handleBulkRedeploy = () => {
     if (hasSelection) {
@@ -169,26 +207,29 @@ export default function Stacks() {
         {stacks.map(stack => {
           const isRedeploying = stack.redeploying;
           const isSelected = selectedStackIds.includes(stack.Id);
+          const isCurrent = stack.updateStatus === '✅';
+          const isSelectable = !isRedeploying && !isCurrent;
 
           return (
             <div
               key={stack.Id}
               className={`flex justify-between items-center p-5 rounded-xl shadow-lg transition border
                 ${isSelected ? 'border-purple-500 ring-1 ring-purple-500/40' : 'border-transparent'}
-                ${isRedeploying ? "bg-gray-700 cursor-not-allowed" : "bg-gray-800 hover:bg-gray-700"}`}
+                ${isRedeploying ? 'bg-gray-700 cursor-wait' : 'bg-gray-800 hover:bg-gray-700'}
+                ${!isSelectable && !isRedeploying ? 'opacity-75' : ''}`}
             >
               <div className="flex items-center space-x-4">
                 <input
                   type="checkbox"
                   checked={isSelected}
-                  onChange={() => toggleStackSelection(stack.Id, isRedeploying)}
+                  onChange={() => toggleStackSelection(stack.Id, !isSelectable)}
-                  className="h-5 w-5 text-purple-500 focus:ring-purple-400 border-gray-600 bg-gray-900 rounded"
+                  className={`h-5 w-5 text-purple-500 focus:ring-purple-400 border-gray-600 bg-gray-900 rounded ${!isSelectable ? 'opacity-40 cursor-not-allowed' : ''}`}
-                  disabled={isRedeploying}
+                  disabled={!isSelectable}
                 />
                 <div className={`w-12 h-12 flex items-center justify-center rounded-full
-                  ${stack.updateStatus === "✅" ? "bg-green-500" :
+                  ${stack.updateStatus === '✅' ? 'bg-green-500' :
-                    stack.updateStatus === "⚠️" ? "bg-yellow-500" :
+                    stack.updateStatus === '⚠️' ? 'bg-yellow-500' :
-                    "bg-red-500"}`}
+                    'bg-red-500'}`}
                 />
                 <div>
                   <p className="text-lg font-semibold text-white">{stack.Name}</p>
@@ -196,15 +237,29 @@ export default function Stacks() {
                 </div>
               </div>
 
+              <div className="flex flex-col items-end gap-1 text-sm">
+                {isRedeploying ? (
+                  <>
+                    <span className="text-xs uppercase tracking-wide text-orange-300">Redeploy</span>
+                    <span className="text-orange-200">läuft…</span>
+                  </>
+                ) : isCurrent ? (
+                  <>
+                    <span className="text-xs uppercase tracking-wide text-gray-400">Status</span>
+                    <span className="text-green-300">Aktuell</span>
+                  </>
+                ) : (
+                  <>
                     <button
                       onClick={() => handleRedeploy(stack.Id)}
                       disabled={isRedeploying}
-                className={`px-5 py-2 rounded-lg font-medium transition
+                      className="px-5 py-2 rounded-lg font-medium transition bg-blue-500 hover:bg-blue-600"
-                  ${isRedeploying ? "bg-orange-500 cursor-not-allowed" :
-                    "bg-blue-500 hover:bg-blue-600"}`}
                     >
-                {isRedeploying ? "Redeploying" : "Redeploy"}
+                      Redeploy
                     </button>
+                  </>
+                )}
+              </div>
             </div>
           );
         })}