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

web dashboard in single container

Browse Source
This commit is contained in:
Matt
2026-04-05 01:50:41 -07:00
parent a89703c420
commit c6007d9c33
26 changed files with 460 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
files/archive/web/html/index.php Normal file
View File

@ -0,0 +1,143 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cosmostat - <?php echo $_SERVER['SERVER_NAME'] ?></title>
<style>
.components {display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem;}
.component {padding:10px; border:1px solid; border-radius:4px;}
.component h3{margin-top:0; margin-bottom:5px;}
.info-list {list-style:none; padding-left:0;}
.info-list li{margin-bottom:3px;}
.system-list {list-style:none; padding-left:0; margin-top:1em;}
.system-list li{margin-bottom:5px; font-weight:400;}
</style>
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<div class="card">
<h2>Matt-Cloud Cosmostat Dashboard</h2>
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://<?php echo $_SERVER['SERVER_NAME'] ?>/descriptor<br>
</code>
This will return the entire JSON descriptor variable
</div>
<div class="card">
<div id="host_components" class="column">
<!-- PHP to render static components -->
<?php
# load API settings, this requires a simple yaml file
$raw_api_settings = file('/app/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;
# load API data
$apiUrl = 'http://'.$api_bind_ip.':'.$customApiPort.'/php_summary';
echo "<!-- apiUrl - ".$apiUrl." -->";
$context = stream_context_create([
'http' => [
'timeout' => 5, // seconds
'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>');
}
$data = json_decode($json, true);
if ($data === null) {
die('<p style="color:red;">Malformed JSON returned from the API.</p>');
}
function h(string $s): string
{
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}
?>
<?php if (isset($data[0]['system_properties'])): ?>
<h2>System Properties</h2>
<div class="system">
<table>
<tr><td>
<ul class="system-list">
<?php foreach ($data[0]['system_properties'] as $prop): ?>
<li><?= h($prop['Property']); ?></li>
<?php endforeach; ?>
</ul>
</td><td>
<!-- Javascript to render static components -->
<h2>Live System Metrics</h2>
<div id="host_metrics" class="column">Connecting...</div>
</td></tr>
</table>
</div>
<?php endif; ?>
<?php if (isset($data[0]['system_components'])): ?>
<h2>Components</h2>
<div class="components">
<?php foreach ($data[0]['system_components'] 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; ?>
<!-- PHP rendered HTML ends here -->
</div>
</div>
<!-- Socket.IO client library -->
<script src="socket.io/socket.io.js"></script>
<!-- matt-cloud redis script -->
<script src="src/redis.js"></script>
<!-- Toggle the help text when the link is clicked -->
<script>
document.getElementById('helpToggle').addEventListener('click', function () {
const help = document.getElementById('helpText');
if (help.style.display === 'none' || help.style.display === '') {
help.style.display = 'block';
} else {
help.style.display = 'none';
}
});
</script>
</body>
</html>