99 lines
3.1 KiB
PHP
99 lines
3.1 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Matt-Cloud Cosmostat</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>
|
|
<div class="card">
|
|
<div id="host_components" class="column">
|
|
|
|
<!-- PHP to render static components -->
|
|
|
|
<?php
|
|
# load API data
|
|
$apiUrl = 'http://192.168.37.1:5000/php_summary';
|
|
$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>
|
|
|
|
</body>
|
|
</html>
|