Оформление данных в SAYMON

Всем привет!

В этой заметке я расскажу о том, как сделать немного симпатичнее вашу копию SAYMON (он же называется официально и напыщенно, согласно Росреестру и прочим формальностям – Программный комплекс «Центральный Пульт»).

Допустим, мы хотим получить что-то вроде вот этого:

В качестве фона здесь может быть не фотка Юры из Геленджика, а ваша любимая фотка или какой-нибудь фон, отражающий рабочий процесс.

Все просто.

Вам не потребуется глубоких навыков, но все-таки с помощью аникейщика или имитатора разработчика этот вопрос не решить. SAYMON имеет встроенный конструктор интерфейсов, который часто решает килограммы проблем по моделированию, созданию и адаптации интерфейсов. И да, вы можете моделировать их в браузере, а потом заложить в ваш любимый скприт-язык для автоматизации "штамповки" копий таких интерфейсов или тиражирования иного рода – скажем, разных графиков на одном экране.

Окей, когда мы пишем "все просто", то рассчитываем на грамотного человека, который знает как и где брать данные, как их интерпретировать и визуализировать. Скажем прямо, для "чистого бизнеса" потребуется системный интегратор или услуги ИТ-подразделения. Компаниям, работающим в сфере создания цифровых продуктов, нужно будет потратить немного времени на то, чтобы освоить небольшую специфику стандартных для индустрии инструментов типа CSS (для адаптации WEB интерфейса) или Python, например, для автоматизации создания объектов через API.

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

И еще один момент… для создания объектов и манипуляции с ними вам потребуются права. Если вы админ – вы можете все. Если админ не вы, то потребуйте себе прав побольше. Пусть и только в вашей ветке дерева объектов, но все же побольше! Иначе можно не увидеть часть закладок и информационных элементов. Впрочем, это может быть и плюсом, когда вы мастер своего пространства, а другие могут только смотреть. Да и к тому же увидят они только то, на что вы с админом дадите разрешение.

Итак, допустим, вы создали объект и подложку. Сам процесс, совершаемый в несколько кликов, мы здесь опустим. Это можно понять без шпаргалки (интуитивно) или воспользоваться документацией на https://wiki.saymon.info. Вот как (примерно) может выглядеть ваш экран:

Начнем с данных. Кликаем на объект и попадаем в end-view, в секции "Мониторинг" выбираем доступного вам агента, HTTP-сенсор и вводим любимый (тестируемый) URL. Это также описано в wiki, так что не будем терять время попусту. Можно также все сделать одним HTTP-запросом через API, но об этом – чуть позже. В итоге в секции «Данные» мы получим что-то типа:

Первое, не обязательное, но эстетически полезное упражнение – отсечь лишнее и оставить в системе только нужное. Для этого посетим секцию "Правила формирования данных" (или stat-rules) и введем там такое "заклинание":

[
{
"actions": [
{
"type": "set",
"field": "Отклик HTTP(s), ms",
"value": "{{new.responseTimeMs}}"
},
{
"type": "set",
"field": "Статус HTTP(s)",
"value": "{{new.statusCode}}"
},
{
"type": "set",
"field": "Порог скорости, ms",
"value": "120"
},
{
"type": "drop",
"exclude": [
"Отклик HTTP(s), ms",
"Статус HTTP(s)",
"Порог скорости, ms"
]
}
]
}
]

Понять суть этой инструкции не так уж и сложно, особенно если вы были внимательны к исходным данным. В документации, в целом, неплохо описано все, что здесь наворочено, но могут быть варианты. И это – только один из них. Здесь мы оставляем для дальнейшей работы (и, кстати, хранения в истории) только нужный нам "Отклик", а также на всякий случай – "Статус" и "Порог" скорости для визуализации и классификации скорости отклика.

После прихода следующего экземпляра измерений ваши данные станут заметно приятнее на вид и лучше восприниматься:

Ну и внимательный читатель, конечно, заметит кнопочку "</>", которая даст возможность посмотреть на данные с чуть более профессиональной стороны (попробуйте убрать stat-rules и посмотреть на то, что "прилетает" от агента, осуществляющего тестирование вашего ресурса…):

Агенты, кстати сказать, – важная штука. Вы можете поставить их в разных местах. Скажем, в разных городах или у разных операторов связи. Сможете опрашивать ваши (или соседские) ресурсы с разных точек, понимать где что и как работает – красота! Бывает жизнь и без агентов, но это – история другой повести, целую книгу можно написать...

Дальше можно (нужно!) задать правила перехода состояний объектов, для чего можно воспользоваться, например, встроенным графическим конструктором:

В упомянутом конструкторе есть возможность простого выбора и сравнения поступающих данных с порогами или шаблонами текста и возможность задать "мессадж", который будет использоваться для сообщения об аварии или предупреждении во всех соответствующих интерфейсах и каналах уведомлений (тоже крайне интересная тема, но мы здесь – немного о другом).

Внимательный заметит здесь, что не везде мы выбрали данные – где то есть фигурные скобки. Возможность использовать значение экземпляра данных в формуле доступна при нажатии пользователем на карандашик или при переходе в режим редактирования текста условий (уже знакомая нам кнопка "</>"):

[
{
"condition": {
"Статус HTTP(s)": {
"_neq": "200"
}
},
"state": 5,
"description": "Код не 200!"
},
{
"condition": {
"_formula": {
"definition": "{{Отклик HTTP(s), ms}}/{{Порог скорости, ms}}",
"value": {
"_lt": "1"
}
}
},
"state": 3,
"description": "Всё норм)"
},
{
"condition": {
"_and": [
{
"_formula": {
"definition": "{{Отклик HTTP(s), ms}}/{{Порог скорости, ms}}",
"value": {
"_gt": "0.8"
}
}
},
{
"_formula": {
"definition": "{{Отклик HTTP(s), ms}}/{{Порог скорости, ms}}",
"value": {
"_lt": "1"
}
}
}
]
},
"state": 4,
"description": "Близко к порогу скорости"
},
{
"condition": {},
"state": 5,
"description": "Медленный отклик или вообще нет отклика!"
}
]

Понятное дело, что "копи-пейст" в этом режиме во многом облегчает жизнь. Хочешь – в заметку из заметки копируй, хочешь – между тестовым и промышленным контуром правила переноси. Хочешь – смоделированное в свою программу занеси, хочешь – посмотри как платформа заданное через программу восприняла и обработала. Оч удобная тема. Сам постоянно пользуюсь.

Далее не составит труда добавить нужный график и накинуть пару виджетов:

Описывать каждый шаг в заметке будет прям очень долго и нудно, хотя, на самом деле, все просто. Настолько просто, что "уверенный пользователь ПК" справится. Есть дока (wiki) и … пожалуй, мы запишем видео на базе этой заметки.

При добавлении виджетов можно назначить то, что вы хотите показать – текущее значение метрики или агрегат (минимум, максимум или среднее на периоде), можно также указать период отображения данных метрики или метрик на графике. Здесь есть небольшие хитрости и видео, действительно, будет уместно. Сделаем!

Заметим лишь, что сейчас на скриншоте виден ноль значений в начале – и это нормально, со временем он уйдет за горизонт наблюдений, хотя время всегда можно будет "отмотать" к началу измерений, да и вообще к любому моменту. SAYMON хранит данные со скважностью (частотой записи), которая задана администратором в конфигурации – каждое измеренное значение пишется в историю, каждую минуту или каждый час. Особенность здесь в том, что метрики во времени не обедняются. Современные технологии позволяют обеспечивать скоростное и долгосрочное хранение метрик – быстрые графики и машинный анализ. Хотя здесь мы пишем про красоту.

Итак, если подняться на один шаг вверх по иерархии объектов у нас на экране будет показано нечто вроде вот такой картины. В целом… это еще не совсем то, что мы хотели.

С подложкой все штатно: открываем свойства и добавляем фон:

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

В свойствах подложки, в соседней вкладке "Стили", для чуть большей красоты добавим еще:

.object { border: none; }
.caption {display: none; }

Получим уже близкое к цели прекрасное:

Далее идем в инфо-модал (кнопка i ) объекта, тоже на вкладку "Стили":

И в нижней секции добавляем такое заклинание:

.conner-image { display:none; }

.state-1 ~ .background .object-background-color { background-color: transparent !important; }
.state-3 ~ .background .object-background-color { background-color: transparent !important; }
.state-4 ~ .background .object-background-color { background-color: transparent !important; }
.state-5 ~ .background .object-background-color { background-color: transparent !important; }

.tickLabel {display:none; }
.widget-chart { margin-top: -60px; }
.js-chart { height: 110px !important; width: 340px !important; margin-left: -40px;}

.widget-content { font-size: 30px !important; }
.odometer { z-index: 1000; font-size: 1.8em; top: .1em;}
.odometer-wrap { line-height: 1.0 !important; }
.odometer-value { background: white; }
.widget-box-resize { min-height: 50px !important; min-width: 270px !important; }

.object { border: none; background-color: white; color: #404040; overflow-y: hidden; overflow-x: hidden; }

.state-3 .odometer { color: green !important; }
.state-4 .odometer { color: orange !important; }
.state-5 .odometer { color: red !important; }

В верхней секции рекомендую задать ширину и высоту:

width: 300px;
height: 120px;

В итоге у нас получится, то что мы и хотели:

Далее можно переименовать объект, чтобы вы или ваш заказчик были полностью счастливы. Замечу, что использованные в данной заметке стили приведут еще и к тому, что на темном фоне ваше изображение будет иметь белый виджет с темными буквами. Это тоже можно переопределить и сделать представление близким к совершенному:

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

Если вы хотите все ваши объекты или объекты определенного класса видеть в такой форме, то можно задать стили не для конкретного объекта, а для их множества – через файл описания стилей saymon.local.css. Для этого вам уже точно понадобится титул администратора и, в текущей версии, – доступ к файловой системе сервера.Обычное местоположение файла – /usr/local/saymon.local/css/saymon.local.css, и URL в духе https://demo.saymon.info/saymon.local/css/saymon.local.css.

Там мне помогают заклинания типа:

.class-621fda39e82f973d9db37e70 > .state-1 ~ .background .object-background-color { background-color: transparent !important; }
.class-621fda39e82f973d9db37e70 > .state-3 ~ .background .object-background-color { background-color: transparent !important; }
.class-621fda39e82f973d9db37e70 > .state-4 ~ .background .object-background-color { background-color: transparent !important; }
.class-621fda39e82f973d9db37e70 > .state-5 ~ .background .object-background-color { background-color: transparent !important; }
.class-621fda39e82f973d9db37e70 > .state-7 ~ .background .object-background-color { background-color: transparent !important; }
.class-621fda39e82f973d9db37e70 > .state-9 ~ .background .object-background-color { background-color: transparent !important; }

где абракадабра 621fda39e82f973d9db37e70 – это идентификатор созданного класса.

Иными словами, если вы – старший товарищ и друг своих коллег, то можете сильно облегчить им жизнь, создав пресеты отображений, с которыми ваши коллеги станут ощутимо продуктивнее, а скрипты – короче.

Скрипты… скрипты достойны отдельной заметки.

Итого – теперь мы можем творить красоту!

С меня – заметка о том, как это дело заскриптовать и автоматизировать. Плюс – видео о том, как это все "накликать". А может быть и видео со скриптом.

Ну и напоследок – еще несколько примеров того, что можно накликать или налить скриптами. Спасибо за чтение!

Заметили часики в области верхнего правого угла?... Они позволят вам выбрать диапазон отображаемых данных. Значит, все агрегаты (минимумы, максимумы, средние, персентилии) пересчитываются в соответствии с заданным диапазоном, и графики тоже перестроятся на указанный временной отрезок. Это удобно для масштабирования времени: можно выбрать интересующий диапазон от и до конкретных временных точек.

Еще одна кнопка, которая постоянно попадается на глаза – это "листок с буквой х". Если нажать ее в данном месте, то на ваш компьютер скачается самый настоящий XLSX-файл с временными рядами и графиками. Это – еще один способ предоставить бизнес-пользователям возможность не приходить к сильно умным людям со слишком простыми запросами и не раздражать их.

Бизнес-пользователям можно (нужно) сделать отдельную учетку, в которой они не увидят элементов управления и настройки, а только сам конечный результат. Таким образом вы избавитесь от лишних вопросов с их стороны. Как говорится – каждому свое, что определяется в правах учетки.