Дашборд

Що це таке

Дашборд — це сторінка з панелей, де кожна панель є запитом, перетвореним на картинку, і все розкладено так, щоб стан чогось можна було прочитати, нікого не питаючи. Та сама ідея має й інші назви: власна документація Prometheus називає їх консолями, а команда може казати просто «екран на стіні». Grafana описує свої дашборди як одну чи кілька панелей, упорядкованих у рядки або вкладки, що дають огляд пов’язаної інформації одним поглядом, а кожну панель — як контейнер для візуалізації, побудованої на запиті до джерела даних. Таким джерелом може бути сховище часових рядів, база даних SQL, API або звичайний файл CSV.

Панелі мають кілька форм. Лінія в часі показує тенденцію: зайняту пам’ять за останню добу, запити за хвилину за останній тиждень. Одне велике число відповідає на питання «скільки просто зараз». Індикатор показує значення в межах відомого діапазону, наприклад зайняте місце на диску з усього доступного. Таблиця перелічує те, що потребує уваги, по одному рядку. Лампочка статусу каже «працює» чи «лежить». Більшість добрих дашбордів використовують дві-три з цих форм, дібрані під питання, і дуже мало панелей кожної.

На вебсторінці ці панелі — звичайні частини інтерфейсу, і ARIA Authoring Practices Guide від W3C описує, як кожна з них має поводитися для людей, що користуються клавіатурою чи екранним читачем. Вкладки перемикають вигляди й показують одну панель за раз. Таблиця — статична сітка рядків і клітинок; grid — її інтерактивна версія, якою рухаються стрілками. Meter — шаблон для значення в межах визначеного діапазону, а alert — коротке важливе повідомлення, що привертає увагу, не перериваючи того, чим зайнятий читач. Індикатор, написаний за шаблоном meter, несе свій діапазон і показ як текст:

<div
    role="meter"
    aria-label="Disk used"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="72"
    aria-valuetext="72% (31 GB free)"
></div>

Дашборд чекає, поки на нього подивляться, і цим він відрізняється від сусідів. Сповіщення приходить до людини, коли щось перетинає межу. Звіт — це знімок, зроблений на запит і далі незмінний. Дашборд живий, і він вартий рівно стільки уваги, скільки йому хтось приділяє.

Чому це важливо

Дашборд дає команді одне спільне прочитання того, як ідуть справи. Без нього на те саме питання відповідає той, у кого саме відкритий термінал, кожен по-своєму, і двоє людей посеред інциденту можуть витратити хвилини, щоб з’ясувати, що вони дивилися на різні числа. З ним розмова починається з тієї самої картинки, а люди, які ніколи не напишуть запит, бачать, як почувається система.

Він також скорочує шлях від «щось не так» до «не так ось ця частина». Порадник Prometheus щодо консолей радить робити по одному дашборду на сервіс, і кожен показує затримку й помилки сервісів, з якими він говорить, щоб можна було почати з вершини дерева й пройти за поганими числами вниз, до сервісу, що їх спричиняє. Дашборд, розкладений за будовою системи, перетворює цей шлях на кілька кліків.

Має він і ціну. Кожна панель виконує свій запит під час кожного оновлення, на кожному екрані, де вона відкрита. Кожна панель — ще й твердження, яке хтось має тримати правдивим, коли сервіс за нею перейменовують, ділять чи виводять з роботи. Дашборд на сорок панелей має сорок таких тверджень, і більшість із них ніхто не читає.

Як це виглядає на практиці

Перший дашборд observability компанії почався зі збору CPU, RAM, диска й температури з віддалених серверів Linux через SSH, разом із контейнерами Docker. Друга версія перейшла на Grafana і Prometheus, а панелі для неї дібрали разом із командами DevOps та розробки: утилізація CPU, використання пам’яті, час безвідмовної роботи сервісів і затримка API. Він працював на великому телевізорі в офісі, де кожен, хто проходив повз, бачив стан продакшну, а поруч із ним діяли сповіщення про перевищення порогових значень. Команди виявляли й розв’язували інциденти на 40% швидше.

Пізніший дашборд моніторингу на Grafana та Prometheus називає те, що важило найбільше: метрики, які щось означали, а не показні числа, що виглядають зайнятими й нічого не повідомляють. На ці метрики потім поставили порогові значення сповіщень і вивели їх туди, де команда їх побачить, поки ще є час діяти. Команда перейшла від реактивного гасіння пожеж до того, щоб ловити проблеми, поки вони малі.

На хості з 464 МБ пам’яті те саме питання отримує іншу відповідь. Сім ролей лише для читання перетворюють живий хост на звіти Markdown на вимогу й охоплюють доступ, трафік, метрики, безпеку та інше, бо стек метрик не вміщується в цю пам’ять і не окупив би себе, навіть якби вмістився. Їхнє головне правило так само пасує будь-якому дашборду: друкувати лише ті числа, які виміряв запуск, бо звіт, який заповнює прогалину правдоподібним числом, гірший за той, що лишає її порожньою.

Де виникають проблеми

Дашборд може виглядати здоровим і все одно вводити в оману, і більшість способів походять від того, що на нього поставили.

Кожне доступне число потрапляє на екран. Кортить показати все, що система вміє виміряти. Порадник Prometheus попереджає, що так виходять консолі настільки щільні, що навіть експерту важко їх читати, і пропонує щонайбільше п’ять графіків на консоль і щонайбільше п’ять ліній на графік. Почніть з імовірних збоїв і показуйте те, що їх розрізняє.

Показні числа займають місце. Загальна кількість запитів від запуску лише росте, а кількість зареєстрованих користувачів мало каже про сьогодні. Вони виглядають зайнятими й не змінюють жодного рішення. Віддайте панель числу, яке змусило б когось діяти, якби воно зрушило.

Один дашборд намагається служити всім. Те, що потрібно черговому інженеру вночі, а саме що зламалося, відрізняється від того, що потрібно розробнику, який будує функцію, наприклад скільки людей натрапляє на певний граничний випадок. Порадник Prometheus прямо каже, що один набір консолей рідко служить обом, і два набори працюють краще.

Колір несе все повідомлення. Ряд червоних і зелених точок нічого не каже тому, хто не розрізняє червоне й зелене, ані на монохромному екрані. Критерій успіху 1.4.1 у WCAG 2.2, рівень A, каже, що колір не повинен бути єдиним візуальним способом передати інформацію; додайте слово, форму чи положення. За 1.4.11, рівень AA, частини графіка, потрібні для його розуміння, мають мати контрастність щонайменше 3:1 щодо сусідніх кольорів, і тонкі пастельні лінії на білому тлі часто до неї не дотягують.

Індикатор натякає на стелю, якої немає. Шаблон meter в APG призначений для значення в межах визначеного діапазону, а його власна примітка застерігає від використання для значення без змістовного максимуму чи для прогресу. Запити за секунду не мають природної стелі, тож циферблат для них її вигадує й робить звичайну завантажену годину схожою на аварію. Беріть натомість лінію в часі.

Екран чекає на глядача, який пішов додому. На дашборд на офісному телевізорі о третій ночі ніхто не дивиться. Проблеми, що потребують людини, належать сповіщенням, і порадник Prometheus щодо сповіщень радить сповіщати про симптоми, які відчувають користувачі, і посилатися з кожного сповіщення на консоль, що допомагає знайти несправну частину. Сповіщення кличе людину, а дашборд — місце, куди вона приходить.

Що почитати далі

• Grafana: Dashboards — панелі, рядки, джерела даних, запити й перетворення, як їх визначає один поширений інструмент.
• WAI-ARIA Authoring Practices Guide: Patterns — як вкладки, таблиці, grid, meter і alert мають поводитися для користувачів клавіатури й екранних читачів.
• Prometheus: Consoles and dashboards — правило п’яти графіків і п’яти ліній та аргумент за одну аудиторію на набір.
• Prometheus: Alerting — сповіщення про симптоми й посилання з кожного сповіщення на консоль, що його пояснює.
• Understanding WCAG 2.2: Use of Color — чому сам колір не може нести статус, із прикладами.
• Understanding WCAG 2.2: Non-text Contrast — контраст 3:1, потрібний лініям графіків і частинам інтерфейсу.