/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
node-detail.html
278 строк
13 KB
webru
Add Ops narrative patterns, node detail demo, and UI conventions.
14 июн 2026, 14:28
14 июн 2026, 14:28
47b1546
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prisma UI — Node nd-a1f3</title> <script> (function () { try { var t = localStorage.getItem("prisma-ui-theme"); if (t === "light" || t === "dark") document.documentElement.setAttribute("data-theme", t); } catch (e) {} })(); </script> <link rel="stylesheet" href="ops-tokens.css"> <link rel="stylesheet" href="ops-layout.css"> <link rel="stylesheet" href="ops-components.css"> <link rel="stylesheet" href="ops-forms.css"> <link rel="stylesheet" href="ops-datetime.css"> <link rel="stylesheet" href="ops-overlays.css"> <link rel="stylesheet" href="ops-patterns.css"> <link rel="stylesheet" href="ops-data.css"> <link rel="stylesheet" href="ops-menus.css"> </head> <body class="ops-page"> <div class="ops-shell"> <header class="topbar"> <a class="topbar__brand" href="index.html">PRISMA UI</a> <span class="topbar__sep"></span> <span class="topbar__context">Live · Node</span> <span class="topbar__spacer"></span> <div class="topbar__meta"> <span class="topbar__user ops-mono">operator@demo</span> <span class="topbar__role">Admin</span> <button type="button" class="topbar__theme-btn" id="theme-toggle" aria-label="Переключить тему">☀</button> <a class="topbar__logout" href="#">Выход</a> </div> </header> <nav class="ops-rail" aria-label="Основная навигация"> <div class="ops-rail__section"> <div class="ops-rail__label">Просмотр</div> <div class="ops-rail__links"> <a href="index.html" class="ops-rail__link ops-rail__link--primary" data-page="index.html">Live</a> <a href="viewer.html" class="ops-rail__link" data-page="viewer.html">Viewer</a> <a href="node-detail.html" class="ops-rail__link" data-page="node-detail.html">Node</a> </div> </div> <div class="ops-rail__section"> <div class="ops-rail__label">Управление</div> <div class="ops-rail__links"> <a href="settings.html" class="ops-rail__link" data-page="settings.html">Settings</a> <a href="forms.html" class="ops-rail__link" data-page="forms.html">Forms</a> <a href="components.html" class="ops-rail__link" data-page="components.html">Components</a> </div> </div> <div class="ops-rail__section"> <div class="ops-rail__label">Журналы</div> <div class="ops-rail__links"> <a href="events.html" class="ops-rail__link" data-page="events.html">Events</a> </div> </div> </nav> <main class="ops-workspace"> <nav class="ops-breadcrumbs" aria-label="Breadcrumb"> <a class="ops-breadcrumbs__item" href="index.html">Live</a> <span class="ops-breadcrumbs__sep">/</span> <span class="ops-breadcrumbs__item is-current"><span class="ops-mono">nd-a1f3</span></span> </nav> <!-- Object + State + Action --> <div class="ops-entity-head"> <div class="ops-entity-head__main"> <h1 class="ops-entity-head__title">edge-msk-01</h1> <div class="ops-entity-head__id"> <span class="ops-mono">nd-a1f3</span> <button type="button" class="ops-btn ops-btn--icon ops-btn--ghost ops-btn--sm" data-copy-mono="nd-a1f3" title="Копировать ID" aria-label="Копировать ID">⎘</button> </div> <p class="ops-state-hint">Health check passed · uptime <span class="ops-ts">14d 6h</span> · last seen <span class="ops-ts">14.06.2026 09:41:02</span></p> </div> <div class="ops-entity-head__actions"> <span class="ops-state ops-state--ok">Online</span> <button type="button" class="ops-btn ops-btn--sm">Logs</button> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm" id="btn-restart-node">Restart node</button> </div> </div> <!-- Context --> <div class="ops-scope-bar" aria-label="Контекст выборки"> <span class="ops-scope-bar__item">Cluster: <span class="ops-mono">prod-eu</span></span> <span class="ops-scope-bar__sep">·</span> <span class="ops-scope-bar__item">Region: <span class="ops-mono">RU-MOW</span></span> <span class="ops-scope-bar__sep">·</span> <span class="ops-scope-bar__item">Role: <span class="ops-mono">edge</span></span> <span class="ops-scope-bar__sep">·</span> <span class="ops-scope-bar__item">IP: <span class="ops-mono">10.24.1.15</span></span> </div> <div data-ops-tabs> <div class="ops-tabs" role="tablist"> <button type="button" class="ops-tabs__tab is-active" data-tab="overview" role="tab">Overview</button> <button type="button" class="ops-tabs__tab" data-tab="relations" role="tab">Relations</button> <button type="button" class="ops-tabs__tab" data-tab="history" role="tab">History</button> </div> <!-- Overview --> <div class="ops-tabs__panel is-active" data-tab-panel="overview"> <div class="ops-metrics"> <div class="ops-metric"> <div class="ops-metric__label">CPU</div> <div class="ops-metric__value">24%</div> </div> <div class="ops-metric"> <div class="ops-metric__label">Memory</div> <div class="ops-metric__value">61%</div> </div> <div class="ops-metric"> <div class="ops-metric__label">Streams</div> <div class="ops-metric__value">3</div> </div> <div class="ops-metric"> <div class="ops-metric__label">Latency p99</div> <div class="ops-metric__value">38<span style="font-size:0.72rem;color:var(--muted)">ms</span></div> </div> </div> <div class="ops-form-grid ops-form-grid--2" style="margin-top:10px"> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Version</span> <span class="ops-mono">v2.14.3</span> </div> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Agent</span> <span class="ops-mono">prisma-agent 1.8.2</span> </div> </div> </div> <!-- Relations --> <div class="ops-tabs__panel" data-tab-panel="relations"> <div class="ops-grid-table-wrap"> <table class="ops-grid-table"> <colgroup> <col style="width:6rem"> <col> <col style="width:5rem"> <col style="width:5.5rem"> </colgroup> <thead> <tr> <th>Тип</th> <th>ID</th> <th>Статус</th> <th></th> </tr> </thead> <tbody> <tr> <td>Stream</td> <td class="ops-mono"><a href="viewer.html" class="ops-link-mono">str-7a2f</a></td> <td><span class="ops-state ops-state--ok">Live</span></td> <td><button type="button" class="ops-btn ops-btn--ghost ops-btn--sm" data-ops-drawer-open="#drawer-stream">Quick view</button></td> </tr> <tr> <td>Stream</td> <td class="ops-mono"><a href="viewer.html" class="ops-link-mono">str-3b1c</a></td> <td><span class="ops-state ops-state--idle">Idle</span></td> <td><button type="button" class="ops-btn ops-btn--ghost ops-btn--sm" data-ops-drawer-open="#drawer-stream">Quick view</button></td> </tr> <tr> <td>Peer</td> <td class="ops-mono"><a href="node-detail.html" class="ops-link-mono">nd-b7c2</a></td> <td><span class="ops-state ops-state--ok">Online</span></td> <td><a href="node-detail.html" class="ops-btn ops-btn--ghost ops-btn--sm">Open</a></td> </tr> </tbody> </table> </div> </div> <!-- History --> <div class="ops-tabs__panel" data-tab-panel="history"> <ul class="ops-timeline" aria-label="История узла"> <li class="ops-timeline__item"> <span class="ops-timeline__ts ops-ts">14.06.2026 09:41:02</span> <span class="ops-timeline__label">Health check passed all probes</span> <span class="ops-timeline__meta ops-mono">system</span> </li> <li class="ops-timeline__item"> <span class="ops-timeline__ts ops-ts">14.06.2026 09:08:33</span> <span class="ops-timeline__label">Config revision v2.14 applied</span> <span class="ops-timeline__meta ops-mono">operator@demo</span> </li> <li class="ops-timeline__item"> <span class="ops-timeline__ts ops-ts">14.06.2026 08:41:19</span> <span class="ops-timeline__label">Auto-scale policy triggered +1 instance</span> <span class="ops-timeline__meta ops-mono">system</span> </li> <li class="ops-timeline__item"> <span class="ops-timeline__ts ops-ts">13.06.2026 22:15:00</span> <span class="ops-timeline__label">Maintenance window completed</span> <span class="ops-timeline__meta ops-mono">operator@demo</span> </li> </ul> <div style="margin-top:10px"> <a href="events.html" class="ops-btn ops-btn--ghost ops-btn--sm">Все события узла →</a> </div> </div> </div> <div class="ops-section-label" style="margin-top:16px"> <span class="ops-section-label__text">Ops narrative</span> <span class="ops-section-label__desc">Эталон: Object → State → Context → Relations → History → Action</span> </div> <div class="ops-panel"> <p style="margin:0;font-size:0.78rem;color:var(--muted);line-height:1.5">Каждый блок на этой странице отвечает на один вопрос оператора. Заголовок — <strong style="color:var(--text);font-weight:600">объект</strong>, badge — <strong style="color:var(--text);font-weight:600">состояние</strong>, scope bar и breadcrumbs — <strong style="color:var(--text);font-weight:600">контекст</strong>, вкладка Relations и drawer — <strong style="color:var(--text);font-weight:600">связи</strong>, timeline — <strong style="color:var(--text);font-weight:600">история</strong>, кнопки Restart / Logs — <strong style="color:var(--text);font-weight:600">действие</strong>.</p> </div> </main> </div> <!-- Relations quick view (drawer) --> <div class="ops-drawer-backdrop" id="drawer-stream" aria-hidden="true"> <aside class="ops-drawer" role="dialog" aria-labelledby="drawer-stream-title"> <div class="ops-drawer__head"> <h2 class="ops-drawer__title" id="drawer-stream-title">Stream <span class="ops-mono">str-7a2f</span></h2> <button type="button" class="ops-btn ops-btn--icon ops-btn--ghost ops-btn--sm" data-drawer-close aria-label="Закрыть">×</button> </div> <div class="ops-drawer__body"> <div class="ops-drawer__field"> <span class="ops-drawer__field-label">Node</span> <span class="ops-drawer__field-value ops-mono">nd-a1f3</span> </div> <div class="ops-drawer__field"> <span class="ops-drawer__field-label">Status</span> <span class="ops-drawer__field-value"><span class="ops-state ops-state--ok">Live</span></span> </div> <div class="ops-drawer__field"> <span class="ops-drawer__field-label">Codec</span> <span class="ops-drawer__field-value ops-mono">H.264</span> </div> <div class="ops-drawer__field"> <span class="ops-drawer__field-label">Bitrate</span> <span class="ops-drawer__field-value ops-mono">4.2 Mbps</span> </div> <div class="ops-drawer__field"> <span class="ops-drawer__field-label">Since</span> <span class="ops-drawer__field-value ops-ts">14.06.2026 08:12:00</span> </div> <div style="margin-top:12px;display:flex;gap:6px"> <a href="viewer.html" class="ops-btn ops-btn--primary ops-btn--sm">Open viewer</a> <button type="button" class="ops-btn ops-btn--ghost ops-btn--sm" data-drawer-close>Close</button> </div> </div> </aside> </div> <script src="ops-select.js"></script> <script src="ops-overlays.js"></script> <script src="ops-patterns.js"></script> <script src="ops-datetime.js"></script> <script src="ops-data.js"></script> <script src="demo.js"></script> <script> document.getElementById("btn-restart-node").addEventListener("click", function () { OpsOverlay.showModal({ title: "Restart node nd-a1f3", body: "Узел edge-msk-01 будет перезапущен. Активные потоки str-7a2f, str-3b1c прервутся на время restart.", confirmLabel: "Restart", cancelLabel: "Cancel", danger: true, onClose: function (ok) { if (ok) OpsOverlay.showToast("Restart scheduled for nd-a1f3", "ok"); } }); }); </script> </body> </html>