matt/cosmoserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add string returns for metrics and properties

Browse Source
This commit is contained in:
Matt
2026-03-16 09:17:44 -07:00
parent adb1387693
commit 61421305ed
16 changed files with 524 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
files/web/html/index.php
View File

@ -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>

72
files/web/html/src/redis.js
View File

@ -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

76
files/web/html/src/styles.css
View File

@ -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;
}