Dev #2
+1
-1
@@ -10,7 +10,7 @@ dotenv.config();
|
||||
const app = express();
|
||||
app.use(express.json());
|
||||
|
||||
const PORT = process.env.PORT || 4000;
|
||||
const PORT = 4000;
|
||||
|
||||
// HTTPS Agent für Self-Signed-Zertifikate
|
||||
const agent = new https.Agent({ rejectUnauthorized: false });
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -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>
|
||||
);
|
||||
@@ -8,7 +8,7 @@ export default defineConfig({
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://127.0.0.1:3300", // dein Backend
|
||||
target: "http://127.0.0.1:4000", // dein Backend
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user