{ "__elements": {}, "__requires": [ { "type": "grafana", "id": "grafana", "name": "Grafana", "version": "11.1.0" }, { "type": "datasource", "id": "prometheus", "name": "Prometheus", "version": "1.0.0" }, { "type": "panel", "id": "stat", "name": "Stat", "version": "" }, { "type": "panel", "id": "timeseries", "name": "Time series", "version": "" } ], "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 1, "id": null, "links": [], "liveNow": false, "panels": [ { "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 0 }, "id": 7, "panels": [], "title": "Interactivity", "type": "row" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The time between when a user clicks on a channel in the LHS and when posts in that channel are shown to them, measured as a percentile of all requests in a given 30 minute period", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 1 }, "id": 1, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "pluginVersion": "10.3.3", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "editorMode": "code", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_channel_switch_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "format": "time_series", "hide": false, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A" } ], "title": "Channel Switch", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Channel Switch measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 250ms\n- Needs Improvement: 500ms", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "#EAB839", "value": 0.25 }, { "color": "red", "value": 0.5 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit", "value": "none" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 10, "y": 1 }, "id": 23, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.1.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_channel_switch_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "exemplar": false, "expr": "sum(increase(mattermost_webapp_channel_switch_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "Channel Switch (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The time between when a user clicks on a team in the LHS and when posts in a channel on that team are shown to them", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 1 }, "id": 2, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_team_switch_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false } ], "title": "Team Switch", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Team Switch measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 750ms\n- Needs Improvement: 1.25s", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "#EAB839", "value": 0.75 }, { "color": "red", "value": 1.25 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit", "value": "none" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 22, "y": 1 }, "id": 31, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.1.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_team_switch_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "exemplar": false, "expr": "sum(increase(mattermost_webapp_team_switch_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "Team Switch (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 9 }, "id": 12, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "code", "expr": "sum(increase(mattermost_webapp_channel_switch_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of Channel Switches", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 9 }, "id": 13, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_team_switch_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of Team Switches", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The time between when a user clicks to open the RHS and when the VirtualizedThreadViewer component is mounted, measured as a percentile of all requests in a given 30 minute period", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 17 }, "id": 19, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "pluginVersion": "10.3.3", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_rhs_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false } ], "title": "RHS Load", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all RHS Load measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 350ms\n- Needs Improvement: 600ms", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "#EAB839", "value": 0.35 }, { "color": "red", "value": 0.6 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 10, "y": 17 }, "id": 27, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.1.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_rhs_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "editorMode": "code", "expr": "sum(increase(mattermost_webapp_rhs_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "hide": false, "instant": false, "legendFormat": "Count", "range": true, "refId": "B" } ], "title": "RHS Load (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The time between when a user clicks on Threads in the LHS and when a list of threads is rendered, measured as a percentile of all requests in a given 30 minute period", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 17 }, "id": 21, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "pluginVersion": "10.3.3", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_global_threads_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false } ], "title": "Threads List Load", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Threads List Load measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 500ms\n- Needs Improvement: 800ms", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "#EAB839", "value": 0.5 }, { "color": "red", "value": 0.8 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 22, "y": 17 }, "id": 32, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "percentChangeColorMode": "standard", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.1.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_global_threads_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_global_threads_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "Threads List Load (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 25 }, "id": 20, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_rhs_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of RHS Loads", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 25 }, "id": 22, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_global_threads_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of Threads List Loads", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "Tracks the duration of the longest click or keyboard interaction during an application's lifecycle (Desktop/Chrome/Edge only)", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 33 }, "id": 6, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_interaction_to_next_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "B", "useBackend": false } ], "title": "Interaction to Next Paint (INP)", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Interaction to Next Paint measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 200ms\n- Needs Improvement: 500ms", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 0.2 }, { "color": "red", "value": 0.5 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 10, "y": 33 }, "id": 33, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_interaction_to_next_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_interaction_to_next_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "INP (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The number of times that the main UI thread of a browser was blocked for more than 50ms (Desktop/Chrome/Edge only)", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 33 }, "id": 10, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(rate(mattermost_webapp_long_tasks{agent=~\"$agent\",platform=~\"$platform\"}[10m]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "# of Long Tasks per second", "range": true, "refId": "B", "useBackend": false } ], "title": "Long Tasks", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 41 }, "id": 17, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_interaction_to_next_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of INPs", "type": "timeseries" }, { "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 49 }, "id": 5, "panels": [], "title": "Initial Load", "type": "row" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "Tracks the time from when a browser first requests data from the server until when the browser starts to receive a response", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 50 }, "id": 4, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_time_to_first_byte_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "B", "useBackend": false } ], "title": "Time to First Byte (TTFB)", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Time To First Byte measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 800ms\n- Needs Improvement: 1.8s", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 0.8 }, { "color": "red", "value": 1.8 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 10, "y": 50 }, "id": 34, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_time_to_first_byte_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_time_to_first_byte_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "TTFB (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The time between when the browser starts to load the web app and when the `window.load` event completes which is before much of the web app is loaded.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 10 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 50 }, "id": 11, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_page_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false } ], "title": "Load Event End (Formerly Page Load)", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Load Event End measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 2.25s\n- Needs Improvement: 4.5s", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 2.25 }, { "color": "red", "value": 4.5 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 22, "y": 50 }, "id": 35, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_page_load_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_page_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "Load Event End (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 58 }, "id": 15, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_time_to_first_byte_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of TTFBs", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 58 }, "id": 14, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_page_load_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of Load Event Ends", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "FCP tracks the amount of time taken from when a page starts to load to when the first content on that page is visible. LCP tracks the amount of time taken until a large piece of content is visible. (Only on Desktop/Firefox/Chrome/Edge)", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "line" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 20 } ] }, "unit": "s" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 66 }, "id": 3, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_first_contentful_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "FCP [[percentile]]th Percentile", "range": true, "refId": "B", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_largest_contentful_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "LCP [[percentile]]th Percentile", "range": true, "refId": "C", "useBackend": false } ], "title": "First Contentful Paint (FCP)/Largest Contentful Paint (LCP)", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all First Contentful Paint measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 1.8s\n- Needs Improvement: 3s", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 1.8 }, { "color": "red", "value": 3 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 8, "w": 2, "x": 10, "y": 66 }, "id": 36, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_first_contentful_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_first_contentful_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "FCP (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "A measurement of how much page layout shifts unexpectedly (Desktop/Chrome/Edge only)", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 10 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 66 }, "id": 8, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_cumulative_layout_shift_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$decay])))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "B", "useBackend": false } ], "title": "Cumulative Layout Shift (CLS)", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Cumulative Layout Shift measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 0.1\n- Needs Improvement: 0.25", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 0.1 }, { "color": "red", "value": 0.25 } ] }, "unit": "none" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 16, "w": 2, "x": 22, "y": 66 }, "id": 37, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_cumulative_layout_shift_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_cumulative_layout_shift_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "CLS (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 0, "y": 74 }, "id": 16, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_first_contentful_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[10m]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of FCP Reports", "range": true, "refId": "B", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_largest_contentful_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[10m]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of LCP Reports", "range": true, "refId": "A", "useBackend": false } ], "title": "# of FCPs/LCPs", "type": "timeseries" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "The [[percentile]]th percentile of all Largest Contentful Paint measurements over the selected time period and the number of measurements taken during that time.\n\nTarget values for P75:\n- Good: 2.5s\n- Needs Improvement: 4s", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "#EAB839", "value": 2.5 }, { "color": "red", "value": 4 } ] }, "unit": "s" }, "overrides": [ { "matcher": { "id": "byName", "options": "Count" }, "properties": [ { "id": "unit" }, { "id": "color", "value": { "fixedColor": "text", "mode": "fixed" } } ] } ] }, "gridPos": { "h": 8, "w": 2, "x": 10, "y": 74 }, "id": 38, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "center", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": false }, "showPercentChange": false, "textMode": "value_and_name", "wideLayout": false }, "pluginVersion": "11.0.0", "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "exemplar": false, "expr": "histogram_quantile($percentile / 100, sum by(le) (increase(mattermost_webapp_largest_contentful_paint_bucket{agent=~\"$agent\",platform=~\"$platform\"}[$__range])))", "format": "time_series", "fullMetaSearch": false, "includeNullMetadata": true, "instant": false, "legendFormat": "[[percentile]]th Percentile", "range": true, "refId": "A", "useBackend": false }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_largest_contentful_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[$__range]))", "fullMetaSearch": false, "hide": false, "includeNullMetadata": true, "instant": false, "legendFormat": "Count", "range": true, "refId": "B", "useBackend": false } ], "title": "LCP (Overall)", "type": "stat" }, { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "description": "", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "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": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green" }, { "color": "red", "value": 80 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 10, "x": 12, "y": 74 }, "id": 18, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "maxHeight": 600, "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "prometheus", "uid": "Prometheus" }, "disableTextWrap": false, "editorMode": "builder", "expr": "sum(increase(mattermost_webapp_interaction_to_next_paint_count{agent=~\"$agent\",platform=~\"$platform\"}[$decay]))", "format": "time_series", "fullMetaSearch": false, "hide": false, "includeNullMetadata": false, "instant": false, "interval": "", "legendFormat": "# of Reports", "range": true, "refId": "B", "useBackend": false } ], "title": "# of CLSs", "type": "timeseries" }, { "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 82 }, "id": 9, "panels": [], "title": "Other Metrics", "type": "row" } ], "refresh": "", "schemaVersion": 39, "tags": [], "templating": { "list": [ { "current": {}, "datasource": { "type": "prometheus", "uid": "Prometheus" }, "definition": "label_values(mattermost_webapp_channel_switch_count,agent)", "hide": 0, "includeAll": true, "label": "Browser/App", "multi": true, "name": "agent", "options": [], "query": { "qryType": 1, "query": "label_values(mattermost_webapp_channel_switch_count,agent)", "refId": "PrometheusVariableQueryEditor-VariableQuery" }, "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" }, { "current": {}, "datasource": { "type": "prometheus", "uid": "Prometheus" }, "definition": "label_values(mattermost_webapp_channel_switch_count,platform)", "hide": 0, "includeAll": true, "label": "OS", "multi": true, "name": "platform", "options": [], "query": { "qryType": 1, "query": "label_values(mattermost_webapp_channel_switch_count,platform)", "refId": "PrometheusVariableQueryEditor-VariableQuery" }, "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" }, { "current": { "selected": false, "text": "75", "value": "75" }, "description": "", "hide": 0, "includeAll": false, "label": "Percentile", "multi": false, "name": "percentile", "options": [ { "selected": true, "text": "75", "value": "75" }, { "selected": false, "text": "99", "value": "99" } ], "query": "75,99", "queryValue": "", "skipUrlSync": false, "type": "custom" }, { "current": { "selected": false, "text": "30m", "value": "30m" }, "hide": 0, "includeAll": false, "label": "Decay Time", "multi": false, "name": "decay", "options": [ { "selected": true, "text": "30m", "value": "30m" }, { "selected": false, "text": "1h", "value": "1h" }, { "selected": false, "text": "3h", "value": "3h" }, { "selected": false, "text": "6h", "value": "6h" }, { "selected": false, "text": "12h", "value": "12h" }, { "selected": false, "text": "1d", "value": "1d" } ], "query": "30m,1h,3h,6h,12h,1d", "queryValue": "", "skipUrlSync": false, "type": "custom" } ] }, "time": { "from": "now-24h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "Web App Metrics", "uid": "adok91bti9pmof", "version": 29, "weekStart": "" }