cosmostat has working drive health dashboard
This commit is contained in:
@ -1,143 +1,521 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/* ---------- Utility functions ---------- */
|
||||
date_default_timezone_set('America/Los_Angeles');
|
||||
|
||||
# for drive_health page, removal handler
|
||||
$remove_hosts = [];
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
|
||||
if ($_POST['action'] === 'remove') {
|
||||
// The Remove form sends a comma‑separated string of short_id’s
|
||||
if (!empty($_POST['remove_hosts'])) {
|
||||
$remove_hosts = array_filter(
|
||||
explode(',', $_POST['remove_hosts']),
|
||||
fn($s) => $s !== ''
|
||||
);
|
||||
} else {
|
||||
$remove_hosts = [];
|
||||
}
|
||||
if (!empty($remove_hosts)){
|
||||
foreach ($remove_hosts as $host) {
|
||||
echo "remove ".$host."<br>";
|
||||
}
|
||||
removeClient($remove_hosts);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# authelia user handler
|
||||
|
||||
$authelia_user = "not-set";
|
||||
if (isset($_SERVER['HTTP_REMOTE_USER'])) {
|
||||
$authelia_user = $_SERVER['HTTP_REMOTE_USER'];
|
||||
}
|
||||
|
||||
/* ---------- Helper: remove client details ---------- */
|
||||
function removeClient($clientList)
|
||||
{
|
||||
|
||||
$url = "http://0.0.0.0:5001/storage_client_delete";
|
||||
$payload = [
|
||||
'API_KEY' => "deadbeef",
|
||||
'remove_hosts' => $clientList,
|
||||
];
|
||||
$json = json_encode($payload, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
|
||||
if ($json === false) {
|
||||
throw new RuntimeException('JSON encoding failed: ' . json_last_error_msg());
|
||||
}
|
||||
$ch = curl_init($url);
|
||||
if ($ch === false) {
|
||||
throw new RuntimeException('Unable to initialise cURL.');
|
||||
}
|
||||
curl_setopt_array($ch, [
|
||||
CURLOPT_POST => true,
|
||||
CURLOPT_POSTFIELDS => $json,
|
||||
CURLOPT_HTTPHEADER => [
|
||||
'Content-Type: application/json',
|
||||
'Content-Length: ' . strlen($json),
|
||||
'Accept: application/json',
|
||||
],
|
||||
CURLOPT_RETURNTRANSFER=> true,
|
||||
CURLOPT_TIMEOUT => 2,
|
||||
CURLOPT_FOLLOWLOCATION=> true, // follow redirects if any
|
||||
]);
|
||||
// Execute curl request
|
||||
$response = curl_exec($ch);
|
||||
|
||||
|
||||
// cURL error handling
|
||||
if ($response === false) {
|
||||
$error = curl_error($ch);
|
||||
$errno = curl_errno($ch);
|
||||
curl_close($ch);
|
||||
throw new RuntimeException("cURL error ({$errno}): {$error}");
|
||||
}
|
||||
|
||||
// Grab HTTP status code
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
if ($httpCode < 200 || $httpCode >= 300) {
|
||||
throw new RuntimeException("API returned HTTP {$httpCode}: {$response}");
|
||||
}
|
||||
|
||||
// Decode the JSON response
|
||||
$decoded = json_decode($response, true);
|
||||
if ($decoded === null && json_last_error() !== JSON_ERROR_NONE) {
|
||||
throw new RuntimeException('Failed to decode JSON response: ' . json_last_error_msg());
|
||||
}
|
||||
|
||||
return $decoded;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML
|
||||
*/
|
||||
function h(string $s): string
|
||||
{
|
||||
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
|
||||
}
|
||||
|
||||
/**
|
||||
* Load simple key/value pairs from a YAML file.
|
||||
* Lines starting with '#' are ignored.
|
||||
* The function returns an associative array.
|
||||
*/
|
||||
function loadYaml(string $path): array
|
||||
{
|
||||
if (!file_exists($path)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
$data = [];
|
||||
|
||||
foreach ($lines as $line) {
|
||||
$line = trim($line);
|
||||
if ($line === '' || $line[0] === '#') {
|
||||
continue;
|
||||
}
|
||||
$pos = strpos($line, ':');
|
||||
if ($pos === false) {
|
||||
continue;
|
||||
}
|
||||
$key = trim(substr($line, 0, $pos));
|
||||
$value = trim(substr($line, $pos + 1));
|
||||
$value = trim($value, "\"'"); // remove surrounding quotes
|
||||
if ($value === '') {
|
||||
$value = null;
|
||||
}
|
||||
$data[$key] = $value;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
/* ---------- Load settings ---------- */
|
||||
|
||||
$settingsPath = '/app/cosmostat_settings.yaml';
|
||||
$settings = loadYaml($settingsPath);
|
||||
|
||||
|
||||
/* ---------- Page mode handling ---------- */
|
||||
|
||||
$mode = $_GET['mode'] ?? 'cosmostat'; // default mode
|
||||
$validModes = ['cosmostat', 'drive_health']; // extend as needed
|
||||
// 'gali',
|
||||
if (!in_array($mode, $validModes, true)) {
|
||||
$mode = 'cosmostat';
|
||||
}
|
||||
|
||||
|
||||
/* ---------- API configuration per mode ---------- */
|
||||
$apiConfig = [
|
||||
'cosmostat' => ['bind' => '10.200.27.20', 'port' => '5000'],
|
||||
/*'gali' => ['bind' => '10.200.27.20', 'port' => '5000'], // same as cosmostat*/
|
||||
'drive_health' => ['bind' => '0.0.0.0', 'port' => '5001'], // new API
|
||||
];
|
||||
|
||||
/* ---------- Helper: fetch client details ---------- */
|
||||
function fetchClientDetails(string $bindIp, string $port, string $path = '/client_details'): array
|
||||
{
|
||||
$url = "http://{$bindIp}:{$port}{$path}";
|
||||
$ctx = stream_context_create([
|
||||
'http' => [
|
||||
'timeout' => 2,
|
||||
'header' => "User-Agent: PHP/" . PHP_VERSION . "\r\n"
|
||||
]
|
||||
]);
|
||||
$json = @file_get_contents($url, false, $ctx);
|
||||
if ($json === false) {
|
||||
return []; // caller will handle empty case
|
||||
}
|
||||
$data = json_decode($json, true);
|
||||
if (!is_array($data)) {
|
||||
return ['fail'];
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
/* ---------- Fetch client details ---------- */
|
||||
$apiInfo = $apiConfig[$mode];
|
||||
$clients = fetchClientDetails($apiInfo['bind'], $apiInfo['port']);
|
||||
|
||||
/* ---------- Ensure each client has a short_id ---------- */
|
||||
foreach ($clients as &$client) {
|
||||
if (!isset($client['short_id'])) {
|
||||
$client['short_id'] = substr($client['uuid'] ?? '', 0, 8);
|
||||
}
|
||||
}
|
||||
unset($client);
|
||||
|
||||
|
||||
/* ---------- Determine selected hosts (Drive Health only) ---------- */
|
||||
$selectedHosts = $_GET['hosts'] ?? [];
|
||||
|
||||
if ($mode === 'drive_health') {
|
||||
if (isset($_GET['action'])) {
|
||||
switch ($_GET['action']) {
|
||||
case 'all':
|
||||
$selectedHosts = array_column($clients, 'short_id');
|
||||
break;
|
||||
case 'none':
|
||||
$selectedHosts = [];
|
||||
break;
|
||||
// 'apply' – nothing to do; $selectedHosts already contains the posted hosts
|
||||
}
|
||||
}
|
||||
}
|
||||
if ($mode === 'drive_health' && empty($selectedHosts) && !isset($_GET['action'])) {
|
||||
$selectedHosts = array_column($clients, 'short_id');
|
||||
}
|
||||
/* ---- Determine selected host ---- */
|
||||
|
||||
$selectedId = $_GET['host'] ?? '';
|
||||
$selectedIdx = null;
|
||||
|
||||
foreach ($clients as $idx => $client) {
|
||||
if (isset($client['short_id']) && $client['short_id'] === $selectedId) {
|
||||
$selectedIdx = $idx;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($selectedIdx === null) {
|
||||
// Default to the first client (if any)
|
||||
$selectedIdx = 0;
|
||||
$selectedId = $clients[$selectedIdx]['short_id'] ?? '';
|
||||
}
|
||||
#global $clients, $client, $properties, $systemProperties, $systemComponents, $selectedHost, $selectedHosts, $selectedId, $selectedIdx;
|
||||
|
||||
$client = $clients[$selectedIdx] ?? null;
|
||||
$properties = $client['client_properties'][0] ?? [];
|
||||
$systemProperties = $properties['system_properties'] ?? [];
|
||||
$systemComponents = $properties['system_components'] ?? [];
|
||||
$selectedHost = $clients[$selectedIdx]['hostname'] ?? 'Unknown';
|
||||
|
||||
|
||||
|
||||
/* ---- ---- */
|
||||
|
||||
/* ---- Sidebar Renderer ---- */
|
||||
|
||||
function renderSidebar(string $mode){
|
||||
global $clients, $client, $properties, $systemProperties, $systemComponents, $selectedHost, $selectedHosts, $selectedId, $selectedIdx, $remove_hosts;
|
||||
|
||||
$modes = [
|
||||
'cosmostat' => 'Cosmostat',
|
||||
/* 'gali' => 'Shuttle Gali',*/
|
||||
'drive_health' => 'Drive Health',
|
||||
];
|
||||
|
||||
?>
|
||||
<nav class="sidebar">
|
||||
<form method="get" id="modeForm">
|
||||
<label for="modeSelect">Mode:</label>
|
||||
<select name="mode" id="modeSelect" onchange="this.form.submit()">
|
||||
<?php foreach ($modes as $key => $label): ?><option value="<?= h($key) ?>" <?= $mode === $key ? 'selected' : '' ?>><?= h($label) ?></option>
|
||||
<?php endforeach; ?></select>
|
||||
</form>
|
||||
<p>
|
||||
|
||||
<?php if ($mode === 'drive_health'): ?>
|
||||
|
||||
<?php
|
||||
if ( !is_array($clients) || empty($clients) ) {
|
||||
// Graceful “no data” handling
|
||||
echo '<p style="margin:1rem 0; font-style:italic;">'
|
||||
. 'No hosts are available to manage at this time.'
|
||||
. '</p>';
|
||||
|
||||
}
|
||||
?>
|
||||
<?php if (is_array($clients) && !empty($clients)): ?>
|
||||
<h3>Hosts</h3>
|
||||
<form method="get" id="driveHealthForm">
|
||||
<input type="hidden" name="mode" value="drive_health">
|
||||
<ul>
|
||||
<?php foreach ($clients as $c): ?>
|
||||
<?php $id = $c['short_id']; ?>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="hosts[]" value="<?= h($id) ?>"
|
||||
<?= in_array($id, $selectedHosts, true) ? 'checked' : '' ?>>
|
||||
<?= h($c['name']) ?>
|
||||
</label>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul><p>
|
||||
<button type="submit" name="action" value="apply">Apply</button><p>
|
||||
<button type="submit" name="action" value="all">Select All</button><br>
|
||||
<button type="submit" name="action" value="none">Select None</button><p>
|
||||
</form>
|
||||
<!-- Remove host button (POST) -->
|
||||
<form method="post" id="removeForm">
|
||||
<input type="hidden" name="mode" value="drive_health">
|
||||
<input type="hidden" name="action" value="remove">
|
||||
<input type="hidden" name="remove_hosts" id="remove_hosts_input" value="">
|
||||
<button type="submit">Remove</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode == 'cosmostat'): ?>
|
||||
|
||||
<input type="hidden" name="host" value="<?= h($selectedId) ?>">
|
||||
<h3>Endpoints</h3>
|
||||
<ol id="endpointList"></ol>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode == 'gali'): ?>
|
||||
|
||||
<h3>Shuttle Gali</h3>
|
||||
<?php endif; ?>
|
||||
<!--
|
||||
<?php if (!empty($remove_hosts)): ?>
|
||||
<h4>Remove Selected:</h4>
|
||||
<ul>
|
||||
<?php foreach ($remove_hosts as $sid): ?>
|
||||
<li><?= h($sid) ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
-->
|
||||
|
||||
</nav>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
/* ---- Main Content Renderer ---- */
|
||||
|
||||
function renderMainContent(string $mode){
|
||||
global $clients, $client, $properties, $systemProperties, $systemComponents, $selectedHost, $selectedHosts, $remove_hosts, $selectedId, $selectedIdx;
|
||||
/* ---------- Handle empty / error ---------- */
|
||||
if ($clients === ['fail']) {
|
||||
die('<div class="card"><p style="color:red;">Could not retrieve data from the API for mode "' . h($mode) . '".</p></div>');
|
||||
}
|
||||
|
||||
if ($mode === 'drive_health') {
|
||||
// If nothing is selected, show a friendly message
|
||||
if (empty($selectedHosts)) {
|
||||
echo '<div class="card"><p>No hosts selected.</p></div>';
|
||||
return;
|
||||
}
|
||||
echo '<div class="storage_client">';
|
||||
foreach ($selectedHosts as $sid) {
|
||||
// Find the client that matches this short_id
|
||||
$c = null;
|
||||
foreach ($clients as $cl) {
|
||||
if ($cl['short_id'] === $sid) {
|
||||
$c = $cl;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($c === null) continue; // safety
|
||||
|
||||
$hostname = $c['name'] ?? 'Unknown';
|
||||
echo '<div class="card">
|
||||
';
|
||||
echo '<h2>Drive Health - ' . h($hostname) . '</h2>
|
||||
<h3>IP: '.h($c['ip']).'<br>
|
||||
Timestamp: '.date('F j, Y g:i a', (int) $c['timestamp']).' </h3>
|
||||
';
|
||||
|
||||
if (isset($c['drives']) && is_array($c['drives']) && count($c['drives']) > 0) {
|
||||
echo '<table id="host_metrics_table">';
|
||||
echo '<thead><tr><th>Drive Letter</th><th>Disk ID</th><th>Health Status</th><th>Model</th><th>Capacity</th><th>Power On Hours</th><th>Host Writes</th><th>Wear Level</th></tr></thead>
|
||||
';
|
||||
echo '<tbody>
|
||||
';
|
||||
foreach ($c['drives'] as $drive) {
|
||||
echo '<tr>
|
||||
';
|
||||
echo '<td>' . h($drive['drive_letter'] ?? '') . '</td>';
|
||||
echo '<td>' . h("".$drive['disk_id'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['health_status'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['model'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['capacity'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['power_on_hours'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['host_writes'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['wear_level'] ?? '') . '</td>';
|
||||
echo '</tr>
|
||||
';
|
||||
}
|
||||
echo '</tbody></table>
|
||||
';
|
||||
} else {
|
||||
echo '<p>No drive data available for this host.</p>';
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
echo '</div>';
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<div class="main">
|
||||
|
||||
<?php if ($mode == 'cosmostat'): ?><!-- Header Card -->
|
||||
<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> <!-- / Header Card -->
|
||||
<!-- Hidden API Card -->
|
||||
<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>
|
||||
This will return the entire JSON descriptor variable.<br>
|
||||
The endpoint agent uses this descriptor to build out its local System Object.<br>
|
||||
The agent then reports back to the Cosmostat Server with all the data found in the descriptor.<br>
|
||||
Full Source Code can be found at its <a target="_blank" rel="noopener noreferrer" href="https://gitea.matt-cloud.com/matt/cosmoserver">Gitea</a> page.
|
||||
</div> <!-- / Header Card -->
|
||||
<!-- summary card -->
|
||||
<div class="card">
|
||||
<?php if (!empty($systemProperties)): ?>
|
||||
<h2>System Properties</h2>
|
||||
<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>
|
||||
<?php endif; ?><br>
|
||||
<div class="componentDetail-link" id="componentDetailToggle">Toggle Component Details</div>
|
||||
</div> <!--/summary card -->
|
||||
|
||||
<!-- hidden detail card -->
|
||||
<div id="componentDetailText" class="card">
|
||||
<?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> <!--/hidden detail card -->
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
<?php if ($mode == 'gali'): ?>
|
||||
|
||||
<h3>Shuttle Gali</h3>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
</div> <!-- /main -->
|
||||
<?php
|
||||
}
|
||||
|
||||
/* ---- Render server dashboard ---- */
|
||||
?>
|
||||
<!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">
|
||||
<meta charset="utf-8">
|
||||
<title>Cosmostat - <?= h($selectedHost) ?></title>
|
||||
<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">
|
||||
<div class="wrapper">
|
||||
<!-- Sidebar -->
|
||||
<?php renderSidebar($mode); ?>
|
||||
<!-- Main content -->
|
||||
<?php renderMainContent($mode); ?>
|
||||
|
||||
<!-- 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');
|
||||
}
|
||||
?>
|
||||
</div> <!-- /wrapper -->
|
||||
|
||||
<?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>
|
||||
<?php if ($mode != 'drive_health'): ?>
|
||||
<!-- cosmostat javascript -->
|
||||
<script src="socket.io/socket.io.js"></script>
|
||||
<script src="src/system_metrics.js"></script>
|
||||
<script>
|
||||
// Toggles for hidden cards
|
||||
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';
|
||||
}
|
||||
help.style.display = help.style.display === 'none' || help.style.display === '' ? 'block' : 'none';
|
||||
});
|
||||
document.getElementById('componentDetailToggle').addEventListener('click', function () {
|
||||
const help = document.getElementById('componentDetailText');
|
||||
help.style.display = help.style.display === 'none' || help.style.display === '' ? 'block' : 'none';
|
||||
});
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode == 'drive_health'): ?>
|
||||
<!-- drive health javascript -->
|
||||
<script>
|
||||
// Removal Handler
|
||||
document.getElementById('removeForm').addEventListener('submit', function (e) {
|
||||
// Grab all checked checkboxes from the Drive‑Health form
|
||||
const checked = document.querySelectorAll('#driveHealthForm input[type="checkbox"][name="hosts[]"]:checked');
|
||||
const ids = Array.from(checked).map(cb => cb.value);
|
||||
|
||||
// Pass the comma‑separated list to the hidden input
|
||||
document.getElementById('remove_hosts_input').value = ids.join(',');
|
||||
});
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,5 @@
|
||||
/* ------------------------------------------------------------
|
||||
1. Socket-IO connection & helper functions (unchanged)
|
||||
1. Socket-IO connection & helper functions
|
||||
------------------------------------------------------------ */
|
||||
const socket = io();
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ a:hover { text-decoration: underline; }
|
||||
/* -------------------------------------------------
|
||||
2. Layout - wrapper, sidebar, main
|
||||
------------------------------------------------- */
|
||||
.wrapper { display: flex; min-height: 100vh; }
|
||||
.wrapper { display: flex; }
|
||||
|
||||
.sidebar {
|
||||
position: fixed; /* keep sidebar visible during scroll */
|
||||
@ -244,3 +244,17 @@ li { margin-bottom: 10px; color: var(--clr-text); }
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* for stacking storage clients */
|
||||
.storage_client{
|
||||
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
padding-left: 200px; /* space for the fixed sidebar */
|
||||
overflow-x: hidden;
|
||||
display: flex; /* make it a flex container */
|
||||
flex-direction: column; /* stack its children (cards) vertically */
|
||||
align-items: center; /* center the cards horizontally */
|
||||
|
||||
}
|
||||
|
||||
|
||||
317
files/docker/web/html/src/system_metrics.js
Normal file
317
files/docker/web/html/src/system_metrics.js
Normal file
@ -0,0 +1,317 @@
|
||||
/* ==============================================================
|
||||
system_metrics.js
|
||||
============================================================== */
|
||||
(() => {
|
||||
/* ==========================================================
|
||||
Socket.IO setup
|
||||
========================================================== */
|
||||
const socket = io({
|
||||
transports: ['websocket', 'polling'],
|
||||
reconnection: true,
|
||||
reconnectionAttempts: Infinity,
|
||||
reconnectionDelay: 3000,
|
||||
reconnectionDelayMax: 60000,
|
||||
timeout: 60000,
|
||||
pingTimeout: 5000,
|
||||
pingInterval: 25000,
|
||||
});
|
||||
/* ==========================================================
|
||||
Color constants
|
||||
========================================================== */
|
||||
const GREEN = [ 39, 174, 96]; // #27ae60
|
||||
const YELLOW = [243, 156, 18]; // #f39c12
|
||||
const RED = [192, 57, 43]; // #c0392b
|
||||
/* ==========================================================
|
||||
Helpers
|
||||
========================================================== */
|
||||
const hostTimestamps = {}; // keyed by short_id
|
||||
const toRgb = (r, g, b) => `rgb(${r},${g},${b})`;
|
||||
const T20 = 20 * 1000;
|
||||
const T40 = 40 * 1000;
|
||||
const T60 = 60 * 1000;
|
||||
function getFreshnessColor(ageMs) {
|
||||
if (ageMs <= T20) {
|
||||
return toRgb(...GREEN);
|
||||
}
|
||||
if (ageMs <= T40) {
|
||||
const t = (ageMs - T20) / (T40 - T20);
|
||||
const r = Math.round(GREEN[0] + t * (YELLOW[0] - GREEN[0]));
|
||||
const g = Math.round(GREEN[1] + t * (YELLOW[1] - GREEN[1]));
|
||||
const b = Math.round(GREEN[2] + t * (YELLOW[2] - GREEN[2]));
|
||||
return toRgb(r, g, b);
|
||||
}
|
||||
if (ageMs <= T60) {
|
||||
const t = (ageMs - T40) / (T60 - T40);
|
||||
const r = Math.round(YELLOW[0] + t * (RED[0] - YELLOW[0]));
|
||||
const g = Math.round(YELLOW[1] + t * (RED[1] - YELLOW[1]));
|
||||
const b = Math.round(YELLOW[2] + t * (RED[2] - YELLOW[2]));
|
||||
return toRgb(r, g, b);
|
||||
}
|
||||
return toRgb(...RED);
|
||||
}
|
||||
function safeSetText(id, txt) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = txt;
|
||||
}
|
||||
/* ==========================================================
|
||||
Get the short_id from the query string
|
||||
========================================================== */
|
||||
function getSelectedId() {
|
||||
return new URLSearchParams(window.location.search).get('host') || '';
|
||||
}
|
||||
/* ==========================================================
|
||||
Sidebar building - uses short_id for status key
|
||||
========================================================== */
|
||||
|
||||
function buildList(systemList) {
|
||||
const ul = document.getElementById('endpointList');
|
||||
|
||||
if (!Array.isArray(systemList)) {
|
||||
ul.innerHTML = ''; // nothing to show
|
||||
return;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────
|
||||
* Sort: servers first, then by IP
|
||||
* ──────────────────────────────────────── */
|
||||
const toInt = ip => {
|
||||
// guard against undefined / empty string
|
||||
if (!ip) return 0;
|
||||
return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
|
||||
};
|
||||
|
||||
const sorted = [...systemList].sort((a, b) => {
|
||||
// a. Servers go before non‑servers
|
||||
const aServer = !!a.is_server;
|
||||
const bServer = !!b.is_server;
|
||||
if (aServer !== bServer) return aServer ? -1 : 1; // true < false
|
||||
|
||||
// b. Same “is_server” status – fall back to IP sorting
|
||||
const aIp = a.active_ip ?? '';
|
||||
const bIp = b.active_ip ?? '';
|
||||
|
||||
if (!aIp) return 1; // push empty IPs to the end
|
||||
if (!bIp) return -1;
|
||||
|
||||
return toInt(aIp) - toInt(bIp);
|
||||
});
|
||||
|
||||
/* ────────────────────────────────────────
|
||||
* Bail if nothing actually changed
|
||||
* ──────────────────────────────────────── */
|
||||
const current = Array.from(ul.children).map(li => li.dataset.id);
|
||||
const newIds = sorted.map(s => s.short_id);
|
||||
if (arraysEqual(current, newIds)) return; // no visual change needed
|
||||
|
||||
/* ────────────────────────────────────────
|
||||
* Build the DOM
|
||||
* ──────────────────────────────────────── */
|
||||
const selected = getSelectedId().toLowerCase();
|
||||
ul.innerHTML = ''; // reset
|
||||
|
||||
sorted.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
|
||||
// • Status dot
|
||||
const status = document.createElement('span');
|
||||
status.className = 'host-status';
|
||||
status.dataset.id = item.short_id;
|
||||
|
||||
// • Link – display hostname, encode short_id in URL
|
||||
const a = document.createElement('a');
|
||||
a.href = '?host=' + encodeURIComponent(item.short_id);
|
||||
a.textContent = item.hostname;
|
||||
a.title = item.active_ip ? `Active IP: ${item.active_ip}` : '';
|
||||
if (item.short_id.toLowerCase() === selected) a.classList.add('active');
|
||||
|
||||
li.appendChild(status);
|
||||
li.appendChild(a);
|
||||
ul.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
Update status colors every second
|
||||
========================================================== */
|
||||
function updateStatusColors() {
|
||||
const nowSec = Date.now() / 1000;
|
||||
Object.entries(hostTimestamps).forEach(([id, ts]) => {
|
||||
const ageMs = (nowSec - ts) * 1000;
|
||||
const color = getFreshnessColor(ageMs);
|
||||
const span = document.querySelector(
|
||||
`.host-status[data-id="${id}"]`
|
||||
);
|
||||
if (span) span.style.backgroundColor = color;
|
||||
});
|
||||
}
|
||||
setInterval(updateStatusColors, 1000);
|
||||
/* ==========================================================
|
||||
Utility helpers
|
||||
========================================================== */
|
||||
function arraysEqual(a, b) {
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
|
||||
return true;
|
||||
}
|
||||
function renderGenericTable(containerId, data, emptyMsg) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!Array.isArray(data) || !data.length) {
|
||||
container.textContent = emptyMsg;
|
||||
return;
|
||||
}
|
||||
const merged = mergeRowsByName(data);
|
||||
const ordered = orderRows(merged);
|
||||
const table = buildTable(ordered);
|
||||
table.id = 'host_metrics_table';
|
||||
container.innerHTML = '';
|
||||
container.appendChild(table);
|
||||
}
|
||||
function mergeRowsByName(rows) {
|
||||
const groups = {}; // { Source: { Metric: [], Data: [] } }
|
||||
rows.forEach(r => {
|
||||
const src = r.Source;
|
||||
if (!src) return;
|
||||
if (!groups[src]) groups[src] = { Metric: [], Data: [] };
|
||||
if ('Metric' in r && 'Data' in r) {
|
||||
groups[src].Metric.push(r.Metric);
|
||||
groups[src].Data.push(r.Data);
|
||||
}
|
||||
});
|
||||
return Object.entries(groups).map(([src, g]) => ({
|
||||
Source: src,
|
||||
Metric: g.Metric,
|
||||
Data: g.Data,
|
||||
}));
|
||||
}
|
||||
function orderRows(rows) {
|
||||
const priority = ['System', 'CPU', 'RAM'];
|
||||
const map = {};
|
||||
priority.forEach((s, i) => map[s] = i);
|
||||
return [...rows].sort((a, b) => {
|
||||
const ai = map.hasOwnProperty(a.Source) ? map[a.Source] : Infinity;
|
||||
const bi = map.hasOwnProperty(b.Source) ? map[b.Source] : Infinity;
|
||||
return ai - bi;
|
||||
});
|
||||
}
|
||||
function buildTable(rows) {
|
||||
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();
|
||||
rows.forEach(item => {
|
||||
const tr = tbody.insertRow();
|
||||
cols.forEach(col => {
|
||||
const td = tr.insertCell();
|
||||
const val = item[col];
|
||||
if (Array.isArray(val)) {
|
||||
val.forEach((v, i) => {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = v;
|
||||
td.appendChild(span);
|
||||
if (i < val.length - 1) td.appendChild(document.createElement('br'));
|
||||
});
|
||||
} else {
|
||||
td.textContent = val !== undefined ? val : '';
|
||||
}
|
||||
});
|
||||
});
|
||||
return table;
|
||||
}
|
||||
/* ==========================================================
|
||||
Handle incoming data
|
||||
========================================================== */
|
||||
let lastUpdate = Date.now();
|
||||
function handleSummary(raw) {
|
||||
lastUpdate = Date.now(); // reset watchdog
|
||||
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;
|
||||
}
|
||||
// Build the list first (so <span> elements exist)
|
||||
buildList(payload);
|
||||
// Store the timestamp for every short_id
|
||||
payload.forEach(hostObj => {
|
||||
if (hostObj.short_id && hostObj.data_timestamp) {
|
||||
hostTimestamps[hostObj.short_id] = hostObj.data_timestamp; // seconds
|
||||
}
|
||||
});
|
||||
// Immediately update colors for the current view
|
||||
updateStatusColors();
|
||||
// Metric table for selected host
|
||||
const selectedId = getSelectedId();
|
||||
const hostObj = payload.find(h => h.short_id === selectedId) || payload[0];
|
||||
const hostData = hostObj && Array.isArray(hostObj.redis_data)
|
||||
? hostObj.redis_data
|
||||
: [];
|
||||
renderGenericTable('host_metrics', hostData, 'No Stats available');
|
||||
}
|
||||
/* ==========================================================
|
||||
Socket event wiring
|
||||
========================================================== */
|
||||
socket.on('client_summary', handleSummary);
|
||||
socket.on('connect', () => {
|
||||
safeSetText('client_summary', 'Connected');
|
||||
requestSummary();
|
||||
});
|
||||
socket.on('disconnect', () => {
|
||||
safeSetText('client_summary', 'Disconnected - retrying...');
|
||||
});
|
||||
socket.on('reconnect', attempt => {
|
||||
safeSetText('client_summary', `Re-connected (attempt ${attempt})`);
|
||||
requestSummary();
|
||||
});
|
||||
/* ==========================================================
|
||||
Request logic
|
||||
========================================================== */
|
||||
function requestSummary() {
|
||||
if (!socket.connected) return; // guard against stale emits
|
||||
socket.emit('get_client_summary'); // server will reply via client_summary
|
||||
}
|
||||
/* ==========================================================
|
||||
Recursive polling
|
||||
========================================================== */
|
||||
let pollTimer = null;
|
||||
function pollLoop() {
|
||||
if (!socket.connected) return;
|
||||
requestSummary();
|
||||
pollTimer = setTimeout(pollLoop, 5000);
|
||||
}
|
||||
socket.on('connect', () => {
|
||||
if (!pollTimer) pollLoop();
|
||||
});
|
||||
/* ==========================================================
|
||||
Watchdog - force reconnect if no data for 15 s
|
||||
========================================================== */
|
||||
function watchdog() {
|
||||
if (Date.now() - lastUpdate > 15000 && socket.connected) {
|
||||
safeSetText('client_summary', 'No updates - reconnecting...');
|
||||
socket.disconnect(); // forces a reconnect cycle
|
||||
}
|
||||
setTimeout(watchdog, 5000);
|
||||
}
|
||||
watchdog();
|
||||
/* ==========================================================
|
||||
Keep the 'active' link in sync when the URL changes
|
||||
========================================================== */
|
||||
window.addEventListener('popstate', () => {
|
||||
const selected = getSelectedId().toLowerCase();
|
||||
document.querySelectorAll('#endpointList a').forEach(a =>
|
||||
a.classList.toggle('active', a.href.includes('host=' + encodeURIComponent(selected)))
|
||||
);
|
||||
});
|
||||
})();
|
||||
477
files/docker/web/html/test.php
Normal file
477
files/docker/web/html/test.php
Normal file
@ -0,0 +1,477 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
/* ---------- Global constants ---------- */
|
||||
define('API_KEY', 'deadbeef'); // API key used for the Remove button
|
||||
|
||||
/* ---------- Utility functions ---------- */
|
||||
date_default_timezone_set('America/Los_Angeles');
|
||||
/**
|
||||
* Escape HTML
|
||||
*/
|
||||
function h(string $s): string
|
||||
{
|
||||
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
|
||||
}
|
||||
/**
|
||||
* Load simple key/value pairs from a YAML file.
|
||||
* Lines starting with '#' are ignored.
|
||||
* The function returns an associative array.
|
||||
*/
|
||||
function loadYaml(string $path): array
|
||||
{
|
||||
if (!file_exists($path)) {
|
||||
return [];
|
||||
}
|
||||
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
$data = [];
|
||||
foreach ($lines as $line) {
|
||||
$line = trim($line);
|
||||
if ($line === '' || $line[0] === '#') {
|
||||
continue;
|
||||
}
|
||||
$pos = strpos($line, ':');
|
||||
if ($pos === false) {
|
||||
continue;
|
||||
}
|
||||
$key = trim(substr($line, 0, $pos));
|
||||
$value = trim(substr($line, $pos + 1));
|
||||
$value = trim($value, "\"'"); // remove surrounding quotes
|
||||
if ($value === '') {
|
||||
$value = null;
|
||||
}
|
||||
$data[$key] = $value;
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
/* ---------- Load settings ---------- */
|
||||
$settingsPath = '/app/cosmostat_settings.yaml';
|
||||
$settings = loadYaml($settingsPath);
|
||||
|
||||
/* ---------- Page mode handling ---------- */
|
||||
$mode = $_GET['mode'] ?? 'cosmostat'; // default mode
|
||||
$validModes = ['cosmostat', 'drive_health']; // extend as needed
|
||||
if (!in_array($mode, $validModes, true)) {
|
||||
$mode = 'cosmostat';
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Process a POST “remove” request ---------- */
|
||||
/* ---------- Helper: remove client details ---------- */
|
||||
function removeClient($clientList): array
|
||||
{
|
||||
$bindIp = "172.25.1.18";
|
||||
$port = "5001";
|
||||
$path = "/storage_client_delete";
|
||||
// Build the request payload.
|
||||
$payload = [
|
||||
'bind_ip' => $bindIp,
|
||||
'port' => $port,
|
||||
'path' => $path,
|
||||
'API_KEY' => API_KEY,
|
||||
'remove_hosts' => $clientList,
|
||||
];
|
||||
$jsonPayload = json_encode($payload);
|
||||
if ($jsonPayload === false) {
|
||||
// Encoding failed – return a clear error.
|
||||
return [
|
||||
'status' => 'error',
|
||||
'code' => 0,
|
||||
'message' => 'Failed to encode request payload: ' . json_last_error_msg(),
|
||||
];
|
||||
}
|
||||
|
||||
// Prepare the HTTP context for a POST request.
|
||||
$headers = [
|
||||
"Content-Type: application/json",
|
||||
"Content-Length: " . strlen($jsonPayload),
|
||||
"User-Agent: PHP/" . PHP_VERSION,
|
||||
];
|
||||
|
||||
$ctxOptions = [
|
||||
'http' => [
|
||||
'method' => 'POST',
|
||||
'header' => implode("\r\n", $headers),
|
||||
'content' => $jsonPayload,
|
||||
'timeout' => 5,
|
||||
'ignore_errors' => true, // Still receive body for 4xx/5xx
|
||||
]
|
||||
];
|
||||
|
||||
$ctx = stream_context_create($ctxOptions);
|
||||
|
||||
|
||||
$url = "http://172.25.1.18:5001/storage_client_delete";
|
||||
$ctx = stream_context_create([
|
||||
'http' => [
|
||||
'timeout' => 5,
|
||||
'header' => "User-Agent: PHP/" . PHP_VERSION . "\r\n"
|
||||
]
|
||||
]);
|
||||
$json = @file_get_contents($url, false, $ctx);
|
||||
if ($json === false) {
|
||||
return []; // caller will handle empty case
|
||||
}
|
||||
$data = json_decode($json, true);
|
||||
if (!is_array($data)) {
|
||||
return ['fail'];
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
$removedHostsMsg = '';
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$raw = file_get_contents('php://input');
|
||||
$data = json_decode($raw, true);
|
||||
if (json_last_error() === JSON_ERROR_NONE
|
||||
&& isset($data['API_KEY'], $data['remove_hosts'])
|
||||
&& $data['API_KEY'] === API_KEY
|
||||
) {
|
||||
/* ---- For demo purposes we just echo a message. In a real
|
||||
system you would perform the removal logic here. ---- */
|
||||
$removedHostsMsg = '<div class="card"><p>Removed hosts: '
|
||||
. h(implode(', ', $data['remove_hosts']))
|
||||
. '</p></div>';
|
||||
echo "Time to remove ".$data['remove_hosts']."<br";
|
||||
// removeClient($clientList);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- API configuration per mode ---------- */
|
||||
$apiConfig = [
|
||||
'cosmostat' => ['bind' => '10.200.27.20', 'port' => '5000'],
|
||||
'drive_health' => ['bind' => '172.25.1.18', 'port' => '5001'], // new API
|
||||
];
|
||||
|
||||
/* ---------- Helper: fetch client details ---------- */
|
||||
function fetchClientDetails(string $bindIp, string $port, string $path = '/client_details'): array
|
||||
{
|
||||
$url = "http://{$bindIp}:{$port}{$path}";
|
||||
$ctx = stream_context_create([
|
||||
'http' => [
|
||||
'timeout' => 5,
|
||||
'header' => "User-Agent: PHP/" . PHP_VERSION . "\r\n"
|
||||
]
|
||||
]);
|
||||
$json = @file_get_contents($url, false, $ctx);
|
||||
if ($json === false) {
|
||||
return []; // caller will handle empty case
|
||||
}
|
||||
$data = json_decode($json, true);
|
||||
if (!is_array($data)) {
|
||||
return ['fail'];
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
/* ---------- Fetch client details ---------- */
|
||||
$apiInfo = $apiConfig[$mode];
|
||||
$clients = fetchClientDetails($apiInfo['bind'], $apiInfo['port']);
|
||||
|
||||
/* ---------- Ensure each client has a short_id ---------- */
|
||||
foreach ($clients as &$client) {
|
||||
if (!isset($client['short_id'])) {
|
||||
$client['short_id'] = substr($client['uuid'] ?? '', 0, 8);
|
||||
}
|
||||
}
|
||||
unset($client);
|
||||
/* ---------- Determine selected hosts (Drive Health only) ---------- */
|
||||
$selectedHosts = $_GET['hosts'] ?? [];
|
||||
if ($mode === 'drive_health') {
|
||||
if (isset($_GET['action'])) {
|
||||
switch ($_GET['action']) {
|
||||
case 'all':
|
||||
$selectedHosts = array_column($clients, 'short_id');
|
||||
break;
|
||||
case 'none':
|
||||
$selectedHosts = [];
|
||||
break;
|
||||
// 'apply' – nothing to do; $selectedHosts already contains the posted hosts
|
||||
}
|
||||
}
|
||||
}
|
||||
/* ---- Determine selected host ---- */
|
||||
$selectedId = $_GET['host'] ?? '';
|
||||
$selectedIdx = null;
|
||||
foreach ($clients as $idx => $client) {
|
||||
if (isset($client['short_id']) && $client['short_id'] === $selectedId) {
|
||||
$selectedIdx = $idx;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($selectedIdx === null) {
|
||||
// Default to the first client (if any)
|
||||
$selectedIdx = 0;
|
||||
$selectedId = $clients[$selectedIdx]['short_id'] ?? '';
|
||||
}
|
||||
$client = $clients[$selectedIdx] ?? null;
|
||||
$properties = $client['client_properties'][0] ?? [];
|
||||
$systemProperties = $properties['system_properties'] ?? [];
|
||||
$systemComponents = $properties['system_components'] ?? [];
|
||||
$selectedHost = $clients[$selectedIdx]['hostname'] ?? 'Unknown';
|
||||
|
||||
/* ---- ---- */
|
||||
/* ---- Sidebar Renderer ---- */
|
||||
function renderSidebar(string $mode){
|
||||
global $clients, $client, $properties, $systemProperties, $systemComponents, $selectedHost, $selectedHosts, $selectedId, $selectedIdx, $removedHostsMsg;
|
||||
/* Show a removal‑success message if we just processed a POST */
|
||||
if ($removedHostsMsg) {
|
||||
echo $removedHostsMsg;
|
||||
}
|
||||
$modes = [
|
||||
'cosmostat' => 'Cosmostat',
|
||||
'drive_health' => 'Drive Health',
|
||||
];
|
||||
?>
|
||||
<nav class="sidebar">
|
||||
<form method="get" id="modeForm">
|
||||
<label for="modeSelect">Mode:</label>
|
||||
<select name="mode" id="modeSelect" onchange="this.form.submit()">
|
||||
<?php foreach ($modes as $key => $label): ?>
|
||||
<option value="<?= h($key) ?>" <?= $mode === $key ? 'selected' : '' ?>>
|
||||
<?= h($label) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<?php if ($mode === 'drive_health'): ?>
|
||||
<?php
|
||||
if ( !is_array($clients) || empty($clients) ) {
|
||||
echo '<p style="margin:1rem 0; font-style:italic;">'
|
||||
. 'No hosts are available to manage at this time.'
|
||||
. '</p>';
|
||||
}
|
||||
?>
|
||||
<?php if (is_array($clients) && !empty($clients)): ?>
|
||||
<h3>Hosts</h3>
|
||||
<form method="get" id="driveHealthForm">
|
||||
<input type="hidden" name="mode" value="drive_health">
|
||||
<ul>
|
||||
<?php foreach ($clients as $c): ?>
|
||||
<?php $id = $c['short_id']; ?>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="hosts[]" value="<?= h($id) ?>"
|
||||
<?= in_array($id, $selectedHosts, true) ? 'checked' : '' ?>>
|
||||
<?= h($c['name']) ?>
|
||||
</label>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul><p>
|
||||
<button type="submit" name="action" value="apply">Apply</button><p>
|
||||
<button type="submit" name="action" value="all">Select All</button><br>
|
||||
<button type="submit" name="action" value="none">Select None</button><p>
|
||||
</form>
|
||||
|
||||
<!-- Remove button (POST → same page) -->
|
||||
<form id="removeHostsForm" method="post" action="">
|
||||
<!-- API key is added by JS; we keep this form so the button can be inside it -->
|
||||
<button type="button" id="removeButton">Remove Selected Hosts</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode == 'cosmostat'): ?>
|
||||
<input type="hidden" name="host" value="<?= h($selectedId) ?>">
|
||||
<h3>Endpoints</h3>
|
||||
<ol id="endpointList"></ol>
|
||||
<?php endif; ?>
|
||||
<?php if ($mode == 'gali'): ?>
|
||||
<h3>Shuttle Gali</h3>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
<?php
|
||||
}
|
||||
|
||||
/* ---- Main Content Renderer ---- */
|
||||
function renderMainContent(string $mode){
|
||||
global $clients, $client, $properties, $systemProperties, $systemComponents, $selectedHost, $selectedHosts, $selectedId, $selectedIdx;
|
||||
/* ---------- Handle empty / error ---------- */
|
||||
if ($clients === ['fail']) {
|
||||
die('<div class="card"><p style="color:red;">Could not retrieve data from the API for mode "' . h($mode) . '".</p></div>');
|
||||
}
|
||||
if ($mode === 'drive_health') {
|
||||
// If nothing is selected, show a friendly message
|
||||
if (empty($selectedHosts)) {
|
||||
echo '<div class="card"><p>No hosts selected.</p></div>';
|
||||
return;
|
||||
}
|
||||
echo '<div class="storage_client">';
|
||||
foreach ($selectedHosts as $sid) {
|
||||
// Find the client that matches this short_id
|
||||
$c = null;
|
||||
foreach ($clients as $cl) {
|
||||
if ($cl['short_id'] === $sid) {
|
||||
$c = $cl;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($c === null) continue; // safety
|
||||
$hostname = $c['name'] ?? 'Unknown';
|
||||
echo '<div class="card">';
|
||||
echo '<h2>Drive Health - ' . h($hostname) . '</h2>';
|
||||
echo '<h3>IP: ' . h($c['ip']) . '<br>';
|
||||
echo 'Timestamp: ' . date('F j, Y g:i a', (int) $c['timestamp']) . '</h3>';
|
||||
if (isset($c['drives']) && is_array($c['drives']) && count($c['drives']) > 0) {
|
||||
echo '<table id="host_metrics_table">';
|
||||
echo '<thead><tr><th>Drive Letter</th><th>Model</th><th>Capacity</th><th>Power On Hours</th><th>Host Writes</th><th>Wear Level</th></tr></thead>';
|
||||
echo '<tbody>';
|
||||
foreach ($c['drives'] as $drive) {
|
||||
echo '<tr>';
|
||||
echo '<td>' . h($drive['drive_letter'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['model'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['capacity'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['power_on_hours'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['host_writes'] ?? '') . '</td>';
|
||||
echo '<td>' . h($drive['wear_level'] ?? '') . '</td>';
|
||||
echo '</tr>';
|
||||
}
|
||||
echo '</tbody></table>';
|
||||
} else {
|
||||
echo '<p>No drive data available for this host.</p>';
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
echo '</div>';
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<div class="main">
|
||||
<?php if ($mode == 'cosmostat'): ?><!-- Header Card -->
|
||||
<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> <!-- / Header Card -->
|
||||
<!-- Hidden API Card -->
|
||||
<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>
|
||||
This will return the entire JSON descriptor variable.<br>
|
||||
The agent then reports back to the Cosmostat Server with all the data found in the descriptor.<br>
|
||||
Full Source Code can be found at its <a target="_blank" rel="noopener noreferrer" href="https://gitea.matt-cloud.com/matt/cosmoserver">Gitea</a> page.
|
||||
</div> <!-- / Header Card -->
|
||||
<!-- summary card -->
|
||||
<div class="card">
|
||||
<?php if (!empty($systemProperties)): ?>
|
||||
<h2>System Properties</h2>
|
||||
<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>
|
||||
<?php endif; ?><br>
|
||||
<div class="componentDetail-link" id="componentDetailToggle">Toggle Component Details</div>
|
||||
</div> <!--/summary card -->
|
||||
|
||||
<!-- hidden detail card -->
|
||||
<div id="componentDetailText" class="card">
|
||||
<?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> <!--/hidden detail card -->
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($mode == 'gali'): ?>
|
||||
<h3>Shuttle Gali</h3>
|
||||
<?php endif; ?>
|
||||
|
||||
</div> <!-- /main -->
|
||||
<?php
|
||||
}
|
||||
|
||||
/* ---- Render server dashboard ---- */
|
||||
?>
|
||||
<!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 -->
|
||||
<?php renderSidebar($mode); ?>
|
||||
<!-- Main content -->
|
||||
<?php renderMainContent($mode); ?>
|
||||
|
||||
</div> <!-- /wrapper -->
|
||||
<script src="socket.io/socket.io.js"></script>
|
||||
<script src="src/system_metrics.js"></script>
|
||||
<script>
|
||||
/* Help / detail toggles */
|
||||
document.getElementById('helpToggle')?.addEventListener('click', function () {
|
||||
const help = document.getElementById('helpText');
|
||||
help.style.display = help.style.display === 'none' || help.style.display === '' ? 'block' : 'none';
|
||||
});
|
||||
document.getElementById('componentDetailToggle')?.addEventListener('click', function () {
|
||||
const help = document.getElementById('componentDetailText');
|
||||
help.style.display = help.style.display === 'none' || help.style.display === '' ? 'block' : 'none';
|
||||
});
|
||||
|
||||
/* --- Remove button logic --- */
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const removeBtn = document.getElementById('removeButton');
|
||||
if (!removeBtn) return; // not in drive_health mode
|
||||
|
||||
removeBtn.addEventListener('click', function () {
|
||||
// Grab all checked hosts from the drive‑health form
|
||||
const checked = document.querySelectorAll('input[name="hosts[]"]:checked');
|
||||
const hosts = Array.from(checked).map(cb => cb.value);
|
||||
|
||||
if (hosts.length === 0) {
|
||||
alert('No hosts selected.');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
API_KEY: '<?= API_KEY ?>',
|
||||
remove_hosts: hosts
|
||||
};
|
||||
|
||||
fetch('', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(resp => {
|
||||
if (!resp.ok) throw new Error('Network error');
|
||||
return resp.text(); // we just reload on any response
|
||||
})
|
||||
.then(() => {
|
||||
// reload the same index page
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
alert('Error removing hosts.');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user