SchOS/docs/Website/niveus/examples/dashboard/index.html
Nexoniarz a8215149a3 docs/Website: Niveus at upstream f340d56; fonts are binary
The vendored copy of Niveus, the site's design system, brought up to
the current upstream (github.com/Nexoniarz/Niveus, 2026-10-18). The
tree under docs/Website/niveus is upstream's byte for byte.

.gitattributes says `* text eol=lf` and listed the binary types it
knew, and woff2 was not one of them: Niveus's InstrumentSans-Italic
had a CR LF pair in its compressed data, and committing it turned that
into LF and the font into garbage. woff, woff2, otf, ico, gif, webp,
pdf and wasm are binary now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
2026-10-23 15:11:20 +02:00

578 lines
27 KiB
HTML
Vendored

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Northwire Ops — a dashboard built with Niveus</title>
<link rel="stylesheet" href="../../dist/niveus.css">
<script src="../../niveus/niveus.js" defer></script>
<link rel="stylesheet" href="app.css">
<script>
try {
var saved = localStorage.getItem("ops-theme");
if (saved && saved !== "system") document.documentElement.setAttribute("data-theme", saved);
} catch (error) {}
</script>
<style>
:root { --nv-brand: #0d9488; }
</style>
</head>
<body>
<div class="app">
<aside class="nv-nav nv-nav--vertical app__sidebar" aria-label="Sections"
style="--nv-selection-name: nv-ops-sidebar">
<a class="nv-nav__brand" href="#">
<svg class="nv-nav__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M4 18V9M10 18V5M16 18v-6M22 18H2" stroke="currentColor"
stroke-width="1.8" stroke-linecap="round"/>
</svg>
Northwire Ops
</a>
<span class="nv-nav__section">Monitor</span>
<ul class="nv-nav__list" data-nv-travel="local">
<li><a class="nv-nav__item" href="#" aria-current="page">Overview</a></li>
<li><a class="nv-nav__item" href="#">Services <span class="nv-nav__badge">6</span></a></li>
<li><a class="nv-nav__item" href="#">Incidents <span class="nv-nav__badge">1</span></a></li>
<li><a class="nv-nav__item" href="#">Traces</a></li>
</ul>
<span class="nv-nav__section">Manage</span>
<ul class="nv-nav__list">
<li><a class="nv-nav__item" href="#">Deployments</a></li>
<li><a class="nv-nav__item" href="#">On-call</a></li>
<li><span class="nv-nav__item" aria-disabled="true">Cost (soon)</span></li>
</ul>
<span class="nv-nav__spacer"></span>
<div class="nv-bed nv-bed--quiet nv-bed--single" style="padding: var(--nv-space-4)">
<p class="nv-label">Retention</p>
<p class="nv-caption" style="margin-block: var(--nv-space-1) var(--nv-space-3)">
14 of 30 days used.
</p>
<button class="nv-button nv-button--sm nv-button--primary nv-button--block">Upgrade plan</button>
</div>
</aside>
<main class="app__main">
<nav class="nv-nav nv-nav--static" aria-label="Toolbar">
<ol class="nv-breadcrumbs">
<li><a href="#">Northwire</a></li>
<li><a href="#">Platform</a></li>
<li aria-current="page">Overview</li>
</ol>
<span class="nv-nav__spacer"></span>
<button class="nv-button nv-button--sm nv-menu-trigger" popovertarget="range-menu"
style="--nv-anchor: --range">
<span id="range-label">Last 24 hours</span>
<span class="nv-disclosure__chevron" aria-hidden="true"
style="margin-inline-start: var(--nv-space-1)"></span>
</button>
<div class="nv-menu" popover id="range-menu" style="--nv-anchor: --range">
<button class="nv-menu__item" aria-checked="true" data-range="Last 24 hours">Last 24 hours</button>
<button class="nv-menu__item" data-range="Last 7 days">Last 7 days</button>
<button class="nv-menu__item" data-range="Last 30 days">Last 30 days</button>
<hr class="nv-menu__separator">
<button class="nv-menu__item" data-range="Custom range">Custom range…</button>
</div>
<button class="nv-button nv-button--sm nv-button--ghost">Export</button>
<div class="nv-button-group" role="group" aria-label="Appearance">
<button class="nv-button nv-button--sm" data-nv-theme="light" aria-pressed="false">Light</button>
<button class="nv-button nv-button--sm" data-nv-theme="dark" aria-pressed="false">Dark</button>
<button class="nv-button nv-button--sm" data-nv-theme="system" aria-pressed="true">Auto</button>
</div>
</nav>
<div class="app__content">
<div class="page-head">
<div>
<h1 class="nv-heading">Platform overview</h1>
<p class="nv-caption" style="margin-block-start: var(--nv-space-1)">
Six services · updated 40 seconds ago
</p>
</div>
<div class="nv-cluster">
<span class="nv-badge nv-badge--danger"><span class="nv-badge__dot"></span>1 incident open</span>
<button class="nv-button nv-button--sm nv-button--primary" data-nv-dialog="incident">
Review incident
</button>
</div>
</div>
<!-- Stat tiles ------------------------------------------------------ -->
<div class="stats">
<article class="nv-card"><div class="nv-card__body">
<span class="nv-overline">Requests</span>
<span class="stat__value">14.2k</span>
<span class="nv-badge nv-badge--success">+6.1% vs yesterday</span>
</div></article>
<article class="nv-card"><div class="nv-card__body">
<span class="nv-overline">Error rate</span>
<span class="stat__value">0.42%</span>
<span class="nv-badge nv-badge--danger">+0.29 pts</span>
</div></article>
<article class="nv-card"><div class="nv-card__body">
<span class="nv-overline">p95 latency</span>
<span class="stat__value">318 ms</span>
<span class="nv-badge nv-badge--warning">+118%</span>
</div></article>
<article class="nv-card"><div class="nv-card__body">
<span class="nv-overline">Uptime</span>
<span class="stat__value">99.71%</span>
<span class="nv-badge">30-day window</span>
</div></article>
</div>
<!-- Chart ------------------------------------------------------------ -->
<article class="nv-card">
<div class="nv-card__header">
<div>
<h2 class="nv-card__title">p95 latency</h2>
<p class="nv-card__subtitle">Solid: today · dashed: same day last week</p>
</div>
<span class="nv-badge nv-badge--warning">Regression at 14:00</span>
</div>
<div class="nv-card__body">
<svg class="chart" viewBox="0 0 600 200" preserveAspectRatio="none"
role="img" aria-label="p95 latency over 24 hours, rising sharply after 14:00">
<defs>
<linearGradient id="chart-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--nv-color-accent)" stop-opacity="0.28"/>
<stop offset="100%" stop-color="var(--nv-color-accent)" stop-opacity="0"/>
</linearGradient>
</defs>
<g class="chart__grid">
<line x1="0" y1="40" x2="600" y2="40"/>
<line x1="0" y1="90" x2="600" y2="90"/>
<line x1="0" y1="140" x2="600" y2="140"/>
<line x1="0" y1="190" x2="600" y2="190"/>
</g>
<path class="chart__area"
d="M0,150 L60,146 L120,152 L180,143 L240,148 L300,140 L360,132 L420,60 L480,44 L540,52 L600,40 L600,190 L0,190 Z"/>
<polyline class="chart__line"
points="0,150 60,146 120,152 180,143 240,148 300,140 360,132 420,60 480,44 540,52 600,40"/>
<polyline class="chart__line chart__line--compare"
points="0,152 60,149 120,151 180,146 240,150 300,145 360,148 420,143 480,147 540,141 600,145"/>
</svg>
<div class="chart__labels nv-caption">
<span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>now</span>
</div>
</div>
</article>
<!-- Services and activity -------------------------------------------- -->
<div class="split">
<article class="nv-card nv-card--flush">
<div class="nv-card__header" style="padding: var(--nv-space-5)">
<div>
<h2 class="nv-card__title">Services</h2>
<p class="nv-card__subtitle">Health across the platform</p>
</div>
<div class="nv-nav-tabs" role="tablist" data-nv-tabs aria-label="Service view"
style="--nv-selection-name: nv-ops-tabs">
<button class="nv-nav__item" role="tab" id="tab-all"
aria-controls="panel-all" aria-selected="true">All</button>
<button class="nv-nav__item" role="tab" id="tab-attention"
aria-controls="panel-attention" aria-selected="false" tabindex="-1">Needs attention</button>
</div>
</div>
<div class="nv-tab-panel" id="panel-all" role="tabpanel" aria-labelledby="tab-all">
<div class="nv-table-frame">
<table class="nv-table">
<thead>
<tr>
<th scope="col">Service</th>
<th scope="col" class="nv-table__number">Uptime</th>
<th scope="col" class="nv-table__number">p95</th>
<th scope="col" class="nv-table__number">req/min</th>
<th scope="col"><span class="nv-visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--success"><span class="nv-badge__dot"></span>Healthy</span>
Checkout API
</span>
</td>
<td class="nv-table__number">99.98%</td>
<td class="nv-table__number">142 ms</td>
<td class="nv-table__number">2.4k</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-1" style="--nv-anchor: --svc1" aria-label="Options for Checkout API">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-1" style="--nv-anchor: --svc1">
<span class="nv-menu__label">Checkout API</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--warning"><span class="nv-badge__dot"></span>Degraded</span>
Pricing
</span>
</td>
<td class="nv-table__number">99.71%</td>
<td class="nv-table__number">318 ms</td>
<td class="nv-table__number">1.9k</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-2" style="--nv-anchor: --svc2" aria-label="Options for Pricing">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-2" style="--nv-anchor: --svc2">
<span class="nv-menu__label">Pricing</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--success"><span class="nv-badge__dot"></span>Healthy</span>
Identity
</span>
</td>
<td class="nv-table__number">99.99%</td>
<td class="nv-table__number">88 ms</td>
<td class="nv-table__number">6.1k</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-3" style="--nv-anchor: --svc3" aria-label="Options for Identity">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-3" style="--nv-anchor: --svc3">
<span class="nv-menu__label">Identity</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--success"><span class="nv-badge__dot"></span>Healthy</span>
Search
</span>
</td>
<td class="nv-table__number">99.95%</td>
<td class="nv-table__number">204 ms</td>
<td class="nv-table__number">3.3k</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-4" style="--nv-anchor: --svc4" aria-label="Options for Search">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-4" style="--nv-anchor: --svc4">
<span class="nv-menu__label">Search</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--danger"><span class="nv-badge__dot"></span>Failing</span>
Notifications
</span>
</td>
<td class="nv-table__number">97.20%</td>
<td class="nv-table__number">—</td>
<td class="nv-table__number">0</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-5" style="--nv-anchor: --svc5" aria-label="Options for Notifications">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-5" style="--nv-anchor: --svc5">
<span class="nv-menu__label">Notifications</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--success"><span class="nv-badge__dot"></span>Healthy</span>
Reporting
</span>
</td>
<td class="nv-table__number">99.90%</td>
<td class="nv-table__number">512 ms</td>
<td class="nv-table__number">410</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-6" style="--nv-anchor: --svc6" aria-label="Options for Reporting">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-6" style="--nv-anchor: --svc6">
<span class="nv-menu__label">Reporting</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="nv-tab-panel" id="panel-attention" role="tabpanel"
aria-labelledby="tab-attention" hidden>
<div class="nv-table-frame">
<table class="nv-table">
<thead>
<tr>
<th scope="col">Service</th>
<th scope="col" class="nv-table__number">Uptime</th>
<th scope="col" class="nv-table__number">p95</th>
<th scope="col" class="nv-table__number">req/min</th>
<th scope="col"><span class="nv-visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--warning"><span class="nv-badge__dot"></span>Degraded</span>
Pricing
</span>
</td>
<td class="nv-table__number">99.71%</td>
<td class="nv-table__number">318 ms</td>
<td class="nv-table__number">1.9k</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-2" style="--nv-anchor: --svc2" aria-label="Options for Pricing">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-2" style="--nv-anchor: --svc2">
<span class="nv-menu__label">Pricing</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="service-name">
<span class="nv-badge nv-badge--danger"><span class="nv-badge__dot"></span>Failing</span>
Notifications
</span>
</td>
<td class="nv-table__number">97.20%</td>
<td class="nv-table__number">—</td>
<td class="nv-table__number">0</td>
<td class="nv-table__actions">
<button class="nv-button nv-button--ghost nv-button--icon nv-button--sm nv-menu-trigger"
popovertarget="svc-menu-5" style="--nv-anchor: --svc5" aria-label="Options for Notifications">
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
</svg>
</button>
<div class="nv-menu" popover id="svc-menu-5" style="--nv-anchor: --svc5">
<span class="nv-menu__label">Notifications</span>
<button class="nv-menu__item">Open dashboard</button>
<button class="nv-menu__item">View logs<span class="nv-menu__shortcut">L</span></button>
<hr class="nv-menu__separator">
<button class="nv-menu__item nv-menu__item--danger">Restart service</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
<div class="nv-stack">
<article class="nv-card">
<div class="nv-card__header">
<div><h2 class="nv-card__title">Activity</h2></div>
</div>
<div class="nv-card__body" style="padding-block-start: 0">
<ul class="activity nv-caption">
<li>
<span class="activity__mark activity__mark--danger"></span>
<span><strong class="nv-text-primary">Notifications</strong> stopped responding
<span style="display: block">14:12 · alert #881</span></span>
</li>
<li>
<span class="activity__mark activity__mark--warning"></span>
<span><strong class="nv-text-primary">Pricing</strong> p95 crossed 300 ms
<span style="display: block">14:04 · alert #880</span></span>
</li>
<li>
<span class="activity__mark activity__mark--accent"></span>
<span><strong class="nv-text-primary">#4412</strong> deployed to production
<span style="display: block">13:58 · by robin</span></span>
</li>
<li>
<span class="activity__mark activity__mark--success"></span>
<span><strong class="nv-text-primary">Search</strong> recovered
<span style="display: block">09:31 · alert #879</span></span>
</li>
</ul>
</div>
</article>
<div class="nv-disclosure-group">
<details class="nv-disclosure" open>
<summary class="nv-disclosure__summary">
What changed at 14:00?
<span class="nv-disclosure__chevron" aria-hidden="true"></span>
</summary>
<div class="nv-disclosure__body">
One deploy landed in the window: <code class="nv-code">#4412</code>,
which moved tax resolution inside the cart loop.
</div>
</details>
<details class="nv-disclosure">
<summary class="nv-disclosure__summary">
Who is on call?
<span class="nv-disclosure__chevron" aria-hidden="true"></span>
</summary>
<div class="nv-disclosure__body">
Robin Kade until 18:00, then Sam Oyelaran. Escalation goes to
the platform channel after 10 minutes.
</div>
</details>
</div>
</div>
</div>
<footer class="nv-cluster nv-cluster--between" style="padding-block-start: var(--nv-space-6)">
<span class="nv-caption">Northwire Ops — an example interface built with Niveus.</span>
<span class="nv-caption">Made by Nexoniarz</span>
</footer>
</div>
</main>
</div>
<dialog class="nv-dialog" id="incident" aria-labelledby="incident-title">
<div class="nv-dialog__header">
<div>
<h2 class="nv-dialog__title" id="incident-title">Incident #881</h2>
<p class="nv-dialog__description">Notifications stopped responding at 14:12.</p>
</div>
<button class="nv-button nv-button--ghost nv-button--icon nv-dialog__close"
aria-label="Close" data-nv-close>
<svg class="nv-button__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="nv-dialog__body">
<div class="nv-stack nv-stack--tight">
<div class="nv-cluster nv-cluster--tight">
<span class="nv-badge nv-badge--danger nv-badge--solid">Sev 2</span>
<span class="nv-badge">27 minutes open</span>
<span class="nv-badge">Robin Kade</span>
</div>
<p class="nv-body">
The queue consumer exited after the pricing service began timing out,
and did not restart because the health check still reported ready.
</p>
<div class="nv-field">
<label class="nv-field__label" for="note">Add a note</label>
<textarea class="nv-input" id="note" rows="3"
placeholder="What did you find?"></textarea>
</div>
</div>
</div>
<div class="nv-dialog__footer nv-dialog__footer--divided">
<button class="nv-button" data-nv-close>Close</button>
<button class="nv-button nv-button--danger">Page the team</button>
<button class="nv-button nv-button--primary" data-nv-close>Acknowledge</button>
</div>
</dialog>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.addEventListener("nv:theme", (event) => {
try { localStorage.setItem("ops-theme", event.detail.theme); } catch {}
});
nv.syncThemeControls(document.documentElement.getAttribute("data-theme") || "system");
const sidebar = document.querySelector('[data-nv-travel="local"]');
sidebar.addEventListener("click", (event) => {
const item = event.target.closest(".nv-nav__item");
if (!item || item.hasAttribute("aria-current")) return;
event.preventDefault();
nv.transition(() => {
sidebar.querySelectorAll("[aria-current]").forEach((el) => el.removeAttribute("aria-current"));
item.setAttribute("aria-current", "page");
}, { scope: sidebar });
});
document.querySelectorAll("[data-range]").forEach((option) => {
option.addEventListener("click", () => {
document.querySelectorAll("[data-range]").forEach((other) => {
other.setAttribute("aria-checked", String(other === option));
});
document.getElementById("range-label").textContent = option.dataset.range;
document.getElementById("range-menu").hidePopover();
});
});
});
</script>
</body>
</html>