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

lots of php proofreading and html tab tidying up

Browse Source
This commit is contained in:
Matt
2026-04-19 18:13:34 -07:00
parent 46d9f86d55
commit 8437fa6d9c
25 changed files with 248 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
files/archive/vizz/docker/Dockerfile Normal file
View File

@ -0,0 +1,51 @@
# Base image
FROM php:8.1-apache
# Install system packages
RUN apt-get update && apt-get install -y --no-install-recommends \
# Nginx
#redis-server
nginx \
# Process supervisor
supervisor \
# Others
net-tools \
# Clean up
&& rm -rf /var/lib/apt/lists/*
# Install Node.js LTS 18.x
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
&& apt-get update && apt-get install -y nodejs \
&& rm -rf /var/lib/apt/lists/*
# copy the config file
COPY cosmostat_settings.yaml /app/cosmostat_settings.yaml
# Node on 3000
WORKDIR /usr/src/app
COPY web/node_server/ .
#COPY cosmostat_settings.yaml /usr/src/app/cosmostat_settings.yaml
RUN npm install --only=production
# Apache on 8080
COPY apache_ports.conf /etc/apache2/ports.conf
COPY apache_vhost.conf /etc/apache2/sites-available/000-default.conf
COPY web/html/ /var/www/html/
# nginx on 80
RUN rm -rf /etc/nginx/sites-enabled/default
COPY web/proxy/nginx.conf /etc/nginx/conf.d/default.conf
# Add supervisord configuration
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
# Expose ports
EXPOSE 80
#EXPOSE 6379
# healthcheck looks for apache
HEALTHCHECK CMD netstat -ltn | grep -c ":8080" > /dev/null; if [ 0 != $? ]; then exit 1; fi;
# Start supervisord
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

5
files/archive/vizz/docker/apache_ports.conf Normal file
View File

@ -0,0 +1,5 @@
# Listen on 8080 inside the container
Listen 8080
# If you still want Apache to listen on 80 (rare), add it back:
# Listen 80

14
files/archive/vizz/docker/apache_vhost.conf Normal file
View File

@ -0,0 +1,14 @@
<VirtualHost *:8080>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
# Log files
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# If you need PHP processing
<Directory /var/www/html>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

47
files/archive/vizz/docker/supervisord.conf Normal file
View File

@ -0,0 +1,47 @@
[supervisord]
nodaemon=true
logfile=/dev/stdout
logfile_maxbytes=0
# ------------------------------------------------------------------
# 1. Apache (from the base image)
# ------------------------------------------------------------------
[program:apache2]
command=/usr/sbin/apache2ctl -D FOREGROUND
stdout_logfile=/dev/stdout
stderr_logfile=/dev/stderr
autorestart=true
priority=1
# ------------------------------------------------------------------
# 2. Redis
# ------------------------------------------------------------------
#[program:redis]
#command=/usr/bin/redis-server --daemonize no --protected-mode no
#stdout_logfile=/dev/stdout
#stderr_logfile=/dev/stderr
#autorestart=true
#priority=2
# ------------------------------------------------------------------
# 3. Nginx (will listen on 8080 by default)
# ------------------------------------------------------------------
[program:nginx]
command=/usr/sbin/nginx -g 'daemon off;'
stdout_logfile=/dev/stdout
stderr_logfile=/dev/stderr
autorestart=true
priority=3
# ------------------------------------------------------------------
# 4. Node.js
# ------------------------------------------------------------------
# NOTE: Adjust the command/path to match your app
[program:node]
command=sh -c "npm install && node server.js"
#command=npm start
directory=/usr/src/app
stdout_logfile=/dev/stdout
stderr_logfile=/dev/stderr
autorestart=true
priority=4

384
files/archive/vizz/docker/web/html/index.php Normal file
View File

@ -0,0 +1,384 @@
<?php
declare(strict_types=1);
/* ---------- 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);
/* ---------- Shared values ---------- */
$apiBindIp = "10.200.27.20";
//trim($settings['api_bind_ip'] ?? '', "\"'");
$customApiPort = "5000";
//trim($settings['custom_api_port'] ?? '', "\"'");
/* ---------- Page mode handling ---------- */
$mode = $_GET['mode'] ?? 'cosmostat'; // default mode
$validModes = ['cosmostat', 'gali', 'drive_health']; // extend as needed
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' => '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 [];
}
return $data;
}
/* ---------- Fetch client details ---------- */
$apiInfo = $apiConfig[$mode];
$clients = fetchClientDetails($apiInfo['bind'], $apiInfo['port']);
/* ---------- Handle empty / error ---------- */
if ($clients === []) {
die('<p style="color:red;">Could not retrieve data from the API for mode "' . h($mode) . '".</p>');
}
/* ---------- 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'] ?? '';
}
#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;
$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'): ?>
<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>
<?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;
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>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 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 - <?= 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>
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';
});
</script>
</body>
</html>

145
files/archive/vizz/docker/web/html/src/redis.js Normal file
View File

@ -0,0 +1,145 @@
/* ------------------------------------------------------------
1. Socket-IO connection & helper functions (unchanged)
------------------------------------------------------------ */
const socket = io();
socket.on('host_metrics', renderStatsTable);
socket.on('connect_error', err => {
safeSetText('host_metrics', `Could not connect to server - ${err.message}`);
});
socket.on('reconnect', attempt => {
safeSetText('host_metrics', `Re-connected (attempt ${attempt})`);
});
function safeSetText(id, txt) {
const el = document.getElementById(id);
if (el) el.textContent = txt;
}
/* ------------------------------------------------------------------
2. Table rendering - now orders rows before building the table
------------------------------------------------------------------ */
// helper function for table row ordering
function renderStatsTable(data) {
socket.emit('tableRendered');
renderGenericTable('host_metrics', data, 'No Stats available');
}
function renderGenericTable(containerId, data, emptyMsg) {
const container = document.getElementById(containerId);
if (!Array.isArray(data) || !data.length) {
container.textContent = emptyMsg;
return;
}
/* Merge rows by name (new logic) */
const mergedData = mergeRowsByName(data);
/* Order the merged rows – priority first */
const orderedData = orderRows(mergedData);
/* Build the table from the ordered data */
const table = buildTable(orderedData);
table.id = 'host_metrics_table';
container.innerHTML = '';
container.appendChild(table);
}
/* ------------------------------------------------------------
3. Merge rows by name
------------------------------------------------------------ */
function mergeRowsByName(data) {
const groups = {}; // { source: { ... } }
data.forEach(row => {
const source = row.Source; // <-- changed
if (!source) return;
if (!groups[source]) {
groups[source] = { Metric: [], Data: [] };
}
if ('Metric' in row && 'Data' in row) {
groups[source].Metric.push(row.Metric);
groups[source].Data.push(row.Data);
}
});
const merged = [];
Object.entries(groups).forEach(([source, grp]) => {
merged.push({
Source: source, // <-- keep the original key
Metric: grp.Metric,
Data: grp.Data,
Property: grp.Property,
Value: grp.Value
});
});
return merged;
}
// 3b. Order rows – put “System”, “CPU”, “RAM” first
function orderRows(rows) {
// Priority list – can be updated later
const priority = ['System', 'CPU', 'RAM'];
// Map source → priority index
const priorityMap = {};
priority.forEach((src, idx) => {
priorityMap[src] = idx;
});
// Stable sort: keep original position if priorities are equal
return [...rows].sort((a, b) => {
const aIdx = priorityMap.hasOwnProperty(a.Source)
? priorityMap[a.Source]
: Infinity; // anything not in priority goes to the end
const bIdx = priorityMap.hasOwnProperty(b.Source)
? priorityMap[b.Source]
: Infinity;
// If both have the same priority (or both Infinity), keep original order
return aIdx - bIdx;
});
}
/* ------------------------------------------------------------
4. Build an HTML table from an array of objects
------------------------------------------------------------ */
function buildTable(data) {
const cols = ['Source', 'Metric', 'Data']; // explicit order
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();
data.forEach(item => {
const tr = tbody.insertRow();
cols.forEach(col => {
const td = tr.insertCell();
const val = item[col];
if (Array.isArray(val)) {
// Create a <span> for each item
val.forEach((v, idx) => {
td.id = 'host_metrics_column';
const span = document.createElement('span');
span.textContent = v;
td.appendChild(span);
// Insert a line break after every item except the last
if (idx < val.length - 1) td.appendChild(document.createElement('br'));
});
} else {
td.textContent = val !== undefined ? val : '';
}
});
});
return table;
}

257
files/archive/vizz/docker/web/html/src/styles.css Normal file
View File

@ -0,0 +1,257 @@
/* -------------------------------------------------
1. Global settings & color palette
------------------------------------------------- */
:root {
/* Dark theme - body & card backgrounds */
--bg-body: #2c3e50; /* main page background */
--bg-card: #34495e; /* card / panel background */
--bg-sidebar: #3d566e; /* sidebar background (slightly lighter) */
/* Accent / link colour */
--clr-accent: #3498db; /* blue accent for links */
/* Text colour */
--clr-text: #ecf0f1; /* light whiteish text */
/* Borders / accents */
--clr-border: #1f2b38; /* dark border colour */
}
* { box-sizing: border-box; }
/* Body */
body {
margin: 0;
padding: 0;
background: var(--bg-body);
color: var(--clr-text);
font-family: Arial, Helvetica, sans-serif;
}
/* Links */
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* -------------------------------------------------
2. Layout - wrapper, sidebar, main
------------------------------------------------- */
.wrapper { display: flex; }
.sidebar {
position: fixed; /* keep sidebar visible during scroll */
top: 0; /* stick to the top of the viewport */
left: 0; /* align to the left edge */
height: 100vh; /* full viewport height */
/* ---- size & spacing ------------------------------------------- */
width: 200px; /* same as before */
padding: 1rem;
overflow-y: auto; /* allow sidebar content to scroll if needed */
/* ---- look ------------------------------------------------------- */
background: var(--bg-sidebar);
/* optional: keep it above other content */
z-index: 1000;
}
.sidebar h3 { margin: 0 0 .4rem 0; font-size: 1.1rem; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar ol { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: .4rem; }
.sidebar a { color: var(--clr-accent); }
.sidebar a.active { font-weight: bold; }
.main{
flex: 1;
padding: 1rem;
padding-left: 200px; /* space for the fixed sidebar */
/* optional: avoid accidental horizontal overflow */
overflow-x: hidden;
}
/* -------------------------------------------------
3. Card component
------------------------------------------------- */
.card {
max-width: 950px;
margin: 20px auto 1rem auto;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--clr-border);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
/* -------------------------------------------------
4. Tables
------------------------------------------------- */
table, th, td {
border: 2px solid var(--clr-border);
border-collapse: collapse;
}
th, td { padding: 10px; }
/* Alternate row colour for metrics table */
#host_metrics_table tbody tr td:nth-of-type(even) {
background: #3e5c78; /* slight contrast */
}
/* -------------------------------------------------
5. Lists & headings
------------------------------------------------- */
h1, h2, h3, h4 { color: var(--clr-text); margin: 0 0 .4rem 0; }
ul { list-style: none; padding: 0; }
ol { list-style: none; padding: 0; }
li { margin-bottom: 10px; color: var(--clr-text); }
/* System & component lists */
.system-list, .info-list {
list-style: none; padding: 0; margin: 0;
}
.system-list li, .info-list li { margin-bottom: 5px; color: var(--clr-text); }
/* -------------------------------------------------
6. Components grid
------------------------------------------------- */
.components {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.component {
padding: 10px;
border: 1px solid var(--clr-border);
border-radius: 4px;
}
.component h3 { margin: 0 0 5px; }
/* -------------------------------------------------
7. Panel toggles / modal
------------------------------------------------- */
.help-link {
cursor: pointer;
user-select: none;
color: var(--clr-accent);
text-align: right;
}
.help-link:hover { text-decoration: underline; }
#helpText { display: none; }
.componentDetail-link {
cursor: pointer;
user-select: none;
color: var(--clr-accent);
text-align: left;
}
.componentDetail-link:hover { text-decoration: underline; }
#componentDetailText { display: none; }
/* -------------------------------------------------
8. Misc helpers
------------------------------------------------- */
/* Hide numeric markers in metric columns (if any) */
#host_metrics_column td { list-style: none; padding-left: 0; margin-left: 0; }
.host-status {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 6px;
margin-right: 8px;
vertical-align: middle;
background: #808080; /* default – unknown / no timestamp */
transition: background-color 1s linear; /* smooth fade */
}
/* -------------------------------------------------
9. Mobile adjustments
------------------------------------------------- */
@media (max-width: 768px) {
/* 1. Make the whole page a column */
.wrapper {
flex-direction: column;
}
/* 2. Hide the sidebar initially */
.sidebar {
position: relative; /* take it out of the flow */
width: 100%;
max-height: 0; /* collapsed */
overflow: hidden;
transition: max-height 0.3s ease-out;
background: var(--bg-sidebar);
padding: 0; /* remove padding */
}
.sidebar.show {
max-height: 500px; /* enough for all items */
padding: 1rem;
}
/* 3. Move the toggle button into the header */
.mobile-toggle {
display: block;
font-size: 1.5rem;
background: transparent;
border: none;
color: var(--clr-accent);
padding: 0.5rem;
margin-bottom: 0.5rem;
}
/* 4. Main content no left padding */
.main {
padding-left: 0;
padding-right: 1rem;
}
/* 5. Table scroll on small screens */
.card table {
width: 100%;
table-layout: fixed;
}
.card table thead,
.card table tbody,
.card table tr,
.card table td,
.card table th {
display: block;
}
.card table tbody {
overflow-x: auto;
white-space: nowrap;
}
.card table td,
.card table th {
display: inline-block;
vertical-align: top;
width: 30%;
}
/* 6. Adjust the host status dot positioning */
.host-status {
margin-left: 2px;
margin-right: 12px;
}
}
/* Optional: style the drawer indicator */
.sidebar.show::before {
content: "✕ Close";
display: block;
padding: 0.5rem 1rem;
background: var(--bg-sidebar);
color: var(--clr-accent);
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/archive/vizz/docker/web/html/src/system_metrics.js Normal file
View 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)))
);
});
})();

324
files/archive/vizz/docker/web/html/test.php Normal file
View File

@ -0,0 +1,324 @@
<?php
declare(strict_types=1);
/* ---------- Utility functions ---------- */
function h(string $s): string
{
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}
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, "\"'");
$data[$key] = ($value === '') ? null : $value;
}
return $data;
}
/* ---------- Load settings ---------- */
$settingsPath = '/app/cosmostat_settings.yaml';
$settings = loadYaml($settingsPath);
/* ---------- Determine mode ---------- */
$mode = $_GET['mode'] ?? 'cosmostat';
$validModes = ['cosmostat', 'gali', 'drive_health'];
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' => '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 [];
}
$data = json_decode($json, true);
return (is_array($data)) ? $data : [];
}
/* ---------- Fetch client details ---------- */
$apiInfo = $apiConfig[$mode];
$clients = fetchClientDetails($apiInfo['bind'], $apiInfo['port']);
/* ---------- Handle empty / error ---------- */
if ($clients === []) {
die('<p style="color:red;">Could not retrieve data from the API for mode "' . h($mode) . '".</p>');
}
/* ---------- 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'] ?? []; // default: whatever was submitted
if ($mode === 'drive_health') {
if (isset($_GET['action'])) {
switch ($_GET['action']) {
case 'all':
// add every client’s short_id
$selectedHosts = array_column($clients, 'short_id');
break;
case 'none':
$selectedHosts = []; // nothing selected
break;
// 'apply' does nothing extra – the array above already contains the chosen hosts
}
}
}
/* ---------- Determine selected host for other modes ---------- */
$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) {
$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, $selectedId, $selectedIdx, $selectedHosts;
$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>
<?php if ($mode === 'drive_health'): ?>
<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>
<button type="submit" name="action" value="apply">Apply</button>
<button type="submit" name="action" value="all">Select All</button>
<button type="submit" name="action" value="none">Select None</button>
</form>
<?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, $selectedId, $selectedIdx, $selectedHosts;
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;
}
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>';
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>';
}
return;
}
/* ---------- Other modes ---------- */
?>
<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>
<!-- 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>
<!-- 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>
<!-- 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>
<?php endif; ?>
<?php if ($mode == 'gali'): ?>
<h3>Shuttle Gali</h3>
<?php endif; ?>
</div>
<?php
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cosmostat - <?= h($selectedHost) ?> (<?= h($mode) ?>)</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>
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';
});
</script>
</body>
</html>

15
files/archive/vizz/docker/web/node_server/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "redis-table-demo",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"socket.io": "^4.7.2",
"redis": "^4.6.7",
"node-fetch": "^2.6.7",
"js-yaml": "^4.1.0"
}
}

153
files/archive/vizz/docker/web/node_server/server.js Normal file
View File

@ -0,0 +1,153 @@
// server.js
const http = require('http');
const express = require('express');
const { createClient } = require('redis');
const { Server } = require('socket.io');
const fetch = require('node-fetch'); // npm i node-fetch@2
const fs = require('fs');
const yaml = require('js-yaml'); // npm i js-yaml
const path = require('path');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
/* --------------------------------------------------------------------- */
/* ---------- 1. Load the YAML configuration file ---------------------- */
/* --------------------------------------------------------------------- */
let config = {};
try {
const filePath = '/app/cosmostat_settings.yaml';
const file = fs.readFileSync(filePath, 'utf8');
config = yaml.load(file);
} catch (e) {
console.error('Failed to load config.yaml:', e);
process.exit(1);
}
const API_PORT = config.custom_api_port || 5000; // fallback to 5000
const API_HOST = config.api_bind_ip || '192.168.37.1'; // fallback IP
const API_BASE = `http://${API_HOST}:${API_PORT}`;
console.log('API URL:', API_BASE);
/* --------------------------------------------------------------------- */
/* ---------- 2. Socket.io -------------------------------------------- */
/* --------------------------------------------------------------------- */
io.on('connection', async socket => {
console.log('client connected:', socket.id);
/* ------------- send cached client_summary ------------- */
if (clientSummaryCache.last) {
socket.emit('client_summary', clientSummaryCache.last);
console.log('sent cached client_summary to', socket.id);
}
/* ----------------------------------------------------------------- */
/* Call the external API every time a client connects */
/* ----------------------------------------------------------------- */
try {
const resp = await fetch(`${API_BASE}/start_timer`, { method: 'GET' });
const data = await resp.json();
console.log('API responded to connect:', data);
} catch (err) {
console.error('Failed to hit start_timer endpoint:', err);
}
/* ----------------------------------------------------------------- */
/* Listen for tableRendered event from the client */
/* ----------------------------------------------------------------- */
socket.on('tableRendered', async () => {
console.log('Client reported table rendered - starting timer');
try {
const resp = await fetch(`${API_BASE}/start_timer`, { method: 'GET' });
const text = await resp.text();
console.log('Timer endpoint responded:', text);
} catch (err) {
console.error('Failed to hit start_timer:', err);
}
});
});
/* --------------------------------------------------------------------- */
/* ---------- 3. Serve static files ----------------------------------- */
/* --------------------------------------------------------------------- */
app.use(express.static('public'));
/* --------------------------------------------------------------------- */
/* ---------- 4. Redis subscriber ------------------------------------- */
/* --------------------------------------------------------------------- */
const redisClient = createClient({
url: 'redis://192.168.37.1:6379',
socket: { keepAlive: 60000, // 60 s TCP keep-alive
reconnectStrategy: attempts => Math.min(attempts * 100, 3000) } // back-off
});
redisClient.on('error', err => console.error('Redis error', err));
/* --- local cache for client_summary -------------------------------- */
const clientSummaryCache = {}; // { last: <payload> }
/* --------------------------------------------------------------------- */
(async () => {
await redisClient.connect();
const sub = redisClient.duplicate();
await sub.connect();
/* --------------------------------------------------------------------- */
/* Helper that re-subscribes to a channel (and re-sends the handler) */
/* --------------------------------------------------------------------- */
async function safeSubscribe(channel, handler) {
try {
await sub.subscribe(channel, handler);
console.log(`Subscribed to ${channel}`);
} catch (e) {
console.error(`Failed to subscribe to ${channel}`, e);
}
}
/* --------------------------------------------------------------------- */
/* Subscribe to all required channels */
/* --------------------------------------------------------------------- */
await safeSubscribe('host_metrics', (msg) => forward('host_metrics', msg));
await safeSubscribe('client_summary', (msg) => forward('client_summary', msg));
/* --------------------------------------------------------------------- */
/* Forward messages to Socket.io */
/* --------------------------------------------------------------------- */
function forward(channel, message) {
try {
const payload = JSON.parse(message);
/* ----- update cache on client_summary ----- */
if (channel === 'client_summary') {
clientSummaryCache.last = payload;
}
io.emit(channel, payload);
} catch (e) {
console.error(`Failed to parse message from ${channel}`, e);
}
}
/* --------------------------------------------------------------------- */
/* Re-subscribe automatically when the Redis connection reconnects */
/* --------------------------------------------------------------------- */
sub.on('reconnecting', () => console.log('Redis reconnecting…'));
sub.on('ready', async () => {
console.log('Redis ready - re-subscribing to all channels');
await safeSubscribe('host_metrics', (msg) => forward('host_metrics', msg));
await safeSubscribe('client_summary', (msg) => forward('client_summary', msg));
});
/* Optional: if the connection ends for any reason, close the process */
sub.on('end', () => {
console.error('Redis connection closed - exiting');
process.exit(1);
});
})();
/* --------------------------------------------------------------------- */
/* ---------- 5. Start the HTTP server --------------------------------- */
/* --------------------------------------------------------------------- */
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server listening on http://localhost:${PORT}`);
});

63
files/archive/vizz/docker/web/proxy/nginx.conf Normal file
View File

@ -0,0 +1,63 @@
# nginx.conf
# This file will be mounted into /etc/nginx/conf.d/default.conf inside the container
# Enable proxy buffers (optional but recommended)
proxy_buffering on;
proxy_buffers 16 16k;
proxy_buffer_size 32k;
server {
listen 80;
server_name localhost;
# ---------------------------------------
# API Endpoints
# ---------------------------------------
location = /descriptor {
proxy_pass http://192.168.37.1:5000/descriptor;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location = /update_client {
proxy_pass http://192.168.37.1:5000/update_client;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location = /create_client {
proxy_pass http://192.168.37.1:5000/create_client;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# ---------------------------------------
# WebSocket endpoint
# ---------------------------------------
location /socket.io/ {
proxy_pass http://0.0.0.0:3000/socket.io/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# ---------------------------------------
# All other paths → Apache (PHP)
# ---------------------------------------
location / {
proxy_pass http://0.0.0.0:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}