Создание экранов в Grafana

  1. Установим платформу: Установка и запуск.

  2. Запускаем на исполнение скрипт ./run_one_app.sh.

  3. Создаём какую-либо модель (см. примеры: Примеры).

    Примечание

    Каждый пример содержит описание того, как отображать данные в Grafana.

  4. Открываем браузер и в строке адреса вводим: http://<имя вашего компьютера>/grafana.

    В качестве имени пользователя и пароля введите admin. При первом входе будет предложено сменить пароль.

  5. Регистрируем в Grafana платформу как новый источник данных, для чего открываем меню и выбираем команду Add new connection:

    ../_images/01.add_new_connection.png

  6. В появившемся списке плагинов выбираем «JSON API»:

    ../_images/02.json_api.png

    …устанавливаем его:

    ../_images/03.install_json_api.png

    …и создаём на его базе новый источник данных:

    ../_images/04.add_new_ds.png

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

    ../_images/05.setup_ds.png

    В завершении нажимаем кнопку «Save & test»:

    ../_images/06.save_and_test.png

  7. Допустим, в нашей модели есть тег с идентификатором 58993cd8-f3e9-103e-97a9-c54148266c5f, для которого в исторической базе данных накоплены данные. Тогда для создания тренда для этого тега выполним следующие шаги…

  8. Создаём новый экран:

    ../_images/07.new_dashboard.png

    …и новую панель:

    ../_images/08.new_panel.png

    В появившемся окне выберем созданный нами источник данных:

    ../_images/09.select_ds.png

  9. Откроется окно настройки панели с выбранным источником данных и нужным нам типом панели - «Time Series»:

    ../_images/10.panel_settings.png

  10. Настроим параметр Path:

    ../_images/11.set_path.png

  11. Создадим новый параметр во вкладке Params (параметр, включаемый в URL запроса). Назовём параметр q, а в качестве его значения укажем строку:

    {"tagId":"58993cd8-f3e9-103e-97a9-c54148266c5f","format":true,"start":"$__isoFrom()","finish":"$__isoTo()"}

    Примечание

    Подробно запрос к платформе на получение данных описан в разделе Данные

    Заметим, что в запросе указаны функции Grafana - __isoFrom() и __isoTo(). Эти функции возвращают, соответственно, начало и конец выбранного пользователем на dashboard’е периода.

    ../_images/12.set_params.png

  12. Для проверки того, что платформа возвращает данные, нажмём кнопку Query inspector:

    ../_images/13.query_inspector.png

    …затем Refresh:

    ../_images/14.refresh.png

    …и убедимся, что платформа возвращает данные:

    ../_images/15.got_data.png

  13. Теперь нам необходимо объяснить графане, как из полученного массива данных выбрать необходимые.

    Для этого переходим в закладку Fields и настраиваем её так, как показано на рисунке:

    ../_images/16.fields.png

    Здесь верхнее поле - это значения тега, которые необходимо отобразить (синтаксис JSONPath), нижнее - метка времени.

  14. Нажимаем кнопку Apply и видим тренд с данными тега:

    ../_images/17.trend.png

  15. Можно менять периоды, выбирать частоту обновления экрана, данные будут отображаться корректно:

../_images/18.periods.png