michael/stackpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Fix

Browse Source
This commit is contained in:
root
2025-10-01 08:53:09 +00:00
parent 5483ee9092
commit 8fa5ffc49c
3 changed files with 214 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/index.js
+89 -19
View File
@@ -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
+27 -3
View File
@@ -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
+98 -43
View File
@@ -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));
setStacks(prev =>
prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: true } : stack)
setSelectedStackIds((prev) => prev.filter((id) => id !== stackId));
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
// Statusupdates kommen über Socket.IO
} catch (err) {
console.error("❌ Fehler beim Redeploy:", err);
setStacks(prev =>
prev.map(stack => stack.Id === stackId ? { ...stack, redeploying: false } : stack)
setStacks((prev) =>
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 {
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;
const outdatedIds = new Set(outdatedStacks.map((stack) => stack.Id));
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)}
className="h-5 w-5 text-purple-500 focus:ring-purple-400 border-gray-600 bg-gray-900 rounded"
disabled={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 ${!isSelectable ? 'opacity-40 cursor-not-allowed' : ''}`}
disabled={!isSelectable}
/>
<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"}`}
${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>
@@ -196,15 +237,29 @@ export default function Stacks() {
</div>
</div>
<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 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 bg-blue-500 hover:bg-blue-600"
>
Redeploy
</button>
</>
)}
</div>
</div>
);
})}