forcloud/polygon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: редизайн главной страницы в стиле Nubes (v0.3.2)

Browse Source 
- Логотип Nubes, фавикон
- Дизайн-система Nubes: карточки, таблицы, цвета, типографика
- Описание «Что такое Polygon» и «Как использовать»
- Примеры curl для всех основных операций
- Таблица API эндпоинтов
- Таблица загруженных сервисов с деталями
- Светлая тема вместо тёмной
This commit is contained in:
naeel
2026-08-01 09:32:22 +04:00
parent 462b26d0eb
commit 691e9f4cbd
6 changed files with 564 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/config/loader.py
+1 -1
View File
@@ -71,4 +71,4 @@ DELAY = float(os.getenv("MOCK_OP_DELAY", "0.1"))
# Версия полигона — единый источник правды для app.py и routes/root.py.
# Меняется при КАЖДОМ изменении кода.
VERSION = "0.3.1"
VERSION = "0.3.2"
site/routes/root.py
+22 -2
View File
@@ -5,6 +5,7 @@ Blueprint "root" регистрируется в app.py БЕЗ url_prefix.
Отвечает за healthcheck (для Nubes) и HTML-страницу с информацией о сервисе.
"""
import os
from flask import Blueprint, render_template
import mock_state
@@ -32,15 +33,34 @@ def index():
"""Корневая HTML-страница с информацией о сервисе.
Показывает: версию, количество загруженных сервисов, количество инстансов,
текущую задержку операций. Использует Jinja2-шаблон templates/index.html
и внешний CSS из static/style.css.
текущую задержку операций, список сервисов с операциями.
Использует Jinja2-шаблон templates/index.html и внешний CSS из static/style.css.
"""
svc_count = len(_cfg.SERVICES)
inst_count = len(mock_state.state.instances)
# Список сервисов для таблицы: name, id, кол-во операций
svc_list = []
for sid, svc in sorted(_cfg.SERVICES.items(), key=lambda x: x[1].get("name", x[0])):
svc_list.append({
"id": sid,
"name": svc.get("name", sid),
"display_name": svc.get("service_display_name", svc.get("name", "")),
"op_count": len(svc.get("operations", [])),
"has_cfs": bool(svc.get("cfsParams")),
"has_state": bool(svc.get("stateParams")),
"has_out": bool(svc.get("stateOut")),
})
# URL для примеров — из переменной окружения или автоопределение
endpoint = os.getenv("POLYGON_ENDPOINT", "https://polygon.pythonk8s.dev.nubes.ru")
return render_template(
"index.html",
version=_cfg.VERSION,
svc_count=svc_count,
inst_count=inst_count,
delay=_cfg.DELAY,
svc_list=svc_list,
endpoint=endpoint,
)
site/static/favicon.svg
+55
View File
@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="57"
height="57"
xml:space="preserve"
overflow="hidden"
version="1.1"
id="svg8"
sodipodi:docname="U_v3.svg"
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="16.226667"
inkscape:cx="27.146672"
inkscape:cy="28.317584"
inkscape:window-width="2560"
inkscape:window-height="1494"
inkscape:window-x="-11"
inkscape:window-y="-11"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" /><defs
id="defs2"><clipPath
id="clip0"><rect
x="652"
y="420"
width="64"
height="75"
id="rect1" /></clipPath><clipPath
id="clip1"><rect
x="652"
y="420"
width="64"
height="70"
id="rect2" /></clipPath></defs><g
clip-path="url(#clip0)"
transform="matrix(1.0135748,0,0,1.0135748,-664.97034,-440.30567)"
id="g8"><g
clip-path="url(#clip1)"
id="g7"><g
id="g6"><path
d="m 114.028,43.1492 v 7.6592 c 0,3.7843 -3.08,6.8632 -6.866,6.8632 L 85.3367,57.5419 c -3.7853,0 -6.8655,-3.0805 -6.8655,-6.8643 v -2.5279 l 0.0555,0.009 V 15.8148 l -10.3823,2.0127 0.0045,3.8772 -0.0045,0.0015 v 28.971 c 0,9.481 7.7132,17.1923 17.1867,17.1923 l 21.8359,0.1313 c 9.474,0 17.187,-7.7117 17.187,-17.1928 v -2.6541 l 0.027,0.0045 V 15.8145 l -10.382,2.0126 0.028,25.3214 z"
fill="#001c34"
fill-rule="evenodd"
transform="matrix(1,0,0,1.01337,587.92,420.059)"
id="path6" /></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

site/static/logo.svg
Executable
+25
View File
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="82.3711mm" height="18.2443mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 8221.93 1821.07"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#001C34}
]]>
</style>
</defs>
<g id="Слой_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_2283355517888">
<path class="fil0" d="M477.49 479.69l-413.51 0 -63.98 276.48 178.44 0 1.17 1028.71 0 26.75 0.03 0 276.39 0 0 -871.72c0,-101.28 82.43,-183.69 183.75,-183.69l589.25 3.44c101.34,0 183.76,82.46 183.76,183.74l0 871.72 276.44 0 0 -871.72c0,-253.77 -206.46,-460.15 -460.05,-460.15l-589.52 -3.53 -162.17 0.45 0 -0.48z"/>
<path class="fil0" d="M6664.65 1813.37l1181.04 0c212.14,0 376.24,-175.01 376.24,-387.08 0,-212.13 -172.55,-384.68 -384.69,-384.68l-653.66 0c-60.22,0 -109.16,-48.94 -109.16,-109.18l0 -66.18c0,-60.19 48.94,-109.14 109.16,-109.14l695.76 0 63.74 -275.49 -759.5 0c-212.13,0 -384.66,172.53 -384.66,384.63l0 66.18c0,212.13 172.53,384.67 384.66,384.67l653.66 0c60.2,0 109.2,49 109.2,109.19 0,60.13 -49,116.1 -109.2,116.1l-1118.9 0 -53.68 270.98z"/>
<path class="fil0" d="M6200.79 483.5l-723.21 0c-215.88,0 -391.47,175.6 -391.47,391.51l0 485.5c0,248.38 202.05,450.4 450.4,450.4l989.38 0 62.13 -268.51 -1051.51 0c-96.41,0 -174.95,-85.37 -174.95,-181.88l-1.5 -39.46 923.62 0 308.51 -1.84 0 -237.95 0 -206.26c0,-215.91 -175.59,-391.51 -391.41,-391.51zm115.96 560.28l-955.19 0 0 -168.77c0,-63.96 52.07,-116.05 116.02,-116.05l723.21 0c63.91,0 115.96,52.08 115.96,116.05l0 168.77z"/>
<path class="fil0" d="M4683.49 1194.24l0 168.28c0,100.92 -81.7,178.37 -182.67,178.37l-589.87 1.23c-93.18,0 -170.28,-69.96 -181.63,-160.09l0 -458.13c11.36,-90.1 88.46,-160.07 181.63,-160.07l589.44 3.5c100.97,0 183.1,82.18 183.1,183.1l0 30.42 0 213.4zm-1230.2 -345.53l-0.89 -795.03 276.91 -53.68 0 526.07c55.74,-24.16 117.03,-37.74 181.5,-37.74l589.71 3.5c252.69,0 458.42,205.72 458.42,458.59l0 30.42 0 213.4 0 168.28c0,252.86 -205.73,458.54 -458.42,458.54l-589.71 -3.5c-252.7,0 -458.41,-205.67 -458.41,-458.56l0 -171.61 0 -240.48 0.89 -98.2z"/>
<path class="fil0" d="M3041.25 1150.84l0 204.28c0,100.93 -82.15,183.05 -183.11,183.05l-582.11 -3.46c-100.96,0 -183.11,-82.16 -183.11,-183.08l0 -67.42 1.48 0.24 0 -862.65 -276.91 53.68 0.12 103.41 -0.12 0.04 0 772.69c0,252.87 205.72,458.54 458.39,458.54l582.4 3.5c252.67,0 458.4,-205.68 458.4,-458.55l0 -70.79 0.71 0.12 0 -862.65 -276.91 53.68 0.76 675.35z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

site/static/style.css
+296 -17
View File
@@ -1,31 +1,310 @@
/*
* polygon — тёмная тема для корневой страницы (/).
* Минимальный CSS, без фреймворков.
* polygon — дизайн-система Nubes.
* Токены из nubes-design-system.md.
*/
/* ── Reset & Base ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--brand-primary: #2563eb;
--brand-primary-dark: #1d4ed8;
--brand-gray: #d1d5db;
--brand-grey-light: #f3f4f6;
--bg: #ffffff;
--text: #1a1a1a;
--text-muted: #6b7280;
--border: #e5e7eb;
--destructive: #ef4444;
--green: #22c55e;
--radius: 12px;
--radius-sm: 6px;
}
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 600px;
margin: 40px auto;
padding: 0 20px;
background: #111;
color: #eee;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: #f9fafb;
min-height: 100vh;
}
h1 {
color: #4af;
/* ── Header ── */
.header {
background: var(--bg);
border-bottom: 4px solid var(--brand-primary);
padding: 16px 24px 12px;
margin-bottom: 24px;
}
.ok {
color: #4a4;
.header-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.ver {
color: #888;
.logo {
display: block;
height: 33px;
width: auto;
}
.header-status {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 13px;
margin-left: 4px;
}
.header-status strong {
color: var(--text);
}
.sep {
color: var(--brand-gray);
}
/* ── Layout ── */
main {
max-width: 960px;
margin: 0 auto;
padding: 0 16px 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ── Badge ── */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
}
.badge-blue {
background: var(--brand-primary);
color: #fff;
}
/* ── Dots ── */
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-green { background: var(--green); }
.dot-gray { background: var(--brand-gray); }
.status-text {
font-weight: 600;
color: var(--green);
}
/* ── Cards (ui-kit:bg-card ui-kit:rounded-xl ui-kit:border ui-kit:shadow-sm) ── */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
overflow: hidden;
}
.card-header {
background: var(--brand-grey-light);
padding: 12px 16px;
font-weight: 600;
font-size: 16px;
}
.card-header h2 {
font-size: 16px;
font-weight: 600;
}
.card-body {
padding: 16px;
}
.card-body p {
margin-bottom: 12px;
}
.card-body p:last-child {
margin-bottom: 0;
}
.card-body ul {
padding-left: 20px;
margin-bottom: 0;
}
.card-body li {
margin-bottom: 4px;
}
/* ── 2-column grid ── */
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 8px;
}
@media (max-width: 640px) {
.grid-2col {
grid-template-columns: 1fr;
}
}
/* ── Headings ── */
.h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
margin-top: 16px;
color: var(--text);
}
.h4:first-child {
margin-top: 0;
}
/* ── Code blocks ── */
.code-block {
background: #1e1e2e;
color: #cdd6f4;
padding: 12px 16px;
border-radius: var(--radius-sm);
font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 13px;
line-height: 1.6;
overflow-x: auto;
margin-bottom: 12px;
white-space: pre-wrap;
word-break: break-all;
}
.code-block code {
background: none;
padding: 0;
font-size: inherit;
}
/* ── Note / Callout ── */
.note {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--radius-sm);
padding: 10px 14px;
margin-top: 16px;
font-size: 13px;
color: #1e40af;
}
.note code {
background: #dbeafe;
padding: 1px 5px;
border-radius: 3px;
font-size: 12px;
}
/* ── Table ── */
.table-wrap {
padding: 0;
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.table th {
background: var(--brand-grey-light);
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--text-muted);
padding: 8px 12px;
text-align: left;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.table th:last-child {
border-right: none;
}
.table td {
padding: 7px 12px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.table td:last-child {
border-right: none;
}
.table tbody tr:hover {
background: rgba(243, 244, 246, 0.5);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* ── HTTP Method badges ── */
.method {
display: inline-block;
padding: 1px 7px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
font-family: monospace;
text-transform: uppercase;
}
.method-get { background: #dbeafe; color: #1d4ed8; }
.method-post { background: #dcfce7; color: #16a34a; }
/* ── Muted text ── */
.muted {
color: var(--text-muted);
font-weight: 400;
}
/* ── Inline code ── */
code {
background: #333;
padding: 2px 6px;
border-radius: 4px;
background: var(--brand-grey-light);
padding: 1px 5px;
border-radius: 3px;
font-family: "SF Mono", "Fira Code", monospace;
font-size: 12px;
}
/* ── Footer ── */
.footer {
text-align: center;
padding: 20px 16px;
color: var(--text-muted);
font-size: 12px;
max-width: 960px;
margin: 0 auto;
}
site/templates/index.html
+165 -5
View File
@@ -2,13 +2,173 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>polygon v{{ version }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polygon — Mock Nubes API</title>
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>polygon <span class="ver">v{{ version }}</span></h1>
<p class="ok">● running</p>
<p>Сервисов: {{ svc_count }} &nbsp;|&nbsp; Инстансов: {{ inst_count }} &nbsp;|&nbsp; delay: {{ delay }}s</p>
<p>Эндпоинты: <code>/api/v1/svc/*</code></p>
<!-- ── Header ── -->
<header class="header">
<div class="header-top">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Nubes" class="logo" width="150" height="33">
<span class="badge badge-blue">polygon v{{ version }}</span>
</div>
<div class="header-status">
<span class="dot dot-green"></span>
<span class="status-text">Работает</span>
<span class="sep">·</span>
<span>Сервисов: <strong>{{ svc_count }}</strong></span>
<span class="sep">·</span>
<span>Инстансов: <strong>{{ inst_count }}</strong></span>
<span class="sep">·</span>
<span>Задержка: <strong>{{ delay }}s</strong></span>
</div>
</header>
<main>
<!-- ── Что такое Polygon ── -->
<section class="card">
<div class="card-header">
<h2>Что такое Polygon?</h2>
</div>
<div class="card-body">
<p>
<strong>Polygon</strong> — это эмулятор REST API облачной платформы
<strong>Nubes</strong> для интеграционных тестов.
Он полностью повторяет контракты реального API: сервисы, инстансы,
операции, параметры, валидацию — но работает <strong>без реальной
инфраструктуры</strong>, в памяти, с мгновенным откликом.
</p>
<div class="grid-2col">
<div>
<h3 class="h4">Зачем нужен</h3>
<ul>
<li>Тестировать создание/изменение/удаление инстансов без реальных ресурсов</li>
<li>Отлаживать UI автодеплоя (<code>app-autotest</code>) на мок-данных</li>
<li>Писать интеграционные тесты с детерминированным состоянием</li>
<li>Проверять краевые случаи (ошибки валидации, сбои операций)</li>
</ul>
</div>
<div>
<h3 class="h4">Как устроен</h3>
<ul>
<li>Flask 3.0 + gunicorn, 1 воркер (состояние в памяти)</li>
<li>Конфигурация сервисов — из YAML (генерируется из STANDS)</li>
<li>Все операции — синхронные, с настраиваемой задержкой</li>
<li>Управляемый сброс состояния через <code>/_mock/reset</code></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ── Как использовать ── -->
<section class="card">
<div class="card-header">
<h2>Как использовать</h2>
</div>
<div class="card-body">
<h3 class="h4">1. Получить список сервисов</h3>
<pre class="code-block"><code>curl -s {{ endpoint }}/api/v1/svc/services | python3 -m json.tool</code></pre>
<h3 class="h4">2. Создать инстанс</h3>
<pre class="code-block"><code>curl -s -X POST {{ endpoint }}/api/v1/svc/instances \
-H "Content-Type: application/json" \
-d '{"serviceId": "s3", "displayName": "my-bucket"}' | python3 -m json.tool</code></pre>
<h3 class="h4">3. Заполнить параметры и запустить операцию</h3>
<pre class="code-block"><code># Установить параметры операции
curl -s -X POST {{ endpoint }}/api/v1/svc/instanceOperationCfsParams/&lt;opUid&gt;
# Запустить операцию (create/modify/delete)
curl -s -X POST {{ endpoint }}/api/v1/svc/instanceOperations/&lt;opUid&gt;/run</code></pre>
<h3 class="h4">4. Сбросить состояние</h3>
<pre class="code-block"><code>curl -s -X POST {{ endpoint }}/api/v1/svc/_mock/reset</code></pre>
<div class="note">
<strong>Подсказка:</strong> используйте переменную окружения
<code>POLYGON_ENDPOINT={{ endpoint }}</code>
в <code>app-autotest</code> — и все операции пойдут через полигон
вместо реального API.
</div>
</div>
</section>
<!-- ── API ── -->
<section class="card">
<div class="card-header">
<h2>API эндпоинты</h2>
</div>
<div class="card-body table-wrap">
<table class="table">
<thead>
<tr>
<th>Метод</th>
<th>Путь</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr><td><span class="method method-get">GET</span></td><td><code>/health</code></td><td>Healthcheck</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/services</code></td><td>Список сервисов</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/services/&lt;id&gt;</code></td><td>Детали сервиса</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/instances</code></td><td>Список инстансов</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/instances/&lt;uid&gt;</code></td><td>Детали инстанса</td></tr>
<tr><td><span class="method method-post">POST</span></td><td><code>/api/v1/svc/instances</code></td><td>Создать инстанс</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/instanceOperations</code></td><td>Список операций</td></tr>
<tr><td><span class="method method-post">POST</span></td><td><code>/api/v1/svc/instanceOperations/&lt;uid&gt;/run</code></td><td>Запустить операцию</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/instanceOperations/&lt;uid&gt;/status</code></td><td>Статус операции</td></tr>
<tr><td><span class="method method-post">POST</span></td><td><code>/api/v1/svc/_mock/reset</code></td><td>Сброс состояния</td></tr>
<tr><td><span class="method method-get">GET</span></td><td><code>/api/v1/svc/_mock/state</code></td><td>Дамп состояния</td></tr>
<tr><td><span class="method method-post">POST</span></td><td><code>/api/v1/svc/_mock/delay/&lt;s&gt;</code></td><td>Задать задержку</td></tr>
<tr><td><span class="method method-post">POST</span></td><td><code>/api/v1/svc/_mock/fail-next</code></td><td>Следующая операция упадёт</td></tr>
</tbody>
</table>
</div>
</section>
<!-- ── Сервисы ── -->
<section class="card">
<div class="card-header">
<h2>Загруженные сервисы <span class="muted">({{ svc_count }})</span></h2>
</div>
<div class="card-body table-wrap">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Название</th>
<th>Операций</th>
<th>CfsParams</th>
<th>StateParams</th>
<th>StateOut</th>
</tr>
</thead>
<tbody>
{% for svc in svc_list %}
<tr>
<td><code>{{ svc.id }}</code></td>
<td>{{ svc.display_name }}</td>
<td>{{ svc.op_count }}</td>
<td>{% if svc.has_cfs %}<span class="dot dot-green"></span>{% else %}<span class="dot dot-gray"></span>{% endif %}</td>
<td>{% if svc.has_state %}<span class="dot dot-green"></span>{% else %}<span class="dot dot-gray"></span>{% endif %}</td>
<td>{% if svc.has_out %}<span class="dot dot-green"></span>{% else %}<span class="dot dot-gray"></span>{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</section>
</main>
<footer class="footer">
polygon v{{ version }} · Nubes Mock API · Flask + gunicorn
</footer>
</body>
</html>