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

feat(landing): hand-drawn pipeline SVG diagram; v0.1.12

Browse Source
This commit is contained in:
“Naeel”
2026-08-16 19:11:17 +04:00
parent 6f609eca4b
commit a0e73b0b7a
4 changed files with 138 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HISTORY/2026-08-16-session-log.md
+18
View File
@@ -1221,3 +1221,21 @@ paho connect() rc=0 даже при CONNACK≠0 (on_connect обязателен
- «MQTT endpoint (exqx)»: почему 400 в браузере и что делать. - «MQTT endpoint (exqx)»: почему 400 в браузере и что делать.
- v0.1.9 (digest fb488a8666ab) задеплоен, страница проверена в браузере - 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 байт).
Makefile
+1 -1
View File
@@ -1,7 +1,7 @@
# Makefile — монолит iot-service (образ naeel/iot-service). # Makefile — монолит iot-service (образ naeel/iot-service).
# Старые k8s-цели — в legacy/Makefile.old. # Старые k8s-цели — в legacy/Makefile.old.
VERSION ?= v0.1.9 VERSION ?= v0.1.12
IMAGE ?= naeel/iot-service IMAGE ?= naeel/iot-service
LDFLAGS = -X main.version=$(VERSION) LDFLAGS = -X main.version=$(VERSION)
internal/service/api/ui/landing.html
+48 -3
View File
@@ -143,6 +143,41 @@ pre code { background: none; border: none; padding: 0; }
line-height: 1.7; line-height: 1.7;
} }
.hint-box code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; } .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> </style>
</head> </head>
<body> <body>
@@ -172,10 +207,20 @@ pre code { background: none; border: none; padding: 0; }
<div class="card-body"> <div class="card-body">
<p>Устройство (датчик, бойлер, счётчик) отправляет показания по протоколу <p>Устройство (датчик, бойлер, счётчик) отправляет показания по протоколу
MQTT. Дальше показания проходят по цепочке и попадают в базу данных:</p> MQTT. Дальше показания проходят по цепочке и попадают в базу данных:</p>
<div class="hint-box"> <img class="pipeline" src="/static/pipeline.svg" alt="Схема пайплайна IoT">
устройство → <code>MQTT (wss)</code> → очередь <code>iot-telemetry</code> <div class="flow-caption">
→ <b>PostgreSQL</b> → API / консоль Между брокером и базой работают бридж и потребитель (части iot-service):
бридж кладёт показания в очередь, потребитель пишет их в базу.
</div> </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"> <p style="color:#374151">
У каждого устройства — свои логин и пароль, поэтому чужое устройство не У каждого устройства — свои логин и пароль, поэтому чужое устройство не
сможет писать в ваш топик. Данные разных проектов (namespace) лежат в сможет писать в ваш топик. Данные разных проектов (namespace) лежат в
internal/service/api/ui/static/pipeline.svg
+71
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB