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

feat(landing): vertical large pipeline diagram; v0.1.13

Browse Source
This commit is contained in:
“Naeel”
2026-08-16 19:16:58 +04:00
parent a0e73b0b7a
commit c066a97e42
4 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HISTORY/2026-08-16-session-log.md
+17
View File
@@ -1239,3 +1239,20 @@ paho connect() rc=0 даже при CONNACK≠0 (on_connect обязателен
(по правилу дизайн-системы — файлом, НЕ инлайн), CSS-флоу удалён.
- v0.1.12 (digest b6a44303f9f5) задеплоен; проверка: landing 200,
pipeline.svg 200 (image/svg+xml, 4591 байт).
---
## 36. Схема перерисована ВЕРТИКАЛЬНО, крупно (v0.1.13) (20:25 GMT+03)
- Пользователь: горизонтальная схема «слишком мелко», требование «не в один
ряд» повторено. Схема перерисована вертикально:
- viewBox 640x1060, блоки 420x110, заголовки 20px, подписи 14px;
- поток сверху вниз: Устройство → (MQTT over wss, топик) → EMQX →
(бридж) → Очередь → (потребитель) → PostgreSQL → (REST) →
API / Консоль;
- ярлык перехода слева от стрелки, пояснение справа;
- подложка «ПЛАТФОРМА» пунктиром вокруг EMQX/Очередь/PostgreSQL.
- На странице ширина схемы ограничена 640px (вся ширина карточки).
- v0.1.13 (digest 0450fd91b8f5) задеплоен; отдаваемый SVG идентичен локальному
(4595 байт, viewBox 640x1060). При просмотре в браузере — жёсткое
обновление (Ctrl+F5), т.к. браузер может держать старый SVG в кэше.
Makefile
+1 -1
View File
@@ -1,7 +1,7 @@
# Makefile — монолит iot-service (образ naeel/iot-service).
# Старые k8s-цели — в legacy/Makefile.old.
VERSION ?= v0.1.12
VERSION ?= v0.1.13
IMAGE ?= naeel/iot-service
LDFLAGS = -X main.version=$(VERSION)
internal/service/api/ui/landing.html
+1 -1
View File
@@ -177,7 +177,7 @@ pre code { background: none; border: none; padding: 0; }
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; }
.pipeline { width: 100%; max-width: 640px; display: block; margin: 12px auto 4px; }
</style>
</head>
<body>
internal/service/api/ui/static/pipeline.svg
+40 -42
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" width="100%" role="img" aria-label="Схема пайплайна IoT">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1060" width="100%" role="img" aria-label="Схема пайплайна IoT">
<defs>
<style>
text { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
@@ -10,62 +10,60 @@
</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"
<text x="104" y="222" font-size="12" fill="#6b7280">ПЛАТФОРМА</text>
<rect x="100" y="232" width="440" height="568" 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)"/>
<!-- Переход 1: Устройство → EMQX -->
<line x1="320" y1="158" x2="320" y2="242" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
<rect x="175" y="187" width="130" height="26" rx="8" fill="#ffffff" stroke="#d1d5db"/>
<text x="240" y="205" font-size="14" fill="#1a1a1a" text-anchor="middle">MQTT over wss</text>
<text x="345" y="196" font-size="13" class="mono" fill="#6b7280">{namespace}/</text>
<text x="345" y="216" font-size="13" class="mono" fill="#6b7280">telemetry/{device_id}</text>
<!-- Ярлыки над стрелками -->
<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>
<!-- Переход 2: EMQX → Очередь -->
<line x1="320" y1="368" x2="320" y2="452" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
<rect x="200" y="397" width="80" height="26" rx="8" fill="#ffffff" stroke="#d1d5db"/>
<text x="240" y="415" font-size="14" fill="#1a1a1a" text-anchor="middle">бридж</text>
<text x="345" y="416" font-size="13" fill="#6b7280">кладёт показания</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>
<!-- Переход 3: Очередь → PostgreSQL -->
<line x1="320" y1="578" x2="320" y2="662" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
<rect x="175" y="607" width="130" height="26" rx="8" fill="#ffffff" stroke="#d1d5db"/>
<text x="240" y="625" font-size="14" fill="#1a1a1a" text-anchor="middle">потребитель</text>
<text x="345" y="626" font-size="13" fill="#6b7280">пишет в базу</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>
<!-- Переход 4: PostgreSQL → API / Консоль -->
<line x1="320" y1="788" x2="320" y2="872" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
<rect x="205" y="817" width="70" height="26" rx="8" fill="#ffffff" stroke="#d1d5db"/>
<text x="240" y="835" font-size="14" fill="#1a1a1a" text-anchor="middle">REST</text>
<text x="345" y="836" font-size="13" fill="#6b7280">чтение истории</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>
<rect x="110" y="40" width="420" height="110" rx="12" fill="#ffffff" stroke="#d1d5db"/>
<text x="320" y="102" font-size="20" font-weight="600" fill="#1a1a1a" text-anchor="middle">Устройство</text>
<text x="320" y="128" font-size="14" 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>
<rect x="110" y="250" width="420" height="110" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
<text x="320" y="312" font-size="20" font-weight="600" fill="#2563eb" text-anchor="middle">EMQX</text>
<text x="320" y="338" font-size="14" 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>
<rect x="110" y="460" width="420" height="110" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
<text x="320" y="522" font-size="20" font-weight="600" fill="#2563eb" text-anchor="middle">Очередь</text>
<text x="320" y="548" font-size="14" 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>
<rect x="110" y="670" width="420" height="110" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
<text x="320" y="732" font-size="20" font-weight="600" fill="#2563eb" text-anchor="middle">PostgreSQL</text>
<text x="320" y="758" font-size="14" 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>
<rect x="110" y="880" width="420" height="110" rx="12" fill="#ffffff" stroke="#d1d5db"/>
<text x="320" y="942" font-size="20" font-weight="600" fill="#1a1a1a" text-anchor="middle">API / Консоль</text>
<text x="320" y="968" font-size="14" class="mono" fill="#6b7280" text-anchor="middle">чтение истории</text>
<!-- Подвал -->
<text x="720" y="252" font-size="12" fill="#6b7280" text-anchor="middle">бридж и потребитель — части сервиса iot-service</text>
<text x="320" y="1038" font-size="13" fill="#6b7280" text-anchor="middle">бридж и потребитель — части сервиса iot-service</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB