feat(api): landing page with Nubes design (logo+favicon), /static; v0.1.8

2026-08-16 18:46:17 +04:00
parent 3fedf9317c
commit bd6bc8777e
9 changed files with 448 additions and 1 deletions
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>IoT — приём телеметрии устройств (Nubes)</title>
+<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+<style>
+:root {
+  --brand-primary: #2563eb;
+  --brand-primary-dark: #1d4ed8;
+  --brand-gray: #d1d5db;
+  --brand-grey-light: #f3f4f6;
+  --text-primary: #1a1a1a;
+  --text-muted: #6b7280;
+  --success: #16a34a;
+  --warning: #d97706;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  color: var(--text-primary);
+  background: #fafafa;
+  line-height: 1.5;
+}
+.topbar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  background: #fff;
+  border-bottom: 1px solid var(--brand-gray);
+  position: sticky;
+  top: 0;
+}
+.topbar .brand { font-weight: 600; color: var(--text-primary); }
+.topbar .muted { color: var(--text-muted); }
+.topbar .spacer { flex: 1; }
+.chip {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--brand-primary);
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 999px;
+  padding: 2px 10px;
+}
+.container { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
+.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
+.hero h1 { font-size: 24px; margin: 0; letter-spacing: -0.3px; }
+.hero .sub { color: var(--text-muted); margin: 4px 0 0; }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--warning);
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 999px;
+  padding: 2px 10px;
+  margin-left: 8px;
+}
+.card {
+  background: #fff;
+  border: 1px solid var(--brand-gray);
+  border-radius: 12px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+.card-header {
+  background: var(--brand-grey-light);
+  padding: 12px;
+  font-weight: 600;
+  font-size: 14px;
+}
+.card-body { padding: 12px; }
+.card-body > p:first-child { margin-top: 0; }
+.card-body > p:last-child { margin-bottom: 0; }
+.kv { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
+.kv .k { color: var(--text-muted); }
+.kv .v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
+a { color: var(--brand-primary); text-decoration: none; }
+a:hover { color: var(--brand-primary-dark); text-decoration: underline; }
+pre {
+  background: var(--brand-grey-light);
+  border: 1px solid var(--brand-gray);
+  border-radius: 8px;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  margin: 8px 0 0;
+}
+pre code { background: none; border: none; padding: 0; }
+.status-ok { color: var(--success); font-weight: 600; }
+.footer { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 32px; }
+.step { display: flex; gap: 14px; margin-bottom: 18px; }
+.step:last-child { margin-bottom: 0; }
+.step-num {
+  flex: 0 0 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: var(--brand-primary);
+  color: #fff;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+}
+.step-body { flex: 1; }
+.step-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
+.step-body p { color: #374151; margin: 4px 0; }
+.btn-hero {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--brand-primary);
+  color: #fff !important;
+  text-decoration: none !important;
+  font-size: 15px;
+  font-weight: 600;
+  padding: 10px 20px;
+  border-radius: 8px;
+  margin-top: 8px;
+}
+.btn-hero:hover { background: var(--brand-primary-dark); }
+.hint-box {
+  font-size: 14px;
+  color: #374151;
+  background: var(--brand-grey-light);
+  border: 1px solid var(--brand-gray);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-top: 10px;
+  line-height: 1.7;
+}
+.hint-box code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
+</style>
+</head>
+<body>
+
+<div class="topbar">
+  <img src="/static/logo.svg" height="18" alt="nubes">
+  <span class="brand">Nubes</span>
+  <span class="muted">· IoT</span>
+  <span class="spacer"></span>
+  <span class="chip">{{VERSION}}</span>
+</div>
+
+<div class="container">
+
+  <div class="hero">
+    <img src="/static/logo.svg" height="28" alt="nubes">
+    <div>
+      <h1>IoT <span class="badge">тестирование</span></h1>
+      <p class="sub">Приём и хранение телеметрии устройств: MQTT → шина SQS →
+      PostgreSQL → REST API и консоль. Устройства изолированы по namespace,
+      каждому namespace — отдельная база данных.</p>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header">Что это и зачем</div>
+    <div class="card-body">
+      <p>Платформа принимает телеметрию от устройств по протоколу MQTT
+      (WebSocket с TLS) и доставляет её в базу данных по цепочке:</p>
+      <p style="color:#374151">
+        устройство → <code>wss://…/mqtt</code> (EMQX) → очередь
+        <code>iot-telemetry</code> (shared-sqs) → потребитель → PostgreSQL →
+        REST API / консоль.
+      </p>
+      <p style="color:#374151">
+        Устройства регистрируются через REST API и получают собственный
+        пароль. Каждое устройство публикует только в свой топик
+        <code>{namespace}/telemetry/{device_id}</code> — чужие топики
+        отклоняются брокером.
+      </p>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header">Порядок действий — 3 шага</div>
+    <div class="card-body">
+
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-body">
+          <div class="step-title">Регистрация устройства</div>
+          <p>Устройство создаётся через REST API с Bearer-JWT (структура
+          <code>sub</code> + <code>exp</code>). В ответе — <code>mqtt_username</code>;
+          пароль возвращается только запросом GET по имени устройства.</p>
+          <div class="hint-box">
+            <code>TOKEN="…jwt…"</code><br>
+            <code>curl -X POST -H "Authorization: Bearer $TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"name":"dev1","device_id":"dev-001"}' \
+  https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/devices</code><br>
+            <code>curl -H "Authorization: Bearer $TOKEN" \
+  https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/devices/dev1</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-body">
+          <div class="step-title">Подключение устройства к MQTT</div>
+          <p>Endpoint <code>wss://exqx.containerk8s.dev.nubes.ru/mqtt</code>,
+          подпротокол WebSocket — <code>mqtt</code>; username
+          <code>{namespace}_{device_id}</code>, пароль из шага 1; публикация в
+          топик <code>{namespace}/telemetry/{device_id}</code>.</p>
+          <div class="hint-box">
+            <code>import paho.mqtt.client as mqtt</code><br>
+            <code>c = mqtt.Client(transport="websockets")</code><br>
+            <code>c.ws_set_options(path="/mqtt")</code><br>
+            <code>c.username_pw_set("test_dev-001", "&lt;пароль&gt;")</code><br>
+            <code>c.connect("exqx.containerk8s.dev.nubes.ru", 443)</code><br>
+            <code>c.publish("test/telemetry/dev-001", '{"temp":23.5}')</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-body">
+          <div class="step-title">Чтение телеметрии</div>
+          <p>История сообщений — REST API (Bearer-JWT):</p>
+          <div class="hint-box">
+            <code>curl -H "Authorization: Bearer $TOKEN" \
+  "https://iot.containerk8s.dev.nubes.ru/v1/namespaces/test/iot/telemetry?limit=50"</code>
+          </div>
+          <a class="btn-hero" href="/console">Открыть консоль →</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header">Подключение</div>
+    <div class="card-body kv">
+      <div class="k">MQTT endpoint</div>
+      <div class="v">wss://exqx.containerk8s.dev.nubes.ru/mqtt</div>
+      <div class="k">Протокол</div>
+      <div class="v">MQTT 3.1.1 / 5.0 over WebSocket (subprotocol <code>mqtt</code>), TLS</div>
+      <div class="k">REST API</div>
+      <div class="v">https://iot.containerk8s.dev.nubes.ru</div>
+      <div class="k">Аутентификация MQTT</div>
+      <div class="v">username <code>{namespace}_{device_id}</code> + пароль из API</div>
+      <div class="k">Аутентификация REST</div>
+      <div class="v">Bearer JWT (<code>sub</code>, <code>exp</code>)</div>
+      <div class="k">Топик устройства</div>
+      <div class="v">{namespace}/telemetry/{device_id}</div>
+      <div class="k">Консоль</div>
+      <div class="v"><a href="/console">/console</a> — устройства, эмулятор, телеметрия</div>
+      <div class="k">Админ-статистика</div>
+      <div class="v"><a href="/iot-admin">/iot-admin</a> (токен ADMIN_STATS_TOKEN)</div>
+      <div class="k">Health</div>
+      <div class="v"><a href="/health">GET /health</a> <span class="status-ok">● ok</span></div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header">MQTT endpoint (exqx)</div>
+    <div class="card-body">
+      <p style="color:#374151">
+        <code>https://exqx.containerk8s.dev.nubes.ru</code> — это MQTT-брокер
+        (EMQX), а не веб-страница. Точка подключения — только
+        <code>/mqtt</code> через WebSocket. Открытие этого адреса в браузере
+        или HTTP-запрос вернёт <code>400</code> — это штатное поведение
+        (нет WebSocket-подпротокола <code>mqtt</code>).
+      </p>
+      <p style="color:#374151">
+        Ограничения: размер сообщения — до ~250 КБ (лимит SQS 256 КБ);
+        платформа может разрывать внешние WebSocket-соединения примерно раз
+        в 150 секунд — устройства должны автоматически переподключаться
+        (для QoS 1 повторы выполняются клиентом).
+      </p>
+    </div>
+  </div>
+
+  <div class="footer">iot-service · realm iot-naeel · версия {{VERSION}} · <a href="/console">консоль</a> · <a href="/iot-admin">админ</a> · <a href="/health">health</a></div>
+
+</div>
+</body>
+</html>