full server dashboard working
This commit is contained in:
161
files/server/server.php
Normal file
161
files/server/server.php
Normal file
@ -0,0 +1,161 @@
|
||||
<?php
|
||||
/* -------------------------------------------------------------
|
||||
* Cosmostat Dashboard - updated to support host‑specific view
|
||||
* -------------------------------------------------------------
|
||||
*/
|
||||
function h(string $s): string
|
||||
{
|
||||
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
|
||||
}
|
||||
|
||||
/* --------------------- 1. Load API data --------------------- */
|
||||
$raw_api_settings = file('/opt/api_settings/cosmostat_settings.yaml',
|
||||
FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
|
||||
$api_settings = [];
|
||||
foreach ($raw_api_settings as $line) {
|
||||
if (isset($line[0]) && $line[0] === '#') { continue; }
|
||||
$pos = strpos($line, ':');
|
||||
if ($pos === false) { continue; }
|
||||
$key = trim(substr($line, 0, $pos));
|
||||
$value = trim(substr($line, $pos + 1));
|
||||
if ($value === '') { $value = null; }
|
||||
$api_settings[$key] = $value;
|
||||
}
|
||||
$api_bind_ip = trim($api_settings['api_bind_ip'] ?? '', "\"'");
|
||||
$customApiPort = trim($api_settings['custom_api_port'] ?? '', "\"'");
|
||||
$apiUrl = "http://$api_bind_ip:$customApiPort/client_details";
|
||||
echo "<!-- ".$apiUrl . " -->";
|
||||
$context = stream_context_create([
|
||||
'http' => [
|
||||
'timeout' => 5,
|
||||
'header' => "User-Agent: PHP/" . PHP_VERSION . "\r\n"
|
||||
]
|
||||
]);
|
||||
|
||||
$json = @file_get_contents($apiUrl, false, $context);
|
||||
if ($json === false) {
|
||||
die('<p style="color:red;">Could not fetch data from the API.</p>');
|
||||
}
|
||||
$clients = json_decode($json, true);
|
||||
if ($clients === null || !is_array($clients)) {
|
||||
die('<p style="color:red;">Malformed JSON returned from the API.</p>');
|
||||
}
|
||||
|
||||
/* --------------------- 2. Resolve selected host ------------- */
|
||||
$selectedHost = $_GET['host'] ?? '';
|
||||
$selectedIdx = null;
|
||||
foreach ($clients as $idx => $client) {
|
||||
if (strtolower($client['hostname']) === strtolower($selectedHost)) {
|
||||
$selectedIdx = $idx;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($selectedIdx === null) {
|
||||
// no match - default to the first host (or none)
|
||||
$selectedIdx = 0;
|
||||
$selectedHost = $clients[$selectedIdx]['hostname'] ?? '';
|
||||
}
|
||||
$client = $clients[$selectedIdx] ?? null;
|
||||
$properties = $client['client_properties'][0] ?? [];
|
||||
$systemProperties = $properties['system_properties'] ?? [];
|
||||
$systemComponents = $properties['system_components'] ?? [];
|
||||
|
||||
?>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Cosmostat - <?= h($selectedHost) ?></title>
|
||||
<link rel="stylesheet" href="src/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar">
|
||||
<h3>Endpoints</h3>
|
||||
<!-- The list will be populated by the JavaScript below -->
|
||||
<ol id="endpointList"></ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="main">
|
||||
|
||||
<div class="card">
|
||||
<h2>Matt-Cloud Cosmostat Dashboard</h2>
|
||||
<p>This dashboard shows the local Matt-Cloud system stats.</p>
|
||||
<div class="help-link" id="helpToggle">API</div>
|
||||
</div>
|
||||
|
||||
<div id="helpText" class="card">
|
||||
<strong>Component Desriptor</strong>
|
||||
<p>To view the component descriptor, you may <br>
|
||||
<code>curl -s https://<?= h($_SERVER['SERVER_NAME']) ?>/descriptor</code></p>
|
||||
<p>This will return the entire JSON descriptor variable</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div id="host_components" class="column">
|
||||
|
||||
<?php if (!empty($systemProperties)): ?>
|
||||
<h2>System Properties</h2>
|
||||
<div class="system">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<ul class="system-list">
|
||||
<?php foreach ($systemProperties as $prop): ?>
|
||||
<li><?= h($prop['Property']) ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Live System Metrics</h2>
|
||||
<div id="host_metrics" class="column">Connecting...</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($systemComponents)): ?>
|
||||
<h2>Components</h2>
|
||||
<div class="components">
|
||||
<?php foreach ($systemComponents as $comp): ?>
|
||||
<div class="component">
|
||||
<h3><?= h($comp['component_name']) ?></h3>
|
||||
<ul class="info-list">
|
||||
<?php foreach ($comp['info_strings'] as $info): ?>
|
||||
<li><?= h($info) ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /main -->
|
||||
|
||||
</div> <!-- /wrapper -->
|
||||
|
||||
<!-- Socket.IO client library -->
|
||||
<script src="socket.io/socket.io.js"></script>
|
||||
<!-- system metrics script -->
|
||||
<script src="src/system_metrics.js"></script>
|
||||
<!-- sidebar script -->
|
||||
<script src="src/sidebar.js"></script>
|
||||
<script>
|
||||
document.getElementById('helpToggle').addEventListener('click', function () {
|
||||
const help = document.getElementById('helpText');
|
||||
help.style.display = help.style.display === 'none' || help.style.display === '' ? 'block' : 'none';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
134
files/server/sidebar.js
Normal file
134
files/server/sidebar.js
Normal file
@ -0,0 +1,134 @@
|
||||
|
||||
// Helper - return the value of the ?host= query‑string
|
||||
function getSelectedHost() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get('host') || '';
|
||||
}
|
||||
|
||||
// Build the endpoints list when we receive data
|
||||
socket.on('client_hostnames', rawMsg => {
|
||||
// rawMsg is the JSON string that redis-cli prints
|
||||
let hosts;
|
||||
try {
|
||||
hosts = JSON.parse(rawMsg);
|
||||
} catch (e) {
|
||||
console.warn('Could not parse client_hostnames message', rawMsg);
|
||||
return;
|
||||
}
|
||||
|
||||
// Sanity‑check
|
||||
if (!Array.isArray(hosts)) { return; }
|
||||
|
||||
const ol = document.getElementById('endpointList');
|
||||
const selected = getSelectedHost().toLowerCase();
|
||||
|
||||
// Clear old list
|
||||
ol.innerHTML = '';
|
||||
|
||||
hosts.forEach(host => {
|
||||
const li = document.createElement('li');
|
||||
const a = document.createElement('a');
|
||||
a.href = '?host=' + encodeURIComponent(host);
|
||||
a.textContent = host;
|
||||
if (host.toLowerCase() === selected) {
|
||||
a.classList.add('active');
|
||||
}
|
||||
li.appendChild(a);
|
||||
ol.appendChild(li);
|
||||
});
|
||||
});
|
||||
|
||||
/* -----------------------------------------------
|
||||
2. (Optional) Re‑build the list if the URL changes
|
||||
----------------------------------------------- */
|
||||
window.addEventListener('popstate', () => {
|
||||
// When the user navigates via back/forward the page
|
||||
// still holds the old list, so we rebuild it.
|
||||
const currentSelected = getSelectedHost().toLowerCase();
|
||||
const anchors = document.querySelectorAll('#endpointList a');
|
||||
anchors.forEach(a => {
|
||||
a.classList.toggle('active', a.textContent.toLowerCase() === currentSelected);
|
||||
});
|
||||
});
|
||||
|
||||
(function () {
|
||||
/* ----------------------------------------------------------
|
||||
Use the socket that system_metrics.js already created.
|
||||
If for some reason it isn’t defined, create a new one.
|
||||
---------------------------------------------------------- */
|
||||
const sock = typeof socket !== 'undefined' ? socket : io();
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Return the hostname that is currently selected in the URL
|
||||
(the value of the “?host=…” query string).
|
||||
---------------------------------------------------------- */
|
||||
function getSelectedHost() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get('host') || '';
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Populate <ul id="endpointList"> with <li><a> items.
|
||||
---------------------------------------------------------- */
|
||||
function buildList(hosts) {
|
||||
const ol = document.getElementById('endpointList');
|
||||
const selected = getSelectedHost().toLowerCase();
|
||||
|
||||
ol.innerHTML = ''; // clear old items
|
||||
|
||||
hosts.forEach(host => {
|
||||
const li = document.createElement('li');
|
||||
const a = document.createElement('a');
|
||||
a.href = '?host=' + encodeURIComponent(host);
|
||||
a.textContent = host;
|
||||
if (host.toLowerCase() === selected) a.classList.add('active');
|
||||
li.appendChild(a);
|
||||
ol.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Listen for the “client_hostnames” event from the server.
|
||||
The payload can be:
|
||||
– a JSON string → parse it
|
||||
– a plain array → use it directly
|
||||
– an object with a .data array (fallback)
|
||||
---------------------------------------------------------- */
|
||||
sock.on('client_hostnames', payload => {
|
||||
let hosts;
|
||||
|
||||
if (typeof payload === 'string') {
|
||||
try {
|
||||
hosts = JSON.parse(payload);
|
||||
} catch (e) {
|
||||
console.warn('client_hostnames message is not JSON:', payload);
|
||||
return;
|
||||
}
|
||||
} else if (Array.isArray(payload)) {
|
||||
hosts = payload;
|
||||
} else if (payload && Array.isArray(payload.data)) {
|
||||
hosts = payload.data;
|
||||
} else {
|
||||
console.warn('client_hostnames payload format unrecognised:', payload);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Array.isArray(hosts)) {
|
||||
console.warn('client_hostnames payload did not resolve to an array:', hosts);
|
||||
return;
|
||||
}
|
||||
|
||||
buildList(hosts);
|
||||
});
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
When the user navigates via the back/forward buttons,
|
||||
re‑apply the “active” class to the correct link.
|
||||
---------------------------------------------------------- */
|
||||
window.addEventListener('popstate', () => {
|
||||
const selected = getSelectedHost().toLowerCase();
|
||||
document.querySelectorAll('#endpointList a').forEach(a => {
|
||||
a.classList.toggle('active', a.textContent.toLowerCase() === selected);
|
||||
});
|
||||
});
|
||||
})();
|
||||
179
files/server/system_metrics.js
Normal file
179
files/server/system_metrics.js
Normal file
@ -0,0 +1,179 @@
|
||||
/* ------------------------------------------------------------
|
||||
1. Socket-IO connection & helper functions (unchanged)
|
||||
------------------------------------------------------------ */
|
||||
const socket = io();
|
||||
|
||||
socket.on('client_summary', renderStatsTable);
|
||||
|
||||
socket.on('connect_error', err => {
|
||||
safeSetText('client_summary', `Could not connect to server - ${err.message}`);
|
||||
});
|
||||
|
||||
socket.on('reconnect', attempt => {
|
||||
safeSetText('client_summary', `Re-connected (attempt ${attempt})`);
|
||||
});
|
||||
|
||||
function safeSetText(id, txt) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = txt;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
2. Render the table for the *selected* host
|
||||
------------------------------------------------------------ */
|
||||
function renderStatsTable(raw) {
|
||||
// Raw may be a string (from Redis) or already parsed by socket.io
|
||||
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;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------
|
||||
2a. Determine the hostname to display
|
||||
--------------------------------------------- */
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const selectedHost = urlParams.get('host');
|
||||
|
||||
/* ---------------------------------------------
|
||||
2b. Find the host object in the payload
|
||||
--------------------------------------------- */
|
||||
const hostObj =
|
||||
payload.find(item => item.hostname === selectedHost) || payload[0];
|
||||
|
||||
/* ---------------------------------------------
|
||||
2c. Extract the Redis data for that host
|
||||
--------------------------------------------- */
|
||||
const hostData = hostObj && Array.isArray(hostObj.redis_data)
|
||||
? hostObj.redis_data
|
||||
: [];
|
||||
|
||||
/* ---------------------------------------------
|
||||
2d. Pass the host-specific data to the generic renderer
|
||||
--------------------------------------------- */
|
||||
renderGenericTable('host_metrics', hostData, 'No Stats available');
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
3. Table rendering - unchanged from original
|
||||
------------------------------------------------------------ */
|
||||
function renderGenericTable(containerId, data, emptyMsg) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!Array.isArray(data) || !data.length) {
|
||||
container.textContent = emptyMsg;
|
||||
return;
|
||||
}
|
||||
|
||||
// Merge rows by source name
|
||||
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);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
4. Merge rows by source name
|
||||
------------------------------------------------------------ */
|
||||
function mergeRowsByName(data) {
|
||||
const groups = {}; // { source: { Metric: [], Data: [] } }
|
||||
data.forEach(row => {
|
||||
const source = row.Source;
|
||||
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,
|
||||
Metric: grp.Metric,
|
||||
Data: grp.Data,
|
||||
});
|
||||
});
|
||||
|
||||
return merged;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
5. Order rows - put “System”, “CPU”, “RAM” first
|
||||
------------------------------------------------------------ */
|
||||
function orderRows(rows) {
|
||||
const priority = ['System', 'CPU', 'RAM'];
|
||||
const priorityMap = {};
|
||||
priority.forEach((src, idx) => {
|
||||
priorityMap[src] = idx;
|
||||
});
|
||||
|
||||
return [...rows].sort((a, b) => {
|
||||
const aIdx = priorityMap.hasOwnProperty(a.Source) ? priorityMap[a.Source] : Infinity;
|
||||
const bIdx = priorityMap.hasOwnProperty(b.Source) ? priorityMap[b.Source] : Infinity;
|
||||
return aIdx - bIdx;
|
||||
});
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
6. Build an HTML table from an array of objects
|
||||
------------------------------------------------------------ */
|
||||
function buildTable(data) {
|
||||
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();
|
||||
data.forEach(item => {
|
||||
const tr = tbody.insertRow();
|
||||
cols.forEach(col => {
|
||||
const td = tr.insertCell();
|
||||
const val = item[col];
|
||||
if (Array.isArray(val)) {
|
||||
val.forEach((v, idx) => {
|
||||
td.id = 'host_metrics_column';
|
||||
const span = document.createElement('span');
|
||||
span.textContent = v;
|
||||
td.appendChild(span);
|
||||
if (idx < val.length - 1) td.appendChild(document.createElement('br'));
|
||||
});
|
||||
} else {
|
||||
td.textContent = val !== undefined ? val : '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return table;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user