107 lines
3.7 KiB
PHP
107 lines
3.7 KiB
PHP
<?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 200 px 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 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://<?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>
|