From 0fa7c1ff0c86a9efc13822a0c216c39c12a51b4f Mon Sep 17 00:00:00 2001 From: Pablo Mendez Date: Mon, 9 Feb 2026 09:31:00 +0100 Subject: [PATCH 1/3] add alloy service and configuration for Grafana Alloy and Tempo --- alloy/Dockerfile | 4 ++ alloy/config.alloy | 84 +++++++++++++++++++++++++++++++++++++++++ docker-compose.yml | 25 ++++++++++++ prometheus-targets.json | 40 +++++++++++--------- tempo/Dockerfile | 2 + tempo/tempo.yaml | 55 +++++++++++++++++++++++++++ 6 files changed, 193 insertions(+), 17 deletions(-) create mode 100644 alloy/Dockerfile create mode 100644 alloy/config.alloy create mode 100644 tempo/Dockerfile create mode 100644 tempo/tempo.yaml diff --git a/alloy/Dockerfile b/alloy/Dockerfile new file mode 100644 index 0000000..c758b90 --- /dev/null +++ b/alloy/Dockerfile @@ -0,0 +1,4 @@ +ARG UPSTREAM_VERSION_ALLOY=latest +FROM grafana/alloy:${UPSTREAM_VERSION_ALLOY} + +COPY config.alloy /etc/alloy/config.alloy \ No newline at end of file diff --git a/alloy/config.alloy b/alloy/config.alloy new file mode 100644 index 0000000..1b1e806 --- /dev/null +++ b/alloy/config.alloy @@ -0,0 +1,84 @@ +logging { + level = "info" + format = "logfmt" +} + +// Prometheus remote write for metrics +prometheus.remote_write "metrics_write" { + endpoint { + name = "default" + url = "http://prometheus.dms.dappnode:9090/api/v1/write" + + queue_config { } + metadata_config { } + } +} + +// Loki log processing pipeline +loki.process "logs_process_client" { + forward_to = [loki.write.logs_write_client.receiver] + + stage.logfmt { + mapping = { "kind" = "", "service_name" = "", "app" = "" } + } + + stage.labels { + values = { "kind" = "kind", "service_name" = "service_name", "app" = "app" } + } +} + +// Loki write endpoint +loki.write "logs_write_client" { + endpoint { + url = "http://loki.dms.dappnode:3100/loki/api/v1/push" + } +} + +// Faro receiver for frontend telemetry collection +faro.receiver "integrations_app_agent_receiver" { + server { + listen_address = "0.0.0.0" + listen_port = 12345 + cors_allowed_origins = ["*"] + max_allowed_payload_size = "10MiB" + + rate_limiting { + rate = 100 + } + } + + sourcemaps { } + + output { + logs = [loki.process.logs_process_client.receiver] + traces = [otelcol.exporter.otlp.trace_write.input] + } +} + +// OpenTelemetry OTLP receiver for traces +otelcol.receiver.otlp "default" { + grpc { + endpoint = "0.0.0.0:4317" + include_metadata = true + } + + http { + endpoint = "0.0.0.0:4318" + } + + output { + metrics = [] + logs = [] + traces = [otelcol.exporter.otlp.trace_write.input] + } +} + +// OpenTelemetry exporter to Tempo +otelcol.exporter.otlp "trace_write" { + client { + endpoint = "tempo.dms.dappnode:4317" + tls { + insecure = true + } + } +} \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 0aabf3f..bebc8e9 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -79,8 +79,33 @@ services: command: "-config.file=/etc/loki/local-config.yaml" restart: always image: loki.dms.dnp.dappnode.eth:1.0.1 + alloy: + build: + context: alloy + args: + UPSTREAM_VERSION_ALLOY: v1.12.1 + image: alloy.dms.dnp.dappnode.eth:1.0.0 + restart: always + command: + - run + - --server.http.listen-addr=0.0.0.0:3000 + - --storage.path=/var/lib/alloy/data + - /etc/alloy/config.alloy + volumes: + - alloy_data:/var/lib/alloy/data + tempo: + build: + context: tempo + image: tempo.dms.dnp.dappnode.eth:1.0.0 + restart: always + command: + - "-config.file=/etc/tempo/config.yaml" + volumes: + - tempo_data:/var/tempo volumes: grafana_data: {} prometheus_data: {} manager_data: {} prometheus_file_sd: {} + alloy_data: {} + tempo_data: {} diff --git a/prometheus-targets.json b/prometheus-targets.json index 9d1e8e8..c5b246f 100644 --- a/prometheus-targets.json +++ b/prometheus-targets.json @@ -1,20 +1,26 @@ [ - { - "labels": { - "job": "nodeexporter" - }, - "targets": ["node-exporter.dms.dappnode:9100"] + { + "labels": { + "job": "nodeexporter" }, - { - "labels": { - "job": "cadvisor" - }, - "targets": ["cadvisor.dms.dappnode:8080"] + "targets": ["node-exporter.dms.dappnode:9100"] + }, + { + "labels": { + "job": "cadvisor" }, - { - "labels": { - "job": "stakersmetrics" - }, - "targets": ["stakers-metrics.dms.dappnode:9090"] - } - ] \ No newline at end of file + "targets": ["cadvisor.dms.dappnode:8080"] + }, + { + "labels": { + "job": "stakersmetrics" + }, + "targets": ["stakers-metrics.dms.dappnode:9090"] + }, + { + "labels": { + "job": "alloy" + }, + "targets": ["alloy.dms.dappnode:3000"] + } +] diff --git a/tempo/Dockerfile b/tempo/Dockerfile new file mode 100644 index 0000000..c2829fc --- /dev/null +++ b/tempo/Dockerfile @@ -0,0 +1,2 @@ +FROM grafana/tempo:latest +COPY tempo.yaml /etc/tempo/config.yaml \ No newline at end of file diff --git a/tempo/tempo.yaml b/tempo/tempo.yaml new file mode 100644 index 0000000..c60d95d --- /dev/null +++ b/tempo/tempo.yaml @@ -0,0 +1,55 @@ +stream_over_http_enabled: true +server: + http_listen_port: 3200 + log_level: info + +query_frontend: + search: + duration_slo: 5s + throughput_bytes_slo: 1.073741824e+09 + metadata_slo: + duration_slo: 5s + throughput_bytes_slo: 1.073741824e+09 + trace_by_id: + duration_slo: 5s + +distributor: + receivers: + otlp: + protocols: + grpc: + endpoint: "tempo:4317" + +ingester: + max_block_duration: 5m # cut the headblock when this much time passes. this is being set for demo purposes and should probably be left alone normally + +compactor: + compaction: + block_retention: 1h # overall Tempo trace retention. set for demo purposes + +metrics_generator: + registry: + external_labels: + source: tempo + cluster: docker-compose + storage: + path: /var/tempo/generator/wal + remote_write: + - url: http://prometheus.dms.dappnode:9090/api/v1/write + send_exemplars: true + traces_storage: + path: /var/tempo/generator/traces + +storage: + trace: + backend: local # backend configuration to use + wal: + path: /var/tempo/wal # where to store the wal locally + local: + path: /var/tempo/blocks + +overrides: + defaults: + metrics_generator: + processors: [service-graphs, span-metrics, local-blocks] # enables metrics generator + generate_native_histograms: both From 136e6cfc2d54ad644f50e9585c43462be5d2ad96 Mon Sep 17 00:00:00 2001 From: Pablo Mendez Date: Mon, 9 Feb 2026 11:05:42 +0100 Subject: [PATCH 2/3] fix tempo --- docker-compose.yml | 2 ++ tempo/Dockerfile | 3 ++- tempo/tempo.yaml | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index bebc8e9..2cb9591 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -96,6 +96,8 @@ services: tempo: build: context: tempo + args: + UPSTREAM_VERSION_TEMPO: 2.7.1 image: tempo.dms.dnp.dappnode.eth:1.0.0 restart: always command: diff --git a/tempo/Dockerfile b/tempo/Dockerfile index c2829fc..f9d7946 100644 --- a/tempo/Dockerfile +++ b/tempo/Dockerfile @@ -1,2 +1,3 @@ -FROM grafana/tempo:latest +ARG UPSTREAM_VERSION_TEMPO=2.7.1 +FROM grafana/tempo:${UPSTREAM_VERSION_TEMPO} COPY tempo.yaml /etc/tempo/config.yaml \ No newline at end of file diff --git a/tempo/tempo.yaml b/tempo/tempo.yaml index c60d95d..511d84a 100644 --- a/tempo/tempo.yaml +++ b/tempo/tempo.yaml @@ -18,7 +18,7 @@ distributor: otlp: protocols: grpc: - endpoint: "tempo:4317" + endpoint: "0.0.0.0:4317" ingester: max_block_duration: 5m # cut the headblock when this much time passes. this is being set for demo purposes and should probably be left alone normally From 68e0a87f9926d132669a0a294ddb94bd66616cdb Mon Sep 17 00:00:00 2001 From: Pablo Mendez Date: Mon, 9 Feb 2026 11:42:49 +0100 Subject: [PATCH 3/3] first version of ui metrics dashboard --- ui-metrics-dashboard.json | 1783 +++++++++++++++++++++++++++++++++++++ 1 file changed, 1783 insertions(+) create mode 100644 ui-metrics-dashboard.json diff --git a/ui-metrics-dashboard.json b/ui-metrics-dashboard.json new file mode 100644 index 0000000..12f37b0 --- /dev/null +++ b/ui-metrics-dashboard.json @@ -0,0 +1,1783 @@ +{ + "__inputs": [ + { + "name": "DS_ACCUV_APPLICATION LOGS", + "label": "AccuV Application Logs", + "description": "", + "type": "datasource", + "pluginId": "loki", + "pluginName": "Loki" + } + ], + "__elements": {}, + "__requires": [ + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "9.3.2-45365" + }, + { + "type": "datasource", + "id": "loki", + "name": "Loki", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "table", + "name": "Table", + "version": "" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + }, + { + "type": "panel", + "id": "timeseries", + "name": "Time series", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "target": { + "limit": 100, + "matchAny": false, + "tags": [], + "type": "dashboard" + }, + "type": "dashboard" + } + ] + }, + "description": "Frontend monitoring dashboard using metrics collected with Grafana Faro SDK.", + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": null, + "links": [], + "liveNow": false, + "panels": [ + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 14, + "panels": [], + "title": "Performance", + "type": "row" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.\nhttps://web.dev/ttfb/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 600 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 0, + "y": 1 + }, + "id": 8, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \"ttfb\" | logfmt | unwrap ttfb [$__range]) by (app)", + "legendFormat": "TTFB", + "queryType": "range", + "refId": "A" + } + ], + "title": "Time to First Byte (TTFB)", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, \"content\" refers to text, images (including background images), elements, or non-white elements.\nhttps://web.dev/fcp/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1800 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 4, + "y": 1 + }, + "id": 9, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" fcp=\" | logfmt | unwrap fcp [$__range]) by (app)", + "legendFormat": "FCP", + "queryType": "range", + "refId": "A" + } + ], + "title": "First Contentful Paint (FCP)", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.\nhttps://web.dev/cls/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "max": 1, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.3 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 8, + "y": 1 + }, + "id": 11, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \"cls\" | logfmt | unwrap cls [$__range]) by (app)", + "legendFormat": "CLS", + "queryType": "range", + "refId": "A" + } + ], + "title": "Cumulative Layout Shift (CLS)", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.\nhttps://web.dev/lcp/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 12, + "y": 1 + }, + "id": 10, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" lcp=\" | logfmt | unwrap lcp [$__range]) by (app)", + "legendFormat": "LCP", + "queryType": "range", + "refId": "A" + } + ], + "title": "Largest Contentful Paint (LCP)", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.\nhttps://web.dev/fid/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 4, + "x": 16, + "y": 1 + }, + "id": 12, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" fid=\" | logfmt | unwrap fid [$__range]) by (app)", + "legendFormat": "FID", + "queryType": "range", + "refId": "A" + } + ], + "title": "First Input Delay (FID)", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "", + "gridPos": { + "h": 3, + "w": 4, + "x": 20, + "y": 1 + }, + "id": 36, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "# Web Vitals\n\nFor Web Vitals help: [https://web.dev/vitals/](https://web.dev/vitals/)", + "mode": "markdown" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "avg_over_time({kind=\"measurement\",app=\"$app\"} |= \" fid=\" | logfmt | unwrap fid [$__range]) by (app)", + "legendFormat": "FID", + "queryType": "range", + "refId": "A" + } + ], + "type": "text" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.\nhttps://web.dev/ttfb/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "normal" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 8, + "x": 0, + "y": 4 + }, + "id": 2, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "quantile_over_time(0.75, {kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" ttfb=\" | logfmt | unwrap ttfb [5m]) by (app)", + "legendFormat": "TTFB", + "queryType": "range", + "refId": "A" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "quantile_over_time(0.75, {kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" fcp=\" | logfmt | unwrap fcp [5m]) by (app)", + "hide": false, + "legendFormat": "FCP", + "queryType": "range", + "refId": "B" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "quantile_over_time(0.75, {kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" lcp=\" | logfmt | unwrap lcp [5m]) by (app)", + "hide": false, + "legendFormat": "LCP", + "queryType": "range", + "refId": "C" + } + ], + "title": "Page Load, p75", + "type": "timeseries" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.\nhttps://web.dev/cls/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "line" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 8, + "x": 8, + "y": 4 + }, + "id": 4, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "quantile_over_time(0.75, {kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" cls=\" | logfmt | unwrap cls [5m]) by (app)", + "legendFormat": "CLS", + "queryType": "range", + "refId": "A" + } + ], + "title": "Cumulative Layout Shift, p75", + "type": "timeseries" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "description": "First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.\nhttps://web.dev/fid/", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "line" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 8, + "x": 16, + "y": 4 + }, + "id": 6, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "quantile_over_time(0.75, {kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" fid=\" | logfmt | unwrap fid [5m]) by (app)", + "legendFormat": "FID", + "queryType": "range", + "refId": "A" + } + ], + "title": "First Input Delay, p75", + "type": "timeseries" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 12 + }, + "id": 16, + "panels": [], + "title": "Exceptions", + "type": "row" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 1 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 4, + "x": 0, + "y": 13 + }, + "id": 18, + "options": { + "colorMode": "value", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "textMode": "auto" + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "sum(count_over_time({kind=\"exception\",service_name=~\"$env\",app=\"$app\"} [$__range])) by (app)", + "queryType": "range", + "refId": "A" + } + ], + "title": "Total Exceptions", + "type": "stat" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "errors" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 10, + "x": 4, + "y": 13 + }, + "id": 25, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "count_over_time({kind=\"exception\",service_name=~\"$env\",app=\"$app\"} [$__interval])", + "legendFormat": "errors", + "queryType": "range", + "refId": "A" + } + ], + "title": "Exceptions Over Time", + "type": "timeseries" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Count" + }, + "properties": [ + { + "id": "custom.width", + "value": 100 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 10, + "x": 14, + "y": 13 + }, + "id": 20, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(10, count(count_over_time({kind=\"exception\",service_name=~\"$env\",app=\"$app\"} | logfmt [$__range])) by (value))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Top Exceptions", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "value": "Error" + } + } + } + ], + "type": "table" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Count" + }, + "properties": [ + { + "id": "custom.width", + "value": 100 + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 14, + "x": 0, + "y": 21 + }, + "id": 21, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(10, count(count_over_time({kind=\"exception\",service_name=~\"$env\",app=\"$app\"} | logfmt [$__range])) by (page_url))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Top URLs by Exception Count", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "page_url": "URL", + "value": "Error" + } + } + } + ], + "type": "table" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Version" + }, + "properties": [ + { + "id": "custom.width", + "value": 150 + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Errors" + }, + "properties": [ + { + "id": "custom.width", + "value": 100 + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 10, + "x": 14, + "y": 21 + }, + "id": 23, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(10, count by (browser_name, browser_version) (count_over_time({kind=\"exception\",service_name=~\"$env\",app=\"$app\"} | logfmt [$__range])))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Top Browsers by Exception Count", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "browser_name": "Browser", + "browser_version": "Version", + "page_url": "URL", + "value": "Error" + } + } + } + ], + "type": "table" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 30 + }, + "id": 27, + "panels": [], + "title": "Meta", + "type": "row" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 31 + }, + "id": 29, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(10, count(count_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" ttfb=\" | logfmt [$__range])) by (browser_name, browser_version))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Popular Browsers", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "browser_name": "Browser", + "browser_version": "Version" + } + } + } + ], + "type": "table" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "errors" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 31 + }, + "id": 30, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "count_over_time({kind=\"measurement\",service_name=~\"$env\",app=\"$app\"} |= \" ttfb=\" [$__interval])", + "legendFormat": "visits", + "queryType": "range", + "refId": "A" + } + ], + "title": "Visits", + "type": "timeseries" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 41 + }, + "id": 32, + "panels": [], + "title": "Events", + "type": "row" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Count" + }, + "properties": [ + { + "id": "custom.width", + "value": 100 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 42 + }, + "id": 35, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(10, count(count_over_time({kind=\"event\",service_name=~\"$env\",app=\"$app\"} | logfmt [$__range])) by (event_name))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Top Events", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "event_name": "Name", + "value": "Error" + } + } + } + ], + "type": "table" + }, + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": { + "align": "auto", + "displayMode": "auto", + "inspect": false + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Count" + }, + "properties": [ + { + "id": "custom.width", + "value": 100 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 42 + }, + "id": 37, + "options": { + "footer": { + "fields": "", + "reducer": ["sum"], + "show": false + }, + "showHeader": true, + "sortBy": [ + { + "desc": true, + "displayName": "Count" + } + ] + }, + "pluginVersion": "9.3.2-45365", + "targets": [ + { + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "editorMode": "code", + "expr": "topk(50, count(count_over_time({kind=\"event\",service_name=~\"$env\",app=\"$app\"} | logfmt | event_name = \"mainspa_mount\" [$__range])) by (user_id))", + "queryType": "instant", + "refId": "A" + } + ], + "title": "Top Users", + "transformations": [ + { + "id": "organize", + "options": { + "excludeByName": { + "Time": true + }, + "indexByName": {}, + "renameByName": { + "Value #A": "Count", + "event_name": "Name", + "value": "Error" + } + } + } + ], + "type": "table" + } + ], + "refresh": "", + "schemaVersion": 37, + "style": "dark", + "tags": ["grafana", "faro", "frontend"], + "templating": { + "list": [ + { + "current": {}, + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "definition": "label_values(service_name)", + "description": "", + "hide": 0, + "includeAll": true, + "allValue": ".*", + "label": "Service", + "multi": false, + "name": "env", + "options": [], + "query": { + "label": "service_name", + "refId": "LokiVariableQueryEditor-VariableQuery", + "stream": "", + "type": 1 + }, + "refresh": 1, + "regex": ".*", + "skipUrlSync": false, + "sort": 0, + "type": "query" + }, + { + "current": {}, + "datasource": { + "type": "loki", + "uid": "${DS_ACCUV_APPLICATION LOGS}" + }, + "definition": "label_values(app)", + "hide": 0, + "includeAll": false, + "label": "App", + "multi": false, + "name": "app", + "options": [], + "query": { + "label": "app", + "refId": "LokiVariableQueryEditor-VariableQuery", + "stream": "", + "type": 1 + }, + "refresh": 1, + "regex": ".*", + "skipUrlSync": false, + "sort": 0, + "type": "query" + }, + { + "current": { + "selected": false, + "text": "AccuV Application Logs", + "value": "AccuV Application Logs" + }, + "hide": 2, + "includeAll": false, + "label": "datasource", + "multi": false, + "name": "datasource", + "options": [], + "query": "loki", + "refresh": 1, + "regex": "/.*(Logs).*/", + "skipUrlSync": false, + "type": "datasource" + } + ] + }, + "time": { + "from": "now-24h", + "to": "now" + }, + "timepicker": {}, + "timezone": "", + "title": "Grafana Faro - Frontend Monitoring", + "uid": "CiroMopVz", + "version": 29, + "weekStart": "", + "gnetId": 17766 +}