UX/UI
Front-end

Платформа автоматизации и исправления инцидентов для операторов ПО

ОТРАСЛЬ
Облачные сервисы
ТЕХНОЛОГИИ
ReactJS,
Highcharts,
Material UI
КОМАНДА
9 человек
О ПРОЕКТЕ
Это система для облачных сервисов. Она позволяет настроить мониторинг ресурсов и автоматизировать процесс устранения неполадок в своих серверных парках.

Её используют для сокращения количества ручной работы и повышения доступности инфраструктуры в любое время дня и ночи, без необходимости подключения к серверам по SSH.

Shoreline.io — единственный сервис, который предоставляет возможность DevOps инженерам задать последовательность действий, которая будет выполнена без их участия, если на ресурсе сработает тревога. Эта последовательность исправит проблему, а после пришлет сообщение об успехе.
О КЛИЕНТЕ
Наш клиент привлёк почти 22 миллиона долларов всего за 1 раунд инвестиций. И ещё 35 миллионов долларов за второй раунд. Основатели компании работали с AWS и с самого начала были сосредоточены на повышении доступности услуг. Они хотели предоставить миру сервис, который помогал бы управлять большим количеством ресурсов и практически автоматически решать все возможные проблемы с их доступностью.
ЗАДАЧИ
Проект был разделен на три части. А вся разработка велась параллельно.

  • Бэкенд команда в Сан-Франциско, США.
  • REST API делала команда в Румынии.
  • UX/UI и фронтенд делали мы в Aspirity.

Нам нужно было создать «внешнюю» оболочку сервиса, сделать её функциональной и понятной для всех DevOps инженеров.

Мы также разработали логику и систему оптимизации, чтобы сервис работал с большими объёмами данных и множеством динамических графиков, корректно обрабатывался и вовремя обновлялся. При этом все данные должны всегда отображаться корректно, без лагов и подвисаний. Вплоть до 1 секунды.
РЕАЛИЗАЦИЯ
Работу мы начали с исследования процессов управления проектами с точки зрения пользователя, а также определили какие графики и в каком виде лучше использовать и как всё визуально оформить.

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

Мы искали и тестировали каждый продукт локально, делали скриншоты. А всю полученную информацию обработали так, что можно было ссылаться на неё в процессе разработки дизайна. В итоге, отдел дизайна предложил 5 концептов, часть из которых мы сверстали и сделали для них живой код.

Такое исследование помогло получить референсы, на которые можно было опираться в процессе разработки.
Основная сложность проекта — отображение большого количества графиков.

Запросить, получить и корректно отобразить эти данные быстро и так, чтобы ничего не сломалось и не легло — непростая задача. И вот как мы с ней справились.

Микрофронтендовая архитектура

Мы разделили проект на 13 независимых приложений, объединенных в 6 модулей. Каждый из них работает независимо от другого, что позволяет нам создавать, развертывать и загружать каждое из приложений отдельно. Это означает, что нам не нужно пересобирать каждое приложение после изменений в одном из модулей.

А ещё это помогло нам увеличить скорость загрузки для конечных пользователей, ведь так загружается не всё приложение разом, а лишь отдельные модули.

Цикл исправления

Это модуль, который починит всё сам, если сервер упал и не смог подняться.

Как? При помощи бота, который настраивается за три шага:
1. выбираем условие при котором бот начнёт работу,
2. задаём действия, которые должны быть применены, когда бот запустит все связанные и назначенные действия,
3. и наконец активируем бота, завершая цикл и настраивая последовательность действий.

И вся эта система работает не только в моменты ошибок и падений, но и по настраиваемому расписанию, например, для профилактики.

Графики. Много графиков

Все диаграммы с аннотациями и наложениями обновляются в режиме реального времени, а любое изменение отображается в течение секунды. Данные строятся в сетку, давая пользователю возможность смотреть на процесс работы в разрезе конкретной области и для конкретного пользователя.

Количество самих графиков в сетке может достигать нескольких миллионов. Пользователь может прокрутить их при помощи бесконечного скролла и посмотреть нужные ему данные как на самом графике, так и на настраиваемых оверлеях.

Кроме того, добавили возможность поиска и фильтрации по ресурсам.

Проблему производительности решили через виртуализацию для отображения графиков. Запрашиваются данные и строятся только те графики, которые пользователь видит на экране. Когда пользователь прокручивает страницу вниз, часть графиков удаляется из памяти и заменяется другими. Таким образом поддерживается определенное количество графиков, с которыми пользователь может взаимодействовать. Причем это значение может настраивать он сам.

Зум

У нас есть большой объем динамически обновляемых данных, которые мы должны правильно отобразить. Одним из решений для этого стал зум области. Он позволяет просматривать подробные данные с разрешением в 1 секунду.
Оверлеи
Пользователи могут установить пороговое значение, которое показывает, как метрика менялась с течением времени. Или же они могут установить диапазон и проверить, как изменилась метрика в нём.

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

А ещё можно настроить желаемый диапазон период, изменить показатели и ресурсы, из которых берутся эти показатели, изменить тип диаграммы и выбрать, сколько столбцов будет использоваться для отображения графиков. И, конечно, отсечь всё ненужное.

Примечания

Они используются для возникающих сообщений об ошибках. Мы размещаем их на графиках, а точки привязываем к определенному моменту времени и конкретному ресурсу, где они произошли. Так DevOps инженер сразу сможет найти связь между произошедшей ошибкой и причинами её возникновения.
РЕЗУЛЬТАТ
Мы помогли Shoreline воплотить идею в жизнь, став частью большой команды.

Несмотря на обширную географию команд проекта, мы выстроили грамотный процесс управления и асинхронную работу в разных часовых поясах. Как?

Нам в этом помогали ежедневные встречи со всеми командами. А также постоянное общение и обмен опытом. Они же помогали нам найти решение для любой ситуации.

В итоге мы совместно создали сервис для таких компаний, как Incorta, Dataiku, TigerGraph и Domino Data Lab.
Photo by Jacob
Photo by Leio
Photo by Jacob
Photo by Marion
Photo by Jacob
Photo by Shifaaz
Photo by Mike
Photo by Jason
Photo by Sven
Photo by Ed
Photo by David
Photo by Hal
ОТЗЫВ
Алай Десаи
Продуктовый менеджер Shoreline.io

Aspirity работает в качестве надежной оффшорной команды веб-разработчиков для DevOps стартапа. Они всегда ведут конструктивную дискуссию и ищут разные решения. Aspirity — это технически способная, опытная и гибкая компания.
КОМАНДА
Иван Грищенко
Тех.лид
Анна Казанцева
Менеджер проекта и инженер по качеству
Евгений Гринин
Senior Разработчик
Константин Носарев
Middle Разработчик
Владислав Хайретдинов
Middle Разработчик
Егор Кряжевских
Junior Разработчик
Сергей Красков
Инженер по качеству (автотесты)
Дмитрий Косенков
Инженер по качеству
Мария Демешева
UX/UI дизайнер
СТЕК ТЕХНОЛОГИЙ
потрясающая идея
Если хотите разработать что-то похожее или у вас есть
Назначьте встречу
Просто нажмите кнопку ниже и...