---
name: azion-import-the-real-time-metrics-dashboard
description: >-
  Chart the requests, cache, HTTP methods, and status codes of your applications in Grafana, with their top request URIs, user agents, and hosts.
---

# Import the Real-Time Metrics dashboard

You can import a Grafana dashboard that charts requests, cache, HTTP methods, and status codes from [Real-Time Metrics](/en/documentation/platform/real-time-metrics/), and the top request URIs, user agents, and hosts from [Real-Time Events](/en/documentation/platform/real-time-events/). For the dashboard that the Azion plugin installs, refer to [Import the pre-built Grafana dashboard](/en/documentation/guides/platform/observability/azion-plugin-grafana-pre-built-dash/).

The dashboard is a JSON model of eight panels in two rows. The **Metrics** row reads the `httpMetrics` dataset from the Real-Time Metrics GraphQL API. The **Events** row reads `workloadEvents`, a Real-Time Events dataset, from a second endpoint. Grafana needs one data source for each endpoint.

---

## Prerequisites

- A Grafana instance where you can import a dashboard.
- The GraphQL Data Source plugin (`fifemon-graphql-datasource`) on that instance. Every panel of the dashboard uses this plugin, not the [Azion plugin for Grafana](/en/documentation/guides/platform/observability/integrate-grafana/).
- A personal token. To create one, refer to [How to manage a personal token](/en/documentation/guides/platform/account-and-billing/personal-tokens/).
- An [application](/en/documentation/platform/applications/) with requests in the last two days, the range the dashboard opens on.

---

## Add a data source for the metrics panels

The five panels of the **Metrics** row send their queries to `https://api.azion.com/v4/metrics/graphql`. Do not use `https://api.azionapi.net/metrics/graphql`: that host answers `403` with an HTML error page.

To add the metrics data source in Grafana:

1. **Open the plugin list**

   In the Grafana menu, under **Administration**, select **Plugins**.

2. **Find the GraphQL Data Source plugin**

   In **Search**, enter `GraphQL Data Source`, and select the plugin card.

3. **Create a data source from the plugin**

4. **Name the data source**

   In **Name**, enter a name that says which endpoint the data source reads. For example: `Azion metrics`.

5. **Set the endpoint URL**

   Set the URL to `https://api.azion.com/v4/metrics/graphql`.

6. **Send your personal token**

   Add an HTTP header named `Authorization` with the value `Token [TOKEN VALUE]`. Replace `[TOKEN VALUE]` with your personal token.

7. **Save and test the data source**

Grafana saves the data source and runs a test against the endpoint. Without the `Authorization` header, the endpoint answers `401` with `{"detail": "Authentication credentials were not provided."}`.

---

## Add a data source for the events panels

The three panels of the **Events** row query `workloadEvents`, a Real-Time Events dataset. The metrics endpoint does not serve that dataset and answers `400`:

```json
{
  "detail": "Cannot query field \"workloadEvents\" on type \"Query\". Did you mean \"workloadMetrics\" or \"workloadBreakdownMetrics\"?"
}
```

The same queries run unchanged on `https://api.azion.com/v4/events/graphql`, with the same personal token.

To add the events data source in Grafana:

1. **Open the plugin list**

   In the Grafana menu, under **Administration**, select **Plugins**.

2. **Find the GraphQL Data Source plugin**

   In **Search**, enter `GraphQL Data Source`, and select the plugin card.

3. **Create a data source from the plugin**

4. **Name the data source**

   In **Name**, enter a name that says which endpoint the data source reads. For example: `Azion events`.

5. **Set the endpoint URL**

   Set the URL to `https://api.azion.com/v4/events/graphql`.

6. **Send your personal token**

   Add an HTTP header named `Authorization` with the value `Token [TOKEN VALUE]`. Replace `[TOKEN VALUE]` with your personal token.

7. **Save and test the data source**

Grafana saves the second data source. Each row of the dashboard then has an endpoint that serves its dataset.

---

## Import the dashboard model

The dashboard model opens on the last two days (`now-2d` to `now`), in the time zone of the browser, with no automatic refresh. It declares no data source inputs. Each panel names its data source by a fixed UID: `loKOM5K4k` in the **Events** row and `d863aedd-0f4f-48e4-ae94-bf0bc73120a6` in the **Metrics** row. The model also defines a hidden `host` variable that no panel query uses.

The dashboard model:

```json
{
	"annotations": {
		"list": [{
			"builtIn": 1,
			"datasource": {
				"type": "grafana",
				"uid": "-- Grafana --"
			},
			"enable": true,
			"hide": true,
			"iconColor": "rgba(0, 211, 255, 1)",
			"name": "Annotations & Alerts",
			"target": {
				"limit": 100,
				"matchAny": false,
				"tags": [],
				"type": "dashboard"
			},
			"type": "dashboard"
		}]
	},
	"editable": true,
	"fiscalYearStartMonth": 0,
	"graphTooltip": 0,
	"id": 2,
	"links": [],
	"liveNow": false,
	"panels": [{
			"collapsed": true,
			"gridPos": {
				"h": 1,
				"w": 24,
				"x": 0,
				"y": 0
			},
			"id": 17,
			"panels": [],
			"title": "Row title",
			"type": "row"
		},
		{
			"collapsed": true,
			"gridPos": {
				"h": 1,
				"w": 24,
				"x": 0,
				"y": 1
			},
			"id": 9,
			"panels": [{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "loKOM5K4k"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								}
							},
							"mappings": []
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 6,
						"x": 0,
						"y": 10
					},
					"id": 12,
					"options": {
						"displayLabels": [],
						"legend": {
							"displayMode": "list",
							"placement": "right",
							"showLegend": true,
							"values": []
						},
						"pieType": "pie",
						"reduceOptions": {
							"calcs": [
								"lastNotNull"
							],
							"fields": "",
							"values": false
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"pluginVersion": "9.3.6",
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "workloadEvents",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "loKOM5K4k"
						},
						"endTimePath": "endTime",
						"groupBy": "requestUri",
						"queryText": "query {\n workloadEvents(\n limit: 10,\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n aggregate: {count: host} \n groupBy: [requestUri]\n #orderBy: [count_DESC]\n )\n {\n requestUri\n #status\n count\n \n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": "tsRange"
					}],
					"title": "Top 10 requestUri",
					"transparent": true,
					"type": "piechart"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "loKOM5K4k"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								}
							},
							"mappings": []
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 6,
						"x": 7,
						"y": 10
					},
					"id": 11,
					"options": {
						"displayLabels": [],
						"legend": {
							"displayMode": "list",
							"placement": "right",
							"showLegend": true,
							"values": []
						},
						"pieType": "pie",
						"reduceOptions": {
							"calcs": [
								"lastNotNull"
							],
							"fields": "",
							"values": false
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"pluginVersion": "9.3.6",
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "workloadEvents",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "loKOM5K4k"
						},
						"endTimePath": "endTime",
						"groupBy": "httpUserAgent",
						"queryText": "query {\n workloadEvents(\n limit: 10,\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n aggregate: {count: host} \n groupBy: [httpUserAgent]\n #orderBy: [count_DESC]\n )\n {\n httpUserAgent\n #status\n count\n \n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": "tsRange"
					}],
					"title": "TOp 10 User Agents",
					"transparent": true,
					"type": "piechart"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "loKOM5K4k"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								}
							},
							"mappings": []
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 6,
						"x": 14,
						"y": 10
					},
					"id": 2,
					"options": {
						"displayLabels": [],
						"legend": {
							"displayMode": "list",
							"placement": "right",
							"showLegend": true,
							"values": []
						},
						"pieType": "pie",
						"reduceOptions": {
							"calcs": [
								"lastNotNull"
							],
							"fields": "",
							"values": false
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"pluginVersion": "9.3.6",
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "workloadEvents",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "loKOM5K4k"
						},
						"endTimePath": "endTime",
						"groupBy": "host",
						"queryText": "query {\n workloadEvents(\n limit: 10,\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n aggregate: {count: host} \n groupBy: [host,status]\n #orderBy: [count_DESC]\n )\n {\n host\n #status\n count\n \n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": "tsRange"
					}],
					"title": "TOp 10 hosts",
					"transparent": true,
					"type": "piechart"
				}
			],
			"title": "Events",
			"type": "row"
		},
		{
			"collapsed": true,
			"gridPos": {
				"h": 1,
				"w": 24,
				"x": 0,
				"y": 2
			},
			"id": 4,
			"panels": [{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"axisCenteredZero": false,
								"axisColorMode": "text",
								"axisLabel": "",
								"axisPlacement": "auto",
								"barAlignment": 0,
								"drawStyle": "line",
								"fillOpacity": 0,
								"gradientMode": "none",
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								},
								"lineInterpolation": "linear",
								"lineWidth": 1,
								"pointSize": 5,
								"scaleDistribution": {
									"type": "linear"
								},
								"showPoints": "auto",
								"spanNulls": false,
								"stacking": {
									"group": "A",
									"mode": "none"
								},
								"thresholdsStyle": {
									"mode": "off"
								}
							},
							"mappings": [],
							"thresholds": {
								"mode": "absolute",
								"steps": [{
										"color": "green"
									},
									{
										"color": "red",
										"value": 80
									}
								]
							}
						},
						"overrides": []
					},
					"gridPos": {
						"h": 9,
						"w": 11,
						"x": 0,
						"y": 18
					},
					"id": 13,
					"options": {
						"legend": {
							"calcs": [],
							"displayMode": "list",
							"placement": "right",
							"showLegend": true
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "httpMetrics",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
						},
						"endTimePath": "endTime",
						"groupBy": "",
						"queryText": "query HttpCalculatedTotalRequestsPerSecond {\n httpMetrics(\n limit: 1000\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n groupBy: [ts]\n orderBy: [ts_DESC]\n ) \n { \n ts\n missedRequests\n requestsOffloaded\n requestsPerSecondOffloaded\n edgeRequestsTotalPerSecond\n missedRequestsPerSecond\n savedRequestsPerSecond\n httpRequestsTotal\n httpsRequestsTotal\n edgeRequestsTotal\n \n \n \n \n }\n}",
						"refId": "A",
						"timeFormat": "ts",
						"timePath": ""
					}],
					"title": "Total Req - Requests",
					"transparent": true,
					"type": "timeseries"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"axisCenteredZero": false,
								"axisColorMode": "text",
								"axisLabel": "",
								"axisPlacement": "auto",
								"barAlignment": 0,
								"drawStyle": "line",
								"fillOpacity": 0,
								"gradientMode": "none",
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								},
								"lineInterpolation": "linear",
								"lineWidth": 1,
								"pointSize": 5,
								"scaleDistribution": {
									"type": "linear"
								},
								"showPoints": "auto",
								"spanNulls": false,
								"stacking": {
									"group": "A",
									"mode": "none"
								},
								"thresholdsStyle": {
									"mode": "off"
								}
							},
							"mappings": [],
							"thresholds": {
								"mode": "absolute",
								"steps": [{
										"color": "green"
									},
									{
										"color": "red",
										"value": 80
									}
								]
							}
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 11,
						"x": 12,
						"y": 18
					},
					"id": 15,
					"options": {
						"legend": {
							"calcs": [],
							"displayMode": "list",
							"placement": "right",
							"showLegend": true
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "httpMetrics",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
						},
						"endTimePath": "endTime",
						"groupBy": "",
						"queryText": "query HttpCalculatedTotalRequestsPerSecond {\n httpMetrics(\n limit: 1000\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n groupBy: [ts]\n orderBy: [ts_DESC]\n ) \n { \n ts\n missedData\n savedData\n dataTransferredIn\n dataTransferredOut\n dataTransferredTotal\n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": ""
					}],
					"title": "Total Req - Cache",
					"transparent": true,
					"type": "timeseries"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"axisCenteredZero": false,
								"axisColorMode": "text",
								"axisLabel": "",
								"axisPlacement": "auto",
								"barAlignment": 0,
								"drawStyle": "line",
								"fillOpacity": 0,
								"gradientMode": "none",
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								},
								"lineInterpolation": "linear",
								"lineStyle": {
									"fill": "solid"
								},
								"lineWidth": 1,
								"pointSize": 5,
								"scaleDistribution": {
									"type": "linear"
								},
								"showPoints": "auto",
								"spanNulls": false,
								"stacking": {
									"group": "A",
									"mode": "none"
								},
								"thresholdsStyle": {
									"mode": "line"
								}
							},
							"mappings": [],
							"thresholds": {
								"mode": "percentage",
								"steps": [{
									"color": "green"
								}]
							}
						},
						"overrides": []
					},
					"gridPos": {
						"h": 9,
						"w": 9,
						"x": 15,
						"y": 26
					},
					"id": 16,
					"options": {
						"legend": {
							"calcs": [],
							"displayMode": "list",
							"placement": "right",
							"showLegend": true
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "httpMetrics",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
						},
						"endTimePath": "endTime",
						"groupBy": "",
						"queryText": "query HttpCalculatedTotalRequestsPerSecond {\n httpMetrics(\n limit: 1000\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n groupBy: [ts]\n orderBy: [ts_DESC]\n ) \n { \n ts\n requestsHttpMethodGet\n requestsHttpMethodPost\n requestsHttpMethodHead\n requestsHttpMethodOthers\n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": ""
					}],
					"title": "Http Methods ",
					"transparent": true,
					"type": "timeseries"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "thresholds"
							},
							"custom": {
								"align": "auto",
								"cellOptions": {
									"type": "auto"
								},
								"inspect": false
							},
							"mappings": [],
							"thresholds": {
								"mode": "absolute",
								"steps": [{
										"color": "green"
									},
									{
										"color": "red",
										"value": 80
									}
								]
							}
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 6,
						"x": 0,
						"y": 27
					},
					"id": 10,
					"options": {
						"cellHeight": "sm",
						"footer": {
							"countRows": false,
							"fields": "",
							"reducer": [
								"sum"
							],
							"show": false
						},
						"showHeader": true
					},
					"pluginVersion": "10.0.0-cloud.3.b04cc88b",
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "httpMetrics",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
						},
						"endTimePath": "endTime",
						"groupBy": "",
						"hide": false,
						"queryText": "query CountRowsByHost {\n httpMetrics(\n limit: 1000\n filter: {\n tsRange: {begin:\"2023-03-22T17:03:00\", end:\"2023-03-22T18:05:00\"}\n }\n aggregate: {count:rows} # {count:host}\n groupBy: [host]\n orderBy: [count_DESC]\n ) \n { \n host\n count\n }\n}",
						"refId": "A",
						"timePath": "Time"
					}],
					"title": "Logs",
					"type": "table"
				},
				{
					"datasource": {
						"type": "fifemon-graphql-datasource",
						"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
					},
					"fieldConfig": {
						"defaults": {
							"color": {
								"mode": "palette-classic"
							},
							"custom": {
								"axisCenteredZero": false,
								"axisColorMode": "text",
								"axisLabel": "",
								"axisPlacement": "auto",
								"barAlignment": 0,
								"drawStyle": "line",
								"fillOpacity": 0,
								"gradientMode": "none",
								"hideFrom": {
									"legend": false,
									"tooltip": false,
									"viz": false
								},
								"lineInterpolation": "linear",
								"lineWidth": 1,
								"pointSize": 5,
								"scaleDistribution": {
									"type": "linear"
								},
								"showPoints": "auto",
								"spanNulls": false,
								"stacking": {
									"group": "A",
									"mode": "none"
								},
								"thresholdsStyle": {
									"mode": "off"
								}
							},
							"mappings": [],
							"thresholds": {
								"mode": "absolute",
								"steps": [{
										"color": "green"
									},
									{
										"color": "red",
										"value": 80
									}
								]
							}
						},
						"overrides": []
					},
					"gridPos": {
						"h": 8,
						"w": 9,
						"x": 6,
						"y": 27
					},
					"id": 14,
					"options": {
						"legend": {
							"calcs": [],
							"displayMode": "list",
							"placement": "right",
							"showLegend": true
						},
						"tooltip": {
							"mode": "single",
							"sort": "none"
						}
					},
					"targets": [{
						"aliasBy": "",
						"annotationTags": "",
						"annotationText": "",
						"annotationTitle": "",
						"constant": 6.5,
						"dataPath": "httpMetrics",
						"datasource": {
							"type": "fifemon-graphql-datasource",
							"uid": "d863aedd-0f4f-48e4-ae94-bf0bc73120a6"
						},
						"endTimePath": "endTime",
						"groupBy": "",
						"queryText": "query HttpCalculatedTotalRequestsPerSecond {\n httpMetrics(\n limit: 1000\n filter: {\n\ttsRange: { begin: \"${__from:date:iso}\", end: \"${__to:date:iso}\" }\n\t \n\t\t},\n groupBy: [ts]\n orderBy: [ts_DESC]\n ) \n { \n ts\n requestsStatusCode2xx\n requestsStatusCode3xx\n requestsStatusCode4xx\n requestsStatusCode5xx\n }\n}",
						"refId": "A",
						"timeFormat": "",
						"timePath": ""
					}],
					"title": "Status Codes ",
					"transparent": true,
					"type": "timeseries"
				}
			],
			"title": "Metrics",
			"type": "row"
		}
	],
	"refresh": "",
	"schemaVersion": 38,
	"style": "dark",
	"tags": [],
	"templating": {
		"list": [{
			"current": {
				"selected": false,
				"text": "host",
				"value": "host"
			},
			"description": "",
			"hide": 1,
			"includeAll": false,
			"label": "host",
			"multi": false,
			"name": "host",
			"options": [],
			"query": "",
			"queryValue": "host",
			"skipUrlSync": false,
			"type": "custom"
		}]
	},
	"time": {
		"from": "now-2d",
		"to": "now"
	},
	"timepicker": {},
	"timezone": "browser",
	"title": "Dashboard Exemple - Azion",
	"uid": "DdzS8OK4z",
	"version": 31,
	"weekStart": ""
}
```

To import the dashboard in Grafana:

1. **Copy the dashboard model**

   Copy the whole JSON object of the dashboard model.

2. **Open the dashboard import**

   For where the import sits in your Grafana version, refer to [Import dashboards](https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/import-dashboards/).

3. **Paste the model and import it**

Grafana lists the dashboard as `Dashboard Exemple - Azion`, the title the model sets. It holds three collapsed rows: an empty **Row title**, **Events**, and **Metrics**.

---

## Connect each panel to its data source

The panels of the imported dashboard keep the data source UIDs of the model, and those UIDs do not match the data sources you added. Connect each panel to the data source that serves its row.

To connect a panel in Grafana:

1. **Expand the row**

   Select **Events** or **Metrics** to expand the row that holds the panel.

2. **Edit the panel**

3. **Select the data source**

   For a panel of the **Events** row, select your events data source. For a panel of the **Metrics** row, select your metrics data source.

4. **Save the dashboard**

Repeat the steps for each of the eight panels. Each panel then sends its query to its own endpoint, for the range of the dashboard.

---

## Set the Logs panel to the dashboard range

The **Logs** panel, in the **Metrics** row, runs the `CountRowsByHost` query, which counts the `httpMetrics` rows of each host. Its query fixes the range at `2023-03-22T17:03:00` to `2023-03-22T18:05:00`. That range returns an empty `httpMetrics` array, so the panel shows no rows whatever range you pick in the dashboard.

The edited query replaces the fixed range with the dashboard variables `${__from:date:iso}` and `${__to:date:iso}`, as the other panels do:

```graphql
query CountRowsByHost {
 httpMetrics(
 limit: 1000
 filter: {
 tsRange: {begin:"${__from:date:iso}", end:"${__to:date:iso}"}
 }
 aggregate: {count:rows} # {count:host}
 groupBy: [host]
 orderBy: [count_DESC]
 )
 {
 host
 count
 }
}
```

To edit the query in Grafana:

1. **Edit the Logs panel**

2. **Replace the query text**

   Replace the query text of the panel with the edited query.

3. **Save the dashboard**

Grafana fills both variables with the range of the dashboard. For the last two days, the metrics endpoint answers with one row per host, the largest count first:

```json
{
  "data": {
    "httpMetrics": [
      {
        "host": "www.example.com",
        "count": 492
      },
      …
    ]
  }
}
```

Each `count` is the number of `httpMetrics` rows recorded for that host in the range.

---

## Check the panels

Each panel queries one dataset and charts the fields in this table. When a panel charts its fields for the dashboard range, its data source works.

| Row     | Panel                    | Visualization | Dataset          | Fields                                                                                                                                                                                                                 |
| ------- | ------------------------ | ------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Events  | **Top 10 requestUri**    | Pie chart     | `workloadEvents` | `requestUri`, `count`                                                                                                                                                                                                  |
| Events  | **TOp 10 User Agents**   | Pie chart     | `workloadEvents` | `httpUserAgent`, `count`                                                                                                                                                                                               |
| Events  | **TOp 10 hosts**         | Pie chart     | `workloadEvents` | `host`, `count`, grouped by `host` and `status`                                                                                                                                                                        |
| Metrics | **Total Req - Requests** | Time series   | `httpMetrics`    | `missedRequests`, `requestsOffloaded`, `requestsPerSecondOffloaded`, `edgeRequestsTotalPerSecond`, `missedRequestsPerSecond`, `savedRequestsPerSecond`, `httpRequestsTotal`, `httpsRequestsTotal`, `edgeRequestsTotal` |
| Metrics | **Total Req - Cache**    | Time series   | `httpMetrics`    | `missedData`, `savedData`, `dataTransferredIn`, `dataTransferredOut`, `dataTransferredTotal`                                                                                                                           |
| Metrics | **Http Methods**         | Time series   | `httpMetrics`    | `requestsHttpMethodGet`, `requestsHttpMethodPost`, `requestsHttpMethodHead`, `requestsHttpMethodOthers`                                                                                                                |
| Metrics | **Logs**                 | Table         | `httpMetrics`    | `host`, `count`                                                                                                                                                                                                        |
| Metrics | **Status Codes**         | Time series   | `httpMetrics`    | `requestsStatusCode2xx`, `requestsStatusCode3xx`, `requestsStatusCode4xx`, `requestsStatusCode5xx`                                                                                                                     |

The three **Events** panels count the `host` values of each group and keep 10 groups with `limit: 10`. Their `orderBy: [count_DESC]` line is commented out, so the query does not ask for the largest groups first.

In **Status Codes**, a class field counts only the status codes of that class that have no field of their own. For example, `requestsStatusCode2xx` reads `0` when every 2xx response is a `200`, which `requestsStatusCode200` counts. For the per-code fields, refer to [Break down requests by status code](/en/documentation/guides/platform/observability/break-down-requests-by-status-code/).

For the type and meaning of each `httpMetrics` field, refer to [Real-Time Metrics GraphQL fields](/en/documentation/devtools/graphql/gql-real-time-metrics-fields/#workloadmetrics).

---

## Next steps

- [Import the Data Transferred dashboard](/en/documentation/guides/platform/observability/data-transferred-dash.md): Chart the data transferred, offload, and bandwidth of your applications in a second Grafana dashboard.
- [Real-Time Events](/en/documentation/platform/real-time-events.md): Read about the product whose dataset the three Events panels query.
- [Install the Azion plugin for Grafana](/en/documentation/guides/platform/observability/integrate-grafana.md): Read Real-Time Metrics and Real-Time Events in Grafana through the Azion data source plugin.
- [Real-Time Metrics fields](/en/documentation/devtools/graphql/gql-real-time-metrics-fields.md): Look up every field the Metrics panels chart, with its type.
