diff --git a/.github/workflows/linux.yml b/.github/workflows/linux.yml index 98c8f3f..f22bbb4 100644 --- a/.github/workflows/linux.yml +++ b/.github/workflows/linux.yml @@ -44,5 +44,5 @@ jobs: ls -la - name: Run test with Influx 1.8 run: cd sitespeed.io && bin/sitespeed.js https://www.sitespeed.io -n 1 --influxdb.host 127.0.0.1 --xvfb --resultBaseUrl https://result.sitespeed.io --influxdb.annotationScreenshot=true --plugins.add ../../../lib/index.js - - name: Run test with Influx 2.6.1 + - name: Run test with Influx 2.7.12 run: cd sitespeed.io && bin/sitespeed.js https://www.sitespeed.io -n 1 --influxdb.host 127.0.0.1 --influxdb.port 8087 --influxdb.version 2 --influxdb.organisation sitespeed --influxdb.token sitespeed --xvfb --resultBaseUrl https://result.sitespeed.io --influxdb.annotationScreenshot=true --influxdb.functions='min,max' --plugins.add ../../../lib/index.js \ No newline at end of file diff --git a/.gitignore b/.gitignore index b512c09..f1066ea 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +/.idea/ diff --git a/test/docker/docker-compose.yml b/test/docker/docker-compose.yml index 0225570..8d89647 100644 --- a/test/docker/docker-compose.yml +++ b/test/docker/docker-compose.yml @@ -1,19 +1,64 @@ -version: '3' services: - influxdb_v1.8: - image: influxdb:1.8 - ports: - - '8086:8086' - environment: + influxdb_v1.8: + image: influxdb:1.8 + ports: + - '8086:8086' + environment: - INFLUXDB_DB=sitespeed - influxdb_v2.6: - image: influxdb:2.6.1 - ports: - - '8087:8086' - environment: + influxdb_v2.7: + image: influxdb:2.7.12 + hostname: influxdb2 + ports: + - '8087:8086' + environment: - DOCKER_INFLUXDB_INIT_MODE=setup - DOCKER_INFLUXDB_INIT_USERNAME=sitespeed - DOCKER_INFLUXDB_INIT_PASSWORD=sitespeed - DOCKER_INFLUXDB_INIT_ORG=sitespeed - DOCKER_INFLUXDB_INIT_BUCKET=sitespeed - - DOCKER_INFLUXDB_INIT_ADMIN_TOKEN=sitespeed \ No newline at end of file + - DOCKER_INFLUXDB_INIT_ADMIN_TOKEN=sitespeed + volumes: + - ./influxdb-data:/var/lib/influxdb2 + - ./influxdb-config:/etc/influxdb2 + grafana: + image: grafana/grafana:12.2.1 + ports: + - '3000:3000' + depends_on: + - influxdb_v2.7 + - influxdb_v1.8 + environment: + - GF_SECURITY_ADMIN_PASSWORD=sitespeed + - GF_SECURITY_ADMIN_USER=sitespeed + - DOCKER_INFLUXDB_INIT_ORG=sitespeed + - DOCKER_INFLUXDB_INIT_BUCKET=sitespeed + - DOCKER_INFLUXDB_INIT_ADMIN_TOKEN=sitespeed + volumes: + - ./grafana-storage:/var/lib/grafana + - ./grafana-provisioning/:/etc/grafana/provisioning/ + + minio: + image: minio/minio:latest + container_name: minio + ports: + - "9000:9000" + - "9001:9001" + environment: + MINIO_ROOT_USER: minio + MINIO_ROOT_PASSWORD: minio123 + command: server /data --console-address ":9001" + + createbucket: + image: quay.io/minio/mc + depends_on: + - minio + restart: on-failure + entrypoint: > + /bin/sh -c " + /usr/bin/mc alias set dockerminio http://minio:9000 minio minio123 && + (/usr/bin/mc mb dockerminio/sitespeed-bucket/sitespeed-results || echo 'Bucket already exists') && + /usr/bin/mc ilm rule add --expire-days 30 dockerminio/sitespeed-bucket && + /usr/bin/mc anonymous set public dockerminio/sitespeed-bucket && + /usr/bin/mc admin config set dockerminio compression extensions=\".html,.css,.js\" && + echo 'MinIO and lifecycle policy setup complete.'" + diff --git a/test/docker/grafana-provisioning/dashboards/dashboard.yml b/test/docker/grafana-provisioning/dashboards/dashboard.yml new file mode 100644 index 0000000..c213b97 --- /dev/null +++ b/test/docker/grafana-provisioning/dashboards/dashboard.yml @@ -0,0 +1,10 @@ +apiVersion: 1 +providers: + - name: "InfluxDB 2" + folder: '' + type: file + disableDeletion: false + editable: true + options: + path: /etc/grafana/provisioning/dashboards + uid: zg5kwm57z \ No newline at end of file diff --git a/test/docker/grafana-provisioning/dashboards/sitespeed_single.json b/test/docker/grafana-provisioning/dashboards/sitespeed_single.json new file mode 100644 index 0000000..6d63d21 --- /dev/null +++ b/test/docker/grafana-provisioning/dashboards/sitespeed_single.json @@ -0,0 +1,16584 @@ +{ + "__elements": {}, + "__requires": [ + { + "type": "panel", + "id": "barchart", + "name": "Bar chart", + "version": "" + }, + { + "type": "panel", + "id": "gauge", + "name": "Gauge", + "version": "" + }, + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "12.0.1" + }, + { + "type": "datasource", + "id": "influxdb", + "name": "InfluxDB", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "piechart", + "name": "Pie chart", + "version": "" + }, + { + "type": "datasource", + "id": "prometheus", + "name": "Prometheus", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "table", + "name": "Table", + "version": "" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + }, + { + "type": "panel", + "id": "timeseries", + "name": "Time series", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "datasource", + "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" + }, + { + "datasource": "InfluxDB 2", + "enable": false, + "filter": { + "exclude": false, + "ids": [ + 80 + ] + }, + "hide": false, + "iconColor": "green", + "name": "Report annotations", + "target": { + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"annotations\" and\n //r[\"_field\"] == \"text\" and\n r[\"browser\"] == \"${browser}\" and\n r[\"category\"] == \"${category}\" and\n r[\"connectivity\"] == \"${connectivity}\" and\n r[\"group\"] == \"${group}\" and\n r[\"page\"] == \"${page}\" and\n r[\"slug\"] == \"${testname}\"\n )", + "refId": "Anno" + } + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "enable": false, + "filter": { + "exclude": false, + "ids": [ + 336, + 80, + 355 + ] + }, + "hide": false, + "iconColor": "green", + "name": "Sitespeed_Chrome_Version", + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "sitespeed_chrome_version" + ], + "type": "tags" + } + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 1, + "id": null, + "links": [], + "panels": [ + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 84, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/^5\\d{2}$/" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + }, + { + "id": "custom.drawStyle", + "value": "points" + }, + { + "id": "unit", + "value": "none" + }, + { + "id": "custom.pointSize", + "value": 10 + }, + { + "id": "custom.axisPlacement", + "value": "right" + } + ] + }, + { + "matcher": { + "id": "byRegexp", + "options": "/^4\\d{2}$/" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "points" + }, + { + "id": "color", + "value": { + "fixedColor": "dark-yellow", + "mode": "fixed" + } + }, + { + "id": "custom.pointSize", + "value": 8 + }, + { + "id": "unit", + "value": "none" + }, + { + "id": "custom.axisPlacement", + "value": "right" + } + ] + } + ] + }, + "gridPos": { + "h": 24, + "w": 12, + "x": 0, + "y": 1 + }, + "id": 80, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true, + "sortBy": "Max", + "sortDesc": true + }, + "tooltip": { + "hideZeros": false, + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: name)\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"FirstVisualChange\")\nmetric(name: \"LastVisualChange\")\nmetric(name: \"SpeedIndex\")\nmetric(name: \"LargestContentfulPaint\")\n//metric(name: \"VisualComplete95\")\n//metric(name: \"VisualComplete99\")\nmetric(name: \"VisualComplete85\")\nmetric(name: \"LargestImage\")\nmetric(name: \"Heading\")\nmetric(name: \"ContentfulSpeedIndex\")\nmetric(name: \"LastMeaningfulPaint\")\n", + "refId": "Visual metrics" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"pagexray\" and \n exists r.responseCodes\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"code\"}) \n |> filter(fn: (r) => r.code =~ /^5\\d{2}$/)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "5xx" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"pagexray\" and \n exists r.responseCodes\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"code\"}) \n |> filter(fn: (r) => r.code =~ /^4\\d{2}$/)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "4xx" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement =~ /CustomReadiness.*/ and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> drop(columns: [\"_field\"]) \n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n", + "refId": "Custom Visual" + } + ], + "title": "Visual Metrics [$function]", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "code" + } + } + ], + "type": "timeseries" + }, + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 1 + }, + "id": 309, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "\n \n\n\n\n", + "mode": "html" + }, + "pluginVersion": "12.0.1", + "title": "Screenshot from last run", + "type": "text" + }, + { + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 1 + }, + "id": 160, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "html" + }, + "pluginVersion": "12.0.1", + "title": "Video", + "type": "text" + }, + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 12, + "x": 12, + "y": 9 + }, + "id": 320, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Last Report: ${group}/${page}\n", + "mode": "html" + }, + "pluginVersion": "12.0.1", + "title": "", + "type": "text" + }, + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 11 + }, + "id": 228, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "12.0.1", + "title": "Page Vitals", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "decimals": 2, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 1000000 + }, + { + "color": "red", + "value": 2000000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 12, + "y": 12 + }, + "id": 224, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n not exists r.contentType and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "Transfer size", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.transferSize, 'Total Transfer Size')", + "textEditor": true + } + ], + "title": "Transfer size", + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 5000 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 16, + "y": 12 + }, + "id": 226, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"requests\" and\n r.origin == \"pagexray\" and\n not exists r.contentType and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "Requests", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domElements, 'DOM Elements')", + "textEditor": true + } + ], + "title": "Requests", + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 150 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 20, + "y": 12 + }, + "id": 225, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"domElements\" and \n r.origin == \"coach\" and\n r.advice == \"info\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"DOM Elements\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "DOM elements", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.requests, 'Requests')", + "textEditor": false + } + ], + "title": "DOM Elements", + "type": "stat" + }, + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 16 + }, + "id": 190, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "12.0.1", + "title": "Google Web Vitals", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 17 + }, + "id": 191, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 17 + }, + "id": 277, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and \n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "LCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 17 + }, + "id": 193, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cumulativeLayoutShift\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Cumulative Layout Shift\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refId": "CLS" + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 600 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 17 + }, + "id": 194, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refId": "TBT" + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 21 + }, + "id": 276, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "12.0.1", + "title": "Visual Metrics", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 22 + }, + "id": 192, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"FirstVisualChange\" and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Visual Change\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\n\n\n\n", + "refCount": 0, + "refId": "First Visual Change", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 22 + }, + "id": 278, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"Heading\" and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Heading\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\n\n\n\n", + "refCount": 0, + "refId": "First Visual Change", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 22 + }, + "id": 279, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"LargestImage\" and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Image\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\n\n\n\n", + "refCount": 0, + "refId": "First Visual Change", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 22 + }, + "id": 280, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"LastVisualChange\" and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Last Visual Change\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\n\n\n\n", + "refCount": 0, + "refId": "First Visual Change", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "For copy report from s3 you have to set AWS environment variables. Details - https://docs.aws.amazon.com/cli/v1/userguide/cli-configure-envvars.html#envvars-set", + "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": [ + { + "matcher": { + "id": "byName", + "options": "Link" + }, + "properties": [ + { + "id": "links", + "value": [ + { + "targetBlank": true, + "title": "Build link", + "url": "${__value.text}" + } + ] + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Run Id" + }, + "properties": [ + { + "id": "custom.width", + "value": 125 + } + ] + } + ] + }, + "gridPos": { + "h": 13, + "w": 12, + "x": 0, + "y": 25 + }, + "id": 307, + "options": { + "cellHeight": "sm", + "footer": { + "countRows": false, + "enablePagination": true, + "fields": "", + "reducer": [ + "sum" + ], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Stop" + } + ] + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "import \"strings\"\n\nbyStatus = (status) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"sitespeed.meta\" and\n r[\"testName\"] == \"${testname}\" and \n r[\"status\"] == status\n )\n |> group(columns: [\"runId\"], mode:\"by\")\n\nstart = byStatus(status: \"Start\")\nstop = byStatus(status: \"Stop\")\n\ndateToMs = (v) => float(v: uint(v: v)) / 1000000.0\n\n\njoin(tables: {start: start, stop: stop}, on: [\"runId\",\"_value\"], method: \"inner\")\n |> keep(columns: [\"_time_start\", \"_time_stop\", \"_value_start\", \"_value_stop\", \"_value\", \"runId\"])\n |> map(fn: (r) => ({ r with duration: string(v: duration(v: uint(v: r._time_stop) - uint(v: r._time_start) )) }))\n |> rename(columns: {_value: \"Link\", _time_start: \"Start\", _time_stop: \"Stop\"})\n |> map(fn:(r) => ({ r with runId: int(v: r.runId) }))\n\n |> map(fn: (r) => ({r with length: strings.strlen(v: r.Link)}))\n |> map(fn: (r) => ({r with endIndex: strings.index(v: r.Link, substr: \"job\")}))\n |> map(fn: (r) => ({r with _value: strings.substring(v: r.Link, start: r.endIndex + 4, end: r.length - 1)}))\n\n |> map(fn:(r) => ({ r with CommandCopy: \"aws s3 cp s3://cinfra-prod-qa-autotest-data/sitespeedResults/${r._value}/output sitespeedResults/${r._value} --recursive\" }))\n |> drop(columns: [\"endIndex\", \"length\", \"_value\"])\n |> group()", + "refId": "duration" + } + ], + "title": "Duration and build link", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": {}, + "indexByName": { + "Link": 2, + "Start": 3, + "Stop": 4, + "duration": 1, + "runId": 0 + }, + "renameByName": { + "duration": "Duration", + "runId": "Run Id" + } + } + } + ], + "type": "table" + }, + { + "datasource": "InfluxDB 2", + "description": "The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red" + }, + { + "color": "yellow", + "value": 80 + }, + { + "color": "green", + "value": 90 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 12, + "x": 12, + "y": 26 + }, + "id": 186, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"bestpractice\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Best Practice\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "bestpractice", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.bestpractice.score, 'Best practice')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"performance\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Performance\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "performance", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.performance.score, 'Performance')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"privacy\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Privacy\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "privacy", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.privacy.score, 'Privacy')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n not exists r.advice\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "total", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.score, 'Total')", + "textEditor": false + } + ], + "title": "Coach Score", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 30 + }, + "id": 209, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "12.0.1", + "title": "Axe violations [enable with --axe.enable]", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 12, + "y": 31 + }, + "id": 188, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"critical\" and\n r.origin == \"axe\" and \n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Critical\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "critical", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 15, + "y": 31 + }, + "id": 210, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"serious\" and\n r.origin == \"axe\" and \n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Serious\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "serious", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.serious.$function, 'Serious')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 5 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 18, + "y": 31 + }, + "id": 211, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"moderate\" and\n r.origin == \"axe\" and \n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Moderate\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "moderate", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.moderate.$function, 'Moderate')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 5 + }, + { + "color": "red", + "value": 10 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 21, + "y": 31 + }, + "id": 212, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"minor\" and\n r.origin == \"axe\" and \n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Minor\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "minor", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.minor.$function, 'Minor')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 34 + }, + "id": 271, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "12.0.1", + "title": "CPU [Chrome only, enable with --cpu]", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 12, + "y": 35 + }, + "id": 272, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"beforeFirstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Long tasks before FCP\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Long tasks before FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 15, + "y": 35 + }, + "id": 273, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"tasks\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Number of long tasks\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Long tasks before FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 18, + "y": 35 + }, + "id": 274, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"durations\" and\n r.longTasks == \"durations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Longest long task\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Long tasks before FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 21, + "y": 35 + }, + "id": 275, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"lastLongTask\" and\n r.longTasks == \"lastLongTask\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Last long task\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n ", + "refCount": 0, + "refId": "Long tasks before FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + } + ], + "title": "Page metrics", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 1 + }, + "id": 337, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 8, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "trailing moving mean(Visual Complete 85)" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 4 + } + ] + } + ] + }, + "gridPos": { + "h": 12, + "w": 12, + "x": 0, + "y": 326 + }, + "id": 336, + "options": { + "legend": { + "calcs": [ + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "FCP" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and \n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "LCP" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Speed Index\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"SpeedIndex\")\n", + "refId": "SI" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Response Time" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Last Meaningful Paint\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"LastMeaningfulPaint\")\n", + "refId": "Last Meaningful Paint" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Visual Complete 85\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"VisualComplete85\")\n", + "refId": "Visual Complete 85" + } + ], + "title": "Crucial metrics", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + }, + { + "id": "calculateField", + "options": { + "binary": { + "left": { + "fixed": "" + }, + "right": { + "fixed": "" + } + }, + "cumulative": { + "field": "Visual Complete 85", + "reducer": "mean" + }, + "mode": "windowFunctions", + "reduce": { + "include": [ + "Visual Complete 85" + ], + "reducer": "mean" + }, + "replaceFields": false, + "unary": { + "fieldName": "Visual Complete 85", + "operator": "abs" + }, + "window": { + "field": "Visual Complete 85", + "reducer": "mean", + "windowAlignment": "trailing", + "windowSize": 0.1, + "windowSizeMode": "percentage" + } + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 12, + "y": 326 + }, + "id": 342, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n|> last()\n", + "refCount": 0, + "refId": "Backend", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 15, + "y": 326 + }, + "id": 351, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Last Meaningful Paint\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\nmetric(name: \"LastMeaningfulPaint\")\n", + "refCount": 0, + "refId": "FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 18, + "y": 326 + }, + "id": 352, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Visual Complete 85\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"VisualComplete85\")\n", + "refCount": 0, + "refId": "VC85", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 12, + "y": 332 + }, + "id": 339, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and \n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "LCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 15, + "y": 332 + }, + "id": 338, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()", + "refCount": 0, + "refId": "FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 3, + "x": 18, + "y": 332 + }, + "id": 340, + "maxDataPoints": 100, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Speed Index\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> last()\n\nmetric(name: \"SpeedIndex\")\n", + "refCount": 0, + "refId": "SI", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "Meaningful Processing - delta between Backend and VC85", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisGridShow": true, + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 21, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Visual Complete 85" + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": true, + "tooltip": true, + "viz": true + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Backend" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "green", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 338 + }, + "id": 343, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Visual Complete 85\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"VisualComplete85\")\n", + "refId": "VC85" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Backend" + } + ], + "title": "VC85 vs Backend", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + }, + { + "id": "calculateField", + "options": { + "alias": "Visual Processing", + "binary": { + "left": { + "matcher": { + "id": "byName", + "options": "Visual Complete 85" + } + }, + "operator": "-", + "right": { + "matcher": { + "id": "byName", + "options": "Backend" + } + } + }, + "mode": "binary", + "reduce": { + "reducer": "sum" + }, + "replaceFields": false + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "Meaningful Processing - delta between Backend and VC85", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [], + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Visual Complete 85" + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": true, + "tooltip": true, + "viz": true + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Backend" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "green", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 4, + "x": 12, + "y": 338 + }, + "id": 344, + "options": { + "displayLabels": [ + "percent", + "name" + ], + "legend": { + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "pieType": "donut", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Visual Complete 85\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"VisualComplete85\")\n", + "refId": "VC85" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Backend" + } + ], + "title": "VC85 vs Backend", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + }, + { + "id": "calculateField", + "options": { + "alias": "Visual Processing", + "binary": { + "left": { + "matcher": { + "id": "byName", + "options": "Visual Complete 85" + } + }, + "operator": "-", + "right": { + "matcher": { + "id": "byName", + "options": "Backend" + } + } + }, + "mode": "binary", + "reduce": { + "reducer": "sum" + }, + "replaceFields": false + } + } + ], + "type": "piechart" + } + ], + "title": "Essential indicators", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 2 + }, + "id": 346, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 8, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 0, + "y": 911 + }, + "id": 345, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "FCP" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: -2d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint -1d\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1d)", + "refId": "FCP 1d" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: -8d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint -1w\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1w)", + "refId": "FCP 1w" + }, + { + "datasource": "InfluxDB 2", + "hide": true, + "query": "from(bucket: \"${bucket}\")\n |> range(start: 0)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint -1 month\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1M)", + "refId": "FCP 1M" + } + ], + "title": "FCP", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 8, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 6, + "y": 911 + }, + "id": 347, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "FCP" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: 0)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint -1d\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1d)", + "refId": "FCP 1d" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: 0)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint -1w\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1w)", + "refId": "FCP 1w" + }, + { + "datasource": "InfluxDB 2", + "hide": true, + "query": "from(bucket: \"${bucket}\")\n |> range(start: 0)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint -1 month\") \n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1M)", + "refId": "LCP 1m" + } + ], + "title": "LCP", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 8, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 12, + "y": 911 + }, + "id": 348, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Backend" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: -2d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend -1d\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1d)\n\n", + "refId": "Backend 1d" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: -7d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.navigationTiming == \"responseEnd\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Backend -1w\")\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> timeShift(duration: 1w)\n\n", + "refId": "Backend 7d" + } + ], + "title": "Backend", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 8, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 18, + "y": 911 + }, + "id": 350, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Speed Index\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"SpeedIndex\")\n", + "refId": "SI" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: -2d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Speed Index -1d\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n |> timeShift(duration: 1d)\n\nmetric(name: \"SpeedIndex\")\n", + "refId": "SI 1d" + }, + { + "datasource": "InfluxDB 2", + "hide": true, + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: -8d)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == name and\n r[\"statistics\"] == \"visualMetrics\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Speed Index -1w\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n |> timeShift(duration: 1w)\n\nmetric(name: \"SpeedIndex\")\n", + "refId": "SI 1w" + } + ], + "title": "Speed Index", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Trend", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 3 + }, + "id": 113, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 738 + }, + "id": 106, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"html\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Transfer Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Transfer size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.html.contentSize, 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"contentSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"html\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Content Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Content Size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.html.transferSize, 11)", + "textEditor": false + } + ], + "title": "HTML size", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 738 + }, + "id": 107, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"javascript\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Transfer Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Transfer size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.javascript.contentSize, 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"contentSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"javascript\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Content Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Content Size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.javascript.transferSize, 11)", + "textEditor": false + } + ], + "title": "JavaScript size", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 738 + }, + "id": 108, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"css\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Transfer Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Transfer size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.css.contentSize, 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"contentSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"css\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Content Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Content Size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.css.transferSize, 11)", + "textEditor": false + } + ], + "title": "CSS size", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 738 + }, + "id": 109, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n r.contentType == \"image\" and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Transfer Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Content Size", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.image.contentSize, 11)", + "textEditor": false + } + ], + "title": "Image size", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [], + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 746 + }, + "id": 246, + "options": { + "displayLabels": [ + "name", + "value" + ], + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value", + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "tooltip": { + "mode": "single", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"contentSize\" and\n r.origin == \"pagexray\" and\n exists r.contentType and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Content size per type", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.contentSize, 10)", + "textEditor": false + } + ], + "title": "Content size per type", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "keepLabels": [ + "contentType" + ], + "valueLabel": "contentType" + } + } + ], + "type": "piechart" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [], + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 746 + }, + "id": 281, + "options": { + "displayLabels": [ + "name", + "value" + ], + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Value", + "sortDesc": false, + "values": [ + "value", + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "tooltip": { + "mode": "single", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n exists r.contentType and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Transfer size per type", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.contentSize, 10)", + "textEditor": false + } + ], + "title": "Transfer size per type", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "keepLabels": [ + "contentType" + ], + "valueLabel": "contentType" + } + } + ], + "type": "piechart" + } + ], + "title": "Page size", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 4 + }, + "id": 283, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 847 + }, + "id": 286, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"transferSize\" and\n r.origin == \"pagexray\" and\n not exists r.contentType and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Transfer Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Transfer Size" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"contentSize\" and\n r.origin == \"pagexray\" and\n not exists r.contentType and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Content Size\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "Content Size" + } + ], + "title": "Total page size", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "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": 6, + "x": 6, + "y": 847 + }, + "id": 285, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"requests\" and\n r.origin == \"pagexray\" and\n not exists r.contentType and \n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Requests\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "Requets" + } + ], + "title": "Requests", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "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": 6, + "x": 12, + "y": 847 + }, + "id": 287, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"domElements\" and\n r.origin == \"browsertime\" and \n r.statistics ==\"pageinfo\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"DOM elements\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "Requets" + } + ], + "title": "DOM elements", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "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": 6, + "x": 18, + "y": 847 + }, + "id": 288, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"totalDomains\" and\n r.origin == \"pagexray\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total domains\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "Requets" + } + ], + "title": "Total domains", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Page history", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 5 + }, + "id": 176, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "All requests and their HTTP Status Code.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 15, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "log": 2, + "type": "log" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byValue", + "options": { + "op": "gte", + "reducer": "allIsZero", + "value": 0 + } + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": true, + "tooltip": true, + "viz": true + } + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 848 + }, + "id": 178, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"pagexray\" and \n exists r.responseCodes\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"code\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "Response codes", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.responseCodes.*, 10)", + "textEditor": false + } + ], + "title": "Response codes", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "code" + } + } + ], + "type": "timeseries" + } + ], + "title": "Response codes", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 6 + }, + "id": 292, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": 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 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "ssl" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "light-yellow", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 849 + }, + "id": 290, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) =>\n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n exists r.mainDocumentTimings\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "A" + } + ], + "title": "Main document timings", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "mainDocumentTimings" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": 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 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "wait" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "ssl" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "light-yellow", + "mode": "fixed" + } + } + ] + }, + { + "__systemRef": "hideSeriesFrom", + "matcher": { + "id": "byNames", + "options": { + "mode": "exclude", + "names": [ + "wait" + ], + "prefix": "All except:", + "readOnly": true + } + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": false, + "tooltip": false, + "viz": true + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 866 + }, + "id": 305, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) =>\n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.mainDocumentTimings == \"wait\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refId": "A" + } + ], + "title": "Main document timings - wait", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "mainDocumentTimings" + } + } + ], + "type": "timeseries" + } + ], + "title": "Main document timings", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 7 + }, + "id": 203, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 965 + }, + "id": 204, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "FCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "First Contentful Paint (FCP)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 965 + }, + "id": 205, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and \n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "LCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "Largest Contentful Paint (LCP)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 965 + }, + "id": 206, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cumulativeLayoutShift\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Cumulative Layout Shift\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "CLS", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.pageinfo.cumulativeLayoutShift.$function, 'CLS')", + "textEditor": false + } + ], + "title": "Cumulative Layout Shift (CLS)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 600 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 965 + }, + "id": 207, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "TBT", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'TBT')", + "textEditor": false + } + ], + "title": "Total Blocking Time (TBT)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "https://web.dev/articles/inp", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 500 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 973 + }, + "id": 331, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"interactionToNextPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Interaction to Next Paint\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "INP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'TBT')", + "textEditor": false + } + ], + "title": "Interaction to Next Paint (INP)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "https://web.dev/articles/fid", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 973 + }, + "id": 332, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstInputDelay\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"First Input Delay (FID)\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "FID", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'TBT')", + "textEditor": false + } + ], + "title": "First Input Delay (FID)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 800 + }, + { + "color": "red", + "value": 1800 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 973 + }, + "id": 333, + "options": { + "legend": { + "calcs": [ + "mean" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"ttfb\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Time to First Byte\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "TTFB", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'TBT')", + "textEditor": false + } + ], + "title": "Time to First Byte (TTFB)", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Google Web Vitals", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 8 + }, + "id": 252, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 851 + }, + "id": 304, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Delta TTFB metrics is metrics where we remove the time to first byte from the metrics. If we have metrics that are unstable because of unstable TTFB these metrics can be stable.\n\n", + "mode": "markdown" + }, + "pluginVersion": "11.4.0", + "title": "", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 853 + }, + "id": 253, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"deltaToTFFB\" and exists r._measurement\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) \n ", + "refCount": 0, + "refId": "G", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.deltaToTFFB.*.$function, 11)", + "textEditor": false + } + ], + "title": "Visual Metrics [$function]", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "*FCP without TTFB", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisGridShow": true, + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 21, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 873 + }, + "id": 328, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "ttfb" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"deltaToTFFB\" and \n r._measurement == \"firstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "fcp" + } + ], + "title": "TTFB vs FCP", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "*FCP without TTFB", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [], + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 4, + "x": 12, + "y": 873 + }, + "id": 329, + "options": { + "displayLabels": [ + "percent", + "name" + ], + "legend": { + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "pieType": "donut", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "ttfb" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"deltaToTFFB\" and \n r._measurement == \"firstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "fcp" + } + ], + "title": "TTFB vs FCP", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + } + ], + "type": "piechart" + }, + { + "datasource": "InfluxDB 2", + "description": "*FCP without TTFB", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 8, + "x": 16, + "y": 873 + }, + "id": 330, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "ttfb" + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"deltaToTFFB\" and \n r._measurement == \"firstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "fcp" + } + ], + "title": "TTFB vs FCP", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + } + ], + "type": "stat" + } + ], + "title": "Delta TTFB", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 9 + }, + "id": 264, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 1006 + }, + "id": 294, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Data that is collected using the [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API) (the same data as you can collect from real users. Use it to compare changes in data from our real users.", + "mode": "markdown" + }, + "pluginVersion": "11.4.0", + "title": "", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "description": "Metrics collected from theNavigation Timing API", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 5, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 2, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 1008 + }, + "id": 270, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Max", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n exists r.navigationTiming\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.navigationTiming.*.$function, 12)", + "textEditor": false + } + ], + "title": "Navigation Timings [$function]", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "navigationTiming" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "fixedColor": "semi-dark-yellow", + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": true, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 17, + "w": 24, + "x": 0, + "y": 1023 + }, + "id": 319, + "options": { + "barRadius": 0, + "barWidth": 0.85, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "orientation": "horizontal", + "showValue": "always", + "stacking": "none", + "text": {}, + "tooltip": { + "mode": "multi", + "sort": "desc" + }, + "xField": "navigationTiming", + "xTickLabelRotation": 0, + "xTickLabelSpacing": -200 + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n exists r.navigationTiming\n )\n|> keep(columns: [\"_value\", \"navigationTiming\"]) \n|> last()\n|> group() \n|> sort()", + "refId": "A" + } + ], + "title": "Navigation Timings - Timeline", + "transformations": [ + { + "id": "sortBy", + "options": { + "fields": {}, + "sort": [ + { + "desc": false, + "field": "_time" + } + ] + } + } + ], + "type": "barchart" + }, + { + "datasource": "InfluxDB 2", + "description": "Metrics collected from theNavigation Timing API", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 5, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 2, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 1040 + }, + "id": 306, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Max", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n exists r.navigationTiming\n )\n |> filter(fn: (r) => \n r.navigationTiming == \"responseEnd\" or r.navigationTiming == \"responseStart\" or r.navigationTiming == \"requestStart\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.navigationTiming.*.$function, 12)", + "textEditor": false + } + ], + "title": "Navigation Timings [$function] Request-Response part", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "navigationTiming" + } + }, + { + "id": "calculateField", + "options": { + "alias": "Content Download", + "binary": { + "left": "responseEnd", + "operator": "-", + "reducer": "sum", + "right": "responseStart" + }, + "mode": "binary", + "reduce": { + "reducer": "sum" + }, + "replaceFields": false + } + }, + { + "id": "calculateField", + "options": { + "alias": "Server Response Time", + "binary": { + "left": "responseEnd", + "operator": "-", + "reducer": "sum", + "right": "requestStart" + }, + "mode": "binary", + "reduce": { + "reducer": "sum" + }, + "replaceFields": false + } + }, + { + "id": "organize", + "options": { + "excludeByName": { + "Time": false, + "browser 1": true, + "browser 2": true, + "browser 3": true, + "category 1": true, + "category 2": true, + "category 3": true, + "connectivity 1": true, + "connectivity 2": true, + "connectivity 3": true, + "group 1": true, + "group 2": true, + "group 3": true, + "origin 1": true, + "origin 2": true, + "origin 3": true, + "page 1": true, + "page 2": true, + "page 3": true, + "requestStart": true, + "responseEnd": true, + "responseStart": true, + "statistics 1": true, + "statistics 2": true, + "statistics 3": true, + "summaryType 1": true, + "summaryType 2": true, + "summaryType 3": true, + "testName 1": true, + "testName 2": true, + "testName 3": true + }, + "indexByName": {}, + "renameByName": {} + } + } + ], + "type": "timeseries" + } + ], + "title": "Navigation Timings", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 10 + }, + "id": 324, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "List of marks" + }, + "properties": [] + } + ] + }, + "gridPos": { + "h": 11, + "w": 5, + "x": 0, + "y": 1056 + }, + "id": 327, + "options": { + "colorMode": "value", + "graphMode": "area", + "justifyMode": "auto", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "count" + ], + "fields": "/^List of marks$/", + "values": false + }, + "showPercentChange": false, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.userTimings == \"marks\"\n )\n |> group(columns: [ \"_measurement\"]) \n |> distinct(column: \"_measurement\")\n |> keep(columns: [\"_measurement\"]) \n |> group()\n |> sort(columns: [\"_measurement\"])", + "refId": "User Timings Measures" + } + ], + "title": "User Timing - Marks", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + }, + { + "id": "organize", + "options": { + "excludeByName": {}, + "includeByName": {}, + "indexByName": {}, + "renameByName": { + "_measurement": "List of marks" + } + } + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.5, + "drawStyle": "bars", + "fillOpacity": 10, + "gradientMode": "opacity", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 2, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "fieldMinMax": false, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "LINE" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "line" + }, + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 10, + 10 + ], + "fill": "dash" + } + }, + { + "id": "custom.hideFrom", + "value": { + "legend": true, + "tooltip": true, + "viz": false + } + }, + { + "id": "custom.fillOpacity", + "value": 1 + } + ] + } + ] + }, + "gridPos": { + "h": 11, + "w": 19, + "x": 5, + "y": 1056 + }, + "id": 322, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "mean" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.userTimings == \"marks\"\n )\n |> group(columns: [ \"_measurement\"], mode:\"by\") \n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n //|> set(key: \"_field\", value: \"First Contentful Paint\") \n // |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "User Timings Measures" + } + ], + "title": "User Timings - Marks", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + }, + { + "id": "calculateField", + "options": { + "alias": "LINE", + "mode": "reduceRow", + "reduce": { + "include": [ + "AppStarted" + ], + "reducer": "sum" + } + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "align": "auto", + "cellOptions": { + "type": "auto" + }, + "filterable": false, + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "List of marks" + }, + "properties": [ + { + "id": "custom.cellOptions", + "value": { + "type": "color-text" + } + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 5, + "x": 0, + "y": 1067 + }, + "id": 326, + "options": { + "cellHeight": "sm", + "footer": { + "countRows": false, + "fields": "", + "reducer": [ + "uniqueValues" + ], + "show": false + }, + "showHeader": true, + "sortBy": [] + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.userTimings == \"marks\"\n )\n |> group(columns: [ \"_measurement\"]) \n |> distinct(column: \"_measurement\")\n |> keep(columns: [\"_measurement\"]) \n |> group()\n |> sort(columns: [\"_measurement\"])", + "refId": "User Timings Measures" + } + ], + "title": "User Timing - Marks", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + }, + { + "id": "organize", + "options": { + "excludeByName": {}, + "includeByName": {}, + "indexByName": {}, + "renameByName": { + "_measurement": "List of marks" + } + } + } + ], + "type": "table" + }, + { + "datasource": "InfluxDB 2", + "description": "Last", + "fieldConfig": { + "defaults": { + "color": { + "fixedColor": "semi-dark-yellow", + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": true, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 19, + "x": 5, + "y": 1067 + }, + "id": 325, + "options": { + "barRadius": 0, + "barWidth": 0.85, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "orientation": "horizontal", + "showValue": "always", + "stacking": "none", + "text": {}, + "tooltip": { + "mode": "multi", + "sort": "desc" + }, + "xField": "_measurement", + "xTickLabelRotation": 0, + "xTickLabelSpacing": -200 + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.userTimings == \"marks\"\n )\n|> keep(columns: [\"_value\", \"_measurement\"]) \n|> last()\n|> group() \n|> sort()", + "refId": "A" + } + ], + "title": "Marks - Waterfall ", + "transformations": [ + { + "id": "sortBy", + "options": { + "fields": {}, + "sort": [ + { + "desc": false, + "field": "_time" + } + ] + } + } + ], + "type": "barchart" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 4, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 13, + "w": 24, + "x": 0, + "y": 1081 + }, + "id": 321, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "mean" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and\n r.userTimings == \"measures\"\n )\n |> group(columns: [ \"_measurement\"], mode:\"by\") \n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)", + "refId": "User Timings Measures" + } + ], + "title": "User Timing - Measures", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "User Timing (Marks & Measures)", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 11 + }, + "id": 354, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "collected using scripting", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 12, + "x": 0, + "y": 746 + }, + "id": 353, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"extras\" and exists r._measurement\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> rename(columns: {_measurement: \"name\"}) \n |> drop(columns: [\"_measurement\", \"runId\"])", + "refId": "Extra metrics" + } + ], + "title": "Extra metrics", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "name" + } + } + ], + "type": "timeseries" + } + ], + "title": "Extra Metrics", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 12 + }, + "id": 146, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "The document height in pixels.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 0, + "y": 6862 + }, + "id": 149, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"documentHeight\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Document height (pixels)\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.documentHeight, 'Document height (pixels)')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 6, + "y": 6862 + }, + "id": 151, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalDomains\" and\n r.origin == \"pagexray\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Number of domains\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.totalDomains, 'Number of domains')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The total number of iframes used on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 11, + "y": 6862 + }, + "id": 148, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"iframes\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Number of iframes\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.iframes, 'Number of iframes')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 15, + "y": 6862 + }, + "id": 152, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cookies\" and\n r.origin == \"pagexray\" and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Number of cookies\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.cookies, 'Number of cookies')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 19, + "y": 6862 + }, + "id": 249, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cookies\" and\n r.origin == \"pagexray\" and\n r.party == \"thirdParty\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Third Party Cookies\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.thirdParty.cookies, 'Third Party Cookies')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The $function cache expire time of all responses for the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 0, + "y": 7172 + }, + "id": 153, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"expireStats\" and\n r.origin == \"pagexray\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"The ${function} cache expire time of all responses\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.expireStats.$function, 'The $function cache expire time of all responses')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The $function last modified time of all responses for the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "decimals": 2, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 5, + "y": 7172 + }, + "id": 154, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"lastModifiedStats\" and\n r.origin == \"pagexray\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"The $function last modified time of all responses\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.lastModifiedStats.$function, 'The $function last modified time of all responses')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The average DOM depth of the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 9, + "y": 7172 + }, + "id": 155, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"avg\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"domDepth\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Average DOM depth\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domDepth.avg, 'Average DOM depth')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The max depth of DOM elements on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 12, + "y": 7172 + }, + "id": 156, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"domDepth\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Max DOM depth\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domDepth.max, 'Max DOM depth')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 16, + "y": 7172 + }, + "id": 150, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"localStorageSize\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Local storage size\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.localStorageSize, 'Local storage size')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "The total number of iframes used on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 20, + "y": 7172 + }, + "id": 250, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"scripts\" and\n r.origin == \"coach\" \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Number of scripts\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.scripts, 'Number of scripts')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + } + ], + "title": "Page statistics", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 13 + }, + "id": 220, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineStyle": { + "fill": "solid" + }, + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 13, + "w": 24, + "x": 0, + "y": 6863 + }, + "id": 221, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Max", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"requests\" and\n r.origin == \"pagexray\" and \n exists r.contentType and\n not exists r.party\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.requests, 10)", + "textEditor": false + } + ], + "title": "Number of requests per type", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "contentType" + } + } + ], + "type": "timeseries" + } + ], + "title": "Request history", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 14 + }, + "id": 313, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisGridShow": false, + "axisLabel": "", + "axisPlacement": "hidden", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineStyle": { + "fill": "solid" + }, + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "max": 1, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red" + }, + { + "color": "orange", + "value": 0.5 + }, + { + "color": "yellow", + "value": 0.8 + }, + { + "color": "green", + "value": 0.9 + } + ] + }, + "unit": "percentunit" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 6864 + }, + "id": 310, + "options": { + "legend": { + "calcs": [ + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"lighthouse\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))", + "refId": "Lighthouse Scores" + } + ], + "title": "Lighthouse - Scores", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "max": 1, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "dark-red" + }, + { + "color": "red", + "value": 0.25 + }, + { + "color": "orange", + "value": 0.5 + }, + { + "color": "light-orange", + "value": 0.7 + }, + { + "color": "yellow", + "value": 0.8 + }, + { + "color": "green", + "value": 0.9 + } + ] + }, + "unit": "percentunit" + }, + "overrides": [] + }, + "gridPos": { + "h": 12, + "w": 12, + "x": 12, + "y": 6864 + }, + "id": 311, + "options": { + "minVizHeight": 75, + "minVizWidth": 71, + "orientation": "vertical", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showThresholdLabels": false, + "showThresholdMarkers": true, + "sizing": "auto" + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"lighthouse\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))\n //|> filter(fn: (r) => r.audit == \"seo\")", + "refId": "A" + } + ], + "title": "Lighthouse - Scores", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "gauge" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 6, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "cumulative-layout-shift" + }, + "properties": [ + { + "id": "unit", + "value": "none" + }, + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.showPoints", + "value": "never" + }, + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 10, + 10 + ], + "fill": "dash" + } + }, + { + "id": "custom.lineWidth", + "value": 1 + }, + { + "id": "custom.lineWidth", + "value": 1 + }, + { + "id": "custom.lineInterpolation", + "value": "stepBefore" + }, + { + "id": "custom.axisGridShow", + "value": false + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 7114 + }, + "id": 312, + "options": { + "legend": { + "calcs": [ + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"numericValue\" and\n r.origin == \"lighthouse\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))", + "refId": "Lighthouse Metrics" + } + ], + "title": "Lighthouse - Metrics", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 7118 + }, + "id": 315, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"numericValue\" and\n r.origin == \"lighthouse\" and\n r.audit == \"largest-contentful-paint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))\n |> set(key: \"_field\", value: \"Largest Contentful Paint\") ", + "refCount": 0, + "refId": "Lighthouse - LCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 7118 + }, + "id": 316, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"numericValue\" and\n r.origin == \"lighthouse\" and\n r.audit == \"first-contentful-paint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))\n |> set(key: \"_field\", value: \"First Contentful Paint\") ", + "refCount": 0, + "refId": "Lighthouse - LCP", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 7118 + }, + "id": 317, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"numericValue\" and\n r.origin == \"lighthouse\" and\n r.audit == \"cumulative-layout-shift\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))\n |> set(key: \"_field\", value: \"Cumulative Layout Shift\")", + "refId": "CLS" + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 600 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 7118 + }, + "id": 318, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"numericValue\" and\n r.origin == \"lighthouse\" and\n r.audit == \"total-blocking-time\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> map(fn: (r) => ({ r with _field: r.audit }))\n |> set(key: \"_field\", value: \"Total Blocking Time\")", + "refId": "TBT" + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + } + ], + "title": "Lighthouse", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 15 + }, + "id": 223, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 5, + "x": 0, + "y": 6865 + }, + "id": 229, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"tasks\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Long Tasks\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')", + "textEditor": true + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 5, + "y": 6865 + }, + "id": 230, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"beforeFirstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Long tasks before FCP\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstContentfulPaint.tasks.$function, 'Long Tasks Before FCP')", + "textEditor": true + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 11, + "y": 6865 + }, + "id": 231, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"cpu\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')", + "textEditor": true + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 7, + "x": 17, + "y": 6865 + }, + "id": 232, + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "text": {}, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"durations\" and\n r.longTasks == \"durations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Longest long task\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 'Longest Long Task')", + "textEditor": true + } + ], + "title": "", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "stat" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 0, + "y": 7101 + }, + "id": 236, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"tasks\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Long Tasks\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')", + "textEditor": true + } + ], + "title": "CPU Long Tasks", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 5, + "y": 7101 + }, + "id": 237, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"tasks\" and\n r.longTasks == \"beforeFirstContentfulPaint\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Long tasks before FCP\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstContentfulPaint.tasks.$function, 'Long Tasks Before FCP')", + "textEditor": false + } + ], + "title": "CPU Long Tasks Before FCP", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 11, + "y": 7101 + }, + "id": 238, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"cpu\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')", + "textEditor": true + } + ], + "title": "Total Blocking Time", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 7, + "x": 17, + "y": 7101 + }, + "id": 239, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r._measurement == \"durations\" and\n r.longTasks == \"durations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Longest long task\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 'Longest Long Task')", + "textEditor": true + } + ], + "title": "Longest Long Task", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "CPU Long Tasks", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 16 + }, + "id": 298, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 6866 + }, + "id": 299, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Data collected from the Chrome trace log where we can see where the browser spends it time creating the page.\n\n", + "mode": "markdown" + }, + "pluginVersion": "11.4.0", + "title": "", + "type": "text" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 5, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Total" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "color", + "value": { + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 24, + "x": 0, + "y": 7075 + }, + "id": 296, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cpu\" and \n exists r.categories\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A" + } + ], + "title": "CPU [Chrome only]", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "categories" + } + }, + { + "id": "calculateField", + "options": { + "alias": "Total", + "cumulative": { + "reducer": "mean" + }, + "mode": "reduceRow", + "reduce": { + "reducer": "sum" + }, + "window": { + "reducer": "mean", + "windowAlignment": "trailing", + "windowSize": 0.1, + "windowSizeMode": "percentage" + } + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "CPU time spent per event\n", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 5, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 12, + "w": 24, + "x": 0, + "y": 7085 + }, + "id": 301, + "options": { + "legend": { + "calcs": [ + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "sortBy": "Last *", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cpu\" and \n exists r.events\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total Blocking Time\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refId": "A" + } + ], + "title": "CPU time spent per event", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "events" + } + } + ], + "type": "timeseries" + } + ], + "title": "CPU Details [Chrome only, enable with --cpu]", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 17 + }, + "id": 140, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 6867 + }, + "id": 104, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cdp\" and \n r.performance == \"JSHeapTotalSize\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"JSHeapTotalSize\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "JSHeapTotalSize", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapTotalSize.$function, 12)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cdp\" and \n r.performance == \"JSHeapUsedSize\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"JSHeapUsedSize\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "JSHeapUsedSize", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapUsedSize.$function, 12)", + "textEditor": false + } + ], + "title": "JS Heap size [Chrome only]", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "links": [], + "mappings": [], + "max": 1, + "min": 0, + "thresholds": { + "mode": "percentage", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percentunit" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "JS Heap Usage %" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "blue", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 7065 + }, + "id": 302, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cdp\" and \n r.performance == \"JSHeapTotalSize\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"JSHeapTotalSize\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapTotalSize.$function, 12)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n|> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"cdp\" and \n r.performance == \"JSHeapUsedSize\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"JSHeapUsedSize\")\n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapUsedSize.$function, 12)", + "textEditor": false + } + ], + "title": "JS Heap Usage [Chrome only]", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + }, + { + "id": "calculateField", + "options": { + "alias": "JS Heap Usage %", + "binary": { + "left": "JSHeapUsedSize", + "operator": "/", + "reducer": "sum", + "right": "JSHeapTotalSize" + }, + "mode": "binary", + "reduce": { + "reducer": "sum" + }, + "replaceFields": true + } + } + ], + "type": "timeseries" + } + ], + "title": "JavaScript heap [Chrome only]", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 18 + }, + "id": 115, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "Timing metrics collected using browser APIs like the Navigation Timing API.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 12, + "x": 0, + "y": 383 + }, + "id": 118, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "metric = (name) => from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and\n r.statistics == \"timings\" and \n r._measurement == name and\n not exists r.navigationTiming\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: name)\n|> drop(columns: [\"_measurement\", \"runId\"]) \n |> yield(name: name)\n\nmetric(name: \"fullyLoaded\")\nmetric(name: \"firstPaint\")\nmetric(name: \"loadEventEnd\")\nmetric(name: \"domContentLoadedTime\")\nmetric(name: \"serverResponseTime\")\n\n", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, 11)", + "textEditor": false + } + ], + "title": "Timings [$function]", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "Modern browser has many API that can deliver useful metrics to you. \n\nhttps://www.sitespeed.io/documentation/sitespeed.io/metrics/#browser-metrics", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 12, + "x": 12, + "y": 383 + }, + "id": 334, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true, + "sortBy": "Name", + "sortDesc": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and exists r.pageTimings \n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) \n\n", + "refId": "browser metrics" + } + ], + "title": "Browser metrics", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "pageTimings" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "fixedColor": "semi-dark-yellow", + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": true, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "area" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "yellow", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 398 + }, + "id": 335, + "options": { + "barRadius": 0, + "barWidth": 0.85, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "orientation": "horizontal", + "showValue": "always", + "stacking": "none", + "text": {}, + "tooltip": { + "mode": "multi", + "sort": "desc" + }, + "xField": "navigationTiming", + "xTickLabelRotation": 0, + "xTickLabelSpacing": -200 + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.origin == \"browsertime\" and exists r.pageTimings \n )\n|> keep(columns: [\"_value\", \"pageTimings\"]) \n|> last()\n|> group() \n|> sort()", + "refId": "A" + } + ], + "title": "Browser Metrics - Timeline", + "transformations": [ + { + "id": "sortBy", + "options": { + "fields": {}, + "sort": [ + { + "desc": false, + "field": "_time" + } + ] + } + } + ], + "type": "barchart" + } + ], + "title": "Timings", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 19 + }, + "id": 199, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "max": 100, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 6869 + }, + "id": 201, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"bestpractice\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Best Practice\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "best practise", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.bestpractice.score, 'Best practice')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"performance\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Performance\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "performance", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.performance.score, 'Performance')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n r.advice == \"privacy\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Privacy\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "privacy", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.privacy.score, 'Privacy')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"score\" and\n r.origin == \"coach\" and\n not exists r.advice\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Total\") \n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "total", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.score, 'Total')", + "textEditor": false + } + ], + "title": "Coach Score", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Coach history", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 20 + }, + "id": 196, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 6870 + }, + "id": 197, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"critical\" and\n r.origin == \"axe\" and\n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Critical\") \n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Axe Critical Violations", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"serious\" and\n r.origin == \"axe\" and\n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Serious\") \n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Axe Serious Violations", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.serious.$function, 'Serious')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"moderate\" and\n r.origin == \"axe\" and\n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Moderate\") \n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Axe Moderate Violations", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.moderate.$function, 'Moderate')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => \n r._measurement == \"minor\" and\n r.origin == \"axe\" and\n r.axeType == \"violations\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> set(key: \"_field\", value: \"Minor\") \n|> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "Axe Minor Violations", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.minor.$function, 'Minor')", + "textEditor": false + } + ], + "title": "Axe violations", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Axe history", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 21 + }, + "id": 234, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 6871 + }, + "id": 235, + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cookies\" and\n r.origin == \"pagexray\" and \n r.party == \"firstParty\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "firstParty", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.thirdParty.cookies, 'Third Party Cookies')", + "textEditor": true + }, + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"value\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"cookies\" and\n r.origin == \"pagexray\" and \n r.party == \"thirdParty\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "thirdParty", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.firstParty.cookies, 'First Party Cookies')", + "textEditor": false + } + ], + "title": "Cookies", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "party" + } + } + ], + "type": "timeseries" + } + ], + "title": "Cookies", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 22 + }, + "id": 136, + "panels": [ + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 35, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 2, + 2 + ], + "fill": "dash" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LargestImage" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 3, + 3 + ], + "fill": "dash" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 6872 + }, + "id": 142, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"requests\" and\n r.origin == \"thirdparty\" and\n r.thirdPartyCategory == \"survelliance\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.category.*.requests.$function, 10)", + "textEditor": false + } + ], + "title": "Third party request by category", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "thirdPartyCategory" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 35, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 2, + 2 + ], + "fill": "dash" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LargestImage" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 3, + 3 + ], + "fill": "dash" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 6872 + }, + "id": 144, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"tools\" and\n r.origin == \"thirdparty\" and\n r.thirdPartyCategory == \"survelliance\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.category.*.tools.$function, 10)", + "textEditor": false + } + ], + "title": "Third party tools by category", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "thirdPartyCategory" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "Activate by adding --thirdParty.cpu to to your run.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 6982 + }, + "id": 134, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.tool.*.cpu, 10)", + "textEditor": false + } + ], + "title": "CPU time spent per tool/domain - enable using --thirdParty.cpu [Chrome only]", + "type": "timeseries" + } + ], + "title": "Third party", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 23 + }, + "id": 172, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 5, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "error console" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 2516 + }, + "id": 111, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.statistics == \"console\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"runId\"]) \n", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.console.*.$function, 11)", + "textEditor": false + } + ], + "title": "Console error and warnings", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "statistics" + } + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "Show number of errors from Browsertime and other tools.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 2516 + }, + "id": 174, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r.statistics == \"errors\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n|> drop(columns: [\"runId\"]) \n", + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.errors.$function, 11)", + "textEditor": false + } + ], + "title": "Errors collecting the metrics", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "statistics" + } + } + ], + "type": "timeseries" + } + ], + "title": "Errors", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 24 + }, + "id": 356, + "panels": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "fieldConfig": { + "defaults": { + "color": { + "fixedColor": "transparent", + "mode": "fixed" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "series", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "A-series" + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": true, + "tooltip": true, + "viz": true + } + } + ] + } + ] + }, + "gridPos": { + "h": 12, + "w": 13, + "x": 0, + "y": 186 + }, + "id": 355, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true, + "sortBy": "Max", + "sortDesc": true + }, + "tooltip": { + "hideZeros": false, + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "12.0.1", + "targets": [ + { + "channel": "plugin/testdata/random-20Hz-stream", + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "queryType": "randomWalk", + "refId": "A" + } + ], + "title": "Chrome versions", + "transformations": [ + { + "id": "labelsToFields", + "options": { + "valueLabel": "code" + } + } + ], + "type": "timeseries" + } + ], + "title": "Chrome versions", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 25 + }, + "id": 261, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 6874 + }, + "id": 244, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"median\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"cpuBenchmark\" and\n r.origin == \"browsertime\" and \n r.statistics == \"browser\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.min, 'min')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"min\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"cpuBenchmark\" and\n r.origin == \"browsertime\" and \n r.statistics == \"browser\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.median, 'median')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"cpuBenchmark\" and\n r.origin == \"browsertime\" and \n r.statistics == \"browser\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.max, 'max')", + "textEditor": false + } + ], + "title": "CPU benchmark", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 6953 + }, + "id": 267, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"stddev\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"cpuBenchmark\" and\n r.origin == \"browsertime\" and \n r.statistics == \"browser\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.stddev, 'stddev')", + "textEditor": false + } + ], + "title": "CPU benchmark stddev", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "CPU benchmark variation", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 26 + }, + "id": 243, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 6875 + }, + "id": 266, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "desc" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.min, 'min')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"min\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.median, 'median')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"max\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.max, 'max')", + "textEditor": false + } + ], + "title": "TTFB", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 6926 + }, + "id": 245, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "query": " from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"stddev\"\n )\n |> filter(fn: (r) => \n r._measurement ==\"ttfb\" and\n r.origin == \"browsertime\" and \n r.statistics == \"timings\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.stddev, 'stddev')", + "textEditor": false + } + ], + "title": "TTFB stddev", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "TTFB variation", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 27 + }, + "id": 256, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 6876 + }, + "id": 254, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> set(key: \"_field\", value: \"Last 24 hours\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "last24", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.firstContentfulPaint.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"firstContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> timeShift(duration: 24h)\n |> set(key: \"_field\", value: \"One week earlier\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "1week", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.firstContentfulPaint.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "First Contentful Paint", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 6876 + }, + "id": 257, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> set(key: \"_field\", value: \"Last 24 hours\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.largestContentfulPaint.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"largestContentfulPaint\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> timeShift(duration: 24h)\n |> set(key: \"_field\", value: \"One week earlier\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.largestContentfulPaint.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Largest Contentful Paint", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 6905 + }, + "id": 258, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> set(key: \"_field\", value: \"Last 24 hours\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.totalBlockingTime.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) => \n r._measurement == \"totalBlockingTime\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> timeShift(duration: 24h)\n |> set(key: \"_field\", value: \"One week earlier\")\n |> drop(columns: [\"_measurement\", \"runId\"]) \n", + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.totalBlockingTime.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Total Blocking Time", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 6905 + }, + "id": 259, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) =>\n r._measurement == \"cumulativeLayoutShift\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> set(key: \"_field\", value: \"Last 24 hours\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.cumulativeLayoutShift.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) =>\n r.category == \"${category}\" and\n r.testName == \"${testname}\" and\n r.group == \"${group}\" and\n r.page == \"${page}\" and\n r.browser == \"${browser}\" and\n r.connectivity == \"${connectivity}\" and\n r._field == \"${function}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> filter(fn: (r) =>\n r._measurement == \"cumulativeLayoutShift\" and\n r.origin == \"browsertime\" and\n r.statistics == \"googleWebVitals\"\n )\n |> aggregateWindow(every: ${g}, fn: median, createEmpty: false)\n |> timedMovingAverage(every: 10m, period: 24h)\n |> timeShift(duration: 24h)\n |> set(key: \"_field\", value: \"One week earlier\")\n |> drop(columns: [\"_measurement\", \"runId\"]) ", + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.cumulativeLayoutShift.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Cumulative Layout Shift", + "transformations": [ + { + "id": "labelsToFields", + "options": {} + } + ], + "type": "timeseries" + } + ], + "title": "Google Web Vitals trends", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 28 + }, + "id": 122, + "panels": [ + { + "datasource": "InfluxDB 2", + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 6877 + }, + "id": 124, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "query": "", + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "First Visual Change", + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 6877 + }, + "id": 126, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Speed Index", + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 6885 + }, + "id": 128, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.serverResponseTime.$function, '24h'), 'TTFB')", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.serverResponseTime.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "TTFB/Server response time", + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 6885 + }, + "id": 130, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Fully Loaded", + "type": "timeseries" + }, + { + "datasource": "InfluxDB 2", + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "insertNulls": false, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 24, + "x": 0, + "y": 6893 + }, + "id": 179, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.4.0", + "targets": [ + { + "datasource": "InfluxDB 2", + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "First Visual Change History", + "type": "timeseries" + } + ], + "title": "Timing trends", + "type": "row" + } + ], + "schemaVersion": 41, + "tags": [ + "WebPerf", + "sitespeed.io" + ], + "templating": { + "list": [ + { + "current": { + "text": "sitespeed", + "value": "sitespeed" + }, + "label": "bucket", + "name": "bucket", + "options": [ + { + "selected": true, + "text": "sitespeed", + "value": "sitespeed" + }, + { + "selected": false, + "text": "${bucket}", + "value": "${bucket}" + } + ], + "query": "sitespeed", + "type": "custom" + }, + { + "hide": 2, + "label": "sitespeed_io", + "name": "base", + "query": "sitespeed_io", + "skipUrlSync": true, + "type": "constant", + "current": { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + }, + "options": [ + { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + } + ] + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\nschema.tagValues(bucket: \"${bucket}\", tag: \"category\")", + "includeAll": false, + "name": "category", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "s", + "37": "c", + "38": "h", + "39": "e", + "40": "m", + "41": "a", + "42": ".", + "43": "t", + "44": "a", + "45": "g", + "46": "V", + "47": "a", + "48": "l", + "49": "u", + "50": "e", + "51": "s", + "52": "(", + "53": "b", + "54": "u", + "55": "c", + "56": "k", + "57": "e", + "58": "t", + "59": ":", + "60": " ", + "61": "\"", + "62": "s", + "63": "i", + "64": "t", + "65": "e", + "66": "s", + "67": "p", + "68": "e", + "69": "e", + "70": "d", + "71": "\"", + "72": ",", + "73": " ", + "74": "t", + "75": "a", + "76": "g", + "77": ":", + "78": " ", + "79": "\"", + "80": "c", + "81": "a", + "82": "t", + "83": "e", + "84": "g", + "85": "o", + "86": "r", + "87": "y", + "88": "\"", + "89": ")", + "query": "import \"influxdata/influxdb/schema\"\nschema.tagValues(bucket: \"${bucket}\", tag: \"category\")" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"testName\",\npredicate: (r) => r.category == \"${category}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)", + "includeAll": false, + "name": "testname", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "\n", + "37": "s", + "38": "c", + "39": "h", + "40": "e", + "41": "m", + "42": "a", + "43": ".", + "44": "t", + "45": "a", + "46": "g", + "47": "V", + "48": "a", + "49": "l", + "50": "u", + "51": "e", + "52": "s", + "53": "(", + "54": "\n", + "55": "b", + "56": "u", + "57": "c", + "58": "k", + "59": "e", + "60": "t", + "61": ":", + "62": " ", + "63": "\"", + "64": "s", + "65": "i", + "66": "t", + "67": "e", + "68": "s", + "69": "p", + "70": "e", + "71": "e", + "72": "d", + "73": "\"", + "74": ",", + "75": " ", + "76": "\n", + "77": "t", + "78": "a", + "79": "g", + "80": ":", + "81": " ", + "82": "\"", + "83": "t", + "84": "e", + "85": "s", + "86": "t", + "87": "N", + "88": "a", + "89": "m", + "90": "e", + "91": "\"", + "92": ",", + "93": "\n", + "94": "p", + "95": "r", + "96": "e", + "97": "d", + "98": "i", + "99": "c", + "100": "a", + "101": "t", + "102": "e", + "103": ":", + "104": " ", + "105": "(", + "106": "r", + "107": ")", + "108": " ", + "109": "=", + "110": ">", + "111": " ", + "112": "r", + "113": ".", + "114": "c", + "115": "a", + "116": "t", + "117": "e", + "118": "g", + "119": "o", + "120": "r", + "121": "y", + "122": " ", + "123": "=", + "124": "=", + "125": " ", + "126": "\"", + "127": "$", + "128": "{", + "129": "c", + "130": "a", + "131": "t", + "132": "e", + "133": "g", + "134": "o", + "135": "r", + "136": "y", + "137": "}", + "138": "\"", + "139": " ", + "140": "a", + "141": "n", + "142": "d", + "143": " ", + "144": "r", + "145": ".", + "146": "_", + "147": "m", + "148": "e", + "149": "a", + "150": "s", + "151": "u", + "152": "r", + "153": "e", + "154": "m", + "155": "e", + "156": "n", + "157": "t", + "158": " ", + "159": "=", + "160": "=", + "161": " ", + "162": "\"", + "163": "2", + "164": "0", + "165": "0", + "166": "\"", + "167": ",", + "168": "\n", + "169": "s", + "170": "t", + "171": "a", + "172": "r", + "173": "t", + "174": ":", + "175": " ", + "176": "v", + "177": ".", + "178": "t", + "179": "i", + "180": "m", + "181": "e", + "182": "R", + "183": "a", + "184": "n", + "185": "g", + "186": "e", + "187": "S", + "188": "t", + "189": "a", + "190": "r", + "191": "t", + "192": ",", + "193": "\n", + "194": "s", + "195": "t", + "196": "o", + "197": "p", + "198": ":", + "199": " ", + "200": "v", + "201": ".", + "202": "t", + "203": "i", + "204": "m", + "205": "e", + "206": "R", + "207": "a", + "208": "n", + "209": "g", + "210": "e", + "211": "S", + "212": "t", + "213": "o", + "214": "p", + "215": "\n", + "216": ")", + "query": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"testName\",\npredicate: (r) => r.category == \"${category}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"group\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)", + "includeAll": false, + "label": "domain", + "name": "group", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "\n", + "37": "s", + "38": "c", + "39": "h", + "40": "e", + "41": "m", + "42": "a", + "43": ".", + "44": "t", + "45": "a", + "46": "g", + "47": "V", + "48": "a", + "49": "l", + "50": "u", + "51": "e", + "52": "s", + "53": "(", + "54": "\n", + "55": "b", + "56": "u", + "57": "c", + "58": "k", + "59": "e", + "60": "t", + "61": ":", + "62": " ", + "63": "\"", + "64": "s", + "65": "i", + "66": "t", + "67": "e", + "68": "s", + "69": "p", + "70": "e", + "71": "e", + "72": "d", + "73": "\"", + "74": ",", + "75": " ", + "76": "\n", + "77": "t", + "78": "a", + "79": "g", + "80": ":", + "81": " ", + "82": "\"", + "83": "g", + "84": "r", + "85": "o", + "86": "u", + "87": "p", + "88": "\"", + "89": ",", + "90": "\n", + "91": "p", + "92": "r", + "93": "e", + "94": "d", + "95": "i", + "96": "c", + "97": "a", + "98": "t", + "99": "e", + "100": ":", + "101": " ", + "102": "(", + "103": "r", + "104": ")", + "105": " ", + "106": "=", + "107": ">", + "108": " ", + "109": "r", + "110": ".", + "111": "c", + "112": "a", + "113": "t", + "114": "e", + "115": "g", + "116": "o", + "117": "r", + "118": "y", + "119": " ", + "120": "=", + "121": "=", + "122": " ", + "123": "\"", + "124": "$", + "125": "{", + "126": "c", + "127": "a", + "128": "t", + "129": "e", + "130": "g", + "131": "o", + "132": "r", + "133": "y", + "134": "}", + "135": "\"", + "136": " ", + "137": "a", + "138": "n", + "139": "d", + "140": " ", + "141": "r", + "142": ".", + "143": "t", + "144": "e", + "145": "s", + "146": "t", + "147": "N", + "148": "a", + "149": "m", + "150": "e", + "151": " ", + "152": "=", + "153": "=", + "154": " ", + "155": "\"", + "156": "$", + "157": "{", + "158": "t", + "159": "e", + "160": "s", + "161": "t", + "162": "n", + "163": "a", + "164": "m", + "165": "e", + "166": "}", + "167": "\"", + "168": " ", + "169": "a", + "170": "n", + "171": "d", + "172": " ", + "173": "r", + "174": ".", + "175": "_", + "176": "m", + "177": "e", + "178": "a", + "179": "s", + "180": "u", + "181": "r", + "182": "e", + "183": "m", + "184": "e", + "185": "n", + "186": "t", + "187": " ", + "188": "=", + "189": "=", + "190": " ", + "191": "\"", + "192": "2", + "193": "0", + "194": "0", + "195": "\"", + "196": ",", + "197": "\n", + "198": "s", + "199": "t", + "200": "a", + "201": "r", + "202": "t", + "203": ":", + "204": " ", + "205": "v", + "206": ".", + "207": "t", + "208": "i", + "209": "m", + "210": "e", + "211": "R", + "212": "a", + "213": "n", + "214": "g", + "215": "e", + "216": "S", + "217": "t", + "218": "a", + "219": "r", + "220": "t", + "221": ",", + "222": "\n", + "223": "s", + "224": "t", + "225": "o", + "226": "p", + "227": ":", + "228": " ", + "229": "v", + "230": ".", + "231": "t", + "232": "i", + "233": "m", + "234": "e", + "235": "R", + "236": "a", + "237": "n", + "238": "g", + "239": "e", + "240": "S", + "241": "t", + "242": "o", + "243": "p", + "244": "\n", + "245": ")", + "query": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"group\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"page\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)", + "includeAll": false, + "name": "page", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "\n", + "37": "s", + "38": "c", + "39": "h", + "40": "e", + "41": "m", + "42": "a", + "43": ".", + "44": "t", + "45": "a", + "46": "g", + "47": "V", + "48": "a", + "49": "l", + "50": "u", + "51": "e", + "52": "s", + "53": "(", + "54": "\n", + "55": "b", + "56": "u", + "57": "c", + "58": "k", + "59": "e", + "60": "t", + "61": ":", + "62": " ", + "63": "\"", + "64": "s", + "65": "i", + "66": "t", + "67": "e", + "68": "s", + "69": "p", + "70": "e", + "71": "e", + "72": "d", + "73": "\"", + "74": ",", + "75": " ", + "76": "\n", + "77": "t", + "78": "a", + "79": "g", + "80": ":", + "81": " ", + "82": "\"", + "83": "p", + "84": "a", + "85": "g", + "86": "e", + "87": "\"", + "88": ",", + "89": "\n", + "90": "p", + "91": "r", + "92": "e", + "93": "d", + "94": "i", + "95": "c", + "96": "a", + "97": "t", + "98": "e", + "99": ":", + "100": " ", + "101": "(", + "102": "r", + "103": ")", + "104": " ", + "105": "=", + "106": ">", + "107": " ", + "108": "r", + "109": ".", + "110": "c", + "111": "a", + "112": "t", + "113": "e", + "114": "g", + "115": "o", + "116": "r", + "117": "y", + "118": " ", + "119": "=", + "120": "=", + "121": " ", + "122": "\"", + "123": "$", + "124": "{", + "125": "c", + "126": "a", + "127": "t", + "128": "e", + "129": "g", + "130": "o", + "131": "r", + "132": "y", + "133": "}", + "134": "\"", + "135": " ", + "136": "a", + "137": "n", + "138": "d", + "139": " ", + "140": "r", + "141": ".", + "142": "t", + "143": "e", + "144": "s", + "145": "t", + "146": "N", + "147": "a", + "148": "m", + "149": "e", + "150": " ", + "151": "=", + "152": "=", + "153": " ", + "154": "\"", + "155": "$", + "156": "{", + "157": "t", + "158": "e", + "159": "s", + "160": "t", + "161": "n", + "162": "a", + "163": "m", + "164": "e", + "165": "}", + "166": "\"", + "167": " ", + "168": "a", + "169": "n", + "170": "d", + "171": " ", + "172": "r", + "173": ".", + "174": "g", + "175": "r", + "176": "o", + "177": "u", + "178": "p", + "179": " ", + "180": "=", + "181": "=", + "182": " ", + "183": "\"", + "184": "$", + "185": "{", + "186": "g", + "187": "r", + "188": "o", + "189": "u", + "190": "p", + "191": "}", + "192": "\"", + "193": " ", + "194": "a", + "195": "n", + "196": "d", + "197": " ", + "198": "r", + "199": ".", + "200": "_", + "201": "m", + "202": "e", + "203": "a", + "204": "s", + "205": "u", + "206": "r", + "207": "e", + "208": "m", + "209": "e", + "210": "n", + "211": "t", + "212": " ", + "213": "=", + "214": "=", + "215": " ", + "216": "\"", + "217": "2", + "218": "0", + "219": "0", + "220": "\"", + "221": ",", + "222": "\n", + "223": "s", + "224": "t", + "225": "a", + "226": "r", + "227": "t", + "228": ":", + "229": " ", + "230": "v", + "231": ".", + "232": "t", + "233": "i", + "234": "m", + "235": "e", + "236": "R", + "237": "a", + "238": "n", + "239": "g", + "240": "e", + "241": "S", + "242": "t", + "243": "a", + "244": "r", + "245": "t", + "246": ",", + "247": "\n", + "248": "s", + "249": "t", + "250": "o", + "251": "p", + "252": ":", + "253": " ", + "254": "v", + "255": ".", + "256": "t", + "257": "i", + "258": "m", + "259": "e", + "260": "R", + "261": "a", + "262": "n", + "263": "g", + "264": "e", + "265": "S", + "266": "t", + "267": "o", + "268": "p", + "269": "\n", + "270": ")", + "query": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"page\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"browser\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r.page == \"${page}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)", + "includeAll": false, + "name": "browser", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "\n", + "37": "s", + "38": "c", + "39": "h", + "40": "e", + "41": "m", + "42": "a", + "43": ".", + "44": "t", + "45": "a", + "46": "g", + "47": "V", + "48": "a", + "49": "l", + "50": "u", + "51": "e", + "52": "s", + "53": "(", + "54": "\n", + "55": "b", + "56": "u", + "57": "c", + "58": "k", + "59": "e", + "60": "t", + "61": ":", + "62": " ", + "63": "\"", + "64": "s", + "65": "i", + "66": "t", + "67": "e", + "68": "s", + "69": "p", + "70": "e", + "71": "e", + "72": "d", + "73": "\"", + "74": ",", + "75": " ", + "76": "\n", + "77": "t", + "78": "a", + "79": "g", + "80": ":", + "81": " ", + "82": "\"", + "83": "b", + "84": "r", + "85": "o", + "86": "w", + "87": "s", + "88": "e", + "89": "r", + "90": "\"", + "91": ",", + "92": "\n", + "93": "p", + "94": "r", + "95": "e", + "96": "d", + "97": "i", + "98": "c", + "99": "a", + "100": "t", + "101": "e", + "102": ":", + "103": " ", + "104": "(", + "105": "r", + "106": ")", + "107": " ", + "108": "=", + "109": ">", + "110": " ", + "111": "r", + "112": ".", + "113": "c", + "114": "a", + "115": "t", + "116": "e", + "117": "g", + "118": "o", + "119": "r", + "120": "y", + "121": " ", + "122": "=", + "123": "=", + "124": " ", + "125": "\"", + "126": "$", + "127": "{", + "128": "c", + "129": "a", + "130": "t", + "131": "e", + "132": "g", + "133": "o", + "134": "r", + "135": "y", + "136": "}", + "137": "\"", + "138": " ", + "139": "a", + "140": "n", + "141": "d", + "142": " ", + "143": "r", + "144": ".", + "145": "t", + "146": "e", + "147": "s", + "148": "t", + "149": "N", + "150": "a", + "151": "m", + "152": "e", + "153": " ", + "154": "=", + "155": "=", + "156": " ", + "157": "\"", + "158": "$", + "159": "{", + "160": "t", + "161": "e", + "162": "s", + "163": "t", + "164": "n", + "165": "a", + "166": "m", + "167": "e", + "168": "}", + "169": "\"", + "170": " ", + "171": "a", + "172": "n", + "173": "d", + "174": " ", + "175": "r", + "176": ".", + "177": "g", + "178": "r", + "179": "o", + "180": "u", + "181": "p", + "182": " ", + "183": "=", + "184": "=", + "185": " ", + "186": "\"", + "187": "$", + "188": "{", + "189": "g", + "190": "r", + "191": "o", + "192": "u", + "193": "p", + "194": "}", + "195": "\"", + "196": " ", + "197": "a", + "198": "n", + "199": "d", + "200": " ", + "201": "r", + "202": ".", + "203": "p", + "204": "a", + "205": "g", + "206": "e", + "207": " ", + "208": "=", + "209": "=", + "210": " ", + "211": "\"", + "212": "$", + "213": "{", + "214": "p", + "215": "a", + "216": "g", + "217": "e", + "218": "}", + "219": "\"", + "220": " ", + "221": "a", + "222": "n", + "223": "d", + "224": " ", + "225": "r", + "226": ".", + "227": "_", + "228": "m", + "229": "e", + "230": "a", + "231": "s", + "232": "u", + "233": "r", + "234": "e", + "235": "m", + "236": "e", + "237": "n", + "238": "t", + "239": " ", + "240": "=", + "241": "=", + "242": " ", + "243": "\"", + "244": "2", + "245": "0", + "246": "0", + "247": "\"", + "248": ",", + "249": "\n", + "250": "s", + "251": "t", + "252": "a", + "253": "r", + "254": "t", + "255": ":", + "256": " ", + "257": "v", + "258": ".", + "259": "t", + "260": "i", + "261": "m", + "262": "e", + "263": "R", + "264": "a", + "265": "n", + "266": "g", + "267": "e", + "268": "S", + "269": "t", + "270": "a", + "271": "r", + "272": "t", + "273": ",", + "274": "\n", + "275": "s", + "276": "t", + "277": "o", + "278": "p", + "279": ":", + "280": " ", + "281": "v", + "282": ".", + "283": "t", + "284": "i", + "285": "m", + "286": "e", + "287": "R", + "288": "a", + "289": "n", + "290": "g", + "291": "e", + "292": "S", + "293": "t", + "294": "o", + "295": "p", + "296": "\n", + "297": ")", + "query": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"browser\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r.page == \"${page}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)" + }, + "refresh": 2, + "regex": "chrome|firefox|safari|edge", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"connectivity\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r.page == \"${page}\" and r.browser == \"${browser}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)", + "includeAll": false, + "name": "connectivity", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "i", + "9": "n", + "10": "f", + "11": "l", + "12": "u", + "13": "x", + "14": "d", + "15": "a", + "16": "t", + "17": "a", + "18": "/", + "19": "i", + "20": "n", + "21": "f", + "22": "l", + "23": "u", + "24": "x", + "25": "d", + "26": "b", + "27": "/", + "28": "s", + "29": "c", + "30": "h", + "31": "e", + "32": "m", + "33": "a", + "34": "\"", + "35": "\n", + "36": "\n", + "37": "s", + "38": "c", + "39": "h", + "40": "e", + "41": "m", + "42": "a", + "43": ".", + "44": "t", + "45": "a", + "46": "g", + "47": "V", + "48": "a", + "49": "l", + "50": "u", + "51": "e", + "52": "s", + "53": "(", + "54": "\n", + "55": "b", + "56": "u", + "57": "c", + "58": "k", + "59": "e", + "60": "t", + "61": ":", + "62": " ", + "63": "\"", + "64": "s", + "65": "i", + "66": "t", + "67": "e", + "68": "s", + "69": "p", + "70": "e", + "71": "e", + "72": "d", + "73": "\"", + "74": ",", + "75": " ", + "76": "\n", + "77": "t", + "78": "a", + "79": "g", + "80": ":", + "81": " ", + "82": "\"", + "83": "c", + "84": "o", + "85": "n", + "86": "n", + "87": "e", + "88": "c", + "89": "t", + "90": "i", + "91": "v", + "92": "i", + "93": "t", + "94": "y", + "95": "\"", + "96": ",", + "97": "\n", + "98": "p", + "99": "r", + "100": "e", + "101": "d", + "102": "i", + "103": "c", + "104": "a", + "105": "t", + "106": "e", + "107": ":", + "108": " ", + "109": "(", + "110": "r", + "111": ")", + "112": " ", + "113": "=", + "114": ">", + "115": " ", + "116": "r", + "117": ".", + "118": "c", + "119": "a", + "120": "t", + "121": "e", + "122": "g", + "123": "o", + "124": "r", + "125": "y", + "126": " ", + "127": "=", + "128": "=", + "129": " ", + "130": "\"", + "131": "$", + "132": "{", + "133": "c", + "134": "a", + "135": "t", + "136": "e", + "137": "g", + "138": "o", + "139": "r", + "140": "y", + "141": "}", + "142": "\"", + "143": " ", + "144": "a", + "145": "n", + "146": "d", + "147": " ", + "148": "r", + "149": ".", + "150": "t", + "151": "e", + "152": "s", + "153": "t", + "154": "N", + "155": "a", + "156": "m", + "157": "e", + "158": " ", + "159": "=", + "160": "=", + "161": " ", + "162": "\"", + "163": "$", + "164": "{", + "165": "t", + "166": "e", + "167": "s", + "168": "t", + "169": "n", + "170": "a", + "171": "m", + "172": "e", + "173": "}", + "174": "\"", + "175": " ", + "176": "a", + "177": "n", + "178": "d", + "179": " ", + "180": "r", + "181": ".", + "182": "g", + "183": "r", + "184": "o", + "185": "u", + "186": "p", + "187": " ", + "188": "=", + "189": "=", + "190": " ", + "191": "\"", + "192": "$", + "193": "{", + "194": "g", + "195": "r", + "196": "o", + "197": "u", + "198": "p", + "199": "}", + "200": "\"", + "201": " ", + "202": "a", + "203": "n", + "204": "d", + "205": " ", + "206": "r", + "207": ".", + "208": "p", + "209": "a", + "210": "g", + "211": "e", + "212": " ", + "213": "=", + "214": "=", + "215": " ", + "216": "\"", + "217": "$", + "218": "{", + "219": "p", + "220": "a", + "221": "g", + "222": "e", + "223": "}", + "224": "\"", + "225": " ", + "226": "a", + "227": "n", + "228": "d", + "229": " ", + "230": "r", + "231": ".", + "232": "b", + "233": "r", + "234": "o", + "235": "w", + "236": "s", + "237": "e", + "238": "r", + "239": " ", + "240": "=", + "241": "=", + "242": " ", + "243": "\"", + "244": "$", + "245": "{", + "246": "b", + "247": "r", + "248": "o", + "249": "w", + "250": "s", + "251": "e", + "252": "r", + "253": "}", + "254": "\"", + "255": " ", + "256": "a", + "257": "n", + "258": "d", + "259": " ", + "260": "r", + "261": ".", + "262": "_", + "263": "m", + "264": "e", + "265": "a", + "266": "s", + "267": "u", + "268": "r", + "269": "e", + "270": "m", + "271": "e", + "272": "n", + "273": "t", + "274": " ", + "275": "=", + "276": "=", + "277": " ", + "278": "\"", + "279": "2", + "280": "0", + "281": "0", + "282": "\"", + "283": ",", + "284": "\n", + "285": "s", + "286": "t", + "287": "a", + "288": "r", + "289": "t", + "290": ":", + "291": " ", + "292": "v", + "293": ".", + "294": "t", + "295": "i", + "296": "m", + "297": "e", + "298": "R", + "299": "a", + "300": "n", + "301": "g", + "302": "e", + "303": "S", + "304": "t", + "305": "a", + "306": "r", + "307": "t", + "308": ",", + "309": "\n", + "310": "s", + "311": "t", + "312": "o", + "313": "p", + "314": ":", + "315": " ", + "316": "v", + "317": ".", + "318": "t", + "319": "i", + "320": "m", + "321": "e", + "322": "R", + "323": "a", + "324": "n", + "325": "g", + "326": "e", + "327": "S", + "328": "t", + "329": "o", + "330": "p", + "331": "\n", + "332": ")", + "query": "import \"influxdata/influxdb/schema\"\n\nschema.tagValues(\nbucket: \"${bucket}\", \ntag: \"connectivity\",\npredicate: (r) => r.category == \"${category}\" and r.testName == \"${testname}\" and r.group == \"${group}\" and r.page == \"${page}\" and r.browser == \"${browser}\" and r._measurement == \"responseEnd\",\nstart: v.timeRangeStart,\nstop: v.timeRangeStop\n)" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": { + "text": "no", + "value": "no" + }, + "label": "is_mobile", + "name": "is_mobile", + "options": [ + { + "selected": false, + "text": "yes", + "value": "yes" + }, + { + "selected": true, + "text": "no", + "value": "no" + } + ], + "query": "yes,no", + "type": "custom" + }, + { + "auto": false, + "auto_count": 30, + "auto_min": "10s", + "current": { + "text": "mean", + "value": "mean" + }, + "name": "function", + "options": [ + { + "selected": false, + "text": "min", + "value": "min" + }, + { + "selected": true, + "text": "mean", + "value": "mean" + }, + { + "selected": false, + "text": "median", + "value": "median" + }, + { + "selected": false, + "text": "p90", + "value": "p90" + }, + { + "selected": false, + "text": "max", + "value": "max" + }, + { + "selected": false, + "text": "stddev", + "value": "stddev" + } + ], + "query": "min,mean,median,p90,max,stddev", + "refresh": 2, + "type": "interval" + }, + { + "auto": true, + "auto_count": 10, + "auto_min": "10s", + "current": { + "text": "1s", + "value": "1s" + }, + "label": "granularity", + "name": "g", + "options": [ + { + "selected": true, + "text": "1s", + "value": "1s" + }, + { + "selected": false, + "text": "5s", + "value": "5s" + }, + { + "selected": false, + "text": "10s", + "value": "10s" + }, + { + "selected": false, + "text": "30s", + "value": "30s" + }, + { + "selected": false, + "text": "1m", + "value": "1m" + }, + { + "selected": false, + "text": "10m", + "value": "10m" + }, + { + "selected": false, + "text": "30m", + "value": "30m" + }, + { + "selected": false, + "text": "1h", + "value": "1h" + }, + { + "selected": false, + "text": "6h", + "value": "6h" + }, + { + "selected": false, + "text": "12h", + "value": "12h" + }, + { + "selected": false, + "text": "1d", + "value": "1d" + }, + { + "selected": false, + "text": "7d", + "value": "7d" + }, + { + "selected": false, + "text": "14d", + "value": "14d" + }, + { + "selected": false, + "text": "30d", + "value": "30d" + } + ], + "query": "1s,5s,10s,30s,1m,10m,30m,1h,6h,12h,1d,7d,14d,30d", + "refresh": 2, + "type": "interval" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"annotations\" and\n r[\"_field\"] == \"text\" and\n r[\"browser\"] == \"${browser}\" and\n r[\"category\"] == \"${category}\" and\n r[\"connectivity\"] == \"${connectivity}\" and\n r[\"group\"] == \"${group}\" and\n r[\"page\"] == \"${page}\" and\n r[\"slug\"] == \"${testname}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> group()\n |> last()", + "hide": 2, + "includeAll": false, + "label": "lastRunReport", + "name": "lastRunReport", + "options": [], + "query": { + "0": "f", + "1": "r", + "2": "o", + "3": "m", + "4": "(", + "5": "b", + "6": "u", + "7": "c", + "8": "k", + "9": "e", + "10": "t", + "11": ":", + "12": " ", + "13": "\"", + "14": "s", + "15": "i", + "16": "t", + "17": "e", + "18": "s", + "19": "p", + "20": "e", + "21": "e", + "22": "d", + "23": "\"", + "24": ")", + "25": "\n", + "26": " ", + "27": " ", + "28": "|", + "29": ">", + "30": " ", + "31": "r", + "32": "a", + "33": "n", + "34": "g", + "35": "e", + "36": "(", + "37": "s", + "38": "t", + "39": "a", + "40": "r", + "41": "t", + "42": ":", + "43": " ", + "44": "v", + "45": ".", + "46": "t", + "47": "i", + "48": "m", + "49": "e", + "50": "R", + "51": "a", + "52": "n", + "53": "g", + "54": "e", + "55": "S", + "56": "t", + "57": "a", + "58": "r", + "59": "t", + "60": ",", + "61": " ", + "62": "s", + "63": "t", + "64": "o", + "65": "p", + "66": ":", + "67": " ", + "68": "v", + "69": ".", + "70": "t", + "71": "i", + "72": "m", + "73": "e", + "74": "R", + "75": "a", + "76": "n", + "77": "g", + "78": "e", + "79": "S", + "80": "t", + "81": "o", + "82": "p", + "83": ")", + "84": "\n", + "85": " ", + "86": " ", + "87": "|", + "88": ">", + "89": " ", + "90": "f", + "91": "i", + "92": "l", + "93": "t", + "94": "e", + "95": "r", + "96": "(", + "97": "f", + "98": "n", + "99": ":", + "100": " ", + "101": "(", + "102": "r", + "103": ")", + "104": " ", + "105": "=", + "106": ">", + "107": " ", + "108": "\n", + "109": " ", + "110": " ", + "111": " ", + "112": " ", + "113": "r", + "114": "[", + "115": "\"", + "116": "_", + "117": "m", + "118": "e", + "119": "a", + "120": "s", + "121": "u", + "122": "r", + "123": "e", + "124": "m", + "125": "e", + "126": "n", + "127": "t", + "128": "\"", + "129": "]", + "130": " ", + "131": "=", + "132": "=", + "133": " ", + "134": "\"", + "135": "a", + "136": "n", + "137": "n", + "138": "o", + "139": "t", + "140": "a", + "141": "t", + "142": "i", + "143": "o", + "144": "n", + "145": "s", + "146": "\"", + "147": " ", + "148": "a", + "149": "n", + "150": "d", + "151": "\n", + "152": " ", + "153": " ", + "154": " ", + "155": " ", + "156": "r", + "157": "[", + "158": "\"", + "159": "_", + "160": "f", + "161": "i", + "162": "e", + "163": "l", + "164": "d", + "165": "\"", + "166": "]", + "167": " ", + "168": "=", + "169": "=", + "170": " ", + "171": "\"", + "172": "t", + "173": "e", + "174": "x", + "175": "t", + "176": "\"", + "177": " ", + "178": "a", + "179": "n", + "180": "d", + "181": "\n", + "182": " ", + "183": " ", + "184": " ", + "185": " ", + "186": "r", + "187": "[", + "188": "\"", + "189": "b", + "190": "r", + "191": "o", + "192": "w", + "193": "s", + "194": "e", + "195": "r", + "196": "\"", + "197": "]", + "198": " ", + "199": "=", + "200": "=", + "201": " ", + "202": "\"", + "203": "$", + "204": "{", + "205": "b", + "206": "r", + "207": "o", + "208": "w", + "209": "s", + "210": "e", + "211": "r", + "212": "}", + "213": "\"", + "214": " ", + "215": "a", + "216": "n", + "217": "d", + "218": "\n", + "219": " ", + "220": " ", + "221": " ", + "222": " ", + "223": "r", + "224": "[", + "225": "\"", + "226": "c", + "227": "a", + "228": "t", + "229": "e", + "230": "g", + "231": "o", + "232": "r", + "233": "y", + "234": "\"", + "235": "]", + "236": " ", + "237": "=", + "238": "=", + "239": " ", + "240": "\"", + "241": "$", + "242": "{", + "243": "c", + "244": "a", + "245": "t", + "246": "e", + "247": "g", + "248": "o", + "249": "r", + "250": "y", + "251": "}", + "252": "\"", + "253": " ", + "254": "a", + "255": "n", + "256": "d", + "257": "\n", + "258": " ", + "259": " ", + "260": " ", + "261": " ", + "262": "r", + "263": "[", + "264": "\"", + "265": "c", + "266": "o", + "267": "n", + "268": "n", + "269": "e", + "270": "c", + "271": "t", + "272": "i", + "273": "v", + "274": "i", + "275": "t", + "276": "y", + "277": "\"", + "278": "]", + "279": " ", + "280": "=", + "281": "=", + "282": " ", + "283": "\"", + "284": "$", + "285": "{", + "286": "c", + "287": "o", + "288": "n", + "289": "n", + "290": "e", + "291": "c", + "292": "t", + "293": "i", + "294": "v", + "295": "i", + "296": "t", + "297": "y", + "298": "}", + "299": "\"", + "300": " ", + "301": "a", + "302": "n", + "303": "d", + "304": "\n", + "305": " ", + "306": " ", + "307": " ", + "308": " ", + "309": "r", + "310": "[", + "311": "\"", + "312": "g", + "313": "r", + "314": "o", + "315": "u", + "316": "p", + "317": "\"", + "318": "]", + "319": " ", + "320": "=", + "321": "=", + "322": " ", + "323": "\"", + "324": "$", + "325": "{", + "326": "g", + "327": "r", + "328": "o", + "329": "u", + "330": "p", + "331": "}", + "332": "\"", + "333": "\n", + "334": " ", + "335": " ", + "336": ")", + "337": "\n", + "338": " ", + "339": " ", + "340": "|", + "341": ">", + "342": " ", + "343": "g", + "344": "r", + "345": "o", + "346": "u", + "347": "p", + "348": "(", + "349": ")", + "350": "\n", + "351": " ", + "352": " ", + "353": "|", + "354": ">", + "355": " ", + "356": "l", + "357": "a", + "358": "s", + "359": "t", + "360": "(", + "361": ")", + "query": "from(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"annotations\" and\n r[\"_field\"] == \"text\" and\n r[\"browser\"] == \"${browser}\" and\n r[\"category\"] == \"${category}\" and\n r[\"connectivity\"] == \"${connectivity}\" and\n r[\"group\"] == \"${group}\" and\n r[\"page\"] == \"${page}\" and\n r[\"slug\"] == \"${testname}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> group()\n |> last()" + }, + "refresh": 2, + "regex": "", + "type": "query" + }, + { + "current": {}, + "datasource": "InfluxDB 2", + "definition": "import \"strings\"\n\nfrom(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"annotations\" and\n r[\"_field\"] == \"text\" and\n r[\"browser\"] == \"${browser}\" and\n r[\"category\"] == \"${category}\" and\n r[\"connectivity\"] == \"${connectivity}\" and\n r[\"group\"] == \"${group}\" and\n r[\"page\"] == \"${page}\" and\n r[\"slug\"] == \"${testname}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> group()\n |> last()\n |> keep(columns: [\"_value\"])\n |> map(fn: (r) => ({r with endIndex: strings.index(v: r._value, substr: \"index\")}))\n |> map(fn: (r) => ({r with _value: strings.substring(v: r._value, start: 9, end: r.endIndex)}))\n |> keep(columns: [\"_value\"])", + "hide": 2, + "includeAll": false, + "label": "resultLastUrl", + "name": "resultLastUrl", + "options": [], + "query": { + "0": "i", + "1": "m", + "2": "p", + "3": "o", + "4": "r", + "5": "t", + "6": " ", + "7": "\"", + "8": "s", + "9": "t", + "10": "r", + "11": "i", + "12": "n", + "13": "g", + "14": "s", + "15": "\"", + "16": "\n", + "17": "\n", + "18": "f", + "19": "r", + "20": "o", + "21": "m", + "22": "(", + "23": "b", + "24": "u", + "25": "c", + "26": "k", + "27": "e", + "28": "t", + "29": ":", + "30": " ", + "31": "\"", + "32": "s", + "33": "i", + "34": "t", + "35": "e", + "36": "s", + "37": "p", + "38": "e", + "39": "e", + "40": "d", + "41": "\"", + "42": ")", + "43": "\n", + "44": " ", + "45": " ", + "46": "|", + "47": ">", + "48": " ", + "49": "r", + "50": "a", + "51": "n", + "52": "g", + "53": "e", + "54": "(", + "55": "s", + "56": "t", + "57": "a", + "58": "r", + "59": "t", + "60": ":", + "61": " ", + "62": "v", + "63": ".", + "64": "t", + "65": "i", + "66": "m", + "67": "e", + "68": "R", + "69": "a", + "70": "n", + "71": "g", + "72": "e", + "73": "S", + "74": "t", + "75": "a", + "76": "r", + "77": "t", + "78": ",", + "79": " ", + "80": "s", + "81": "t", + "82": "o", + "83": "p", + "84": ":", + "85": " ", + "86": "v", + "87": ".", + "88": "t", + "89": "i", + "90": "m", + "91": "e", + "92": "R", + "93": "a", + "94": "n", + "95": "g", + "96": "e", + "97": "S", + "98": "t", + "99": "o", + "100": "p", + "101": ")", + "102": "\n", + "103": " ", + "104": " ", + "105": "|", + "106": ">", + "107": " ", + "108": "f", + "109": "i", + "110": "l", + "111": "t", + "112": "e", + "113": "r", + "114": "(", + "115": "f", + "116": "n", + "117": ":", + "118": " ", + "119": "(", + "120": "r", + "121": ")", + "122": " ", + "123": "=", + "124": ">", + "125": " ", + "126": "\n", + "127": " ", + "128": " ", + "129": " ", + "130": " ", + "131": "r", + "132": "[", + "133": "\"", + "134": "_", + "135": "m", + "136": "e", + "137": "a", + "138": "s", + "139": "u", + "140": "r", + "141": "e", + "142": "m", + "143": "e", + "144": "n", + "145": "t", + "146": "\"", + "147": "]", + "148": " ", + "149": "=", + "150": "=", + "151": " ", + "152": "\"", + "153": "a", + "154": "n", + "155": "n", + "156": "o", + "157": "t", + "158": "a", + "159": "t", + "160": "i", + "161": "o", + "162": "n", + "163": "s", + "164": "\"", + "165": " ", + "166": "a", + "167": "n", + "168": "d", + "169": "\n", + "170": " ", + "171": " ", + "172": " ", + "173": " ", + "174": "r", + "175": "[", + "176": "\"", + "177": "_", + "178": "f", + "179": "i", + "180": "e", + "181": "l", + "182": "d", + "183": "\"", + "184": "]", + "185": " ", + "186": "=", + "187": "=", + "188": " ", + "189": "\"", + "190": "t", + "191": "e", + "192": "x", + "193": "t", + "194": "\"", + "195": " ", + "196": "a", + "197": "n", + "198": "d", + "199": "\n", + "200": " ", + "201": " ", + "202": " ", + "203": " ", + "204": "r", + "205": "[", + "206": "\"", + "207": "b", + "208": "r", + "209": "o", + "210": "w", + "211": "s", + "212": "e", + "213": "r", + "214": "\"", + "215": "]", + "216": " ", + "217": "=", + "218": "=", + "219": " ", + "220": "\"", + "221": "$", + "222": "{", + "223": "b", + "224": "r", + "225": "o", + "226": "w", + "227": "s", + "228": "e", + "229": "r", + "230": "}", + "231": "\"", + "232": " ", + "233": "a", + "234": "n", + "235": "d", + "236": "\n", + "237": " ", + "238": " ", + "239": " ", + "240": " ", + "241": "r", + "242": "[", + "243": "\"", + "244": "c", + "245": "a", + "246": "t", + "247": "e", + "248": "g", + "249": "o", + "250": "r", + "251": "y", + "252": "\"", + "253": "]", + "254": " ", + "255": "=", + "256": "=", + "257": " ", + "258": "\"", + "259": "$", + "260": "{", + "261": "c", + "262": "a", + "263": "t", + "264": "e", + "265": "g", + "266": "o", + "267": "r", + "268": "y", + "269": "}", + "270": "\"", + "271": " ", + "272": "a", + "273": "n", + "274": "d", + "275": "\n", + "276": " ", + "277": " ", + "278": " ", + "279": " ", + "280": "r", + "281": "[", + "282": "\"", + "283": "c", + "284": "o", + "285": "n", + "286": "n", + "287": "e", + "288": "c", + "289": "t", + "290": "i", + "291": "v", + "292": "i", + "293": "t", + "294": "y", + "295": "\"", + "296": "]", + "297": " ", + "298": "=", + "299": "=", + "300": " ", + "301": "\"", + "302": "$", + "303": "{", + "304": "c", + "305": "o", + "306": "n", + "307": "n", + "308": "e", + "309": "c", + "310": "t", + "311": "i", + "312": "v", + "313": "i", + "314": "t", + "315": "y", + "316": "}", + "317": "\"", + "318": " ", + "319": "a", + "320": "n", + "321": "d", + "322": "\n", + "323": " ", + "324": " ", + "325": " ", + "326": " ", + "327": "r", + "328": "[", + "329": "\"", + "330": "g", + "331": "r", + "332": "o", + "333": "u", + "334": "p", + "335": "\"", + "336": "]", + "337": " ", + "338": "=", + "339": "=", + "340": " ", + "341": "\"", + "342": "$", + "343": "{", + "344": "g", + "345": "r", + "346": "o", + "347": "u", + "348": "p", + "349": "}", + "350": "\"", + "351": "\n", + "352": " ", + "353": " ", + "354": ")", + "355": "\n", + "356": " ", + "357": " ", + "358": "|", + "359": ">", + "360": " ", + "361": "g", + "362": "r", + "363": "o", + "364": "u", + "365": "p", + "366": "(", + "367": ")", + "368": "\n", + "369": " ", + "370": " ", + "371": "|", + "372": ">", + "373": " ", + "374": "l", + "375": "a", + "376": "s", + "377": "t", + "378": "(", + "379": ")", + "380": "\n", + "381": " ", + "382": " ", + "383": "|", + "384": ">", + "385": " ", + "386": "k", + "387": "e", + "388": "e", + "389": "p", + "390": "(", + "391": "c", + "392": "o", + "393": "l", + "394": "u", + "395": "m", + "396": "n", + "397": "s", + "398": ":", + "399": " ", + "400": "[", + "401": "\"", + "402": "_", + "403": "v", + "404": "a", + "405": "l", + "406": "u", + "407": "e", + "408": "\"", + "409": "]", + "410": ")", + "411": "\n", + "412": " ", + "413": " ", + "414": "|", + "415": ">", + "416": " ", + "417": "m", + "418": "a", + "419": "p", + "420": "(", + "421": "f", + "422": "n", + "423": ":", + "424": " ", + "425": "(", + "426": "r", + "427": ")", + "428": " ", + "429": "=", + "430": ">", + "431": " ", + "432": "(", + "433": "{", + "434": "r", + "435": " ", + "436": "w", + "437": "i", + "438": "t", + "439": "h", + "440": " ", + "441": "e", + "442": "n", + "443": "d", + "444": "I", + "445": "n", + "446": "d", + "447": "e", + "448": "x", + "449": ":", + "450": " ", + "451": "s", + "452": "t", + "453": "r", + "454": "i", + "455": "n", + "456": "g", + "457": "s", + "458": ".", + "459": "i", + "460": "n", + "461": "d", + "462": "e", + "463": "x", + "464": "(", + "465": "v", + "466": ":", + "467": " ", + "468": "r", + "469": ".", + "470": "_", + "471": "v", + "472": "a", + "473": "l", + "474": "u", + "475": "e", + "476": ",", + "477": " ", + "478": "s", + "479": "u", + "480": "b", + "481": "s", + "482": "t", + "483": "r", + "484": ":", + "485": " ", + "486": "\"", + "487": "i", + "488": "n", + "489": "d", + "490": "e", + "491": "x", + "492": "\"", + "493": ")", + "494": "}", + "495": ")", + "496": ")", + "497": "\n", + "498": " ", + "499": " ", + "500": "|", + "501": ">", + "502": " ", + "503": "m", + "504": "a", + "505": "p", + "506": "(", + "507": "f", + "508": "n", + "509": ":", + "510": " ", + "511": "(", + "512": "r", + "513": ")", + "514": " ", + "515": "=", + "516": ">", + "517": " ", + "518": "(", + "519": "{", + "520": "r", + "521": " ", + "522": "w", + "523": "i", + "524": "t", + "525": "h", + "526": " ", + "527": "_", + "528": "v", + "529": "a", + "530": "l", + "531": "u", + "532": "e", + "533": ":", + "534": " ", + "535": "s", + "536": "t", + "537": "r", + "538": "i", + "539": "n", + "540": "g", + "541": "s", + "542": ".", + "543": "s", + "544": "u", + "545": "b", + "546": "s", + "547": "t", + "548": "r", + "549": "i", + "550": "n", + "551": "g", + "552": "(", + "553": "v", + "554": ":", + "555": " ", + "556": "r", + "557": ".", + "558": "_", + "559": "v", + "560": "a", + "561": "l", + "562": "u", + "563": "e", + "564": ",", + "565": " ", + "566": "s", + "567": "t", + "568": "a", + "569": "r", + "570": "t", + "571": ":", + "572": " ", + "573": "9", + "574": ",", + "575": " ", + "576": "e", + "577": "n", + "578": "d", + "579": ":", + "580": " ", + "581": "r", + "582": ".", + "583": "e", + "584": "n", + "585": "d", + "586": "I", + "587": "n", + "588": "d", + "589": "e", + "590": "x", + "591": ")", + "592": "}", + "593": ")", + "594": ")", + "595": "\n", + "596": " ", + "597": " ", + "598": "|", + "599": ">", + "600": " ", + "601": "k", + "602": "e", + "603": "e", + "604": "p", + "605": "(", + "606": "c", + "607": "o", + "608": "l", + "609": "u", + "610": "m", + "611": "n", + "612": "s", + "613": ":", + "614": " ", + "615": "[", + "616": "\"", + "617": "_", + "618": "v", + "619": "a", + "620": "l", + "621": "u", + "622": "e", + "623": "\"", + "624": "]", + "625": ")", + "query": "import \"strings\"\n\nfrom(bucket: \"${bucket}\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => \n r[\"_measurement\"] == \"annotations\" and\n r[\"_field\"] == \"text\" and\n r[\"browser\"] == \"${browser}\" and\n r[\"category\"] == \"${category}\" and\n r[\"connectivity\"] == \"${connectivity}\" and\n r[\"group\"] == \"${group}\" and\n r[\"page\"] == \"${page}\" and\n r[\"slug\"] == \"${testname}\"\n )\n |> filter(fn: (r) => if \"${is_mobile}\" == \"yes\" then r.device == \"mobile\" else r.device != \"mobile\" or not exists r.device)\n |> drop(columns: [\"device\"])\n |> group()\n |> last()\n |> keep(columns: [\"_value\"])\n |> map(fn: (r) => ({r with endIndex: strings.index(v: r._value, substr: \"index\")}))\n |> map(fn: (r) => ({r with _value: strings.substring(v: r._value, start: 9, end: r.endIndex)}))\n |> keep(columns: [\"_value\"])" + }, + "refresh": 2, + "regex": "", + "type": "query" + } + ] + }, + "time": { + "from": "now-24h", + "to": "now" + }, + "timepicker": {}, + "timezone": "browser", + "title": "[Sitespeed] Single Page", + "uid": "sitespeed", + "version": 1, + "weekStart": "" +} diff --git a/test/docker/grafana-provisioning/datasources/datasource.yml b/test/docker/grafana-provisioning/datasources/datasource.yml new file mode 100644 index 0000000..ea3aaea --- /dev/null +++ b/test/docker/grafana-provisioning/datasources/datasource.yml @@ -0,0 +1,14 @@ +apiVersion: 1 +datasources: + - name: "InfluxDB 2" + version: 2 + type: influxdb + access: proxy + url: http://influxdb2:8086 + jsonData: + defaultBucket: sitespeed + httpMode: POST + organization: sitespeed + version: Flux + secureJsonData: + token: sitespeed_token \ No newline at end of file diff --git a/test/docker/influxdb2.md b/test/docker/influxdb2.md new file mode 100644 index 0000000..9ec7269 --- /dev/null +++ b/test/docker/influxdb2.md @@ -0,0 +1,53 @@ +# Sitespeed.io + InfluxDB 2.x + Grafana Integration + +This project provides a ready-to-use environment for visualizing **Sitespeed.io** performance results in **Grafana**, powered by **InfluxDB 2.x**. + +--- + +## 🧩 Components + +The provided `docker-compose.yml` file includes everything needed: + +1. **InfluxDB 2** — stores performance metrics from Sitespeed.io +2. **Grafana** — comes with a ready-made, comprehensive dashboard +3. **MinIO** — stores Sitespeed.io HTML reports for displaying in Grafana + +--- + +## ⚙️ Setup Instructions + +### 1. Start all services + +```bash +docker-compose -f test/docker/docker-compose.yml up -d +```` + +### 2. Open Grafana + +Go to [http://localhost:3000](http://localhost:3000) + +- **Username:** `sitespeed` +- **Password:** `sitespeed` + +### 3. Access the dashboard + +Open **[Sitespeed] Single Page** in Grafana. + +### 4. Run Sitespeed.io and send metrics to InfluxDB + +```bash +sitespeed.io https://www.sitespeed.io -n 1 \ +--influxdb.host 127.0.0.1 \ +--influxdb.port 8087 \ +--influxdb.version 2 \ +--influxdb.organisation sitespeed \ +--influxdb.token sitespeed_token \ +--influxdb.annotationScreenshot=true \ +--plugins.add @sitespeed.io/plugin-influxdb \ +--slug=mytest \ +--config=test/docker/s3Config.json +``` + +### 5. Repeat tests and observe metrics in Grafana + +You can run Sitespeed.io multiple times — all collected metrics will be visualized in Grafana. diff --git a/test/docker/s3Config.json b/test/docker/s3Config.json new file mode 100644 index 0000000..3af2743 --- /dev/null +++ b/test/docker/s3Config.json @@ -0,0 +1,10 @@ +{ + "s3": { + "endpoint": "http://127.0.0.1:9000/", + "key": "minio", + "secret": "minio123", + "bucketname": "sitespeed-bucket", + "region": "us-east-1" + }, + "resultBaseUrl": "http://127.0.0.1:9000/sitespeed-bucket" +} \ No newline at end of file