aboutsummaryrefslogtreecommitdiff
path: root/src/zenserver/frontend/html/compute/orchestrator.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/zenserver/frontend/html/compute/orchestrator.html')
-rw-r--r--src/zenserver/frontend/html/compute/orchestrator.html205
1 files changed, 24 insertions, 181 deletions
diff --git a/src/zenserver/frontend/html/compute/orchestrator.html b/src/zenserver/frontend/html/compute/orchestrator.html
index 2ee57b6b3..a519dee18 100644
--- a/src/zenserver/frontend/html/compute/orchestrator.html
+++ b/src/zenserver/frontend/html/compute/orchestrator.html
@@ -3,47 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="banner.js" defer></script>
- <script src="nav.js" defer></script>
+ <link rel="stylesheet" type="text/css" href="../zen.css" />
+ <script src="../theme.js"></script>
+ <script src="../banner.js" defer></script>
+ <script src="../nav.js" defer></script>
<title>Zen Orchestrator Dashboard</title>
<style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
- background: #0d1117;
- color: #c9d1d9;
- padding: 20px;
- }
-
- .container {
- max-width: 1400px;
- margin: 0 auto;
- }
-
- h1 {
- font-size: 32px;
- font-weight: 600;
- margin-bottom: 10px;
- color: #f0f6fc;
- }
-
- .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 30px;
- }
-
- .timestamp {
- font-size: 12px;
- color: #6e7681;
- }
-
.agent-count {
display: flex;
align-items: center;
@@ -51,144 +16,22 @@
font-size: 14px;
padding: 8px 16px;
border-radius: 6px;
- background: #161b22;
- border: 1px solid #30363d;
+ background: var(--theme_g3);
+ border: 1px solid var(--theme_g2);
}
.agent-count .count {
font-size: 20px;
font-weight: 600;
- color: #f0f6fc;
- }
-
- .card {
- background: #161b22;
- border: 1px solid #30363d;
- border-radius: 6px;
- padding: 20px;
- }
-
- .card-title {
- font-size: 14px;
- font-weight: 600;
- color: #8b949e;
- margin-bottom: 12px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- }
-
- .error {
- color: #f85149;
- padding: 12px;
- background: #1c1c1c;
- border-radius: 6px;
- margin: 20px 0;
- font-size: 13px;
- }
-
- table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
- }
-
- th {
- text-align: left;
- color: #8b949e;
- padding: 8px 12px;
- border-bottom: 1px solid #30363d;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-size: 11px;
- }
-
- td {
- padding: 8px 12px;
- border-bottom: 1px solid #21262d;
- color: #c9d1d9;
- }
-
- tr:last-child td {
- border-bottom: none;
- }
-
- .total-row td {
- border-top: 2px solid #30363d;
- font-weight: 600;
- color: #f0f6fc;
- }
-
- .health-dot {
- display: inline-block;
- width: 10px;
- height: 10px;
- border-radius: 50%;
- }
-
- .health-green {
- background: #3fb950;
- }
-
- .health-yellow {
- background: #d29922;
- }
-
- .health-red {
- background: #f85149;
- }
-
- a {
- color: #58a6ff;
- text-decoration: none;
- }
-
- a:hover {
- text-decoration: underline;
- }
-
- .empty-state {
- color: #6e7681;
- font-size: 13px;
- padding: 20px 0;
- text-align: center;
- }
-
- .history-tabs {
- display: flex;
- gap: 4px;
- background: #0d1117;
- border-radius: 6px;
- padding: 2px;
- }
-
- .history-tab {
- background: transparent;
- border: none;
- color: #8b949e;
- font-size: 12px;
- font-weight: 600;
- padding: 4px 12px;
- border-radius: 4px;
- cursor: pointer;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- }
-
- .history-tab:hover {
- color: #c9d1d9;
- }
-
- .history-tab.active {
- background: #30363d;
- color: #f0f6fc;
+ color: var(--theme_bright);
}
</style>
</head>
<body>
- <div class="container">
- <zen-banner cluster-status="nominal" load="0"></zen-banner>
+ <div class="container" style="max-width: 1400px; margin: 0 auto;">
+ <zen-banner cluster-status="nominal" load="0" logo-src="../favicon.ico"></zen-banner>
<zen-nav>
+ <a href="/dashboard/">Home</a>
<a href="compute.html">Node</a>
<a href="orchestrator.html">Orchestrator</a>
</zen-nav>
@@ -513,8 +356,8 @@
'<td style="text-align: right;">' + actionsPending + '</td>' +
'<td style="text-align: right;">' + actionsRunning + '</td>' +
'<td style="text-align: right;">' + actionsCompleted + '</td>' +
- '<td style="text-align: right; color: #8b949e; font-size: 11px;">' + formatTraffic(bytesRecv, bytesSent) + '</td>' +
- '<td style="text-align: right; color: #8b949e;">' + formatLastSeen(dt) + '</td>';
+ '<td style="text-align: right; font-size: 11px; color: var(--theme_g1);">' + formatTraffic(bytesRecv, bytesSent) + '</td>' +
+ '<td style="text-align: right; color: var(--theme_g1);">' + formatLastSeen(dt) + '</td>';
tbody.appendChild(tr);
}
@@ -527,7 +370,7 @@
totalTr.className = 'total-row';
totalTr.innerHTML =
'<td></td>' +
- '<td style="text-align: right; color: #8b949e; text-transform: uppercase; font-size: 11px;">Total' + (cidr ? ' <span style="font-family: monospace; font-weight: normal;">' + escapeHtml(cidr) + '</span>' : '') + '</td>' +
+ '<td style="text-align: right; color: var(--theme_g1); text-transform: uppercase; font-size: 11px;">Total' + (cidr ? ' <span style="font-family: monospace; font-weight: normal;">' + escapeHtml(cidr) + '</span>' : '') + '</td>' +
'<td style="text-align: right;">' + totalCpus + '</td>' +
'<td></td>' +
'<td style="text-align: right;">' + formatMemory(totalMemUsed, totalMemTotal) + '</td>' +
@@ -560,11 +403,11 @@
}
function eventBadge(type) {
- var colors = { joined: '#3fb950', left: '#f85149', returned: '#d29922' };
+ var colors = { joined: 'var(--theme_ok)', left: 'var(--theme_fail)', returned: 'var(--theme_warn)' };
var labels = { joined: 'Joined', left: 'Left', returned: 'Returned' };
- var color = colors[type] || '#8b949e';
+ var color = colors[type] || 'var(--theme_g1)';
var label = labels[type] || type;
- return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:#0d1117;background:' + color + ';">' + escapeHtml(label) + '</span>';
+ return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:var(--theme_g4);background:' + color + ';">' + escapeHtml(label) + '</span>';
}
function formatTimestamp(ts) {
@@ -613,7 +456,7 @@
var evt = events[i];
var tr = document.createElement('tr');
tr.innerHTML =
- '<td style="color: #8b949e;">' + formatTimestamp(evt.ts) + '</td>' +
+ '<td style="color: var(--theme_g1);">' + formatTimestamp(evt.ts) + '</td>' +
'<td>' + eventBadge(evt.type) + '</td>' +
'<td>' + escapeHtml(evt.worker_id || '') + '</td>' +
'<td>' + escapeHtml(evt.hostname || '') + '</td>';
@@ -652,7 +495,7 @@
var sessionBadge = '';
if (c.session_id) {
- sessionBadge = ' <span style="font-family:monospace;font-size:10px;color:#6e7681;" title="Session ' + escapeHtml(c.session_id) + '">' + escapeHtml(c.session_id.substring(0, 8)) + '</span>';
+ sessionBadge = ' <span style="font-family:monospace;font-size:10px;color:var(--theme_faint);" title="Session ' + escapeHtml(c.session_id) + '">' + escapeHtml(c.session_id.substring(0, 8)) + '</span>';
}
var tr = document.createElement('tr');
@@ -660,18 +503,18 @@
'<td style="text-align: center;"><span class="health-dot ' + hClass + '" title="' + escapeHtml(hTitle) + '"></span></td>' +
'<td>' + escapeHtml(c.id || '') + sessionBadge + '</td>' +
'<td>' + escapeHtml(c.hostname || '') + '</td>' +
- '<td style="font-family: monospace; font-size: 12px; color: #8b949e;">' + escapeHtml(c.address || '') + '</td>' +
- '<td style="text-align: right; color: #8b949e;">' + formatLastSeen(dt) + '</td>';
+ '<td style="font-family: monospace; font-size: 12px; color: var(--theme_g1);">' + escapeHtml(c.address || '') + '</td>' +
+ '<td style="text-align: right; color: var(--theme_g1);">' + formatLastSeen(dt) + '</td>';
tbody.appendChild(tr);
}
}
function clientEventBadge(type) {
- var colors = { connected: '#3fb950', disconnected: '#f85149', updated: '#d29922' };
+ var colors = { connected: 'var(--theme_ok)', disconnected: 'var(--theme_fail)', updated: 'var(--theme_warn)' };
var labels = { connected: 'Connected', disconnected: 'Disconnected', updated: 'Updated' };
- var color = colors[type] || '#8b949e';
+ var color = colors[type] || 'var(--theme_g1)';
var label = labels[type] || type;
- return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:#0d1117;background:' + color + ';">' + escapeHtml(label) + '</span>';
+ return '<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;color:var(--theme_g4);background:' + color + ';">' + escapeHtml(label) + '</span>';
}
function renderClientHistory(events) {
@@ -693,7 +536,7 @@
var evt = events[i];
var tr = document.createElement('tr');
tr.innerHTML =
- '<td style="color: #8b949e;">' + formatTimestamp(evt.ts) + '</td>' +
+ '<td style="color: var(--theme_g1);">' + formatTimestamp(evt.ts) + '</td>' +
'<td>' + clientEventBadge(evt.type) + '</td>' +
'<td>' + escapeHtml(evt.client_id || '') + '</td>' +
'<td>' + escapeHtml(evt.hostname || '') + '</td>';
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-22 14:26:52 +0000