Cosmostat Init Commit

2026-03-09 16:32:43 -07:00
commit 298d7432a7
23 changed files with 1707 additions and 0 deletions
--- a/files/web/html/index.html
+++ b/files/web/html/index.html
@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Matt-Cloud Cosmostat</title>
+
+
+    <link rel="stylesheet" href="src/styles.css">
+</head>
+<body>
+  <div class="container">
+    <h2>Matt-Cloud Cosmostat Dashboard</h2>
+    This dashboard shows the local Matt-Cloud system stats.<p>
+  </div>
+  <div class="container">
+    <h2>System Stats</h2>
+    <div id="host_stats" class="column">Connecting…</div>
+  </div>
+
+  <!--
+  Here will go the graphs once i have all the stats first
+  <div class="container">
+    <h2>System Graphs</h2>
+    <div id="host_graphs" class="column">Connecting…</div>
+  </div>
+  -->
+
+  <!-- Socket.IO client library -->
+  <script src="socket.io/socket.io.js"></script>
+  <!-- matt-cloud redis script -->
+  <script src="src/redis.js"></script>
+
+</body>
+</html>
--- a/files/web/html/src/redis.js
+++ b/files/web/html/src/redis.js
@ -0,0 +1,126 @@
+  /* -------------------------------------------------------------
+     1.  Socket‑IO connection & helper functions (unchanged)
+     ------------------------------------------------------------- */
+  const socket = io();
+
+  socket.on('host_stats', renderStatsTable);
+  socket.on('connect_error', err => {
+    safeSetText('host_stats', `Could not connect to server - ${err.message}`);
+  });
+  socket.on('reconnect', attempt => {
+    safeSetText('host_stats', `Re‑connected (attempt ${attempt})`);
+  });
+
+  function safeSetText(id, txt) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = txt;
+  }
+
+  /* -------------------------------------------------------------
+     2.  Table rendering – the table remains a <table>
+     ------------------------------------------------------------- */
+  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;
+    }
+
+    /* 2️⃣  Merge “System Class Variable” rows first */
+    const mergedData = mergeSystemClassVariableRows(data);
+
+    /* 3️⃣  Build the table from the merged data */
+    const table = buildTable(mergedData);
+
+    container.innerHTML = '';
+    container.appendChild(table);
+  }
+
+  /* -------------------------------------------------------------
+     3.  Merge consecutive rows whose type === "System Class Variable"
+     ------------------------------------------------------------- */
+  function mergeSystemClassVariableRows(data) {
+    const result = [];
+    let i = 0;
+
+    while (i < data.length) {
+      const cur = data[i];
+
+      if (cur.type && cur.type.trim() === 'System Class Variable') {
+        const group = [];
+        while (
+          i < data.length &&
+          data[i].type &&
+          data[i].type.trim() === 'System Class Variable'
+        ) {
+          group.push(data[i]);
+          i++;
+        }
+
+        /* Build one merged object – keep each column as an array */
+        const merged = { type: 'System Class Variable' };
+        const cols = Object.keys(group[0]).filter(k => k !== 'type');
+
+        cols.forEach(col => {
+          const vals = group
+            .map(row => row[col])
+            .filter(v => v !== undefined && v !== null);
+          merged[col] = vals;   // ← array, not joined string
+        });
+
+        result.push(merged);
+      } else {
+        /* Normal row – just copy it */
+        result.push(cur);
+        i++;
+      }
+    }
+
+    return result;
+  }
+
+  /* -------------------------------------------------------------
+     4.  Build an HTML table from an array of objects
+     ------------------------------------------------------------- */
+  function buildTable(data) {
+    const cols = Object.keys(data[0]);          // column order
+    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;
+      headerRow.appendChild(th);
+    });
+
+    /* Body */
+    const tbody = table.createTBody();
+    data.forEach(item => {
+      const tr = tbody.insertRow();
+      cols.forEach(col => {
+        const td = tr.insertCell();
+        const val = item[col];
+
+        /* If the value is an array → render as <ol> */
+        if (Array.isArray(val)) {
+          const ol = document.createElement('ol');
+          val.forEach(v => {
+            const li = document.createElement('li');
+            li.textContent = v;
+            ol.appendChild(li);
+          });
+          td.appendChild(ol);
+        } else {
+          td.textContent = val;  // normal text
+        }
+      });
+    });
+
+    return table;
+  }
--- a/files/web/html/src/styles.css
+++ b/files/web/html/src/styles.css
@ -0,0 +1,120 @@
+/* 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 */
+}
+
+#host_stats td ol {
+  list-style: none;          /* removes the numeric markers */
+  padding-left: 0;           /* remove the default left indent */
+  margin-left: 0;            /* remove the default left margin */
+}
+ 
+
+#host_stats td ol li:nth-child(odd)  { background: #34495e; }
+#host_stats td ol li:nth-child(even) { background: #3e5c78; }
--- a/files/web/html/test-2.html
+++ b/files/web/html/test-2.html
@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Matt-Cloud Cosmostat</title>
+
+
+    <link rel="stylesheet" href="src/styles.css">
+</head>
+<body>
+  <div class="container">
+    <h2>Matt-Cloud Cosmostat Dashboard</h2>
+    This dashboard shows the local Matt-Cloud system stats.<p>
+  </div>
+  <div class="container">
+    <h2>System Stats</h2>
+    <div id="host_stats" class="column">Connecting…</div>
+  </div>
+  <!--
+  Here will go the graphs once i have all the stats first
+  <div class="container">
+    <h2>System Graphs</h2>
+    <div id="host_graphs" class="column">Connecting…</div>
+  </div>
+  -->
+
+  <!-- Socket.IO client library -->
+  <script src="socket.io/socket.io.js"></script>
+  <!-- matt-cloud redis script -->
+  <script src="src/redis.js"></script>
+</body>
+</html>
--- a/files/web/html/test.html
+++ b/files/web/html/test.html
@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Matt-Cloud Cosmostat</title>
+
+
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h2>Matt-Cloud Cosmostat Dashboard</h2>
+    This dashboard shows the local Matt-Cloud system stats.<p>
+  </div>
+  <div class="container">
+    <h2>System Stats</h2>
+    <div id="host_stats" class="column">Connecting...</div>
+  </div>
+  <!--
+  Here will go the graphs once i have all the stats first
+  -->
+  <div class="container">
+    <h2>System Graphs</h2>
+    <div id="host_graphs" class="column">
+      <div id="history_graphs" class="container">
+        
+      </div>
+    </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('host_stats', renderStatsTable);
+
+    socket.on('connect_error', err => {
+      safeSetText('host_stats', `Could not connect to server - ${err.message}`);
+    });
+
+    socket.on('reconnect', 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 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;
+        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>
+  <script>
+
+    // ──────────────────────  Globals  ──────────────────────
+    const chartInstances = {};          // {metricName: Chart}
+    const colorPalette = [
+    '#ff6384', '#36a2eb', '#ffcd56', '#4bc0c0',
+    '#9966ff', '#ff9f40', '#8e5ea2', '#3e95cd'
+    ];
+
+    // ──────────────────────  Socket.io  ──────────────────────
+    socket.on('history_stats', renderHistoryGraphs);
+
+    // ──────────────────────  Rendering  ──────────────────────
+    function renderHistoryGraphs(components) {
+    // 1️⃣  Sanity check – components is an array of objects
+    if (!Array.isArray(components) || !components.length) {
+        console.warn('history_stats payload is empty or malformed');
+        return;
+    }
+
+    // 2️⃣  Clean up any old charts & canvases
+    Object.values(chartInstances).forEach(ch => ch.destroy());
+    chartInstances = {};               // reset map
+    const container = document.getElementById('history_graphs');
+    container.innerHTML = '';           // empty the container
+
+    // 3️⃣  For each component create a canvas & a Chart
+    components.forEach((comp, idx) => {
+        const metricName = comp.info?.metric_name || comp.info?.name || `component-${idx+1}`;
+
+        // 3a. Create a canvas element
+        const canvas = document.createElement('canvas');
+        canvas.id = `chart-${metricName}`;
+        canvas.width = 800;              // optional – you can use CSS instead
+        canvas.height = 400;
+        canvas.style.marginBottom = '2rem';
+
+        // 3b. Append the canvas to the container
+        container.appendChild(canvas);
+
+        // 3c. Build the dataset for this component
+        const history = comp.history?.history_data || [];
+        const dataPoints = history.map(d => ({
+        x: new Date(d.timestamp * 1000),      // convert seconds → ms
+        y: parseFloat(d.value)                // values are strings in Redis
+        }));
+
+        const dataset = {
+        label: metricName,
+        data: dataPoints,
+        borderColor: colorPalette[idx % colorPalette.length],
+        fill: false,
+        tension: 0.1
+        };
+
+        // 3d. Create the chart
+        const ctx = canvas.getContext('2d');
+        chartInstances[metricName] = new Chart(ctx, {
+        type: 'line',
+        data: { datasets: [dataset] },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+            legend: { position: 'bottom' },
+            tooltip: { mode: 'index', intersect: false }
+            },
+            scales: {
+            x: {
+                type: 'time',
+                time: { unit: 'minute', tooltipFormat: 'YYYY‑MM‑DD HH:mm:ss' },
+                title: { display: true, text: 'Time' }
+            },
+            y: {
+                title: { display: true, text: 'Value' },
+                beginAtZero: false
+            }
+            }
+        }
+        });
+    });
+    }
+
+  </script>
+
+</body>
+</html>
--- a/files/web/node_server/Dockerfile
+++ b/files/web/node_server/Dockerfile
@ -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"]
--- a/files/web/node_server/package.json
+++ b/files/web/node_server/package.json
@ -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"
+  }
+}
--- a/files/web/node_server/server.js
+++ b/files/web/node_server/server.js
@ -0,0 +1,70 @@
+// server.js
+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();
+
+  
+  const sub = redisClient.duplicate(); // duplicate to keep separate pub/sub
+  await sub.connect();
+// Subscribe to the channel that sends host stats
+  await sub.subscribe(
+    ['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);
+    }
+  );
+// Subscribe to the channel that sends history stats
+  await sub.subscribe(
+    ['history_stats'],
+    (message, channel) => {
+      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}`);
+});