Отображения потоков данных в реальном времени: диаграмма Сэнки
Привет! Меня все еще зовут Таня, я все также живу в Нидерландах и в одиночку воспитываю 4 котов. В перерывах я веду канал «ИТ для тугосерь» и немного пишу для DOU. В прошлый раз я говорила о важности (или неважности) софтскилов в отдельно взятой Голландии, а сегодня хочу рассказать о диаграмме Сэнки — одном из вариантов визуализации нашей работы, внедренном нами в ходе последней инновационной недели. Статья будет полезна, если вы, как и мы, никак не найдете приемлемый инструмент для визуализации своей работы, а также если вы просто очень большой поклонник графиков и чартов.
Сначала немного предыстории
Последний год я работаю в компании, которая предоставляет платежный сервис (PSP). По сути, этот сервис у нас только один. Но он как айсберг: снаружи видно гораздо меньше, чем скрыто под водой. Казалось бы, все просто: я прихожу в магазин, делаю покупку, расплачиваюсь картой, и деньги перетекают продавцу. На самом же деле они не попадают сразу на банковский счет продавца, а проходят сначала через нас. Мы делаем много проверок, включая обнаружение всяческих попыток мошенничества, и уже потом отправляем деньги дальше.
Наш СТО — большой поклонник Spotify, поэтому все отделы разработки (а их несколько в разных странах) разбиты на трайбы. Каждый трайб отвечает за свой участок. Конкретно тот, в котором работаю я, — за бэк транзакций. Грубо говоря, мы берем транзакции на входе, проверяем их на соответствие разным всяким вещам и отдаем на выход те транзакции, которые эти сверки прошли.
Наш проект — это куча микросервисов, связанных друг с другом, но никак не связанных ни с каким GUI. То есть максимум, что мы можем показать на ревью и в ежеквартальных отчетах, это какая-нибудь картинка из RabbitMQ или красиво оформленный большой запрос к базе данных, который, по сути, вернет нам несколько цифр. Наше визибилити из-за этого сильно страдало, потому что, пока остальные команды показывают красивые интерфейсы и клацают кнопки, мы рассказываем, какие мы крутые и сколько миллионов транзакций можем обработать за день. Но при этом показать ничего не можем. А всем известно, что менеджеры всех мастей очень любят красивые и разноцветные картинки — и дайте две.
Мы попытались решить эту проблему рассылкой ежедневных писем с отчетами: сколько транзакций мы получили за предыдущие сутки с почасовой разбивкой и результатами проверок. Но опять же это просто таблица в письме. Мы туда несколько цветов добавили. Например, зеленый — это если все хорошо, а желтый — хорошо, но не очень. Это решило проблему частично. Потому что просмотр такого письма занимает полминуты. Нашей же задачей было дать менеджерам что-то, с чем можно играть гораздо дольше.
Попытки дать им доступ к какому-то дашборду типа Kibana тоже не увенчались успехом. Мы перепробовали штук 5 и сдались. А потом наш архитектор поехал в командировку в соседнюю страну для встречи с нашими испанскими коллегами. И обнаружил там гениальную в своей простоте вещь. Они взяли карту мира (а наши представительства есть в очень многих странах) и сделали на ней такую визуализацию: каждый раз, когда в мире совершается какая-то транзакция, которую мы обрабатываем, в этом месте на карте зажигается огонек. И он летит в главный офис в Амстердам. И все это выведено на большой экран прямо в холле офиса.
Понятное дело, что невозможно отследить в прямом эфире все транзакции, у нас нет такой возможности. Мы получаем данные позже и сразу кучей. Но даже если предположить, что есть, то на карте было бы сплошное месиво из летящих звезд, потому что в день мы обрабатываем очень много транзакций. То есть с технической точки зрения проект был ни о чем. Но видели бы вы глаза менеджеров и слышали бы вы их восторги по поводу такой «интерактивной карты». Так в голову нашего архитектора пришла идея о внедрении диаграммы Сэнки.
Что такое диаграмма Сэнки
Если в двух словах, то это диаграмма потоков. При этом толщина каждого из потоков зависит от количества данных в нем. Классическое представление этой диаграммы сегодня — потоки энергии на фабрике, где они разделены на производство, утилизацию и потери, а источниками при этом могут быть газ, электричество или нефть. Для нас это подходило идеально:
- У нас тоже есть потоки, которые могут быть с хорошими, отклоненными или задержанными транзакциями.
- У нас есть несколько источников, откуда мы получаем информацию об этих транзакциях.
- У нас есть порядка 10 сервисов, которые участвуют в прохождении транзакций и могут стать узлами.
- И у нас есть точка завершения.
Примечательно, что идея этой диаграммы не нова и используется она на производствах еще с 1898 года, когда ирландский капитан Мэттью Сэнки начертил эффективность работы парового двигателя в черно-белых тонах. Выглядело это тогда страшненько, но со временем добрые люди диаграмму раскрасили, спасибо им большое.
Диаграмма Сэнки чаще всего применяется в науке, особенно в физике, но нет ничего, что помешало бы нам нагло воспользоваться наработками ученых и перенести диаграмму в ИТ.
Внедрение
Я уже упоминала, что выхода в нормальный мир у нашей части проекта нет, это сплошной бэкенд. Поэтому для реализации проекта нам потребовалось создать страничку с диаграммой Сэнки с самого нуля.
Я думаю, вы слышали о библиотеке Data-Driven Documents (d3.js) для JavaScript, которая позволяет создавать всякие чарты и графики. D3 использует SVG, Canvas и HTML.
Используется она уже повсюду. Например, New York Times использует эту библиотеку для создания своих интерактивных визуальных историй. Если о ней еще не слышали, то простой туториал для начинающих можно посмотреть тут.
В d3.js имплементируется специальный плагин для создания диаграмм Сэнки, который так и называется d3-sankey. Плагин предоставляет возможность выбрать один из двух вариантов построения диаграммы: «шаг за шагом» или «выбор из блоков». Мы решили остановиться на последнем.
Данные для нашей диаграммы предоставлял Elastic. Он у нас уже был, мы настраивали его, когда ставили Kibana в надежде привлечь менеджеров к использованию дашбордов. Затея провалилась чуть менее, чем полностью, но я как тестировщик этому дашборду несказанно рада. Все данные изо всех сервисов идут туда. Плюс удобная навигация по логам на всех environments, которых у нас 5, и у всех сервисов, которых у нас чуть больше десятка.
Данные для партнеров у нас идут также через RabbitMQ, поэтому он тоже был вовлечен во всеобщую истерию. Диаграмма Сэнки демонстрировала размеры очередей, проходящих через Rabbit, в том числе и очереди с ошибками.
В итоге была создана диаграмма Сэнки, отображающая потоки за последние 24 часа с разбивкой на часовые снепшоты. Был добавлен слайдер для навигации по снепшотам и сами транзишены мы сделали анимированными.
Получилось что-то типа такого (картинка честно нагуглена, наша картинка под NDA) :(
В качестве итога
По сути, эта диаграмма показывает те же данные, что приходят в нашей ежедневной рассылке: транзакции за последние 24 часа с почасовой разбивкой и результатами проверок. Но Сэнки выглядит красиво и разноцветно. За счет легкой анимации создается впечатление, что данные на диаграмме меняются в реальном времени. А слайдер позволяет «открутить» данные немного назад.
Я не скажу, что все это привело наших менеджеров в священный трепет, но определенно имело успех. Теперь у них создается впечатление, что они контролируют процесс. Повышать визибилити всегда хорошо. Как минимум теперь управленцам кажется, что наша команда действительно делает что-то важное, ведь это можно увидеть и даже поиграть с ним.
Если у вас такая же ситуация с презентацией результатов работы, то вот вам простой лайфхак.
<sarcasm> И всего лишь неделя работы 2 разработчиков и половинки девопса. </sarcasm>
А самих диаграмм D3 может строить великое множество. Вот здесь можно посмотреть на галерею с ними.
Удачи!
