Log and Database

2025-09-29 19:04:26 +00:00
parent ba0905e2b9
commit 241a509a15
15 changed files with 532 additions and 8 deletions
@@ -11,6 +11,7 @@
        "axios": "^1.7.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.26.2",
        "socket.io-client": "^4.8.1"
      },
      "devDependencies": {
@@ -758,6 +759,14 @@
        "node": ">=14"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.27",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2188,6 +2197,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10,6 +10,7 @@
    "axios": "^1.7.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2",
    "socket.io-client": "^4.8.1"
  },
  "devDependencies": {
@@ -1,15 +1,41 @@
 import React from "react";
+import { NavLink, Route, Routes } from "react-router-dom";
 import Stacks from "./Stacks.jsx";
+import Logs from "./Logs.jsx";
+
+const navLinkBase =
+  "px-4 py-2 rounded-md font-medium transition-colors duration-150";
+
+const getNavClass = ({ isActive }) =>
+  `${navLinkBase} ${isActive ? "bg-purple-600 text-white" : "text-gray-300 hover:bg-gray-700"}`;

 export default function App() {
  return (
    <div className="min-h-screen bg-gray-900 text-white">
-      <header className="p-6 bg-gray-800 shadow-md">
-        <h1 className="text-2xl font-bold text-white">StackPulse</h1>
-        <p className="text-gray-400 mt-1">Verwalte deine Docker Stacks</p>
+      <header className="bg-gray-800 shadow-md">
+        <div className="max-w-6xl mx-auto px-6 py-6">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-white">StackPulse</h1>
+              <p className="text-gray-400 mt-1">Verwalte deine Docker Stacks</p>
+            </div>
+            <nav className="flex gap-2">
+              <NavLink to="/" end className={getNavClass}>
+                Stacks
+              </NavLink>
+              <NavLink to="/logs" className={getNavClass}>
+                Logs
+              </NavLink>
+            </nav>
+          </div>
+        </div>
      </header>
-      <main className="p-6">
-        <Stacks />
+      <main className="max-w-6xl mx-auto px-6 py-6">
+        <Routes>
+          <Route path="/" element={<Stacks />} />
+          <Route path="/logs" element={<Logs />} />
+          <Route path="*" element={<Stacks />} />
+        </Routes>
      </main>
    </div>
  );
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const STATUS_COLORS = {
+  success: "text-green-400",
+  warning: "text-yellow-400",
+  error: "text-red-400"
+};
+
+const formatTimestamp = (value) => {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("de-DE", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};
+
+export default function Logs() {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const response = await axios.get("/api/logs", {
+        params: { limit: 200 }
+      });
+      setLogs(response.data);
+    } catch (err) {
+      console.error("❌ Fehler beim Laden der Logs:", err);
+      setError("Fehler beim Laden der Redeploy-Logs");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  if (loading) {
+    return <p className="text-gray-400">Lade Logs...</p>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-900/20 border border-red-500/40 text-red-300 p-4 rounded-lg">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Redeploy-Logs</h2>
+        <button
+          onClick={fetchLogs}
+          className="px-4 py-2 rounded-md font-medium transition bg-purple-500 hover:bg-purple-600"
+        >
+          Aktualisieren
+        </button>
+      </div>
+
+      <div className="overflow-x-auto bg-gray-800/60 rounded-xl border border-gray-700">
+        <table className="min-w-full divide-y divide-gray-700">
+          <thead className="bg-gray-800">
+            <tr className="text-left text-sm uppercase tracking-wide text-gray-400">
+              <th className="px-4 py-3">Zeitpunkt</th>
+              <th className="px-4 py-3">Stack</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Nachricht</th>
+              <th className="px-4 py-3">Endpoint</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-700 text-sm">
+            {logs.length === 0 && (
+              <tr>
+                <td colSpan="5" className="px-4 py-6 text-center text-gray-400">
+                  Keine Logs vorhanden.
+                </td>
+              </tr>
+            )}
+            {logs.map((log) => {
+              const statusClass = STATUS_COLORS[log.status] || "text-blue-300";
+              return (
+                <tr key={log.id} className="hover:bg-gray-700/40">
+                  <td className="px-4 py-3 whitespace-nowrap text-gray-300">
+                    {formatTimestamp(log.timestamp)}
+                  </td>
+                  <td className="px-4 py-3 text-gray-200">
+                    <div className="flex flex-col">
+                      <span className="font-medium">{log.stackName || "Unbekannt"}</span>
+                      <span className="text-xs text-gray-400">ID: {log.stackId}</span>
+                    </div>
+                  </td>
+                  <td className={`px-4 py-3 font-semibold ${statusClass}`}>
+                    {log.status}
+                  </td>
+                  <td className="px-4 py-3 text-gray-300">
+                    {log.message || "-"}
+                  </td>
+                  <td className="px-4 py-3 text-gray-400">
+                    {log.endpoint ?? "-"}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App.jsx";
 import './index.css'; // Tailwind CSS

 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
  </React.StrictMode>
 );