From 4f0705250f51a83f282adab830c11260a66df5f7 Mon Sep 17 00:00:00 2001 From: Peter Hedenskog Date: Sun, 16 Mar 2025 08:54:13 +0100 Subject: [PATCH] Updated CRUX dashboard with the new data (#4482) --- .../ChromeUserExperienceReport.json | 10085 ++++++++++------ 1 file changed, 6693 insertions(+), 3392 deletions(-) diff --git a/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json b/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json index ad12f947c..f49b2c8aa 100644 --- a/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json +++ b/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json @@ -1,7 +1,7 @@ { "__inputs": [ { - "name": "graphite", + "name": "DS_GRAPHITE", "label": "graphite", "description": "", "type": "datasource", @@ -12,29 +12,17 @@ "name": "VAR_BASE", "type": "constant", "label": "sitespeed_io", - "value": "sitespeed_io", + "value": "sitespeed_io_crux", "description": "" } ], - "__elements": [], + "__elements": {}, "__requires": [ { "type": "grafana", "id": "grafana", "name": "Grafana", - "version": "8.5.1" - }, - { - "type": "panel", - "id": "grafana-piechart-panel", - "name": "Pie Chart (old)", - "version": "1.6.2" - }, - { - "type": "panel", - "id": "graph", - "name": "Graph (old)", - "version": "" + "version": "11.3.1" }, { "type": "datasource", @@ -42,12 +30,24 @@ "name": "Graphite", "version": "1.0.0" }, + { + "type": "panel", + "id": "piechart", + "name": "Pie chart", + "version": "" + }, { "type": "panel", "id": "stat", "name": "Stat", "version": "" }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + }, { "type": "panel", "id": "timeseries", @@ -81,31 +81,1597 @@ "fiscalYearStartMonth": 0, "graphTooltip": 0, "id": null, - "iteration": 1651731137841, "links": [], - "liveNow": false, "panels": [ { - "collapsed": false, - "datasource": { - "type": "graphite", - "uid": "E-Pn3IaGz" - }, + "collapsed": true, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 0 }, - "id": 2, + "id": 65, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 22, + "x": 0, + "y": 1 + }, + "id": 66, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Metrics | Fast (Green) | Need improvement (Yellow) | Slow (Red)\n------------ | ------------- | ------------- | ------------- \nFirst Contentful Paint | 0 - 1000 ms |1000 - 3000 ms| > 3000 ms\nLargest Contentful Paint | 0 - 2500 ms | 2500 - 4000 ms | > 4000 ms\nFirst Input Delay | 0 - 100 ms | 100 - 300 ms | > 300 \nCumulative Layout Shift Score | 0 - 0.1 | 0.1 - 0.25 | > 0.25\nTime To First Byte | 0 - 800 ms | 800 - 1800 ms | > 1800 ms \nInteraction To Next Paint | 0 - 200 ms | 200 - 500 ms | > 500 ms\nRound Trip Time | 0 - 75 ms | 75 - 275 ms | > 275 ms", + "mode": "markdown" + }, + "pluginVersion": "11.3.1", + "title": "", + "type": "text" + } + ], + "title": "Buckets and limits", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 1 + }, + "id": 70, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 2 + }, + "id": 75, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Navigation types means how the user navigates to the page. You can read about the definition of navigation types [here](https://developer.chrome.com/blog/crux-navigation-types). Form factors shows us how the user accessed our page. ", + "mode": "markdown" + }, + "pluginVersion": "11.3.1", + "title": "", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [] + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 4 + }, + "id": 73, + "options": { + "displayLabels": [], + "legend": { + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FORM_FACTORS_FRACTIONS.*, 100), 9)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "title": "Form factors", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [] + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 4 + }, + "id": 74, + "options": { + "displayLabels": [], + "legend": { + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.NAVIGATION_TYPES_FRACTIONS.*, 100), 10)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "title": "Navigation types", + "type": "piechart" + } + ], + "title": "Navigation types and form factors per $group$page", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 2 + }, + "id": 69, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 9, + "x": 0, + "y": 46 + }, + "id": 79, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Round trip time is a measure of the network connectivity of the users to your site based on their recent internet activity, not of the site itself.", + "mode": "markdown" + }, + "pluginVersion": "11.3.1", + "title": "", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [] + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 9, + "x": 9, + "y": 46 + }, + "id": 76, + "options": { + "displayLabels": [], + "legend": { + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.high, 10)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.low, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "hide": false, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.medium, 100), 10)", + "textEditor": false + } + ], + "title": "Round Trip Time (RTT)", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 6, + "x": 18, + "y": 46 + }, + "id": 78, + "options": { + "colorMode": "none", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "percentChangeColorMode": "standard", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "showPercentChange": false, + "textMode": "auto", + "wideLayout": true + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "$base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.p75", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "title": "Round Trip Time 75p", + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 63 + }, + "id": 77, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.high, 10)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.low, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "hide": false, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.ROUND_TRIP_TIME_MS.medium, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Round Trip Time (RTT)", + "type": "timeseries" + } + ], + "title": "Round Trip Time (RTT) $group$page", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 3 + }, + "id": 80, + "panels": [ + { + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 107 + }, + "id": 81, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Here you can see how many of our users that gets an largest contentful element as an image or as an text/HTML element.", + "mode": "markdown" + }, + "pluginVersion": "11.3.1", + "title": "", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "mappings": [] + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 107 + }, + "id": 82, + "options": { + "displayLabels": [], + "legend": { + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "percent" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LCP_RESOURCE_TYPES_FRACTIONS.*, 100), 10)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "title": "LCP element types", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 107 + }, + "id": 83, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LCP_RESOURCE_TYPES_FRACTIONS.*, 100), 10)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "timeFrom": "30d", + "title": "LCP element types", + "type": "timeseries" + } + ], + "title": "LCP extra information $group$page", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 4 + }, + "id": 67, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Interaction To Next Paint", + "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": 48 + }, + "id": 44, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Interaction to next paint')", + "textEditor": false + } + ], + "title": "", + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 48 + }, + "id": 46, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Interaction To Next Paint", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 48 + }, + "id": 48, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Interaction To Next Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 48 + }, + "id": 68, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "Interaction To Next Paint", + "type": "timeseries" + } + ], + "title": "Responsiveness for page $group$page ", + "type": "row" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 5 + }, + "id": 60, "panels": [], - "title": "CrUX data for page $group$page", + "title": "CrUX data for page $group$page 75 percentile", "type": "row" }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Time To First Byte", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 800 + }, + { + "color": "red", + "value": 1800 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 0, + "y": 6 + }, + "id": 45, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Time To First Byte')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -137,9 +1703,9 @@ }, "gridPos": { "h": 6, - "w": 8, - "x": 0, - "y": 1 + "w": 6, + "x": 6, + "y": 6 }, "id": 4, "options": { @@ -147,6 +1713,7 @@ "graphMode": "none", "justifyMode": "center", "orientation": "auto", + "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" @@ -154,16 +1721,21 @@ "fields": "", "values": false }, + "showPercentChange": false, "text": {}, - "textMode": "auto" + "textMode": "auto", + "wideLayout": true }, - "pluginVersion": "8.5.1", + "pluginVersion": "11.3.1", "targets": [ { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refId": "A", "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], "type": "stat" @@ -171,7 +1743,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -203,9 +1775,9 @@ }, "gridPos": { "h": 6, - "w": 8, - "x": 8, - "y": 1 + "w": 6, + "x": 12, + "y": 6 }, "id": 5, "options": { @@ -213,6 +1785,7 @@ "graphMode": "none", "justifyMode": "center", "orientation": "auto", + "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" @@ -220,16 +1793,21 @@ "fields": "", "values": false }, + "showPercentChange": false, "text": {}, - "textMode": "auto" + "textMode": "auto", + "wideLayout": true }, - "pluginVersion": "8.5.1", + "pluginVersion": "11.3.1", "targets": [ { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refId": "A", "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], "type": "stat" @@ -237,73 +1815,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "First Input Delay", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 100 - }, - { - "color": "red", - "value": 300 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 16, - "y": 1 - }, - "id": 6, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", - "textEditor": false, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -334,10 +1846,10 @@ "overrides": [] }, "gridPos": { - "h": 7, - "w": 8, - "x": 0, - "y": 7 + "h": 6, + "w": 6, + "x": 18, + "y": 6 }, "id": 7, "options": { @@ -345,6 +1857,7 @@ "graphMode": "none", "justifyMode": "center", "orientation": "auto", + "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" @@ -352,85 +1865,20 @@ "fields": "", "values": false }, + "showPercentChange": false, "text": {}, - "textMode": "auto" + "textMode": "auto", + "wideLayout": true }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", - "textEditor": false, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "Interaction To Next Paint", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 200 - }, - { - "color": "red", - "value": 500 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 8, - "y": 7 - }, - "id": 44, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Interaction to next paint')", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", "textEditor": false } ], @@ -439,1202 +1887,47 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { "color": { - "mode": "thresholds" + "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" + } }, "displayName": "Time To First Byte", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 800 - }, - { - "color": "red", - "value": 1800 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 16, - "y": 7 - }, - "id": 45, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Time To First Byte')", - "textEditor": false - } - ], - "type": "stat" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 0, - "y": 14 - }, - "id": 23, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "First Contentful Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 8, - "y": 14 - }, - "id": 16, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "Largest Contentful Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 16, - "y": 14 - }, - "id": 25, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "First Input Delay", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 0, - "y": 22 - }, - "id": 26, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "Cumulative Layout Shift", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 8, - "y": 22 - }, - "id": 46, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", - "textEditor": false - } - ], - "title": "Interaction To Next Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 8, - "w": 8, - "x": 16, - "y": 22 - }, - "id": 47, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", - "textEditor": false - } - ], - "title": "Time To First Byte", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 9, - "w": 8, - "x": 0, - "y": 30 - }, - "hiddenSeries": false, - "id": 15, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "First Contentful Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 9, - "w": 8, - "x": 8, - "y": 30 - }, - "hiddenSeries": false, - "id": 24, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "Largest Contentful Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 9, - "w": 8, - "x": 16, - "y": 30 - }, - "hiddenSeries": false, - "id": 17, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "First Input Delay", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 10, - "w": 8, - "x": 0, - "y": 39 - }, - "hiddenSeries": false, - "id": 18, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", - "textEditor": false, - "datasource": "graphite" - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "Cumulative Layout Shift", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 10, - "w": 8, - "x": 8, - "y": 39 - }, - "hiddenSeries": false, - "id": 48, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", - "textEditor": false - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "Interaction To Next Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 10, - "w": 8, - "x": 16, - "y": 39 - }, - "hiddenSeries": false, - "id": 49, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", - "textEditor": false - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "Time To First Byte", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "collapsed": false, - "datasource": { - "type": "graphite", - "uid": "E-Pn3IaGz" - }, - "gridPos": { - "h": 1, - "w": 24, - "x": 0, - "y": 49 - }, - "id": 32, - "panels": [], - "title": "History", - "type": "row" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "First Contentful Paint", "links": [], "mappings": [], "thresholds": { @@ -1656,472 +1949,9 @@ }, "gridPos": { "h": 7, - "w": 8, + "w": 6, "x": 0, - "y": 50 - }, - "id": 33, - "maxDataPoints": "", - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Largest Contentful Paint", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 8, - "y": 50 - }, - "id": 34, - "maxDataPoints": "", - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "First Input Delay", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 16, - "y": 50 - }, - "id": 35, - "maxDataPoints": "", - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Cumulative Layout Shift", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "none" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 0, - "y": 57 - }, - "id": 50, - "maxDataPoints": "", - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Interaction To Next Paint", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 8, - "y": 57 - }, - "id": 36, - "maxDataPoints": "", - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refId": "A", - "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", - "textEditor": false - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Time To Fist Byte", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 7, - "w": 8, - "x": 16, - "y": 57 + "y": 12 }, "id": 51, "maxDataPoints": "", @@ -2132,19 +1962,20 @@ "min" ], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", "sort": "none" } }, - "pluginVersion": "8.3.3", + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refId": "A", "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Cumulative Layout Shift')", @@ -2155,16 +1986,3063 @@ "type": "timeseries" }, { - "collapsed": false, "datasource": { "type": "graphite", - "uid": "E-Pn3IaGz" + "uid": "${DS_GRAPHITE}" }, + "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" + } + }, + "displayName": "First Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 6, + "y": 12 + }, + "id": 33, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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" + } + }, + "displayName": "Largest Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 12, + "y": 12 + }, + "id": 34, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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" + } + }, + "displayName": "Cumulative Layout Shift", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 18, + "y": 12 + }, + "id": 50, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 0, + "y": 19 + }, + "id": 47, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", + "textEditor": true + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Time To First Byte", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 6, + "y": 19 + }, + "id": 23, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "First Contentful Paint", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 12, + "y": 19 + }, + "id": 16, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Largest Contentful Paint", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 18, + "y": 19 + }, + "id": 26, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Cumulative Layout Shift", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 26 + }, + "id": 49, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Time To First Byte", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 26 + }, + "id": 15, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "First Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 26 + }, + "id": 24, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Largest Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 26 + }, + "id": 18, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Cumulative Layout Shift", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 34 + }, + "id": 61, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "Time To First Byte", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 34 + }, + "id": 62, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "First Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 34 + }, + "id": 63, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "Largest Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 34 + }, + "id": 64, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "Cumulative Layout Shift", + "type": "timeseries" + }, + { + "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, - "y": 64 + "y": 42 }, "id": 9, "panels": [], @@ -2174,340 +5052,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "First Contentful Paint", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 1000 - }, - { - "color": "red", - "value": 3000 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 0, - "y": 65 - }, - "id": 10, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", - "textEditor": false, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "Largest Contentful Paint", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 2500 - }, - { - "color": "red", - "value": 4000 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 8, - "y": 65 - }, - "id": 11, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", - "textEditor": false, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "First Input Delay", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 100 - }, - { - "color": "red", - "value": 300 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 16, - "y": 65 - }, - "id": 12, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", - "textEditor": true, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "Cumulative Layout Shift", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 0.1 - }, - { - "color": "red", - "value": 0.25 - } - ] - }, - "unit": "none" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 0, - "y": 71 - }, - "id": 13, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", - "textEditor": false, - "datasource": "graphite" - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "thresholds" - }, - "displayName": "Interaction To Next Paint", - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "#EAB839", - "value": 200 - }, - { - "color": "red", - "value": 500 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 8, - "y": 71 - }, - "id": 52, - "options": { - "colorMode": "background", - "graphMode": "none", - "justifyMode": "center", - "orientation": "auto", - "reduceOptions": { - "calcs": [ - "lastNotNull" - ], - "fields": "", - "values": false - }, - "text": {}, - "textMode": "auto" - }, - "pluginVersion": "8.5.1", - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", - "textEditor": false - } - ], - "type": "stat" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -2538,10 +5083,10 @@ "overrides": [] }, "gridPos": { - "h": 6, - "w": 8, - "x": 16, - "y": 71 + "h": 5, + "w": 6, + "x": 0, + "y": 43 }, "id": 53, "options": { @@ -2549,6 +5094,7 @@ "graphMode": "none", "justifyMode": "center", "orientation": "auto", + "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" @@ -2556,15 +5102,17 @@ "fields": "", "values": false }, + "showPercentChange": false, "text": {}, - "textMode": "auto" + "textMode": "auto", + "wideLayout": true }, - "pluginVersion": "8.5.1", + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refId": "A", "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Cumulative Layout Shift')", @@ -2574,353 +5122,298 @@ "type": "stat" }, { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "First Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 6, + "y": 43 + }, + "id": 10, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Largest Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 12, + "y": 43 + }, + "id": 11, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Cumulative Layout Shift", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 18, + "y": 43 + }, + "id": 13, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" }, "description": "", - "fontSize": "80%", - "format": "percent", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, "gridPos": { "h": 7, - "w": 8, + "w": 6, "x": 0, - "y": 77 - }, - "id": 27, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "First Contentful Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 7, - "w": 8, - "x": 8, - "y": 77 - }, - "id": 43, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "pluginVersion": "7.0.3", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "Largest Contentful Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 7, - "w": 8, - "x": 16, - "y": 77 - }, - "id": 29, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 9)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "First Input Delay", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 7, - "w": 8, - "x": 0, - "y": 84 - }, - "id": 30, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" - }, - { - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" - } - ], - "title": "Cumulative Layout Shift", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 7, - "w": 8, - "x": 8, - "y": 84 - }, - "id": 54, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], - "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, - "targets": [ - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 9)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 9)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 9)", - "textEditor": false - } - ], - "title": "Interaction To Next Paint", - "type": "grafana-piechart-panel", - "valueName": "current" - }, - { - "aliasColors": { - "slow": "#E02F44" - }, - "breakPoint": "50%", - "combine": { - "label": "Others", - "threshold": 0 - }, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "description": "", - "fontSize": "80%", - "format": "percent", - "gridPos": { - "h": 7, - "w": 8, - "x": 16, - "y": 84 + "y": 48 }, "id": 55, - "legend": { - "show": true, - "values": true - }, - "legendType": "Right side", - "links": [], "maxDataPoints": 1, - "nullPointMode": "connected", - "pieType": "pie", - "strokeWidth": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "A", @@ -2930,7 +5423,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "B", @@ -2940,7 +5433,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "C", @@ -2949,529 +5442,1038 @@ } ], "title": "Time To First Byte", - "type": "grafana-piechart-panel", - "valueName": "current" + "type": "piechart" }, { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "decimals": 0, "description": "", "fieldConfig": { "defaults": { - "links": [] + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] }, - "fill": 4, - "fillGradient": 0, "gridPos": { - "h": 9, - "w": 8, - "x": 0, - "y": 91 + "h": 7, + "w": 6, + "x": 6, + "y": 48 }, - "hiddenSeries": false, - "id": 19, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", + "id": 27, + "maxDataPoints": 1, "options": { - "alertThreshold": true + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, + "pluginVersion": "11.3.1", "targets": [ { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "A", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "B", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "C", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], "title": "First Contentful Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } + "type": "piechart" }, { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "decimals": 0, "description": "", "fieldConfig": { "defaults": { - "links": [] + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] }, - "fill": 4, - "fillGradient": 0, "gridPos": { - "h": 9, - "w": 8, - "x": 8, - "y": 91 + "h": 7, + "w": 6, + "x": 12, + "y": 48 }, - "hiddenSeries": false, - "id": 20, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", + "id": 43, + "maxDataPoints": 1, "options": { - "alertThreshold": true + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, + "pluginVersion": "11.3.1", "targets": [ { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "A", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "B", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "C", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], "title": "Largest Contentful Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } + "type": "piechart" }, { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "decimals": 0, "description": "", "fieldConfig": { "defaults": { - "links": [] + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] }, - "fill": 4, - "fillGradient": 0, "gridPos": { - "h": 9, - "w": 8, - "x": 16, - "y": 91 + "h": 7, + "w": 6, + "x": 18, + "y": 48 }, - "hiddenSeries": false, - "id": 21, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", + "id": 30, + "maxDataPoints": 1, "options": { - "alertThreshold": true + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "refCount": 0, - "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 9)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", - "textEditor": false - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "refCount": 0, - "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 9)", - "textEditor": false - } - ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], - "title": "First Input Delay", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } - }, - { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "decimals": 0, - "description": "", - "fieldConfig": { - "defaults": { - "links": [] - }, - "overrides": [] - }, - "fill": 4, - "fillGradient": 0, - "gridPos": { - "h": 9, - "w": 8, - "x": 0, - "y": 100 - }, - "hiddenSeries": false, - "id": 22, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", - "options": { - "alertThreshold": true - }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, - "targets": [ - { "refCount": 0, "refId": "A", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "B", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false }, { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refCount": 0, "refId": "C", "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], "title": "Cumulative Layout Shift", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } + "type": "piechart" }, { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "decimals": 0, "description": "", "fieldConfig": { "defaults": { - "links": [] + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] }, - "fill": 4, - "fillGradient": 0, "gridPos": { "h": 9, - "w": 8, - "x": 8, - "y": 100 + "w": 6, + "x": 0, + "y": 55 }, - "hiddenSeries": false, - "id": 56, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", + "id": 57, "options": { - "alertThreshold": true + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Time To First Byte", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 6, + "x": 6, + "y": 55 + }, + "id": 19, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "First Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 6, + "x": 12, + "y": 55 + }, + "id": 20, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Largest Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 6, + "x": 18, + "y": 55 + }, + "id": 22, + "options": { + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "Cumulative Layout Shift", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Interaction To Next Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 500 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 8, + "x": 0, + "y": 64 + }, + "id": 52, + "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.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 8, + "x": 8, + "y": 64 + }, + "id": 54, + "maxDataPoints": 1, + "options": { + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "A", @@ -3481,7 +6483,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "B", @@ -3491,7 +6493,7 @@ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "C", @@ -3499,185 +6501,166 @@ "textEditor": false } ], - "thresholds": [], - "timeFrom": "30d", - "timeRegions": [], "title": "Interaction To Next Paint", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } + "type": "piechart" }, { - "aliasColors": { - "slow": "dark-red" - }, - "bars": true, - "dashLength": 10, - "dashes": false, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, - "decimals": 0, "description": "", "fieldConfig": { "defaults": { - "links": [] + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "bars", + "fillOpacity": 100, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" }, - "overrides": [] + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "dark-red", + "mode": "fixed" + } + } + ] + } + ] }, - "fill": 4, - "fillGradient": 0, "gridPos": { - "h": 9, + "h": 8, "w": 8, "x": 16, - "y": 100 + "y": 64 }, - "hiddenSeries": false, - "id": 57, - "legend": { - "alignAsTable": true, - "avg": false, - "current": true, - "max": true, - "min": true, - "show": true, - "total": false, - "values": true - }, - "lines": true, - "linewidth": 1, - "nullPointMode": "connected", + "id": 56, "options": { - "alertThreshold": true + "alertThreshold": true, + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "multi", + "sort": "none" + } }, - "percentage": true, - "pluginVersion": "8.5.1", - "pointradius": 2, - "points": false, - "renderer": "flot", - "seriesOverrides": [], - "spaceLength": 10, - "stack": true, - "steppedLine": false, + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "A", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 9)", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 9)", "textEditor": false }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "B", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 9)", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 9)", "textEditor": false }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refCount": 0, "refId": "C", - "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 9)", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 9)", "textEditor": false } ], - "thresholds": [], "timeFrom": "30d", - "timeRegions": [], - "title": "Time To First Byte", - "tooltip": { - "shared": true, - "sort": 0, - "value_type": "individual" - }, - "type": "graph", - "xaxis": { - "mode": "time", - "show": true, - "values": [] - }, - "yaxes": [ - { - "$$hashKey": "object:1865", - "decimals": 0, - "format": "percent", - "logBase": 1, - "max": "100", - "min": "0", - "show": true - }, - { - "$$hashKey": "object:1866", - "format": "short", - "logBase": 1, - "show": true - } - ], - "yaxis": { - "align": false - } + "title": "Interaction To Next Paint", + "type": "timeseries" }, { "collapsed": false, - "datasource": { - "type": "graphite", - "uid": "E-Pn3IaGz" - }, "gridPos": { "h": 1, "w": 24, "x": 0, - "y": 109 + "y": 72 }, "id": 38, "panels": [], - "title": "History", + "title": "History origin $group", "type": "row" }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -3685,9 +6668,13 @@ "mode": "palette-classic" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, + "barWidthFactor": 0.6, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", @@ -3696,6 +6683,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, @@ -3736,7 +6724,7 @@ "h": 6, "w": 8, "x": 0, - "y": 110 + "y": 73 }, "id": 39, "options": { @@ -3746,29 +6734,34 @@ "min" ], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", "sort": "none" } }, - "pluginVersion": "8.3.3", + "pluginVersion": "11.3.1", "targets": [ { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, "refId": "A", "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", - "textEditor": false, - "datasource": "graphite" + "textEditor": false } ], - "timeFrom": "30d", + "timeFrom": "1y", + "title": "FCP", "type": "timeseries" }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -3776,9 +6769,13 @@ "mode": "palette-classic" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, + "barWidthFactor": 0.6, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", @@ -3787,6 +6784,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, @@ -3827,7 +6825,7 @@ "h": 6, "w": 8, "x": 8, - "y": 110 + "y": 73 }, "id": 40, "options": { @@ -3837,305 +6835,34 @@ "min" ], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", "sort": "none" } }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "First Input Delay", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 16, - "y": 110 - }, - "id": 41, - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Cumulative Layout Shift", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "none" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 0, - "y": 116 - }, - "id": 42, - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", - "targets": [ - { - "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", - "textEditor": false, - "datasource": "graphite" - } - ], - "timeFrom": "30d", - "type": "timeseries" - }, - { - "datasource": { - "type": "graphite", - "uid": "graphite" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisLabel": "", - "axisPlacement": "auto", - "barAlignment": 0, - "drawStyle": "line", - "fillOpacity": 10, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineInterpolation": "linear", - "lineWidth": 1, - "pointSize": 5, - "scaleDistribution": { - "type": "linear" - }, - "showPoints": "never", - "spanNulls": false, - "stacking": { - "group": "A", - "mode": "none" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "displayName": "Interaction To Next Paint", - "links": [], - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - }, - "unit": "ms" - }, - "overrides": [] - }, - "gridPos": { - "h": 6, - "w": 8, - "x": 8, - "y": 116 - }, - "id": 58, - "options": { - "legend": { - "calcs": [ - "max", - "min" - ], - "displayMode": "list", - "placement": "bottom" - }, - "tooltip": { - "mode": "single", - "sort": "none" - } - }, - "pluginVersion": "8.3.3", + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refId": "A", - "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", "textEditor": false } ], - "timeFrom": "30d", + "timeFrom": "1y", + "title": "LCP", "type": "timeseries" }, { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "fieldConfig": { "defaults": { @@ -4143,9 +6870,13 @@ "mode": "palette-classic" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, + "barWidthFactor": 0.6, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", @@ -4154,6 +6885,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, @@ -4194,7 +6926,7 @@ "h": 6, "w": 8, "x": 16, - "y": 116 + "y": 73 }, "id": 59, "options": { @@ -4204,31 +6936,635 @@ "min" ], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", "sort": "none" } }, - "pluginVersion": "8.3.3", + "pluginVersion": "11.3.1", "targets": [ { "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "refId": "A", "target": "$base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75", "textEditor": false } ], + "timeFrom": "1y", + "title": "TTFB", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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" + } + }, + "displayName": "Cumulative Layout Shift", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 79 + }, + "id": 42, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "CLS", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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" + } + }, + "displayName": "Interaction To Next Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 79 + }, + "id": 58, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "INP", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "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" + } + }, + "displayName": "Round Trip Time", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 79 + }, + "id": 85, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "refCount": 0, + "refId": "A", + "target": "$base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.ROUND_TRIP_TIME_MS.p75", + "textEditor": false + } + ], + "timeFrom": "1y", + "title": "RTT", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 11, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 12, + "w": 8, + "x": 0, + "y": 85 + }, + "id": 86, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FORM_FACTORS_FRACTIONS.*, 100), 9)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], "timeFrom": "30d", + "title": "Form factors", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 9, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 12, + "w": 8, + "x": 8, + "y": 85 + }, + "id": 87, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.NAVIGATION_TYPES_FRACTIONS.*, 100), 9)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "timeFrom": "30d", + "title": "Navigation types", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "barWidthFactor": 0.6, + "drawStyle": "line", + "fillOpacity": 9, + "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": "percent" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 12, + "w": 8, + "x": 16, + "y": 85 + }, + "id": 88, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "11.3.1", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LCP_RESOURCE_TYPES_FRACTIONS.*, 100), 9)", + "textEditor": false, + "datasource": { + "type": "graphite", + "uid": "${DS_GRAPHITE}" + } + } + ], + "timeFrom": "30d", + "title": "LCP element", "type": "timeseries" } ], - "schemaVersion": 36, - "style": "dark", + "schemaVersion": 40, "tags": [], "templating": { "list": [ @@ -4236,18 +7572,18 @@ "hide": 2, "label": "sitespeed_io", "name": "base", - "query": "sitespeed_io", - "skipUrlSync": false, + "query": "${VAR_BASE}", + "skipUrlSync": true, "type": "constant", "current": { - "value": "sitespeed_io", - "text": "sitespeed_io", + "value": "${VAR_BASE}", + "text": "${VAR_BASE}", "selected": false }, "options": [ { - "value": "sitespeed_io", - "text": "sitespeed_io", + "value": "${VAR_BASE}", + "text": "${VAR_BASE}", "selected": false } ] @@ -4256,113 +7592,78 @@ "current": {}, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "definition": "$base.*", - "hide": 0, "includeAll": false, - "multi": false, "name": "path", "options": [], "query": "$base.*", "refresh": 1, "regex": "", - "skipUrlSync": false, - "sort": 0, - "tagValuesQuery": "", - "tagsQuery": "", - "type": "query", - "useTags": false + "type": "query" }, { "current": {}, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "definition": "$base.$path.*", - "hide": 0, "includeAll": false, - "multi": false, "name": "testname", "options": [], "query": "$base.$path.*", "refresh": 1, "regex": "", - "skipUrlSync": false, - "sort": 0, - "tagValuesQuery": "", - "tagsQuery": "", - "type": "query", - "useTags": false + "type": "query" }, { "current": {}, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "definition": "$base.$path.$testname.pageSummary.*", - "hide": 0, "includeAll": false, "label": "domain", - "multi": false, "name": "group", "options": [], "query": "$base.$path.$testname.pageSummary.*", "refresh": 1, "regex": "", - "skipUrlSync": false, - "sort": 0, - "tagValuesQuery": "", - "tagsQuery": "", - "type": "query", - "useTags": false + "type": "query" }, { "current": {}, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "definition": "$base.$path.$testname.pageSummary.$group.*", - "hide": 0, "includeAll": false, - "multi": false, "name": "page", "options": [], "query": "$base.$path.$testname.pageSummary.$group.*", "refresh": 1, "regex": "", - "skipUrlSync": false, - "sort": 0, - "tagValuesQuery": "", - "tagsQuery": "", - "type": "query", - "useTags": false + "type": "query" }, { "current": {}, "datasource": { "type": "graphite", - "uid": "graphite" + "uid": "${DS_GRAPHITE}" }, "definition": "$base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.*", - "hide": 0, "includeAll": false, "label": "Form Factor", - "multi": false, "name": "formFactor", "options": [], "query": "$base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.*", "refresh": 1, "regex": "", - "skipUrlSync": false, - "sort": 0, - "tagValuesQuery": "", - "tagsQuery": "", - "type": "query", - "useTags": false + "type": "query" } ] }, @@ -4386,6 +7687,6 @@ "timezone": "", "title": "Chrome User Experience Report", "uid": "t_bhsNGMk", - "version": 17, + "version": 16, "weekStart": "" } \ No newline at end of file