feat(landing): hand-drawn pipeline SVG diagram; v0.1.12
This commit is contained in:
“Naeel”
@@ -1221,3 +1221,21 @@ paho connect() rc=0 даже при CONNACK≠0 (on_connect обязателен
|
||||
- «MQTT endpoint (exqx)»: почему 400 в браузере и что делать.
|
||||
- v0.1.9 (digest fb488a8666ab) задеплоен, страница проверена в браузере
|
||||
(структура отрисована корректно).
|
||||
|
||||
---
|
||||
|
||||
## 35. SVG-схема пайплайна на лендинге (v0.1.12) (20:10 GMT+03)
|
||||
|
||||
- Две попытки Gemini дали негодные схемы (первая — всё сжато в одну строку
|
||||
с обрезками; вторая — «бридж»/«потребитель» стали отдельными узлами,
|
||||
дублирование, оторванные подписи). Решение: схема нарисована ВРУЧНУЮ.
|
||||
- `internal/service/api/ui/static/pipeline.svg` — 1440x300, 5 блоков
|
||||
(Устройство | EMQX | Очередь | PostgreSQL | API/Консоль), подложка
|
||||
«ПЛАТФОРМА» пунктиром вокруг трёх внутренних блоков, 4 стрелки с
|
||||
ярлыками (MQTT over wss / бридж / потребитель / REST) и подписями
|
||||
переходов, подвал «бридж и потребитель — части сервиса iot-service».
|
||||
Палитра дизайн-системы (#2563eb/#eff6ff/#bfdbfe/#d1d5db/#6b7280).
|
||||
- landing.html: схема вставлена через <img src="/static/pipeline.svg">
|
||||
(по правилу дизайн-системы — файлом, НЕ инлайн), CSS-флоу удалён.
|
||||
- v0.1.12 (digest b6a44303f9f5) задеплоен; проверка: landing 200,
|
||||
pipeline.svg 200 (image/svg+xml, 4591 байт).
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Makefile — монолит iot-service (образ naeel/iot-service).
|
||||
# Старые k8s-цели — в legacy/Makefile.old.
|
||||
|
||||
VERSION ?= v0.1.9
|
||||
VERSION ?= v0.1.12
|
||||
IMAGE ?= naeel/iot-service
|
||||
LDFLAGS = -X main.version=$(VERSION)
|
||||
|
||||
|
||||
@@ -143,6 +143,41 @@ pre code { background: none; border: none; padding: 0; }
|
||||
line-height: 1.7;
|
||||
}
|
||||
.hint-box code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
|
||||
/* Схема пайплайна */
|
||||
.flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
margin: 10px 0 4px;
|
||||
}
|
||||
.flow-node {
|
||||
border: 1px solid var(--brand-gray);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
padding: 10px 12px;
|
||||
min-width: 110px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
}
|
||||
.flow-node .fn-title { font-weight: 600; font-size: 13.5px; }
|
||||
.flow-node .fn-sub {
|
||||
font-family: ui-monospace, Menlo, Consolas, monospace;
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.flow-node.acc { border-color: #bfdbfe; background: #eff6ff; }
|
||||
.flow-node.acc .fn-title { color: var(--brand-primary); }
|
||||
.flow-arrow {
|
||||
align-self: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.flow-caption { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
|
||||
.pipeline { width: 100%; max-width: 760px; display: block; margin: 12px auto 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -172,10 +207,20 @@ pre code { background: none; border: none; padding: 0; }
|
||||
<div class="card-body">
|
||||
<p>Устройство (датчик, бойлер, счётчик) отправляет показания по протоколу
|
||||
MQTT. Дальше показания проходят по цепочке и попадают в базу данных:</p>
|
||||
<div class="hint-box">
|
||||
устройство → <code>MQTT (wss)</code> → очередь <code>iot-telemetry</code>
|
||||
→ <b>PostgreSQL</b> → API / консоль
|
||||
<img class="pipeline" src="/static/pipeline.svg" alt="Схема пайплайна IoT">
|
||||
<div class="flow-caption">
|
||||
Между брокером и базой работают бридж и потребитель (части iot-service):
|
||||
бридж кладёт показания в очередь, потребитель пишет их в базу.
|
||||
</div>
|
||||
<p style="color:#374151">
|
||||
Очередь <code>iot-telemetry</code> — внутренний буфер сервиса: она
|
||||
защищает показания от потерь при всплесках и сбоях базы. Пользователю
|
||||
креды очереди НЕ нужны — сервис ходит в неё сам. Если требуется
|
||||
посмотреть сообщения вручную — консоль очереди:
|
||||
<a href="https://sqs.containerk8s.dev.nubes.ru/ui">sqs.containerk8s.dev.nubes.ru/ui</a>
|
||||
(вход по API-токену Nubes; описание — на
|
||||
<a href="https://sqs.containerk8s.dev.nubes.ru/">sqs.containerk8s.dev.nubes.ru</a>).
|
||||
</p>
|
||||
<p style="color:#374151">
|
||||
У каждого устройства — свои логин и пароль, поэтому чужое устройство не
|
||||
сможет писать в ваш топик. Данные разных проектов (namespace) лежат в
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" width="100%" role="img" aria-label="Схема пайплайна IoT">
|
||||
<defs>
|
||||
<style>
|
||||
text { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
|
||||
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
|
||||
</style>
|
||||
<marker id="arr" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6 Z" fill="#6b7280"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- Подложка «ПЛАТФОРМА» -->
|
||||
<text x="365" y="50" font-size="12" fill="#6b7280">ПЛАТФОРМА</text>
|
||||
<rect x="335" y="60" width="818" height="144" rx="16" fill="none"
|
||||
stroke="#bfdbfe" stroke-width="1.5" stroke-dasharray="6 4"/>
|
||||
|
||||
<!-- Стрелки -->
|
||||
<line x1="211" y1="132" x2="353" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<line x1="551" y1="132" x2="643" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<line x1="841" y1="132" x2="933" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
|
||||
<line x1="1131" y1="132" x2="1223" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
|
||||
|
||||
<!-- Ярлыки над стрелками -->
|
||||
<rect x="232" y="100" width="104" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="284" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">MQTT over wss</text>
|
||||
|
||||
<rect x="574" y="100" width="50" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="599" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">бридж</text>
|
||||
|
||||
<rect x="847" y="100" width="84" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="889" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">потребитель</text>
|
||||
|
||||
<rect x="1157" y="100" width="43" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="1179" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">REST</text>
|
||||
|
||||
<!-- Подписи под стрелками -->
|
||||
<text x="284" y="160" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">{namespace}/</text>
|
||||
<text x="284" y="176" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">telemetry/{device_id}</text>
|
||||
|
||||
<text x="599" y="164" font-size="11" fill="#6b7280" text-anchor="middle">кладёт показания</text>
|
||||
<text x="889" y="164" font-size="11" fill="#6b7280" text-anchor="middle">пишет в базу</text>
|
||||
<text x="1179" y="164" font-size="11" fill="#6b7280" text-anchor="middle">чтение истории</text>
|
||||
|
||||
<!-- Блок 1: Устройство -->
|
||||
<rect x="41" y="84" width="168" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="125" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">Устройство</text>
|
||||
<text x="125" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">датчик · MQTT-клиент</text>
|
||||
|
||||
<!-- Блок 2: EMQX -->
|
||||
<rect x="359" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
|
||||
<text x="454" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">EMQX</text>
|
||||
<text x="454" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">брокер · wss /mqtt</text>
|
||||
|
||||
<!-- Блок 3: Очередь -->
|
||||
<rect x="649" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
|
||||
<text x="744" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">Очередь</text>
|
||||
<text x="744" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">iot-telemetry</text>
|
||||
|
||||
<!-- Блок 4: PostgreSQL -->
|
||||
<rect x="939" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
|
||||
<text x="1034" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">PostgreSQL</text>
|
||||
<text x="1034" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">база на namespace</text>
|
||||
|
||||
<!-- Блок 5: API / Консоль -->
|
||||
<rect x="1229" y="84" width="170" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
|
||||
<text x="1314" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">API / Консоль</text>
|
||||
<text x="1314" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">чтение истории</text>
|
||||
|
||||
<!-- Подвал -->
|
||||
<text x="720" y="252" font-size="12" fill="#6b7280" text-anchor="middle">бридж и потребитель — части сервиса iot-service</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
Reference in New Issue
Block a user