242 lines
9.8 KiB
JavaScript
242 lines
9.8 KiB
JavaScript
// The homepage front end. It reads status.json and services.json once on load
|
|
// (no auto-refresh, Q41), renders the services for this page's category as
|
|
// sectioned grids of TUI panels, offers the styling toggle (Q27), and shows
|
|
// the last master deployment datetime (Q43). It never alters the user's
|
|
// cursor (Q28).
|
|
|
|
const CATEGORY = window.location.pathname.indexOf('/admin') !== -1 ? 'admin' : 'user';
|
|
|
|
// Sections and panels are shared components: both pages render through the
|
|
// same renderSection()/renderPanel() below. SECTION_ORDER fixes each page's
|
|
// section order; a section with no services renders nothing.
|
|
const SECTION_ORDER = {
|
|
user: ['Web Apps', 'Media Library Apps', 'AI'],
|
|
admin: ['Media Library Apps', 'Observability', 'AI', 'Infrastructure'],
|
|
};
|
|
|
|
const BADGE_LABEL = {
|
|
up: 'UP',
|
|
down: 'DOWN',
|
|
'wip-open': 'WIP: OPEN',
|
|
'wip-closed': 'WIP: CLOSED',
|
|
'wip-down': 'WIP: DOWN',
|
|
};
|
|
|
|
function load(url) {
|
|
return fetch(url, { cache: 'no-store' }).then(function (r) { return r.json(); });
|
|
}
|
|
|
|
function esc(s) {
|
|
return String(s).replace(/[&<>"']/g, function (c) {
|
|
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
|
});
|
|
}
|
|
|
|
// The plain description for ordinary panels. (Model cards render through
|
|
// renderModelInfo below, not through descHTML.)
|
|
function descHTML(svc) {
|
|
const d = svc.details;
|
|
if (d && (d.role || d.spec || d.inputs || d.use)) {
|
|
const lines = [];
|
|
if (d.role) lines.push('<div class="desc-role">' + esc(d.role) + '</div>');
|
|
if (d.spec) lines.push('<div class="desc-spec">' + esc(d.spec) + '</div>');
|
|
if (d.inputs && d.inputs.length) lines.push('<div class="desc-inputs">Inputs: ' + esc(d.inputs.join(' · ')) + '</div>');
|
|
if (d.use) lines.push('<div class="desc-use">Use: ' + esc(d.use) + '</div>');
|
|
return lines.join('');
|
|
}
|
|
return esc(svc.description || '');
|
|
}
|
|
|
|
// The Model Information component: one panel fusing every fleet model card.
|
|
// Each model is an informational sub-card (smaller type, Protoss unit art,
|
|
// unit-coloured flair); the quoted lines are buttons that play the matching
|
|
// StarCraft unit voice from /sfx/. Audio files are sequential: a click plays
|
|
// the whole queue (the Dragoon tagline is two lines spliced).
|
|
let sfxQueue = [];
|
|
let sfxPlaying = false;
|
|
|
|
function playSfx(files, el) {
|
|
sfxQueue = sfxQueue.concat(files);
|
|
if (sfxPlaying) return;
|
|
sfxPlaying = true;
|
|
el.classList.add('mi-speaking');
|
|
const next = function () {
|
|
const f = sfxQueue.shift();
|
|
if (!f) { sfxPlaying = false; el.classList.remove('mi-speaking'); return; }
|
|
const a = new Audio('/sfx/' + f);
|
|
a.volume = 0.5;
|
|
a.onended = next;
|
|
a.onerror = next;
|
|
a.play().then(function () {}, next);
|
|
};
|
|
next();
|
|
}
|
|
|
|
function voiceBtn(text, files) {
|
|
return '<button type="button" class="mi-voice" title="play voice" ' +
|
|
'data-sfx="' + esc(files.join(',')) + '">▶ ' + esc(text) + '</button>';
|
|
}
|
|
|
|
function miCard(svc, state) {
|
|
const m = svc.model;
|
|
const parts = ['<div class="mi-top">' +
|
|
'<img class="mi-art" src="/img/unit-' + esc(m.unit) + '.jpg" alt="' + esc(m.unit) + '">' +
|
|
'<div class="mi-head"><div class="mi-id"><span class="badge ' + state + '">' + BADGE_LABEL[state] + '</span>' +
|
|
'<span class="mi-name">' + esc(svc.name) + '</span></div>' +
|
|
'<div class="mi-role">' + esc(m.role) + '</div>' +
|
|
(m.hf ? '<a class="mi-hf" href="' + esc(m.hf) +
|
|
'" target="_blank" rel="noopener">model on huggingface ↗</a>' : '') +
|
|
'</div></div>',
|
|
voiceBtn(m.tagline, m.sfx)
|
|
];
|
|
if (m.equiv) parts.push('<div class="mi-equiv">' + esc(m.equiv) + '</div>');
|
|
if (m.spec) parts.push('<div class="mi-spec">' + esc(m.spec) + '</div>');
|
|
if (m.inputs && m.inputs.length) parts.push('<div class="mi-inputs">Inputs: ' + esc(m.inputs.join(' · ')) + '</div>');
|
|
if (m.use) parts.push('<div class="mi-use">Use: ' + esc(m.use) + '</div>');
|
|
if (m.compaction) parts.push('<div class="mi-comp">⚡ ' + esc(m.compaction) + '</div>');
|
|
if (m.supervision) parts.push('<div class="mi-super">' + esc(m.supervision) + '</div>');
|
|
if (m.permission) parts.push('<div class="mi-perm" title="' + esc(m.permission) + '">⚠ ' + esc(m.permission) + '</div>');
|
|
if (m.warn) parts.push('<div class="mi-warn">' +
|
|
'⚠ ' + esc(m.warn) + '</div>');
|
|
const card = document.createElement('article');
|
|
card.className = 'mi-card mi-' + esc(m.unit);
|
|
card.innerHTML = parts.join('');
|
|
return card;
|
|
}
|
|
|
|
function renderModelInfo(models) {
|
|
const panel = document.createElement('div');
|
|
panel.className = 'panel model-info';
|
|
const head = document.createElement('div');
|
|
head.className = 'mi-title';
|
|
head.textContent = 'Model Information';
|
|
panel.appendChild(head);
|
|
const grid = document.createElement('div');
|
|
grid.className = 'mi-grid';
|
|
for (const m of models) grid.appendChild(m.el);
|
|
panel.appendChild(grid);
|
|
panel.addEventListener('click', function (ev) {
|
|
const btn = ev.target.closest('.mi-voice');
|
|
if (btn) playSfx(btn.getAttribute('data-sfx').split(','), btn);
|
|
});
|
|
return panel;
|
|
}
|
|
|
|
// Shared panel component: one TUI panel for a service in a given state.
|
|
function renderPanel(svc, state) {
|
|
const panel = document.createElement('div');
|
|
panel.className = 'panel ' + state;
|
|
const links = [];
|
|
if (svc.showLink && svc.url) links.push('<a class="open" href="' + esc(svc.url) + '">open</a>');
|
|
if (svc.docs) links.push('<a class="docs" href="' + esc(svc.docs) + '">docs</a>');
|
|
const art = svc.art ? '<img class="app-art" src="' + esc(svc.art) + '" alt=""' +
|
|
(svc.art_bg ? ' style="background:' + esc(svc.art_bg) + ';border-color:' + esc(svc.art_bg) + '"' : '') + '>' : '';
|
|
const warn = svc.warn
|
|
? '<div class="svc-warn">⚠ ' + esc(svc.warn) + '</div>'
|
|
: '';
|
|
panel.innerHTML =
|
|
'<div class="panel-head">' + art +
|
|
' <span class="badge ' + state + '">' + BADGE_LABEL[state] + '</span>' +
|
|
' <span class="name">' + esc(svc.name) + '</span>' +
|
|
'</div>' +
|
|
'<div class="desc">' + descHTML(svc) + '</div>' + warn +
|
|
'<div class="links">' + links.join('') + '</div>';
|
|
if (svc.showLink && svc.url) {
|
|
panel.classList.add('clickable');
|
|
panel.addEventListener('click', function (ev) {
|
|
if (!ev.target.closest('a')) window.location.href = svc.url;
|
|
});
|
|
}
|
|
return panel;
|
|
}
|
|
|
|
// Shared section component: a heading over a grid of panels.
|
|
function renderSection(title, panels) {
|
|
const section = document.createElement('section');
|
|
section.className = 'section';
|
|
const heading = document.createElement('h2');
|
|
heading.className = 'section-title';
|
|
heading.textContent = title;
|
|
const grid = document.createElement('div');
|
|
grid.className = 'grid';
|
|
for (const panel of panels) grid.appendChild(panel);
|
|
section.appendChild(heading);
|
|
section.appendChild(grid);
|
|
return section;
|
|
}
|
|
|
|
function renderPanels(services, status) {
|
|
const stateByName = {};
|
|
for (const s of (status.services || [])) stateByName[s.name] = s.state;
|
|
|
|
const root = document.getElementById('grid');
|
|
root.innerHTML = '';
|
|
let up = 0, down = 0, wip = 0;
|
|
|
|
const bySection = {};
|
|
const modelsBySection = {};
|
|
for (const svc of services) {
|
|
if (svc.category !== CATEGORY) continue;
|
|
const state = svc.wip ? 'wip-' + svc.wip : (stateByName[svc.name] || 'down');
|
|
if (state === 'up') up++; else if (state === 'down') down++; else wip++;
|
|
if (svc.model) {
|
|
(modelsBySection[svc.section] = modelsBySection[svc.section] || []).push({ svc: svc, el: miCard(svc, state) });
|
|
continue;
|
|
}
|
|
(bySection[svc.section] = bySection[svc.section] || []).push(renderPanel(svc, state));
|
|
}
|
|
|
|
for (const title of SECTION_ORDER[CATEGORY]) {
|
|
const panels = bySection[title] || [];
|
|
if (modelsBySection[title]) panels.push(renderModelInfo(modelsBySection[title]));
|
|
if (panels.length) root.appendChild(renderSection(title, panels));
|
|
}
|
|
|
|
document.getElementById('summary').textContent = 'UP ' + up + ' DOWN ' + down + ' WIP ' + wip;
|
|
}
|
|
|
|
// The styling toggle (Q27): ?bare=1 strips the page to bare, unstyled HTML.
|
|
function applyBare() {
|
|
const bare = new URLSearchParams(window.location.search).get('bare') === '1';
|
|
document.documentElement.setAttribute('data-bare', bare ? '1' : '0');
|
|
const t = document.getElementById('bare-toggle');
|
|
if (t) {
|
|
t.textContent = bare ? 'styled' : 'bare';
|
|
t.href = bare ? '?bare=0' : '?bare=1';
|
|
}
|
|
}
|
|
|
|
// The last master deployment datetime (Q43), baked in at deploy time.
|
|
function fillDeployed() {
|
|
const el = document.getElementById('deployed-at');
|
|
if (el && window.DEPLOYED_AT) el.textContent = window.DEPLOYED_AT;
|
|
}
|
|
|
|
// Show the admin button only to members of the authentik homepage-admins
|
|
// group (the same group the /admin* server gate enforces). The data comes
|
|
// from Caddy's /whoami, which echoes the outpost-injected identity headers.
|
|
function gateAdminLink() {
|
|
const link = document.getElementById('admin-link');
|
|
if (!link) return;
|
|
fetch('/whoami', { headers: { accept: 'application/json' } })
|
|
.then(function (r) { return r.ok ? r.json() : null; })
|
|
.then(function (me) {
|
|
if (me && /homepage-admins/i.test(me.groups || '')) link.hidden = false;
|
|
})
|
|
.catch(function () {});
|
|
}
|
|
|
|
function main() {
|
|
applyBare();
|
|
fillDeployed();
|
|
gateAdminLink();
|
|
|
|
Promise.all([load('services.json'), load('status.json')])
|
|
.then(function (pair) { renderPanels(pair[0], pair[1]); })
|
|
.catch(function (e) {
|
|
document.getElementById('summary').textContent = 'status unavailable: ' + e;
|
|
});
|
|
}
|
|
|
|
main();
|