Grafana JSON Model

Дашборды в графане представляются json-объектами которые хранят метаданные дашборда. Метаданные включают в себя свойства дашборда, метаданные из панелей, переменные для шаблонизирования, запросы панелей итд

Когда пользователь создает новый дашборд, инициализируется json со следующими полями:
id - не известен пока дашборд не сохранят (айди назначает сервер)

{
  "id": null,
  "uid": "cLV5GDCkz",
  "title": "New dashboard",
  "tags": [],
  "timezone": "browser",
  "editable": true,
  "graphTooltip": 1,
  "panels": [],
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {
    "time_options": [],
    "refresh_intervals": []
  },
  "templating": {
    "list": []
  },
  "annotations": {
    "list": []
  },
  "refresh": "5s",
  "schemaVersion": 17,
  "version": 0,
  "links": []
}

Панели это строительные блоки дашборда, они содержат запросы к датасорсам, типы графиков, алиасы итд. JSON секции panels содержит массив JSON объектов, каждый из которых отражает отдельную панель
Многие поля являются общими для всех панелей, но некоторые поля зависят от типа панели
Ниже пример текстовой панели:

"panels": [
  {
    "type": "text",
    "title": "Panel Title",
    "gridPos": {
      "x": 0,
      "y": 0,
      "w": 12,
      "h": 9
    },
    "id": 4,
    "mode": "markdown",
    "content": "# title"
  }
]

Размер панели и позиционирование

• w - 1-24 - ширина панели (ширина дашборда - 24)
• h - высота панели в юнитах, каждый юнит по 30px
• x - позиция по оси X, те же единицы измерения что и у w
• y - позиция по оси Y, те же единицы измерения что и у h

Сетка имеет негативную гравитацию (панели двигаются вверх если их ничего не ограничивает в этом)

...
"panels": [
  {
    "type": "text",
    "title": "Panel Custom Title",
    "gridPos": {
      "x": 0,
      "y": 0,
      "w": 12,
      "h": 9
    },
    "id": 1,
    "mode": "markdown",
    "content": "# title  \n__bold text__"
  },
  {
    "type": "text",
    "title": "Panel Custom Title #2",
    "gridPos": {
      "x": 6,
      "y": 1,
      "w": 12,
      "h": 9
    },
    "id": 1,
    "mode": "markdown",
    "content": "# title  \n__bold text__"
  }
],
...

timepicker
Это autorefresh выпадашка

"timepicker": {
    "collapse": false,
    "enable": true,
    "notice": false,
    "now": true,
    "refresh_intervals": [
      "5s",
      "10s",
      "30s",
      "1m",
      "5m",
      "15m",
      "30m",
      "1h",
      "2h",
      "1d"
    ],
    "status": "Stable",
    "type": "timepicker"
  }

Можно задать свои интервалы

templating
Секция templating содержит массив переменных для шаблонизации с их сохраненными значениями и с какими-то метаданными

...
"templating": {
  "enable": true,
  "list": [
    {
      "allFormat": "wildcard",
      "current": {
        "tags": [],
        "text": "prod",
        "value": "prod"
      },
      "datasource": null,
      "includeAll": true,
      "name": "env",
      "options": [
        {
          "selected": false,
          "text": "All",
          "value": "*"
        },
        {
          "selected": false,
          "text": "stage",
          "value": "stage"
        },
        {
          "selected": false,
          "text": "test",
          "value": "test"
        }
      ],
      "query": "tag_values(cpu.utilization.average,env)",
      "refresh": false,
      "type": "query"
    },
    {
      "allFormat": "wildcard",
      "current": {
        "text": "apache",
        "value": "apache"
      },
      "datasource": null,
      "includeAll": false,
      "multi": false,
      "multiFormat": "glob",
      "name": "app",
      "options": [
        {
          "selected": true,
          "text": "tomcat",
          "value": "tomcat"
        },
        {
          "selected": false,
          "text": "cassandra",
          "value": "cassandra"
        }
      ],
      "query": "tag_values(cpu.utilization.average,app)",
      "refresh": false,
      "regex": "",
      "type": "query"
    }
  ]
},
...

Переменные

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

Темплейт это запрос в котором используется переменная

Типы переменных

Чтобы применить переменную можно использовать два синтаксиса

• $varname - этот синтаксис простой но не позволяет использовать переменную посреди слова
• ${var_name} - этот синтаксис уже позволяет использовать переменную внутри какого-то слова
• ${var_name:<format>} - этот синтаксис дает больше контроля над тем как графана будет раскрывать значение тут описаны возможные форматы