Nail/sless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(iot-console): убрать поля API/MQTT из формы входа, добавить Help блок

Browse Source 
- Форма входа: только токен, без полей API адреса и MQTT broker
- Адреса zardcoded: https://sless.kube5s.ru и wss://iot.kube5s.ru/mqtt
- Страница устройства: блок «Как это работает» — 5 шагов с инструкцией
- operator.yaml: v0.1.55 → v0.1.56
This commit is contained in:
Naeel
2026-04-04 20:25:06 +03:00
parent fb6f9d48cd
commit e54787177b
2 changed files with 69 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
deployments/k8s/operator.yaml
+1 -1
View File
@@ -75,7 +75,7 @@ spec:
- name: operator - name: operator
# При обновлении версии оператора — менять тег здесь (не latest!) # При обновлении версии оператора — менять тег здесь (не latest!)
# v0.1.50 — добавлены IoT controller, IoT REST API, MQTT auth endpoint # v0.1.50 — добавлены IoT controller, IoT REST API, MQTT auth endpoint
image: pearlharbor.registryk8s.services.ngcloud.ru/naeel/sless-operator:v0.1.54 image: pearlharbor.registryk8s.services.ngcloud.ru/naeel/sless-operator:v0.1.56
# Always — чтобы всегда тянуть по точному тегу (не кешировать старый) # Always — чтобы всегда тянуть по точному тегу (не кешировать старый)
imagePullPolicy: Always imagePullPolicy: Always
ports: ports:
internal/api/ui/iot-console.html
+68 -13
View File
@@ -176,6 +176,13 @@
.coming-soon h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #64748b; } .coming-soon h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #64748b; }
a { color: #3b82f6; text-decoration: none; } a { color: #3b82f6; text-decoration: none; }
a:hover { text-decoration: underline; } a:hover { text-decoration: underline; }
.help-block { border: 1px solid #1e293b; border-radius: 10px; padding: 14px 18px; background: #0f172a; }
.help-block summary::-webkit-details-marker { display: none; }
.help-block[open] summary span { transform: rotate(90deg); display: inline-block; }
.help-step { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; color: #94a3b8; line-height: 1.6; }
.help-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #1e3a5f; color: #60a5fa; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.help-step strong { color: #e2e8f0; }
.help-step em { color: #60a5fa; font-style: normal; }
</style> </style>
</head> </head>
<body> <body>
@@ -473,14 +480,6 @@ function renderLogin() {
<div style="font-size:13px;color:#64748b;margin-top:4px;">Управление устройствами и телеметрией</div> <div style="font-size:13px;color:#64748b;margin-top:4px;">Управление устройствами и телеметрией</div>
</div> </div>
<div id="login-err"></div> <div id="login-err"></div>
<div class="form-group">
<label>API (адрес оператора)</label>
<input id="f-api" value="${h(S.apiBase)}" placeholder="https://sless.kube5s.ru">
</div>
<div class="form-group">
<label>MQTT Broker WebSocket</label>
<input id="f-mqtt" value="${h(S.mqttBase)}" placeholder="wss://iot.kube5s.ru/mqtt">
</div>
<div class="form-group"> <div class="form-group">
<label>Bearer токен</label> <label>Bearer токен</label>
<input id="f-tok" type="password" value="${h(S.token)}" placeholder="eyJ..."> <input id="f-tok" type="password" value="${h(S.token)}" placeholder="eyJ...">
@@ -500,8 +499,6 @@ function renderLogin() {
// doLogin — вычислить namespace из токена, проверить доступность API, перейти к устройствам. // doLogin — вычислить namespace из токена, проверить доступность API, перейти к устройствам.
// Пользователь НИКОГДА не вводит namespace — он однозначно определяется из токена. // Пользователь НИКОГДА не вводит namespace — он однозначно определяется из токена.
async function doLogin() { async function doLogin() {
const api = (document.getElementById('f-api').value || '').trim().replace(/\/$/, '');
const mqtt = (document.getElementById('f-mqtt').value || '').trim();
const tok = (document.getElementById('f-tok').value || '').trim(); const tok = (document.getElementById('f-tok').value || '').trim();
if (!tok) { loginErr('Укажите токен'); return; } if (!tok) { loginErr('Укажите токен'); return; }
@@ -521,8 +518,8 @@ async function doLogin() {
return; return;
} }
S.apiBase = api || 'https://sless.kube5s.ru'; S.apiBase = 'https://sless.kube5s.ru';
S.mqttBase = mqtt || 'wss://iot.kube5s.ru/mqtt'; S.mqttBase = 'wss://iot.kube5s.ru/mqtt';
S.ns = ns; S.ns = ns;
S.token = tok; S.token = tok;
@@ -722,7 +719,65 @@ function deviceLayout(d) {
<div class="tab ${S.activeTab==='emulator' ? 'active':''}" onclick="switchTab('emulator')">Эмулятор</div> <div class="tab ${S.activeTab==='emulator' ? 'active':''}" onclick="switchTab('emulator')">Эмулятор</div>
<div class="tab ${S.activeTab==='telemetry'? 'active':''}" onclick="switchTab('telemetry')">Телеметрия</div> <div class="tab ${S.activeTab==='telemetry'? 'active':''}" onclick="switchTab('telemetry')">Телеметрия</div>
</div> </div>
<div id="tab-body">${tabContent(d, S.activeTab)}</div>`; <div id="tab-body">${tabContent(d, S.activeTab)}</div>
<details class="help-block" style="margin-top:24px;">
<summary style="cursor:pointer;font-size:13px;font-weight:600;color:#64748b;user-select:none;list-style:none;display:flex;align-items:center;gap:6px;">
<span>▶</span> Как это работает — краткая инструкция
</summary>
<div style="margin-top:14px;display:grid;gap:12px;">
<div class="help-step">
<div class="help-num">1</div>
<div>
<strong>Credentials — параметры для прошивки</strong><br>
Перейдите на вкладку <em>Credentials</em>. Там четыре параметра: Broker URL, Username, Password, Топик.
Нажмите <strong>«📋 Скопировать всё»</strong> и вставьте в код устройства.
Больше ничего настраивать не нужно.
</div>
</div>
<div class="help-step">
<div class="help-num">2</div>
<div>
<strong>Публикация данных — формат сообщения</strong><br>
Устройство должно публиковать JSON в указанный топик. Структура произвольная:<br>
<code class="mono" style="display:inline-block;margin-top:6px;padding:6px 10px;background:#0f172a;border-radius:6px;font-size:12px;">
{"temp": 22.5, "humidity": 60, "status": "ok"}
</code>
</div>
</div>
<div class="help-step">
<div class="help-num">3</div>
<div>
<strong>Эмулятор — проверить без железа</strong><br>
Вкладка <em>Эмулятор</em> работает прямо из браузера как настоящее устройство.
Нажмите <strong>«Подключиться»</strong>, отредактируйте JSON, нажмите <strong>«Отправить»</strong>.
Зелёная запись в логе = брокер принял сообщение.
</div>
</div>
<div class="help-step">
<div class="help-num">4</div>
<div>
<strong>Автоотправка — имитировать поток данных</strong><br>
В Эмуляторе можно включить <strong>«Авто»</strong> — сообщения будут уходить каждые N секунд.
Удобно для проверки что данные стабильно принимаются.
</div>
</div>
<div class="help-step">
<div class="help-num">5</div>
<div>
<strong>Телеметрия — история данных (в разработке)</strong><br>
Вкладка <em>Телеметрия</em> — скоро здесь будет таблица с историей всех сообщений
от этого устройства с фильтрами по времени.
</div>
</div>
</div>
</details>`;
} }
// switchTab — переключить вкладку без перезагрузки данных устройства // switchTab — переключить вкладку без перезагрузки данных устройства