add string returns for metrics and properties
This commit is contained in:
@ -8,11 +8,11 @@
|
||||
<link rel="stylesheet" href="src/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2>Matt-Cloud Cosmostat Dashboard</h2>
|
||||
This dashboard shows the local Matt-Cloud system stats.<p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2>Live System Metrics</h2>
|
||||
<div id="host_metrics" class="column">Connecting…</div>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@ function safeSetText(id, txt) {
|
||||
------------------------------------------------------------------ */
|
||||
// helper function for table row ordering
|
||||
function renderStatsTable(data) {
|
||||
socket.emit('tableRendered');
|
||||
renderGenericTable('host_metrics', data, 'No Stats available');
|
||||
}
|
||||
|
||||
@ -48,59 +49,56 @@ function renderGenericTable(containerId, data, emptyMsg) {
|
||||
3. Merge rows by name
|
||||
------------------------------------------------------------ */
|
||||
function mergeRowsByName(data) {
|
||||
const groups = {}; // { name: { types: [], metrics: [], props: [], values: [] } }
|
||||
|
||||
const groups = {}; // { source: { ... } }
|
||||
data.forEach(row => {
|
||||
const name = row.name;
|
||||
if (!name) return; // ignore rows without a name
|
||||
|
||||
if (!groups[name]) {
|
||||
groups[name] = { types: [], metrics: [], props: [], values: [] };
|
||||
const source = row.Source; // <-- changed
|
||||
if (!source) return;
|
||||
if (!groups[source]) {
|
||||
groups[source] = { Metric: [], Data: [], Property: [], Value: [] };
|
||||
}
|
||||
|
||||
// Metric rows - contain type + metric
|
||||
if ('type' in row && 'metric' in row) {
|
||||
groups[name].types.push(row.type);
|
||||
groups[name].metrics.push(row.metric);
|
||||
}
|
||||
// Property rows - contain property + value
|
||||
else if ('property' in row && 'value' in row) {
|
||||
groups[name].props.push(row.property);
|
||||
groups[name].values.push(row.value);
|
||||
if ('Metric' in row && 'Data' in row) {
|
||||
groups[source].Metric.push(row.Metric);
|
||||
groups[source].Data.push(row.Data);
|
||||
} else if ('Property' in row && 'Value' in row) {
|
||||
groups[source].Property.push(row.Property);
|
||||
groups[source].Value.push(row.Value);
|
||||
}
|
||||
});
|
||||
|
||||
// Convert each group into a single row object
|
||||
const merged = [];
|
||||
Object.entries(groups).forEach(([name, grp]) => {
|
||||
Object.entries(groups).forEach(([source, grp]) => {
|
||||
merged.push({
|
||||
name,
|
||||
type: grp.types, // array of types
|
||||
metric: grp.metrics, // array of metrics
|
||||
property: grp.props, // array of property names
|
||||
value: grp.values, // array of property values
|
||||
Source: source, // <-- keep the original key
|
||||
Metric: grp.Metric,
|
||||
Data: grp.Data,
|
||||
Property: grp.Property,
|
||||
Value: grp.Value
|
||||
});
|
||||
});
|
||||
|
||||
return merged;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
3b. Order rows - put “System”, “CPU”, “RAM” first
|
||||
------------------------------------------------------------------ */
|
||||
// 3b. Order rows – put “System”, “CPU”, “RAM” first
|
||||
function orderRows(rows) {
|
||||
// this should be updatable if i want
|
||||
// Priority list – can be updated later
|
||||
const priority = ['System', 'CPU', 'RAM'];
|
||||
const priorityMap = {};
|
||||
priority.forEach((name, idx) => (priorityMap[name] = idx));
|
||||
|
||||
// Map source → priority index
|
||||
const priorityMap = {};
|
||||
priority.forEach((src, idx) => {
|
||||
priorityMap[src] = idx;
|
||||
});
|
||||
|
||||
// Stable sort: keep original position if priorities are equal
|
||||
return [...rows].sort((a, b) => {
|
||||
const aIdx = priorityMap.hasOwnProperty(a.name)
|
||||
? priorityMap[a.name]
|
||||
: Infinity; // anything not in priority goes to the end
|
||||
const bIdx = priorityMap.hasOwnProperty(b.name)
|
||||
? priorityMap[b.name]
|
||||
const aIdx = priorityMap.hasOwnProperty(a.Source)
|
||||
? priorityMap[a.Source]
|
||||
: Infinity; // anything not in priority goes to the end
|
||||
const bIdx = priorityMap.hasOwnProperty(b.Source)
|
||||
? priorityMap[b.Source]
|
||||
: Infinity;
|
||||
|
||||
// If both have the same priority (or both Infinity), keep original order
|
||||
return aIdx - bIdx;
|
||||
});
|
||||
}
|
||||
@ -109,7 +107,7 @@ function orderRows(rows) {
|
||||
4. Build an HTML table from an array of objects
|
||||
------------------------------------------------------------ */
|
||||
function buildTable(data) {
|
||||
const cols = ['name', 'type', 'metric', 'property', 'value']; // explicit order
|
||||
const cols = ['Source', 'Property', 'Value', 'Metric', 'Data']; // explicit order
|
||||
const table = document.createElement('table');
|
||||
|
||||
// Header
|
||||
|
||||
@ -8,33 +8,15 @@ body {
|
||||
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: 2px solid #182939;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
.card {
|
||||
max-width: 950px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
@ -43,15 +25,6 @@ th, td {
|
||||
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 */
|
||||
@ -67,55 +40,12 @@ li {
|
||||
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 */
|
||||
}
|
||||
|
||||
#host_metrics_column td {
|
||||
list-style: none; /* removes the numeric markers */
|
||||
padding-left: 0; /* remove the default left indent */
|
||||
margin-left: 0; /* remove the default left margin */
|
||||
}
|
||||
|
||||
|
||||
#host_metrics_table tbody tr td :nth-of-type(even) {
|
||||
background-color: #2c3e50;
|
||||
background-color: #3e5c78;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"socket.io": "^4.7.2",
|
||||
"redis": "^4.6.7"
|
||||
"redis": "^4.6.7",
|
||||
"node-fetch": "^2.6.7"
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,63 @@
|
||||
// server.js
|
||||
const http = require('http');
|
||||
const http = require('http');
|
||||
const express = require('express');
|
||||
const { createClient } = require('redis');
|
||||
const { Server } = require('socket.io');
|
||||
const fetch = require('node-fetch'); // npm i node-fetch@2
|
||||
|
||||
const app = express();
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
const io = new Server(server);
|
||||
|
||||
// Serve static files (index.html)
|
||||
// ---------- Socket.io ----------
|
||||
io.on('connection', async socket => {
|
||||
console.log('client connected:', socket.id);
|
||||
|
||||
// Call the external API every time a client connects
|
||||
try {
|
||||
const resp = await fetch('http://192.168.37.1:5000/start_timer', {
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
console.log('API responded to connect:', data);
|
||||
} catch (err) {
|
||||
console.error('Failed to hit start_timer endpoint:', err);
|
||||
}
|
||||
|
||||
// Listen for tableRendered event from the client
|
||||
socket.on('tableRendered', async () => {
|
||||
console.log('Client reported table rendered - starting timer');
|
||||
try {
|
||||
const resp = await fetch('http://192.168.37.1:5000/start_timer', {
|
||||
method: 'GET'
|
||||
});
|
||||
const text = await resp.text();
|
||||
console.log('Timer endpoint responded:', text);
|
||||
} catch (err) {
|
||||
console.error('Failed to hit start_timer:', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Serve static files (index.html, etc.)
|
||||
app.use(express.static('public'));
|
||||
|
||||
// ---------- Redis subscriber ----------
|
||||
const redisClient = createClient({
|
||||
url: 'redis://192.168.37.1:6379'
|
||||
});
|
||||
const redisClient = createClient({ url: 'redis://192.168.37.1:6379' });
|
||||
|
||||
redisClient.on('error', err => console.error('Redis error', err));
|
||||
|
||||
(async () => {
|
||||
await redisClient.connect();
|
||||
|
||||
|
||||
const sub = redisClient.duplicate(); // duplicate to keep separate pub/sub
|
||||
await sub.connect();
|
||||
// Subscribe to the channel that sends host stats
|
||||
|
||||
// Subscribe to the channel that sends host stats
|
||||
await sub.subscribe(
|
||||
['host_metrics'],
|
||||
(message, channel) => { // <-- single handler
|
||||
(message, channel) => {
|
||||
let payload;
|
||||
try {
|
||||
payload = JSON.parse(message); // message is a JSON string
|
||||
@ -34,20 +65,13 @@ redisClient.on('error', err => console.error('Redis error', err));
|
||||
console.error(`Failed to parse ${channel}`, e);
|
||||
return;
|
||||
}
|
||||
|
||||
io.emit(channel, payload);
|
||||
}
|
||||
);
|
||||
|
||||
sub.on('error', err => console.error('Subscriber error', err));
|
||||
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, () => {
|
||||
|
||||
40
files/web/proxy/nginx.conf
Normal file
40
files/web/proxy/nginx.conf
Normal file
@ -0,0 +1,40 @@
|
||||
# nginx.conf
|
||||
# This file will be mounted into /etc/nginx/conf.d/default.conf inside the container
|
||||
|
||||
# Enable proxy buffers (optional but recommended)
|
||||
proxy_buffering on;
|
||||
proxy_buffers 16 16k;
|
||||
proxy_buffer_size 32k;
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
# --------------------------------------------------------------------
|
||||
# Proxy everything under "/" to the php server backend
|
||||
# --------------------------------------------------------------------
|
||||
location / {
|
||||
proxy_pass http://192.168.37.1:8080;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
# ----- Custom Nginx Configuration (inside <location> block) -----
|
||||
location /socket.io/ {
|
||||
# Forward to the Node WS server
|
||||
proxy_pass http://192.168.37.1:3000; # or <node_container_ip>
|
||||
|
||||
# Keep WebSocket upgrade headers
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
|
||||
# Optional: pass on other headers you care about
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user