tegwick
90c5ea50f7
T4: workstreams.md and dependencies.md now call /state/deps instead of the
full /state/summary — removes 2 heavy 10-table queries per 60 s cycle.
T5: index.md's 4 independent polling loops (summaryState, sbomSnapState,
regsState, wsChartState) consolidated into a single pageState generator
with one Promise.all batch and a shared backoff counter.
T6: config.js gains waitForVisible(ms) — pauses polling entirely while the
tab is hidden and fires immediately on visibilitychange. pollDelay()
simplified (hidden-tab POLL_HIDDEN logic removed). All 16 polling pages
migrated from await sleep(pollDelay(...)) to await waitForVisible(pollDelay(...)).
CUST-WP-0039 complete — all 6 tasks done.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
155 lines
7.8 KiB
Markdown
155 lines
7.8 KiB
Markdown
---
|
|
title: Domains
|
|
---
|
|
|
|
```js
|
|
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
|
|
```
|
|
|
|
```js
|
|
const domainsState = (async function*() {
|
|
let failures = 0;
|
|
while (true) {
|
|
let domains = [], repos = [], ok = false;
|
|
try {
|
|
const [rd, rr] = await Promise.all([
|
|
apiFetch("/domains/?status=all"),
|
|
apiFetch("/repos/"),
|
|
]);
|
|
ok = rd.ok && rr.ok;
|
|
if (ok) {
|
|
[domains, repos] = await Promise.all([rd.json(), rr.json()]);
|
|
}
|
|
} catch {}
|
|
failures = ok ? 0 : failures + 1;
|
|
yield {domains, repos, ok, ts: new Date()};
|
|
await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
|
|
}
|
|
})();
|
|
```
|
|
|
|
```js
|
|
const domains = domainsState.domains ?? [];
|
|
const repos = domainsState.repos ?? [];
|
|
const _ok = domainsState.ok ?? false;
|
|
const _ts = domainsState.ts;
|
|
```
|
|
|
|
# Domains
|
|
|
|
```js
|
|
import {injectTocTop} from "./components/toc-sidebar.js";
|
|
import {withDocHelp} from "./components/doc-overlay.js";
|
|
import {openEntityModal} from "./components/entity-modal.js";
|
|
|
|
// ── Live indicator ─────────────────────────────────────────────────────────────
|
|
const _liveEl = html`<div class="live-indicator">
|
|
<span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
|
|
${_ok
|
|
? `Live · updated ${_ts?.toLocaleTimeString()}`
|
|
: html`<span style="color:red">Offline — run: <code>make api</code></span>`}
|
|
</div>`;
|
|
withDocHelp(_liveEl, "/docs/live-data");
|
|
injectTocTop("live-indicator", _liveEl);
|
|
|
|
const _h1 = document.querySelector("#observablehq-main h1");
|
|
if (_h1) { _h1.style.position = "relative"; withDocHelp(_h1, "/docs/domains"); }
|
|
|
|
// ── KPI row ────────────────────────────────────────────────────────────────────
|
|
const activeDomains = domains.filter(d => d.status === "active");
|
|
const archivedDomains = domains.filter(d => d.status === "archived");
|
|
const newestDomain = [...domains].sort((a, b) => b.created_at?.localeCompare(a.created_at ?? "") ?? 0)[0];
|
|
|
|
display(html`<div class="kpi-row-top">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-value">${domains.length}</div>
|
|
<div class="kpi-card-label">total domains</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-value">${activeDomains.length}</div>
|
|
<div class="kpi-card-label">active</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-value">${repos.length}</div>
|
|
<div class="kpi-card-label">total repos</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-value">${newestDomain?.name ?? "—"}</div>
|
|
<div class="kpi-card-label">newest domain</div>
|
|
</div>
|
|
</div>`);
|
|
```
|
|
|
|
## Domain Cards
|
|
|
|
```js
|
|
// Build repo index by domain_id
|
|
const reposByDomain = {};
|
|
for (const repo of repos) {
|
|
if (!reposByDomain[repo.domain_id]) reposByDomain[repo.domain_id] = [];
|
|
reposByDomain[repo.domain_id].push(repo);
|
|
}
|
|
|
|
if (domains.length === 0) {
|
|
display(html`<p class="dim">No domains found. API may be offline.</p>`);
|
|
} else {
|
|
display(html`<div class="domain-grid">${domains.map(d => {
|
|
const domainRepos = reposByDomain[d.id] ?? [];
|
|
return html`<div class="domain-card domain-status-${d.status} entity-row"
|
|
title="Click to view details">
|
|
<div class="domain-card-header">
|
|
<span class="domain-slug">${d.slug}</span>
|
|
<span class="domain-status-badge domain-status-badge-${d.status}">${d.status}</span>
|
|
</div>
|
|
<div class="domain-name">${d.name}</div>
|
|
${d.description ? html`<div class="domain-desc">${d.description.slice(0, 160)}${d.description.length > 160 ? " …" : ""}</div>` : ""}
|
|
<div class="domain-repos">
|
|
${domainRepos.length === 0
|
|
? html`<span class="no-repos">no repos registered</span>`
|
|
: domainRepos.map(r => html`<div class="repo-row">
|
|
<span class="repo-name">${r.name}</span>
|
|
${r.local_path ? html`<code class="repo-path">${r.local_path}</code>` : ""}
|
|
${r.remote_url ? html`<a class="repo-url" href=${r.remote_url} target="_blank">${r.remote_url.replace(/^https?:\/\//, "")}</a>` : ""}
|
|
</div>`)
|
|
}
|
|
</div>
|
|
</div>`;
|
|
})}</div>`);
|
|
}
|
|
```
|
|
|
|
<style>
|
|
/* ── Live indicator ───────────────────────────────────────────────────────── */
|
|
.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }
|
|
|
|
/* ── KPI row ─────────────────────────────────────────────────────────────── */
|
|
.kpi-row-top { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
|
|
.kpi-card { background: var(--theme-background-alt); border: 1px solid var(--theme-foreground-faint, #e0e0e0); border-radius: 10px; padding: 0.75rem 1.25rem; min-width: 120px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
|
.kpi-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
|
|
.kpi-card-label { font-size: 0.72rem; color: var(--theme-foreground-muted, #888); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }
|
|
|
|
/* ── Domain grid ─────────────────────────────────────────────────────────── */
|
|
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
|
.domain-card { border: 1px solid var(--theme-foreground-faint, #e0e0e0); border-radius: 10px; padding: 1rem 1.2rem; background: var(--theme-background-alt); }
|
|
.domain-card.entity-row { cursor: default; }
|
|
.domain-status-archived { opacity: 0.6; }
|
|
.domain-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
|
|
.domain-slug { font-family: monospace; font-size: 0.8rem; color: var(--theme-foreground-muted); background: var(--theme-background); border: 1px solid var(--theme-foreground-faint, #ddd); border-radius: 4px; padding: 0.1rem 0.4rem; }
|
|
.domain-status-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 8px; letter-spacing: 0.04em; }
|
|
.domain-status-badge-active { background: #dcfce7; color: #166534; }
|
|
.domain-status-badge-archived { background: #f1f5f9; color: #64748b; }
|
|
.domain-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; }
|
|
.domain-desc { font-size: 0.82rem; color: var(--theme-foreground-muted); line-height: 1.4; margin-bottom: 0.6rem; }
|
|
|
|
/* ── Repo list ───────────────────────────────────────────────────────────── */
|
|
.domain-repos { border-top: 1px solid var(--theme-foreground-faint, #eee); padding-top: 0.5rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
|
|
.no-repos { font-size: 0.78rem; color: var(--theme-foreground-faint); font-style: italic; }
|
|
.repo-row { display: flex; flex-direction: column; gap: 0.1rem; }
|
|
.repo-name { font-size: 0.85rem; font-weight: 600; }
|
|
.repo-path { font-size: 0.72rem; color: var(--theme-foreground-muted); }
|
|
.repo-url { font-size: 0.72rem; color: var(--theme-foreground-focus); text-decoration: none; }
|
|
.repo-url:hover { text-decoration: underline; }
|
|
|
|
/* ── Utility ─────────────────────────────────────────────────────────────── */
|
|
.dim { color: gray; font-style: italic; }
|
|
</style>
|