Merge dev into master

Dockerfile

@@ -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

@@ -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
+// In-Memory Redeploy-Status
-const redeployingStacks = {}; // { [stackId]: true/false }
+const redeployingStacks = {};
 
 // HTTP Server + Socket.IO
 const server = http.createServer(app);
-const io = new Server(server, {
+const io = new Server(server, { cors: { origin: "*" } });
-  cors: { origin: "*" } // ggf. auf Frontend-URL anpassen
-});
 
-// 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
+// --- API Endpoints ---
-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
 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`);
+          const statusRes = await axiosInstance.get(
-          let statusEmoji = '✅'; // up-to-date
+            `/api/stacks/${stack.Id}/images_status?refresh=true`
-          if (statusRes.data.Status === 'outdated') statusEmoji = '⚠️'; // outdated
+          );
-
+          let statusEmoji = statusRes.data.Status === 'outdated' ? '⚠️' : '✅';
-          return {
+          return { ...stack, updateStatus: statusEmoji, redeploying: redeployingStacks[stack.Id] || false };
-            ...stack,
+        } catch {
-            updateStatus: statusEmoji,
+          return { ...stack, updateStatus: '❌', redeploying: redeployingStacks[stack.Id] || false };
-            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,
-          };
         }
       })
     );
-
     stacksWithStatus.sort((a, b) => a.Name.localeCompare(b.Name));
     res.json(stacksWithStatus);
   } catch (err) {
-    console.error('Fehler beim Abrufen der Stacks:', err.message);
+    res.status(500).json({ error: err.message });
-    if (err.response) res.status(err.response.status).json(err.response.data);
-    else 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) {
+        } catch {}
-          console.error(`Fehler beim Pull von ${imageName}:`, pullErr.message);
-        }
       }
 
-      await axiosInstance.put(
+      await axiosInstance.put(`/api/stacks/${id}`,
-        `/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);
+    res.status(500).json({ error: err.message });
-    if (err.response) res.status(err.response.status).json(err.response.data);
-    else res.status(500).json({ error: err.message });
   }
 });
 

backend/public/index.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

frontend/src/main.jsx.bak

@@ -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

@@ -1,10 +0,0 @@
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

frontend/vite.config.js

@@ -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: [
+    allowedHosts: "all",
-      "10.10.10.23",    // dein Dev-Rechner
-      "stackpulse.d-razz.de",     // der Host, den du brauchst
-      "localhost",
-    ],
   },
 });
 

scripts/start-dev.sh

@@ -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 "Frontend (Vite Dev): http://localhost:5173"
-echo "Backend:  http://localhost:3300"
+echo "Backend API:      http://localhost:4001"
 echo "Beenden mit STRG+C"
 
+# Prozesse überwachen
 wait $BACK_PID $FRONT_PID

scripts/switch-branch.sh

@@ -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."