92 lines
5.4 KiB
HTML
92 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Панель управления фермой</title>
|
|
<style>
|
|
:root { color: #172019; background: #eef0ea; font-family: system-ui, "Segoe UI", sans-serif; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; }
|
|
main { max-width: 1180px; margin: 0 auto; padding: 20px; }
|
|
header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 14px; align-items: stretch; margin-bottom: 12px; }
|
|
h1 { margin: 0; font-size: 1.65rem; letter-spacing: 0; }
|
|
h2 { margin: 0 0 8px; font-size: 1rem; }
|
|
p { margin: 0; color: #667064; line-height: 1.45; }
|
|
.hero, .identity, .panel { border: 1px solid #1a271b26; border-radius: 8px; background: #fffdf5; padding: 14px; }
|
|
.hero { display: grid; align-content: space-between; min-height: 180px; }
|
|
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
|
|
.pill { display: inline-flex; width: fit-content; border-radius: 8px; padding: .24rem .5rem; font-size: .74rem; font-weight: 850; background: #36556c1a; color: #36556c; }
|
|
.good { color: #236c4a; background: #2f6f4f1f; }
|
|
.warn { color: #9a5b1c; background: #b86f2324; }
|
|
form { display: grid; gap: 10px; }
|
|
label { display: grid; gap: 6px; color: #667064; font-size: .78rem; font-weight: 850; }
|
|
input, select, button { min-height: 38px; border: 1px solid #1a271b26; border-radius: 8px; padding: .5rem .65rem; color: #172019; background: #fff; font: inherit; }
|
|
button { border-color: #2f6f4f; background: #2f6f4f; color: #fffaf0; font-weight: 850; cursor: pointer; }
|
|
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
|
|
.panel { min-height: 120px; }
|
|
.panel strong { display: block; margin-bottom: 4px; }
|
|
.panel span { color: #667064; font-size: .84rem; }
|
|
.footer { margin-top: 12px; color: #667064; font-size: .82rem; }
|
|
@media (max-width: 860px) { main { padding: 10px; } header, .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<section class="hero">
|
|
<div>
|
|
<h1>Панель управления фермой</h1>
|
|
<p>Рабочая консоль для идентификации оператора, обзора узлов, обновлений, QUIC fabric, веб-контроля и аудита.</p>
|
|
</div>
|
|
<div class="badges">
|
|
<span class="pill good">HTML5</span>
|
|
<span class="pill good">HTMX-lite</span>
|
|
<span class="pill">серверные расчеты</span>
|
|
<span class="pill warn">внутри фермы QUIC fabric</span>
|
|
</div>
|
|
</section>
|
|
<section class="identity">
|
|
<h2>Идентификация оператора</h2>
|
|
<form id="admin-form" action="/api/v1/ui/admin" method="get">
|
|
<label>
|
|
ID пользователя
|
|
<input id="actor-user-id" name="actor_user_id" autocomplete="username" required placeholder="uuid оператора" />
|
|
</label>
|
|
<label>
|
|
Область входа
|
|
<select name="scope">
|
|
<option value="farm">ферма</option>
|
|
<option value="cluster">кластер</option>
|
|
<option value="organization">организация</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit">Открыть консоль</button>
|
|
</form>
|
|
</section>
|
|
</header>
|
|
<section class="grid">
|
|
<div class="panel"><strong>Узлы</strong><span>живость, версии, heartbeat, роли, детали обновлений.</span></div>
|
|
<div class="panel"><strong>Fabric</strong><span>визуальная работа связей, service channels, readiness и политики восстановления.</span></div>
|
|
<div class="panel"><strong>Веб-контроль</strong><span>настройка admin-ingress и public-ingress как workloads фермы.</span></div>
|
|
<div class="panel"><strong>Обновления</strong><span>массовые signed update hints, релизы, статусы и rollback-контуры.</span></div>
|
|
<div class="panel"><strong>Аналитика</strong><span>маршруты, rebuild health, access telemetry, активные каналы.</span></div>
|
|
<div class="panel"><strong>Аудит</strong><span>операторские действия, изменения политик, события восстановления.</span></div>
|
|
</section>
|
|
<div class="footer">ID сохраняется только в локальном профиле браузера для быстрого повторного входа.</div>
|
|
</main>
|
|
<script>
|
|
(() => {
|
|
const input = document.getElementById("actor-user-id");
|
|
const form = document.getElementById("admin-form");
|
|
if (!input || !form) return;
|
|
const stored = localStorage.getItem("rap.webAdmin.actorUserId");
|
|
if (stored) input.value = stored;
|
|
form.addEventListener("submit", () => {
|
|
if (input.value.trim()) localStorage.setItem("rap.webAdmin.actorUserId", input.value.trim());
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|