Создание экранов в Grafana
==========================
#. Установим платформу: :ref:`installation`.
#. Запускаем на исполнение скрипт ``./run_one_app.sh``.
#. Создаём какую-либо модель (см. примеры: :ref:`examples`).
   
   .. note::
      Каждый пример содержит описание того, как отображать данные в Grafana.
#. Открываем браузер и в строке адреса вводим: 
   ``http://<имя вашего компьютера>/grafana``.

   В качестве имени пользователя и пароля введите ``admin``.
   При первом входе будет предложено сменить пароль.
#. Регистрируем в Grafana платформу как новый источник данных,
   для чего открываем меню и выбираем команду ``Add new connection``:

   .. image:: pics/01.add_new_connection.png
#. В появившемся списке плагинов выбираем "JSON API":

   .. image:: pics/02.json_api.png

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

   .. image:: pics/03.install_json_api.png

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

   .. image:: pics/04.add_new_ds.png

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

   .. image:: pics/05.setup_ds.png

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

   .. image:: pics/06.save_and_test.png

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

   .. image:: pics/07.new_dashboard.png

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

   .. image:: pics/08.new_panel.png

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

   .. image:: pics/09.select_ds.png
#. Откроется окно настройки панели с выбранным источником данных 
   и нужным нам типом панели - "Time Series":

   .. image:: pics/10.panel_settings.png
#. Настроим параметр ``Path``:

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

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

   .. note::
      Подробно запрос к платформе на получение данных описан в разделе 
      :ref:`data_api`

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

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

   .. image:: pics/13.query_inspector.png

   ...затем ``Refresh``:

   .. image:: pics/14.refresh.png 

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

   .. image:: pics/15.got_data.png 

#. Теперь нам необходимо объяснить графане, как из полученного массива данных
   выбрать необходимые. 
   
   Для этого переходим в закладку ``Fields`` и настраиваем её так, как показано на рисунке:

   .. image:: pics/16.fields.png 

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

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

   .. image:: pics/17.trend.png 

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

  .. image:: pics/18.periods.png