Nail/SQS-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add demo UI showcase mode

Browse Source
This commit is contained in:
Naeel
2026-04-12 09:58:32 +03:00
parent dd08427424
commit d7e9d90453
6 changed files with 325 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ui/index.html
+11 -15
View File
@@ -3,9 +3,9 @@
app/ui/index.html
SQS Console — веб-интерфейс для shared-sqs (Nubes branding)
Created: 2026-04-10
Updated: 2026-04-10 — JWT auth через nubes token, email в navbar, auto-provisioning
Updated: 2026-04-12 09:28 MSK — demo token login и UI только для собственного tenant-а
Vanilla HTML/CSS/JS SPA. Встраивается через go:embed.
Режим: JWT авторизация через nubes API. Пользователь вводит токен → валидация → сессия.
Режим: UI принимает либо nubes JWT, либо публичный demo token для seeded demo tenant.
-->
<html lang="ru">
<head>
@@ -330,13 +330,14 @@ td.msg-expand { padding: 0 !important; border-bottom: 1px solid var(--border); }
<img src="https://terra.k8c.ru/docs/nubes/nubes/2.0.2/30_registry/assets/logo.svg" alt="Nubes">
<h1>SQS CONSOLE</h1>
<div class="form-group">
<label for="login-token">API Token (nubes JWT)</label>
<input id="login-token" type="password" placeholder="eyJhbGciOiJSUzI1NiIs...">
<label for="login-token">API Token или Demo Token</label>
<input id="login-token" type="password" placeholder="JWT или demo-ui-shared-sqs-ngcloud-2026">
</div>
<div id="login-error" class="login-error"></div>
<button class="btn btn-primary" style="width:100%" onclick="doLogin()">Войти</button>
<p style="font-size:12px;color:var(--text-secondary);margin-top:16px">
Токен можно получить в панели управления облаком Nubes
Для демо используйте token: demo-ui-shared-sqs-ngcloud-2026.<br>
Для личного tenant-а используйте API token из панели Nubes.
</p>
</div>
</div>
@@ -500,10 +501,10 @@ function showLogin() {
function doLogin() {
const token = document.getElementById('login-token').value.trim();
if (!token) {
document.getElementById('login-error').textContent = 'Введите токен';
document.getElementById('login-error').textContent = 'Введите API token или demo token';
return;
}
document.getElementById('login-error').textContent = 'Проверка токена...';
document.getElementById('login-error').textContent = 'Проверка доступа...';
fetch(BASE + '/ui/api/auth', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -611,12 +612,11 @@ function renderDashboard(health, tenants) {
</div>
<div class="card">
<div class="toolbar">
<h2>Тенанты</h2>
<h2>Мой tenant</h2>
<div style="display:flex;gap:12px;align-items:center">
<div class="auto-refresh">
<span>⟳ 10с</span>
</div>
<button class="btn btn-primary btn-sm" onclick="openModal()">+ Создать</button>
</div>
</div>
<div class="table-wrap">
@@ -628,7 +628,6 @@ function renderDashboard(health, tenants) {
<th>Макс. очередей</th>
<th>Статус</th>
<th>Создан</th>
<th></th>
</tr>
</thead>
<tbody>
@@ -641,12 +640,9 @@ function renderDashboard(health, tenants) {
? '<span class="badge badge-active">active</span>'
: '<span class="badge badge-inactive">inactive</span>'}</td>
<td style="font-size:12px;color:var(--text-secondary)">${fmtDate(t.created_at)}</td>
<td>
<button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteTenant('${esc(t.id)}','${esc(t.name)}')">✕</button>
</td>
</tr>
`).join('')}
${(!tenants || tenants.length === 0) ? '<tr><td colspan="6" style="text-align:center;color:var(--text-secondary);padding:32px">Нет тенантов</td></tr>' : ''}
${(!tenants || tenants.length === 0) ? '<tr><td colspan="5" style="text-align:center;color:var(--text-secondary);padding:32px">Tenant не найден</td></tr>' : ''}
</tbody>
</table>
</div>
@@ -681,7 +677,7 @@ function renderTenant(tenant, queues) {
const totalMsgs = (queues || []).reduce((s, q) => s + q.messages + q.not_visible, 0);
el.innerHTML = `
<div class="breadcrumb">
<a href="#" onclick="event.preventDefault();showDashboard()">Тенанты</a>
<a href="#" onclick="event.preventDefault();showDashboard()">Мой tenant</a>
<span>›</span>
${esc(tenant.name)}
</div>