HomeLab

🧠 День 12 — HomeLab NOC 2.0: интерактивная карта сети, иерархия и VM-структура

✎
15 мая 2026, 07:51
🧠 День 12 — HomeLab NOC 2.0: интерактивная карта сети, иерархия и VM-структура

Хотел довести мой /status до состояния, когда это не просто “список хостов”, а понятный NOC-экран, где за минуту видно:

  • что с сетью в целом;
  • как устроены контуры (дом / участок);
  • где находятся гипервизоры, VM и сервисы;
  • где копать, если что-то отвалилось.

При этом важно было оставить вещь управляемой вручную: не только автолейаут, но и возможность перетаскивать узлы, подписывать их под себя и сохранять раскладку.

Важно: в статье я специально обезличил имена узлов и точные данные. Логика, подход и грабли — реальные.

🎯 Зачем это делалось

Проблема старого /status была простая: он отвечал на вопрос “жив ли хост?”, но плохо отвечал на вопрос “что сломалось в системе”.

Когда есть два контура, несколько свитчей, отдельная магистраль между площадками и виртуалки — нужно видеть:

  • топологию (что к чему подключено);
  • роли узлов (шлюз/свитч/хост/VM/сервис);
  • где проблема “распространяется” вниз по дереву.

🧩 Что сделали

Схемы (быстрое понимание)

Ниже две схемы, которые помогают “схватить” идею NOC 2.0 за 20 секунд.

1) Иерархия контуров (Дом / Участок)

                (WAN/ISP)
                    |
               +----+-----+
               |  Gateway  |   (контур: Дом)
               +----+-----+
                    |
        +-----------+------------+
        |                        |
   +----+-----+            +-----+----+
   | Switch #1|            | Switch #2 |
   +----+-----+            +-----+-----+
        |                        |
     [hosts]                  [hosts]

     ===================  магистраль  ===================
                    |
               +----+-----+
               |  Gateway  |   (контур: Участок)
               +----+-----+
                    |
               +----+-----+
               |  Switch  |
               +----+-----+
                    |
              [ASIC / edge hosts]

2) Представление виртуализации (гипервизоры → VM → сервисы)

+------------------+           +------------------+
| Hypervisor A     |           | Hypervisor B     |
| (pve / node)     |           | (pve / node)     |
+----+--------+----+           +----+--------+----+
     |        |                     |        |
     |        +--> VM: template (*)  |        +--> VM: template (*)
     |
     +--> VM: srv01
     |         |
     |         +--> docker: app-1
     |         +--> docker: app-2
     |
     +--> VM: vpn01
     +--> VM: mon01

(*) templates/служебные можно скрывать в NOC, чтобы не шумели.

1) Полностью переработали интерфейс /status

Собрали новый интерактивный экран в стиле dark NOC:

  • кликабельные карточки узлов;
  • анимированные связи;
  • цветовое разделение типов соединений;
  • drag-and-drop для ручной раскладки.

2) Ввели иерархию сети

Схема теперь строится как топология, а не “россыпь карточек”:

  • центральный узел-шлюз домашнего контура;
  • ветвление через один-два свитча;
  • отдельный контур участка со своим шлюзом и свитчем;
  • выделенная магистраль между площадками.

3) Добавили представление гипервизоров и VM

Во вкладке “виртуализация” сделали отдельный рабочий стол:

  • гипервизоры как корневые узлы;
  • VM привязаны к конкретным нодам;
  • шаблоны/служебные VM можно скрывать;
  • для одного из серверов добавил вложенную структуру сервисов (например, контейнеры) отдельным уровнем.

4) Реализовали “рабочие столы” (несколько представлений)

Сверху доступны разные режимы:

  • Общая
  • Карта
  • Виртуализация
  • Дом
  • Участок

У каждого стола независимое состояние:

  • своя раскладка узлов;
  • свои переименования;
  • свои скрытые элементы.

5) Добавили карту с геоточками

Во вкладке “Карта”:

  • две площадки отмечены точками;
  • точки соединены линией;
  • карта на OpenStreetMap (Leaflet).

Координаты в статье намеренно “замылены” (порядок тот же, точность ниже):

  • площадка A: 52.22xx, 104.29xx
  • площадка B: 52.14xx, 104.30xx

6) Доработали инженерную часть роутинга линий

Самая сложная часть оказалась не UI, а аккуратная трассировка связей:

  • точки подключения к карточкам не только “центр-снизу”, а по периметру;
  • для switch — расширенный набор точек подключения;
  • маршруты в обход карточек;
  • снижение паразитных “петель”;
  • ограничение линий в пределах поля;
  • цветовая дифференциация магистральных/кластерных/обычных связей.

7) Улучшили UX ручной работы

Добавил:

  • drag-and-drop узлов;
  • сохранение позиций;
  • безопасный reset с разнесением узлов (без схлопывания);
  • авторасширение рабочей области вниз;
  • ограничения, чтобы карточки не уезжали за края;
  • переименование узлов через “карандаш”.

🧨 С какими проблемами столкнулись

По ходу всплыли практические кейсы:

  • браузерный кэш подхватывал старую версию JS;
  • часть VM не отдавала IP/данные (если агент/инструменты внутри гостя не настроены);
  • пересечения линий и “петли” на сложной раскладке;
  • при reset узлы иногда сгущались;
  • на 2K-мониторах пришлось отдельно калибровать границы и расстояния.

Все это пришлось поэтапно вылечить, иначе панель выглядела красиво, но мешала работе.

✅ Итог

Получилась не просто “status page”, а рабочая визуальная панель управления HomeLab:

  • структура сети читается сразу;
  • есть отдельные представления под разные задачи;
  • можно вручную доводить схему под эксплуатацию;
  • виртуализация и сервисы встроены в общую топологию;
  • добавлена географическая визуализация между площадками.

Следующий логичный этап: событийные алерты (например, Zabbix/n8n/Telegram) поверх уже готовой визуальной модели.

Ко всем постам