Cosmostat Init Commit
This commit is contained in:
34
files/web/html/index.html
Normal file
34
files/web/html/index.html
Normal file
@ -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>
|
||||
126
files/web/html/src/redis.js
Normal file
126
files/web/html/src/redis.js
Normal file
@ -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;
|
||||
}
|
||||
120
files/web/html/src/styles.css
Normal file
120
files/web/html/src/styles.css
Normal file
@ -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; }
|
||||
32
files/web/html/test-2.html
Normal file
32
files/web/html/test-2.html
Normal file
@ -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>
|
||||
181
files/web/html/test.html
Normal file
181
files/web/html/test.html
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user