mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added templating, timepicker, panel docs
This commit is contained in:
Utkarsh Bhatnagar
parent
f54615ed46
commit
e8c9b0806a
@ -77,7 +77,7 @@ Each field in the dashboard JSON is explained below with its usage:
|
|||||||
|
|
||||||
### rows
|
### rows
|
||||||
|
|
||||||
`rows` field represents an array of JSON object representing each row in a dashboard, such as shown below:
|
`rows` field consists of an array of JSON object representing each row in a dashboard, such as shown below:
|
||||||
|
|
||||||
```
|
```
|
||||||
"rows": [
|
"rows": [
|
||||||
@ -110,15 +110,312 @@ Usage of the fields is explained below:
|
|||||||
|
|
||||||
#### panels
|
#### panels
|
||||||
|
|
||||||
TODO
|
Panels are the building blocks a dashboard. It consists of datasource queries, type of graphs, aliases, etc. Panel JSON consists of an array of JSON objects, each representing a different panel in a row. Most of the fields are common for all panels but some fields depends on the panel type. Following is an example of panel JSON representing a `graph` panel type:
|
||||||
|
|
||||||
|
```
|
||||||
|
"panels": [
|
||||||
|
{
|
||||||
|
"aliasColors": {},
|
||||||
|
"bars": false,
|
||||||
|
"datasource": null,
|
||||||
|
"editable": true,
|
||||||
|
"error": false,
|
||||||
|
"fill": 0,
|
||||||
|
"grid": {
|
||||||
|
"leftLogBase": 1,
|
||||||
|
"leftMax": null,
|
||||||
|
"leftMin": null,
|
||||||
|
"rightLogBase": 1,
|
||||||
|
"rightMax": null,
|
||||||
|
"rightMin": null,
|
||||||
|
"threshold1": null,
|
||||||
|
"threshold1Color": "rgba(216, 200, 27, 0.27)",
|
||||||
|
"threshold2": null,
|
||||||
|
"threshold2Color": "rgba(234, 112, 112, 0.22)"
|
||||||
|
},
|
||||||
|
"id": 1,
|
||||||
|
"legend": {
|
||||||
|
"avg": false,
|
||||||
|
"current": false,
|
||||||
|
"max": false,
|
||||||
|
"min": false,
|
||||||
|
"show": true,
|
||||||
|
"total": false,
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"lines": true,
|
||||||
|
"linewidth": 1,
|
||||||
|
"links": [],
|
||||||
|
"nullPointMode": "connected",
|
||||||
|
"percentage": false,
|
||||||
|
"pointradius": 5,
|
||||||
|
"points": false,
|
||||||
|
"renderer": "flot",
|
||||||
|
"seriesOverrides": [],
|
||||||
|
"span": 4,
|
||||||
|
"stack": false,
|
||||||
|
"steppedLine": false,
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"aggregator": "max",
|
||||||
|
"alias": "$tag_instance_id",
|
||||||
|
"currentTagKey": "",
|
||||||
|
"currentTagValue": "",
|
||||||
|
"downsampleAggregator": "avg",
|
||||||
|
"downsampleInterval": "",
|
||||||
|
"errors": {},
|
||||||
|
"metric": "memory.percent-used",
|
||||||
|
"refId": "A",
|
||||||
|
"shouldComputeRate": false,
|
||||||
|
"tags": {
|
||||||
|
"app": "$app",
|
||||||
|
"env": "stage",
|
||||||
|
"instance_id": "*"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Memory Utilization",
|
||||||
|
"tooltip": {
|
||||||
|
"shared": true,
|
||||||
|
"value_type": "cumulative"
|
||||||
|
},
|
||||||
|
"type": "graph",
|
||||||
|
"x-axis": true,
|
||||||
|
"y-axis": true,
|
||||||
|
"y_formats": [
|
||||||
|
"percent",
|
||||||
|
"short"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"aliasColors": {},
|
||||||
|
"bars": false,
|
||||||
|
"datasource": null,
|
||||||
|
"editable": true,
|
||||||
|
"error": false,
|
||||||
|
"fill": 0,
|
||||||
|
"grid": {
|
||||||
|
"leftLogBase": 1,
|
||||||
|
"leftMax": null,
|
||||||
|
"leftMin": null,
|
||||||
|
"rightLogBase": 1,
|
||||||
|
"rightMax": null,
|
||||||
|
"rightMin": null,
|
||||||
|
"threshold1": null,
|
||||||
|
"threshold1Color": "rgba(216, 200, 27, 0.27)",
|
||||||
|
"threshold2": null,
|
||||||
|
"threshold2Color": "rgba(234, 112, 112, 0.22)"
|
||||||
|
},
|
||||||
|
"id": 2,
|
||||||
|
"legend": {
|
||||||
|
"avg": false,
|
||||||
|
"current": false,
|
||||||
|
"max": false,
|
||||||
|
"min": false,
|
||||||
|
"show": true,
|
||||||
|
"total": false,
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"lines": true,
|
||||||
|
"linewidth": 1,
|
||||||
|
"links": [],
|
||||||
|
"nullPointMode": "connected",
|
||||||
|
"percentage": false,
|
||||||
|
"pointradius": 5,
|
||||||
|
"points": false,
|
||||||
|
"renderer": "flot",
|
||||||
|
"seriesOverrides": [],
|
||||||
|
"span": 4,
|
||||||
|
"stack": false,
|
||||||
|
"steppedLine": false,
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"aggregator": "avg",
|
||||||
|
"alias": "$tag_instance_id",
|
||||||
|
"currentTagKey": "",
|
||||||
|
"currentTagValue": "",
|
||||||
|
"downsampleAggregator": "avg",
|
||||||
|
"downsampleInterval": "",
|
||||||
|
"errors": {},
|
||||||
|
"metric": "memory.percent-cached",
|
||||||
|
"refId": "A",
|
||||||
|
"shouldComputeRate": false,
|
||||||
|
"tags": {
|
||||||
|
"app": "$app",
|
||||||
|
"env": "prod",
|
||||||
|
"instance_id": "*"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Memory Cached",
|
||||||
|
"tooltip": {
|
||||||
|
"shared": true,
|
||||||
|
"value_type": "cumulative"
|
||||||
|
},
|
||||||
|
"type": "graph",
|
||||||
|
"x-axis": true,
|
||||||
|
"y-axis": true,
|
||||||
|
"y_formats": [
|
||||||
|
"short",
|
||||||
|
"short"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
Usage of each field is explained below:
|
||||||
|
|
||||||
|
| Name | Usage |
|
||||||
|
| ---- | ----- |
|
||||||
|
| TODO | TODO |
|
||||||
|
|
||||||
### timepicker
|
### timepicker
|
||||||
|
|
||||||
TODO
|
Description: TODO
|
||||||
|
|
||||||
|
```
|
||||||
|
"timepicker": {
|
||||||
|
"collapse": false,
|
||||||
|
"enable": true,
|
||||||
|
"notice": false,
|
||||||
|
"now": true,
|
||||||
|
"refresh_intervals": [
|
||||||
|
"5s",
|
||||||
|
"10s",
|
||||||
|
"30s",
|
||||||
|
"1m",
|
||||||
|
"5m",
|
||||||
|
"15m",
|
||||||
|
"30m",
|
||||||
|
"1h",
|
||||||
|
"2h",
|
||||||
|
"1d"
|
||||||
|
],
|
||||||
|
"status": "Stable",
|
||||||
|
"time_options": [
|
||||||
|
"5m",
|
||||||
|
"15m",
|
||||||
|
"1h",
|
||||||
|
"3h",
|
||||||
|
"6h",
|
||||||
|
"12h",
|
||||||
|
"24h",
|
||||||
|
"2d",
|
||||||
|
"3d",
|
||||||
|
"4d",
|
||||||
|
"7d",
|
||||||
|
"30d"
|
||||||
|
],
|
||||||
|
"type": "timepicker"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Usage of the fields is explained below:
|
||||||
|
|
||||||
|
| Name | Usage |
|
||||||
|
| ---- | ----- |
|
||||||
|
| **collapse** | whether timepicker is collapsed or not |
|
||||||
|
| **enable** | whether timepicker is enabled or not |
|
||||||
|
| **notice** | TODO |
|
||||||
|
| **now** | TODO |
|
||||||
|
| **refresh_intervals** | TODO |
|
||||||
|
| **status** | TODO |
|
||||||
|
| **time_options** | TODO |
|
||||||
|
| **type** | TODO |
|
||||||
|
|
||||||
### templating
|
### templating
|
||||||
|
|
||||||
TODO
|
`templating` fields contains array of template variables with their saved values along with some other metadata, for example:
|
||||||
|
|
||||||
|
```
|
||||||
|
"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,
|
||||||
|
"refresh_on_load": 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_on_load": false,
|
||||||
|
"regex": "",
|
||||||
|
"type": "query"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Usage of the above mentioned fields in the templating section is explained below:
|
||||||
|
|
||||||
|
| Name | Usage |
|
||||||
|
| ---- | ----- |
|
||||||
|
| **enable** | whether templating is enabled or not |
|
||||||
|
| **list** | an array of objects representing, each representing one template variable |
|
||||||
|
| **allFormat** | format to use while fetching all values from datasource, eg: `wildcard`, `glob`, `regex`, `pipe`, etc. |
|
||||||
|
| **current** | shows current selected variable text/value on the dashboard |
|
||||||
|
| **datasource** | shows datasource for the variables |
|
||||||
|
| **includeAll** | whether all value option is available or not |
|
||||||
|
| **multi** | whether multiple values can be selected or not from variable value list |
|
||||||
|
| **multiFormat** | format to use while fetching timeseries from datasource |
|
||||||
|
| **name** | name of variable |
|
||||||
|
| **options** | array of variable text/value pairs available for selection on dashboard |
|
||||||
|
| **query** | datasource query used to fetch values for a variable |
|
||||||
|
| **refresh_on_load** | TODO |
|
||||||
|
| **regex** | TODO |
|
||||||
|
| **type** | type of variable, i.e. `custom`, `query` or `interval` |
|
||||||
|
|
||||||
### annotations
|
### annotations
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user