/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
events.html
257 строк
12 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 — Events</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">Logs · Events</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"> <div class="ops-page-head"> <div> <h1 class="ops-page-head__title">Events</h1> <p class="ops-page-head__hint">Журнал событий кластера с фильтрацией по уровню, узлу и периоду.</p> </div> <div class="ops-page-head__actions"> <button type="button" class="ops-btn ops-btn--sm">Скачать CSV</button> </div> </div> <div class="ops-filter-bar"> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Период</span> <select class="ops-select ops-input--filter"> <option>Последний час</option> <option selected>Последние 24 ч</option> <option>7 дней</option> </select> </div> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Уровень</span> <div class="ops-chip-group"> <button type="button" class="ops-chip is-active">Все <span class="ops-chip__count">842</span></button> <button type="button" class="ops-chip">Info <span class="ops-chip__count">710</span></button> <button type="button" class="ops-chip">Warn <span class="ops-chip__count">118</span></button> <button type="button" class="ops-chip">Error <span class="ops-chip__count">14</span></button> </div> </div> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Узел</span> <input type="text" class="ops-input ops-input--filter ops-input--mono" placeholder="nd-xxxx"> </div> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Поиск</span> <div class="ops-input-group ops-input-group--search"> <span class="ops-input-group__addon">⌕</span> <input type="search" class="ops-input ops-input--filter" placeholder="Сообщение или код…"> </div> </div> <div class="ops-filter-bar__actions"> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm">Применить</button> <button type="button" class="ops-btn ops-btn--ghost ops-btn--sm">Сброс</button> </div> </div> <div class="ops-grid-table-wrap"> <table class="ops-grid-table"> <colgroup> <col style="width:12rem"> <col style="width:4.5rem"> <col style="width:5rem"> <col style="width:5.5rem"> <col> </colgroup> <thead> <tr> <th>Время</th> <th>Уровень</th> <th>Узел</th> <th>Код</th> <th class="ops-cell--wrap">Сообщение</th> </tr> </thead> <tbody> <tr> <td class="ops-ts">14.06.2026 09:41:02.118</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-a1f3</td> <td class="ops-mono">CONN_OK</td> <td class="ops-cell--wrap">Handshake completed with peer</td> </tr> <tr> <td class="ops-ts">14.06.2026 09:39:11.442</td> <td><span class="ops-state ops-state--warn">Warn</span></td> <td class="ops-mono">nd-c9d4</td> <td class="ops-mono">RETRY</td> <td class="ops-cell--wrap">Connection retry attempt 2/5</td> </tr> <tr> <td class="ops-ts">14.06.2026 09:12:44.901</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td class="ops-mono">nd-e2f1</td> <td class="ops-mono">TIMEOUT</td> <td class="ops-cell--wrap">Upstream health check failed</td> </tr> <tr> <td class="ops-ts">14.06.2026 09:08:33.005</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-f8a6</td> <td class="ops-mono">DEPLOY</td> <td class="ops-cell--wrap">Config revision v2.14 applied</td> </tr> <tr> <td class="ops-ts">14.06.2026 08:55:03.771</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td class="ops-mono">nd-m5p1</td> <td class="ops-mono">DISK</td> <td class="ops-cell--wrap">Disk usage above threshold (92%)</td> </tr> <tr> <td class="ops-ts">14.06.2026 08:41:19.220</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-g3h5</td> <td class="ops-mono">SCALE</td> <td class="ops-cell--wrap">Auto-scale policy triggered +1 instance</td> </tr> <tr> <td class="ops-ts">14.06.2026 08:22:07.664</td> <td><span class="ops-state ops-state--warn">Warn</span></td> <td class="ops-mono">nd-i4k2</td> <td class="ops-mono">LATENCY</td> <td class="ops-cell--wrap">p99 latency exceeded 80ms for 3 min</td> </tr> <tr> <td class="ops-ts">14.06.2026 07:58:44.331</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-h1j9</td> <td class="ops-mono">AUTH</td> <td class="ops-cell--wrap">Token rotated successfully</td> </tr> <tr> <td class="ops-ts">14.06.2026 07:45:12.089</td> <td><span class="ops-state ops-state--warn">Warn</span></td> <td class="ops-mono">nd-b7c2</td> <td class="ops-mono">CERT</td> <td class="ops-cell--wrap">TLS certificate expires in 14 days</td> </tr> <tr> <td class="ops-ts">14.06.2026 07:30:00.001</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">system</td> <td class="ops-mono">CRON</td> <td class="ops-cell--wrap">Daily metrics aggregation completed</td> </tr> <tr> <td class="ops-ts">14.06.2026 07:12:55.778</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-j6l8</td> <td class="ops-mono">START</td> <td class="ops-cell--wrap">Node started after maintenance window</td> </tr> <tr> <td class="ops-ts">14.06.2026 06:58:33.412</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td class="ops-mono">nd-e2f1</td> <td class="ops-mono">CONN_FAIL</td> <td class="ops-cell--wrap">Failed to establish relay tunnel</td> </tr> <tr> <td class="ops-ts">14.06.2026 06:44:21.905</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-k0m3</td> <td class="ops-mono">SYNC</td> <td class="ops-cell--wrap">State sync with leader completed</td> </tr> <tr> <td class="ops-ts">14.06.2026 06:30:18.667</td> <td><span class="ops-state ops-state--warn">Warn</span></td> <td class="ops-mono">nd-l2n7</td> <td class="ops-mono">MEM</td> <td class="ops-cell--wrap">Memory usage above 75%</td> </tr> <tr> <td class="ops-ts">14.06.2026 06:15:44.223</td> <td><span class="ops-state ops-state--ok">Info</span></td> <td class="ops-mono">nd-a1f3</td> <td class="ops-mono">HEALTH</td> <td class="ops-cell--wrap">Health check passed all probes</td> </tr> </tbody> </table> </div> <div class="ops-pagination"> <span class="ops-pagination__info">Стр. <span class="ops-mono">1</span> из <span class="ops-mono">57</span> · <span class="ops-mono">842</span> событий</span> <div class="ops-pagination__nav"> <button type="button" class="ops-pagination__btn" disabled>←</button> <button type="button" class="ops-pagination__btn is-active">1</button> <button type="button" class="ops-pagination__btn">2</button> <button type="button" class="ops-pagination__btn">→</button> </div> </div> </main> </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> </body> </html>