node.js dashboard works
This commit is contained in:
18
files/ws_node/Dockerfile
Normal file
18
files/ws_node/Dockerfile
Normal file
@ -0,0 +1,18 @@
|
||||
# Use an official Node runtime
|
||||
FROM node:20-alpine
|
||||
|
||||
# Create app directory
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Install dependencies
|
||||
COPY package.json .
|
||||
RUN npm install --only=production
|
||||
|
||||
# Copy app source
|
||||
COPY . .
|
||||
|
||||
# Expose the port that the app listens on
|
||||
EXPOSE 3000
|
||||
|
||||
# Start the server
|
||||
CMD ["node", "server.js"]
|
||||
13
files/ws_node/package.json
Normal file
13
files/ws_node/package.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "redis-table-demo",
|
||||
"version": "1.0.0",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"socket.io": "^4.7.2",
|
||||
"redis": "^4.6.7"
|
||||
}
|
||||
}
|
||||
90
files/ws_node/public/index.html
Normal file
90
files/ws_node/public/index.html
Normal file
@ -0,0 +1,90 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Attached Disks - Live Table</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Attached Disks</h2>
|
||||
<div id="disk_table" class="column">Connecting…</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2>System Stats</h2>
|
||||
<div id="host_stats" class="column">Connecting…</div>
|
||||
</div>
|
||||
|
||||
<!-- Socket.IO client library -->
|
||||
<script src="socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
|
||||
const socket = io();
|
||||
|
||||
// listen for redis updates, render and error handle
|
||||
socket.on('attached_disks', renderDiskTable);
|
||||
socket.on('host_stats', renderStatsTable);
|
||||
|
||||
socket.on('connect_error', err => {
|
||||
safeSetText('disk_table', `Could not connect to server - ${err.message}`);
|
||||
safeSetText('host_stats', `Could not connect to server - ${err.message}`);
|
||||
});
|
||||
|
||||
socket.on('reconnect', attempt => {
|
||||
safeSetText('disk_table', `Re-connected (attempt ${attempt})`);
|
||||
safeSetText('host_stats', `Re-connected (attempt ${attempt})`);
|
||||
});
|
||||
|
||||
|
||||
function safeSetText(id, txt) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = txt;
|
||||
}
|
||||
|
||||
// table rendering functions
|
||||
function renderDiskTable(data) { renderGenericTable('disk_table', data, 'No Disks found'); }
|
||||
function renderStatsTable(data) { renderGenericTable('host_stats', data, 'No Stats available'); }
|
||||
|
||||
function renderGenericTable(containerId, data, emptyMsg) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!Array.isArray(data) || !data.length) {
|
||||
container.textContent = emptyMsg;
|
||||
return;
|
||||
}
|
||||
const table = renderTable(data);
|
||||
container.innerHTML = '';
|
||||
container.appendChild(table);
|
||||
}
|
||||
|
||||
function renderTable(data) {
|
||||
// Columns are inferred from the first object (order matters)
|
||||
const cols = Object.keys(data[0]);
|
||||
// Create table
|
||||
const table = document.createElement('table');
|
||||
// Header
|
||||
const thead = table.createTHead();
|
||||
const headerRow = thead.insertRow();
|
||||
cols.forEach(col => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = col.charAt(0).toUpperCase() + col.slice(1);
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
// Body
|
||||
const tbody = table.createTBody();
|
||||
data.forEach(item => {
|
||||
const tr = tbody.insertRow();
|
||||
cols.forEach(col => {
|
||||
const td = tr.insertCell();
|
||||
td.textContent = item[col];
|
||||
});
|
||||
});
|
||||
return table;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
111
files/ws_node/public/styles.css
Normal file
111
files/ws_node/public/styles.css
Normal file
@ -0,0 +1,111 @@
|
||||
/* styles.css */
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #2c3e50; /* Dark background color */
|
||||
color: #bdc3c7; /* Dimmer text color */
|
||||
}
|
||||
|
||||
.hidden-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title-button {
|
||||
background-color: #34495e;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 950px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #34495e; /* Darker background for container */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container-small {
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #34495e; /* Darker background for container */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Slightly darker shadow */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: #bdc3c7; /* Dimmer text color */
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
color: #bdc3c7; /* Dimmer text color */
|
||||
}
|
||||
|
||||
.group-columns {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group-rows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start; /* Left justification */
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.group-column {
|
||||
flex: 0 0 calc(33% - 10px); /* Adjust width of each column */
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
padding: 0 10px; /* Adjust spacing between columns */
|
||||
}
|
||||
|
||||
.subcolumn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.meter {
|
||||
width: calc(90% - 5px);
|
||||
max-width: calc(45% - 5px);
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #7f8c8d; /* Light border color */
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
background-color: #2c3e50; /* Dark background for meter */
|
||||
}
|
||||
|
||||
54
files/ws_node/server.js
Normal file
54
files/ws_node/server.js
Normal file
@ -0,0 +1,54 @@
|
||||
const http = require('http');
|
||||
const express = require('express');
|
||||
const { createClient } = require('redis');
|
||||
const { Server } = require('socket.io');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
|
||||
// Serve static files (index.html)
|
||||
app.use(express.static('public'));
|
||||
|
||||
// ---------- Redis subscriber ----------
|
||||
const redisClient = createClient({
|
||||
url: 'redis://172.17.0.1:6379'
|
||||
});
|
||||
redisClient.on('error', err => console.error('Redis error', err));
|
||||
|
||||
(async () => {
|
||||
await redisClient.connect();
|
||||
|
||||
// Subscribe to the channel that sends disk lists
|
||||
const sub = redisClient.duplicate(); // duplicate to keep separate pub/sub
|
||||
await sub.connect();
|
||||
|
||||
await sub.subscribe(
|
||||
['attached_disks', 'host_stats'],
|
||||
(message, channel) => { // <-- single handler
|
||||
let payload;
|
||||
try {
|
||||
payload = JSON.parse(message); // message is a JSON string
|
||||
} catch (e) {
|
||||
console.error(`Failed to parse ${channel}`, e);
|
||||
return;
|
||||
}
|
||||
|
||||
io.emit(channel, payload);
|
||||
}
|
||||
);
|
||||
|
||||
sub.on('error', err => console.error('Subscriber error', err));
|
||||
})();
|
||||
|
||||
// ---------- Socket.io ----------
|
||||
io.on('connection', socket => {
|
||||
console.log('client connected:', socket.id);
|
||||
// Optional: send the current state on connect if you keep it cached
|
||||
});
|
||||
|
||||
// ---------- Start ----------
|
||||
const PORT = process.env.PORT || 3000;
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Server listening on http://localhost:${PORT}`);
|
||||
});
|
||||
Reference in New Issue
Block a user