Second Assignment
This commit is contained in:
parent
cb6d85dd96
commit
67e1e1e331
137
Z2/app/index.html
Normal file
137
Z2/app/index.html
Normal file
@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>DevOps Dashboard</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
background: #0f172a;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 250px);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1e293b;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 15px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>🚀 DevOps Dashboard</h1>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h3>⏱ DB Time</h3>
|
||||
<p id="time">Loading...</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>🖥 Pod</h3>
|
||||
<p id="host">Loading...</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>📊 Requests</h3>
|
||||
<p id="count">0</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>🔌 Status</h3>
|
||||
<p id="status">Checking...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADD MESSAGE -->
|
||||
<div class="card">
|
||||
<h3>➕ Add Message</h3>
|
||||
<input id="msg" placeholder="Enter message">
|
||||
<br>
|
||||
<button onclick="addMessage()">Add</button>
|
||||
</div>
|
||||
|
||||
<!-- MESSAGE LIST -->
|
||||
<div class="card">
|
||||
<h3>📜 Stored Messages</h3>
|
||||
<ul id="list"></ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function loadStatus() {
|
||||
const res = await fetch("/api/status");
|
||||
const data = await res.json();
|
||||
|
||||
document.getElementById("time").innerText = data.time;
|
||||
document.getElementById("host").innerText = data.hostname;
|
||||
document.getElementById("count").innerText = data.requests;
|
||||
document.getElementById("status").innerText = data.status;
|
||||
}
|
||||
|
||||
async function addMessage() {
|
||||
const text = document.getElementById("msg").value;
|
||||
|
||||
await fetch("/api/add", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ text })
|
||||
});
|
||||
|
||||
loadMessages();
|
||||
}
|
||||
|
||||
async function loadMessages() {
|
||||
const res = await fetch("/api/messages");
|
||||
const data = await res.json();
|
||||
|
||||
const list = document.getElementById("list");
|
||||
list.innerHTML = "";
|
||||
|
||||
data.forEach(item => {
|
||||
const li = document.createElement("li");
|
||||
li.innerText = item.text;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
// auto refresh
|
||||
setInterval(loadStatus, 3000);
|
||||
setInterval(loadMessages, 3000);
|
||||
|
||||
loadStatus();
|
||||
loadMessages();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +1,17 @@
|
||||
const express = require("express");
|
||||
const { Pool } = require("pg");
|
||||
const os = require("os");
|
||||
const path = require("path");
|
||||
|
||||
const app = express();
|
||||
|
||||
// middleware
|
||||
app.use(express.json());
|
||||
app.use(express.static(path.join(__dirname)));
|
||||
|
||||
let counter = 0;
|
||||
|
||||
// DB connection
|
||||
const pool = new Pool({
|
||||
host: "postgres-service",
|
||||
user: "postgres",
|
||||
@ -11,15 +20,93 @@ const pool = new Pool({
|
||||
port: 5432,
|
||||
});
|
||||
|
||||
app.get("/", async (req, res) => {
|
||||
// 🔥 Wait for DB
|
||||
async function waitForDB() {
|
||||
let connected = false;
|
||||
while (!connected) {
|
||||
try {
|
||||
await pool.query("SELECT 1");
|
||||
connected = true;
|
||||
console.log("✅ Database connected");
|
||||
} catch (err) {
|
||||
console.log("⏳ Waiting for database...");
|
||||
await new Promise(res => setTimeout(res, 2000));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await pool.query(`
|
||||
CREATE TABLE IF NOT EXISTS messages (
|
||||
id SERIAL PRIMARY KEY,
|
||||
text VARCHAR(255)
|
||||
)
|
||||
`);
|
||||
console.log("✅ Table ready");
|
||||
} catch (err) {
|
||||
console.log("TABLE ERROR:", err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 🔹 Status API
|
||||
app.get("/api/status", async (req, res) => {
|
||||
counter++;
|
||||
|
||||
try {
|
||||
const result = await pool.query("SELECT NOW()");
|
||||
res.send("DB Time: " + result.rows[0].now);
|
||||
res.json({
|
||||
time: result.rows[0].now,
|
||||
hostname: os.hostname(),
|
||||
requests: counter,
|
||||
status: "Connected"
|
||||
});
|
||||
} catch (err) {
|
||||
res.send("Database not ready");
|
||||
res.json({
|
||||
time: "N/A",
|
||||
hostname: os.hostname(),
|
||||
requests: counter,
|
||||
status: "Database not ready"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(3000, () => {
|
||||
console.log("Server running on port 3000");
|
||||
});
|
||||
// 🔹 Insert data
|
||||
app.post("/api/add", async (req, res) => {
|
||||
const { text } = req.body;
|
||||
|
||||
try {
|
||||
await pool.query(
|
||||
"INSERT INTO messages (text) VALUES ($1)",
|
||||
[text]
|
||||
);
|
||||
res.send("Inserted");
|
||||
} catch (err) {
|
||||
console.log("INSERT ERROR:", err);
|
||||
res.status(500).send("Error inserting data");
|
||||
}
|
||||
});
|
||||
|
||||
// 🔹 Get data
|
||||
app.get("/api/messages", async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query(
|
||||
"SELECT * FROM messages ORDER BY id DESC"
|
||||
);
|
||||
res.json(result.rows);
|
||||
} catch (err) {
|
||||
console.log("FETCH ERROR:", err);
|
||||
res.status(500).send("Error fetching data");
|
||||
}
|
||||
});
|
||||
|
||||
async function startServer() {
|
||||
await waitForDB();
|
||||
await initDB();
|
||||
|
||||
app.listen(3000, () => {
|
||||
console.log("🚀 Server running on port 3000");
|
||||
});
|
||||
}
|
||||
|
||||
startServer();
|
||||
@ -8,6 +8,6 @@ spec:
|
||||
selector:
|
||||
app: web-app
|
||||
ports:
|
||||
- port: 80
|
||||
- port: 60
|
||||
targetPort: 3000
|
||||
nodePort: 30007
|
||||
Loading…
Reference in New Issue
Block a user