Привет, Хабр! На связи Александр Савельев, инженер-программист, и Владислав Булыгин, старший разработчик ГК «Солар». Вместе с командой разработчиков мы занимаемся фронтенд- и бэкенд-разработкой Solar webProxy. Solar webProxy – это решение класса Secure Web Gateway (SWG), которое обеспечивает фильтрацию трафика по HTTP/HTTPS, SOCKS5, FTP, WS/WSS, решает задачи проверки файлов и зашифрованных архивов. В SWG-системе «Солара» реализован мощный контроль за пользователями, для которого требуется собственное решение для отображения различной статистики о пользователях – в шутку мы называем его Graf (P.s. рабочее название😊).
Ранее мы уже выпускали статью о том, как и почему решили написать собственную замену Grafana. После релиза первой версии Graf мы собрали обратную связь от клиентов и выпустили вторую – в Solar webProxy 4.4. Самый наглядный результат обновления – это экспорт отчётов в PDF. Теперь он работает в 22 раза быстрее. Но это далеко не всё. Рассказываем, как мы решились на обновление и как устроено внутри второй версии компонента Graf.
Что говорили клиенты о первой версии Graf?
В релизе webProxy 4.1 была выпущена первая версия собственного компонента Graf взамен зарубежного Grafana для отображения статистики на рабочем столе. Мы собирали обратную связь от клиентов, чтобы улучшить их пользовательский опыт при работе с ним. Клиентам важно было не просто получить аналог Grafana, а работать в гибком, быстром и управляемом инструменте. Все собранные точки роста – кастомизацию виджетов, изменение рабочих столов с разными правами доступа, повышение производительности и увеличение числа источников данных – мы воплотили во второй версии компонента.
Вот что мы услышали от клиентов после выхода первой версии Graf – и что изменили во второй версии:
|
Какие точки роста подсказывали клиенты |
Что изменилось после выхода версии 4.4 Solar webProxy |
|
«Хотим решать сами, какие виджеты видеть и как их расставлять». В версии 4.1 Solar webProxy было только 2 фиксированных виджета на рабочем столе. |
Большое количество рабочих столов, свободная компоновка, перетаскивание и изменение размеров виджетов |
|
«Разным администраторам нужен разный доступ к данным». В первой версии у всех пользователей был одинаковый набор рабочих столов |
Ролевая модель доступа и совместный доступ («шаринг») к конкретным столам между пользователями |
|
«Дашборды грузились медленнее, чем хотелось бы». Все виджеты отправляли запрос на сервер, даже если не были видны пользователю |
Ленивая подгрузка через Angular-блок @defer – запрос на сервер идёт только для виджетов, которые реально появились на экране |
|
«Вы работаете не только с ClickHouse. Включите дополнительную интеграцию с системами». Для этого нужна была интеграция с REST и Zabbix |
Совместимость с REST и Zabbix как источниками данных для виджетов |
|
Экспорт в PDF (через Puppeteer, скриншотами страницы) был медленным и часто «ломал» вёрстку |
Экспорт через Node.js + pdfmake – в 22 раза быстрее по результатам внутренних нагрузочных тестов |
Эти изменения заложили основу для дальнейшего масштабирования компонента Graf, который отвечает за отображение статистики. О том, как именно команда перерабатывала виджеты, внедряла поддержку новых источников данных и боролась со «слепыми» запросами – читайте ниже.
Описание второй версии компонента Graf для отображения статистики
В Solar webProxy 4.4 мы полностью переработали разделы «Рабочий стол», «Статистика» и «Мониторинг» и смогли избавиться от зависимости от Grafana.
Теперь на главной странице системы пользователь может создавать любое количество рабочих столов. Каждый из них содержит виджеты из набора (см. рисунок 3). Чтобы добавить новый виджет на рабочий стол, нужно просто выбрать интересующий вариант из списка.
На скриншоте видно несколько тематических разделов: статистика (отображение статистики пользователей в виде графиков и таблиц), администрирование (детальная информация о статусе системы), мониторинг (отображение данных из Zabbix в виде графиков) и т.д. Виджеты легко перемещаются, удаляются и изменяют размер.
Администраторам доступен экспорт как отдельных виджетов в CSV, XLS, SVG, так и всего рабочего стола целиком в формате PDF. Теперь они могут настроить совместный доступ к рабочему столу с другими пользователями.
Разделы «Статистика» и «Мониторинг» тоже переведены на новый Graf. «Статистика» содержит предустановленные рабочие столы с агрегированными данными по пользователям, «Мониторинг» – данные о статусе и нагрузке на ноды системы из Zabbix.
Как это технически устроено внутри?
Вторая версия компонента Graf реализована на Angular на фронтенде и Scala на бэкенде. Конфигурации рабочих столов хранятся в формате HOCON и передаются на фронтенд в виде JSON. HOCON выбран потому, что с ним удобнее работать благодаря возможности форматирования и комментариев. Вот пример конфигурации рабочего стола:
Рабочий стол состоит из идентификатора, названия, списка виджетов (panels), фильтров (params) и прав, необходимых для работы в нём. В свою очередь, виджеты, фильтры и колонки таблиц представляют собой отдельные файлы в том же формате HOCON, которые автоматически подставляются в сгенерированный для фронтенда JSON. Ниже пример конфигурации виджета.
У виджета могут быть собственные фильтры (params). Администратор теперь может фильтровать данные, отображаемые в таблице или графике виджета: например, по определённому периоду времени, списку пользователей, протоколам передачи данных и т.д.
Фильтр внутри виджета имеет более высокий приоритет, чем фильтр рабочего стола. Любой фильтр можно вынести из виджета на рабочий стол и сделать его действующим на все виджеты рабочего пространства. Такая схема позволяет максимально гибко настроить фильтры на одном рабочем столе.
Также в конфигурации есть параметр query.source, в котором описывается откуда берутся данные – например, из ClickHouse или REST-запроса. Параметр attr задаёт свойства для отрисовки на фронтенде: размер, координаты и др.
Для перемещения и изменения размеров виджетов используется библиотека GridStack. Она хорошо интегрируется с Angular и поддерживает все необходимые нам функции из коробки.
Для отрисовки графиков используется библиотека D3.js. С её помощью можно нарисовать любую векторную графику в формате SVG. Вся логика отрисовки была выделена в отдельную библиотеку, которая используется как на фронтенде в Angular-приложении, так и на бэкенде на Node.js – для экспорта виджетов и рабочих столов в PDF.
После создания структуры каждый виджет самостоятельно запрашивает данные с бэкенда и строит график, таблицу или другую структуру в зависимости от настроек. При этом он упакован в блок @defer, который загружает его только тогда, когда он появляется на экране пользователя. Именно так мы избавились от «слепых» запросов: незагруженный виджет не обращается к серверу за данными, а нагрузка снижается и на клиенте, и на сервере.
Теперь отдельно об экспорте в PDF. В Grafana он был реализован с помощью Puppeteer, который загружал страницу с сервисом для отображения статистики, делал с неё скриншоты и сохранял их в PDF. Это было медленно и часто приводило к проблемам с вёрсткой.
В новой версии Graf скриншоты и браузер теперь не нужны. Графики строит та же библиотека D3.js, что и на фронтенде, а Node.js для поддержки отрисовки SVG-графиков используется библиотека JSDOM. Она эмулирует большую часть API браузера в headless-режиме. В результате переформатирование рабочих столов в PDF реализуется с помощью библиотеки pdfmake. Эта замена дала ускорение экспорта в 22 раза по результатам наших нагрузочных тестов.
Первые результаты внедрения
Релиз Solar webProxy 4.4 с новым Graf вышел в начале 2026 года. Первые результаты у клиентов подсветили зону для роста: многие заказчики привыкли к интерфейсу, похожему на Grafana, и не всегда сразу понимали, как работать с новой статистикой. Команда Solar webProxy планирует сделать переход более плавным на новые версии. Один из вариантов – добавить в одной из следующих версий Product Onboarding, то есть постепенное обучающее знакомство с интерфейсом и интерактивные подсказки.
Заключение
Вторая версия Graf – это ответ на конкретные запросы клиентов: гибкие рабочие столы, разграничение доступа, ленивая подгрузка виджетов, интеграция с новыми источниками данных и экспорт в PDF, который стал быстрее в 22 раза. Мы рассчитываем, что вторая версия Graf будет полезна всем нашим клиентам, которым важно получать информацию о работе системы в реальном времени. В дальнейшем планируется добавлять новые типы графиков и продолжать улучшать пользовательский опыт.
ссылка на оригинал статьи https://habr.com/ru/articles/1053248/