269 lines
9.8 KiB
HTML
269 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>shared-sqs — очередь Nubes (SQS API)</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;
|
||
}
|
||
/* Топбар — как в deck: белый, border-bottom */
|
||
.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 */
|
||
.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;
|
||
}
|
||
/* Карточки — как в design-system */
|
||
.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; }
|
||
/* Таблицы — как в design-system */
|
||
.tbl-wrap { border: 1px solid var(--brand-gray); border-radius: 8px; overflow: hidden; }
|
||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
th {
|
||
background: var(--brand-grey-light);
|
||
text-align: left;
|
||
text-transform: uppercase;
|
||
font-size: 12px;
|
||
letter-spacing: 0.3px;
|
||
padding: 4px 8px;
|
||
border-right: 1px solid var(--brand-gray);
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
}
|
||
td { padding: 4px 8px; border-right: 1px solid var(--brand-gray); border-bottom: 1px solid var(--brand-gray); }
|
||
tr:last-child td { border-bottom: none; }
|
||
td:last-child, th:last-child { border-right: none; }
|
||
tr:hover td { background: rgba(243,244,246,0.5); }
|
||
td code, .v code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
|
||
/* Код-блоки */
|
||
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; }
|
||
.cmd-label { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; font-weight: 600; }
|
||
.cmd-label:first-child { margin-top: 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); }
|
||
.link-card { text-align: center; padding: 8px 0 4px; }
|
||
.link-card a { font-size: 15px; font-weight: 600; }
|
||
.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">· очередь</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>shared-sqs <span class="badge">тестирование</span></h1>
|
||
<p class="sub">Очередь, совместимая с AWS SQS API. Очереди и сообщения пользователей — в одном месте, доступ по протоколу AWS.</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>API-токен выдается в панели Nubes и вводится на странице входа.</p>
|
||
<a class="btn-hero" href="/ui">Открыть консоль →</a>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<div class="step-title">Получение ключей доступа</div>
|
||
<p>В консоли кнопка <code>Credentials</code> открывает окно с <strong>Access Key</strong> и <strong>Secret Key</strong> — это учетные данные для подключения.</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-body">
|
||
<div class="step-title">Подключение клиента</div>
|
||
<p>Ключи указываются в AWS CLI/SDK; далее работа с очередями ведется как с обычным AWS SQS.</p>
|
||
<div class="hint-box">
|
||
Быстрый вариант — переменные окружения:<br>
|
||
<code>export AWS_ACCESS_KEY_ID=<Access Key></code><br>
|
||
<code>export AWS_SECRET_ACCESS_KEY=<Secret Key></code><br>
|
||
<code>aws sqs list-queues --endpoint-url https://sqs.containerk8s.dev.nubes.ru --region us-east-1</code>
|
||
</div>
|
||
<p style="margin-top:10px">Полные примеры команд, включая способ через файл <code>~/.aws/credentials</code>, — на отдельной странице:</p>
|
||
<a class="btn-hero" href="/examples">Примеры команд →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Подключение</div>
|
||
<div class="card-body kv">
|
||
<div class="k">Endpoint</div>
|
||
<div class="v">https://sqs.containerk8s.dev.nubes.ru</div>
|
||
<div class="k">Протокол</div>
|
||
<div class="v">AWS SQS Query / JSON, подпись <code>AWS Signature V4</code></div>
|
||
<div class="k">Регион</div>
|
||
<div class="v">us-east-1</div>
|
||
<div class="k">Аутентификация</div>
|
||
<div class="v">Access Key / Secret Key — выдаются в консоли <a href="/ui">/ui</a> (кнопка Credentials)</div>
|
||
<div class="k">Консоль</div>
|
||
<div class="v"><a href="/ui">/ui</a> — веб-интерфейс (вход по API-токену Nubes)</div>
|
||
<div class="k">Health</div>
|
||
<div class="v"><a href="/health">GET /health</a> <span class="status-ok">● ok</span></div>
|
||
<div class="k">Метрики</div>
|
||
<div class="v"><a href="/metrics">GET /metrics</a> — Prometheus</div>
|
||
<div class="k">Persistence</div>
|
||
<div class="v">Managed Redis (realm <code>iot-naeel</code>)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Команды и примеры</div>
|
||
<div class="card-body">
|
||
<p style="color:#374151">Полный список команд SQS API и подробные примеры для AWS CLI — на отдельной странице с крупным шрифтом.</p>
|
||
<div class="link-card"><a href="/examples">Открыть примеры команд →</a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">shared-sqs · realm iot-naeel · версия {{VERSION}} · <a href="/examples">примеры</a> · <a href="/metrics">метрики</a> · <a href="/health">health</a> · <a href="/admin">админ</a></div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|