copied cosmostat web dashboard for init dashboard work
This commit is contained in:
matt committed
1 parent
b414065d63
commit
92a97752ad
28 files changed
+2804
-3
No files matched your search
@@ -0,0 +1,145 @@
|
||||
/* ------------------------------------------------------------
|
||||
1. Socket-IO connection & helper functions
|
||||
------------------------------------------------------------ */
|
||||
const socket = io();
|
||||
|
||||
socket.on('host_metrics', renderStatsTable);
|
||||
socket.on('connect_error', err => {
|
||||
safeSetText('host_metrics', `Could not connect to server - ${err.message}`);
|
||||
});
|
||||
socket.on('reconnect', attempt => {
|
||||
safeSetText('host_metrics', `Re-connected (attempt ${attempt})`);
|
||||
});
|
||||
|
||||
function safeSetText(id, txt) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = txt;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
2. Table rendering - now orders rows before building the table
|
||||
------------------------------------------------------------------ */
|
||||
// helper function for table row ordering
|
||||
function renderStatsTable(data) {
|
||||
socket.emit('tableRendered');
|
||||
renderGenericTable('host_metrics', data, 'No Stats available');
|
||||
}
|
||||
|
||||
function renderGenericTable(containerId, data, emptyMsg) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!Array.isArray(data) || !data.length) {
|
||||
container.textContent = emptyMsg;
|
||||
return;
|
||||
}
|
||||
|
||||
/* Merge rows by name (new logic) */
|
||||
const mergedData = mergeRowsByName(data);
|
||||
|
||||
/* Order the merged rows – priority first */
|
||||
const orderedData = orderRows(mergedData);
|
||||
|
||||
/* Build the table from the ordered data */
|
||||
const table = buildTable(orderedData);
|
||||
table.id = 'host_metrics_table';
|
||||
container.innerHTML = '';
|
||||
container.appendChild(table);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
3. Merge rows by name
|
||||
------------------------------------------------------------ */
|
||||
function mergeRowsByName(data) {
|
||||
const groups = {}; // { source: { ... } }
|
||||
data.forEach(row => {
|
||||
const source = row.Source; // <-- changed
|
||||
if (!source) return;
|
||||
if (!groups[source]) {
|
||||
groups[source] = { Metric: [], Data: [] };
|
||||
}
|
||||
if ('Metric' in row && 'Data' in row) {
|
||||
groups[source].Metric.push(row.Metric);
|
||||
groups[source].Data.push(row.Data);
|
||||
}
|
||||
});
|
||||
|
||||
const merged = [];
|
||||
Object.entries(groups).forEach(([source, grp]) => {
|
||||
merged.push({
|
||||
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
|
||||
function orderRows(rows) {
|
||||
// Priority list – can be updated later
|
||||
const priority = ['System', 'CPU', 'RAM'];
|
||||
|
||||
// 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.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;
|
||||
});
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
4. Build an HTML table from an array of objects
|
||||
------------------------------------------------------------ */
|
||||
function buildTable(data) {
|
||||
const cols = ['Source', 'Metric', 'Data']; // explicit 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 (Array.isArray(val)) {
|
||||
// Create a <span> for each item
|
||||
val.forEach((v, idx) => {
|
||||
td.id = 'host_metrics_column';
|
||||
const span = document.createElement('span');
|
||||
span.textContent = v;
|
||||
td.appendChild(span);
|
||||
|
||||
// Insert a line break after every item except the last
|
||||
if (idx < val.length - 1) td.appendChild(document.createElement('br'));
|
||||
});
|
||||
} else {
|
||||
td.textContent = val !== undefined ? val : '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return table;
|
||||
}
|
||||
@@ -0,0 +1,401 @@
|
||||
/* -------------------------------------------------
|
||||
1. Global settings & color palette
|
||||
------------------------------------------------- */
|
||||
:root {
|
||||
/* Dark theme - body & card backgrounds */
|
||||
--bg-body: #2c3e50; /* main page background */
|
||||
--bg-card: #34495e; /* card / panel background */
|
||||
--bg-sidebar: #3d566e; /* sidebar background (slightly lighter) */
|
||||
/* Accent / link color */
|
||||
--clr-accent: #3498db; /* blue accent for links */
|
||||
/* Text color */
|
||||
--clr-text: #ecf0f1; /* light whiteish text */
|
||||
/* Borders / accents */
|
||||
--clr-border: #1f2b38; /* dark border color */
|
||||
/* button colors*/
|
||||
--clr-btn-bg: var(--bg-card); /* default button background */
|
||||
--clr-btn-text: var(--clr-text); /* button text color */
|
||||
--clr-btn-border: var(--clr-border); /* border color */
|
||||
--clr-btn-accent: var(--clr-accent); /* hover/focus color */
|
||||
--clr-btn-shadow: rgba(0,0,0,0.3);
|
||||
/* select colors */
|
||||
--clr-select-bg: var(--bg-card); /* dropdown background */
|
||||
--clr-select-text: var(--clr-text); /* option text colour */
|
||||
--clr-select-border: var(--clr-border);
|
||||
--clr-select-accent: var(--clr-accent);/* focus / hover border */
|
||||
--clr-select-shadow: rgba(0,0,0,.3);
|
||||
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* Body */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg-body);
|
||||
color: var(--clr-text);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a { color: var(--clr-accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
2. Layout - wrapper, sidebar, main
|
||||
------------------------------------------------- */
|
||||
.wrapper { display: flex; }
|
||||
|
||||
.sidebar {
|
||||
position: fixed; /* keep sidebar visible during scroll */
|
||||
top: 0; /* stick to the top of the viewport */
|
||||
left: 0; /* align to the left edge */
|
||||
height: 100vh; /* full viewport height */
|
||||
/* ---- size & spacing ------------------------------------------- */
|
||||
width: 200px; /* same as before */
|
||||
padding: 1rem;
|
||||
overflow-y: auto; /* allow sidebar content to scroll if needed */
|
||||
/* ---- look ------------------------------------------------------- */
|
||||
background: var(--bg-sidebar);
|
||||
/* optional: keep it above other content */
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar h3 { margin: 0 0 .4rem 0; font-size: 1.3rem; }
|
||||
.sidebar ul { list-style: none; padding: 0; margin: 0; }
|
||||
.sidebar ol { list-style: none; padding: 0; margin: 0; }
|
||||
.sidebar li { margin-bottom: .4rem; font-size: 1.1rem; }
|
||||
.sidebar a { color: var(--clr-accent); }
|
||||
.sidebar a.active { font-weight: bold; }
|
||||
/*
|
||||
.endpointList {
|
||||
|
||||
}
|
||||
*/
|
||||
.main{
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
padding-left: 200px; /* space for the fixed sidebar */
|
||||
/* optional: avoid accidental horizontal overflow */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* -------------------------------------------------
|
||||
3. Card component
|
||||
------------------------------------------------- */
|
||||
.card {
|
||||
max-width: 950px;
|
||||
margin: 20px auto 1rem auto;
|
||||
padding: 20px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------
|
||||
4. Tables
|
||||
------------------------------------------------- */
|
||||
table, th, td {
|
||||
border: 2px solid var(--clr-border);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td { padding: 10px; }
|
||||
|
||||
/* Alternate row color for metrics table */
|
||||
#host_metrics_table tbody tr td:nth-of-type(even) {
|
||||
background: #3e5c78; /* slight contrast */
|
||||
}
|
||||
|
||||
/* -------------------------------------------------
|
||||
5. Lists & headings
|
||||
------------------------------------------------- */
|
||||
h1, h2, h3, h4 { color: var(--clr-text); margin: 0 0 .4rem 0; }
|
||||
ul { list-style: none; padding: 0; }
|
||||
ol { list-style: none; padding: 0; }
|
||||
li { margin-bottom: 10px; color: var(--clr-text); }
|
||||
|
||||
/* System & component lists */
|
||||
.system-list, .info-list {
|
||||
list-style: none; padding: 0; margin: 0;
|
||||
}
|
||||
.system-list li, .info-list li { margin-bottom: 5px; color: var(--clr-text); }
|
||||
|
||||
/* -------------------------------------------------
|
||||
6. Components grid
|
||||
------------------------------------------------- */
|
||||
.components {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.component {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--clr-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.component h3 { margin: 0 0 5px; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
7. Panel toggles / modal
|
||||
------------------------------------------------- */
|
||||
.help-link {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--clr-accent);
|
||||
text-align: right;
|
||||
}
|
||||
.help-link:hover { text-decoration: underline; }
|
||||
#helpText { display: none; }
|
||||
|
||||
.componentDetail-link {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--clr-accent);
|
||||
text-align: left;
|
||||
}
|
||||
.componentDetail-link:hover { text-decoration: underline; }
|
||||
#componentDetailText { display: none; }
|
||||
|
||||
|
||||
/* -------------------------------------------------
|
||||
8. Misc helpers
|
||||
------------------------------------------------- */
|
||||
/* Hide numeric markers in metric columns (if any) */
|
||||
#host_metrics_column td { list-style: none; padding-left: 0; margin-left: 0; }
|
||||
|
||||
.host-status {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-left: 6px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
background: #808080; /* default - unknown / no timestamp */
|
||||
transition: background-color 1s linear; /* smooth fade */
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------
|
||||
9. Mobile adjustments
|
||||
------------------------------------------------- */
|
||||
@media (max-width: 768px) {
|
||||
/* 1. Make the whole page a column */
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 2. Hide the sidebar initially */
|
||||
.sidebar {
|
||||
position: relative; /* take it out of the flow */
|
||||
width: 100%;
|
||||
max-height: 0; /* collapsed */
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
background: var(--bg-sidebar);
|
||||
padding: 0; /* remove padding */
|
||||
}
|
||||
|
||||
.sidebar.show {
|
||||
max-height: 500px; /* enough for all items */
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* 3. Move the toggle button into the header */
|
||||
.mobile-toggle {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--clr-accent);
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* 4. Main content no left padding */
|
||||
.main {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
/* 5. Table scroll on small screens */
|
||||
.card table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.card table thead,
|
||||
.card table tbody,
|
||||
.card table tr,
|
||||
.card table td,
|
||||
.card table th {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card table tbody {
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card table td,
|
||||
.card table th {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* 6. Adjust the host status dot positioning */
|
||||
.host-status {
|
||||
margin-left: 2px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: style the drawer indicator */
|
||||
.sidebar.show::before {
|
||||
content: "✕ Close";
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-sidebar);
|
||||
color: var(--clr-accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* for stacking storage clients */
|
||||
.storage_client{
|
||||
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
padding-left: 200px; /* space for the fixed sidebar */
|
||||
overflow-x: hidden;
|
||||
display: flex; /* make it a flex container */
|
||||
flex-direction: column; /* stack its children (cards) vertically */
|
||||
align-items: center; /* center the cards horizontally */
|
||||
|
||||
}
|
||||
|
||||
/* lets make buttons nice*/
|
||||
|
||||
/* 2. Base button style */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .55rem 1.25rem;
|
||||
font-size: .9rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--clr-btn-text);
|
||||
background: var(--clr-btn-bg);
|
||||
border: 1px solid var(--clr-btn-border);
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, box-shadow .15s ease, transform .075s ease;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 3. Primary button - accent color */
|
||||
.btn-primary {
|
||||
background: var(--clr-btn-accent);
|
||||
border-color: var(--clr-btn-accent);
|
||||
color: #fff; /* brighter text for dark button */
|
||||
}
|
||||
|
||||
/* 4. Secondary button - subtle background */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border-color: var(--clr-btn-accent);
|
||||
color: var(--clr-btn-accent);
|
||||
}
|
||||
|
||||
/* 5. Hover & focus states */
|
||||
.btn:hover,
|
||||
.btn:focus-visible {
|
||||
background: #2b3f4c; /* a slightly darker shade of card bg */
|
||||
box-shadow: 0 3px 8px var(--clr-btn-shadow);
|
||||
transform: translateY(-1px);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* 6. Disabled state */
|
||||
.btn:disabled,
|
||||
.btn[aria-disabled="true"] {
|
||||
opacity: .55;
|
||||
cursor: not-allowed;
|
||||
background: var(--bg-card);
|
||||
border-color: var(--clr-border);
|
||||
}
|
||||
|
||||
/* 7. Extra - block‑level button */
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* let's also make the <select> element not suck*/
|
||||
|
||||
/* Base <select> style */
|
||||
.select-dark {
|
||||
appearance: none; /* hide native arrow in Chrome/Edge/FF */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
display: inline-block;
|
||||
padding: .45rem 1.25rem .45rem .75rem;
|
||||
font-size: .9rem;
|
||||
line-height: 1.4;
|
||||
color: var(--clr-select-text);
|
||||
background: var(--clr-select-bg);
|
||||
border: 1px solid var(--clr-select-border);
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
min-width: 150px; /* optional - forces a decent width */
|
||||
|
||||
/* Custom arrow - positioned after the element */
|
||||
background-image: linear-gradient(45deg, transparent 50%, var(--clr-select-accent) 50%),
|
||||
linear-gradient(135deg, var(--clr-select-accent) 50%, transparent 50%),
|
||||
linear-gradient(to right, var(--clr-select-border), var(--clr-select-border));
|
||||
background-position:
|
||||
calc(100% - 20px) calc(50% + 2px),
|
||||
calc(100% - 15px) calc(50% + 2px),
|
||||
calc(100% - 3px) 50%;
|
||||
background-size:
|
||||
5px 5px,
|
||||
5px 5px,
|
||||
1px 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Hover & focus - subtle accent border */
|
||||
.select-dark:hover,
|
||||
.select-dark:focus-visible {
|
||||
border-color: var(--clr-select-accent);
|
||||
box-shadow: 0 0 3px var(--clr-select-shadow);
|
||||
outline: none; /* rely on the box-shadow for focus */
|
||||
}
|
||||
|
||||
/* Disabled state - greys out the control */
|
||||
.select-dark:disabled,
|
||||
.select-dark[aria-disabled="true"] {
|
||||
opacity: .55;
|
||||
cursor: not-allowed;
|
||||
background: var(--bg-card);
|
||||
border-color: var(--clr-border);
|
||||
}
|
||||
|
||||
/* <option> styling - works in most browsers */
|
||||
.select-dark option {
|
||||
background: var(--bg-card);
|
||||
color: var(--clr-select-text);
|
||||
}
|
||||
|
||||
/* Optional - make the arrow bigger on hover for visibility */
|
||||
.select-dark:hover {
|
||||
background-position:
|
||||
calc(100% - 18px) calc(50% + 2px),
|
||||
calc(100% - 13px) calc(50% + 2px),
|
||||
calc(100% - 3px) 50%;
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
/* system_metrics.js */
|
||||
|
||||
(() => {
|
||||
/* Socket.IO setup */
|
||||
const socket = io({
|
||||
transports: ['websocket', 'polling'],
|
||||
reconnection: true,
|
||||
reconnectionAttempts: Infinity,
|
||||
reconnectionDelay: 3000,
|
||||
reconnectionDelayMax: 60000,
|
||||
timeout: 60000,
|
||||
pingTimeout: 5000,
|
||||
pingInterval: 25000,
|
||||
});
|
||||
/* Color constants */
|
||||
const GREEN = [ 39, 174, 96]; // #27ae60
|
||||
const YELLOW = [243, 156, 18]; // #f39c12
|
||||
const RED = [192, 57, 43]; // #c0392b
|
||||
/* Helpers */
|
||||
const hostTimestamps = {}; // keyed by short_id
|
||||
const toRgb = (r, g, b) => `rgb(${r},${g},${b})`;
|
||||
const T20 = 20 * 1000;
|
||||
const T40 = 40 * 1000;
|
||||
const T60 = 60 * 1000;
|
||||
function getFreshnessColor(ageMs) {
|
||||
if (ageMs <= T20) {
|
||||
return toRgb(...GREEN);
|
||||
}
|
||||
if (ageMs <= T40) {
|
||||
const t = (ageMs - T20) / (T40 - T20);
|
||||
const r = Math.round(GREEN[0] + t * (YELLOW[0] - GREEN[0]));
|
||||
const g = Math.round(GREEN[1] + t * (YELLOW[1] - GREEN[1]));
|
||||
const b = Math.round(GREEN[2] + t * (YELLOW[2] - GREEN[2]));
|
||||
return toRgb(r, g, b);
|
||||
}
|
||||
if (ageMs <= T60) {
|
||||
const t = (ageMs - T40) / (T60 - T40);
|
||||
const r = Math.round(YELLOW[0] + t * (RED[0] - YELLOW[0]));
|
||||
const g = Math.round(YELLOW[1] + t * (RED[1] - YELLOW[1]));
|
||||
const b = Math.round(YELLOW[2] + t * (RED[2] - YELLOW[2]));
|
||||
return toRgb(r, g, b);
|
||||
}
|
||||
return toRgb(...RED);
|
||||
}
|
||||
function safeSetText(id, txt) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = txt;
|
||||
}
|
||||
/* Get the short_id from the query string */
|
||||
function getSelectedId() {
|
||||
return new URLSearchParams(window.location.search).get('host') || '';
|
||||
}
|
||||
/* Sidebar building - uses short_id for status key */
|
||||
|
||||
function buildList(systemList) {
|
||||
const ul = document.getElementById('endpointList');
|
||||
|
||||
if (!Array.isArray(systemList)) {
|
||||
ul.innerHTML = ''; // nothing to show
|
||||
return;
|
||||
}
|
||||
|
||||
/* Sort: servers first, then by IP */
|
||||
const toInt = ip => {
|
||||
// guard against undefined / empty string
|
||||
if (!ip) return 0;
|
||||
return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
|
||||
};
|
||||
|
||||
const sorted = [...systemList].sort((a, b) => {
|
||||
// a. Servers go before non-servers
|
||||
const aServer = !!a.is_server;
|
||||
const bServer = !!b.is_server;
|
||||
if (aServer !== bServer) return aServer ? -1 : 1; // true < false
|
||||
|
||||
// b. Same “is_server” status - fall back to IP sorting
|
||||
const aIp = a.active_ip ?? '';
|
||||
const bIp = b.active_ip ?? '';
|
||||
|
||||
if (!aIp) return 1; // push empty IPs to the end
|
||||
if (!bIp) return -1;
|
||||
|
||||
return toInt(aIp) - toInt(bIp);
|
||||
});
|
||||
|
||||
/* Bail if nothing actually changed */
|
||||
const current = Array.from(ul.children).map(li => li.dataset.id);
|
||||
const newIds = sorted.map(s => s.short_id);
|
||||
if (arraysEqual(current, newIds)) return; // no visual change needed
|
||||
|
||||
/* Build the DOM */
|
||||
const selected = getSelectedId().toLowerCase();
|
||||
ul.innerHTML = ''; // reset
|
||||
|
||||
sorted.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
|
||||
// • Status dot
|
||||
const status = document.createElement('span');
|
||||
status.className = 'host-status';
|
||||
status.dataset.id = item.short_id;
|
||||
|
||||
// • Link - display hostname, encode short_id in URL
|
||||
const a = document.createElement('a');
|
||||
a.href = '?host=' + encodeURIComponent(item.short_id);
|
||||
a.textContent = item.hostname;
|
||||
a.title = item.active_ip ? `Active IP: ${item.active_ip}` : '';
|
||||
if (item.short_id.toLowerCase() === selected) a.classList.add('active');
|
||||
|
||||
li.appendChild(status);
|
||||
li.appendChild(a);
|
||||
ul.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
/* Update status colors every second */
|
||||
function updateStatusColors() {
|
||||
const nowSec = Date.now() / 1000;
|
||||
Object.entries(hostTimestamps).forEach(([id, ts]) => {
|
||||
const ageMs = (nowSec - ts) * 1000;
|
||||
const color = getFreshnessColor(ageMs);
|
||||
const span = document.querySelector(
|
||||
`.host-status[data-id="${id}"]`
|
||||
);
|
||||
if (span) span.style.backgroundColor = color;
|
||||
});
|
||||
}
|
||||
setInterval(updateStatusColors, 1000);
|
||||
/* Utility helpers */
|
||||
function arraysEqual(a, b) {
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
|
||||
return true;
|
||||
}
|
||||
function renderGenericTable(containerId, data, emptyMsg) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!Array.isArray(data) || !data.length) {
|
||||
container.textContent = emptyMsg;
|
||||
return;
|
||||
}
|
||||
const merged = mergeRowsByName(data);
|
||||
const ordered = orderRows(merged);
|
||||
const table = buildTable(ordered);
|
||||
table.id = 'host_metrics_table';
|
||||
container.innerHTML = '';
|
||||
container.appendChild(table);
|
||||
}
|
||||
function mergeRowsByName(rows) {
|
||||
const groups = {}; // { Source: { Metric: [], Data: [] } }
|
||||
rows.forEach(r => {
|
||||
const src = r.Source;
|
||||
if (!src) return;
|
||||
if (!groups[src]) groups[src] = { Metric: [], Data: [] };
|
||||
if ('Metric' in r && 'Data' in r) {
|
||||
groups[src].Metric.push(r.Metric);
|
||||
groups[src].Data.push(r.Data);
|
||||
}
|
||||
});
|
||||
return Object.entries(groups).map(([src, g]) => ({
|
||||
Source: src,
|
||||
Metric: g.Metric,
|
||||
Data: g.Data,
|
||||
}));
|
||||
}
|
||||
function orderRows(rows) {
|
||||
const priority = ['System', 'CPU', 'RAM'];
|
||||
const map = {};
|
||||
priority.forEach((s, i) => map[s] = i);
|
||||
return [...rows].sort((a, b) => {
|
||||
const ai = map.hasOwnProperty(a.Source) ? map[a.Source] : Infinity;
|
||||
const bi = map.hasOwnProperty(b.Source) ? map[b.Source] : Infinity;
|
||||
return ai - bi;
|
||||
});
|
||||
}
|
||||
function buildTable(rows) {
|
||||
const cols = ['Source', 'Metric', 'Data'];
|
||||
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();
|
||||
rows.forEach(item => {
|
||||
const tr = tbody.insertRow();
|
||||
cols.forEach(col => {
|
||||
const td = tr.insertCell();
|
||||
const val = item[col];
|
||||
if (Array.isArray(val)) {
|
||||
val.forEach((v, i) => {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = v;
|
||||
td.appendChild(span);
|
||||
if (i < val.length - 1) td.appendChild(document.createElement('br'));
|
||||
});
|
||||
} else {
|
||||
td.textContent = val !== undefined ? val : '';
|
||||
}
|
||||
});
|
||||
});
|
||||
return table;
|
||||
}
|
||||
/* Handle incoming data */
|
||||
let lastUpdate = Date.now();
|
||||
function handleSummary(raw) {
|
||||
lastUpdate = Date.now(); // reset watchdog
|
||||
let payload;
|
||||
if (typeof raw === 'string') {
|
||||
try { payload = JSON.parse(raw); } catch (e) {
|
||||
safeSetText('client_summary', 'Invalid data received');
|
||||
return;
|
||||
}
|
||||
} else payload = raw;
|
||||
if (!Array.isArray(payload) || !payload.length) {
|
||||
safeSetText('client_summary', 'No data available');
|
||||
return;
|
||||
}
|
||||
// Build the list first (so <span> elements exist)
|
||||
buildList(payload);
|
||||
// Store the timestamp for every short_id
|
||||
payload.forEach(hostObj => {
|
||||
if (hostObj.short_id && hostObj.data_timestamp) {
|
||||
hostTimestamps[hostObj.short_id] = hostObj.data_timestamp; // seconds
|
||||
}
|
||||
});
|
||||
// Immediately update colors for the current view
|
||||
updateStatusColors();
|
||||
// Metric table for selected host
|
||||
const selectedId = getSelectedId();
|
||||
const hostObj = payload.find(h => h.short_id === selectedId) || payload[0];
|
||||
const hostData = hostObj && Array.isArray(hostObj.redis_data)
|
||||
? hostObj.redis_data
|
||||
: [];
|
||||
renderGenericTable('host_metrics', hostData, 'No Stats available');
|
||||
}
|
||||
/* Socket event wiring */
|
||||
socket.on('client_summary', handleSummary);
|
||||
socket.on('connect', () => {
|
||||
safeSetText('client_summary', 'Connected');
|
||||
requestSummary();
|
||||
});
|
||||
socket.on('disconnect', () => {
|
||||
safeSetText('client_summary', 'Disconnected - retrying...');
|
||||
});
|
||||
socket.on('reconnect', attempt => {
|
||||
safeSetText('client_summary', `Re-connected (attempt ${attempt})`);
|
||||
requestSummary();
|
||||
});
|
||||
/* Request logic */
|
||||
function requestSummary() {
|
||||
if (!socket.connected) return; // guard against stale emits
|
||||
socket.emit('get_client_summary'); // server will reply via client_summary
|
||||
}
|
||||
/* Recursive polling */
|
||||
let pollTimer = null;
|
||||
function pollLoop() {
|
||||
if (!socket.connected) return;
|
||||
requestSummary();
|
||||
pollTimer = setTimeout(pollLoop, 5000);
|
||||
}
|
||||
socket.on('connect', () => {
|
||||
if (!pollTimer) pollLoop();
|
||||
});
|
||||
/* Watchdog - force reconnect if no data for 15 s */
|
||||
function watchdog() {
|
||||
if (Date.now() - lastUpdate > 15000 && socket.connected) {
|
||||
safeSetText('client_summary', 'No updates - reconnecting...');
|
||||
socket.disconnect(); // forces a reconnect cycle
|
||||
}
|
||||
setTimeout(watchdog, 5000);
|
||||
}
|
||||
watchdog();
|
||||
/* Keep the 'active' link in sync when the URL changes */
|
||||
window.addEventListener('popstate', () => {
|
||||
const selected = getSelectedId().toLowerCase();
|
||||
document.querySelectorAll('#endpointList a').forEach(a =>
|
||||
a.classList.toggle('active', a.href.includes('host=' + encodeURIComponent(selected)))
|
||||
);
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user