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

Merge dev into master

Browse Source
This commit is contained in:
root
2025-09-24 12:22:32 +00:00
parent 3eb5e08d7c 2a12aae6be
commit 3d0914e763
15 changed files with 186 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+53
View File
@@ -0,0 +1,53 @@
# ===============================
# Stage 1: Frontend Build
# ===============================
FROM node:20-alpine AS frontend-build
# Arbeitsverzeichnis
WORKDIR /app/frontend
# Nur package.json & package-lock.json kopieren und Dependencies installieren
COPY frontend/package.json frontend/package-lock.json ./
RUN npm ci
# Restliche Frontend-Dateien kopieren
COPY frontend/ ./
# Frontend Build erzeugen (statische Dateien)
RUN npm run build
# ===============================
# Stage 2: Backend + Frontend
# ===============================
FROM node:20-alpine AS runtime
# Arbeitsverzeichnis
WORKDIR /app/backend
# Backend Dependencies installieren
COPY backend/package.json backend/package-lock.json ./
RUN npm ci --only=production
# Backend-Code kopieren
COPY backend/ ./
# public leeren
RUN rm -rf ./public/*
# Inhalt von dist inklusive Unterordner direkt nach public kopieren
COPY --from=frontend-build /app/frontend/dist/. ./public/
# Environment
ENV NODE_ENV=production
# Ports
# Backend intern: 4001
# Frontend exposed: 5173
EXPOSE 5173
# Node User
USER node
# Container startet das Backend (liefert statisches Frontend)
CMD ["node", "index.js"]
backend/index.js
+32 -53
View File
@@ -4,94 +4,82 @@ import https from 'https';
import axios from 'axios';
import http from 'http';
import { Server } from 'socket.io';
import path from 'path';
import { fileURLToPath } from 'url';
dotenv.config();
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
app.use(express.json());
const PORT = process.env.PORT || 4000;
// Statische Frontend-Dateien ausliefern
app.use(express.static(path.join(__dirname, 'public')));
// SPA-Fallback für React-Router
app.get('*', (req, res, next) => {
if (req.path.startsWith('/api')) return next();
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// Backend-Port fix
const PORT = 4001;
// HTTPS Agent für Self-Signed-Zertifikate
const agent = new https.Agent({ rejectUnauthorized: false });
// Axios-Instance für alle Portainer-Requests
// Axios-Instance für Portainer
const axiosInstance = axios.create({
httpsAgent: agent,
headers: { "X-API-Key": process.env.PORTAINER_API_KEY },
baseURL: process.env.PORTAINER_URL,
});
// In-Memory Store für Redeploy-Status
const redeployingStacks = {}; // { [stackId]: true/false }
// In-Memory Redeploy-Status
const redeployingStacks = {};
// HTTP Server + Socket.IO
const server = http.createServer(app);
const io = new Server(server, {
cors: { origin: "*" } // ggf. auf Frontend-URL anpassen
});
const io = new Server(server, { cors: { origin: "*" } });
// Socket.IO Verbindung
io.on("connection", (socket) => {
console.log("Client verbunden:", socket.id);
});
// Hilfsfunktion zum Broadcasten des Redeploy-Status
const broadcastRedeployStatus = (stackId, status) => {
redeployingStacks[stackId] = status;
io.emit("redeployStatus", { stackId, status });
console.log(`Stack ${stackId} redeploying: ${status}`);
};
// Root-Endpoint
app.get('/', (req, res) => {
console.log("Root Endpoint aufgerufen");
res.send('StackPulse Backend läuft. Nutze /api/stacks für die Daten.');
});
// Alle Stacks abrufen
// --- API Endpoints ---
app.get('/api/stacks', async (req, res) => {
try {
const stacksRes = await axiosInstance.get('/api/stacks');
const stacksWithStatus = await Promise.all(
stacksRes.data.map(async (stack) => {
try {
const statusRes = await axiosInstance.get(`/api/stacks/${stack.Id}/images_status?refresh=true`);
let statusEmoji = '✅'; // up-to-date
if (statusRes.data.Status === 'outdated') statusEmoji = '⚠️'; // outdated
return {
...stack,
updateStatus: statusEmoji,
redeploying: redeployingStacks[stack.Id] || false,
};
} catch (err) {
console.error(`Fehler beim Abrufen Remote Digest für Stack ${stack.Id}:`, err.message);
return {
...stack,
updateStatus: '❌', // Fehler
redeploying: redeployingStacks[stack.Id] || false,
};
const statusRes = await axiosInstance.get(
`/api/stacks/${stack.Id}/images_status?refresh=true`
);
let statusEmoji = statusRes.data.Status === 'outdated' ? '⚠️' : '✅';
return { ...stack, updateStatus: statusEmoji, redeploying: redeployingStacks[stack.Id] || false };
} catch {
return { ...stack, updateStatus: '❌', redeploying: redeployingStacks[stack.Id] || false };
}
})
);
stacksWithStatus.sort((a, b) => a.Name.localeCompare(b.Name));
res.json(stacksWithStatus);
} catch (err) {
console.error('Fehler beim Abrufen der Stacks:', err.message);
if (err.response) res.status(err.response.status).json(err.response.data);
else res.status(500).json({ error: err.message });
res.status(500).json({ error: err.message });
}
});
// Redeploy eines Stacks
app.put('/api/stacks/:id/redeploy', async (req, res) => {
const { id } = req.params;
try {
// Status auf "redeploying" setzen & an alle Clients senden
broadcastRedeployStatus(id, true);
const stackRes = await axiosInstance.get(`/api/stacks/${id}`);
@@ -102,7 +90,6 @@ app.put('/api/stacks/:id/redeploy', async (req, res) => {
} else if (stack.Type === 2) {
const fileRes = await axiosInstance.get(`/api/stacks/${id}/file`);
const stackFileContent = fileRes.data?.StackFileContent;
if (!stackFileContent) throw new Error("Stack file konnte nicht geladen werden");
const services = fileRes.data?.Config?.services || {};
@@ -113,28 +100,20 @@ app.put('/api/stacks/:id/redeploy', async (req, res) => {
await axiosInstance.post(
`/api/endpoints/${stack.EndpointId}/docker/images/create?fromImage=${encodeURIComponent(imageName)}`
);
} catch (pullErr) {
console.error(`Fehler beim Pull von ${imageName}:`, pullErr.message);
}
} catch {}
}
await axiosInstance.put(
`/api/stacks/${id}`,
await axiosInstance.put(`/api/stacks/${id}`,
{ StackFileContent: stackFileContent, Prune: false, PullImage: true },
{ params: { endpointId: stack.EndpointId } }
);
}
// Redeploy beendet, Status an alle Clients senden
broadcastRedeployStatus(id, false);
res.json({ success: true, message: 'Stack redeployed' });
} catch (err) {
// Fehler → Status zurücksetzen & an Clients senden
broadcastRedeployStatus(id, false);
console.error(`Fehler beim Redeploy von Stack ${id}:`, err.message);
if (err.response) res.status(err.response.status).json(err.response.data);
else res.status(500).json({ error: err.message });
res.status(500).json({ error: err.message });
}
});
backend/public/assets/index-0842cd3a.css
+1
View File
File diff suppressed because one or more lines are too long
backend/public/assets/index-a1f09468.js
+48
View File
File diff suppressed because one or more lines are too long
frontend/index.html.bak → backend/public/index.html
+4 -1
View File
@@ -4,9 +4,12 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StackPulse</title>
<script type="module" crossorigin src="/assets/index-a1f09468.js"></script>
<link rel="stylesheet" href="/assets/index-0842cd3a.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
docker-compose.dev.yml
+13
View File
@@ -0,0 +1,13 @@
version: '3.8'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "4001:4001" # Host 5173 → Container 5173
environment:
PORTAINER_URL: "https://10.10.10.21:9443/"
PORTAINER_API_KEY: "ptr_ce3Wufxf+EKpqxc5ebcQjBkUMUoJmMpY3wGIvkgdxV0="
ENDPOINT_ID: "1"
restart: unless-stopped
docker-compose.yml
+13
View File
@@ -0,0 +1,13 @@
version: '3.8'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "4000:4000"
environment:
PORT: 4000
PORTAINER_URL: "https://your-portainer.example.com"
PORTAINER_API_KEY: "your_api_key_here"
restart: unless-stopped
frontend/src/App.jsx.bak
-11
View File
@@ -1,11 +0,0 @@
import React from "react";
import Stacks from "./Stacks.jsx";
export default function App() {
return (
<div className="p-8 font-sans">
<h1 className="text-3xl font-bold mb-6">StackPulse</h1>
<Stacks />
</div>
);
}
frontend/src/Stacks.jsx.bak
-112
View File
@@ -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("");
const [redeploying, setRedeploying] = useState({}); // { stackId: true/false }
// WebSocket initialisieren
useEffect(() => {
const socket = io("/");
console.log("Socket connected");
socket.on("redeployStatus", async ({ stackId, status }) => {
setRedeploying(prev => ({ ...prev, [stackId]: status }));
// Wenn Redeploy beendet, Stack-Status neu laden
if (!status) {
try {
const res = await axios.get("/api/stacks");
const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
setStacks(sortedStacks);
} catch (err) {
console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
}
}
});
return () => socket.disconnect();
}, []);
// Stacks initial laden
const fetchStacks = async () => {
try {
const res = await axios.get("/api/stacks");
const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
setStacks(sortedStacks);
} catch (err) {
console.error("❌ Fehler beim Abrufen der Stacks:", err);
setError("Fehler beim Laden der Stacks");
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchStacks();
}, []);
// Redeploy eines Stacks
const handleRedeploy = async (stackId) => {
// Button sofort auf Redeploying setzen
setRedeploying(prev => ({ ...prev, [stackId]: true }));
try {
await axios.put(`/api/stacks/${stackId}/redeploy`);
} catch (err) {
console.error("❌ Fehler beim Redeploy:", err);
}
// Stack-Status immer neu laden
try {
const res = await axios.get("/api/stacks");
const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
setStacks(sortedStacks);
} catch (err) {
console.error("Fehler beim Aktualisieren nach Redeploy:", err);
} finally {
// Erst nach Datenaktualisierung Button zurücksetzen
setRedeploying(prev => ({ ...prev, [stackId]: false }));
}
};
if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
if (error) return <p className="text-red-500">{error}</p>;
return (
<ul className="space-y-4">
{stacks.map(stack => {
const isRedeploying = redeploying[stack.Id] || false;
return (
<li
key={stack.Id}
className={`p-4 rounded-xl shadow transition flex justify-between items-center ${
isRedeploying ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:shadow-md"
}`}
>
<div className="flex items-center space-x-4">
<div className="text-xl">{stack.updateStatus}</div>
<div>
<p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
<p className="text-sm text-gray-500">ID: {stack.Id}</p>
</div>
</div>
<button
onClick={() => handleRedeploy(stack.Id)}
disabled={isRedeploying}
className={`px-4 py-2 rounded text-white font-medium transition ${
isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"
}`}
>
{isRedeploying ? "Redeploying" : "Redeploy"}
</button>
</li>
);
})}
{stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
</ul>
);
}
frontend/src/index.css.bak
-3
View File
@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
frontend/src/main.jsx.bak
-10
View File
@@ -1,10 +0,0 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import './index.css'; // Tailwind CSS
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
frontend/tailwind.config.js.bak
-10
View File
@@ -1,10 +0,0 @@
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
frontend/vite.config.js
+2 -6
View File
@@ -8,15 +8,11 @@ export default defineConfig({
port: 5173,
proxy: {
"/api": {
target: "http://127.0.0.1:3300", // dein Backend
target: "http://localhost:4001", // dein Backend
changeOrigin: true,
},
},
allowedHosts: [
"10.10.10.23", // dein Dev-Rechner
"stackpulse.d-razz.de", // der Host, den du brauchst
"localhost",
],
allowedHosts: "all",
},
});
scripts/start-dev.sh
+10 -2
View File
@@ -3,22 +3,30 @@ set -e
echo "🚀 Starte StackPulse Dev-Umgebung..."
# --- Backend ---
cd backend
npm install
npm start &
BACK_PID=$!
cd ..
# --- Frontend ---
cd frontend
npm install
npm run dev &
FRONT_PID=$!
# Optional: Kopiere Build-Dateien für Backend /public (nur für statisches Testen)
npm run build
cp -r dist ../backend/public
cd ..
echo ""
echo "✅ StackPulse läuft lokal:"
echo "Frontend: http://localhost:5173"
echo "Backend: http://localhost:3300"
echo "Frontend (Vite Dev): http://localhost:5173"
echo "Backend API: http://localhost:4001"
echo "Beenden mit STRG+C"
# Prozesse überwachen
wait $BACK_PID $FRONT_PID
scripts/switch-branch.sh
+10 -1
View File
@@ -44,9 +44,18 @@ fi
SELECTED_BRANCH=${BRANCH_MAP[$choice]}
echo "Wechsle zu Branch: $SELECTED_BRANCH"
# Wechseln, ggf. Branch erstellen, wenn nur Remote existiert
# Remote-Stand holen
git fetch origin
# Branch wechseln (lokal erstellen, falls nur remote vorhanden)
if git show-ref --verify --quiet refs/heads/$SELECTED_BRANCH; then
git checkout $SELECTED_BRANCH
else
git checkout -b $SELECTED_BRANCH origin/$SELECTED_BRANCH
fi
# Arbeitsverzeichnis exakt auf Remote-Branch zurücksetzen
git reset --hard origin/$SELECTED_BRANCH
git clean -fd
echo "Branch '$SELECTED_BRANCH' ist nun aktiv. Arbeitsverzeichnis entspricht exakt dem Remote-Stand."