Привет, хабровчане!
В прошлой статье я рассказывал про интеграцию Alertmanager с Jira и упоминал, что мы переходим на EvaTeam - российский аналог Jira. Переход состоялся, и — спойлер — продукт действительно классный. Но есть нюансы.
Проблемки
Без иронии могу сказать что сделали они очень много на волне импортозамещения. Но сказать что всё на уровне Jira, ну… кхм… будет некоторым преувеличением конечно. Мы конечно шлём багрепорты и пытаемся с этим жить, некоторые исправления ждём в следующем и следующем квартале… Но ведь мы сами с усами, программисты, значит многое можно исправить и поверх!
Ну и начнём с просмотра бизнес-процессов (workflow)
Пожалуй это ключевая вещь при переезде - вы должны как-то настроить в проекте бизнес-процесс (workflow) и потом работать по нему, чтобы команда одинаково представляла что и как в каждый момент времени нужно делать.
И вот тут приходит первое удивление. Если вы работаете с EvaTeam и пытаетесь посмотреть схему процесса (workflow), вы увидите примерно вот это:
И это я привёл ещё один из самых простых. Просто он хоть на картинку помещается, потому что посмотреть большой даже не удастся на экране, не говоря уже подвинуть или масштабировать.
Статичная картинка без какой-либо интерактивности, где узлы и переходы свалены в кучу. Разобраться в процессе из десятка статусов — задача нетривиальная. Перетащить ничего нельзя, масштабировать невозможно, сохранить собственное расположение элементов — тоже никак.
EvaTeam — продукт перспективный, думаю, года через 2–3 некоторые (многие) подобные детские болячки исправят конечно, но сейчас им явно не до этого - нужно сначала сделать чтобы зависимости задач хотя бы считались 😁. Но работать нам нужно уже сейчас.
Решение
Я написал userscript, который заменяет встроенное представление workflow на интерактивную визуализацию: evateam-workflow-enhance.user.js.
После установки workflow выглядит так:
Установка
Userscript работает через браузерное расширение, например Tampermonkey (вы можете использовать и другое, например Violentmonkey, Greasemonkey и подобные):
После установки расширения — просто перейдите по ссылке на последний релиз. Tampermonkey предложит установить скрипт.
Совет: включите автообновления в настройках расширения — скрипт настроен на автоматическое получение новых версий.
Скрипт активируется автоматически на всех сайтах, начинающихся с поддомена eva. (т.е. https://eva.*), так что дополнительной настройки не требуется.
Основные возможности
Интерактивная схема процесса
Статичная картинка заменяется на граф на базе SvelteFlow. Узлы (статусы) и рёбра (переходы) можно перетаскивать, свободно расставляя для читаемости.
По умолчанию применяется автоматическое расположение узлов, так, чтобы максимально компактно и понятно их поместить. При этом без наложения блоков и с минимальным пересечением связей.
Дальше, вы можете перетаскивать и расставлять как вам захочется, чтобы добиться удобной именно вам картины. При необходимости всегда можно также сбросить в автоматическое одним кликом.
Появляется описание статусов
Уж не знаю почему, но оказывается в АПИ есть описание статусов, которое они просто не показывают! Это мы тоже исправляем - есть иконка, и при клике всегда можно прочитать что нужно делать именно тут
Сохранение раскладки в localStorage
При первом открытии workflow применяется автоматическая раскладка. После ручного изменения расположения узлов позиции сохраняются в localStorage и восстанавливаются при следующем открытии того же процесса. То есть вам не придётся делать это каждый раз при открытии из раза в раз.
Отслеживание изменений процесса
Сохранённая раскладка привязана к хешу структуры процесса. Если процесс изменился с момента последнего сохранения — раскладка сбрасывается автоматически, а пользователь получит этом уведомление. Так сказать, чтобы не было сюрпризов
Переключение между представлениями
Оригинальное отображение никуда не девается — можно переключаться между встроенным видом EvaTeam и улучшенным через вкладки.
Как это устроено внутри
Стек намеренно простой:
Svelte 5 — UI-компонент для вкладки с новым представлением
SvelteFlow — библиотека интерактивных графов (React Flow, но для Svelte)
Vite — сборка в единый
dist/evateam-workflow-enhance.user.jspnpm — управление зависимостями
Почему в виде UserScript?
Ну я не разработчик EvaTeam и никак с ними не аффилирован (просто наша компания купила этот продукт). У меня нет возможности предложить им пулл-реквест чтобы улучшить ту или иную функциональность - продукт проприетарный, исходного кода нет.
А так мы получаем быстро, дёшево и сердито - любые фичи можно добавить очень быстро, и независимо от вендора!
Итого
Решение закрывает одну конкретную боль: смотреть на workflow в EvaTeam стало не так страшно. Если вы тоже используете EvaTeam и сталкивались с этой проблемой — попробуйте, установка занимает минуту.
Любой фидбек, баг-репорты и предложения по улучшению — буду рад видеть в issues репозитория или в комментариях к статье.
