full server dashboard working

This commit is contained in:
2026-03-22 18:44:07 -07:00
parent 324eaff135
commit 97fdb3d5d8
19 changed files with 1441 additions and 169 deletions

View File

@ -0,0 +1,107 @@
<?php
/* ------------------------------------------------------------------ */
/* Load the API that returns the list of all clients */
/* ------------------------------------------------------------------ */
# load API settings, this requires a simple yaml file
$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 ($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'], "\"'") ?? null;
$customApiPort = trim($api_settings['custom_api_port'], "\"'") ?? null;
$apiUrl = 'http://'.$api_bind_ip.':'.$customApiPort.'/client_details';
$apiCtx = stream_context_create([
'http' => [
'timeout' => 5,
'header' => "User-Agent: PHP/".PHP_VERSION."\r\n"
]
]);
$apiJson = @file_get_contents($apiUrl, false, $apiCtx);
$clients = json_decode($apiJson, true) ?: [];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cosmostat Server Dashboard</title>
<link rel="stylesheet" href="src/styles.css">
<style>
/* ------------------------------------------------------------------ */
/* Layout tweaks 2 column grid, left column 200px wide */
/* ------------------------------------------------------------------ */
.layout{display:grid;grid-template-columns:200px 1fr;gap:1rem;}
.sidebar{background:#34495e;padding:10px;border-radius:6px;}
.main{background:#34495e;padding:20px;border-radius:6px;}
.host-item{cursor:pointer;color:#bdc3c7;padding:4px 8px;border-radius:4px;}
.host-item:hover{background:#2c3e50;}
.host-item.active{background:#1abc9c;color:#fff;}
/* Preserve existing table styling --------------------------------- */
</style>
</head>
<body>
<div class="card">
<h2>Matt-Cloud Cosmostat Dashboard</h2>
<p>This dashboard shows MattCloud 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://<?php echo $_SERVER['SERVER_NAME']; ?>/descriptor</code>
<p>This will return the entire JSON descriptor variable
</div>
<!-- --------------------------------------------------- -->
<!-- Page layout sidebar + main content -->
<!-- --------------------------------------------------- -->
<div class="layout">
<!-- Left side host list -->
<div class="sidebar">
<h3>Hosts</h3>
<div id="host-list"></div>
</div>
<!-- Right side content -->
<div class="main" id="main-content">
<h2>Loading…</h2>
</div>
</div>
<!-- --------------------------------------------------- -->
<!-- The client list is embedded so JS can build UI -->
<!-- --------------------------------------------------- -->
<script>
/* Expose the whole client list to JS this is the data that
the old PHP template used to render one host. */
const CLIENT_LIST = <?php echo json_encode($clients, JSON_UNESCAPED_SLASHES); ?>;
</script>
<!-- Socket.IO client -->
<script src="socket.io/socket.io.js"></script>
<!-- Custom Redis logic (see below) -->
<script src="src/redis-server.js"></script>
<script>
/* Toggle help panel unchanged from the original */
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>