Real-Time Metrics GraphQL API dashboard on Grafana JSON example
Follow the steps described in How to query GraphQL data on Grafana Cloud and then use the following JSON with the https://api.azionapi.net/metrics/graphql URL to create a dashboard on Grafana with data from the Real-Time Metrics GraphQL API such as:
- Total Requests
- Cache Requests
- Status Codes
- Top 10 Request URI
- Top 10 Hosts
{ "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": "httpEvents", "datasource": { "type": "fifemon-graphql-datasource", "uid": "loKOM5K4k" }, "endTimePath": "endTime", "groupBy": "requestUri", "queryText": "query {\n httpEvents(\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": "httpEvents", "datasource": { "type": "fifemon-graphql-datasource", "uid": "loKOM5K4k" }, "endTimePath": "endTime", "groupBy": "httpUserAgent", "queryText": "query {\n httpEvents(\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": "httpEvents", "datasource": { "type": "fifemon-graphql-datasource", "uid": "loKOM5K4k" }, "endTimePath": "endTime", "groupBy": "host", "queryText": "query {\n httpEvents(\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": ""}Contributors
