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 express = require("express");
|
||||||
const { Pool } = require("pg");
|
const { Pool } = require("pg");
|
||||||
|
const os = require("os");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
|
// middleware
|
||||||
|
app.use(express.json());
|
||||||
|
app.use(express.static(path.join(__dirname)));
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
|
// DB connection
|
||||||
const pool = new Pool({
|
const pool = new Pool({
|
||||||
host: "postgres-service",
|
host: "postgres-service",
|
||||||
user: "postgres",
|
user: "postgres",
|
||||||
@ -11,15 +20,93 @@ const pool = new Pool({
|
|||||||
port: 5432,
|
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 {
|
try {
|
||||||
const result = await pool.query("SELECT NOW()");
|
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) {
|
} catch (err) {
|
||||||
res.send("Database not ready");
|
res.json({
|
||||||
|
time: "N/A",
|
||||||
|
hostname: os.hostname(),
|
||||||
|
requests: counter,
|
||||||
|
status: "Database not ready"
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.listen(3000, () => {
|
// 🔹 Insert data
|
||||||
console.log("Server running on port 3000");
|
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:
|
selector:
|
||||||
app: web-app
|
app: web-app
|
||||||
ports:
|
ports:
|
||||||
- port: 80
|
- port: 60
|
||||||
targetPort: 3000
|
targetPort: 3000
|
||||||
nodePort: 30007
|
nodePort: 30007
|
||||||
Loading…
Reference in New Issue
Block a user