public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge main

Browse Source
This commit is contained in:
Ryan McKinley
2025-12-22 12:55:56 +03:00
parent 4a20665cf7 5585595c16
commit 4c39335c6d
213 changed files with 14084 additions and 4469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CODEOWNERS
+1
View File
@@ -425,6 +425,7 @@ i18next.config.ts @grafana/grafana-frontend-platform
/public/locales/enterprise/i18next.config.ts @grafana/grafana-frontend-platform
/public/app/core/internationalization/ @grafana/grafana-frontend-platform
/e2e/ @grafana/grafana-frontend-platform
/e2e-playwright/alerting-suite/ @grafana/alerting-frontend
/e2e-playwright/cloud-plugins-suite/ @grafana/partner-datasources
/e2e-playwright/dashboard-new-layouts/ @grafana/dashboards-squad
/e2e-playwright/dashboard-cujs/ @grafana/dashboards-squad
.github/actions/change-detection/action.yml
+1
View File
@@ -99,6 +99,7 @@ runs:
- '${{ inputs.self }}'
e2e:
- 'e2e/**'
- 'e2e-playwright/**'
- '.github/actions/setup-enterprise/**'
- '.github/actions/checkout/**'
- 'emails/**'
apps/dashboard/pkg/migration/conversion/testdata/input/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.json
Vendored
+31 -140
View File
@@ -71,12 +71,11 @@
"id": 1,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false,
"gradient": false
},
"orientation": "auto",
@@ -150,12 +149,11 @@
"id": 4,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false,
"gradient": false
},
"orientation": "auto",
@@ -229,12 +227,11 @@
"id": 3,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false,
"gradient": false
},
"orientation": "auto",
@@ -271,85 +268,6 @@
"title": "Center and bar glow",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"max": 100,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": 0
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 4,
"x": 12,
"y": 1
},
"id": 5,
"maxDataPoints": 20,
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
{
"alias": "1",
"datasource": {
"type": "grafana-testdata-datasource"
},
"max": 100,
"min": 1,
"noise": 22,
"refId": "A",
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
],
"title": "Spotlight",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
@@ -391,10 +309,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -470,10 +387,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -549,10 +465,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -641,10 +556,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -720,10 +634,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -799,10 +712,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -878,10 +790,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -974,10 +885,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1053,10 +963,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1132,10 +1041,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1211,10 +1119,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1290,10 +1197,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1386,10 +1292,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1469,10 +1374,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1552,10 +1456,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1641,13 +1544,13 @@
"options": {
"barWidth": 12,
"barWidthFactor": 0.4,
"barShape": "rounded",
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1662,8 +1565,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1730,10 +1632,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1748,8 +1649,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1830,10 +1730,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1848,8 +1747,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1917,9 +1815,6 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true,
"gradient": true
},
"glow": "both",
@@ -1934,10 +1829,10 @@
"segmentCount": 12,
"segmentSpacing": 0.3,
"shape": "circle",
"barShape": "rounded",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2004,10 +1899,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2022,8 +1916,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2090,10 +1983,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true,
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2108,8 +2000,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
apps/dashboard/pkg/migration/conversion/testdata/input/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.json
Vendored
-2
View File
@@ -955,8 +955,6 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
},
"orientation": "auto",
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v1beta1.json
Vendored
+56 -165
View File
@@ -77,13 +77,12 @@
"id": 1,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -156,13 +155,12 @@
"id": 4,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -235,13 +233,12 @@
"id": 3,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -277,85 +274,6 @@
"title": "Center and bar glow",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"max": 100,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": 0
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 4,
"x": 12,
"y": 1
},
"id": 5,
"maxDataPoints": 20,
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
},
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
{
"alias": "1",
"datasource": {
"type": "grafana-testdata-datasource"
},
"max": 100,
"min": 1,
"noise": 22,
"refId": "A",
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
],
"title": "Spotlight",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
@@ -393,13 +311,12 @@
"id": 8,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -472,13 +389,12 @@
"id": 22,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -551,13 +467,12 @@
"id": 23,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -643,13 +558,12 @@
"id": 18,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.1,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -722,13 +636,12 @@
"id": 19,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.32,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -801,13 +714,12 @@
"id": 20,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.57,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -880,13 +792,12 @@
"id": 21,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.8,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -976,13 +887,12 @@
"id": 25,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1055,13 +965,12 @@
"id": 26,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1134,13 +1043,12 @@
"id": 29,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1213,13 +1121,12 @@
"id": 30,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1292,13 +1199,12 @@
"id": 28,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1388,13 +1294,12 @@
"id": 32,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1471,13 +1376,12 @@
"id": 34,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1554,13 +1458,12 @@
"id": 33,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1645,15 +1548,15 @@
"id": 9,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1668,8 +1571,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1731,14 +1633,13 @@
"id": 11,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1754,8 +1655,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1831,14 +1731,13 @@
"id": 13,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1854,8 +1753,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1918,15 +1816,13 @@
"id": 14,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1942,8 +1838,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2005,14 +1900,13 @@
"id": 15,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.84,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -2028,8 +1922,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2091,14 +1984,13 @@
"id": 16,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.66,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -2114,8 +2006,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2160,4 +2051,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v2alpha1.json
Vendored
+56 -191
View File
@@ -73,13 +73,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -165,14 +164,13 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -188,8 +186,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"fieldConfig": {
"defaults": {
@@ -262,14 +259,13 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -285,8 +281,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -360,15 +355,13 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -384,8 +377,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -459,14 +451,13 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.84,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -482,8 +473,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -556,14 +546,13 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.66,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -579,8 +568,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -653,13 +641,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.1,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -745,13 +732,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.32,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -837,13 +823,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.57,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -929,13 +914,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.8,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1021,13 +1005,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1113,13 +1096,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1201,13 +1183,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1293,13 +1274,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1385,13 +1365,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1477,13 +1456,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1573,13 +1551,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1661,13 +1638,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1753,13 +1729,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1849,13 +1824,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1945,13 +1919,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -2045,105 +2018,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
},
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"fieldConfig": {
"defaults": {
"min": 0,
"max": 100,
"thresholds": {
"mode": "absolute",
"steps": [
{
"value": 0,
"color": "green"
},
{
"value": 80,
"color": "red"
}
]
},
"color": {
"mode": "thresholds"
}
},
"overrides": []
}
}
}
}
},
"panel-5": {
"kind": "Panel",
"spec": {
"id": 5,
"title": "Spotlight",
"description": "",
"links": [],
"data": {
"kind": "QueryGroup",
"spec": {
"queries": [
{
"kind": "PanelQuery",
"spec": {
"query": {
"kind": "grafana-testdata-datasource",
"spec": {
"alias": "1",
"max": 100,
"min": 1,
"noise": 22,
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
},
"refId": "A",
"hidden": false
}
}
],
"transformations": [],
"queryOptions": {
"maxDataPoints": 20
}
}
},
"vizConfig": {
"kind": "radialbar",
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -2229,13 +2109,12 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -2321,15 +2200,15 @@
"spec": {
"pluginVersion": "13.0.0-pre",
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2344,8 +2223,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -2429,19 +2307,6 @@
}
}
},
{
"kind": "GridLayoutItem",
"spec": {
"x": 12,
"y": 0,
"width": 4,
"height": 6,
"element": {
"kind": "ElementReference",
"name": "panel-5"
}
}
},
{
"kind": "GridLayoutItem",
"spec": {
@@ -2826,4 +2691,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v2beta1.json
Vendored
+56 -194
View File
@@ -77,13 +77,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -172,14 +171,13 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -195,8 +193,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"fieldConfig": {
"defaults": {
@@ -272,14 +269,13 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -295,8 +291,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -373,15 +368,13 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -397,8 +390,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -475,14 +467,13 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.84,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -498,8 +489,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -575,14 +565,13 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.66,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -598,8 +587,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -675,13 +663,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.1,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -770,13 +757,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.32,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -865,13 +851,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.57,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -960,13 +945,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.8,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1055,13 +1039,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1150,13 +1133,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1241,13 +1223,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1336,13 +1317,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1431,13 +1411,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1526,13 +1505,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1625,13 +1603,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1716,13 +1693,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1811,13 +1787,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1910,13 +1885,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -2009,13 +1983,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -2112,108 +2085,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
},
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"fieldConfig": {
"defaults": {
"min": 0,
"max": 100,
"thresholds": {
"mode": "absolute",
"steps": [
{
"value": 0,
"color": "green"
},
{
"value": 80,
"color": "red"
}
]
},
"color": {
"mode": "thresholds"
}
},
"overrides": []
}
}
}
}
},
"panel-5": {
"kind": "Panel",
"spec": {
"id": 5,
"title": "Spotlight",
"description": "",
"links": [],
"data": {
"kind": "QueryGroup",
"spec": {
"queries": [
{
"kind": "PanelQuery",
"spec": {
"query": {
"kind": "DataQuery",
"group": "grafana-testdata-datasource",
"version": "v0",
"spec": {
"alias": "1",
"max": 100,
"min": 1,
"noise": 22,
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
},
"refId": "A",
"hidden": false
}
}
],
"transformations": [],
"queryOptions": {
"maxDataPoints": 20
}
}
},
"vizConfig": {
"kind": "VizConfig",
"group": "radialbar",
"version": "13.0.0-pre",
"spec": {
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -2302,13 +2179,12 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -2397,15 +2273,15 @@
"version": "13.0.0-pre",
"spec": {
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2420,8 +2296,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"fieldConfig": {
"defaults": {
@@ -2505,19 +2380,6 @@
}
}
},
{
"kind": "GridLayoutItem",
"spec": {
"x": 12,
"y": 0,
"width": 4,
"height": 6,
"element": {
"kind": "ElementReference",
"name": "panel-5"
}
}
},
{
"kind": "GridLayoutItem",
"spec": {
@@ -2902,4 +2764,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v1beta1.json
Vendored
+2 -4
View File
@@ -961,9 +961,7 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1175,4 +1173,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v2alpha1.json
Vendored
+2 -4
View File
@@ -864,9 +864,7 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1620,4 +1618,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v2beta1.json
Vendored
+2 -4
View File
@@ -901,9 +901,7 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1672,4 +1670,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_new.v42.json
Vendored
+113 -223
View File
@@ -75,10 +75,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -154,10 +153,9 @@
"effects": {
"barGlow": false,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -233,10 +231,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -305,85 +302,6 @@
"x": 12,
"y": 1
},
"id": 5,
"maxDataPoints": 20,
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
},
"orientation": "auto",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
{
"alias": "1",
"datasource": {
"type": "grafana-testdata-datasource"
},
"max": 100,
"min": 1,
"noise": 22,
"refId": "A",
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
],
"title": "Spotlight",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"max": 100,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": 0
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 4,
"x": 16,
"y": 1
},
"id": 8,
"maxDataPoints": 20,
"options": {
@@ -391,10 +309,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -460,8 +377,8 @@
"gridPos": {
"h": 6,
"w": 4,
"x": 0,
"y": 7
"x": 16,
"y": 1
},
"id": 22,
"maxDataPoints": 20,
@@ -470,10 +387,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -539,8 +455,8 @@
"gridPos": {
"h": 6,
"w": 4,
"x": 4,
"y": 7
"x": 20,
"y": 1
},
"id": 23,
"maxDataPoints": 20,
@@ -549,10 +465,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -593,7 +508,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 13
"y": 7
},
"id": 17,
"panels": [],
@@ -630,9 +545,9 @@
},
"gridPos": {
"h": 6,
"w": 5,
"w": 4,
"x": 0,
"y": 14
"y": 8
},
"id": 18,
"maxDataPoints": 20,
@@ -641,10 +556,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -709,9 +623,9 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 5,
"y": 14
"w": 4,
"x": 4,
"y": 8
},
"id": 19,
"maxDataPoints": 20,
@@ -720,10 +634,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -788,9 +701,9 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 10,
"y": 14
"w": 4,
"x": 8,
"y": 8
},
"id": 20,
"maxDataPoints": 20,
@@ -799,10 +712,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -867,9 +779,9 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 15,
"y": 14
"w": 4,
"x": 12,
"y": 8
},
"id": 21,
"maxDataPoints": 20,
@@ -878,10 +790,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"barShape": "rounded",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -922,7 +833,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 20
"y": 14
},
"id": 24,
"panels": [],
@@ -963,9 +874,9 @@
},
"gridPos": {
"h": 6,
"w": 6,
"w": 4,
"x": 0,
"y": 21
"y": 15
},
"id": 25,
"maxDataPoints": 20,
@@ -974,10 +885,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1042,9 +952,9 @@
},
"gridPos": {
"h": 6,
"w": 6,
"x": 6,
"y": 21
"w": 4,
"x": 4,
"y": 15
},
"id": 26,
"maxDataPoints": 20,
@@ -1053,10 +963,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1121,9 +1030,9 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 12,
"y": 21
"w": 4,
"x": 8,
"y": 15
},
"id": 29,
"maxDataPoints": 20,
@@ -1132,10 +1041,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1199,10 +1107,10 @@
"overrides": []
},
"gridPos": {
"h": 7,
"w": 6,
"x": 0,
"y": 27
"h": 6,
"w": 4,
"x": 12,
"y": 15
},
"id": 30,
"maxDataPoints": 20,
@@ -1211,10 +1119,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1278,10 +1185,10 @@
"overrides": []
},
"gridPos": {
"h": 7,
"w": 6,
"x": 6,
"y": 27
"h": 6,
"w": 4,
"x": 16,
"y": 15
},
"id": 28,
"maxDataPoints": 20,
@@ -1290,10 +1197,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1330,7 +1236,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 34
"y": 21
},
"id": 31,
"panels": [],
@@ -1377,7 +1283,7 @@
"h": 10,
"w": 7,
"x": 0,
"y": 35
"y": 22
},
"id": 32,
"maxDataPoints": 20,
@@ -1386,10 +1292,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1460,7 +1365,7 @@
"h": 10,
"w": 7,
"x": 7,
"y": 35
"y": 22
},
"id": 34,
"maxDataPoints": 20,
@@ -1469,10 +1374,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1543,7 +1447,7 @@
"h": 10,
"w": 6,
"x": 14,
"y": 35
"y": 22
},
"id": 33,
"maxDataPoints": 20,
@@ -1552,10 +1456,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1592,7 +1495,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 45
"y": 32
},
"id": 6,
"panels": [],
@@ -1633,20 +1536,20 @@
"h": 6,
"w": 24,
"x": 0,
"y": 46
"y": 33
},
"id": 9,
"maxDataPoints": 20,
"options": {
"barWidth": 12,
"barWidthFactor": 0.4,
"barShape": "rounded",
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1661,8 +1564,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1717,7 +1619,7 @@
"h": 6,
"w": 24,
"x": 0,
"y": 52
"y": 39
},
"id": 11,
"maxDataPoints": 20,
@@ -1727,10 +1629,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1745,8 +1646,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1773,7 +1673,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 58
"y": 45
},
"id": 12,
"panels": [],
@@ -1815,7 +1715,7 @@
"h": 7,
"w": 4,
"x": 0,
"y": 59
"y": 46
},
"id": 13,
"maxDataPoints": 20,
@@ -1825,10 +1725,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1843,8 +1742,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1900,7 +1798,7 @@
"h": 7,
"w": 5,
"x": 4,
"y": 59
"y": 46
},
"id": 14,
"maxDataPoints": 20,
@@ -1910,10 +1808,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1928,8 +1825,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1984,7 +1880,7 @@
"h": 7,
"w": 5,
"x": 9,
"y": 59
"y": 46
},
"id": 15,
"maxDataPoints": 20,
@@ -1994,10 +1890,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2012,8 +1907,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2068,7 +1962,7 @@
"h": 7,
"w": 6,
"x": 14,
"y": 59
"y": 46
},
"id": 16,
"maxDataPoints": 20,
@@ -2078,10 +1972,9 @@
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"barShape": "rounded",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -2096,8 +1989,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2124,7 +2016,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 66
"y": 53
},
"id": 35,
"panels": [],
@@ -2155,10 +2047,10 @@
"overrides": []
},
"gridPos": {
"h": 8,
"w": 6,
"h": 5,
"w": 12,
"x": 0,
"y": 67
"y": 54
},
"id": 36,
"options": {
@@ -2166,10 +2058,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2223,10 +2114,10 @@
"overrides": []
},
"gridPos": {
"h": 8,
"w": 6,
"x": 6,
"y": 67
"h": 5,
"w": 12,
"x": 12,
"y": 54
},
"id": 37,
"options": {
@@ -2234,10 +2125,9 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"barShape": "flat",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2279,4 +2169,4 @@
"title": "Panel tests - Gauge (new)",
"uid": "panel-tests-gauge-new",
"weekStart": ""
}
}
apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json
Vendored
+2 -4
View File
@@ -955,9 +955,7 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1162,4 +1160,4 @@
"title": "Panel tests - Old gauge to new",
"uid": "panel-tests-old-gauge-to-new",
"weekStart": ""
}
}
apps/provisioning/pkg/auth/access_checker.go
+22
View File
@@ -0,0 +1,22 @@
package auth
import (
"context"
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana/pkg/apimachinery/identity"
)
//go:generate mockery --name AccessChecker --structname MockAccessChecker --inpackage --filename access_checker_mock.go --with-expecter
// AccessChecker provides access control checks with optional role-based fallback.
type AccessChecker interface {
// Check performs an access check and returns nil if allowed, or an appropriate
// API error if denied. If req.Namespace is empty, it will be filled from the
// identity's namespace.
Check(ctx context.Context, req authlib.CheckRequest, folder string) error
// WithFallbackRole returns an AccessChecker configured with the specified fallback role.
// Whether the fallback is actually applied depends on the implementation.
WithFallbackRole(role identity.RoleType) AccessChecker
}
apps/provisioning/pkg/auth/access_checker_mock.go
+135
View File
@@ -0,0 +1,135 @@
// Code generated by mockery v2.53.4. DO NOT EDIT.
package auth
import (
context "context"
identity "github.com/grafana/grafana/pkg/apimachinery/identity"
mock "github.com/stretchr/testify/mock"
types "github.com/grafana/authlib/types"
)
// MockAccessChecker is an autogenerated mock type for the AccessChecker type
type MockAccessChecker struct {
mock.Mock
}
type MockAccessChecker_Expecter struct {
mock *mock.Mock
}
func (_m *MockAccessChecker) EXPECT() *MockAccessChecker_Expecter {
return &MockAccessChecker_Expecter{mock: &_m.Mock}
}
// Check provides a mock function with given fields: ctx, req, folder
func (_m *MockAccessChecker) Check(ctx context.Context, req types.CheckRequest, folder string) error {
ret := _m.Called(ctx, req, folder)
if len(ret) == 0 {
panic("no return value specified for Check")
}
var r0 error
if rf, ok := ret.Get(0).(func(context.Context, types.CheckRequest, string) error); ok {
r0 = rf(ctx, req, folder)
} else {
r0 = ret.Error(0)
}
return r0
}
// MockAccessChecker_Check_Call is a *mock.Call that shadows Run/Return methods with type explicit version for method 'Check'
type MockAccessChecker_Check_Call struct {
*mock.Call
}
// Check is a helper method to define mock.On call
// - ctx context.Context
// - req types.CheckRequest
// - folder string
func (_e *MockAccessChecker_Expecter) Check(ctx interface{}, req interface{}, folder interface{}) *MockAccessChecker_Check_Call {
return &MockAccessChecker_Check_Call{Call: _e.mock.On("Check", ctx, req, folder)}
}
func (_c *MockAccessChecker_Check_Call) Run(run func(ctx context.Context, req types.CheckRequest, folder string)) *MockAccessChecker_Check_Call {
_c.Call.Run(func(args mock.Arguments) {
run(args[0].(context.Context), args[1].(types.CheckRequest), args[2].(string))
})
return _c
}
func (_c *MockAccessChecker_Check_Call) Return(_a0 error) *MockAccessChecker_Check_Call {
_c.Call.Return(_a0)
return _c
}
func (_c *MockAccessChecker_Check_Call) RunAndReturn(run func(context.Context, types.CheckRequest, string) error) *MockAccessChecker_Check_Call {
_c.Call.Return(run)
return _c
}
// WithFallbackRole provides a mock function with given fields: role
func (_m *MockAccessChecker) WithFallbackRole(role identity.RoleType) AccessChecker {
ret := _m.Called(role)
if len(ret) == 0 {
panic("no return value specified for WithFallbackRole")
}
var r0 AccessChecker
if rf, ok := ret.Get(0).(func(identity.RoleType) AccessChecker); ok {
r0 = rf(role)
} else {
if ret.Get(0) != nil {
r0 = ret.Get(0).(AccessChecker)
}
}
return r0
}
// MockAccessChecker_WithFallbackRole_Call is a *mock.Call that shadows Run/Return methods with type explicit version for method 'WithFallbackRole'
type MockAccessChecker_WithFallbackRole_Call struct {
*mock.Call
}
// WithFallbackRole is a helper method to define mock.On call
// - role identity.RoleType
func (_e *MockAccessChecker_Expecter) WithFallbackRole(role interface{}) *MockAccessChecker_WithFallbackRole_Call {
return &MockAccessChecker_WithFallbackRole_Call{Call: _e.mock.On("WithFallbackRole", role)}
}
func (_c *MockAccessChecker_WithFallbackRole_Call) Run(run func(role identity.RoleType)) *MockAccessChecker_WithFallbackRole_Call {
_c.Call.Run(func(args mock.Arguments) {
run(args[0].(identity.RoleType))
})
return _c
}
func (_c *MockAccessChecker_WithFallbackRole_Call) Return(_a0 AccessChecker) *MockAccessChecker_WithFallbackRole_Call {
_c.Call.Return(_a0)
return _c
}
func (_c *MockAccessChecker_WithFallbackRole_Call) RunAndReturn(run func(identity.RoleType) AccessChecker) *MockAccessChecker_WithFallbackRole_Call {
_c.Call.Return(run)
return _c
}
// NewMockAccessChecker creates a new instance of MockAccessChecker. It also registers a testing interface on the mock and a cleanup function to assert the mocks expectations.
// The first argument is typically a *testing.T value.
func NewMockAccessChecker(t interface {
mock.TestingT
Cleanup(func())
}) *MockAccessChecker {
mock := &MockAccessChecker{}
mock.Mock.Test(t)
t.Cleanup(func() { mock.AssertExpectations(t) })
return mock
}
apps/provisioning/pkg/auth/round_tripper.go
+46 -14
View File
@@ -1,3 +1,4 @@
// Package auth provides authentication utilities for the provisioning API.
package auth
import (
@@ -6,7 +7,6 @@ import (
"net/http"
"github.com/grafana/authlib/authn"
"github.com/grafana/grafana/apps/provisioning/pkg/apis/provisioning/v0alpha1"
utilnet "k8s.io/apimachinery/pkg/util/net"
)
@@ -15,29 +15,61 @@ type tokenExchanger interface {
Exchange(ctx context.Context, req authn.TokenExchangeRequest) (*authn.TokenExchangeResponse, error)
}
// RoundTripper injects an exchanged access token for the provisioning API into outgoing requests.
type RoundTripper struct {
client tokenExchanger
transport http.RoundTripper
audience string
// RoundTripperOption configures optional behavior for the RoundTripper.
type RoundTripperOption func(*RoundTripper)
// ExtraAudience appends an additional audience to the token exchange request.
//
// This is primarily used by operators connecting to the multitenant aggregator,
// where the token must include both the target API server's audience (e.g., dashboards,
// folders) and the provisioning group audience. The provisioning group audience is
// required so that the token passes the enforceManagerProperties check, which prevents
// unauthorized updates to provisioned resources.
//
// Example:
//
// authrt.NewRoundTripper(client, rt, "dashboards.grafana.app", authrt.ExtraAudience("provisioning.grafana.app"))
func ExtraAudience(audience string) RoundTripperOption {
return func(rt *RoundTripper) {
rt.extraAudience = audience
}
}
// NewRoundTripper constructs a RoundTripper that exchanges the provided token per request
// and forwards the request to the provided base transport.
func NewRoundTripper(tokenExchangeClient tokenExchanger, base http.RoundTripper, audience string) *RoundTripper {
return &RoundTripper{
// RoundTripper is an http.RoundTripper that performs token exchange before each request.
// It exchanges the service's credentials for an access token scoped to the configured
// audience(s), then injects that token into the outgoing request's X-Access-Token header.
type RoundTripper struct {
client tokenExchanger
transport http.RoundTripper
audience string
extraAudience string
}
// NewRoundTripper creates a RoundTripper that exchanges tokens for each outgoing request.
//
// Parameters:
// - tokenExchangeClient: the client used to exchange credentials for access tokens
// - base: the underlying transport to delegate requests to after token injection
// - audience: the primary audience for the token (typically the target API server's group)
// - opts: optional configuration (e.g., ExtraAudience to include additional audiences)
func NewRoundTripper(tokenExchangeClient tokenExchanger, base http.RoundTripper, audience string, opts ...RoundTripperOption) *RoundTripper {
rt := &RoundTripper{
client: tokenExchangeClient,
transport: base,
audience: audience,
}
for _, opt := range opts {
opt(rt)
}
return rt
}
// RoundTrip exchanges credentials for an access token and injects it into the request.
// The token is scoped to all configured audiences and the wildcard namespace ("*").
func (t *RoundTripper) RoundTrip(req *http.Request) (*http.Response, error) {
// when we want to write resources with the provisioning API, the audience needs to include provisioning
// so that it passes the check in enforceManagerProperties, which prevents others from updating provisioned resources
audiences := []string{t.audience}
if t.audience != v0alpha1.GROUP {
audiences = append(audiences, v0alpha1.GROUP)
if t.extraAudience != "" && t.extraAudience != t.audience {
audiences = append(audiences, t.extraAudience)
}
tokenResponse, err := t.client.Exchange(req.Context(), authn.TokenExchangeRequest{
apps/provisioning/pkg/auth/round_tripper_test.go
+20 -3
View File
@@ -71,16 +71,29 @@ func TestRoundTripper_AudiencesAndNamespace(t *testing.T) {
tests := []struct {
name string
audience string
extraAudience string
wantAudiences []string
}{
{
name: "adds group when custom audience",
name: "uses only provided audience by default",
audience: "example-audience",
wantAudiences: []string{"example-audience"},
},
{
name: "uses only group audience by default",
audience: v0alpha1.GROUP,
wantAudiences: []string{v0alpha1.GROUP},
},
{
name: "extra audience adds provisioning group",
audience: "example-audience",
extraAudience: v0alpha1.GROUP,
wantAudiences: []string{"example-audience", v0alpha1.GROUP},
},
{
name: "no duplicate when group audience",
name: "extra audience no duplicate when same as primary",
audience: v0alpha1.GROUP,
extraAudience: v0alpha1.GROUP,
wantAudiences: []string{v0alpha1.GROUP},
},
}
@@ -88,11 +101,15 @@ func TestRoundTripper_AudiencesAndNamespace(t *testing.T) {
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
fx := &fakeExchanger{resp: &authn.TokenExchangeResponse{Token: "abc123"}}
var opts []RoundTripperOption
if tt.extraAudience != "" {
opts = append(opts, ExtraAudience(tt.extraAudience))
}
tr := NewRoundTripper(fx, roundTripperFunc(func(_ *http.Request) (*http.Response, error) {
rr := httptest.NewRecorder()
rr.WriteHeader(http.StatusOK)
return rr.Result(), nil
}), tt.audience)
}), tt.audience, opts...)
req, _ := http.NewRequestWithContext(context.Background(), http.MethodGet, "http://example", nil)
resp, err := tr.RoundTrip(req)
apps/provisioning/pkg/auth/session_access_checker.go
+153
View File
@@ -0,0 +1,153 @@
package auth
import (
"context"
"fmt"
"strings"
apierrors "k8s.io/apimachinery/pkg/api/errors"
"k8s.io/apimachinery/pkg/runtime/schema"
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana-app-sdk/logging"
"github.com/grafana/grafana/pkg/apimachinery/identity"
)
// sessionAccessChecker implements AccessChecker using Grafana session identity.
type sessionAccessChecker struct {
inner authlib.AccessChecker
fallbackRole identity.RoleType
}
// NewSessionAccessChecker creates an AccessChecker that gets identity from Grafana
// sessions via GetRequester(ctx). Supports optional role-based fallback via
// WithFallbackRole for backwards compatibility.
func NewSessionAccessChecker(inner authlib.AccessChecker) AccessChecker {
return &sessionAccessChecker{
inner: inner,
fallbackRole: "",
}
}
// WithFallbackRole returns a new AccessChecker with the specified fallback role.
func (c *sessionAccessChecker) WithFallbackRole(role identity.RoleType) AccessChecker {
return &sessionAccessChecker{
inner: c.inner,
fallbackRole: role,
}
}
// Check performs an access check with optional role-based fallback.
// Returns nil if access is allowed, or an appropriate API error if denied.
func (c *sessionAccessChecker) Check(ctx context.Context, req authlib.CheckRequest, folder string) error {
logger := logging.FromContext(ctx).With("logger", "sessionAccessChecker")
// Get identity from Grafana session
requester, err := identity.GetRequester(ctx)
if err != nil {
logger.Debug("failed to get requester",
"resource", req.Resource,
"verb", req.Verb,
"error", err.Error(),
)
return apierrors.NewUnauthorized(fmt.Sprintf("failed to get requester: %v", err))
}
logger.Debug("checking access",
"identityType", requester.GetIdentityType(),
"orgRole", requester.GetOrgRole(),
"namespace", requester.GetNamespace(),
"resource", req.Resource,
"verb", req.Verb,
"group", req.Group,
"name", req.Name,
"folder", folder,
"fallbackRole", c.fallbackRole,
)
// Fill in namespace from identity if not provided
if req.Namespace == "" {
req.Namespace = requester.GetNamespace()
}
// Perform the access check
rsp, err := c.inner.Check(ctx, requester, req, folder)
// Build the GroupResource for error messages
gr := schema.GroupResource{Group: req.Group, Resource: req.Resource}
// No fallback configured, return result directly
if c.fallbackRole == "" {
if err != nil {
logger.Debug("access check error (no fallback)",
"resource", req.Resource,
"verb", req.Verb,
"error", err.Error(),
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("%s.%s is forbidden: %w", req.Resource, req.Group, err))
}
if !rsp.Allowed {
logger.Debug("access check denied (no fallback)",
"resource", req.Resource,
"verb", req.Verb,
"group", req.Group,
"allowed", rsp.Allowed,
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("permission denied"))
}
logger.Debug("access allowed",
"resource", req.Resource,
"verb", req.Verb,
)
return nil
}
// Fallback is configured - apply fallback logic
if err != nil {
if requester.GetOrgRole().Includes(c.fallbackRole) {
logger.Debug("access allowed via role fallback (after error)",
"resource", req.Resource,
"verb", req.Verb,
"fallbackRole", c.fallbackRole,
"orgRole", requester.GetOrgRole(),
)
return nil // Fallback succeeded
}
logger.Debug("access check error (fallback failed)",
"resource", req.Resource,
"verb", req.Verb,
"error", err.Error(),
"fallbackRole", c.fallbackRole,
"orgRole", requester.GetOrgRole(),
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("%s.%s is forbidden: %w", req.Resource, req.Group, err))
}
if rsp.Allowed {
logger.Debug("access allowed",
"resource", req.Resource,
"verb", req.Verb,
)
return nil
}
// Fall back to role for backwards compatibility
if requester.GetOrgRole().Includes(c.fallbackRole) {
logger.Debug("access allowed via role fallback",
"resource", req.Resource,
"verb", req.Verb,
"fallbackRole", c.fallbackRole,
"orgRole", requester.GetOrgRole(),
)
return nil // Fallback succeeded
}
logger.Debug("access denied (fallback role not met)",
"resource", req.Resource,
"verb", req.Verb,
"group", req.Group,
"fallbackRole", c.fallbackRole,
"orgRole", requester.GetOrgRole(),
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("%s role is required", strings.ToLower(string(c.fallbackRole))))
}
apps/provisioning/pkg/auth/session_access_checker_test.go
+244
View File
@@ -0,0 +1,244 @@
package auth
import (
"context"
"errors"
"testing"
apierrors "k8s.io/apimachinery/pkg/api/errors"
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana/pkg/apimachinery/identity"
"github.com/grafana/grafana/pkg/services/user"
"github.com/stretchr/testify/assert"
"github.com/stretchr/testify/require"
)
// mockRequester implements identity.Requester for testing.
type mockRequester struct {
identity.Requester
orgRole identity.RoleType
identityType authlib.IdentityType
namespace string
}
func (m *mockRequester) GetOrgRole() identity.RoleType {
return m.orgRole
}
func (m *mockRequester) GetIdentityType() authlib.IdentityType {
return m.identityType
}
func (m *mockRequester) GetNamespace() string {
return m.namespace
}
func TestSessionAccessChecker_Check(t *testing.T) {
ctx := context.Background()
req := authlib.CheckRequest{
Verb: "get",
Group: "provisioning.grafana.app",
Resource: "repositories",
Name: "test-repo",
Namespace: "default",
}
tests := []struct {
name string
fallbackRole identity.RoleType
innerResponse authlib.CheckResponse
innerErr error
requester *mockRequester
expectAllow bool
}{
{
name: "allowed by checker",
fallbackRole: identity.RoleAdmin,
innerResponse: authlib.CheckResponse{Allowed: true},
requester: &mockRequester{orgRole: identity.RoleViewer, identityType: authlib.TypeUser},
expectAllow: true,
},
{
name: "denied by checker, fallback to admin role succeeds",
fallbackRole: identity.RoleAdmin,
innerResponse: authlib.CheckResponse{Allowed: false},
requester: &mockRequester{orgRole: identity.RoleAdmin, identityType: authlib.TypeUser},
expectAllow: true,
},
{
name: "denied by checker, fallback to admin role fails for viewer",
fallbackRole: identity.RoleAdmin,
innerResponse: authlib.CheckResponse{Allowed: false},
requester: &mockRequester{orgRole: identity.RoleViewer, identityType: authlib.TypeUser},
expectAllow: false,
},
{
name: "error from checker, fallback to admin role succeeds",
fallbackRole: identity.RoleAdmin,
innerErr: errors.New("access check failed"),
requester: &mockRequester{orgRole: identity.RoleAdmin, identityType: authlib.TypeUser},
expectAllow: true,
},
{
name: "error from checker, fallback fails for viewer",
fallbackRole: identity.RoleAdmin,
innerErr: errors.New("access check failed"),
requester: &mockRequester{orgRole: identity.RoleViewer, identityType: authlib.TypeUser},
expectAllow: false,
},
{
name: "denied, editor fallback succeeds for editor",
fallbackRole: identity.RoleEditor,
innerResponse: authlib.CheckResponse{Allowed: false},
requester: &mockRequester{orgRole: identity.RoleEditor, identityType: authlib.TypeUser},
expectAllow: true,
},
{
name: "denied, editor fallback fails for viewer",
fallbackRole: identity.RoleEditor,
innerResponse: authlib.CheckResponse{Allowed: false},
requester: &mockRequester{orgRole: identity.RoleViewer, identityType: authlib.TypeUser},
expectAllow: false,
},
{
name: "no fallback configured, denied stays denied",
fallbackRole: "", // no fallback
innerResponse: authlib.CheckResponse{Allowed: false},
requester: &mockRequester{orgRole: identity.RoleAdmin, identityType: authlib.TypeUser},
expectAllow: false,
},
}
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
mock := &mockInnerAccessChecker{
response: tt.innerResponse,
err: tt.innerErr,
}
checker := NewSessionAccessChecker(mock)
if tt.fallbackRole != "" {
checker = checker.WithFallbackRole(tt.fallbackRole)
}
// Add requester to context
testCtx := identity.WithRequester(ctx, tt.requester)
err := checker.Check(testCtx, req, "")
if tt.expectAllow {
require.NoError(t, err)
} else {
require.Error(t, err)
assert.True(t, apierrors.IsForbidden(err), "expected Forbidden error, got: %v", err)
}
})
}
}
func TestSessionAccessChecker_NoRequester(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: true},
}
checker := NewSessionAccessChecker(mock)
err := checker.Check(context.Background(), authlib.CheckRequest{}, "")
require.Error(t, err)
assert.True(t, apierrors.IsUnauthorized(err), "expected Unauthorized error")
}
func TestSessionAccessChecker_WithFallbackRole_ImmutableOriginal(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: false},
}
original := NewSessionAccessChecker(mock)
withAdmin := original.WithFallbackRole(identity.RoleAdmin)
withEditor := original.WithFallbackRole(identity.RoleEditor)
ctx := identity.WithRequester(context.Background(), &mockRequester{
orgRole: identity.RoleEditor,
identityType: authlib.TypeUser,
})
req := authlib.CheckRequest{}
// Original should deny (no fallback)
err := original.Check(ctx, req, "")
require.Error(t, err, "original should deny without fallback")
// WithAdmin should deny for editor
err = withAdmin.Check(ctx, req, "")
require.Error(t, err, "admin fallback should deny for editor")
// WithEditor should allow for editor
err = withEditor.Check(ctx, req, "")
require.NoError(t, err, "editor fallback should allow for editor")
}
func TestSessionAccessChecker_WithFallbackRole_ChainedCalls(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: false},
}
// Ensure chained WithFallbackRole calls work correctly
checker := NewSessionAccessChecker(mock).
WithFallbackRole(identity.RoleAdmin).
WithFallbackRole(identity.RoleEditor) // This should override admin
ctx := identity.WithRequester(context.Background(), &mockRequester{
orgRole: identity.RoleEditor,
identityType: authlib.TypeUser,
})
err := checker.Check(ctx, authlib.CheckRequest{}, "")
require.NoError(t, err, "last fallback (editor) should be used")
}
func TestSessionAccessChecker_RealSignedInUser(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: false},
}
checker := NewSessionAccessChecker(mock).WithFallbackRole(identity.RoleAdmin)
// Use a real SignedInUser
signedInUser := &user.SignedInUser{
UserID: 1,
OrgID: 1,
OrgRole: identity.RoleAdmin,
}
ctx := identity.WithRequester(context.Background(), signedInUser)
err := checker.Check(ctx, authlib.CheckRequest{}, "")
require.NoError(t, err, "admin user should be allowed via fallback")
}
func TestSessionAccessChecker_FillsNamespace(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: true},
}
checker := NewSessionAccessChecker(mock)
ctx := identity.WithRequester(context.Background(), &mockRequester{
orgRole: identity.RoleAdmin,
identityType: authlib.TypeUser,
namespace: "org-123",
})
// Request without namespace
req := authlib.CheckRequest{
Verb: "get",
Group: "provisioning.grafana.app",
Resource: "repositories",
Name: "test-repo",
// Namespace intentionally empty
}
err := checker.Check(ctx, req, "")
require.NoError(t, err)
}
apps/provisioning/pkg/auth/token_access_checker.go
+92
View File
@@ -0,0 +1,92 @@
package auth
import (
"context"
"fmt"
apierrors "k8s.io/apimachinery/pkg/api/errors"
"k8s.io/apimachinery/pkg/runtime/schema"
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana-app-sdk/logging"
"github.com/grafana/grafana/pkg/apimachinery/identity"
)
// tokenAccessChecker implements AccessChecker using access tokens from context.
type tokenAccessChecker struct {
inner authlib.AccessChecker
}
// NewTokenAccessChecker creates an AccessChecker that gets identity from access tokens
// via AuthInfoFrom(ctx). Role-based fallback is not supported.
func NewTokenAccessChecker(inner authlib.AccessChecker) AccessChecker {
return &tokenAccessChecker{inner: inner}
}
// WithFallbackRole returns the same checker since fallback is not supported.
func (c *tokenAccessChecker) WithFallbackRole(_ identity.RoleType) AccessChecker {
return c
}
// Check performs an access check using AuthInfo from context.
// Returns nil if access is allowed, or an appropriate API error if denied.
func (c *tokenAccessChecker) Check(ctx context.Context, req authlib.CheckRequest, folder string) error {
logger := logging.FromContext(ctx).With("logger", "tokenAccessChecker")
// Get identity from access token in context
id, ok := authlib.AuthInfoFrom(ctx)
if !ok {
logger.Debug("no auth info in context",
"resource", req.Resource,
"verb", req.Verb,
"namespace", req.Namespace,
)
return apierrors.NewUnauthorized("no auth info in context")
}
logger.Debug("checking access",
"identityType", id.GetIdentityType(),
"namespace", id.GetNamespace(),
"resource", req.Resource,
"verb", req.Verb,
"group", req.Group,
"name", req.Name,
"folder", folder,
)
// Fill in namespace from identity if not provided
if req.Namespace == "" {
req.Namespace = id.GetNamespace()
}
// Perform the access check
rsp, err := c.inner.Check(ctx, id, req, folder)
// Build the GroupResource for error messages
gr := schema.GroupResource{Group: req.Group, Resource: req.Resource}
if err != nil {
logger.Debug("access check error",
"resource", req.Resource,
"verb", req.Verb,
"error", err.Error(),
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("%s.%s is forbidden: %w", req.Resource, req.Group, err))
}
if !rsp.Allowed {
logger.Debug("access check denied",
"resource", req.Resource,
"verb", req.Verb,
"group", req.Group,
"identityType", id.GetIdentityType(),
"allowed", rsp.Allowed,
)
return apierrors.NewForbidden(gr, req.Name, fmt.Errorf("permission denied"))
}
logger.Debug("access allowed",
"resource", req.Resource,
"verb", req.Verb,
)
return nil
}
apps/provisioning/pkg/auth/token_access_checker_test.go
+137
View File
@@ -0,0 +1,137 @@
package auth
import (
"context"
"errors"
"testing"
apierrors "k8s.io/apimachinery/pkg/api/errors"
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana/pkg/apimachinery/identity"
"github.com/stretchr/testify/assert"
"github.com/stretchr/testify/require"
)
func TestTokenAccessChecker_Check(t *testing.T) {
req := authlib.CheckRequest{
Verb: "get",
Group: "provisioning.grafana.app",
Resource: "repositories",
Name: "test-repo",
Namespace: "default",
}
tests := []struct {
name string
innerResponse authlib.CheckResponse
innerErr error
authInfo *identity.StaticRequester
expectAllow bool
}{
{
name: "allowed by checker",
innerResponse: authlib.CheckResponse{Allowed: true},
authInfo: &identity.StaticRequester{Type: authlib.TypeUser},
expectAllow: true,
},
{
name: "denied by checker",
innerResponse: authlib.CheckResponse{Allowed: false},
authInfo: &identity.StaticRequester{Type: authlib.TypeUser},
expectAllow: false,
},
{
name: "error from checker",
innerErr: errors.New("access check failed"),
authInfo: &identity.StaticRequester{Type: authlib.TypeUser},
expectAllow: false,
},
}
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
mock := &mockInnerAccessChecker{
response: tt.innerResponse,
err: tt.innerErr,
}
checker := NewTokenAccessChecker(mock)
// Add auth info to context
testCtx := authlib.WithAuthInfo(context.Background(), tt.authInfo)
err := checker.Check(testCtx, req, "")
if tt.expectAllow {
require.NoError(t, err)
} else {
require.Error(t, err)
assert.True(t, apierrors.IsForbidden(err), "expected Forbidden error, got: %v", err)
}
})
}
}
func TestTokenAccessChecker_NoAuthInfo(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: true},
}
checker := NewTokenAccessChecker(mock)
err := checker.Check(context.Background(), authlib.CheckRequest{}, "")
require.Error(t, err)
assert.True(t, apierrors.IsUnauthorized(err), "expected Unauthorized error")
}
func TestTokenAccessChecker_WithFallbackRole_IsNoOp(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: false},
}
checker := NewTokenAccessChecker(mock)
checkerWithFallback := checker.WithFallbackRole(identity.RoleAdmin)
// They should be the same instance
assert.Same(t, checker, checkerWithFallback, "WithFallbackRole should return same instance")
}
func TestTokenAccessChecker_FillsNamespace(t *testing.T) {
mock := &mockInnerAccessChecker{
response: authlib.CheckResponse{Allowed: true},
}
checker := NewTokenAccessChecker(mock)
ctx := authlib.WithAuthInfo(context.Background(), &identity.StaticRequester{
Type: authlib.TypeUser,
Namespace: "org-123",
})
// Request without namespace
req := authlib.CheckRequest{
Verb: "get",
Group: "provisioning.grafana.app",
Resource: "repositories",
Name: "test-repo",
// Namespace intentionally empty
}
err := checker.Check(ctx, req, "")
require.NoError(t, err)
}
// mockInnerAccessChecker implements authlib.AccessChecker for testing.
type mockInnerAccessChecker struct {
response authlib.CheckResponse
err error
}
func (m *mockInnerAccessChecker) Check(_ context.Context, _ authlib.AuthInfo, _ authlib.CheckRequest, _ string) (authlib.CheckResponse, error) {
return m.response, m.err
}
func (m *mockInnerAccessChecker) Compile(_ context.Context, _ authlib.AuthInfo, _ authlib.ListRequest) (authlib.ItemChecker, authlib.Zookie, error) {
return nil, nil, nil
}
apps/provisioning/pkg/repository/tester.go
+7 -1
View File
@@ -23,7 +23,13 @@ func NewSimpleRepositoryTester(validator RepositoryValidator) SimpleRepositoryTe
// TestRepository validates the repository and then runs a health check
func (t *SimpleRepositoryTester) TestRepository(ctx context.Context, repo Repository) (*provisioning.TestResults, error) {
errors := t.validator.ValidateRepository(repo)
// Determine if this is a CREATE or UPDATE operation
// If the repository has been observed by the controller (ObservedGeneration > 0),
// it's an existing repository and we should treat it as UPDATE
cfg := repo.Config()
isCreate := cfg.Status.ObservedGeneration == 0
errors := t.validator.ValidateRepository(repo, isCreate)
if len(errors) > 0 {
rsp := &provisioning.TestResults{
Code: http.StatusUnprocessableEntity, // Invalid
apps/provisioning/pkg/repository/validator.go
+4 -2
View File
@@ -32,7 +32,9 @@ func NewValidator(minSyncInterval time.Duration, allowedTargets []provisioning.S
}
// ValidateRepository solely does configuration checks on the repository object. It does not run a health check or compare against existing repositories.
func (v *RepositoryValidator) ValidateRepository(repo Repository) field.ErrorList {
// isCreate indicates whether this is a CREATE operation (true) or UPDATE operation (false).
// When isCreate is false, allowedTargets validation is skipped to allow existing repositories to continue working.
func (v *RepositoryValidator) ValidateRepository(repo Repository, isCreate bool) field.ErrorList {
list := repo.Validate()
cfg := repo.Config()
@@ -44,7 +46,7 @@ func (v *RepositoryValidator) ValidateRepository(repo Repository) field.ErrorLis
if cfg.Spec.Sync.Target == "" {
list = append(list, field.Required(field.NewPath("spec", "sync", "target"),
"The target type is required when sync is enabled"))
} else if !slices.Contains(v.allowedTargets, cfg.Spec.Sync.Target) {
} else if isCreate && !slices.Contains(v.allowedTargets, cfg.Spec.Sync.Target) {
list = append(list,
field.Invalid(
field.NewPath("spec", "target"),
apps/provisioning/pkg/repository/validator_test.go
+2 -1
View File
@@ -303,7 +303,8 @@ func TestValidateRepository(t *testing.T) {
validator := NewValidator(10*time.Second, []provisioning.SyncTargetType{provisioning.SyncTargetTypeFolder}, false)
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
errors := validator.ValidateRepository(tt.repository)
// Tests validate new configurations, so always pass isCreate=true
errors := validator.ValidateRepository(tt.repository, true)
require.Len(t, errors, tt.expectedErrs)
if tt.validateError != nil {
tt.validateError(t, errors)
conf/defaults.ini
+1 -1
View File
@@ -2264,7 +2264,7 @@ fail_tests_on_console = true
# List of targets that can be controlled by a repository, separated by |.
# Instance means the whole grafana instance will be controlled by a repository.
# Folder limits it to a folder within the grafana instance.
allowed_targets = instance|folder
allowed_targets = folder
# Whether image rendering is allowed for dashboard previews.
# Requires image rendering service to be configured.
devenv/dev-dashboards/panel-gauge/gauge_tests_new.json
+114 -221
View File
@@ -71,13 +71,12 @@
"id": 1,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -148,13 +147,12 @@
"id": 4,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": false,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -225,13 +223,12 @@
"id": 3,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -299,93 +296,15 @@
"x": 12,
"y": 1
},
"id": 5,
"maxDataPoints": 20,
"options": {
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
},
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
"fields": "",
"values": false
},
"segmentCount": 1,
"segmentSpacing": 0.3,
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
{
"alias": "1",
"datasource": {
"type": "grafana-testdata-datasource"
},
"max": 100,
"min": 1,
"noise": 22,
"refId": "A",
"scenarioId": "random_walk",
"spread": 22,
"startValue": 1
}
],
"title": "Spotlight",
"type": "radialbar"
},
{
"datasource": {
"type": "grafana-testdata-datasource"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"max": 100,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": 0
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 4,
"x": 16,
"y": 1
},
"id": 8,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -450,19 +369,18 @@
"gridPos": {
"h": 6,
"w": 4,
"x": 0,
"y": 7
"x": 16,
"y": 1
},
"id": 22,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -527,19 +445,18 @@
"gridPos": {
"h": 6,
"w": 4,
"x": 4,
"y": 7
"x": 20,
"y": 1
},
"id": 23,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": false,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -579,7 +496,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 13
"y": 7
},
"id": 17,
"panels": [],
@@ -616,20 +533,19 @@
},
"gridPos": {
"h": 6,
"w": 5,
"w": 4,
"x": 0,
"y": 14
"y": 8
},
"id": 18,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.1,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -693,20 +609,19 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 5,
"y": 14
"w": 4,
"x": 4,
"y": 8
},
"id": 19,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.32,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -770,20 +685,19 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 10,
"y": 14
"w": 4,
"x": 8,
"y": 8
},
"id": 20,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.57,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -847,20 +761,19 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 15,
"y": 14
"w": 4,
"x": 12,
"y": 8
},
"id": 21,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidthFactor": 0.8,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": false,
"rounded": true,
"spotlight": true
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -900,7 +813,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 20
"y": 14
},
"id": 24,
"panels": [],
@@ -941,20 +854,19 @@
},
"gridPos": {
"h": 6,
"w": 6,
"w": 4,
"x": 0,
"y": 21
"y": 15
},
"id": 25,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1018,20 +930,19 @@
},
"gridPos": {
"h": 6,
"w": 6,
"x": 6,
"y": 21
"w": 4,
"x": 4,
"y": 15
},
"id": 26,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1095,20 +1006,19 @@
},
"gridPos": {
"h": 6,
"w": 5,
"x": 12,
"y": 21
"w": 4,
"x": 8,
"y": 15
},
"id": 29,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1171,21 +1081,20 @@
"overrides": []
},
"gridPos": {
"h": 7,
"w": 6,
"x": 0,
"y": 27
"h": 6,
"w": 4,
"x": 12,
"y": 15
},
"id": 30,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1248,21 +1157,20 @@
"overrides": []
},
"gridPos": {
"h": 7,
"w": 6,
"x": 6,
"y": 27
"h": 6,
"w": 4,
"x": 16,
"y": 15
},
"id": 28,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.72,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": false,
"rounded": false,
"spotlight": false
"gradient": false
},
"orientation": "auto",
"reduceOptions": {
@@ -1298,7 +1206,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 34
"y": 21
},
"id": 31,
"panels": [],
@@ -1345,18 +1253,17 @@
"h": 10,
"w": 7,
"x": 0,
"y": 35
"y": 22
},
"id": 32,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1426,18 +1333,17 @@
"h": 10,
"w": 7,
"x": 7,
"y": 35
"y": 22
},
"id": 34,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1507,18 +1413,17 @@
"h": 10,
"w": 6,
"x": 14,
"y": 35
"y": 22
},
"id": 33,
"maxDataPoints": 20,
"options": {
"barShape": "flat",
"barWidthFactor": 0.9,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -1554,7 +1459,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 45
"y": 32
},
"id": 6,
"panels": [],
@@ -1595,20 +1500,20 @@
"h": 6,
"w": 24,
"x": 0,
"y": 46
"y": 33
},
"id": 9,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"endpointMarker": "glow",
"glow": "both",
"orientation": "auto",
"reduceOptions": {
@@ -1621,8 +1526,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1677,19 +1581,18 @@
"h": 6,
"w": 24,
"x": 0,
"y": 52
"y": 39
},
"id": 11,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.4,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1703,8 +1606,7 @@
"shape": "gauge",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": true,
"spotlight": true
"sparkline": true
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1731,7 +1633,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 58
"y": 45
},
"id": 12,
"panels": [],
@@ -1773,19 +1675,18 @@
"h": 7,
"w": 4,
"x": 0,
"y": 59
"y": 46
},
"id": 13,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1799,8 +1700,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1856,19 +1756,18 @@
"h": 7,
"w": 5,
"x": 4,
"y": 59
"y": 46
},
"id": 14,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.49,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1882,8 +1781,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -1938,19 +1836,18 @@
"h": 7,
"w": 5,
"x": 9,
"y": 59
"y": 46
},
"id": 15,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.84,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -1964,8 +1861,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2020,19 +1916,18 @@
"h": 7,
"w": 6,
"x": 14,
"y": 59
"y": 46
},
"id": 16,
"maxDataPoints": 20,
"options": {
"barShape": "rounded",
"barWidth": 12,
"barWidthFactor": 0.66,
"effects": {
"barGlow": true,
"centerGlow": true,
"gradient": true,
"rounded": true,
"spotlight": true
"gradient": true
},
"glow": "both",
"orientation": "auto",
@@ -2046,8 +1941,7 @@
"shape": "circle",
"showThresholdLabels": false,
"showThresholdMarkers": false,
"sparkline": false,
"spotlight": true
"sparkline": false
},
"pluginVersion": "13.0.0-pre",
"targets": [
@@ -2074,7 +1968,7 @@
"h": 1,
"w": 24,
"x": 0,
"y": 66
"y": 53
},
"id": 35,
"panels": [],
@@ -2105,20 +1999,19 @@
"overrides": []
},
"gridPos": {
"h": 8,
"w": 6,
"h": 5,
"w": 12,
"x": 0,
"y": 67
"y": 54
},
"id": 36,
"options": {
"barShape": "flat",
"barWidthFactor": 0.5,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -2171,20 +2064,19 @@
"overrides": []
},
"gridPos": {
"h": 8,
"w": 6,
"x": 6,
"y": 67
"h": 5,
"w": 12,
"x": 12,
"y": 54
},
"id": 37,
"options": {
"barShape": "flat",
"barWidthFactor": 0.5,
"effects": {
"barGlow": false,
"centerGlow": false,
"gradient": true,
"rounded": false,
"spotlight": false
"gradient": true
},
"orientation": "auto",
"reduceOptions": {
@@ -2224,5 +2116,6 @@
"timezone": "browser",
"title": "Panel tests - Gauge (new)",
"uid": "panel-tests-gauge-new",
"version": 9
"version": 22,
"weekStart": ""
}
devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json
-2
View File
@@ -956,8 +956,6 @@
"effects": {
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false,
"gradient": false
}
}
docs/sources/as-code/observability-as-code/provision-resources/file-path-setup.md
+25 -12
View File
@@ -128,35 +128,48 @@ The set up process verifies the path and provides an error message if a problem
#### Synchronization limitations
Full instance sync is not available in Grafana Cloud.
{{< admonition type="caution" >}}
In Grafana OSS/Enterprise:
Full instance sync is not available in Grafana Cloud and is experimental and unsupported in Grafana OSS/Enterprise.
{{< /admonition >}}
To have access to full instance sync you must explicitly enable the option.
The following applies:
- If you try to perform a full instance sync with resources that contain alerts or panels, the connection will be blocked.
- You won't be able to create new alerts or library panels after setup is completed.
- If you opted for full instance sync and want to use alerts and library panels, you'll have to delete the provisioned repository and connect again with folder sync.
#### Set up synchronization
Choose to either sync your entire organization resources with external storage, or to sync certain resources to a new Grafana folder (with up to 10 connections).
You can sync external resources into a new folder without affecting the rest of your instance.
- Choose **Sync all resources with external storage** if you want to sync and manage your entire Grafana instance through external storage. With this option, all of your dashboards are synced to that one repository. You can only have one provisioned connection with this selection, and you won't have the option of setting up additional repositories to connect to.
To set up synchronization:
- Choose **Sync external storage to new Grafana folder** to sync external resources into a new folder without affecting the rest of your instance. You can repeat this process for up to 10 connections.
1. Select which resources you want to sync.
Next, enter a **Display name** for the repository connection. Resources stored in this connection appear under the chosen display name in the Grafana UI.
1. Enter a **Display name** for the repository connection. Resources stored in this connection appear under the chosen display name in the Grafana UI.
Click **Synchronize** to continue.
1. Click **Synchronize** to continue.
1. You can repeat this process for up to 10 connections.
{{< admonition type="note" >}}
Optionally, you can export any unmanaged resources into the provisioned folder. See how in [Synchronize with external storage](#synchronize-with-external-storage).
{{< /admonition >}}
### Synchronize with external storage
After this one time step, all future updates are automatically saved to the local file path and provisioned back to the instance.
In this step you proceed to synchronize the resources selected in the previous step. Optionally, you can check the **Migrate existing resources** box to migrate your unmanaged dashboards to the provisioned folder.
During the initial synchronization, your dashboards will be temporarily unavailable. No data or configurations will be lost.
Select **Begin synchronization** to start the process. After this one time step, all future updates are automatically saved to the local file path and provisioned back to the instance.
Note that during the initial synchronization, your dashboards will be temporarily unavailable. No data or configurations will be lost.
How long the process takes depends upon the number of resources involved.
Select **Begin synchronization** to start the process.
### Choose additional settings
If you wish, you can make any files synchronized as as **Read only** so no changes can be made to the resources through Grafana.
docs/sources/as-code/observability-as-code/provision-resources/git-sync-setup.md
+25 -7
View File
@@ -132,17 +132,35 @@ To connect your GitHub repository:
### Choose what to synchronize
In this step, you can decide which elements to synchronize. The available options depend on the status of your Grafana instance:
- If the instance contains resources in an incompatible data format, you'll have to migrate all the data using instance sync. Folder sync won't be supported.
- If there's already another connection using folder sync, instance sync won't be offered.
You can sync external resources into a new folder without affecting the rest of your instance.
To set up synchronization:
- Choose **Sync all resources with external storage** if you want to sync and manage your entire Grafana instance through external storage. With this option, all of your dashboards are synced to that one repository. You can only have one provisioned connection with this selection, and you won't have the option of setting up additional repositories to connect to.
- Choose **Sync external storage to new Grafana folder** to sync external resources into a new folder without affecting the rest of your instance. You can repeat this process for up to 10 connections.
1. Select which resources you want to sync.
Next, enter a **Display name** for the repository connection. Resources stored in this connection appear under the chosen display name in the Grafana UI. Click **Synchronize** to continue.
1. Enter a **Display name** for the repository connection. Resources stored in this connection appear under the chosen display name in the Grafana UI.
1. Click **Synchronize** to continue.
1. You can repeat this process for up to 10 connections.
{{< admonition type="note" >}}
Optionally, you can export any unmanaged resources into the provisioned folder. See how in [Synchronize with external storage](#synchronize-with-external-storage).
{{< /admonition >}}
#### Full instance sync
Full instance sync is not available in Grafana Cloud and is experimental and unsupported in Grafana OSS/Enterprise.
To have access to this option you must enable experimental instance sync on purpose.
### Synchronize with external storage
After this one time step, all future updates are automatically saved to the Git repository and provisioned back to the instance.
Check the **Migrate existing resources** box to migrate your unmanaged dashboards to the provisioned folder.
### Choose additional settings
docs/sources/as-code/observability-as-code/provision-resources/intro-git-sync.md
+2 -2
View File
@@ -47,7 +47,7 @@ Using Git Sync, you can:
{{< admonition type="caution" >}}
Git Sync only works with specific folders for the moment. Full-instance sync is not currently supported.
Full instance sync is not available in Grafana Cloud and is experimental and unsupported in Grafana OSS/Enterprise.
{{< /admonition >}}
@@ -84,7 +84,7 @@ Refer to [Requirements](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/obser
- You can only sync dashboards and folders. Refer to [Supported resources](#supported-resources) for more information.
- If you're using Git Sync in Grafana OSS and Grafana Enterprise, some resources might be in an incompatible data format and won't be synced.
- Full-instance sync is not available in Grafana Cloud and has limitations in Grafana OSS and Grafana Enterprise. Refer to [Choose what to synchronize](../git-sync-setup/#choose-what-to-synchronize) for more details.
- Full-instance sync is not available in Grafana Cloud and is experimental in Grafana OSS and Grafana Enterprise. Refer to [Choose what to synchronize](../git-sync-setup/#choose-what-to-synchronize) for more details.
- When migrating to full instance sync, during the synchronization process your resources will be temporarily unavailable. No one will be able to create, edit, or delete resources during this process.
- If you want to manage existing resources with Git Sync, you need to save them as JSON files and commit them to the synced repository. Open a PR to import, copy, move, or save a dashboard.
- Restoring resources from the UI is currently not possible. As an alternative, you can restore dashboards directly in your GitHub repository by raising a PR, and they will be updated in Grafana.
docs/sources/datasources/_index.md
+6
View File
@@ -112,6 +112,12 @@ For example, this video demonstrates the visual Prometheus query builder:
For general information about querying in Grafana, and common options and user interface elements across all query editors, refer to [Query and transform data](ref:query-transform-data).
## Build a dashboard from the data source
After you've configured a data source, you can start creating a dashboard directly from it, by clicking the **Build a dashboard** button.
For more information, refer to [Begin dashboard creation from data source configuration](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/build-dashboards/create-dashboard/#begin-dashboard-creation-from-connections).
## Special data sources
Grafana includes three special data sources:
docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
-1
View File
@@ -31,7 +31,6 @@ Most [generally available](https://grafana.com/docs/release-life-cycle/#general-
| `logsContextDatasourceUi` | Allow datasource to provide custom UI for context view | Yes |
| `lokiQuerySplitting` | Split large interval queries into subqueries with smaller time intervals | Yes |
| `influxdbBackendMigration` | Query InfluxDB InfluxQL without the proxy | Yes |
| `unifiedRequestLog` | Writes error logs to the request logger | Yes |
| `logsExploreTableVisualisation` | A table visualisation for logs in Explore | Yes |
| `awsDatasourcesTempCredentials` | Support temporary security credentials in AWS plugins for Grafana Cloud customers | Yes |
| `awsAsyncQueryCaching` | Enable caching for async queries for Redshift and Athena. Requires that the datasource has caching and async query support enabled | Yes |
docs/sources/visualizations/dashboards/build-dashboards/create-dashboard/index.md
+23 -1
View File
@@ -99,7 +99,7 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
- Understand the query language of the target data source.
- Ensure that data source for which you are writing a query has been added. For more information about adding a data source, refer to [Add a data source](ref:add-a-data-source) if you need instructions.
**To create a dashboard**:
To create a dashboard, follow these steps:
{{< shared id="create-dashboard" >}}
@@ -171,6 +171,28 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
Now, when you want to make more changes to the saved dashboard, click **Edit** in the top-right corner.
### Begin dashboard creation from data source configuration
You can start the process of creating a dashboard directly from a data source rather than from the **Dashboards** page.
To begin building a dashboard directly from a data source, follow these steps:
1. Navigate to **Connections > Data sources**.
1. On the row of the data source for which you want to build a dashboard, click **Build a dashboard**.
The empty dashboard page opens.
1. Do one of the following:
- Click **+Add visualization** to configure all the elements of the new dashboard.
- Select one of the suggested dashboards by clicking its **Use dashboard** button. This can be helpful when you're not sure how to most effectively visualize your data.
The suggested dashboards are specific to your data source type (for example, Prometheus, Loki, or Elasticsearch). If there are more than three dashboard suggestions, you can click **View all** to see the rest of them.
![Empty dashboard with add visualization and suggested dashboard options](/media/docs/grafana/dashboards/screenshot-suggested-dashboards-v12.3.png)
{{< docs/public-preview product="Suggested dashboards" >}}
1. Complete the rest of the dashboard configuration. For more detailed steps, refer to [Create a dashboard](#create-a-dashboard), beginning at step five.
## Copy a dashboard
To copy a dashboard, follow these steps:
e2e-playwright/alerting-suite/saved-searches.spec.ts
+271
View File
@@ -0,0 +1,271 @@
import { Page } from '@playwright/test';
import { test, expect } from '@grafana/plugin-e2e';
/**
* UI selectors for Saved Searches e2e tests.
* Each selector is a function that takes the page and returns a locator.
*/
const ui = {
// Main elements
savedSearchesButton: (page: Page) => page.getByRole('button', { name: /saved searches/i }),
dropdown: (page: Page) => page.getByRole('dialog', { name: /saved searches/i }),
searchInput: (page: Page) => page.getByTestId('search-query-input'),
// Save functionality
saveButton: (page: Page) => page.getByRole('button', { name: /save current search/i }),
saveConfirmButton: (page: Page) => page.getByRole('button', { name: /^save$/i }),
saveNameInput: (page: Page) => page.getByPlaceholder(/enter a name/i),
// Action menu
actionsButton: (page: Page) => page.getByRole('button', { name: /actions/i }),
renameMenuItem: (page: Page) => page.getByText(/rename/i),
deleteMenuItem: (page: Page) => page.getByText(/^delete$/i),
setAsDefaultMenuItem: (page: Page) => page.getByText(/set as default/i),
deleteConfirmButton: (page: Page) => page.getByRole('button', { name: /^delete$/i }),
// Indicators
emptyState: (page: Page) => page.getByText(/no saved searches/i),
defaultIcon: (page: Page) => page.locator('[title="Default search"]'),
duplicateError: (page: Page) => page.getByText(/already exists/i),
};
/**
* Helper to clear saved searches storage.
* UserStorage uses localStorage as fallback, so we clear both potential keys.
*/
async function clearSavedSearches(page: Page) {
await page.evaluate(() => {
// Clear localStorage keys that might contain saved searches
// UserStorage stores under 'grafana.userstorage.alerting' pattern
const keysToRemove = Object.keys(localStorage).filter(
(key) => key.includes('alerting') && (key.includes('savedSearches') || key.includes('userstorage'))
);
keysToRemove.forEach((key) => localStorage.removeItem(key));
// Also clear session storage visited flag
const sessionKeysToRemove = Object.keys(sessionStorage).filter((key) => key.includes('alerting'));
sessionKeysToRemove.forEach((key) => sessionStorage.removeItem(key));
});
}
test.describe(
'Alert Rules - Saved Searches',
{
tag: ['@alerting'],
},
() => {
test.beforeEach(async ({ page }) => {
// Clear any saved searches from previous tests before navigating
await page.goto('/alerting/list');
await clearSavedSearches(page);
await page.reload();
});
test.afterEach(async ({ page }) => {
// Clean up saved searches after each test
await clearSavedSearches(page);
});
test('should display Saved searches button', async ({ page }) => {
await expect(ui.savedSearchesButton(page)).toBeVisible();
});
test('should open dropdown when clicking Saved searches button', async ({ page }) => {
await ui.savedSearchesButton(page).click();
await expect(ui.dropdown(page)).toBeVisible();
});
test('should show empty state when no saved searches exist', async ({ page }) => {
// Storage is cleared in beforeEach, so we should see empty state
await ui.savedSearchesButton(page).click();
await expect(ui.emptyState(page)).toBeVisible();
});
test('should enable Save current search button when search query is entered', async ({ page }) => {
// Enter a search query
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
// Open saved searches
await ui.savedSearchesButton(page).click();
await expect(ui.saveButton(page)).toBeEnabled();
});
test('should disable Save current search button when search query is empty', async ({ page }) => {
await ui.savedSearchesButton(page).click();
await expect(ui.saveButton(page)).toBeDisabled();
});
test('should save a new search', async ({ page }) => {
// Enter a search query
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
// Open saved searches
await ui.savedSearchesButton(page).click();
// Click save button
await ui.saveButton(page).click();
// Enter name and save
await ui.saveNameInput(page).fill('My Firing Rules');
await ui.saveConfirmButton(page).click();
// Verify the saved search appears in the list
await expect(page.getByText('My Firing Rules')).toBeVisible();
});
test('should show validation error for duplicate name', async ({ page }) => {
// First save a search
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('Duplicate Test');
await ui.saveConfirmButton(page).click();
// Try to save another with the same name
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('Duplicate Test');
await ui.saveConfirmButton(page).click();
// Verify validation error
await expect(ui.duplicateError(page)).toBeVisible();
});
test('should apply a saved search', async ({ page }) => {
// Create a saved search first
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('Apply Test');
await ui.saveConfirmButton(page).click();
// Clear the search
await ui.searchInput(page).clear();
await ui.searchInput(page).press('Enter');
// Apply the saved search
await ui.savedSearchesButton(page).click();
await page.getByRole('button', { name: /apply search.*apply test/i }).click();
// Verify the search input is updated
await expect(ui.searchInput(page)).toHaveValue('state:firing');
});
test('should rename a saved search', async ({ page }) => {
// Create a saved search
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('Original Name');
await ui.saveConfirmButton(page).click();
// Open action menu and click rename
await ui.actionsButton(page).click();
await ui.renameMenuItem(page).click();
// Enter new name
const renameInput = page.getByDisplayValue('Original Name');
await renameInput.clear();
await renameInput.fill('Renamed Search');
await page.keyboard.press('Enter');
// Verify the name was updated
await expect(page.getByText('Renamed Search')).toBeVisible();
await expect(page.getByText('Original Name')).not.toBeVisible();
});
test('should delete a saved search', async ({ page }) => {
// Create a saved search
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('To Delete');
await ui.saveConfirmButton(page).click();
// Verify it was saved
await expect(page.getByText('To Delete')).toBeVisible();
// Open action menu and click delete
await ui.actionsButton(page).click();
await ui.deleteMenuItem(page).click();
// Confirm delete
await ui.deleteConfirmButton(page).click();
// Verify it was deleted
await expect(page.getByText('To Delete')).not.toBeVisible();
});
test('should set a search as default', async ({ page }) => {
// Create a saved search
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
await ui.saveButton(page).click();
await ui.saveNameInput(page).fill('Default Test');
await ui.saveConfirmButton(page).click();
// Set as default
await ui.actionsButton(page).click();
await ui.setAsDefaultMenuItem(page).click();
// Verify the star icon appears (indicating default)
await expect(ui.defaultIcon(page)).toBeVisible();
});
test('should close dropdown when pressing Escape', async ({ page }) => {
await ui.savedSearchesButton(page).click();
await expect(ui.dropdown(page)).toBeVisible();
await page.keyboard.press('Escape');
await expect(ui.dropdown(page)).not.toBeVisible();
});
test('should cancel save mode when pressing Escape', async ({ page }) => {
// Enter a search query
await ui.searchInput(page).fill('state:firing');
await ui.searchInput(page).press('Enter');
await ui.savedSearchesButton(page).click();
// Start save mode
await ui.saveButton(page).click();
await expect(ui.saveNameInput(page)).toBeVisible();
// Press Escape to cancel
await page.keyboard.press('Escape');
// Verify we're back to list mode
await expect(ui.saveNameInput(page)).not.toBeVisible();
await expect(ui.saveButton(page)).toBeVisible();
});
}
);
eslint-suppressions.json
-10
View File
@@ -1911,11 +1911,6 @@
"count": 1
}
},
"public/app/features/dashboard-scene/settings/JsonModelEditView.tsx": {
"react/no-unescaped-entities": {
"count": 2
}
},
"public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx": {
"react-hooks/rules-of-hooks": {
"count": 4
@@ -2868,11 +2863,6 @@
"count": 1
}
},
"public/app/features/plugins/admin/components/PluginDetailsPage.tsx": {
"@typescript-eslint/consistent-type-assertions": {
"count": 1
}
},
"public/app/features/plugins/admin/helpers.ts": {
"no-restricted-syntax": {
"count": 2
packages/grafana-data/src/types/featureToggles.gen.ts
Generated
+9 -5
View File
@@ -126,11 +126,6 @@ export interface FeatureToggles {
*/
disableSSEDataplane?: boolean;
/**
* Writes error logs to the request logger
* @default true
*/
unifiedRequestLog?: boolean;
/**
* Uses JWT-based auth for rendering instead of relying on remote cache
*/
renderAuthJWT?: boolean;
@@ -540,6 +535,10 @@ export interface FeatureToggles {
*/
alertingListViewV2?: boolean;
/**
* Enables saved searches for alert rules list
*/
alertingSavedSearches?: boolean;
/**
* Disables the ability to send alerts to an external Alertmanager datasource.
*/
alertingDisableSendAlertsExternal?: boolean;
@@ -1198,6 +1197,11 @@ export interface FeatureToggles {
*/
onlyStoreActionSets?: boolean;
/**
* Show insights for plugins in the plugin details page
* @default false
*/
pluginInsights?: boolean;
/**
* Enables a new panel time settings drawer
*/
panelTimeSettings?: boolean;
packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts
Generated
+4 -4
View File
@@ -16,21 +16,19 @@ export interface GaugePanelEffects {
barGlow?: boolean;
centerGlow?: boolean;
gradient?: boolean;
rounded?: boolean;
spotlight?: boolean;
}
export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
barGlow: false,
centerGlow: false,
gradient: true,
rounded: false,
spotlight: false,
};
export interface Options extends common.SingleStatBaseOptions {
barShape: ('flat' | 'rounded');
barWidthFactor: number;
effects: GaugePanelEffects;
endpointMarker?: ('point' | 'glow' | 'none');
segmentCount: number;
segmentSpacing: number;
shape: ('circle' | 'gauge');
@@ -40,8 +38,10 @@ export interface Options extends common.SingleStatBaseOptions {
}
export const defaultOptions: Partial<Options> = {
barShape: 'flat',
barWidthFactor: 0.5,
effects: {},
endpointMarker: 'point',
segmentCount: 1,
segmentSpacing: 0.3,
shape: 'gauge',
packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
+141 -44
View File
@@ -1,52 +1,149 @@
import { GaugeDimensions, toRad } from './utils';
import { useId, memo, HTMLAttributes, ReactNode } from 'react';
export interface RadialArcPathProps {
startAngle: number;
dimensions: GaugeDimensions;
color: string;
glowFilter?: string;
import { FieldDisplay } from '@grafana/data';
import { getBarEndcapColors, getGradientCss, getEndpointMarkerColors } from './colors';
import { RadialShape, RadialGaugeDimensions, GradientStop } from './types';
import { drawRadialArcPath, toRad } from './utils';
export interface RadialArcPathPropsBase {
arcLengthDeg: number;
barEndcaps?: boolean;
dimensions: RadialGaugeDimensions;
fieldDisplay: FieldDisplay;
roundedBars?: boolean;
shape: RadialShape;
endpointMarker?: 'point' | 'glow';
startAngle: number;
glowFilter?: string;
endpointMarkerGlowFilter?: string;
}
export function RadialArcPath({
startAngle: angle,
dimensions,
color,
glowFilter,
arcLengthDeg,
roundedBars,
}: RadialArcPathProps) {
const { radius, centerX, centerY, barWidth } = dimensions;
interface RadialArcPathPropsWithColor extends RadialArcPathPropsBase {
color: string;
}
if (arcLengthDeg === 360) {
// For some reason a 100% full arc cannot be rendered
arcLengthDeg = 359.99;
interface RadialArcPathPropsWithGradient extends RadialArcPathPropsBase {
gradient: GradientStop[];
}
type RadialArcPathProps = RadialArcPathPropsWithColor | RadialArcPathPropsWithGradient;
const ENDPOINT_MARKER_MIN_ANGLE = 10;
const DOT_OPACITY = 0.5;
const DOT_RADIUS_FACTOR = 0.4;
const MAX_DOT_RADIUS = 8;
export const RadialArcPath = memo(
({
arcLengthDeg,
dimensions,
fieldDisplay,
roundedBars,
shape,
endpointMarker,
barEndcaps,
startAngle: angle,
glowFilter,
endpointMarkerGlowFilter,
...rest
}: RadialArcPathProps) => {
const id = useId();
const bgDivStyle: HTMLAttributes<HTMLDivElement>['style'] = { width: '100%', height: '100%' };
if ('color' in rest) {
bgDivStyle.backgroundColor = rest.color;
} else {
bgDivStyle.backgroundImage = getGradientCss(rest.gradient, shape);
}
const { radius, centerX, centerY, barWidth } = dimensions;
const path = drawRadialArcPath(angle, arcLengthDeg, dimensions, roundedBars);
const startRadians = toRad(angle);
const endRadians = toRad(angle + arcLengthDeg);
const xStart = centerX + radius * Math.cos(startRadians);
const yStart = centerY + radius * Math.sin(startRadians);
const xEnd = centerX + radius * Math.cos(endRadians);
const yEnd = centerY + radius * Math.sin(endRadians);
const dotRadius =
endpointMarker === 'point' ? Math.min((barWidth / 2) * DOT_RADIUS_FACTOR, MAX_DOT_RADIUS) : barWidth / 2;
let barEndcapColors: [string, string] | undefined;
let endpointMarks: ReactNode = null;
if ('gradient' in rest) {
if (endpointMarker && (rest.gradient?.length ?? 0) > 0) {
switch (endpointMarker) {
case 'point':
const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(
rest.gradient!,
fieldDisplay.display.percent
);
endpointMarks = (
<>
{arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE && (
<circle cx={xStart} cy={yStart} r={dotRadius} fill={pointColorStart} opacity={DOT_OPACITY} />
)}
<circle cx={xEnd} cy={yEnd} r={dotRadius} fill={pointColorEnd} opacity={DOT_OPACITY} />
</>
);
break;
case 'glow':
const offsetAngle = toRad(ENDPOINT_MARKER_MIN_ANGLE);
const xStartMark = centerX + radius * Math.cos(endRadians + offsetAngle);
const yStartMark = centerY + radius * Math.sin(endRadians + offsetAngle);
endpointMarks =
arcLengthDeg > ENDPOINT_MARKER_MIN_ANGLE ? (
<path
d={['M', xStartMark, yStartMark, 'A', radius, radius, 0, 0, 1, xEnd, yEnd].join(' ')}
fill="none"
strokeWidth={barWidth}
stroke={endpointMarkerGlowFilter}
strokeLinecap={roundedBars ? 'round' : 'butt'}
filter={glowFilter}
/>
) : null;
break;
default:
break;
}
}
if (barEndcaps) {
barEndcapColors = getBarEndcapColors(rest.gradient, fieldDisplay.display.percent);
}
}
return (
<>
{/* FIXME: optimize this by only using clippath + foreign obj for gradients */}
<clipPath id={id}>
<path d={path} />
</clipPath>
<g filter={glowFilter}>
<foreignObject
x={centerX - radius - barWidth}
y={centerY - radius - barWidth}
width={(radius + barWidth) * 2}
height={(radius + barWidth) * 2}
clipPath={`url(#${id})`}
>
<div style={bgDivStyle} />
</foreignObject>
{barEndcapColors?.[0] && <circle cx={xStart} cy={yStart} r={barWidth / 2} fill={barEndcapColors[0]} />}
{barEndcapColors?.[1] && (
<circle cx={xEnd} cy={yEnd} r={barWidth / 2} fill={barEndcapColors[1]} opacity={0.5} />
)}
</g>
{endpointMarks}
</>
);
}
);
const startRadians = toRad(angle);
const endRadians = toRad(angle + arcLengthDeg);
let x1 = centerX + radius * Math.cos(startRadians);
let y1 = centerY + radius * Math.sin(startRadians);
let x2 = centerX + radius * Math.cos(endRadians);
let y2 = centerY + radius * Math.sin(endRadians);
const largeArc = arcLengthDeg > 180 ? 1 : 0;
const path = ['M', x1, y1, 'A', radius, radius, 0, largeArc, 1, x2, y2].join(' ');
return (
<path
d={path}
fill="none"
fillOpacity="1"
stroke={color}
strokeOpacity="1"
strokeWidth={barWidth}
filter={glowFilter}
strokeLinecap={roundedBars ? 'round' : 'butt'}
className="radial-arc-path"
/>
);
}
RadialArcPath.displayName = 'RadialArcPath';
packages/grafana-ui/src/components/RadialGauge/RadialBar.tsx
+43 -76
View File
@@ -1,97 +1,64 @@
import { GrafanaTheme2 } from '@grafana/data';
import { FALLBACK_COLOR, FieldDisplay } from '@grafana/data';
import { useTheme2 } from '../../themes/ThemeContext';
import { RadialArcPath } from './RadialArcPath';
import { RadialColorDefs } from './RadialColorDefs';
import { GaugeDimensions, toRad } from './utils';
import { RadialShape, RadialGaugeDimensions, GradientStop } from './types';
export interface RadialBarProps {
dimensions: GaugeDimensions;
colorDefs: RadialColorDefs;
angleRange: number;
angle: number;
startAngle: number;
angleRange: number;
dimensions: RadialGaugeDimensions;
fieldDisplay: FieldDisplay;
gradient?: GradientStop[];
roundedBars?: boolean;
spotlightStroke: string;
endpointMarker?: 'point' | 'glow';
shape: RadialShape;
startAngle: number;
glowFilter?: string;
endpointMarkerGlowFilter?: string;
}
export function RadialBar({
dimensions,
colorDefs,
angleRange,
angle,
startAngle,
angleRange,
dimensions,
fieldDisplay,
gradient,
roundedBars,
spotlightStroke,
endpointMarker,
shape,
startAngle,
glowFilter,
endpointMarkerGlowFilter,
}: RadialBarProps) {
const theme = useTheme2();
const colorProps = gradient ? { gradient } : { color: fieldDisplay.display.color ?? FALLBACK_COLOR };
return (
<>
<g>
{/** Track */}
<RadialArcPath
startAngle={startAngle + angle}
dimensions={dimensions}
arcLengthDeg={angleRange - angle}
color={theme.colors.action.hover}
roundedBars={roundedBars}
/>
{/** The colored bar */}
<RadialArcPath
dimensions={dimensions}
startAngle={startAngle}
arcLengthDeg={angle}
color={colorDefs.getMainBarColor()}
roundedBars={roundedBars}
glowFilter={glowFilter}
/>
{spotlightStroke && angle > 8 && (
<SpotlightSquareEffect
dimensions={dimensions}
angle={startAngle + angle}
glowFilter={glowFilter}
spotlightStroke={spotlightStroke}
theme={theme}
roundedBars={roundedBars}
/>
)}
</g>
<defs>{colorDefs.getDefs()}</defs>
{/** Track */}
<RadialArcPath
arcLengthDeg={angleRange - angle}
fieldDisplay={fieldDisplay}
color={theme.colors.action.hover}
dimensions={dimensions}
roundedBars={roundedBars}
shape={shape}
startAngle={startAngle + angle}
/>
{/** The colored bar */}
<RadialArcPath
arcLengthDeg={angle}
barEndcaps={shape === 'circle' && roundedBars}
dimensions={dimensions}
endpointMarker={roundedBars ? endpointMarker : undefined}
endpointMarkerGlowFilter={endpointMarkerGlowFilter}
fieldDisplay={fieldDisplay}
glowFilter={glowFilter}
roundedBars={roundedBars}
shape={shape}
startAngle={startAngle}
{...colorProps}
/>
</>
);
}
interface SpotlightEffectProps {
dimensions: GaugeDimensions;
angle: number;
glowFilter?: string;
spotlightStroke: string;
theme: GrafanaTheme2;
roundedBars?: boolean;
}
function SpotlightSquareEffect({ dimensions, angle, glowFilter, spotlightStroke, roundedBars }: SpotlightEffectProps) {
const { radius, centerX, centerY, barWidth } = dimensions;
const angleRadian = toRad(angle);
const x1 = centerX + radius * Math.cos(angleRadian - 0.2);
const y1 = centerY + radius * Math.sin(angleRadian - 0.2);
const x2 = centerX + radius * Math.cos(angleRadian);
const y2 = centerY + radius * Math.sin(angleRadian);
const path = ['M', x1, y1, 'A', radius, radius, 0, 0, 1, x2, y2].join(' ');
return (
<path
d={path}
fill="none"
strokeWidth={barWidth}
stroke={spotlightStroke}
strokeLinecap={roundedBars ? 'round' : 'butt'}
filter={glowFilter}
/>
);
}
packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx
+56 -108
View File
@@ -1,126 +1,74 @@
import { FieldDisplay } from '@grafana/data';
import { memo } from 'react';
import { FALLBACK_COLOR, FieldDisplay } from '@grafana/data';
import { useTheme2 } from '../../themes/ThemeContext';
import { RadialArcPath } from './RadialArcPath';
import { RadialColorDefs } from './RadialColorDefs';
import { GaugeDimensions } from './utils';
import { RadialShape, RadialGaugeDimensions, GradientStop } from './types';
import {
getAngleBetweenSegments,
getFieldConfigMinMax,
getFieldDisplayProcessor,
getOptimalSegmentCount,
} from './utils';
export interface RadialBarSegmentedProps {
fieldDisplay: FieldDisplay;
dimensions: GaugeDimensions;
colorDefs: RadialColorDefs;
dimensions: RadialGaugeDimensions;
angleRange: number;
startAngle: number;
glowFilter?: string;
segmentCount: number;
segmentSpacing: number;
shape: RadialShape;
gradient?: GradientStop[];
}
export function RadialBarSegmented({
fieldDisplay,
dimensions,
startAngle,
angleRange,
glowFilter,
segmentCount,
segmentSpacing,
colorDefs,
}: RadialBarSegmentedProps) {
const segments: React.ReactNode[] = [];
const theme = useTheme2();
const segmentCountAdjusted = getOptimalSegmentCount(dimensions, segmentSpacing, segmentCount, angleRange);
const min = fieldDisplay.field.min ?? 0;
const max = fieldDisplay.field.max ?? 100;
const value = fieldDisplay.display.numeric;
const angleBetweenSegments = getAngleBetweenSegments(segmentSpacing, segmentCount, angleRange);
const segmentArcLengthDeg = angleRange / segmentCountAdjusted - angleBetweenSegments;
export const RadialBarSegmented = memo(
({
fieldDisplay,
dimensions,
startAngle,
angleRange,
glowFilter,
gradient,
segmentCount,
segmentSpacing,
shape,
}: RadialBarSegmentedProps) => {
const theme = useTheme2();
const segments: React.ReactNode[] = [];
const segmentCountAdjusted = getOptimalSegmentCount(dimensions, segmentSpacing, segmentCount, angleRange);
const [min, max] = getFieldConfigMinMax(fieldDisplay);
const value = fieldDisplay.display.numeric;
const angleBetweenSegments = getAngleBetweenSegments(segmentSpacing, segmentCount, angleRange);
const segmentArcLengthDeg = angleRange / segmentCountAdjusted - angleBetweenSegments;
const displayProcessor = getFieldDisplayProcessor(fieldDisplay);
for (let i = 0; i < segmentCountAdjusted; i++) {
const angleValue = min + ((max - min) / segmentCountAdjusted) * i;
const angleColor = colorDefs.getSegmentColor(angleValue);
const segmentAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01;
const segmentColor = angleValue >= value ? theme.colors.action.hover : angleColor;
for (let i = 0; i < segmentCountAdjusted; i++) {
const angleValue = min + ((max - min) / segmentCountAdjusted) * i;
const segmentAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01;
const segmentColor =
angleValue >= value ? theme.colors.border.medium : (displayProcessor(angleValue).color ?? FALLBACK_COLOR);
const colorProps = angleValue < value && gradient ? { gradient } : { color: segmentColor };
segments.push(
<RadialArcPath
key={i}
startAngle={segmentAngle}
dimensions={dimensions}
color={segmentColor}
glowFilter={glowFilter}
arcLengthDeg={segmentArcLengthDeg}
/>
);
segments.push(
<RadialArcPath
key={i}
arcLengthDeg={segmentArcLengthDeg}
dimensions={dimensions}
fieldDisplay={fieldDisplay}
glowFilter={glowFilter}
shape={shape}
startAngle={segmentAngle}
{...colorProps}
/>
);
}
return <g>{segments}</g>;
}
);
return (
<>
<g>{segments}</g>
<defs>{colorDefs.getDefs()}</defs>
</>
);
}
export function getAngleBetweenSegments(segmentSpacing: number, segmentCount: number, range: number) {
// Max spacing is 8 degrees between segments
// Changing this constant could be considered a breaking change
const maxAngleBetweenSegments = Math.max(range / 1.5 / segmentCount, 2);
return segmentSpacing * maxAngleBetweenSegments;
}
function getOptimalSegmentCount(
dimensions: GaugeDimensions,
segmentSpacing: number,
segmentCount: number,
range: number
) {
const angleBetweenSegments = getAngleBetweenSegments(segmentSpacing, segmentCount, range);
const innerRadius = dimensions.radius - dimensions.barWidth / 2;
const circumference = Math.PI * innerRadius * 2 * (range / 360);
const maxSegments = Math.floor(circumference / (angleBetweenSegments + 3));
return Math.min(maxSegments, segmentCount);
}
// export function RadialSegmentLine({
// gaugeId,
// center,
// angle,
// size,
// color,
// barWidth,
// roundedBars,
// glow,
// margin,
// segmentWidth,
// }: RadialSegmentProps) {
// const arcSize = size - barWidth;
// const radius = arcSize / 2 - margin;
// const angleRad = (Math.PI * (angle - 90)) / 180;
// const lineLength = radius - barWidth;
// const x1 = center + radius * Math.cos(angleRad);
// const y1 = center + radius * Math.sin(angleRad);
// const x2 = center + lineLength * Math.cos(angleRad);
// const y2 = center + lineLength * Math.sin(angleRad);
// return (
// <line
// x1={x1}
// y1={y1}
// x2={x2}
// y2={y2}
// fill="none"
// fillOpacity="0.85"
// stroke={color}
// strokeOpacity="1"
// strokeLinecap={roundedBars ? 'round' : 'butt'}
// strokeWidth={segmentWidth}
// strokeDasharray="0"
// filter={glow ? `url(#glow-${gaugeId})` : undefined}
// />
// );
// }
RadialBarSegmented.displayName = 'RadialBarSegmented';
packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx
-141
View File
@@ -1,141 +0,0 @@
import tinycolor from 'tinycolor2';
import { DisplayProcessor, FALLBACK_COLOR, FieldDisplay, getFieldColorMode, GrafanaTheme2 } from '@grafana/data';
import { RadialGradientMode, RadialShape } from './RadialGauge';
import { GaugeDimensions } from './utils';
export interface RadialColorDefsOptions {
gradient: RadialGradientMode;
fieldDisplay: FieldDisplay;
theme: GrafanaTheme2;
dimensions: GaugeDimensions;
shape: RadialShape;
gaugeId: string;
displayProcessor: DisplayProcessor;
}
export class RadialColorDefs {
private colorToIds: Record<string, string> = {};
private defs: React.ReactNode[] = [];
constructor(private options: RadialColorDefsOptions) {}
getSegmentColor(forValue: number): string {
const { displayProcessor } = this.options;
const baseColor = displayProcessor(forValue).color ?? FALLBACK_COLOR;
return this.getColor(baseColor, true);
}
getColor(baseColor: string, forSegment?: boolean): string {
const { gradient, dimensions, gaugeId, fieldDisplay, shape, theme } = this.options;
const id = `value-color-${baseColor}-${gaugeId}`;
if (this.colorToIds[id]) {
return this.colorToIds[id];
}
// If no gradient, just return the base color
if (gradient === 'none') {
this.colorToIds[id] = baseColor;
return baseColor;
}
const returnColor = (this.colorToIds[id] = `url(#${id})`);
const colorModeId = fieldDisplay.field.color?.mode;
const colorMode = getFieldColorMode(colorModeId);
const valuePercent = fieldDisplay.display.percent ?? 0;
// Handle continusous color modes first
// If it's a segment color we don't want to do continuous gradients
if (colorMode.isContinuous && colorMode.getColors && !forSegment) {
const colors = colorMode.getColors(theme);
const count = colors.length;
this.defs.push(
<linearGradient x1="0" y1="0" x2={1 / valuePercent} y2="0" id={id}>
{colors.map((stopColor, i) => (
<stop key={i} offset={`${(i / (count - 1)).toFixed(2)}`} stopColor={stopColor} stopOpacity={1} />
))}
</linearGradient>
);
return returnColor;
}
// For value based colors we want to stay more true to the specific color
// So a radial gradient that adds a bit of light and shade works best
if (colorMode.isByValue) {
const color1 = tinycolor(baseColor).darken(5);
this.defs.push(
<radialGradient
key={id}
id={id}
cx={dimensions.centerX}
cy={dimensions.centerY}
r={dimensions.radius + dimensions.barWidth / 2}
fr={dimensions.radius - dimensions.barWidth / 2}
gradientUnits="userSpaceOnUse"
>
<stop offset="0%" stopColor={tinycolor(baseColor).spin(20).lighten(10).toString()} stopOpacity={1} />
<stop offset="60%" stopColor={color1.toString()} stopOpacity={1} />
<stop offset="100%" stopColor={color1.toString()} stopOpacity={1} />
</radialGradient>
);
return returnColor;
}
// For fixed / palette based color scales we can create a more fun
// hue and light based linear gradient that we rotate/move with the value
const x2 = shape === 'circle' ? 0 : dimensions.centerX + dimensions.radius;
const y2 = shape === 'circle' ? dimensions.centerY + dimensions.radius : 0;
const color1 = tinycolor(baseColor).spin(-20).darken(5);
const color2 = tinycolor(baseColor).saturate(20).spin(20).brighten(10);
// this makes it so the gradient is always brightest at the current value
const transform =
shape === 'circle'
? `rotate(${360 * valuePercent - 180} ${dimensions.centerX} ${dimensions.centerY})`
: `translate(-${dimensions.radius * 2 * (1 - valuePercent)}, 0)`;
this.defs.push(
<linearGradient
key={id}
id={id}
x1="0"
y1="0"
x2={x2}
y2={y2}
gradientUnits="userSpaceOnUse"
gradientTransform={transform}
>
{theme.isDark ? (
<>
<stop offset="0%" stopColor={color1.darken(10).toString()} stopOpacity={1} />
<stop offset="100%" stopColor={color2.lighten(10).toString()} stopOpacity={1} />
</>
) : (
<>
<stop offset="0%" stopColor={color2.lighten(10).toString()} stopOpacity={1} />
<stop offset="100%" stopColor={color1.toString()} stopOpacity={1} />
</>
)}
</linearGradient>
);
return returnColor;
}
getMainBarColor(): string {
return this.getColor(this.options.fieldDisplay.display.color ?? FALLBACK_COLOR);
}
getDefs(): React.ReactNode[] {
return this.defs;
}
}
packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx
+49 -79
View File
@@ -13,7 +13,8 @@ import { FieldColorModeId } from '@grafana/schema';
import { useTheme2 } from '../../themes/ThemeContext';
import { Stack } from '../Layout/Stack/Stack';
import { RadialGauge, RadialGaugeProps, RadialGradientMode, RadialShape, RadialTextMode } from './RadialGauge';
import { RadialGauge, RadialGaugeProps } from './RadialGauge';
import { RadialShape, RadialTextMode } from './types';
interface StoryProps extends RadialGaugeProps {
value: number;
@@ -31,10 +32,27 @@ const meta: Meta<StoryProps> = {
controls: {
exclude: ['theme', 'values', 'vizCount'],
},
a11y: {
config: {
rules: [
{
id: 'scrollable-region-focusable',
selector: 'body',
enabled: false,
},
// NOTE: this is necessary due to a false positive with the filered svg glow in one of the examples.
// The color-contrast in this component should be accessible!
{
id: 'color-contrast',
selector: 'text',
enabled: false,
},
],
},
},
},
args: {
barWidthFactor: 0.2,
spotlight: false,
glowBar: false,
glowCenter: false,
sparkline: false,
@@ -42,7 +60,7 @@ const meta: Meta<StoryProps> = {
width: 200,
height: 200,
shape: 'circle',
gradient: 'none',
gradient: false,
seriesCount: 1,
segmentCount: 0,
segmentSpacing: 0.2,
@@ -56,14 +74,14 @@ const meta: Meta<StoryProps> = {
width: { control: { type: 'range', min: 50, max: 600 } },
height: { control: { type: 'range', min: 50, max: 600 } },
value: { control: { type: 'range', min: 0, max: 110 } },
spotlight: { control: 'boolean' },
roundedBars: { control: 'boolean' },
sparkline: { control: 'boolean' },
thresholdsBar: { control: 'boolean' },
gradient: { control: { type: 'radio' } },
gradient: { control: { type: 'boolean' } },
seriesCount: { control: { type: 'range', min: 1, max: 20 } },
segmentCount: { control: { type: 'range', min: 0, max: 100 } },
segmentSpacing: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
endpointMarker: { control: { type: 'select' }, options: ['none', 'point', 'glow'] },
colorScheme: {
control: { type: 'select' },
options: [
@@ -102,57 +120,17 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<Stack direction={'column'} gap={3} wrap="wrap">
<div>Bar width</div>
<Stack direction="row" alignItems="center" gap={3} wrap="wrap">
<RadialGaugeExample
seriesName="0.1"
value={args.value ?? 30}
color="blue"
gradient="auto"
barWidthFactor={0.1}
/>
<RadialGaugeExample
seriesName="0.4"
value={args.value ?? 40}
color="green"
gradient="auto"
barWidthFactor={0.4}
/>
<RadialGaugeExample
seriesName="0.6"
value={args.value ?? 60}
color="red"
gradient="auto"
barWidthFactor={0.6}
/>
<RadialGaugeExample
seriesName="0.8"
value={args.value ?? 70}
color="purple"
gradient="auto"
barWidthFactor={0.8}
/>
<RadialGaugeExample seriesName="0.1" value={args.value ?? 30} color="blue" gradient barWidthFactor={0.1} />
<RadialGaugeExample seriesName="0.4" value={args.value ?? 40} color="green" gradient barWidthFactor={0.4} />
<RadialGaugeExample seriesName="0.6" value={args.value ?? 60} color="red" gradient barWidthFactor={0.6} />
<RadialGaugeExample seriesName="0.8" value={args.value ?? 70} color="purple" gradient barWidthFactor={0.8} />
</Stack>
<div>Effects</div>
<Stack direction="row" alignItems="center" gap={3} wrap="wrap">
<RadialGaugeExample value={args.value ?? 30} spotlight glowBar glowCenter color="blue" gradient="auto" />
<RadialGaugeExample value={args.value ?? 40} spotlight glowBar glowCenter color="green" gradient="auto" />
<RadialGaugeExample
value={args.value ?? 60}
spotlight
glowBar
glowCenter
color="red"
gradient="auto"
roundedBars
/>
<RadialGaugeExample
value={args.value ?? 70}
spotlight
glowBar
glowCenter
color="purple"
gradient="auto"
roundedBars
/>
<RadialGaugeExample value={args.value ?? 30} glowBar glowCenter color="blue" gradient />
<RadialGaugeExample value={args.value ?? 40} glowBar glowCenter color="green" gradient />
<RadialGaugeExample value={args.value ?? 60} glowBar glowCenter color="red" gradient roundedBars />
<RadialGaugeExample value={args.value ?? 70} glowBar glowCenter color="purple" gradient roundedBars />
</Stack>
<div>Shape: Gauge & color scale</div>
<Stack direction="row" alignItems="center" gap={3} wrap="wrap">
@@ -160,14 +138,14 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={40}
shape="gauge"
width={250}
gradient="auto"
gradient
colorScheme={FieldColorModeId.ContinuousGrYlRd}
glowCenter={true}
barWidthFactor={0.6}
/>
<RadialGaugeExample
colorScheme={FieldColorModeId.ContinuousGrYlRd}
gradient="auto"
gradient
width={250}
value={90}
barWidthFactor={0.6}
@@ -183,9 +161,8 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={args.value ?? 70}
color="blue"
shape="gauge"
gradient="auto"
gradient
sparkline={true}
spotlight
glowBar={true}
glowCenter={true}
barWidthFactor={0.2}
@@ -194,9 +171,8 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={args.value ?? 30}
color="green"
shape="gauge"
gradient="auto"
gradient
sparkline={true}
spotlight
glowBar={true}
glowCenter={true}
barWidthFactor={0.8}
@@ -206,9 +182,8 @@ export const Examples: StoryFn<StoryProps> = (args) => {
color="red"
shape="gauge"
width={250}
gradient="auto"
gradient
sparkline={true}
spotlight
glowBar={true}
glowCenter={true}
barWidthFactor={0.2}
@@ -218,9 +193,8 @@ export const Examples: StoryFn<StoryProps> = (args) => {
color="red"
width={250}
shape="gauge"
gradient="auto"
gradient
sparkline={true}
spotlight
glowBar={true}
glowCenter={true}
barWidthFactor={0.8}
@@ -231,7 +205,7 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<RadialGaugeExample
value={args.value ?? 70}
color="green"
gradient="auto"
gradient
glowCenter={true}
segmentCount={8}
segmentSpacing={0.1}
@@ -240,7 +214,7 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<RadialGaugeExample
value={args.value ?? 30}
color="purple"
gradient="auto"
gradient
segmentCount={30}
glowCenter={true}
barWidthFactor={0.6}
@@ -248,7 +222,7 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<RadialGaugeExample
value={args.value ?? 50}
color="red"
gradient="auto"
gradient
segmentCount={40}
glowCenter={true}
barWidthFactor={1}
@@ -260,7 +234,6 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<RadialGaugeExample
value={args.value ?? 80}
colorScheme={FieldColorModeId.ContinuousGrYlRd}
spotlight
glowBar={true}
glowCenter={true}
segmentCount={20}
@@ -270,9 +243,8 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={args.value ?? 80}
width={250}
colorScheme={FieldColorModeId.ContinuousGrYlRd}
spotlight
shape="gauge"
gradient="auto"
gradient
glowBar={true}
glowCenter={true}
segmentCount={40}
@@ -285,10 +257,9 @@ export const Examples: StoryFn<StoryProps> = (args) => {
<RadialGaugeExample
value={args.value ?? 70}
colorScheme={FieldColorModeId.Thresholds}
gradient="auto"
gradient
thresholdsBar={true}
roundedBars={false}
spotlight
glowCenter={true}
barWidthFactor={0.7}
/>
@@ -296,7 +267,7 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={args.value ?? 70}
width={250}
colorScheme={FieldColorModeId.Thresholds}
gradient="auto"
gradient
glowCenter={true}
thresholdsBar={true}
roundedBars={false}
@@ -307,7 +278,7 @@ export const Examples: StoryFn<StoryProps> = (args) => {
value={args.value ?? 70}
width={250}
colorScheme={FieldColorModeId.Thresholds}
gradient="auto"
gradient
glowCenter={true}
thresholdsBar={true}
roundedBars={false}
@@ -347,14 +318,12 @@ export const Temp: StoryFn<StoryProps> = (args) => {
shape="gauge"
roundedBars={false}
barWidthFactor={0.8}
spotlight
/>
</Stack>
);
};
interface ExampleProps {
gradient?: RadialGradientMode;
color?: string;
seriesName?: string;
value?: number;
@@ -363,7 +332,7 @@ interface ExampleProps {
max?: number;
width?: number;
height?: number;
spotlight?: boolean;
gradient?: boolean;
glowBar?: boolean;
glowCenter?: boolean;
barWidthFactor?: number;
@@ -376,12 +345,12 @@ interface ExampleProps {
roundedBars?: boolean;
thresholdsBar?: boolean;
colorScheme?: FieldColorModeId;
endpointMarker?: RadialGaugeProps['endpointMarker'];
decimals?: number;
showScaleLabels?: boolean;
}
export function RadialGaugeExample({
gradient = 'none',
color,
seriesName = 'Server A',
value = 70,
@@ -390,7 +359,7 @@ export function RadialGaugeExample({
max = 100,
width = 200,
height = 200,
spotlight = false,
gradient = false,
glowBar = false,
glowCenter = false,
barWidthFactor = 0.4,
@@ -403,6 +372,7 @@ export function RadialGaugeExample({
roundedBars = false,
thresholdsBar = false,
colorScheme = FieldColorModeId.Thresholds,
endpointMarker = 'glow',
decimals = 0,
showScaleLabels,
}: ExampleProps) {
@@ -480,7 +450,6 @@ export function RadialGaugeExample({
barWidthFactor={barWidthFactor}
gradient={gradient}
shape={shape}
spotlight={spotlight}
glowBar={glowBar}
glowCenter={glowCenter}
textMode={textMode}
@@ -490,6 +459,7 @@ export function RadialGaugeExample({
roundedBars={roundedBars}
thresholdsBar={thresholdsBar}
showScaleLabels={showScaleLabels}
endpointMarker={endpointMarker}
/>
);
}
packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
+20 -5
View File
@@ -1,13 +1,28 @@
import { render, screen } from '@testing-library/react';
import { ComponentProps } from 'react';
import { RadialGaugeExample } from './RadialGauge.story';
describe('RadialGauge', () => {
it('should render', () => {
render(<RadialGaugeExample />);
expect(screen.getByRole('img')).toBeInTheDocument();
});
it.each([
{ description: 'default', props: {} },
{ description: 'gauge shape', props: { shape: 'gauge' } },
{ description: 'with gradient', props: { gradient: true } },
{ description: 'with glow bar', props: { glowBar: true } },
{ description: 'with glow center', props: { glowCenter: true } },
{ description: 'with segments', props: { segmentCount: 5 } },
{ description: 'with rounded bars', props: { roundedBars: true } },
{ description: 'with endpoint marker glow', props: { roundedBars: true, endpointMarker: 'glow' } },
{ description: 'with endpoint marker point', props: { roundedBars: true, endpointMarker: 'point' } },
{ description: 'with thresholds bar', props: { thresholdsBar: true } },
{ description: 'with sparkline', props: { sparkline: true } },
] satisfies Array<{ description: string; props?: ComponentProps<typeof RadialGaugeExample> }>)(
'should render $description without throwing',
({ props }) => {
render(<RadialGaugeExample {...props} />);
expect(screen.getByRole('img')).toBeInTheDocument();
}
);
it('should render threshold labels', () => {
render(<RadialGaugeExample showScaleLabels={true} />);
packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
+24 -45
View File
@@ -1,14 +1,7 @@
import { css, cx } from '@emotion/css';
import { isNumber } from 'lodash';
import { useId } from 'react';
import {
DisplayValueAlignmentFactors,
FieldDisplay,
getDisplayProcessor,
GrafanaTheme2,
TimeRange,
} from '@grafana/data';
import { DisplayValueAlignmentFactors, FALLBACK_COLOR, FieldDisplay, GrafanaTheme2, TimeRange } from '@grafana/data';
import { t } from '@grafana/i18n';
import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
@@ -16,12 +9,13 @@ import { getFormattedThresholds } from '../Gauge/utils';
import { RadialBar } from './RadialBar';
import { RadialBarSegmented } from './RadialBarSegmented';
import { RadialColorDefs } from './RadialColorDefs';
import { RadialScaleLabels } from './RadialScaleLabels';
import { RadialSparkline } from './RadialSparkline';
import { RadialText } from './RadialText';
import { ThresholdsBar } from './ThresholdsBar';
import { buildGradientColors } from './colors';
import { GlowGradient, MiddleCircleGlow, SpotlightGradient } from './effects';
import { RadialShape, RadialTextMode } from './types';
import { calculateDimensions, getValueAngleForValue } from './utils';
export interface RadialGaugeProps {
@@ -32,7 +26,7 @@ export interface RadialGaugeProps {
* Circle or gauge (partial circle)
*/
shape?: RadialShape;
gradient?: RadialGradientMode;
gradient?: boolean;
/**
* Bar width is always relative to size of the gauge.
* But this gives you control over the width relative to size.
@@ -40,12 +34,14 @@ export interface RadialGaugeProps {
* Defaults to 0.4
**/
barWidthFactor?: number;
/** Adds a white spotlight for the end position */
spotlight?: boolean;
glowBar?: boolean;
glowCenter?: boolean;
roundedBars?: boolean;
thresholdsBar?: boolean;
/**
* Specify if an endpoint marker should be shown at the end of the bar
*/
endpointMarker?: 'point' | 'glow';
/**
* Number of segments depends on size of gauge but this
* factor 1-10 gives you relative control
@@ -75,10 +71,6 @@ export interface RadialGaugeProps {
timeRange?: TimeRange;
}
export type RadialGradientMode = 'none' | 'auto';
export type RadialTextMode = 'auto' | 'value_and_name' | 'value' | 'name' | 'none';
export type RadialShape = 'circle' | 'gauge';
/**
* https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-radialgauge--docs
*/
@@ -87,9 +79,8 @@ export function RadialGauge(props: RadialGaugeProps) {
width = 256,
height = 256,
shape = 'circle',
gradient = 'none',
gradient = false,
barWidthFactor = 0.4,
spotlight = false,
glowBar = false,
glowCenter = false,
textMode = 'auto',
@@ -99,6 +90,7 @@ export function RadialGauge(props: RadialGaugeProps) {
roundedBars = true,
thresholdsBar = false,
showScaleLabels = false,
endpointMarker,
onClick,
values,
} = props;
@@ -121,7 +113,8 @@ export function RadialGauge(props: RadialGaugeProps) {
for (let barIndex = 0; barIndex < values.length; barIndex++) {
const displayValue = values[barIndex];
const { angle, angleRange } = getValueAngleForValue(displayValue, startAngle, endAngle);
const color = displayValue.display.color ?? 'gray';
const gradientStops = buildGradientColors(gradient, theme, displayValue);
const color = displayValue.display.color ?? FALLBACK_COLOR;
const dimensions = calculateDimensions(
width,
height,
@@ -134,20 +127,12 @@ export function RadialGauge(props: RadialGaugeProps) {
showScaleLabels
);
const displayProcessor = getFieldDisplayProcessor(displayValue);
// FIXME: I want to move the ids for these filters into a context which the children
// can reference via a hook, rather than passing them down as props
const spotlightGradientId = `spotlight-${barIndex}-${gaugeId}`;
const glowFilterId = `glow-${gaugeId}`;
const colorDefs = new RadialColorDefs({
gradient,
fieldDisplay: displayValue,
theme,
dimensions,
shape,
gaugeId,
displayProcessor,
});
if (spotlight && theme.isDark) {
if (endpointMarker === 'glow') {
defs.push(
<SpotlightGradient
key={spotlightGradientId}
@@ -171,7 +156,8 @@ export function RadialGauge(props: RadialGaugeProps) {
glowFilter={`url(#${glowFilterId})`}
segmentCount={segmentCount}
segmentSpacing={segmentSpacing}
colorDefs={colorDefs}
shape={shape}
gradient={gradientStops}
/>
);
} else {
@@ -179,13 +165,16 @@ export function RadialGauge(props: RadialGaugeProps) {
<RadialBar
key={`radial-bar-${barIndex}-${gaugeId}`}
dimensions={dimensions}
colorDefs={colorDefs}
angle={angle}
angleRange={angleRange}
startAngle={startAngle}
roundedBars={roundedBars}
spotlightStroke={`url(#${spotlightGradientId})`}
glowFilter={`url(#${glowFilterId})`}
endpointMarkerGlowFilter={`url(#${spotlightGradientId})`}
shape={shape}
gradient={gradientStops}
fieldDisplay={displayValue}
endpointMarker={endpointMarker}
/>
);
}
@@ -245,7 +234,8 @@ export function RadialGauge(props: RadialGaugeProps) {
angleRange={angleRange}
roundedBars={roundedBars}
glowFilter={`url(#${glowFilterId})`}
colorDefs={colorDefs}
shape={shape}
gradient={gradientStops}
/>
);
}
@@ -291,17 +281,6 @@ export function RadialGauge(props: RadialGaugeProps) {
);
}
function getFieldDisplayProcessor(displayValue: FieldDisplay) {
if (displayValue.view && isNumber(displayValue.colIndex)) {
const dp = displayValue.view.getFieldDisplayProcessor(displayValue.colIndex);
if (dp) {
return dp;
}
}
return getDisplayProcessor();
}
function getStyles(theme: GrafanaTheme2) {
return {
vizWrapper: css({
packages/grafana-ui/src/components/RadialGauge/RadialScaleLabels.tsx
+58 -61
View File
@@ -1,87 +1,84 @@
import { memo } from 'react';
import { FieldDisplay, GrafanaTheme2, Threshold } from '@grafana/data';
import { t } from '@grafana/i18n';
import { measureText } from '../../utils/measureText';
import { GaugeDimensions, toCartesian } from './utils';
import { RadialGaugeDimensions } from './types';
import { getFieldConfigMinMax, toCartesian } from './utils';
interface RadialScaleLabelsProps {
fieldDisplay: FieldDisplay;
theme: GrafanaTheme2;
thresholds: Threshold[];
dimensions: GaugeDimensions;
dimensions: RadialGaugeDimensions;
startAngle: number;
endAngle: number;
angleRange: number;
}
export function RadialScaleLabels({
fieldDisplay,
thresholds,
theme,
dimensions,
startAngle,
endAngle,
angleRange,
}: RadialScaleLabelsProps) {
const { centerX, centerY, scaleLabelsFontSize, scaleLabelsRadius } = dimensions;
const LINE_HEIGHT_FACTOR = 1.2;
const fieldConfig = fieldDisplay.field;
const min = fieldConfig.min ?? 0;
const max = fieldConfig.max ?? 100;
export const RadialScaleLabels = memo(
({ fieldDisplay, thresholds, theme, dimensions, startAngle, endAngle, angleRange }: RadialScaleLabelsProps) => {
const { centerX, centerY, scaleLabelsFontSize, scaleLabelsRadius } = dimensions;
const [min, max] = getFieldConfigMinMax(fieldDisplay);
const fontSize = scaleLabelsFontSize;
const textLineHeight = scaleLabelsFontSize * 1.2;
const radius = scaleLabelsRadius - textLineHeight;
const fontSize = scaleLabelsFontSize;
const textLineHeight = scaleLabelsFontSize * LINE_HEIGHT_FACTOR;
const radius = scaleLabelsRadius - textLineHeight;
function getTextPosition(text: string, value: number, index: number) {
const isLast = index === thresholds.length - 1;
const isFirst = index === 0;
function getTextPosition(text: string, value: number, index: number) {
const isLast = index === thresholds.length - 1;
const isFirst = index === 0;
let valueDeg = ((value - min) / (max - min)) * angleRange;
let finalAngle = startAngle + valueDeg;
let valueDeg = ((value - min) / (max - min)) * angleRange;
let finalAngle = startAngle + valueDeg;
// Now adjust the final angle based on the label text width and the labels position on the arc
let measure = measureText(text, fontSize, theme.typography.fontWeightMedium);
let textWidthAngle = (measure.width / (2 * Math.PI * radius)) * angleRange;
// Now adjust the final angle based on the label text width and the labels position on the arc
let measure = measureText(text, fontSize, theme.typography.fontWeightMedium);
let textWidthAngle = (measure.width / (2 * Math.PI * radius)) * angleRange;
// the centering is different for gauge or circle shapes for some reason
finalAngle -= endAngle < 180 ? textWidthAngle : textWidthAngle / 2;
// the centering is different for gauge or circle shapes for some reason
finalAngle -= endAngle < 180 ? textWidthAngle : textWidthAngle / 2;
// For circle gauges we need to shift the first label more
if (isFirst) {
finalAngle += textWidthAngle;
// For circle gauges we need to shift the first label more
if (isFirst) {
finalAngle += textWidthAngle;
}
// For circle gauges we need to shift the last label more
if (isLast && endAngle === 360) {
finalAngle -= textWidthAngle;
}
const position = toCartesian(centerX, centerY, radius, finalAngle);
return { ...position, transform: `rotate(${finalAngle}, ${position.x}, ${position.y})` };
}
// For circle gauges we need to shift the last label more
if (isLast && endAngle === 360) {
finalAngle -= textWidthAngle;
}
const position = toCartesian(centerX, centerY, radius, finalAngle);
return { ...position, transform: `rotate(${finalAngle}, ${position.x}, ${position.y})` };
return (
<g>
{thresholds.map((threshold, index) => {
const labelPos = getTextPosition(String(threshold.value), threshold.value, index);
return (
<text
key={index}
x={labelPos.x}
y={labelPos.y}
fontSize={fontSize}
fill={theme.colors.text.primary}
transform={labelPos.transform}
aria-label={t(`gauge.threshold`, 'Threshold {{value}}', { value: threshold.value })}
>
{threshold.value}
</text>
);
})}
</g>
);
}
);
return (
<g>
{thresholds.map((threshold, index) => {
const labelPos = getTextPosition(String(threshold.value), threshold.value, index);
return (
<text
key={index}
x={labelPos.x}
y={labelPos.y}
fontSize={fontSize}
fill={theme.colors.text.primary}
transform={labelPos.transform}
aria-label={t(`gauge.threshold`, 'Threshold {{value}}', { value: threshold.value })}
>
{threshold.value}
</text>
);
})}
</g>
);
}
RadialScaleLabels.displayName = 'RadialScaleLabels';
packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx
+63 -36
View File
@@ -1,49 +1,76 @@
import { memo, useMemo } from 'react';
import { FieldDisplay, GrafanaTheme2, FieldConfig } from '@grafana/data';
import { GraphFieldConfig, GraphGradientMode, LineInterpolation } from '@grafana/schema';
import { Sparkline } from '../Sparkline/Sparkline';
import { RadialShape, RadialTextMode } from './RadialGauge';
import { GaugeDimensions } from './utils';
import { RadialShape, RadialTextMode, RadialGaugeDimensions } from './types';
interface RadialSparklineProps {
sparkline: FieldDisplay['sparkline'];
dimensions: GaugeDimensions;
theme: GrafanaTheme2;
color?: string;
shape?: RadialShape;
dimensions: RadialGaugeDimensions;
shape: RadialShape;
sparkline: FieldDisplay['sparkline'];
textMode: Exclude<RadialTextMode, 'auto'>;
theme: GrafanaTheme2;
}
export function RadialSparkline({ sparkline, dimensions, theme, color, shape, textMode }: RadialSparklineProps) {
const { radius, barWidth } = dimensions;
if (!sparkline) {
return null;
const SPARKLINE_HEIGHT_DIVISOR = 4;
const SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE = 4;
const SPARKLINE_WIDTH_FACTOR_ARC = 1.4;
const SPARKLINE_WIDTH_FACTOR_CIRCLE = 1.6;
const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE = 4;
const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE_NAME_AND_VALUE = 3.3;
const SPARKLINE_SPACING = 8;
export function getSparklineDimensions(
radius: number,
barWidth: number,
showNameAndValue: boolean,
shape: RadialShape
): { width: number; height: number } {
const height = radius / (showNameAndValue ? SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE : SPARKLINE_HEIGHT_DIVISOR);
const width = radius * (shape === 'gauge' ? SPARKLINE_WIDTH_FACTOR_ARC : SPARKLINE_WIDTH_FACTOR_CIRCLE) - barWidth;
return { width, height };
}
export const RadialSparkline = memo(
({ sparkline, dimensions, theme, color, shape, textMode }: RadialSparklineProps) => {
const { radius, barWidth } = dimensions;
const showNameAndValue = textMode === 'value_and_name';
const { width, height } = getSparklineDimensions(radius, barWidth, showNameAndValue, shape);
const topPos =
shape === 'gauge'
? dimensions.gaugeBottomY - height - SPARKLINE_SPACING
: `calc(50% + ${radius / (showNameAndValue ? SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE_NAME_AND_VALUE : SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE)}px)`;
const config: FieldConfig<GraphFieldConfig> = useMemo(
() => ({
color: {
mode: 'fixed',
fixedColor: color ?? 'blue',
},
custom: {
gradientMode: GraphGradientMode.Opacity,
fillOpacity: 40,
lineInterpolation: LineInterpolation.Smooth,
},
}),
[color]
);
if (!sparkline) {
return null;
}
return (
<div style={{ position: 'absolute', top: topPos }}>
<Sparkline height={height} width={width} sparkline={sparkline} theme={theme} config={config} />
</div>
);
}
);
const showNameAndValue = textMode === 'value_and_name';
const height = radius / (showNameAndValue ? 4 : 3);
const width = radius * (shape === 'gauge' ? 1.6 : 1.4) - barWidth;
const topPos =
shape === 'gauge'
? `${dimensions.gaugeBottomY - height}px`
: `calc(50% + ${radius / (showNameAndValue ? 3.3 : 4)}px)`;
const config: FieldConfig<GraphFieldConfig> = {
color: {
mode: 'fixed',
fixedColor: color ?? 'blue',
},
custom: {
gradientMode: GraphGradientMode.Opacity,
fillOpacity: 40,
lineInterpolation: LineInterpolation.Smooth,
},
};
return (
<div style={{ position: 'absolute', top: topPos }}>
<Sparkline height={height} width={width} sparkline={sparkline} theme={theme} config={config} />
</div>
);
}
RadialSparkline.displayName = 'RadialSparkline';
packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
+118 -104
View File
@@ -1,4 +1,5 @@
import { css } from '@emotion/css';
import { memo } from 'react';
import {
DisplayValue,
@@ -11,13 +12,12 @@ import {
import { useStyles2 } from '../../themes/ThemeContext';
import { calculateFontSize } from '../../utils/measureText';
import { RadialShape, RadialTextMode } from './RadialGauge';
import { GaugeDimensions } from './utils';
import { RadialShape, RadialTextMode, RadialGaugeDimensions } from './types';
interface RadialTextProps {
displayValue: DisplayValue;
theme: GrafanaTheme2;
dimensions: GaugeDimensions;
dimensions: RadialGaugeDimensions;
textMode: Exclude<RadialTextMode, 'auto'>;
shape: RadialShape;
sparkline?: FieldSparkline;
@@ -26,123 +26,137 @@ interface RadialTextProps {
nameManualFontSize?: number;
}
export function RadialText({
displayValue,
theme,
dimensions,
textMode,
shape,
sparkline,
alignmentFactors,
valueManualFontSize,
nameManualFontSize,
}: RadialTextProps) {
const styles = useStyles2(getStyles);
const { centerX, centerY, radius, barWidth } = dimensions;
const LINE_HEIGHT_FACTOR = 1.21;
const VALUE_WIDTH_TO_RADIUS_FACTOR = 0.82;
const NAME_TO_HEIGHT_FACTOR = 0.45;
const LARGE_RADIUS_SCALING_DECAY = 0.86;
const MAX_TEXT_WIDTH_DIVISOR = 7;
const MAX_NAME_HEIGHT_DIVISOR = 4;
const VALUE_SPACE_PERCENTAGE = 0.7;
const SPARKLINE_SPACING = 8;
const MIN_VALUE_FONT_SIZE = 1;
const MIN_NAME_FONT_SIZE = 10;
const MIN_UNIT_FONT_SIZE = 6;
if (textMode === 'none') {
return null;
}
export const RadialText = memo(
({
displayValue,
theme,
dimensions,
textMode,
shape,
sparkline,
alignmentFactors,
valueManualFontSize,
nameManualFontSize,
}: RadialTextProps) => {
const styles = useStyles2(getStyles);
const { centerX, centerY, radius, barWidth } = dimensions;
const nameToAlignTo = (alignmentFactors ? alignmentFactors.title : displayValue.title) ?? '';
const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : displayValue);
if (textMode === 'none') {
return null;
}
const showValue = textMode === 'value' || textMode === 'value_and_name';
const showName = textMode === 'name' || textMode === 'value_and_name';
const maxTextWidth = radius * 2 - barWidth - radius / 7;
const nameToAlignTo = (alignmentFactors ? alignmentFactors.title : displayValue.title) ?? '';
const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : displayValue);
// Not sure where this comes from but svg text is not using body line-height
const lineHeight = 1.21;
const valueWidthToRadiusFactor = 0.82;
const nameToHeightFactor = 0.45;
const largeRadiusScalingDecay = 0.86;
const showValue = textMode === 'value' || textMode === 'value_and_name';
const showName = textMode === 'name' || textMode === 'value_and_name';
const maxTextWidth = radius * 2 - barWidth - radius / MAX_TEXT_WIDTH_DIVISOR;
// This pow 0.92 factor is to create a decay so the font size does not become rediculously large for very large panels
let maxValueHeight = valueWidthToRadiusFactor * Math.pow(radius, largeRadiusScalingDecay);
let maxNameHeight = radius / 4;
// This pow 0.92 factor is to create a decay so the font size does not become rediculously large for very large panels
let maxValueHeight = VALUE_WIDTH_TO_RADIUS_FACTOR * Math.pow(radius, LARGE_RADIUS_SCALING_DECAY);
let maxNameHeight = radius / MAX_NAME_HEIGHT_DIVISOR;
if (showValue && showName) {
maxValueHeight = valueWidthToRadiusFactor * Math.pow(radius, largeRadiusScalingDecay);
maxNameHeight = nameToHeightFactor * Math.pow(radius, largeRadiusScalingDecay);
}
if (showValue && showName) {
maxValueHeight = VALUE_WIDTH_TO_RADIUS_FACTOR * Math.pow(radius, LARGE_RADIUS_SCALING_DECAY);
maxNameHeight = NAME_TO_HEIGHT_FACTOR * Math.pow(radius, LARGE_RADIUS_SCALING_DECAY);
}
const valueFontSize =
valueManualFontSize ??
calculateFontSize(
valueToAlignTo,
maxTextWidth,
maxValueHeight,
lineHeight,
undefined,
theme.typography.body.fontWeight
const valueFontSize = Math.max(
valueManualFontSize ??
calculateFontSize(
valueToAlignTo,
maxTextWidth,
maxValueHeight,
LINE_HEIGHT_FACTOR,
undefined,
theme.typography.body.fontWeight
),
MIN_VALUE_FONT_SIZE
);
const nameFontSize =
nameManualFontSize ??
calculateFontSize(
nameToAlignTo,
maxTextWidth,
maxNameHeight,
lineHeight,
undefined,
theme.typography.body.fontWeight
const nameFontSize = Math.max(
nameManualFontSize ??
calculateFontSize(
nameToAlignTo,
maxTextWidth,
maxNameHeight,
LINE_HEIGHT_FACTOR,
undefined,
theme.typography.body.fontWeight
),
MIN_NAME_FONT_SIZE
);
const unitFontSize = Math.max(valueFontSize * 0.7, 5);
const valueHeight = valueFontSize * lineHeight;
const nameHeight = nameFontSize * lineHeight;
const unitFontSize = Math.max(valueFontSize * VALUE_SPACE_PERCENTAGE, MIN_UNIT_FONT_SIZE);
const valueHeight = valueFontSize * LINE_HEIGHT_FACTOR;
const nameHeight = nameFontSize * LINE_HEIGHT_FACTOR;
const valueY = showName ? centerY - nameHeight * 0.3 : centerY;
const nameY = showValue ? valueY + valueHeight * 0.7 : centerY;
const nameColor = showValue ? theme.colors.text.secondary : theme.colors.text.primary;
const suffixShift = (valueFontSize - unitFontSize * 1.2) / 2;
const valueY = showName ? centerY - nameHeight * (1 - VALUE_SPACE_PERCENTAGE) : centerY;
const nameY = showValue ? valueY + valueHeight * VALUE_SPACE_PERCENTAGE : centerY;
const nameColor = showValue ? theme.colors.text.secondary : theme.colors.text.primary;
const suffixShift = (valueFontSize - unitFontSize * LINE_HEIGHT_FACTOR) / 2;
// adjust the text up on gauges and when sparklines are present
let yOffset = 0;
if (shape === 'gauge') {
// we render from the center of the gauge, so move up by half of half of the total height
yOffset -= (valueHeight + nameHeight) / 4;
}
if (sparkline) {
yOffset -= 8;
// adjust the text up on gauges and when sparklines are present
let yOffset = 0;
if (shape === 'gauge') {
// we render from the center of the gauge, so move up by half of half of the total height
yOffset -= (valueHeight + nameHeight) / 4;
}
if (sparkline) {
yOffset -= SPARKLINE_SPACING;
}
return (
<g transform={`translate(0, ${yOffset})`}>
{showValue && (
<text
x={centerX}
y={valueY}
fontSize={valueFontSize}
fill={theme.colors.text.primary}
className={styles.text}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan fontSize={unitFontSize}>{displayValue.prefix ?? ''}</tspan>
<tspan>{displayValue.text}</tspan>
<tspan className={styles.text} fontSize={unitFontSize} dy={suffixShift}>
{displayValue.suffix ?? ''}
</tspan>
</text>
)}
{showName && (
<text
fontSize={nameFontSize}
x={centerX}
y={nameY}
textAnchor="middle"
dominantBaseline="middle"
fill={nameColor}
>
{displayValue.title}
</text>
)}
</g>
);
}
);
return (
<g transform={`translate(0, ${yOffset})`}>
{showValue && (
<text
x={centerX}
y={valueY}
fontSize={valueFontSize}
fill={theme.colors.text.primary}
className={styles.text}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan fontSize={unitFontSize}>{displayValue.prefix ?? ''}</tspan>
<tspan>{displayValue.text}</tspan>
<tspan className={styles.text} fontSize={unitFontSize} dy={suffixShift}>
{displayValue.suffix ?? ''}
</tspan>
</text>
)}
{showName && (
<text
fontSize={nameFontSize}
x={centerX}
y={nameY}
textAnchor="middle"
dominantBaseline="middle"
fill={nameColor}
>
{displayValue.title}
</text>
)}
</g>
);
}
RadialText.displayName = 'RadialText';
const getStyles = (theme: GrafanaTheme2) => ({
const getStyles = (_theme: GrafanaTheme2) => ({
text: css({
verticalAlign: 'bottom',
}),
packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx
+21 -21
View File
@@ -1,20 +1,22 @@
import { FieldDisplay, Threshold } from '@grafana/data';
import { RadialArcPath } from './RadialArcPath';
import { RadialColorDefs } from './RadialColorDefs';
import { GaugeDimensions } from './utils';
import { GradientStop, RadialGaugeDimensions, RadialShape } from './types';
import { getFieldConfigMinMax } from './utils';
export interface Props {
dimensions: GaugeDimensions;
interface ThresholdsBarProps {
dimensions: RadialGaugeDimensions;
angleRange: number;
startAngle: number;
endAngle: number;
shape: RadialShape;
fieldDisplay: FieldDisplay;
roundedBars?: boolean;
glowFilter?: string;
colorDefs: RadialColorDefs;
thresholds: Threshold[];
gradient?: GradientStop[];
}
export function ThresholdsBar({
dimensions,
fieldDisplay,
@@ -22,19 +24,18 @@ export function ThresholdsBar({
angleRange,
roundedBars,
glowFilter,
colorDefs,
thresholds,
}: Props) {
const fieldConfig = fieldDisplay.field;
const min = fieldConfig.min ?? 0;
const max = fieldConfig.max ?? 100;
shape,
gradient,
}: ThresholdsBarProps) {
const thresholdDimensions = {
...dimensions,
barWidth: dimensions.thresholdsBarWidth,
radius: dimensions.thresholdsBarRadius,
};
const [min, max] = getFieldConfigMinMax(fieldDisplay);
let currentStart = startAngle;
let paths: React.ReactNode[] = [];
@@ -48,27 +49,26 @@ export function ThresholdsBar({
valueDeg = 0;
}
let lengthDeg = valueDeg - currentStart + startAngle;
const lengthDeg = valueDeg - currentStart + startAngle;
const colorProps = gradient ? { gradient } : { color: threshold.color };
paths.push(
<RadialArcPath
key={i}
startAngle={currentStart}
arcLengthDeg={lengthDeg}
barEndcaps={shape === 'circle' && roundedBars}
dimensions={thresholdDimensions}
roundedBars={roundedBars}
fieldDisplay={fieldDisplay}
glowFilter={glowFilter}
color={colorDefs.getColor(threshold.color, true)}
roundedBars={roundedBars}
shape={shape}
startAngle={currentStart}
{...colorProps}
/>
);
currentStart += lengthDeg;
}
return (
<>
<g>{paths}</g>
<defs>{colorDefs.getDefs()}</defs>
</>
);
return <g>{paths}</g>;
}
packages/grafana-ui/src/components/RadialGauge/__snapshots__/colors.test.ts.snap
+144
View File
@@ -0,0 +1,144 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RadialGauge color utils buildGradientColors should map threshold colors correctly (with baseColor if displayProcessor does not return colors) 1`] = `
[
{
"color": "#444444",
"percent": 0,
},
{
"color": "#FADE2A",
"percent": 0.5,
},
{
"color": "#F2495C",
"percent": 0.8,
},
{
"color": "#444444",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should map threshold colors correctly (with baseColor if displayProcessor does not return colors) 2`] = `
[
{
"color": "#FF0000",
"percent": 0,
},
{
"color": "#FADE2A",
"percent": 0.5,
},
{
"color": "#F2495C",
"percent": 0.8,
},
{
"color": "#FF0000",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should return gradient colors for by-value color mode in dark theme 1`] = `
[
{
"color": "#181b1f",
"percent": 0,
},
{
"color": "#1F60C4",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should return gradient colors for by-value color mode in light theme 1`] = `
[
{
"color": "#ffffff",
"percent": 0,
},
{
"color": "#1250B0",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should return gradient colors for continuous color modes 1`] = `
[
{
"color": "rgb(0, 32, 81)",
"percent": 0,
},
{
"color": "rgb(17, 54, 108)",
"percent": 0.125,
},
{
"color": "rgb(60, 77, 110)",
"percent": 0.25,
},
{
"color": "rgb(98, 100, 111)",
"percent": 0.375,
},
{
"color": "rgb(127, 124, 117)",
"percent": 0.5,
},
{
"color": "rgb(154, 148, 120)",
"percent": 0.625,
},
{
"color": "rgb(187, 175, 113)",
"percent": 0.75,
},
{
"color": "rgb(226, 203, 92)",
"percent": 0.875,
},
{
"color": "rgb(253, 234, 69)",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should return gradient colors for fixed color mode in dark theme 1`] = `
[
{
"color": "#37237a",
"percent": 0,
},
{
"color": "#a146da",
"percent": 0.75,
},
{
"color": "#a146da",
"percent": 1,
},
]
`;
exports[`RadialGauge color utils buildGradientColors should return gradient colors for fixed color mode in light theme 1`] = `
[
{
"color": "#a146da",
"percent": 0,
},
{
"color": "#3e2b9a",
"percent": 0.75,
},
{
"color": "#3e2b9a",
"percent": 1,
},
]
`;
packages/grafana-ui/src/components/RadialGauge/__snapshots__/utils.test.ts.snap
+17
View File
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RadialGauge utils drawRadialArcPath should draw correct path for center x and y 1`] = `"M 150 110 A 90 90 0 1 1 149.98429203681178 110.00000137077838 A 10 10 0 0 1 149.98778269529805 130.00000106616096 A 70 70 0 1 0 150 130 A 10 10 0 0 1 150 110 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for half arc 1`] = `"M 100 10 A 90 90 0 0 1 100 190 L 100 170 A 70 70 0 0 0 100 30 L 100 10 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for narrow bar width 1`] = `"M 100 17.5 A 82.5 82.5 0 0 1 100 182.5 L 100 177.5 A 77.5 77.5 0 0 0 100 22.5 L 100 17.5 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for narrow radius 1`] = `"M 100 40 A 60 60 0 0 1 100 160 L 100 140 A 40 40 0 0 0 100 60 L 100 40 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for quarter arc 1`] = `"M 100 10 A 90 90 0 0 1 190 100 L 170 100 A 70 70 0 0 0 100 30 L 100 10 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for rounded bars 1`] = `"M 100 10 A 90 90 0 1 1 10 100.00000000000001 A 10 10 0 0 1 30 100.00000000000001 A 70 70 0 1 0 100 30 A 10 10 0 0 1 100 10 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for three quarter arc 1`] = `"M 100 10 A 90 90 0 1 1 10 100.00000000000001 L 30 100.00000000000001 A 70 70 0 1 0 100 30 L 100 10 Z"`;
exports[`RadialGauge utils drawRadialArcPath should draw correct path for wide bar width 1`] = `"M 100 -5 A 105 105 0 0 1 100 205 L 100 155 A 55 55 0 0 0 100 45 L 100 -5 Z"`;
packages/grafana-ui/src/components/RadialGauge/colors.test.ts
+306
View File
@@ -0,0 +1,306 @@
import { defaultsDeep } from 'lodash';
import { createTheme, FALLBACK_COLOR, Field, FieldDisplay, FieldType, ThresholdsMode } from '@grafana/data';
import { FieldColorModeId } from '@grafana/schema';
import {
buildGradientColors,
colorAtGradientPercent,
getBarEndcapColors,
getEndpointMarkerColors,
getGradientCss,
getGradientStopsForPercent,
} from './colors';
export type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
describe('RadialGauge color utils', () => {
describe('buildGradientColors', () => {
const createField = (colorMode: FieldColorModeId): Field =>
({
type: FieldType.number,
name: 'Test Field',
config: {
color: {
mode: colorMode,
},
thresholds: {
mode: ThresholdsMode.Absolute,
steps: [
{ value: -Infinity, color: 'green' },
{ value: 50, color: 'yellow' },
{ value: 80, color: 'red' },
],
},
},
values: [70, 40, 30, 90, 55],
}) satisfies Field;
const buildFieldDisplay = (field: Field, part = {}): FieldDisplay =>
defaultsDeep(part, {
field: field.config,
colIndex: 0,
view: {
getFieldDisplayProcessor: jest.fn(() => jest.fn(() => ({ color: undefined }))),
},
display: {
numeric: 75,
},
});
it('should return the baseColor if gradient is false-y', () => {
expect(
buildGradientColors(false, createTheme(), buildFieldDisplay(createField(FieldColorModeId.Fixed)), '#FF0000')
).toEqual([
{ color: '#FF0000', percent: 0 },
{ color: '#FF0000', percent: 1 },
]);
expect(
buildGradientColors(undefined, createTheme(), buildFieldDisplay(createField(FieldColorModeId.Fixed)), '#FF0000')
).toEqual([
{ color: '#FF0000', percent: 0 },
{ color: '#FF0000', percent: 1 },
]);
});
it('uses the fallback color if no baseColor is set', () => {
expect(buildGradientColors(false, createTheme(), buildFieldDisplay(createField(FieldColorModeId.Fixed)))).toEqual(
[
{ color: FALLBACK_COLOR, percent: 0 },
{ color: FALLBACK_COLOR, percent: 1 },
]
);
});
it('should map threshold colors correctly (with baseColor if displayProcessor does not return colors)', () => {
expect(
buildGradientColors(
true,
createTheme(),
buildFieldDisplay(createField(FieldColorModeId.Thresholds), {
view: { getFieldDisplayProcessor: jest.fn(() => jest.fn(() => ({ color: '#444444' }))) },
})
)
).toMatchSnapshot();
});
it('should map threshold colors correctly (with baseColor if displayProcessor does not return colors)', () => {
expect(
buildGradientColors(true, createTheme(), buildFieldDisplay(createField(FieldColorModeId.Thresholds)), '#FF0000')
).toMatchSnapshot();
});
it('should return gradient colors for continuous color modes', () => {
expect(
buildGradientColors(
true,
createTheme(),
buildFieldDisplay(createField(FieldColorModeId.ContinuousCividis)),
'#00FF00'
)
).toMatchSnapshot();
});
it.each(['dark', 'light'] as const)('should return gradient colors for by-value color mode in %s theme', (mode) => {
expect(
buildGradientColors(
true,
createTheme({ colors: { mode } }),
buildFieldDisplay(createField(FieldColorModeId.ContinuousBlues))
)
).toMatchSnapshot();
});
it.each(['dark', 'light'] as const)('should return gradient colors for fixed color mode in %s theme', (mode) => {
expect(
buildGradientColors(
true,
createTheme({ colors: { mode } }),
buildFieldDisplay(createField(FieldColorModeId.Fixed)),
'#442299'
)
).toMatchSnapshot();
});
});
describe('colorAtGradientPercent', () => {
it('should calculate the color at a given percent in a gradient of two colors', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#0000ff', percent: 1 },
];
expect(colorAtGradientPercent(gradient, 0).toHexString()).toBe('#ff0000');
expect(colorAtGradientPercent(gradient, 0.25).toHexString()).toBe('#bf0040');
expect(colorAtGradientPercent(gradient, 0.5).toHexString()).toBe('#800080');
expect(colorAtGradientPercent(gradient, 0.75).toHexString()).toBe('#4000bf');
expect(colorAtGradientPercent(gradient, 1).toHexString()).toBe('#0000ff');
});
it('should calculate the color at a given percent in a gradient of multiple colors', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
expect(colorAtGradientPercent(gradient, 0).toHexString()).toBe('#ff0000');
expect(colorAtGradientPercent(gradient, 0.25).toHexString()).toBe('#808000');
expect(colorAtGradientPercent(gradient, 0.5).toHexString()).toBe('#00ff00');
expect(colorAtGradientPercent(gradient, 0.75).toHexString()).toBe('#008080');
expect(colorAtGradientPercent(gradient, 1).toHexString()).toBe('#0000ff');
});
it('will still work if unsorted', () => {
const gradient = [
{ color: '#0000ff', percent: 1 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#ff0000', percent: 0 },
];
expect(colorAtGradientPercent(gradient, 0).toHexString()).toBe('#ff0000');
expect(colorAtGradientPercent(gradient, 0.25).toHexString()).toBe('#808000');
expect(colorAtGradientPercent(gradient, 0.5).toHexString()).toBe('#00ff00');
expect(colorAtGradientPercent(gradient, 0.75).toHexString()).toBe('#008080');
expect(colorAtGradientPercent(gradient, 1).toHexString()).toBe('#0000ff');
});
it('should not throw an error when percent is outside 0-1 range', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#0000ff', percent: 1 },
];
expect(colorAtGradientPercent(gradient, -0.5).toHexString()).toBe('#ff0000');
expect(colorAtGradientPercent(gradient, 1.5).toHexString()).toBe('#0000ff');
});
it('should throw an error when less than two stops are provided', () => {
expect(() => {
colorAtGradientPercent([], 0.5);
}).toThrow('colorAtGradientPercent requires at least two color stops');
expect(() => {
colorAtGradientPercent([{ color: '#ff0000', percent: 0 }], 0.5);
}).toThrow('colorAtGradientPercent requires at least two color stops');
});
});
describe('getBarEndcapColors', () => {
it('should return the first and last colors in the gradient', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
const [startColor, endColor] = getBarEndcapColors(gradient);
expect(startColor).toBe('#ff0000');
expect(endColor).toBe('#0000ff');
});
it('should return the correct end color based on percent', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
const [startColor, endColor] = getBarEndcapColors(gradient, 0.25);
expect(startColor).toBe('#ff0000');
expect(endColor).toBe('#808000');
});
it('should handle gradients with only one colors', () => {
const gradient = [{ color: '#ff0000', percent: 0 }];
const [startColor, endColor] = getBarEndcapColors(gradient);
expect(startColor).toBe('#ff0000');
expect(endColor).toBe('#ff0000');
});
it('should throw an error when no colors are provided', () => {
expect(() => {
getBarEndcapColors([]);
}).toThrow('getBarEndcapColors requires at least one color stop');
});
});
describe('getGradientCss', () => {
it('should return conic-gradient CSS for circle shape', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
const css = getGradientCss(gradient, 'circle');
expect(css).toBe('conic-gradient(from 0deg, #ff0000 0.00%, #00ff00 50.00%, #0000ff 100.00%)');
});
it('should return linear-gradient CSS for arc shape', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
const css = getGradientCss(gradient, 'gauge');
expect(css).toBe('linear-gradient(90deg, #ff0000 0.00%, #00ff00 50.00%, #0000ff 100.00%)');
});
});
describe('getEndpointMarkerColors', () => {
it('should return contrasting guide dot colors based on the gradient endpoints and percent', () => {
const gradient = [
{ color: '#000000', percent: 0 },
{ color: '#ffffff', percent: 0.5 },
{ color: '#ffffff', percent: 1 },
];
const [startDotColor, endDotColor] = getEndpointMarkerColors(gradient, 0.35);
expect(startDotColor).toBe('#fbfbfb');
expect(endDotColor).toBe('#111217');
});
});
describe('getGradientStopsForPercent', () => {
it('should return the correct gradient stops for a given percent', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
const [left, right] = getGradientStopsForPercent(gradient, 0.25);
expect(left).toEqual({ color: '#ff0000', percent: 0 });
expect(right).toEqual({ color: '#00ff00', percent: 0.5 });
});
it('should handle edge cases where percent is at the boundaries', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
let [left, right] = getGradientStopsForPercent(gradient, 0);
expect(left).toEqual({ color: '#ff0000', percent: 0 });
expect(right).toEqual({ color: '#ff0000', percent: 0 });
[left, right] = getGradientStopsForPercent(gradient, 1);
expect(left).toEqual({ color: '#0000ff', percent: 1 });
expect(right).toEqual({ color: '#0000ff', percent: 1 });
});
it('should return the same stop if there is one that is equal to the percentage', () => {
const gradient = [
{ color: '#ff0000', percent: 0 },
{ color: '#00ff00', percent: 0.5 },
{ color: '#0000ff', percent: 1 },
];
let [left, right] = getGradientStopsForPercent(gradient, 0);
expect(left).toEqual({ color: '#ff0000', percent: 0 });
expect(right).toEqual({ color: '#ff0000', percent: 0 });
[left, right] = getGradientStopsForPercent(gradient, 0.5);
expect(left).toEqual({ color: '#00ff00', percent: 0.5 });
expect(right).toEqual({ color: '#00ff00', percent: 0.5 });
[left, right] = getGradientStopsForPercent(gradient, 1);
expect(left).toEqual({ color: '#0000ff', percent: 1 });
expect(right).toEqual({ color: '#0000ff', percent: 1 });
});
});
});
packages/grafana-ui/src/components/RadialGauge/colors.ts
+195
View File
@@ -0,0 +1,195 @@
import tinycolor from 'tinycolor2';
import { colorManipulator, FALLBACK_COLOR, FieldDisplay, getFieldColorMode, GrafanaTheme2 } from '@grafana/data';
import { FieldColorModeId } from '@grafana/schema';
import { GradientStop, RadialShape } from './types';
import { getFieldConfigMinMax, getFieldDisplayProcessor, getValuePercentageForValue } from './utils';
export function buildGradientColors(
gradient = false,
theme: GrafanaTheme2,
fieldDisplay: FieldDisplay,
baseColor = fieldDisplay.display.color ?? FALLBACK_COLOR
): GradientStop[] {
if (!gradient) {
return [
{ color: baseColor, percent: 0 },
{ color: baseColor, percent: 1 },
];
}
const colorMode = getFieldColorMode(fieldDisplay.field.color?.mode);
// thresholds get special handling
if (colorMode.id === FieldColorModeId.Thresholds) {
const displayProcessor = getFieldDisplayProcessor(fieldDisplay);
const [min, max] = getFieldConfigMinMax(fieldDisplay);
const thresholds = fieldDisplay.field.thresholds?.steps ?? [];
const result: Array<{ color: string; percent: number }> = [
{ color: displayProcessor(min).color ?? baseColor, percent: 0 },
];
for (const threshold of thresholds) {
if (threshold.value > min && threshold.value < max) {
const percent = (threshold.value - min) / (max - min);
result.push({ color: theme.visualization.getColorByName(threshold.color), percent });
}
}
result.push({ color: displayProcessor(max).color ?? baseColor, percent: 1 });
return result;
}
// Handle continuous color modes before other by-value modes
if (colorMode.isContinuous && colorMode.getColors) {
const colors = colorMode.getColors(theme);
return colors.map((color, idx) => ({ color, percent: idx / (colors.length - 1) }));
}
// For value-based colors, we want to stay more true to the specific color,
// so a radial gradient that adds a bit of light and shade works best
if (colorMode.isByValue) {
const darkerColor = tinycolor(baseColor).darken(5);
const lighterColor = tinycolor(baseColor).spin(20).lighten(10);
const color1 = theme.isDark ? lighterColor : darkerColor;
const color2 = theme.isDark ? darkerColor : lighterColor;
return [
{ color: color1.toString(), percent: 0 },
{ color: color2.toString(), percent: 0.6 },
{ color: color2.toString(), percent: 1 },
];
}
// For fixed / palette based color scales we can create a more hue and light
// based linear gradient that we rotate with the value
const darkerColor = tinycolor(baseColor)
.spin(-20)
.darken(theme.isDark ? 15 : 5);
const lighterColor = tinycolor(baseColor).saturate(20).spin(20).brighten(10).lighten(10);
const underlyingGradient = [
{ color: theme.isDark ? darkerColor.toString() : lighterColor.toString(), percent: 0 },
{ color: theme.isDark ? lighterColor.toString() : darkerColor.toString(), percent: 1 },
];
// rotate the gradient so that the highest contrasting point is the value, depending on theme.
const valuePercent = getValuePercentageForValue(fieldDisplay);
const startColor = theme.isDark
? colorAtGradientPercent(underlyingGradient, 1 - valuePercent).toHexString()
: underlyingGradient[0].color;
const endColor = theme.isDark
? underlyingGradient[1].color
: colorAtGradientPercent(underlyingGradient, valuePercent).toHexString();
return [
{ color: startColor, percent: 0 },
{ color: endColor, percent: valuePercent },
{ color: endColor, percent: 1 },
];
}
/**
* get the relevant gradient stops surrounding a given percentage. could be same stop if the
* percent matches a stop exactly.
*
* @param sortedGradientStops - gradient stops sorted by percent
* @param percent - percentage 0..1
* @returns {[GradientStop, GradientStop]} - the two gradient stops surrounding the given percentage
*/
export function getGradientStopsForPercent(
sortedGradientStops: GradientStop[],
percent: number
): [GradientStop, GradientStop] {
if (percent <= 0) {
return [sortedGradientStops[0], sortedGradientStops[0]];
}
if (percent >= 1) {
const last = sortedGradientStops.length - 1;
return [sortedGradientStops[last], sortedGradientStops[last]];
}
// find surrounding stops using binary search
let lo = 0;
let hi = sortedGradientStops.length - 1;
while (lo + 1 < hi) {
const mid = (lo + hi) >> 1;
if (percent === sortedGradientStops[mid].percent) {
return [sortedGradientStops[mid], sortedGradientStops[mid]];
}
if (percent < sortedGradientStops[mid].percent) {
hi = mid;
} else {
lo = mid;
}
}
return [sortedGradientStops[lo], sortedGradientStops[hi]];
}
/**
* @alpha - perhaps this should go in colorManipulator.ts
* Given color stops (each with a color and percentage 0..1) returns the color at a given percentage.
* Uses tinycolor.mix for interpolation.
* @params stops - array of color stops (percentages 0..1)
* @params percent - percentage 0..1
* @returns color at the given percentage
*/
export function colorAtGradientPercent(stops: GradientStop[], percent: number): tinycolor.Instance {
if (!stops || stops.length < 2) {
throw new Error('colorAtGradientPercent requires at least two color stops');
}
const sorted = stops
.map((s: GradientStop): GradientStop => ({ color: s.color, percent: Math.min(Math.max(0, s.percent), 1) }))
.sort((a: GradientStop, b: GradientStop) => a.percent - b.percent);
const [left, right] = getGradientStopsForPercent(sorted, percent);
const range = right.percent - left.percent;
const t = range === 0 ? 0 : (percent - left.percent) / range; // 0..1
return tinycolor.mix(left.color, right.color, t * 100);
}
export function getBarEndcapColors(gradientStops: GradientStop[], percent = 1): [string, string] {
if (gradientStops.length === 0) {
throw new Error('getBarEndcapColors requires at least one color stop');
}
const startColor = gradientStops[0].color;
let endColor = gradientStops[gradientStops.length - 1].color;
// if we have a percentageFilled, use it to get a the correct end color based on where the bar terminates
if (gradientStops.length >= 2) {
const endColorByPercentage = colorAtGradientPercent(gradientStops, percent);
endColor =
endColorByPercentage.getAlpha() === 1 ? endColorByPercentage.toHexString() : endColorByPercentage.toHex8String();
}
return [startColor, endColor];
}
export function getGradientCss(gradientStops: GradientStop[], shape: RadialShape): string {
const colorStrings = gradientStops.map((stop) => `${stop.color} ${(stop.percent * 100).toFixed(2)}%`);
if (shape === 'circle') {
return `conic-gradient(from 0deg, ${colorStrings.join(', ')})`;
}
return `linear-gradient(90deg, ${colorStrings.join(', ')})`;
}
// the theme does not make the full palette available to us, and we
// don't want transparent colors which our grays usually have.
const GRAY_05 = '#111217';
const GRAY_90 = '#fbfbfb';
const CONTRAST_THRESHOLD_MAX = 4.5;
const getGuideDotColor = (color: string): string => {
const darkColor = GRAY_05;
const lightColor = GRAY_90;
return colorManipulator.getContrastRatio(darkColor, color) >= CONTRAST_THRESHOLD_MAX ? darkColor : lightColor;
};
export function getEndpointMarkerColors(gradientStops: GradientStop[], percent = 1): [string, string] {
const [startColor, endColor] = getBarEndcapColors(gradientStops, percent);
return [getGuideDotColor(startColor), getGuideDotColor(endColor)];
}
packages/grafana-ui/src/components/RadialGauge/effects.tsx
+44 -45
View File
@@ -1,15 +1,18 @@
import { GrafanaTheme2 } from '@grafana/data';
import { GaugeDimensions } from './utils';
import { RadialGaugeDimensions } from './types';
export interface GlowGradientProps {
id: string;
barWidth: number;
}
const MIN_GLOW_SIZE = 0.75;
const GLOW_FACTOR = 0.08;
export function GlowGradient({ id, barWidth }: GlowGradientProps) {
// 0.75 is the minimum glow size, and it scales with bar width
const glowSize = 0.75 + barWidth * 0.08;
const glowSize = MIN_GLOW_SIZE + barWidth * GLOW_FACTOR;
return (
<filter id={id} filterUnits="userSpaceOnUse">
@@ -22,56 +25,19 @@ export function GlowGradient({ id, barWidth }: GlowGradientProps) {
);
}
export function SpotlightGradient({
id,
dimensions,
roundedBars,
angle,
theme,
}: {
id: string;
dimensions: GaugeDimensions;
angle: number;
roundedBars: boolean;
theme: GrafanaTheme2;
}) {
const angleRadian = ((angle - 90) * Math.PI) / 180;
let x1 = dimensions.centerX + dimensions.radius * Math.cos(angleRadian - 0.2);
let y1 = dimensions.centerY + dimensions.radius * Math.sin(angleRadian - 0.2);
let x2 = dimensions.centerX + dimensions.radius * Math.cos(angleRadian);
let y2 = dimensions.centerY + dimensions.radius * Math.sin(angleRadian);
if (theme.isLight) {
return (
<linearGradient x1={x1} y1={y1} x2={x2} y2={y2} id={id} gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor={'black'} stopOpacity={0.0} />
<stop offset="90%" stopColor={'black'} stopOpacity={0.0} />
<stop offset="91%" stopColor={'black'} stopOpacity={1} />
</linearGradient>
);
}
return (
<linearGradient x1={x1} y1={y1} x2={x2} y2={y2} id={id} gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor={'white'} stopOpacity={0.0} />
<stop offset="95%" stopColor={'white'} stopOpacity={0.5} />
{roundedBars && <stop offset="100%" stopColor={'white'} stopOpacity={roundedBars ? 0.7 : 1} />}
</linearGradient>
);
}
const CENTER_GLOW_OPACITY = 0.15;
export function CenterGlowGradient({ gaugeId, color }: { gaugeId: string; color: string }) {
return (
<radialGradient id={`circle-glow-${gaugeId}`} r={'50%'} fr={'0%'}>
<stop offset="0%" stopColor={color} stopOpacity={0.2} />
<radialGradient id={`circle-glow-${gaugeId}`} r="50%" fr="0%">
<stop offset="0%" stopColor={color} stopOpacity={CENTER_GLOW_OPACITY} />
<stop offset="90%" stopColor={color} stopOpacity={0} />
</radialGradient>
);
}
export interface CenterGlowProps {
dimensions: GaugeDimensions;
dimensions: RadialGaugeDimensions;
gaugeId: string;
color?: string;
}
@@ -82,8 +48,8 @@ export function MiddleCircleGlow({ dimensions, gaugeId, color }: CenterGlowProps
return (
<>
<defs>
<radialGradient id={gradientId} r={'50%'} fr={'0%'}>
<stop offset="0%" stopColor={color} stopOpacity={0.15} />
<radialGradient id={gradientId} r="50%" fr="0%">
<stop offset="0%" stopColor={color} stopOpacity={CENTER_GLOW_OPACITY} />
<stop offset="90%" stopColor={color} stopOpacity={0} />
</radialGradient>
</defs>
@@ -93,3 +59,36 @@ export function MiddleCircleGlow({ dimensions, gaugeId, color }: CenterGlowProps
</>
);
}
export function SpotlightGradient({
id,
dimensions,
roundedBars,
angle,
theme,
}: {
id: string;
dimensions: RadialGaugeDimensions;
angle: number;
roundedBars: boolean;
theme: GrafanaTheme2;
}) {
if (theme.isLight) {
return null;
}
const angleRadian = ((angle - 90) * Math.PI) / 180;
let x1 = dimensions.centerX + dimensions.radius * Math.cos(angleRadian - 0.2);
let y1 = dimensions.centerY + dimensions.radius * Math.sin(angleRadian - 0.2);
let x2 = dimensions.centerX + dimensions.radius * Math.cos(angleRadian);
let y2 = dimensions.centerY + dimensions.radius * Math.sin(angleRadian);
return (
<linearGradient x1={x1} y1={y1} x2={x2} y2={y2} id={id} gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor={'white'} stopOpacity={0.0} />
<stop offset="95%" stopColor={'white'} stopOpacity={0.5} />
{roundedBars && <stop offset="100%" stopColor={'white'} stopOpacity={roundedBars ? 0.7 : 1} />}
</linearGradient>
);
}
packages/grafana-ui/src/components/RadialGauge/types.ts
+25
View File
@@ -0,0 +1,25 @@
export type RadialTextMode = 'auto' | 'value_and_name' | 'value' | 'name' | 'none';
export type RadialShape = 'circle' | 'gauge';
export interface RadialGaugeDimensions {
margin: number;
radius: number;
centerX: number;
centerY: number;
barWidth: number;
endAngle?: number;
barIndex: number;
thresholdsBarRadius: number;
thresholdsBarWidth: number;
thresholdsBarSpacing: number;
scaleLabelsFontSize: number;
scaleLabelsSpacing: number;
scaleLabelsRadius: number;
gaugeBottomY: number;
}
/** @alpha - perhaps this should go in @grafana/data */
export interface GradientStop {
color: string;
percent: number;
}
packages/grafana-ui/src/components/RadialGauge/utils.test.ts
+182 -15
View File
@@ -1,24 +1,111 @@
import { FieldDisplay } from '@grafana/data';
import { DataFrameView, FieldDisplay } from '@grafana/data';
import type { RadialGaugeProps } from './RadialGauge';
import { calculateDimensions, toRad, getValueAngleForValue } from './utils';
import { RadialGaugeDimensions } from './types';
import {
calculateDimensions,
toRad,
getValueAngleForValue,
drawRadialArcPath,
getFieldConfigMinMax,
getFieldDisplayProcessor,
getAngleBetweenSegments,
getOptimalSegmentCount,
} from './utils';
describe('RadialGauge utils', () => {
function calc(overrides: Partial<RadialGaugeProps & { barIndex: number }> = {}) {
return calculateDimensions(
overrides.width ?? 200,
overrides.height ?? 200,
overrides.shape === 'gauge' ? 110 : 360,
overrides.glowBar ?? false,
overrides.roundedBars ?? false,
overrides.barWidthFactor ?? 0.4,
overrides.barIndex ?? 0,
overrides.thresholdsBar ?? false,
overrides.showScaleLabels ?? false
);
}
describe('getFieldDisplayProcessor', () => {
it('should return display processor from view when available', () => {
const mockProcessor = jest.fn();
const mockView = {
getFieldDisplayProcessor: jest.fn().mockReturnValue(mockProcessor),
} as unknown as DataFrameView;
const fieldDisplay: FieldDisplay = {
display: { numeric: 50, text: '50', color: 'blue' },
field: {},
view: mockView,
colIndex: 0,
rowIndex: 0,
name: 'test',
getLinks: () => [],
hasLinks: false,
};
const dp = getFieldDisplayProcessor(fieldDisplay);
expect(dp).toBe(mockProcessor);
expect(mockView.getFieldDisplayProcessor).toHaveBeenCalledWith(0);
});
it('should return default display processor when view is not available', () => {
const fieldDisplay: FieldDisplay = {
display: { numeric: 50, text: '50', color: 'blue' },
field: {},
view: undefined,
colIndex: 0,
rowIndex: 0,
name: 'test',
getLinks: () => [],
hasLinks: false,
};
const dp = getFieldDisplayProcessor(fieldDisplay);
expect(dp).toBeDefined();
expect(typeof dp).toBe('function');
});
});
describe('getFieldConfigMinMax', () => {
it('should return min and max from field config when defined', () => {
const fieldDisplay: FieldDisplay = {
display: { numeric: 50, text: '50', color: 'blue' },
field: { min: 10, max: 90 },
view: undefined,
colIndex: 0,
rowIndex: 0,
name: 'test',
getLinks: () => [],
hasLinks: false,
};
const [min, max] = getFieldConfigMinMax(fieldDisplay);
expect(min).toBe(10);
expect(max).toBe(90);
});
it('should return default min and max when not defined in field config', () => {
const fieldDisplay: FieldDisplay = {
display: { numeric: 50, text: '50', color: 'blue' },
field: {},
view: undefined,
colIndex: 0,
rowIndex: 0,
name: 'test',
getLinks: () => [],
hasLinks: false,
};
const [min, max] = getFieldConfigMinMax(fieldDisplay);
expect(min).toBe(0);
expect(max).toBe(100);
});
});
describe('calculateDimensions', () => {
function calc(overrides: Partial<RadialGaugeProps & { barIndex: number }> = {}) {
return calculateDimensions(
overrides.width ?? 200,
overrides.height ?? 200,
overrides.shape === 'gauge' ? 110 : 360,
overrides.glowBar ?? false,
overrides.roundedBars ?? false,
overrides.barWidthFactor ?? 0.4,
overrides.barIndex ?? 0,
overrides.thresholdsBar ?? false,
overrides.showScaleLabels ?? false
);
}
it('should calculate basic dimensions for a square gauge', () => {
const result = calc();
@@ -194,4 +281,84 @@ describe('RadialGauge utils', () => {
expect(result.angle).toBe(240);
});
});
describe('drawRadialArcPath', () => {
const defaultDims: RadialGaugeDimensions = Object.freeze({
centerX: 100,
centerY: 100,
radius: 80,
barWidth: 20,
margin: 0,
barIndex: 0,
thresholdsBarWidth: 0,
thresholdsBarSpacing: 0,
thresholdsBarRadius: 0,
scaleLabelsFontSize: 0,
scaleLabelsSpacing: 0,
scaleLabelsRadius: 0,
gaugeBottomY: 0,
});
it.each([
{ description: 'quarter arc', startAngle: 0, endAngle: 90 },
{ description: 'half arc', startAngle: 0, endAngle: 180 },
{ description: 'three quarter arc', startAngle: 0, endAngle: 270 },
{ description: 'rounded bars', startAngle: 0, endAngle: 270, roundedBars: true },
{ description: 'wide bar width', startAngle: 0, endAngle: 180, dimensions: { barWidth: 50 } },
{ description: 'narrow bar width', startAngle: 0, endAngle: 180, dimensions: { barWidth: 5 } },
{ description: 'narrow radius', startAngle: 0, endAngle: 180, dimensions: { radius: 50 } },
{
description: 'center x and y',
startAngle: 0,
endAngle: 360,
roundedBars: true,
dimensions: { centerX: 150, centerY: 200 },
},
])(`should draw correct path for $description`, ({ startAngle, endAngle, dimensions, roundedBars }) => {
const path = drawRadialArcPath(startAngle, endAngle, { ...defaultDims, ...dimensions }, roundedBars);
expect(path).toMatchSnapshot();
});
describe('edge cases', () => {
it('should adjust 360deg or greater arcs to avoid SVG rendering issues', () => {
expect(drawRadialArcPath(0, 360, defaultDims)).toEqual(drawRadialArcPath(0, 359.99, defaultDims));
expect(drawRadialArcPath(0, 380, defaultDims)).toEqual(drawRadialArcPath(0, 380, defaultDims));
});
it('should return empty string if inner radius collapses to zero or below', () => {
const smallRadiusDims = { ...defaultDims, radius: 5, barWidth: 20 };
expect(drawRadialArcPath(0, 180, smallRadiusDims)).toBe('');
});
});
});
describe('getAngleBetweenSegments', () => {
it('should calculate angle between segments based on spacing and count', () => {
expect(getAngleBetweenSegments(2, 10, 360)).toBe(48);
expect(getAngleBetweenSegments(5, 15, 180)).toBe(40);
});
});
describe('getOptimalSegmentCount', () => {
it('should adjust segment count based on dimensions and spacing', () => {
const dimensions: RadialGaugeDimensions = {
centerX: 100,
centerY: 100,
radius: 80,
barWidth: 20,
margin: 0,
barIndex: 0,
thresholdsBarWidth: 0,
thresholdsBarSpacing: 0,
thresholdsBarRadius: 0,
scaleLabelsFontSize: 0,
scaleLabelsSpacing: 0,
scaleLabelsRadius: 0,
gaugeBottomY: 0,
};
expect(getOptimalSegmentCount(dimensions, 2, 10, 360)).toBe(8);
expect(getOptimalSegmentCount(dimensions, 1, 5, 360)).toBe(5);
});
});
});
packages/grafana-ui/src/components/RadialGauge/utils.ts
+148 -23
View File
@@ -1,11 +1,38 @@
import { FieldDisplay } from '@grafana/data';
import { FieldDisplay, getDisplayProcessor } from '@grafana/data';
export function getValueAngleForValue(fieldDisplay: FieldDisplay, startAngle: number, endAngle: number) {
const angleRange = (360 % (startAngle === 0 ? 1 : startAngle)) + endAngle;
import { RadialGaugeDimensions } from './types';
export function getFieldDisplayProcessor(displayValue: FieldDisplay) {
if (displayValue.view && displayValue.colIndex != null) {
const dp = displayValue.view.getFieldDisplayProcessor(displayValue.colIndex);
if (dp) {
return dp;
}
}
return getDisplayProcessor();
}
export function getFieldConfigMinMax(fieldDisplay: FieldDisplay) {
const min = fieldDisplay.field.min ?? 0;
const max = fieldDisplay.field.max ?? 100;
return [min, max];
}
let angle = ((fieldDisplay.display.numeric - min) / (max - min)) * angleRange;
export function getValuePercentageForValue(fieldDisplay: FieldDisplay, value = fieldDisplay.display.numeric) {
const [min, max] = getFieldConfigMinMax(fieldDisplay);
return (value - min) / (max - min);
}
export function getValueAngleForValue(
fieldDisplay: FieldDisplay,
startAngle: number,
endAngle: number,
value = fieldDisplay.display.numeric
) {
const angleRange = (360 % (startAngle === 0 ? 1 : startAngle)) + endAngle;
let angle = getValuePercentageForValue(fieldDisplay, value) * angleRange;
if (angle > angleRange) {
angle = angleRange;
@@ -26,24 +53,19 @@ export function toRad(angle: number) {
return ((angle - 90) * Math.PI) / 180;
}
export interface GaugeDimensions {
margin: number;
radius: number;
centerX: number;
centerY: number;
barWidth: number;
endAngle?: number;
barIndex: number;
thresholdsBarRadius: number;
thresholdsBarWidth: number;
thresholdsBarSpacing: number;
showScaleLabels?: boolean;
scaleLabelsFontSize: number;
scaleLabelsSpacing: number;
scaleLabelsRadius: number;
gaugeBottomY: number;
}
/**
* returns the calculated dimensions for the radial gauge
* @param width
* @param height
* @param endAngle
* @param glow
* @param roundedBars
* @param barWidthFactor
* @param barIndex
* @param thresholdBar
* @param showScaleLabels
* @returns {RadialGaugeDimensions}
*/
export function calculateDimensions(
width: number,
height: number,
@@ -54,7 +76,7 @@ export function calculateDimensions(
barIndex: number,
thresholdBar?: boolean,
showScaleLabels?: boolean
): GaugeDimensions {
): RadialGaugeDimensions {
const yMaxAngle = endAngle > 180 ? 180 : endAngle;
let margin = 0;
@@ -97,6 +119,7 @@ export function calculateDimensions(
maxRadiusW -= labelsSize;
maxRadiusH -= labelsSize;
// FIXME: needs coverage
// For gauges the max label needs a bit more vertical space so that it does not get clipped
if (maxRadiusIsLimitedByHeight && endAngle < 180) {
const amount = outerRadius * 0.07;
@@ -155,3 +178,105 @@ export function toCartesian(centerX: number, centerY: number, radius: number, an
y: centerY + radius * Math.sin(radian),
};
}
export function drawRadialArcPath(
startAngle: number,
endAngle: number,
dimensions: RadialGaugeDimensions,
roundedBars?: boolean
): string {
const { radius, centerX, centerY, barWidth } = dimensions;
// For some reason a 100% full arc cannot be rendered
if (endAngle >= 360) {
endAngle = 359.99;
}
const startRadians = toRad(startAngle);
const endRadians = toRad(startAngle + endAngle);
const largeArc = endAngle > 180 ? 1 : 0;
const outerR = radius + barWidth / 2;
const innerR = Math.max(0, radius - barWidth / 2);
if (innerR <= 0) {
return ''; // cannot draw arc with 0 inner radius
}
// get points for both an inner and outer arc. we draw
// the arc entirely with a path's fill instead of using stroke
// so that it can be used as a clip-path.
const ox1 = centerX + outerR * Math.cos(startRadians);
const oy1 = centerY + outerR * Math.sin(startRadians);
const ox2 = centerX + outerR * Math.cos(endRadians);
const oy2 = centerY + outerR * Math.sin(endRadians);
const ix1 = centerX + innerR * Math.cos(startRadians);
const iy1 = centerY + innerR * Math.sin(startRadians);
const ix2 = centerX + innerR * Math.cos(endRadians);
const iy2 = centerY + innerR * Math.sin(endRadians);
// calculate the cap width in case we're drawing rounded bars
const capR = barWidth / 2;
const pathParts = [
// start at outer start
'M',
ox1,
oy1,
// outer arc from start to end (clockwise)
'A',
outerR,
outerR,
0,
largeArc,
1,
ox2,
oy2,
];
if (roundedBars) {
// rounded end cap: small arc connecting outer end to inner end
pathParts.push('A', capR, capR, 0, 0, 1, ix2, iy2);
} else {
// straight line to inner end (square butt)
pathParts.push('L', ix2, iy2);
}
// inner arc from end back to start (counter-clockwise)
pathParts.push('A', innerR, innerR, 0, largeArc, 0, ix1, iy1);
if (roundedBars) {
// rounded start cap: small arc connecting inner start back to outer start
pathParts.push('A', capR, capR, 0, 0, 1, ox1, oy1);
} else {
// straight line back to outer start (square butt)
pathParts.push('L', ox1, oy1);
}
pathParts.push('Z');
return pathParts.join(' ');
}
export function getAngleBetweenSegments(segmentSpacing: number, segmentCount: number, range: number) {
// Max spacing is 8 degrees between segments
// Changing this constant could be considered a breaking change
const maxAngleBetweenSegments = Math.max(range / 1.5 / segmentCount, 2);
return segmentSpacing * maxAngleBetweenSegments;
}
export function getOptimalSegmentCount(
dimensions: RadialGaugeDimensions,
segmentSpacing: number,
segmentCount: number,
range: number
) {
const angleBetweenSegments = getAngleBetweenSegments(segmentSpacing, segmentCount, range);
const innerRadius = dimensions.radius - dimensions.barWidth / 2;
const circumference = Math.PI * innerRadius * 2 * (range / 360);
const maxSegments = Math.floor(circumference / (angleBetweenSegments + 3));
return Math.min(maxSegments, segmentCount);
}
packages/grafana-ui/src/components/Table/CellActions.tsx
+13 -1
View File
@@ -1,3 +1,4 @@
import { isPlainObject } from 'lodash';
import { useCallback } from 'react';
import * as React from 'react';
@@ -63,7 +64,18 @@ export function CellActions({
tooltip={t('grafana-ui.table.cell-inspect', 'Inspect value')}
onClick={() => {
if (setInspectCell) {
setInspectCell({ value: cell.value, mode: previewMode });
let mode = TableCellInspectorMode.text;
let inspectValue = cell.value;
try {
const parsed = typeof inspectValue === 'string' ? JSON.parse(inspectValue) : inspectValue;
if (Array.isArray(parsed) || isPlainObject(parsed)) {
inspectValue = JSON.stringify(parsed, null, 2);
mode = TableCellInspectorMode.code;
}
} catch {
// do nothing
}
setInspectCell({ value: inspectValue, mode });
}
}}
{...commonButtonProps}
packages/grafana-ui/src/components/VizLegend/VizLegendTable.test.tsx
+78
View File
@@ -0,0 +1,78 @@
import { render, screen } from '@testing-library/react';
import { VizLegendTable } from './VizLegendTable';
import { VizLegendItem } from './types';
describe('VizLegendTable', () => {
const mockItems: VizLegendItem[] = [
{ label: 'Series 1', color: 'red', yAxis: 1 },
{ label: 'Series 2', color: 'blue', yAxis: 1 },
{ label: 'Series 3', color: 'green', yAxis: 1 },
];
it('renders without crashing', () => {
const { container } = render(<VizLegendTable items={mockItems} placement="bottom" />);
expect(container.querySelector('table')).toBeInTheDocument();
});
it('renders all items', () => {
render(<VizLegendTable items={mockItems} placement="bottom" />);
expect(screen.getByText('Series 1')).toBeInTheDocument();
expect(screen.getByText('Series 2')).toBeInTheDocument();
expect(screen.getByText('Series 3')).toBeInTheDocument();
});
it('renders table headers when items have display values', () => {
const itemsWithStats: VizLegendItem[] = [
{
label: 'Series 1',
color: 'red',
yAxis: 1,
getDisplayValues: () => [
{ numeric: 100, text: '100', title: 'Max' },
{ numeric: 50, text: '50', title: 'Min' },
],
},
];
render(<VizLegendTable items={itemsWithStats} placement="bottom" />);
expect(screen.getByText('Max')).toBeInTheDocument();
expect(screen.getByText('Min')).toBeInTheDocument();
});
it('renders sort icon when sorted', () => {
const { container } = render(
<VizLegendTable items={mockItems} placement="bottom" sortBy="Name" sortDesc={false} />
);
expect(container.querySelector('svg')).toBeInTheDocument();
});
it('calls onToggleSort when header is clicked', () => {
const onToggleSort = jest.fn();
render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={true} />);
const header = screen.getByText('Name');
header.click();
expect(onToggleSort).toHaveBeenCalledWith('Name');
});
it('does not call onToggleSort when not sortable', () => {
const onToggleSort = jest.fn();
render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={false} />);
const header = screen.getByText('Name');
header.click();
expect(onToggleSort).not.toHaveBeenCalled();
});
it('renders with long labels', () => {
const itemsWithLongLabels: VizLegendItem[] = [
{
label: 'This is a very long series name that should be scrollable within its table cell',
color: 'red',
yAxis: 1,
},
];
render(<VizLegendTable items={itemsWithLongLabels} placement="bottom" />);
expect(
screen.getByText('This is a very long series name that should be scrollable within its table cell')
).toBeInTheDocument();
});
});
packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
-1
View File
@@ -119,7 +119,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
table: css({
width: '100%',
'th:first-child': {
width: '100%',
borderBottom: `1px solid ${theme.colors.border.weak}`,
},
}),
packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.test.tsx
+112
View File
@@ -0,0 +1,112 @@
import { render, screen } from '@testing-library/react';
import { LegendTableItem } from './VizLegendTableItem';
import { VizLegendItem } from './types';
describe('LegendTableItem', () => {
const mockItem: VizLegendItem = {
label: 'Series 1',
color: 'red',
yAxis: 1,
};
it('renders without crashing', () => {
const { container } = render(
<table>
<tbody>
<LegendTableItem item={mockItem} />
</tbody>
</table>
);
expect(container.querySelector('tr')).toBeInTheDocument();
});
it('renders label text', () => {
render(
<table>
<tbody>
<LegendTableItem item={mockItem} />
</tbody>
</table>
);
expect(screen.getByText('Series 1')).toBeInTheDocument();
});
it('renders with long label text', () => {
const longLabelItem: VizLegendItem = {
...mockItem,
label: 'This is a very long series name that should be scrollable in the table cell',
};
render(
<table>
<tbody>
<LegendTableItem item={longLabelItem} />
</tbody>
</table>
);
expect(
screen.getByText('This is a very long series name that should be scrollable in the table cell')
).toBeInTheDocument();
});
it('renders stat values when provided', () => {
const itemWithStats: VizLegendItem = {
...mockItem,
getDisplayValues: () => [
{ numeric: 100, text: '100', title: 'Max' },
{ numeric: 50, text: '50', title: 'Min' },
],
};
render(
<table>
<tbody>
<LegendTableItem item={itemWithStats} />
</tbody>
</table>
);
expect(screen.getByText('100')).toBeInTheDocument();
expect(screen.getByText('50')).toBeInTheDocument();
});
it('renders right y-axis indicator when yAxis is 2', () => {
const rightAxisItem: VizLegendItem = {
...mockItem,
yAxis: 2,
};
render(
<table>
<tbody>
<LegendTableItem item={rightAxisItem} />
</tbody>
</table>
);
expect(screen.getByText('(right y-axis)')).toBeInTheDocument();
});
it('calls onLabelClick when label is clicked', () => {
const onLabelClick = jest.fn();
render(
<table>
<tbody>
<LegendTableItem item={mockItem} onLabelClick={onLabelClick} />
</tbody>
</table>
);
const button = screen.getByRole('button');
button.click();
expect(onLabelClick).toHaveBeenCalledWith(mockItem, expect.any(Object));
});
it('does not call onClick when readonly', () => {
const onLabelClick = jest.fn();
render(
<table>
<tbody>
<LegendTableItem item={mockItem} onLabelClick={onLabelClick} readonly={true} />
</tbody>
</table>
);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
});
});
packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+42 -22
View File
@@ -69,7 +69,7 @@ export const LegendTableItem = ({
return (
<tr className={cx(styles.row, className)}>
<td>
<td className={styles.labelCell}>
<span className={styles.itemWrapper}>
<VizLegendSeriesIcon
color={item.color}
@@ -77,24 +77,26 @@ export const LegendTableItem = ({
readonly={readonly}
lineStyle={item.lineStyle}
/>
<button
disabled={readonly}
type="button"
title={item.label}
onBlur={onMouseOut}
onFocus={onMouseOver}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={!readonly ? onClick : undefined}
className={cx(styles.label, item.disabled && styles.labelDisabled)}
>
{item.label}{' '}
{item.yAxis === 2 && (
<span className={styles.yAxisLabel}>
<Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
</span>
)}
</button>
<div className={styles.labelCellInner}>
<button
disabled={readonly}
type="button"
title={item.label}
onBlur={onMouseOut}
onFocus={onMouseOver}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onClick={!readonly ? onClick : undefined}
className={cx(styles.label, item.disabled && styles.labelDisabled)}
>
{item.label}{' '}
{item.yAxis === 2 && (
<span className={styles.yAxisLabel}>
<Trans i18nKey="grafana-ui.viz-legend.right-axis-indicator">(right y-axis)</Trans>
</span>
)}
</button>
</div>
</span>
</td>
{item.getDisplayValues &&
@@ -128,6 +130,27 @@ const getStyles = (theme: GrafanaTheme2) => {
background: rowHoverBg,
},
}),
labelCell: css({
label: 'LegendLabelCell',
maxWidth: 0,
width: '100%',
}),
labelCellInner: css({
label: 'LegendLabelCellInner',
display: 'block',
flex: 1,
minWidth: 0,
overflowX: 'auto',
overflowY: 'hidden',
paddingRight: theme.spacing(3),
scrollbarWidth: 'none',
msOverflowStyle: 'none',
maskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
'&::-webkit-scrollbar': {
display: 'none',
},
}),
label: css({
label: 'LegendLabel',
whiteSpace: 'nowrap',
@@ -135,9 +158,6 @@ const getStyles = (theme: GrafanaTheme2) => {
border: 'none',
fontSize: 'inherit',
padding: 0,
maxWidth: '600px',
textOverflow: 'ellipsis',
overflow: 'hidden',
userSelect: 'text',
}),
labelDisabled: css({
pkg/api/apierrors/folder.go
+2 -1
View File
@@ -29,7 +29,8 @@ func ToFolderErrorResponse(err error) response.Response {
errors.Is(err, dashboards.ErrDashboardTypeMismatch) ||
errors.Is(err, dashboards.ErrDashboardInvalidUid) ||
errors.Is(err, dashboards.ErrDashboardUidTooLong) ||
errors.Is(err, folder.ErrFolderCannotBeParentOfItself) {
errors.Is(err, folder.ErrFolderCannotBeParentOfItself) ||
errors.Is(err, folder.ErrMaximumDepthReached) {
return response.Error(http.StatusBadRequest, err.Error(), nil)
}
pkg/api/apierrors/folder_test.go
+1 -1
View File
@@ -30,7 +30,7 @@ func TestToFolderErrorResponse(t *testing.T) {
{
name: "maximum depth reached",
input: folder.ErrMaximumDepthReached.Errorf("Maximum nested folder depth reached"),
want: response.Err(folder.ErrMaximumDepthReached.Errorf("Maximum nested folder depth reached")),
want: response.Error(http.StatusBadRequest, "[folder.maximum-depth-reached] Maximum nested folder depth reached", nil),
},
{
name: "bad request errors",
pkg/api/folder.go
+1 -1
View File
@@ -214,7 +214,7 @@ func (hs *HTTPServer) MoveFolder(c *contextmodel.ReqContext) response.Response {
cmd.SignedInUser = c.SignedInUser
theFolder, err := hs.folderService.Move(c.Req.Context(), &cmd)
if err != nil {
return response.ErrOrFallback(http.StatusInternalServerError, "move folder failed", err)
return apierrors.ToFolderErrorResponse(err)
}
folderDTO, err := hs.newToFolderDto(c, theFolder)
pkg/middleware/loggermw/logger.go
+1 -4
View File
@@ -64,10 +64,7 @@ func (l *loggerImpl) Middleware() web.Middleware {
// put the start time on context so we can measure it later.
r = r.WithContext(log.InitstartTime(r.Context(), time.Now()))
//nolint:staticcheck // not yet migrated to OpenFeature
if l.flags.IsEnabled(r.Context(), featuremgmt.FlagUnifiedRequestLog) {
r = r.WithContext(errutil.SetUnifiedLogging(r.Context()))
}
r = r.WithContext(errutil.SetUnifiedLogging(r.Context()))
rw := web.Rw(w, r)
next.ServeHTTP(rw, r)
pkg/operators/provisioning/config.go
+1 -1
View File
@@ -178,7 +178,7 @@ func setupFromConfig(cfg *setting.Cfg, registry prometheus.Registerer) (controll
APIPath: "/apis",
Host: url,
WrapTransport: transport.WrapperFunc(func(rt http.RoundTripper) http.RoundTripper {
return authrt.NewRoundTripper(tokenExchangeClient, rt, group)
return authrt.NewRoundTripper(tokenExchangeClient, rt, group, authrt.ExtraAudience(provisioning.GROUP))
}),
Transport: &http.Transport{
MaxConnsPerHost: 100,
pkg/registry/apis/folders/register.go
+1 -1
View File
@@ -356,7 +356,7 @@ func (b *FolderAPIBuilder) Validate(ctx context.Context, a admission.Attributes,
if !ok {
return fmt.Errorf("obj is not folders.Folder")
}
return validateOnUpdate(ctx, f, old, b.storage, b.parents, folder.MaxNestedFolderDepth)
return validateOnUpdate(ctx, f, old, b.storage, b.parents, b.searcher, folder.MaxNestedFolderDepth)
default:
return nil
}
pkg/registry/apis/folders/register_test.go
+4
View File
@@ -376,6 +376,10 @@ func TestFolderAPIBuilder_Validate_Update(t *testing.T) {
m.On("Get", mock.Anything, "new-parent", mock.Anything).Return(
&folders.Folder{},
nil).Once()
// also retrieves old parent for depth difference calculation
m.On("Get", mock.Anything, "valid-parent", mock.Anything).Return(
&folders.Folder{},
nil).Once()
},
},
{
pkg/registry/apis/folders/validate.go
+157 -4
View File
@@ -6,6 +6,7 @@ import (
"slices"
metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
"k8s.io/apimachinery/pkg/selection"
"k8s.io/apiserver/pkg/registry/rest"
folders "github.com/grafana/grafana/apps/folder/pkg/apis/folder/v1beta1"
@@ -13,6 +14,7 @@ import (
"github.com/grafana/grafana/pkg/services/accesscontrol"
"github.com/grafana/grafana/pkg/services/dashboards"
"github.com/grafana/grafana/pkg/services/folder"
"github.com/grafana/grafana/pkg/storage/unified/resource"
"github.com/grafana/grafana/pkg/storage/unified/resourcepb"
"github.com/grafana/grafana/pkg/util"
)
@@ -73,6 +75,7 @@ func validateOnUpdate(ctx context.Context,
old *folders.Folder,
getter rest.Getter,
parents parentsGetter,
searcher resourcepb.ResourceIndexClient,
maxDepth int,
) error {
folderObj, err := utils.MetaAccessor(obj)
@@ -96,6 +99,10 @@ func validateOnUpdate(ctx context.Context,
newParent := folderObj.GetFolder()
switch newParent {
// If we move to root, we don't need to validate the depth, because the folder already existed
// before and wasn't too deep. This move will make it more shallow.
//
// We also don't need to validate circular references because the root folder cannot have a parent.
case "", folder.GeneralFolderUID:
return nil // OK, we do not need to validate the tree
case folder.SharedWithMeFolderUID:
@@ -114,9 +121,6 @@ func validateOnUpdate(ctx context.Context,
if !ok {
return fmt.Errorf("expected folder, found %T", parentObj)
}
//FIXME: until we have a way to represent the tree, we can only
// look at folder parents to check how deep the new folder tree will be
info, err := parents(ctx, parent)
if err != nil {
return err
@@ -130,13 +134,162 @@ func validateOnUpdate(ctx context.Context,
}
}
// if by moving a folder we exceed the max depth, return an error
// if by moving a folder we exceed the max depth just from its parents + itself, return an error
if len(info.Items) > maxDepth+1 {
return folder.ErrMaximumDepthReached.Errorf("maximum folder depth reached")
}
// To try to save some computation, get the parents of the old parent (this is typically cheaper
// than looking at the children of the folder). If the old parent has more parents or the same
// number of parents as the new parent, we can return early, because we know the folder had to be
// safe from the creation validation. If we cannot access the older parent, we will continue to check the children.
if canSkipChildrenCheck(ctx, oldFolder, getter, parents, len(info.Items)) {
return nil
}
// Now comes the more expensive part: we need to check if moving this folder will cause
// any descendant folders to exceed the max depth.
//
// Calculate the maximum allowed subtree depth after the move.
allowedDepth := (maxDepth + 1) - len(info.Items)
if allowedDepth <= 0 {
return nil
}
return checkSubtreeDepth(ctx, searcher, obj.Namespace, obj.Name, allowedDepth, maxDepth)
}
// canSkipChildrenCheck determines if we can skip the expensive children depth check.
// If the old parent depth is >= the new parent depth, the folder was already valid
// and this move won't make descendants exceed max depth.
func canSkipChildrenCheck(ctx context.Context, oldFolder utils.GrafanaMetaAccessor, getter rest.Getter, parents parentsGetter, newParentDepth int) bool {
if oldFolder.GetFolder() == folder.RootFolderUID {
return false
}
oldParentObj, err := getter.Get(ctx, oldFolder.GetFolder(), &metav1.GetOptions{})
if err != nil {
return false
}
oldParent, ok := oldParentObj.(*folders.Folder)
if !ok {
return false
}
oldInfo, err := parents(ctx, oldParent)
if err != nil {
return false
}
oldParentDepth := len(oldInfo.Items)
levelDifference := newParentDepth - oldParentDepth
return levelDifference <= 0
}
// checkSubtreeDepth uses a hybrid DFS+batching approach:
// 1. fetches one page of children for the current folder(s)
// 2. batches all those children into one request to get their children
// 3. continues depth-first (batching still) until max depth or violation
// 4. only fetches more siblings after fully exploring current batch
func checkSubtreeDepth(ctx context.Context, searcher resourcepb.ResourceIndexClient, namespace string, folderUID string, remainingDepth int, maxDepth int) error {
if remainingDepth <= 0 {
return nil
}
// Start with the folder being moved
return checkSubtreeDepthBatched(ctx, searcher, namespace, []string{folderUID}, remainingDepth, maxDepth)
}
// checkSubtreeDepthBatched checks depth for a batch of folders at the same level
func checkSubtreeDepthBatched(ctx context.Context, searcher resourcepb.ResourceIndexClient, namespace string, parentUIDs []string, remainingDepth int, maxDepth int) error {
if remainingDepth <= 0 || len(parentUIDs) == 0 {
return nil
}
const pageSize int64 = 1000
var offset int64
totalPages := 0
hasMore := true
// Using an upper limit to ensure no infinite loops can happen
for hasMore && totalPages < 1000 {
totalPages++
var err error
var children []string
children, hasMore, err = getChildrenBatch(ctx, searcher, namespace, parentUIDs, pageSize, offset)
if err != nil {
return fmt.Errorf("failed to get children: %w", err)
}
if len(children) == 0 {
return nil
}
// if we are at the last allowed depth and children exist, we will hit the max
if remainingDepth == 1 {
return folder.ErrMaximumDepthReached.Errorf("maximum folder depth %d would be exceeded after move", maxDepth)
}
if err := checkSubtreeDepthBatched(ctx, searcher, namespace, children, remainingDepth-1, maxDepth); err != nil {
return err
}
if !hasMore {
return nil
}
offset += pageSize
}
return nil
}
// getChildrenBatch fetches children for multiple parents
func getChildrenBatch(ctx context.Context, searcher resourcepb.ResourceIndexClient, namespace string, parentUIDs []string, limit int64, offset int64) ([]string, bool, error) {
if len(parentUIDs) == 0 {
return nil, false, nil
}
resp, err := searcher.Search(ctx, &resourcepb.ResourceSearchRequest{
Options: &resourcepb.ListOptions{
Key: &resourcepb.ResourceKey{
Namespace: namespace,
Group: folders.FolderResourceInfo.GroupVersionResource().Group,
Resource: folders.FolderResourceInfo.GroupVersionResource().Resource,
},
Fields: []*resourcepb.Requirement{{
Key: resource.SEARCH_FIELD_FOLDER,
Operator: string(selection.In),
Values: parentUIDs,
}},
},
Limit: limit,
Offset: offset,
})
if err != nil {
return nil, false, fmt.Errorf("failed to search folders: %w", err)
}
if resp.Error != nil {
return nil, false, fmt.Errorf("search error: %s", resp.Error.Message)
}
if resp.Results == nil || len(resp.Results.Rows) == 0 {
return nil, false, nil
}
children := make([]string, 0, len(resp.Results.Rows))
for _, row := range resp.Results.Rows {
if row.Key != nil {
children = append(children, row.Key.Name)
}
}
hasMore := resp.Results.NextPageToken != ""
return children, hasMore, nil
}
func validateOnDelete(ctx context.Context,
f *folders.Folder,
searcher resourcepb.ResourceIndexClient,
pkg/registry/apis/folders/validate_test.go
+108 -5
View File
@@ -282,6 +282,7 @@ func TestValidateUpdate(t *testing.T) {
old *folders.Folder
parents *folders.FolderInfoList
parentsError error
allFolders []folders.Folder
expectedErr string
maxDepth int // defaults to 5 unless set
}{
@@ -454,6 +455,74 @@ func TestValidateUpdate(t *testing.T) {
},
expectedErr: "cannot move folder under its own descendant",
},
{
name: "error when moving folder from root to level2 with children exceeds max depth",
folder: &folders.Folder{
ObjectMeta: metav1.ObjectMeta{
Name: "folderWithChildren",
Annotations: map[string]string{
utils.AnnoKeyFolder: "level2",
},
},
Spec: folders.FolderSpec{
Title: "folder with children",
},
},
old: &folders.Folder{
ObjectMeta: metav1.ObjectMeta{
Name: "folderWithChildren",
},
Spec: folders.FolderSpec{
Title: "folder with children",
},
},
parents: &folders.FolderInfoList{
Items: []folders.FolderInfo{
{Name: "level2", Parent: "level1"},
{Name: "level1", Parent: folder.GeneralFolderUID},
{Name: folder.GeneralFolderUID},
},
},
allFolders: []folders.Folder{
{ObjectMeta: metav1.ObjectMeta{Name: "child1", Annotations: map[string]string{utils.AnnoKeyFolder: "folderWithChildren"}}},
{ObjectMeta: metav1.ObjectMeta{Name: "grandchild1", Annotations: map[string]string{utils.AnnoKeyFolder: "child1"}}},
},
maxDepth: 4,
expectedErr: "[folder.maximum-depth-reached]",
},
{
name: "can move folder from root level to level1 with children when within max depth",
folder: &folders.Folder{
ObjectMeta: metav1.ObjectMeta{
Name: "folderWithChildren",
Annotations: map[string]string{
utils.AnnoKeyFolder: "level1",
},
},
Spec: folders.FolderSpec{
Title: "folder with children",
},
},
old: &folders.Folder{
ObjectMeta: metav1.ObjectMeta{
Name: "folderWithChildren",
},
Spec: folders.FolderSpec{
Title: "folder with children",
},
},
parents: &folders.FolderInfoList{
Items: []folders.FolderInfo{
{Name: "level1", Parent: folder.GeneralFolderUID},
{Name: folder.GeneralFolderUID},
},
},
allFolders: []folders.Folder{
{ObjectMeta: metav1.ObjectMeta{Name: "child1", Annotations: map[string]string{utils.AnnoKeyFolder: "folderWithChildren"}}},
{ObjectMeta: metav1.ObjectMeta{Name: "grandchild1", Annotations: map[string]string{utils.AnnoKeyFolder: "child1"}}},
},
maxDepth: 4,
},
}
for _, tt := range tests {
@@ -474,11 +543,17 @@ func TestValidateUpdate(t *testing.T) {
}, nil).Maybe()
}
}
for i := range tt.allFolders {
f := tt.allFolders[i]
m.On("Get", context.Background(), f.Name, &metav1.GetOptions{}).Return(&f, nil).Maybe()
}
err := validateOnUpdate(context.Background(), tt.folder, tt.old, m,
func(ctx context.Context, folder *folders.Folder) (*folders.FolderInfoList, error) {
return tt.parents, tt.parentsError
}, maxDepth)
},
&mockSearchClient{folders: tt.allFolders},
maxDepth)
if tt.expectedErr == "" {
require.NoError(t, err)
@@ -693,8 +768,7 @@ type mockSearchClient struct {
stats *resourcepb.ResourceStatsResponse
statsErr error
search *resourcepb.ResourceSearchResponse
searchErr error
folders []folders.Folder
}
// GetStats implements resourcepb.ResourceIndexClient.
@@ -703,8 +777,37 @@ func (m *mockSearchClient) GetStats(ctx context.Context, in *resourcepb.Resource
}
// Search implements resourcepb.ResourceIndexClient.
func (m *mockSearchClient) Search(ctx context.Context, in *resourcepb.ResourceSearchRequest, opts ...grpc.CallOption) (*resourcepb.ResourceSearchResponse, error) {
return m.search, m.searchErr
func (m *mockSearchClient) Search(ctx context.Context, req *resourcepb.ResourceSearchRequest, opts ...grpc.CallOption) (*resourcepb.ResourceSearchResponse, error) {
// get the list of parents from the search request
parentSet := make(map[string]bool)
if req.Options != nil && req.Options.Fields != nil {
for _, field := range req.Options.Fields {
if field.Key == "folder" && field.Operator == "in" {
for _, v := range field.Values {
parentSet[v] = true
}
}
}
}
// find children that match the parent filter
var rows []*resourcepb.ResourceTableRow
for i := range m.folders {
meta, err := utils.MetaAccessor(&m.folders[i])
if err != nil {
continue
}
parentUID := meta.GetFolder()
if parentSet[parentUID] {
rows = append(rows, &resourcepb.ResourceTableRow{
Key: &resourcepb.ResourceKey{Name: m.folders[i].Name},
})
}
}
return &resourcepb.ResourceSearchResponse{
Results: &resourcepb.ResourceTable{Rows: rows},
}, nil
}
// RebuildIndexes implements resourcepb.ResourceIndexClient.
pkg/registry/apis/provisioning/accesscontrol.go
+88
View File
@@ -12,6 +12,12 @@ const (
ActionProvisioningRepositoriesRead = "provisioning.repositories:read" // GET + LIST.
ActionProvisioningRepositoriesDelete = "provisioning.repositories:delete" // DELETE.
// Connections
ActionProvisioningConnectionsCreate = "provisioning.connections:create" // CREATE.
ActionProvisioningConnectionsWrite = "provisioning.connections:write" // UPDATE.
ActionProvisioningConnectionsRead = "provisioning.connections:read" // GET + LIST.
ActionProvisioningConnectionsDelete = "provisioning.connections:delete" // DELETE.
// Jobs
ActionProvisioningJobsCreate = "provisioning.jobs:create" // CREATE.
ActionProvisioningJobsWrite = "provisioning.jobs:write" // UPDATE.
@@ -20,6 +26,12 @@ const (
// Historic Jobs
ActionProvisioningHistoricJobsRead = "provisioning.historicjobs:read" // GET + LIST.
// Settings (read-only, needed by multiple UI pages)
ActionProvisioningSettingsRead = "provisioning.settings:read" // GET + LIST.
// Stats (read-only, admin-only)
ActionProvisioningStatsRead = "provisioning.stats:read" // GET + LIST.
)
func registerAccessControlRoles(service accesscontrol.Service) error {
@@ -63,6 +75,46 @@ func registerAccessControlRoles(service accesscontrol.Service) error {
Grants: []string{string(org.RoleAdmin)},
}
// Connections
connectionsReader := accesscontrol.RoleRegistration{
Role: accesscontrol.RoleDTO{
Name: "fixed:provisioning.connections:reader",
DisplayName: "Connections Reader",
Description: "Read and list provisioning connections.",
Group: "Provisioning",
Permissions: []accesscontrol.Permission{
{
Action: ActionProvisioningConnectionsRead,
},
},
},
Grants: []string{string(org.RoleAdmin)},
}
connectionsWriter := accesscontrol.RoleRegistration{
Role: accesscontrol.RoleDTO{
Name: "fixed:provisioning.connections:writer",
DisplayName: "Connections Writer",
Description: "Create, update and delete provisioning connections.",
Group: "Provisioning",
Permissions: []accesscontrol.Permission{
{
Action: ActionProvisioningConnectionsCreate,
},
{
Action: ActionProvisioningConnectionsRead,
},
{
Action: ActionProvisioningConnectionsWrite,
},
{
Action: ActionProvisioningConnectionsDelete,
},
},
},
Grants: []string{string(org.RoleAdmin)},
}
// Jobs
jobsReader := accesscontrol.RoleRegistration{
Role: accesscontrol.RoleDTO{
@@ -119,11 +171,47 @@ func registerAccessControlRoles(service accesscontrol.Service) error {
Grants: []string{string(org.RoleAdmin)},
}
// Settings - granted to Viewer (accessible by all logged-in users)
settingsReader := accesscontrol.RoleRegistration{
Role: accesscontrol.RoleDTO{
Name: "fixed:provisioning.settings:reader",
DisplayName: "Settings Reader",
Description: "Read provisioning settings.",
Group: "Provisioning",
Permissions: []accesscontrol.Permission{
{
Action: ActionProvisioningSettingsRead,
},
},
},
Grants: []string{string(org.RoleViewer)},
}
// Stats - granted to Admin only
statsReader := accesscontrol.RoleRegistration{
Role: accesscontrol.RoleDTO{
Name: "fixed:provisioning.stats:reader",
DisplayName: "Stats Reader",
Description: "Read provisioning stats.",
Group: "Provisioning",
Permissions: []accesscontrol.Permission{
{
Action: ActionProvisioningStatsRead,
},
},
},
Grants: []string{string(org.RoleAdmin)},
}
return service.DeclareFixedRoles(
repositoriesReader,
repositoriesWriter,
connectionsReader,
connectionsWriter,
jobsReader,
jobsWriter,
historicJobsReader,
settingsReader,
statsReader,
)
}
pkg/registry/apis/provisioning/files.go
+223 -168
View File
@@ -13,9 +13,10 @@ import (
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana-app-sdk/logging"
provisioning "github.com/grafana/grafana/apps/provisioning/pkg/apis/provisioning/v0alpha1"
"github.com/grafana/grafana/apps/provisioning/pkg/auth"
"github.com/grafana/grafana/apps/provisioning/pkg/repository"
"github.com/grafana/grafana/apps/provisioning/pkg/safepath"
"github.com/grafana/grafana/pkg/apimachinery/identity"
"github.com/grafana/grafana/pkg/apimachinery/utils"
"github.com/grafana/grafana/pkg/registry/apis/provisioning/resources"
)
@@ -26,12 +27,12 @@ const (
type filesConnector struct {
getter RepoGetter
access authlib.AccessChecker
access auth.AccessChecker
parsers resources.ParserFactory
clients resources.ClientFactory
}
func NewFilesConnector(getter RepoGetter, parsers resources.ParserFactory, clients resources.ClientFactory, access authlib.AccessChecker) *filesConnector {
func NewFilesConnector(getter RepoGetter, parsers resources.ParserFactory, clients resources.ClientFactory, access auth.AccessChecker) *filesConnector {
return &filesConnector{getter: getter, parsers: parsers, clients: clients, access: access}
}
@@ -74,179 +75,233 @@ func (c *filesConnector) Connect(ctx context.Context, name string, opts runtime.
ctx = logging.Context(ctx, logger)
return WithTimeout(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
repo, err := c.getRepo(ctx, r.Method, name)
if err != nil {
logger.Debug("failed to find repository", "error", err)
responder.Error(err)
return
}
readWriter, ok := repo.(repository.ReaderWriter)
if !ok {
responder.Error(apierrors.NewBadRequest("repository does not support read-writing"))
return
}
parser, err := c.parsers.GetParser(ctx, readWriter)
if err != nil {
responder.Error(fmt.Errorf("failed to get parser: %w", err))
return
}
clients, err := c.clients.Clients(ctx, repo.Config().Namespace)
if err != nil {
responder.Error(fmt.Errorf("failed to get clients: %w", err))
return
}
folderClient, err := clients.Folder(ctx)
if err != nil {
responder.Error(fmt.Errorf("failed to get folder client: %w", err))
return
}
folders := resources.NewFolderManager(readWriter, folderClient, resources.NewEmptyFolderTree())
dualReadWriter := resources.NewDualReadWriter(readWriter, parser, folders, c.access)
query := r.URL.Query()
opts := resources.DualWriteOptions{
Ref: query.Get("ref"),
Message: query.Get("message"),
SkipDryRun: query.Get("skipDryRun") == "true",
OriginalPath: query.Get("originalPath"),
Branch: repo.Config().Branch(),
}
logger := logger.With("url", r.URL.Path, "ref", opts.Ref, "message", opts.Message)
ctx := logging.Context(r.Context(), logger)
opts.Path, err = pathAfterPrefix(r.URL.Path, fmt.Sprintf("/%s/files", name))
if err != nil {
responder.Error(apierrors.NewBadRequest(err.Error()))
return
}
if err := resources.IsPathSupported(opts.Path); err != nil {
responder.Error(apierrors.NewBadRequest(err.Error()))
return
}
isDir := safepath.IsDir(opts.Path)
if r.Method == http.MethodGet && isDir {
files, err := c.listFolderFiles(ctx, opts.Path, opts.Ref, readWriter)
if err != nil {
responder.Error(err)
return
}
responder.Object(http.StatusOK, files)
return
}
if opts.Path == "" {
responder.Error(apierrors.NewBadRequest("missing request path"))
return
}
var obj *provisioning.ResourceWrapper
code := http.StatusOK
switch r.Method {
case http.MethodGet:
resource, err := dualReadWriter.Read(ctx, opts.Path, opts.Ref)
if err != nil {
respondWithError(responder, err)
return
}
obj = resource.AsResourceWrapper()
case http.MethodPost:
// Check if this is a move operation first (originalPath query parameter is present)
if opts.OriginalPath != "" {
// For move operations, only read body for file moves (not directory moves)
if !isDir {
opts.Data, err = readBody(r, filesMaxBodySize)
if err != nil {
responder.Error(err)
return
}
}
resource, err := dualReadWriter.MoveResource(ctx, opts)
if err != nil {
respondWithError(responder, err)
return
}
obj = resource.AsResourceWrapper()
} else if isDir {
obj, err = dualReadWriter.CreateFolder(ctx, opts)
} else {
opts.Data, err = readBody(r, filesMaxBodySize)
if err != nil {
responder.Error(err)
return
}
var resource *resources.ParsedResource
resource, err = dualReadWriter.CreateResource(ctx, opts)
if err != nil {
respondWithError(responder, err)
return
}
obj = resource.AsResourceWrapper()
}
case http.MethodPut:
// TODO: document in API specification
if isDir {
err = apierrors.NewMethodNotSupported(provisioning.RepositoryResourceInfo.GroupResource(), r.Method)
} else {
opts.Data, err = readBody(r, filesMaxBodySize)
if err != nil {
responder.Error(err)
return
}
resource, err := dualReadWriter.UpdateResource(ctx, opts)
if err != nil {
respondWithError(responder, err)
return
}
obj = resource.AsResourceWrapper()
}
case http.MethodDelete:
resource, err := dualReadWriter.Delete(ctx, opts)
if err != nil {
respondWithError(responder, err)
return
}
obj = resource.AsResourceWrapper()
default:
err = apierrors.NewMethodNotSupported(provisioning.RepositoryResourceInfo.GroupResource(), r.Method)
}
if err != nil {
logger.Debug("got an error after processing request", "error", err)
responder.Error(err)
return
}
if len(obj.Errors) > 0 {
code = http.StatusPartialContent
}
logger.Debug("request resulted in valid object", "object", obj)
responder.Object(code, obj)
c.handleRequest(ctx, name, r, responder, logger)
}), 30*time.Second), nil
}
// listFolderFiles returns a list of files in a folder
func (c *filesConnector) listFolderFiles(ctx context.Context, filePath string, ref string, readWriter repository.ReaderWriter) (*provisioning.FileList, error) {
id, err := identity.GetRequester(ctx)
// handleRequest processes the HTTP request for files operations.
func (c *filesConnector) handleRequest(ctx context.Context, name string, r *http.Request, responder rest.Responder, logger logging.Logger) {
repo, err := c.getRepo(ctx, r.Method, name)
if err != nil {
return nil, fmt.Errorf("missing auth info in context")
logger.Debug("failed to find repository", "error", err)
responder.Error(err)
return
}
// TODO: replace with access check on the repo itself
if !id.GetOrgRole().Includes(identity.RoleAdmin) {
return nil, apierrors.NewForbidden(resources.DashboardResource.GroupResource(), "",
fmt.Errorf("requires admin role"))
readWriter, ok := repo.(repository.ReaderWriter)
if !ok {
responder.Error(apierrors.NewBadRequest("repository does not support read-writing"))
return
}
dualReadWriter, err := c.createDualReadWriter(ctx, repo, readWriter)
if err != nil {
responder.Error(err)
return
}
opts, err := c.parseRequestOptions(r, name, repo)
if err != nil {
responder.Error(apierrors.NewBadRequest(err.Error()))
return
}
logger = logger.With("url", r.URL.Path, "ref", opts.Ref, "message", opts.Message)
ctx = logging.Context(r.Context(), logger)
// Handle directory listing separately
isDir := safepath.IsDir(opts.Path)
if r.Method == http.MethodGet && isDir {
c.handleDirectoryListing(ctx, name, opts, readWriter, responder)
return
}
if opts.Path == "" {
responder.Error(apierrors.NewBadRequest("missing request path"))
return
}
obj, err := c.handleMethodRequest(ctx, r, opts, isDir, dualReadWriter)
if err != nil {
logger.Debug("got an error after processing request", "error", err)
respondWithError(responder, err)
return
}
code := http.StatusOK
if len(obj.Errors) > 0 {
code = http.StatusPartialContent
}
logger.Debug("request resulted in valid object", "object", obj)
responder.Object(code, obj)
}
// createDualReadWriter sets up the dual read writer with all required dependencies.
func (c *filesConnector) createDualReadWriter(ctx context.Context, repo repository.Repository, readWriter repository.ReaderWriter) (*resources.DualReadWriter, error) {
parser, err := c.parsers.GetParser(ctx, readWriter)
if err != nil {
return nil, fmt.Errorf("failed to get parser: %w", err)
}
clients, err := c.clients.Clients(ctx, repo.Config().Namespace)
if err != nil {
return nil, fmt.Errorf("failed to get clients: %w", err)
}
folderClient, err := clients.Folder(ctx)
if err != nil {
return nil, fmt.Errorf("failed to get folder client: %w", err)
}
folders := resources.NewFolderManager(readWriter, folderClient, resources.NewEmptyFolderTree())
return resources.NewDualReadWriter(readWriter, parser, folders, c.access), nil
}
// parseRequestOptions extracts options from the HTTP request.
func (c *filesConnector) parseRequestOptions(r *http.Request, name string, repo repository.Repository) (resources.DualWriteOptions, error) {
query := r.URL.Query()
opts := resources.DualWriteOptions{
Ref: query.Get("ref"),
Message: query.Get("message"),
SkipDryRun: query.Get("skipDryRun") == "true",
OriginalPath: query.Get("originalPath"),
Branch: repo.Config().Branch(),
}
path, err := pathAfterPrefix(r.URL.Path, fmt.Sprintf("/%s/files", name))
if err != nil {
return opts, err
}
opts.Path = path
if err := resources.IsPathSupported(opts.Path); err != nil {
return opts, err
}
return opts, nil
}
// handleDirectoryListing handles GET requests for directory listing.
func (c *filesConnector) handleDirectoryListing(ctx context.Context, name string, opts resources.DualWriteOptions, readWriter repository.ReaderWriter, responder rest.Responder) {
if err := c.authorizeListFiles(ctx, name); err != nil {
responder.Error(err)
return
}
files, err := c.listFolderFiles(ctx, opts.Path, opts.Ref, readWriter)
if err != nil {
responder.Error(err)
return
}
responder.Object(http.StatusOK, files)
}
// handleMethodRequest routes the request to the appropriate handler based on HTTP method.
func (c *filesConnector) handleMethodRequest(ctx context.Context, r *http.Request, opts resources.DualWriteOptions, isDir bool, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
switch r.Method {
case http.MethodGet:
return c.handleGet(ctx, opts, dualReadWriter)
case http.MethodPost:
return c.handlePost(ctx, r, opts, isDir, dualReadWriter)
case http.MethodPut:
return c.handlePut(ctx, r, opts, isDir, dualReadWriter)
case http.MethodDelete:
return c.handleDelete(ctx, opts, dualReadWriter)
default:
return nil, apierrors.NewMethodNotSupported(provisioning.RepositoryResourceInfo.GroupResource(), r.Method)
}
}
func (c *filesConnector) handleGet(ctx context.Context, opts resources.DualWriteOptions, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
resource, err := dualReadWriter.Read(ctx, opts.Path, opts.Ref)
if err != nil {
return nil, err
}
return resource.AsResourceWrapper(), nil
}
func (c *filesConnector) handlePost(ctx context.Context, r *http.Request, opts resources.DualWriteOptions, isDir bool, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
// Check if this is a move operation (originalPath query parameter is present)
if opts.OriginalPath != "" {
return c.handleMove(ctx, r, opts, isDir, dualReadWriter)
}
if isDir {
return dualReadWriter.CreateFolder(ctx, opts)
}
data, err := readBody(r, filesMaxBodySize)
if err != nil {
return nil, err
}
opts.Data = data
resource, err := dualReadWriter.CreateResource(ctx, opts)
if err != nil {
return nil, err
}
return resource.AsResourceWrapper(), nil
}
func (c *filesConnector) handleMove(ctx context.Context, r *http.Request, opts resources.DualWriteOptions, isDir bool, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
// For move operations, only read body for file moves (not directory moves)
if !isDir {
data, err := readBody(r, filesMaxBodySize)
if err != nil {
return nil, err
}
opts.Data = data
}
resource, err := dualReadWriter.MoveResource(ctx, opts)
if err != nil {
return nil, err
}
return resource.AsResourceWrapper(), nil
}
func (c *filesConnector) handlePut(ctx context.Context, r *http.Request, opts resources.DualWriteOptions, isDir bool, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
if isDir {
return nil, apierrors.NewMethodNotSupported(provisioning.RepositoryResourceInfo.GroupResource(), r.Method)
}
data, err := readBody(r, filesMaxBodySize)
if err != nil {
return nil, err
}
opts.Data = data
resource, err := dualReadWriter.UpdateResource(ctx, opts)
if err != nil {
return nil, err
}
return resource.AsResourceWrapper(), nil
}
func (c *filesConnector) handleDelete(ctx context.Context, opts resources.DualWriteOptions, dualReadWriter *resources.DualReadWriter) (*provisioning.ResourceWrapper, error) {
resource, err := dualReadWriter.Delete(ctx, opts)
if err != nil {
return nil, err
}
return resource.AsResourceWrapper(), nil
}
// authorizeListFiles checks if the user has repositories:read permission for listing files.
// The access checker handles AccessPolicy identities, namespace resolution, and role-based fallback internally.
func (c *filesConnector) authorizeListFiles(ctx context.Context, repoName string) error {
return c.access.Check(ctx, authlib.CheckRequest{
Verb: utils.VerbGet,
Group: provisioning.GROUP,
Resource: provisioning.RepositoryResourceInfo.GetName(),
Name: repoName,
}, "")
}
// listFolderFiles returns a list of files in a folder.
// Authorization is checked via authorizeListFiles before calling this function.
func (c *filesConnector) listFolderFiles(ctx context.Context, filePath string, ref string, readWriter repository.ReaderWriter) (*provisioning.FileList, error) {
// TODO: Implement folder navigation
if len(filePath) > 0 {
return nil, apierrors.NewBadRequest("folder navigation not yet supported")
pkg/registry/apis/provisioning/register.go
+194 -145
View File
@@ -29,6 +29,7 @@ import (
"github.com/grafana/grafana-app-sdk/logging"
provisioning "github.com/grafana/grafana/apps/provisioning/pkg/apis/provisioning/v0alpha1"
"github.com/grafana/grafana/apps/provisioning/pkg/auth"
connectionvalidation "github.com/grafana/grafana/apps/provisioning/pkg/connection"
appcontroller "github.com/grafana/grafana/apps/provisioning/pkg/controller"
clientset "github.com/grafana/grafana/apps/provisioning/pkg/generated/clientset/versioned"
@@ -111,7 +112,10 @@ type APIBuilder struct {
unified resource.ResourceClient
repoFactory repository.Factory
client client.ProvisioningV0alpha1Interface
access authlib.AccessChecker
access auth.AccessChecker
accessWithAdmin auth.AccessChecker
accessWithEditor auth.AccessChecker
accessWithViewer auth.AccessChecker
statusPatcher *appcontroller.RepositoryStatusPatcher
healthChecker *controller.HealthChecker
validator repository.RepositoryValidator
@@ -158,6 +162,14 @@ func NewAPIBuilder(
parsers := resources.NewParserFactory(clients)
resourceLister := resources.NewResourceListerForMigrations(unified)
// Create access checker based on mode
var accessChecker auth.AccessChecker
if useExclusivelyAccessCheckerForAuthz {
accessChecker = auth.NewTokenAccessChecker(access)
} else {
accessChecker = auth.NewSessionAccessChecker(access)
}
b := &APIBuilder{
onlyApiServer: onlyApiServer,
tracer: tracer,
@@ -170,7 +182,10 @@ func NewAPIBuilder(
resourceLister: resourceLister,
dashboardAccess: dashboardAccess,
unified: unified,
access: access,
access: accessChecker,
accessWithAdmin: accessChecker.WithFallbackRole(identity.RoleAdmin),
accessWithEditor: accessChecker.WithFallbackRole(identity.RoleEditor),
accessWithViewer: accessChecker.WithFallbackRole(identity.RoleViewer),
jobHistoryConfig: jobHistoryConfig,
extraWorkers: extraWorkers,
restConfigGetter: restConfigGetter,
@@ -298,161 +313,142 @@ func (b *APIBuilder) GetAuthorizer() authorizer.Authorizer {
}
}
info, ok := authlib.AuthInfoFrom(ctx)
// when running as standalone API server, the identity type may not always match TypeAccessPolicy
// so we allow it to use the access checker if there is any auth info available
if ok && (authlib.IsIdentityType(info.GetIdentityType(), authlib.TypeAccessPolicy) || b.useExclusivelyAccessCheckerForAuthz) {
res, err := b.access.Check(ctx, info, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: a.GetAPIGroup(),
Resource: a.GetResource(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
Subresource: a.GetSubresource(),
Path: a.GetPath(),
}, "")
if err != nil {
return authorizer.DecisionDeny, "failed to perform authorization", err
}
if !res.Allowed {
return authorizer.DecisionDeny, "permission denied", nil
}
return authorizer.DecisionAllow, "", nil
}
id, err := identity.GetRequester(ctx)
if err != nil {
return authorizer.DecisionDeny, "failed to find requester", err
}
return b.authorizeResource(ctx, a, id)
return b.authorizeResource(ctx, a)
})
}
// authorizeResource handles authorization for different resources.
// Different routes may need different permissions.
// * Reading and modifying a repository's configuration requires administrator privileges.
// * Reading a repository's limited configuration (/stats & /settings) requires viewer privileges.
// * Reading a repository's files requires viewer privileges.
// * Reading a repository's refs requires viewer privileges.
// * Editing a repository's files requires editor privileges.
// * Syncing a repository requires editor privileges.
// * Exporting a repository requires administrator privileges.
// * Migrating a repository requires administrator privileges.
// * Testing a repository configuration requires administrator privileges.
// * Viewing a repository's history requires editor privileges.
func (b *APIBuilder) authorizeResource(ctx context.Context, a authorizer.Attributes, id identity.Requester) (authorizer.Decision, string, error) {
// Uses fine-grained permissions defined in accesscontrol.go:
//
// Repositories:
// - CRUD: repositories:create/read/write/delete
// - Subresources: files (any auth), refs (editor), resources/history/status (admin)
// - Test: repositories:write
// - Jobs subresource: jobs:create/read
//
// Connections:
// - CRUD: connections:create/read/write/delete
// - Status: connections:read
//
// Jobs:
// - CRUD: jobs:create/read/write/delete
//
// Historic Jobs:
// - Read-only: historicjobs:read
//
// Settings:
// - settings:read - granted to Viewer (all logged-in users)
//
// Stats:
// - stats:read - granted to Admin only
func (b *APIBuilder) authorizeResource(ctx context.Context, a authorizer.Attributes) (authorizer.Decision, string, error) {
switch a.GetResource() {
case provisioning.RepositoryResourceInfo.GetName():
return b.authorizeRepositorySubresource(a, id)
case "stats":
return b.authorizeStats(id)
case "settings":
return b.authorizeSettings(id)
case provisioning.JobResourceInfo.GetName(), provisioning.HistoricJobResourceInfo.GetName():
return b.authorizeJobs(id)
return b.authorizeRepositorySubresource(ctx, a)
case provisioning.ConnectionResourceInfo.GetName():
return b.authorizeConnectionSubresource(a, id)
return b.authorizeConnectionSubresource(ctx, a)
case provisioning.JobResourceInfo.GetName():
return toAuthorizerDecision(b.accessWithEditor.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: provisioning.JobResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
case provisioning.HistoricJobResourceInfo.GetName():
// Historic jobs are read-only and admin-only (not editor)
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: provisioning.HistoricJobResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
case "settings":
// Settings are read-only and accessible by all logged-in users (Viewer role)
return toAuthorizerDecision(b.accessWithViewer.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: "settings",
Namespace: a.GetNamespace(),
}, ""))
case "stats":
// Stats are read-only and admin-only
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: "stats",
Namespace: a.GetNamespace(),
}, ""))
default:
return b.authorizeDefault(id)
return b.authorizeDefault(ctx)
}
}
// authorizeRepositorySubresource handles authorization for repository subresources.
func (b *APIBuilder) authorizeRepositorySubresource(a authorizer.Attributes, id identity.Requester) (authorizer.Decision, string, error) {
// TODO: Support more fine-grained permissions than the basic roles. Especially on Enterprise.
switch a.GetSubresource() {
case "", "test":
// Doing something with the repository itself.
if id.GetOrgRole().Includes(identity.RoleAdmin) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "admin role is required", nil
case "jobs":
// Posting jobs requires editor privileges (for syncing).
if id.GetOrgRole().Includes(identity.RoleAdmin) || id.GetOrgRole().Includes(identity.RoleEditor) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "editor role is required", nil
case "refs":
// This is strictly a read operation. It is handy on the frontend for viewers.
if id.GetOrgRole().Includes(identity.RoleViewer) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "viewer role is required", nil
case "files":
// Access to files is controlled by the AccessClient
return authorizer.DecisionAllow, "", nil
case "resources", "sync", "history":
// These are strictly read operations.
// Sync can also be somewhat destructive, but it's expected to be fine to import changes.
if id.GetOrgRole().Includes(identity.RoleEditor) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "editor role is required", nil
case "status":
if id.GetOrgRole().Includes(identity.RoleViewer) && a.GetVerb() == apiutils.VerbGet {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "users cannot update the status of a repository", nil
default:
if id.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "unmapped subresource defaults to no access", nil
}
}
// authorizeStats handles authorization for stats resource.
func (b *APIBuilder) authorizeStats(id identity.Requester) (authorizer.Decision, string, error) {
// This can leak information one shouldn't necessarily have access to.
if id.GetOrgRole().Includes(identity.RoleAdmin) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "admin role is required", nil
}
// authorizeSettings handles authorization for settings resource.
func (b *APIBuilder) authorizeSettings(id identity.Requester) (authorizer.Decision, string, error) {
// This is strictly a read operation. It is handy on the frontend for viewers.
if id.GetOrgRole().Includes(identity.RoleViewer) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "viewer role is required", nil
}
// authorizeJobs handles authorization for job resources.
func (b *APIBuilder) authorizeJobs(id identity.Requester) (authorizer.Decision, string, error) {
// Jobs are shown on the configuration page.
if id.GetOrgRole().Includes(identity.RoleAdmin) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "admin role is required", nil
}
// authorizeRepositorySubresource handles authorization for connections subresources.
func (b *APIBuilder) authorizeConnectionSubresource(a authorizer.Attributes, id identity.Requester) (authorizer.Decision, string, error) {
// Uses the access checker with verb-based authorization.
func (b *APIBuilder) authorizeRepositorySubresource(ctx context.Context, a authorizer.Attributes) (authorizer.Decision, string, error) {
switch a.GetSubresource() {
// Repository CRUD - use access checker with the actual verb
case "":
// Doing something with the connection itself.
if id.GetOrgRole().Includes(identity.RoleAdmin) {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "admin role is required", nil
case "status":
if id.GetOrgRole().Includes(identity.RoleViewer) && a.GetVerb() == apiutils.VerbGet {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "users cannot update the status of a connection", nil
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: provisioning.RepositoryResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
// Test requires write permission (testing before save)
case "test":
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: apiutils.VerbUpdate,
Group: provisioning.GROUP,
Resource: provisioning.RepositoryResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
// Files subresource: allow any authenticated user at route level.
// Directory listing checks repositories:read in the connector.
// Individual file operations are authorized by DualReadWriter based on the actual resource.
case "files":
return authorizer.DecisionAllow, "", nil
// refs subresource - editors need to see branches to push changes
case "refs":
return toAuthorizerDecision(b.accessWithEditor.Check(ctx, authlib.CheckRequest{
Verb: apiutils.VerbGet,
Group: provisioning.GROUP,
Resource: provisioning.RepositoryResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
// Read-only subresources: resources, history, status (admin only)
case "resources", "history", "status":
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: apiutils.VerbGet,
Group: provisioning.GROUP,
Resource: provisioning.RepositoryResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
// Jobs subresource - check jobs permissions with the verb (editors can manage jobs)
case "jobs":
return toAuthorizerDecision(b.accessWithEditor.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: provisioning.JobResourceInfo.GetName(),
Namespace: a.GetNamespace(),
}, ""))
default:
id, err := identity.GetRequester(ctx)
if err != nil {
return authorizer.DecisionDeny, "failed to find requester", err
}
if id.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
}
@@ -460,8 +456,60 @@ func (b *APIBuilder) authorizeConnectionSubresource(a authorizer.Attributes, id
}
}
// authorizeConnectionSubresource handles authorization for connection subresources.
// Uses the access checker with verb-based authorization.
func (b *APIBuilder) authorizeConnectionSubresource(ctx context.Context, a authorizer.Attributes) (authorizer.Decision, string, error) {
switch a.GetSubresource() {
// Connection CRUD - use access checker with the actual verb
case "":
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: a.GetVerb(),
Group: provisioning.GROUP,
Resource: provisioning.ConnectionResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
// Status is read-only
case "status":
return toAuthorizerDecision(b.accessWithAdmin.Check(ctx, authlib.CheckRequest{
Verb: apiutils.VerbGet,
Group: provisioning.GROUP,
Resource: provisioning.ConnectionResourceInfo.GetName(),
Name: a.GetName(),
Namespace: a.GetNamespace(),
}, ""))
default:
id, err := identity.GetRequester(ctx)
if err != nil {
return authorizer.DecisionDeny, "failed to find requester", err
}
if id.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
}
return authorizer.DecisionDeny, "unmapped subresource defaults to no access", nil
}
}
// ----------------------------------------------------------------------------
// Authorization helpers
// ----------------------------------------------------------------------------
// toAuthorizerDecision converts an access check error to an authorizer decision tuple.
func toAuthorizerDecision(err error) (authorizer.Decision, string, error) {
if err != nil {
return authorizer.DecisionDeny, err.Error(), nil
}
return authorizer.DecisionAllow, "", nil
}
// authorizeDefault handles authorization for unmapped resources.
func (b *APIBuilder) authorizeDefault(id identity.Requester) (authorizer.Decision, string, error) {
func (b *APIBuilder) authorizeDefault(ctx context.Context) (authorizer.Decision, string, error) {
id, err := identity.GetRequester(ctx)
if err != nil {
return authorizer.DecisionDeny, "failed to find requester", err
}
// We haven't bothered with this kind yet.
if id.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
@@ -558,7 +606,7 @@ func (b *APIBuilder) UpdateAPIGroupInfo(apiGroupInfo *genericapiserver.APIGroupI
// TODO: Add some logic so that the connectors can registered themselves and we don't have logic all over the place
storage[provisioning.RepositoryResourceInfo.StoragePath("test")] = NewTestConnector(b, repository.NewRepositoryTesterWithExistingChecker(repository.NewSimpleRepositoryTester(b.validator), b.VerifyAgainstExistingRepositories))
storage[provisioning.RepositoryResourceInfo.StoragePath("files")] = NewFilesConnector(b, b.parsers, b.clients, b.access)
storage[provisioning.RepositoryResourceInfo.StoragePath("files")] = NewFilesConnector(b, b.parsers, b.clients, b.accessWithAdmin)
storage[provisioning.RepositoryResourceInfo.StoragePath("refs")] = NewRefsConnector(b)
storage[provisioning.RepositoryResourceInfo.StoragePath("resources")] = &listConnector{
getter: b,
@@ -673,7 +721,8 @@ func (b *APIBuilder) Validate(ctx context.Context, a admission.Attributes, o adm
//
// the only time to add configuration checks here is if you need to compare
// the incoming change to the current configuration
list := b.validator.ValidateRepository(repo)
isCreate := a.GetOperation() == admission.Create
list := b.validator.ValidateRepository(repo, isCreate)
cfg := repo.Config()
if a.GetOperation() == admission.Update {
pkg/registry/apis/provisioning/resources/dualwriter.go
+13 -36
View File
@@ -12,6 +12,7 @@ import (
authlib "github.com/grafana/authlib/types"
"github.com/grafana/grafana-app-sdk/logging"
provisioning "github.com/grafana/grafana/apps/provisioning/pkg/apis/provisioning/v0alpha1"
"github.com/grafana/grafana/apps/provisioning/pkg/auth"
"github.com/grafana/grafana/apps/provisioning/pkg/repository"
"github.com/grafana/grafana/apps/provisioning/pkg/safepath"
"github.com/grafana/grafana/pkg/apimachinery/apis/common/v0alpha1"
@@ -32,7 +33,7 @@ type DualReadWriter struct {
repo repository.ReaderWriter
parser Parser
folders *FolderManager
access authlib.AccessChecker
access auth.AccessChecker
}
type DualWriteOptions struct {
@@ -48,7 +49,7 @@ type DualWriteOptions struct {
Branch string // Configured default branch
}
func NewDualReadWriter(repo repository.ReaderWriter, parser Parser, folders *FolderManager, access authlib.AccessChecker) *DualReadWriter {
func NewDualReadWriter(repo repository.ReaderWriter, parser Parser, folders *FolderManager, access auth.AccessChecker) *DualReadWriter {
return &DualReadWriter{repo: repo, parser: parser, folders: folders, access: access}
}
@@ -492,11 +493,6 @@ func (r *DualReadWriter) moveFile(ctx context.Context, opts DualWriteOptions) (*
}
func (r *DualReadWriter) authorize(ctx context.Context, parsed *ParsedResource, verb string) error {
id, err := identity.GetRequester(ctx)
if err != nil {
return apierrors.NewUnauthorized(err.Error())
}
var name string
if parsed.Existing != nil {
name = parsed.Existing.GetName()
@@ -504,27 +500,15 @@ func (r *DualReadWriter) authorize(ctx context.Context, parsed *ParsedResource,
name = parsed.Obj.GetName()
}
rsp, err := r.access.Check(ctx, id, authlib.CheckRequest{
Group: parsed.GVR.Group,
Resource: parsed.GVR.Resource,
Namespace: id.GetNamespace(),
Name: name,
Verb: verb,
return r.access.Check(ctx, authlib.CheckRequest{
Group: parsed.GVR.Group,
Resource: parsed.GVR.Resource,
Name: name,
Verb: verb,
}, parsed.Meta.GetFolder())
if err != nil || !rsp.Allowed {
return apierrors.NewForbidden(parsed.GVR.GroupResource(), parsed.Obj.GetName(),
fmt.Errorf("no access to perform %s on the resource", verb))
}
return nil
}
func (r *DualReadWriter) authorizeCreateFolder(ctx context.Context, path string) error {
id, err := identity.GetRequester(ctx)
if err != nil {
return apierrors.NewUnauthorized(err.Error())
}
// Determine parent folder from path
parentFolder := ""
if path != "" {
@@ -537,19 +521,12 @@ func (r *DualReadWriter) authorizeCreateFolder(ctx context.Context, path string)
}
// For folder create operations, use empty name to check parent folder permissions
rsp, err := r.access.Check(ctx, id, authlib.CheckRequest{
Group: FolderResource.Group,
Resource: FolderResource.Resource,
Namespace: id.GetNamespace(),
Name: "", // Empty name for create operations
Verb: utils.VerbCreate,
return r.access.Check(ctx, authlib.CheckRequest{
Group: FolderResource.Group,
Resource: FolderResource.Resource,
Name: "", // Empty name for create operations
Verb: utils.VerbCreate,
}, parentFolder)
if err != nil || !rsp.Allowed {
return apierrors.NewForbidden(FolderResource.GroupResource(), path,
fmt.Errorf("no access to create folder in parent folder '%s'", parentFolder))
}
return nil
}
func (r *DualReadWriter) deleteFolder(ctx context.Context, opts DualWriteOptions) (*ParsedResource, error) {
pkg/registry/apps/logsdrilldown/authorizer.go
+20 -8
View File
@@ -24,26 +24,38 @@ func GetAuthorizer() authorizer.Authorizer {
return authorizer.DecisionDeny, "valid user is required", err
}
// check if is admin
if u.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "isGrafanaAdmin", nil
}
// Auth handling for LogsDrilldownDefaults resource
if attr.GetResource() == "logsdrilldowndefaults" {
// Allow list and get for everyone
if attr.GetVerb() == "list" || attr.GetVerb() == "get" {
return authorizer.DecisionAllow, "", nil
}
// Only allow admins to update (create, update, patch, delete)
if u.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
}
// Deny all other operations for non-admins
return authorizer.DecisionDeny, "admin access required", nil
}
// check if is admin
if u.GetIsGrafanaAdmin() {
return authorizer.DecisionAllow, "", nil
p := u.GetPermissions()
// Auth handling for Logs Drilldown default columns
if attr.GetResource() == "logsdrilldowndefaultcolumns" {
// Allow get for all users
if attr.GetVerb() == "get" {
return authorizer.DecisionAllow, "", nil
}
// require plugins:write permissions for other operations
_, ok := p[accesscontrol.PluginRolePrefix+"write"]
if ok {
return authorizer.DecisionAllow, "user has plugins:write", nil
} else {
return authorizer.DecisionDeny, "user missing plugins:write", nil
}
}
p := u.GetPermissions()
if len(p) == 0 {
return authorizer.DecisionDeny, "no permissions", nil
}
pkg/services/authn/clients/ext_jwt.go
+2 -1
View File
@@ -131,7 +131,8 @@ func (s *ExtendedJWT) authenticateAsUser(
return nil, errExtJWTInvalid.Errorf("failed to parse id token subject: %w", err)
}
if !claims.IsIdentityType(t, claims.TypeUser) {
// TODO: How to support other identity types like render and anonymous here?
if !claims.IsIdentityType(t, claims.TypeUser, claims.TypeServiceAccount) {
return nil, errExtJWTInvalidSubject.Errorf("unexpected identity: %s", idTokenClaims.Subject)
}
pkg/services/authn/clients/ext_jwt_test.go
+35 -1
View File
@@ -53,6 +53,17 @@ var (
Namespace: "default", // org ID of 1 is special and translates to default
},
}
validIDTokenClaimsWithServiceAccount = idTokenClaims{
Claims: jwt.Claims{
Subject: "service-account:3",
Expiry: jwt.NewNumericDate(time.Date(2023, 5, 3, 0, 0, 0, 0, time.UTC)),
IssuedAt: jwt.NewNumericDate(time.Date(2023, 5, 2, 0, 0, 0, 0, time.UTC)),
},
Rest: authnlib.IDTokenClaims{
AuthenticatedBy: "extended_jwt",
Namespace: "default", // org ID of 1 is special and translates to default
},
}
validIDTokenClaimsWithStackSet = idTokenClaims{
Claims: jwt.Claims{
Subject: "user:2",
@@ -118,7 +129,7 @@ var (
}
invalidSubjectIDTokenClaims = idTokenClaims{
Claims: jwt.Claims{
Subject: "service-account:2",
Subject: "anonymous:2",
Expiry: jwt.NewNumericDate(time.Date(2023, 5, 3, 0, 0, 0, 0, time.UTC)),
IssuedAt: jwt.NewNumericDate(time.Date(2023, 5, 2, 0, 0, 0, 0, time.UTC)),
},
@@ -286,6 +297,29 @@ func TestExtendedJWT_Authenticate(t *testing.T) {
},
},
},
{
name: "should authenticate as service account",
accessToken: &validAccessTokenClaims,
idToken: &validIDTokenClaimsWithServiceAccount,
orgID: 1,
want: &authn.Identity{
ID: "3",
Type: claims.TypeServiceAccount,
OrgID: 1,
AccessTokenClaims: &validAccessTokenClaims,
IDTokenClaims: &validIDTokenClaimsWithServiceAccount,
Namespace: "default",
AuthenticatedBy: "extendedjwt",
AuthID: "access-policy:this-uid",
ClientParams: authn.ClientParams{
FetchSyncedUser: true,
SyncPermissions: true,
FetchPermissionsParams: authn.FetchPermissionsParams{
RestrictedActions: []string{"dashboards:create", "folders:read", "datasources:explore", "datasources.insights:read"},
},
},
},
},
{
name: "should authenticate as user in the user namespace",
accessToken: &validAccessTokenClaimsWildcard,
pkg/services/authz/rbac/mapper.go
+3
View File
@@ -279,8 +279,11 @@ func NewMapperRegistry() MapperRegistry {
},
"provisioning.grafana.app": {
"repositories": newResourceTranslation("provisioning.repositories", "uid", false, skipScopeOnAllVerbs),
"connections": newResourceTranslation("provisioning.connections", "uid", false, skipScopeOnAllVerbs),
"jobs": newResourceTranslation("provisioning.jobs", "uid", false, skipScopeOnAllVerbs),
"historicjobs": newResourceTranslation("provisioning.historicjobs", "uid", false, skipScopeOnAllVerbs),
"settings": newResourceTranslation("provisioning.settings", "", false, skipScopeOnAllVerbs),
"stats": newResourceTranslation("provisioning.stats", "", false, skipScopeOnAllVerbs),
},
"secret.grafana.app": {
"securevalues": newResourceTranslation("secret.securevalues", "uid", false, nil),
pkg/services/featuremgmt/registry.go
+15 -7
View File
@@ -185,13 +185,6 @@ var (
Stage: FeatureStageExperimental,
Owner: grafanaDatasourcesCoreServicesSquad,
},
{
Name: "unifiedRequestLog",
Description: "Writes error logs to the request logger",
Stage: FeatureStageGeneralAvailability,
Owner: grafanaBackendGroup,
Expression: "true",
},
{
Name: "renderAuthJWT",
Description: "Uses JWT-based auth for rendering instead of relying on remote cache",
@@ -892,6 +885,13 @@ var (
Owner: grafanaAlertingSquad,
FrontendOnly: true,
},
{
Name: "alertingSavedSearches",
Description: "Enables saved searches for alert rules list",
Stage: FeatureStageExperimental,
Owner: grafanaAlertingSquad,
FrontendOnly: true,
},
{
Name: "alertingDisableSendAlertsExternal",
Description: "Disables the ability to send alerts to an external Alertmanager datasource.",
@@ -1975,6 +1975,14 @@ var (
Owner: identityAccessTeam,
Expression: "true",
},
{
Name: "pluginInsights",
Description: "Show insights for plugins in the plugin details page",
Stage: FeatureStageExperimental,
FrontendOnly: true,
Owner: grafanaPluginsPlatformSquad,
Expression: "false",
},
{
Name: "panelTimeSettings",
Description: "Enables a new panel time settings drawer",
pkg/services/featuremgmt/toggles_gen.csv
Generated
+2 -1
View File
@@ -24,7 +24,6 @@ influxqlStreamingParser,experimental,@grafana/partner-datasources,false,false,fa
influxdbRunQueriesInParallel,privatePreview,@grafana/partner-datasources,false,false,false
lokiLogsDataplane,experimental,@grafana/observability-logs,false,false,false
disableSSEDataplane,experimental,@grafana/grafana-datasources-core-services,false,false,false
unifiedRequestLog,GA,@grafana/grafana-backend-group,false,false,false
renderAuthJWT,preview,@grafana/grafana-operator-experience-squad,false,false,false
refactorVariablesTimeRange,preview,@grafana/dashboards-squad,false,false,false
faroDatasourceSelector,preview,@grafana/app-o11y,false,false,true
@@ -123,6 +122,7 @@ suggestedDashboards,experimental,@grafana/sharing-squad,false,false,false
dashboardTemplates,preview,@grafana/sharing-squad,false,false,false
logsExploreTableDefaultVisualization,experimental,@grafana/observability-logs,false,false,true
alertingListViewV2,privatePreview,@grafana/alerting-squad,false,false,true
alertingSavedSearches,experimental,@grafana/alerting-squad,false,false,true
alertingDisableSendAlertsExternal,experimental,@grafana/alerting-squad,false,false,false
preserveDashboardStateWhenNavigating,experimental,@grafana/dashboards-squad,false,false,false
alertingCentralAlertHistory,experimental,@grafana/alerting-squad,false,false,false
@@ -268,6 +268,7 @@ jaegerEnableGrpcEndpoint,experimental,@grafana/oss-big-tent,false,false,false
pluginStoreServiceLoading,experimental,@grafana/plugins-platform-backend,false,false,false
newPanelPadding,preview,@grafana/dashboards-squad,false,false,true
onlyStoreActionSets,GA,@grafana/identity-access-team,false,false,false
pluginInsights,experimental,@grafana/plugins-platform-backend,false,false,true
panelTimeSettings,experimental,@grafana/dashboards-squad,false,false,false
elasticsearchRawDSLQuery,experimental,@grafana/partner-datasources,false,false,false
kubernetesAnnotations,experimental,@grafana/grafana-backend-services-squad,false,false,false
1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
24 influxdbRunQueriesInParallel privatePreview @grafana/partner-datasources false false false
25 lokiLogsDataplane experimental @grafana/observability-logs false false false
26 disableSSEDataplane experimental @grafana/grafana-datasources-core-services false false false
unifiedRequestLog GA @grafana/grafana-backend-group false false false
27 renderAuthJWT preview @grafana/grafana-operator-experience-squad false false false
28 refactorVariablesTimeRange preview @grafana/dashboards-squad false false false
29 faroDatasourceSelector preview @grafana/app-o11y false false true
122 dashboardTemplates preview @grafana/sharing-squad false false false
123 logsExploreTableDefaultVisualization experimental @grafana/observability-logs false false true
124 alertingListViewV2 privatePreview @grafana/alerting-squad false false true
125 alertingSavedSearches experimental @grafana/alerting-squad false false true
126 alertingDisableSendAlertsExternal experimental @grafana/alerting-squad false false false
127 preserveDashboardStateWhenNavigating experimental @grafana/dashboards-squad false false false
128 alertingCentralAlertHistory experimental @grafana/alerting-squad false false false
268 pluginStoreServiceLoading experimental @grafana/plugins-platform-backend false false false
269 newPanelPadding preview @grafana/dashboards-squad false false true
270 onlyStoreActionSets GA @grafana/identity-access-team false false false
271 pluginInsights experimental @grafana/plugins-platform-backend false false true
272 panelTimeSettings experimental @grafana/dashboards-squad false false false
273 elasticsearchRawDSLQuery experimental @grafana/partner-datasources false false false
274 kubernetesAnnotations experimental @grafana/grafana-backend-services-squad false false false
pkg/services/featuremgmt/toggles_gen.go
Generated
-4
View File
@@ -79,10 +79,6 @@ const (
// Disables dataplane specific processing in server side expressions.
FlagDisableSSEDataplane = "disableSSEDataplane"
// FlagUnifiedRequestLog
// Writes error logs to the request logger
FlagUnifiedRequestLog = "unifiedRequestLog"
// FlagRenderAuthJWT
// Uses JWT-based auth for rendering instead of relying on remote cache
FlagRenderAuthJWT = "renderAuthJWT"
pkg/services/featuremgmt/toggles_gen.json
Generated
+29 -1
View File
@@ -498,6 +498,19 @@
"codeowner": "@grafana/alerting-squad"
}
},
{
"metadata": {
"name": "alertingSavedSearches",
"resourceVersion": "1765453147546",
"creationTimestamp": "2025-12-11T11:39:07Z"
},
"spec": {
"description": "Enables saved searches for alert rules list",
"stage": "experimental",
"codeowner": "@grafana/alerting-squad",
"frontend": true
}
},
{
"metadata": {
"name": "alertingTriage",
@@ -2720,6 +2733,20 @@
"expression": "false"
}
},
{
"metadata": {
"name": "pluginInsights",
"resourceVersion": "1761300628147",
"creationTimestamp": "2025-10-24T10:10:28Z"
},
"spec": {
"description": "Show insights for plugins in the plugin details page",
"stage": "experimental",
"codeowner": "@grafana/plugins-platform-backend",
"frontend": true,
"expression": "false"
}
},
{
"metadata": {
"name": "pluginInstallAPISync",
@@ -3515,7 +3542,8 @@
"metadata": {
"name": "unifiedRequestLog",
"resourceVersion": "1764664939750",
"creationTimestamp": "2023-03-31T13:38:09Z"
"creationTimestamp": "2023-03-31T13:38:09Z",
"deletionTimestamp": "2025-12-18T14:21:02Z"
},
"spec": {
"description": "Writes error logs to the request logger",
pkg/services/folder/folderimpl/folder_unifiedstorage.go
+1 -37
View File
@@ -726,19 +726,6 @@ func (s *Service) moveOnApiServer(ctx context.Context, cmd *folder.MoveFolderCom
return nil, folder.ErrBadRequest.Errorf("k6 project may not be moved")
}
f, err := s.unifiedStore.Get(ctx, folder.GetFolderQuery{
UID: &cmd.UID,
OrgID: cmd.OrgID,
SignedInUser: cmd.SignedInUser,
})
if err != nil {
return nil, err
}
if f != nil && f.ParentUID == accesscontrol.K6FolderUID {
return nil, folder.ErrBadRequest.Errorf("k6 project may not be moved")
}
// Check that the user is allowed to move the folder to the destination folder
hasAccess, evalErr := s.canMoveViaApiServer(ctx, cmd)
if evalErr != nil {
@@ -748,30 +735,7 @@ func (s *Service) moveOnApiServer(ctx context.Context, cmd *folder.MoveFolderCom
return nil, dashboards.ErrFolderAccessDenied
}
// here we get the folder, we need to get the height of current folder
// and the depth of the new parent folder, the sum can't bypass 8
folderHeight, err := s.unifiedStore.GetHeight(ctx, cmd.UID, cmd.OrgID, &cmd.NewParentUID)
if err != nil {
return nil, err
}
parents, err := s.unifiedStore.GetParents(ctx, folder.GetParentsQuery{UID: cmd.NewParentUID, OrgID: cmd.OrgID})
if err != nil {
return nil, err
}
// height of the folder that is being moved + this current folder itself + depth of the NewParent folder should be less than or equal MaxNestedFolderDepth
if folderHeight+len(parents)+1 > folder.MaxNestedFolderDepth {
return nil, folder.ErrMaximumDepthReached.Errorf("failed to move folder")
}
for _, parent := range parents {
// if the current folder is already a parent of newparent, we should return error
if parent.UID == cmd.UID {
return nil, folder.ErrCircularReference.Errorf("failed to move folder")
}
}
f, err = s.unifiedStore.Update(ctx, folder.UpdateFolderCommand{
f, err := s.unifiedStore.Update(ctx, folder.UpdateFolderCommand{
UID: cmd.UID,
OrgID: cmd.OrgID,
NewParentUID: &cmd.NewParentUID,
pkg/services/ngalert/api/api_prometheus_test.go
+51
View File
@@ -2169,6 +2169,57 @@ func TestRouteGetRuleStatuses(t *testing.T) {
})
})
t.Run("compact mode with receiver_name filter returns only matching rules", func(t *testing.T) {
fakeStore, _, api := setupAPI(t)
ruleA := gen.With(
gen.WithGroupKey(ngmodels.AlertRuleGroupKey{
NamespaceUID: "folder-1",
RuleGroup: "group-1",
OrgID: orgID,
}),
gen.WithNotificationSettings(
ngmodels.NotificationSettings{
Receiver: "receiver-a",
GroupBy: []string{"alertname"},
},
),
).GenerateRef()
fakeStore.PutRule(context.Background(), ruleA)
ruleB := gen.With(
gen.WithGroupKey(ngmodels.AlertRuleGroupKey{
NamespaceUID: "folder-2",
RuleGroup: "group-2",
OrgID: orgID,
}),
gen.WithNotificationSettings(
ngmodels.NotificationSettings{
Receiver: "receiver-b",
GroupBy: []string{"alertname"},
},
),
).GenerateRef()
fakeStore.PutRule(context.Background(), ruleB)
r, err := http.NewRequest("GET", "/api/v1/rules?compact=true&receiver_name=receiver-a", nil)
require.NoError(t, err)
c := &contextmodel.ReqContext{
Context: &web.Context{Req: r},
SignedInUser: &user.SignedInUser{
OrgID: orgID,
Permissions: queryPermissions,
},
}
resp := api.RouteGetRuleStatuses(c)
require.Equal(t, http.StatusOK, resp.Status())
var res apimodels.RuleResponse
require.NoError(t, json.Unmarshal(resp.Body(), &res))
require.Len(t, res.Data.RuleGroups, 1)
require.Equal(t, "group-1", res.Data.RuleGroups[0].Name)
require.Empty(t, res.Data.RuleGroups[0].Rules[0].Query, "Query should be empty in compact mode")
})
t.Run("provenance as expected", func(t *testing.T) {
fakeStore, fakeAIM, api, provStore := setupAPIFull(t)
// Rule without provenance
pkg/services/ngalert/store/alert_rule.go
+18 -6
View File
@@ -642,6 +642,23 @@ func (st DBstore) ListAlertRulesByGroup(ctx context.Context, query *ngmodels.Lis
_ = rows.Close()
}()
opts := AlertRuleConvertOptions{}
if query.Compact {
opts.ExcludeAlertQueries = true
opts.ExcludeNotificationSettings = true
opts.ExcludeMetadata = true
if query.ReceiverName != "" || query.TimeIntervalName != "" {
// Need NotificationSettings for these filters
opts.ExcludeNotificationSettings = false
}
if query.HasPrometheusRuleDefinition != nil {
// Need Metadata for this filter
opts.ExcludeMetadata = false
}
}
// Process rules and implement per-group pagination
var groupsFetched int64
var rulesFetched int64
@@ -653,12 +670,7 @@ func (st DBstore) ListAlertRulesByGroup(ctx context.Context, query *ngmodels.Lis
continue
}
var converted ngmodels.AlertRule
if query.Compact {
converted, err = alertRuleToModelsAlertRuleCompact(*rule, st.Logger)
} else {
converted, err = alertRuleToModelsAlertRule(*rule, st.Logger)
}
converted, err := convertAlertRuleToModel(*rule, st.Logger, opts)
if err != nil {
st.Logger.Error("Invalid rule found in DB store, cannot convert, ignoring it", "func", "ListAlertRulesByGroup", "error", err)
pkg/services/ngalert/store/compat.go
+13 -12
View File
@@ -15,22 +15,23 @@ type compactQuery struct {
DatasourceUID string `json:"datasourceUid"`
}
func alertRuleToModelsAlertRule(ar alertRule, l log.Logger) (models.AlertRule, error) {
return convertAlertRuleToModel(ar, l, false)
// AlertRuleConvertOptions controls which fields to parse during conversion from alertRule to models.AlertRule.
// By default all fields are included. Set Exclude* to true to skip parsing expensive fields.
type AlertRuleConvertOptions struct {
ExcludeAlertQueries bool // Only parse datasource UIDs from queries
ExcludeNotificationSettings bool
ExcludeMetadata bool
}
// alertRuleToModelsAlertRuleCompact transforms an alertRule to a models.AlertRule
// ignoring alert queries (except for data source UIDs), notification settings, and metadata.
func alertRuleToModelsAlertRuleCompact(ar alertRule, l log.Logger) (models.AlertRule, error) {
return convertAlertRuleToModel(ar, l, true)
func alertRuleToModelsAlertRule(ar alertRule, l log.Logger) (models.AlertRule, error) {
return convertAlertRuleToModel(ar, l, AlertRuleConvertOptions{})
}
// convertAlertRuleToModel creates a models.AlertRule from an alertRule.
// When 'compact' is set to 'true', it skips parsing the alert queries (except for the data source UID), notification
// settings, and metadata, thus reducing the number of JSON serializations needed.
func convertAlertRuleToModel(ar alertRule, l log.Logger, compact bool) (models.AlertRule, error) {
// opts.Exclude* fields control which expensive fields to skip parsing, reducing JSON serializations.
func convertAlertRuleToModel(ar alertRule, l log.Logger, opts AlertRuleConvertOptions) (models.AlertRule, error) {
var data []models.AlertQuery
if compact {
if opts.ExcludeAlertQueries {
var cqs []compactQuery
if err := json.Unmarshal([]byte(ar.Data), &cqs); err != nil {
return models.AlertRule{}, fmt.Errorf("failed to parse data: %w", err)
@@ -118,7 +119,7 @@ func convertAlertRuleToModel(ar alertRule, l log.Logger, compact bool) (models.A
}
}
if !compact && ar.NotificationSettings != "" {
if !opts.ExcludeNotificationSettings && ar.NotificationSettings != "" {
ns, err := parseNotificationSettings(ar.NotificationSettings)
if err != nil {
return models.AlertRule{}, fmt.Errorf("failed to parse notification settings: %w", err)
@@ -126,7 +127,7 @@ func convertAlertRuleToModel(ar alertRule, l log.Logger, compact bool) (models.A
result.NotificationSettings = ns
}
if !compact && ar.Metadata != "" {
if !opts.ExcludeMetadata && ar.Metadata != "" {
err = json.Unmarshal([]byte(ar.Metadata), &result.Metadata)
if err != nil {
return models.AlertRule{}, fmt.Errorf("failed to metadata: %w", err)
pkg/services/ngalert/store/compat_test.go
+81 -1
View File
@@ -84,7 +84,11 @@ func TestAlertRuleToModelsAlertRuleCompact(t *testing.T) {
Metadata: `{"editor_settings":{"simplified_query_and_expressions_section":true}}`,
}
compactResult, err := alertRuleToModelsAlertRuleCompact(rule, &logtest.Fake{})
compactResult, err := convertAlertRuleToModel(rule, &logtest.Fake{}, AlertRuleConvertOptions{
ExcludeAlertQueries: true,
ExcludeNotificationSettings: true,
ExcludeMetadata: true,
})
require.NoError(t, err)
// Should have datasource UIDs.
@@ -142,6 +146,82 @@ func TestAlertRuleToModelsAlertRuleCompact(t *testing.T) {
// Should have metadata (metadata is parsed from JSON to struct).
require.NotEqual(t, ngmodels.AlertRuleMetadata{}, fullResult.Metadata)
})
t.Run("compact mode with notification settings included for filtering", func(t *testing.T) {
rule := alertRule{
ID: 1,
OrgID: 1,
UID: "test-uid",
Title: "Test Rule",
Condition: "A",
Data: `[{"datasourceUid":"ds1","refId":"A","queryType":"test","model":{"expr":"up"}}]`,
IntervalSeconds: 60,
Version: 1,
NamespaceUID: "ns-uid",
RuleGroup: "test-group",
NoDataState: "NoData",
ExecErrState: "Error",
NotificationSettings: `[{"receiver":"test-receiver"}]`,
Metadata: `{"editor_settings":{"simplified_query_and_expressions_section":true}}`,
}
result, err := convertAlertRuleToModel(rule, &logtest.Fake{}, AlertRuleConvertOptions{
ExcludeAlertQueries: true,
ExcludeNotificationSettings: false,
ExcludeMetadata: true,
})
require.NoError(t, err)
// Should have compact query data (only datasource UIDs).
require.Len(t, result.Data, 1)
require.Equal(t, "ds1", result.Data[0].DatasourceUID)
require.Empty(t, result.Data[0].RefID)
// Should have notification settings for filtering.
require.Len(t, result.NotificationSettings, 1)
require.Equal(t, "test-receiver", result.NotificationSettings[0].Receiver)
// Should not have metadata.
require.Equal(t, ngmodels.AlertRuleMetadata{}, result.Metadata)
})
t.Run("compact mode with metadata included for filtering", func(t *testing.T) {
rule := alertRule{
ID: 1,
OrgID: 1,
UID: "test-uid",
Title: "Test Rule",
Condition: "A",
Data: `[{"datasourceUid":"ds1","refId":"A","queryType":"test","model":{"expr":"up"}}]`,
IntervalSeconds: 60,
Version: 1,
NamespaceUID: "ns-uid",
RuleGroup: "test-group",
NoDataState: "NoData",
ExecErrState: "Error",
NotificationSettings: `[{"receiver":"test-receiver"}]`,
Metadata: `{"prometheus_style_rule":{"original_rule_definition":"alert: TestAlert\n expr: rate(metric[5m]) > 1"}}`,
}
result, err := convertAlertRuleToModel(rule, &logtest.Fake{}, AlertRuleConvertOptions{
ExcludeAlertQueries: true,
ExcludeNotificationSettings: true,
ExcludeMetadata: false,
})
require.NoError(t, err)
// Should have compact query data (only datasource UIDs).
require.Len(t, result.Data, 1)
require.Equal(t, "ds1", result.Data[0].DatasourceUID)
require.Empty(t, result.Data[0].RefID)
// Should not have notification settings.
require.Empty(t, result.NotificationSettings)
// Should have metadata for filtering.
require.NotEqual(t, ngmodels.AlertRuleMetadata{}, result.Metadata)
require.True(t, result.HasPrometheusRuleDefinition())
})
}
func TestAlertRuleVersionToAlertRule(t *testing.T) {
pkg/setting/setting.go
+1 -1
View File
@@ -2167,7 +2167,7 @@ func (cfg *Cfg) readProvisioningSettings(iniFile *ini.File) error {
}
cfg.ProvisioningAllowedTargets = iniFile.Section("provisioning").Key("allowed_targets").Strings("|")
if len(cfg.ProvisioningAllowedTargets) == 0 {
cfg.ProvisioningAllowedTargets = []string{"instance", "folder"}
cfg.ProvisioningAllowedTargets = []string{"folder"}
}
cfg.ProvisioningAllowImageRendering = iniFile.Section("provisioning").Key("allow_image_rendering").MustBool(true)
cfg.ProvisioningMinSyncInterval = iniFile.Section("provisioning").Key("min_sync_interval").MustDuration(10 * time.Second)
pkg/storage/unified/resource/data/sqlkv_batch_delete.sql
+7
View File
@@ -0,0 +1,7 @@
DELETE
FROM {{ .TableName }}
WHERE {{ .Ident "key_path" }} IN (
{{ range $id, $key_path := .KeyPaths }}
{{ if ne $id 0 }}, {{ end }}{{ $.Arg $key_path }}
{{ end }}
);
pkg/storage/unified/resource/data/sqlkv_delete_legacy_resource.sql
+5
View File
@@ -0,0 +1,5 @@
DELETE FROM {{ .Ident "resource" }}
WHERE {{ .Ident "group" }} = {{ .Arg .Group }}
AND {{ .Ident "resource" }} = {{ .Arg .Resource }}
AND {{ .Ident "namespace" }} = {{ .Arg .Namespace }}
AND {{ .Ident "name" }} = {{ .Arg .Name }};
pkg/storage/unified/resource/data/sqlkv_insert_datastore.sql
+21
View File
@@ -0,0 +1,21 @@
INSERT INTO {{ .Ident .TableName }}
(
{{ .Ident "guid" }},
{{ .Ident "key_path" }},
{{ .Ident "value" }},
{{ .Ident "group" }},
{{ .Ident "resource" }},
{{ .Ident "namespace" }},
{{ .Ident "name" }},
{{ .Ident "action" }}
)
VALUES (
{{ .Arg .GUID }},
{{ .Arg .KeyPath }},
COALESCE({{ .Arg .Value }}, ""),
{{ .Arg .Group }},
{{ .Arg .Resource }},
{{ .Arg .Namespace }},
{{ .Arg .Name }},
{{ .Arg .Action }}
);
pkg/storage/unified/resource/data/sqlkv_insert_legacy_resource.sql
+31
View File
@@ -0,0 +1,31 @@
INSERT INTO {{ .Ident "resource" }}
(
{{ .Ident "value" }},
{{ .Ident "guid" }},
{{ .Ident "group" }},
{{ .Ident "resource" }},
{{ .Ident "namespace" }},
{{ .Ident "name" }},
{{ .Ident "action" }},
{{ .Ident "folder" }},
{{ .Ident "previous_resource_version" }}
)
VALUES (
COALESCE({{ .Arg .Value }}, ""),
{{ .Arg .GUID }},
{{ .Arg .Group }},
{{ .Arg .Resource }},
{{ .Arg .Namespace }},
{{ .Arg .Name }},
{{ .Arg .Action }},
{{ .Arg .Folder }},
CASE WHEN {{ .Arg .Action }} = 1 THEN 0 ELSE (
SELECT {{ .Ident "resource_version" }}
FROM {{ .Ident "resource" }}
WHERE {{ .Ident "group" }} = {{ .Arg .Group }}
AND {{ .Ident "resource" }} = {{ .Arg .Resource }}
AND {{ .Ident "namespace" }} = {{ .Arg .Namespace }}
AND {{ .Ident "name" }} = {{ .Arg .Name }}
ORDER BY {{ .Ident "resource_version" }} DESC LIMIT 1
) END
);
pkg/storage/unified/resource/data/sqlkv_insert_legacy_resource_history.sql
+44
View File
@@ -0,0 +1,44 @@
INSERT INTO {{ .Ident "resource_history" }}
(
{{ .Ident "value" }},
{{ .Ident "guid" }},
{{ .Ident "group" }},
{{ .Ident "resource" }},
{{ .Ident "namespace" }},
{{ .Ident "name" }},
{{ .Ident "action" }},
{{ .Ident "folder" }},
{{ .Ident "previous_resource_version" }},
{{ .Ident "generation" }}
)
VALUES (
COALESCE({{ .Arg .Value }}, ""),
{{ .Arg .GUID }},
{{ .Arg .Group }},
{{ .Arg .Resource }},
{{ .Arg .Namespace }},
{{ .Arg .Name }},
{{ .Arg .Action }},
{{ .Arg .Folder }},
CASE WHEN {{ .Arg .Action }} = 1 THEN 0 ELSE (
SELECT {{ .Ident "resource_version" }}
FROM {{ .Ident "resource_history" }}
WHERE {{ .Ident "group" }} = {{ .Arg .Group }}
AND {{ .Ident "resource" }} = {{ .Arg .Resource }}
AND {{ .Ident "namespace" }} = {{ .Arg .Namespace }}
AND {{ .Ident "name" }} = {{ .Arg .Name }}
ORDER BY {{ .Ident "resource_version" }} DESC LIMIT 1
) END,
CASE
WHEN {{ .Arg .Action }} = 1 THEN 1
WHEN {{ .Arg .Action }} = 3 THEN 0
ELSE 1 + (
SELECT COUNT(1)
FROM {{ .Ident "resource_history" }}
WHERE {{ .Ident "group" }} = {{ .Arg .Group }}
AND {{ .Ident "resource" }} = {{ .Arg .Resource }}
AND {{ .Ident "namespace" }} = {{ .Arg .Namespace }}
AND {{ .Ident "name" }} = {{ .Arg .Name }}
)
END
);
pkg/storage/unified/resource/data/sqlkv_save_event.sql
+15
View File
@@ -0,0 +1,15 @@
INSERT INTO {{ .Ident .TableName }}
(
{{ .Ident "key_path" }},
{{ .Ident "value" }}
)
VALUES (
{{ .Arg .KeyPath }},
COALESCE({{ .Arg .Value }}, "")
)
{{- if eq .DialectName "mysql" }}
ON DUPLICATE KEY UPDATE {{ .Ident "value" }} = {{ .Arg .Value }}
{{- else }}
ON CONFLICT ({{ .Ident "key_path" }}) DO UPDATE SET {{ .Ident "value" }} = {{ .Arg .Value }}
{{- end }}
;
pkg/storage/unified/resource/data/sqlkv_update_datastore.sql
+3
View File
@@ -0,0 +1,3 @@
UPDATE {{ .Ident .TableName }}
SET {{ .Ident "value" }} = {{ .Arg .Value }}
WHERE {{ .Ident "key_path" }} = {{ .Arg .KeyPath }};
pkg/storage/unified/resource/data/sqlkv_update_legacy_resource.sql
+9
View File
@@ -0,0 +1,9 @@
UPDATE {{ .Ident "resource" }}
SET
{{ .Ident "value" }} = {{ .Arg .Value }},
{{ .Ident "action" }} = {{ .Arg .Action }},
{{ .Ident "folder" }} = {{ .Arg .Folder }}
WHERE {{ .Ident "group" }} = {{ .Arg .Group }}
AND {{ .Ident "resource" }} = {{ .Arg .Resource }}
AND {{ .Ident "namespace" }} = {{ .Arg .Namespace }}
AND {{ .Ident "name" }} = {{ .Arg .Name }};
pkg/storage/unified/resource/datastore.go
+43 -1
View File
@@ -49,6 +49,9 @@ type DataKey struct {
ResourceVersion int64
Action DataAction
Folder string
// needed to maintain backwards compatibility with unified/sql
GUID string
}
// GroupResource represents a unique group/resource combination
@@ -61,6 +64,12 @@ func (k DataKey) String() string {
return fmt.Sprintf("%s/%s/%s/%s/%d~%s~%s", k.Group, k.Resource, k.Namespace, k.Name, k.ResourceVersion, k.Action, k.Folder)
}
// Temporary while we need to support unified/sql/backend compatibility
// Remove once we stop using RvManager in storage_backend.go
func (k DataKey) StringWithGUID() string {
return fmt.Sprintf("%s/%s/%s/%s/%d~%s~%s~%s", k.Group, k.Resource, k.Namespace, k.Name, k.ResourceVersion, k.Action, k.Folder, k.GUID)
}
func (k DataKey) Equals(other DataKey) bool {
return k.Group == other.Group && k.Resource == other.Resource && k.Namespace == other.Namespace && k.Name == other.Name && k.ResourceVersion == other.ResourceVersion && k.Action == other.Action && k.Folder == other.Folder
}
@@ -516,7 +525,13 @@ func (d *dataStore) Save(ctx context.Context, key DataKey, value io.Reader) erro
return fmt.Errorf("invalid data key: %w", err)
}
writer, err := d.kv.Save(ctx, dataSection, key.String())
var writer io.WriteCloser
var err error
if key.GUID != "" {
writer, err = d.kv.Save(ctx, dataSection, key.StringWithGUID())
} else {
writer, err = d.kv.Save(ctx, dataSection, key.String())
}
if err != nil {
return err
}
@@ -583,6 +598,33 @@ func ParseKey(key string) (DataKey, error) {
}, nil
}
// Temporary while we need to support unified/sql/backend compatibility
// Remove once we stop using RvManager in storage_backend.go
func ParseKeyWithGUID(key string) (DataKey, error) {
parts := strings.Split(key, "/")
if len(parts) != 5 {
return DataKey{}, fmt.Errorf("invalid key: %s", key)
}
rvActionFolderGUIDParts := strings.Split(parts[4], "~")
if len(rvActionFolderGUIDParts) != 4 {
return DataKey{}, fmt.Errorf("invalid key: %s", key)
}
rv, err := strconv.ParseInt(rvActionFolderGUIDParts[0], 10, 64)
if err != nil {
return DataKey{}, fmt.Errorf("invalid resource version '%s' in key %s: %w", rvActionFolderGUIDParts[0], key, err)
}
return DataKey{
Group: parts[0],
Resource: parts[1],
Namespace: parts[2],
Name: parts[3],
ResourceVersion: rv,
Action: DataAction(rvActionFolderGUIDParts[1]),
Folder: rvActionFolderGUIDParts[2],
GUID: rvActionFolderGUIDParts[3],
}, nil
}
// SameResource checks if this key represents the same resource as another key.
// It compares the identifying fields: Group, Resource, Namespace, and Name.
// ResourceVersion, Action, and Folder are ignored as they don't identify the resource itself.
pkg/storage/unified/resource/eventstore.go
+1
View File
@@ -32,6 +32,7 @@ type EventKey struct {
ResourceVersion int64
Action DataAction
Folder string
GUID string
}
func (k EventKey) String() string {
pkg/storage/unified/resource/sqlkv.go
+252 -21
View File
@@ -11,9 +11,12 @@ import (
"iter"
"strings"
"text/template"
"time"
"github.com/google/uuid"
"github.com/grafana/grafana/pkg/storage/unified/sql/db"
"github.com/grafana/grafana/pkg/storage/unified/sql/dbutil"
"github.com/grafana/grafana/pkg/storage/unified/sql/rvmanager"
"github.com/grafana/grafana/pkg/storage/unified/sql/sqltemplate"
)
@@ -34,10 +37,18 @@ func mustTemplate(filename string) *template.Template {
// Templates.
var (
sqlKVKeys = mustTemplate("sqlkv_keys.sql")
sqlKVGet = mustTemplate("sqlkv_get.sql")
sqlKVBatchGet = mustTemplate("sqlkv_batch_get.sql")
sqlKVDelete = mustTemplate("sqlkv_delete.sql")
sqlKVKeys = mustTemplate("sqlkv_keys.sql")
sqlKVGet = mustTemplate("sqlkv_get.sql")
sqlKVBatchGet = mustTemplate("sqlkv_batch_get.sql")
sqlKVSaveEvent = mustTemplate("sqlkv_save_event.sql")
sqlKVInsertData = mustTemplate("sqlkv_insert_datastore.sql")
sqlKVUpdateData = mustTemplate("sqlkv_update_datastore.sql")
sqlKVInsertLegacyResourceHistory = mustTemplate("sqlkv_insert_legacy_resource_history.sql")
sqlKVInsertLegacyResource = mustTemplate("sqlkv_insert_legacy_resource.sql")
sqlKVUpdateLegacyResource = mustTemplate("sqlkv_update_legacy_resource.sql")
sqlKVDeleteLegacyResource = mustTemplate("sqlkv_delete_legacy_resource.sql")
sqlKVDelete = mustTemplate("sqlkv_delete.sql")
sqlKVBatchDelete = mustTemplate("sqlkv_batch_delete.sql")
)
// sqlKVSection can be embedded in structs used when rendering query templates
@@ -108,17 +119,17 @@ func (req sqlKVGetRequest) Results() ([]byte, error) {
return req.Value, nil
}
type sqlKVBatchGetRequest struct {
type sqlKVBatchRequest struct {
sqltemplate.SQLTemplate
sqlKVSection
Keys []string
}
func (req sqlKVBatchGetRequest) Validate() error {
func (req sqlKVBatchRequest) Validate() error {
return req.sqlKVSection.Validate()
}
func (req sqlKVBatchGetRequest) KeyPaths() []string {
func (req sqlKVBatchRequest) KeyPaths() []string {
result := make([]string, 0, len(req.Keys))
for _, key := range req.Keys {
result = append(result, req.Section+"/"+key)
@@ -127,6 +138,45 @@ func (req sqlKVBatchGetRequest) KeyPaths() []string {
return result
}
type sqlKVSaveRequest struct {
sqltemplate.SQLTemplate
sqlKVSectionKey
Value []byte
// old fields that can be removed once we prune resource_history
GUID string
Group string
Resource string
Namespace string
Name string
Action int64
Folder string
}
func (req sqlKVSaveRequest) Validate() error {
return req.sqlKVSectionKey.Validate()
}
type sqlKVLegacySaveRequest struct {
sqltemplate.SQLTemplate
Value []byte
GUID string
Group string
Resource string
Namespace string
Name string
Action int64
Folder string
}
func (req sqlKVLegacySaveRequest) Validate() error {
return nil
}
func (req sqlKVLegacySaveRequest) Results() ([]byte, error) {
return req.Value, nil
}
type sqlKVKeysRequest struct {
sqltemplate.SQLTemplate
sqlKVSection
@@ -250,7 +300,7 @@ func (k *sqlKV) BatchGet(ctx context.Context, section string, keys []string) ite
return
}
rows, err := dbutil.QueryRows(ctx, k.db, sqlKVBatchGet, sqlKVBatchGetRequest{
rows, err := dbutil.QueryRows(ctx, k.db, sqlKVBatchGet, sqlKVBatchRequest{
SQLTemplate: sqltemplate.New(k.dialect),
sqlKVSection: sqlKVSection{section},
Keys: keys,
@@ -284,20 +334,187 @@ func (k *sqlKV) BatchGet(ctx context.Context, section string, keys []string) ite
}
}
// TODO: this function only exists to support the testing of the sqlkv implementation before
// we have a proper implementation of `Save`.
func (k *sqlKV) TestingSave(ctx context.Context, key string, value []byte) error {
stmt := fmt.Sprintf(
`INSERT INTO resource_events (key_path, value) VALUES (%s, %s)`,
k.dialect.ArgPlaceholder(1), k.dialect.ArgPlaceholder(2),
)
func (k *sqlKV) Save(ctx context.Context, section string, key string) (io.WriteCloser, error) {
sectionKey := sqlKVSectionKey{sqlKVSection{section}, key}
if err := sectionKey.Validate(); err != nil {
return nil, err
}
_, err := k.db.ExecContext(ctx, stmt, eventsSection+"/"+key, value)
return err
return &sqlWriteCloser{
kv: k,
ctx: ctx,
sectionKey: sectionKey,
buf: &bytes.Buffer{},
closed: false,
}, nil
}
func (k *sqlKV) Save(ctx context.Context, section string, key string) (io.WriteCloser, error) {
panic("not implemented!")
type sqlWriteCloser struct {
kv *sqlKV
ctx context.Context
sectionKey sqlKVSectionKey
buf *bytes.Buffer
closed bool
}
func (w *sqlWriteCloser) Write(value []byte) (int, error) {
if w.closed {
return 0, errors.New("write to closed writer")
}
return w.buf.Write(value)
}
func (w *sqlWriteCloser) Close() error {
if w.closed {
return nil
}
w.closed = true
// do regular kv save: simple key_path + value insert with conflict check.
// can only do this on resource_events for now, until we drop the columns in resource_history
if w.sectionKey.Section == eventsSection {
_, err := dbutil.Exec(w.ctx, w.kv.db, sqlKVSaveEvent, sqlKVSaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
sqlKVSectionKey: w.sectionKey,
Value: w.buf.Bytes(),
})
if err != nil {
return fmt.Errorf("failed to save: %w", err)
}
return nil
}
// if storage_backend is running with an RvManager, it will inject a transaction into the context
// used to keep backwards compatibility between sql-based kvstore and unified/sql/backend
tx, ok := rvmanager.TxFromCtx(w.ctx)
if !ok {
// temporary save for dataStore without rvmanager
// we can use the same template as the event one after we:
// - move PK from GUID to key_path
// - remove all unnecessary columns (or at least their NOT NULL constraints)
_, err := w.kv.Get(w.ctx, w.sectionKey.Section, w.sectionKey.Key)
if errors.Is(err, ErrNotFound) {
_, err := dbutil.Exec(w.ctx, w.kv.db, sqlKVInsertData, sqlKVSaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
sqlKVSectionKey: w.sectionKey,
GUID: uuid.New().String(),
Value: w.buf.Bytes(),
})
if err != nil {
return fmt.Errorf("failed to insert to datastore: %w", err)
}
return nil
}
if err != nil {
return fmt.Errorf("failed to get for save: %w", err)
}
_, err = dbutil.Exec(w.ctx, w.kv.db, sqlKVUpdateData, sqlKVSaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
sqlKVSectionKey: w.sectionKey,
Value: w.buf.Bytes(),
})
if err != nil {
return fmt.Errorf("failed to update to datastore: %w", err)
}
return nil
}
// special, temporary save that includes all the fields in resource_history that are not relevant for the kvstore,
// as well as the resource table. This is only called if an RvManager was passed to storage_backend, as that
// component will be responsible for populating the resource_version and key_path columns
// note that we are not touching resource_version table, neither the resource_version columns or the key_path column
// as the RvManager will be responsible for this
dataKey, err := ParseKeyWithGUID(w.sectionKey.Key)
if err != nil {
return fmt.Errorf("failed to parse key: %w", err)
}
var action int64
switch dataKey.Action {
case DataActionCreated:
action = 1
case DataActionUpdated:
action = 2
case DataActionDeleted:
action = 3
default:
return fmt.Errorf("failed to parse key: %w", err)
}
_, err = dbutil.Exec(w.ctx, tx, sqlKVInsertLegacyResourceHistory, sqlKVSaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
sqlKVSectionKey: w.sectionKey,
Value: w.buf.Bytes(),
GUID: dataKey.GUID,
Group: dataKey.Group,
Resource: dataKey.Resource,
Namespace: dataKey.Namespace,
Name: dataKey.Name,
Action: action,
Folder: dataKey.Folder,
})
if err != nil {
return fmt.Errorf("failed to save to resource_history: %w", err)
}
switch dataKey.Action {
case DataActionCreated:
_, err = dbutil.Exec(w.ctx, tx, sqlKVInsertLegacyResource, sqlKVLegacySaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
Value: w.buf.Bytes(),
GUID: dataKey.GUID,
Group: dataKey.Group,
Resource: dataKey.Resource,
Namespace: dataKey.Namespace,
Name: dataKey.Name,
Action: action,
Folder: dataKey.Folder,
})
if err != nil {
return fmt.Errorf("failed to insert to resource: %w", err)
}
case DataActionUpdated:
_, err = dbutil.Exec(w.ctx, tx, sqlKVUpdateLegacyResource, sqlKVLegacySaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
Value: w.buf.Bytes(),
Group: dataKey.Group,
Resource: dataKey.Resource,
Namespace: dataKey.Namespace,
Name: dataKey.Name,
Action: action,
Folder: dataKey.Folder,
})
if err != nil {
return fmt.Errorf("failed to update resource: %w", err)
}
case DataActionDeleted:
_, err = dbutil.Exec(w.ctx, tx, sqlKVDeleteLegacyResource, sqlKVLegacySaveRequest{
SQLTemplate: sqltemplate.New(w.kv.dialect),
Group: dataKey.Group,
Resource: dataKey.Resource,
Namespace: dataKey.Namespace,
Name: dataKey.Name,
})
if err != nil {
return fmt.Errorf("failed to delete from resource: %w", err)
}
}
return nil
}
func (k *sqlKV) Delete(ctx context.Context, section string, key string) error {
@@ -318,15 +535,29 @@ func (k *sqlKV) Delete(ctx context.Context, section string, key string) error {
return ErrNotFound
}
// TODO reflect change to resource table
return nil
}
func (k *sqlKV) BatchDelete(ctx context.Context, section string, keys []string) error {
panic("not implemented!")
if len(keys) == 0 {
return nil
}
if _, err := dbutil.Exec(ctx, k.db, sqlKVBatchDelete, sqlKVBatchRequest{
SQLTemplate: sqltemplate.New(k.dialect),
sqlKVSection: sqlKVSection{section},
Keys: keys,
}); err != nil {
return fmt.Errorf("failed to batch delete keys: %w", err)
}
return nil
}
func (k *sqlKV) UnixTimestamp(ctx context.Context) (int64, error) {
panic("not implemented!")
return time.Now().Unix(), nil
}
func closeRows[T any](rows db.Rows, yield func(T, error) bool) {
pkg/storage/unified/resource/storage_backend.go
+52 -7
View File
@@ -14,6 +14,7 @@ import (
"time"
"github.com/bwmarrin/snowflake"
"github.com/google/uuid"
"github.com/grafana/grafana-app-sdk/logging"
"github.com/prometheus/client_golang/prometheus"
"go.opentelemetry.io/otel/trace"
@@ -22,6 +23,8 @@ import (
"github.com/grafana/grafana/pkg/apimachinery/utils"
"github.com/grafana/grafana/pkg/storage/unified/resourcepb"
"github.com/grafana/grafana/pkg/storage/unified/sql/db"
"github.com/grafana/grafana/pkg/storage/unified/sql/rvmanager"
"github.com/grafana/grafana/pkg/util/debouncer"
)
@@ -68,6 +71,8 @@ type kvStorageBackend struct {
withExperimentalClusterScope bool
//tracer trace.Tracer
//reg prometheus.Registerer
rvManager *rvmanager.ResourceVersionManager
}
var _ KVBackend = &kvStorageBackend{}
@@ -85,6 +90,10 @@ type KVBackendOptions struct {
EventPruningInterval time.Duration // How often to run the event pruning (default: 5 minutes)
Tracer trace.Tracer // TODO add tracing
Reg prometheus.Registerer // TODO add metrics
// Adding RvManager overrides the RV generated with snowflake in order to keep backwards compatibility with
// unified/sql
RvManager *rvmanager.ResourceVersionManager
}
func NewKVStorageBackend(opts KVBackendOptions) (KVBackend, error) {
@@ -119,6 +128,7 @@ func NewKVStorageBackend(opts KVBackendOptions) (KVBackend, error) {
eventRetentionPeriod: eventRetentionPeriod,
eventPruningInterval: eventPruningInterval,
withExperimentalClusterScope: opts.WithExperimentalClusterScope,
rvManager: opts.RvManager,
}
err = backend.initPruner(ctx)
if err != nil {
@@ -317,9 +327,28 @@ func (k *kvStorageBackend) WriteEvent(ctx context.Context, event WriteEvent) (in
Action: action,
Folder: obj.GetFolder(),
}
err := k.dataStore.Save(ctx, dataKey, bytes.NewReader(event.Value))
if err != nil {
return 0, fmt.Errorf("failed to write data: %w", err)
if k.rvManager != nil {
dataKey.GUID = uuid.New().String()
var err error
rv, err = k.rvManager.ExecWithRV(ctx, event.Key, func(tx db.Tx) (string, error) {
err := k.dataStore.Save(rvmanager.ContextWithTx(ctx, tx), dataKey, bytes.NewReader(event.Value))
if err != nil {
return "", fmt.Errorf("failed to write data: %w", err)
}
return dataKey.GUID, nil
})
if err != nil {
return 0, fmt.Errorf("failed to write data: %w", err)
}
dataKey.ResourceVersion = rv
} else {
err := k.dataStore.Save(ctx, dataKey, bytes.NewReader(event.Value))
if err != nil {
return 0, fmt.Errorf("failed to write data: %w", err)
}
}
// Optimistic concurrency control to verify our write is the latest version
@@ -340,14 +369,22 @@ func (k *kvStorageBackend) WriteEvent(ctx context.Context, event WriteEvent) (in
}
// Check if the RV we just wrote is the latest. If not, a concurrent write with higher RV happened
if latestKey.ResourceVersion != rv {
if !rvmanager.IsRvEqual(latestKey.ResourceVersion, rv) {
// Delete the data we just wrote since it's not the latest
// if we're running with rvManager, convert the ResourceVersion back to snowflake to delete
if k.rvManager != nil {
dataKey.ResourceVersion = rvmanager.SnowflakeFromRv(dataKey.ResourceVersion)
}
_ = k.dataStore.Delete(ctx, dataKey)
return 0, fmt.Errorf("optimistic locking failed: concurrent modification detected")
}
if prevKey.ResourceVersion != event.PreviousRV {
if !rvmanager.IsRvEqual(prevKey.ResourceVersion, event.PreviousRV) {
// Another concurrent write happened between our read and write
// if we're running with rvManager, convert the ResourceVersion back to snowflake to delete
if k.rvManager != nil {
dataKey.ResourceVersion = rvmanager.SnowflakeFromRv(dataKey.ResourceVersion)
}
_ = k.dataStore.Delete(ctx, dataKey)
return 0, fmt.Errorf("optimistic locking failed: resource was modified concurrently (expected previous RV %d, found %d)", event.PreviousRV, prevKey.ResourceVersion)
}
@@ -366,8 +403,12 @@ func (k *kvStorageBackend) WriteEvent(ctx context.Context, event WriteEvent) (in
}
// Check if the RV we just wrote is the latest. If not, a concurrent create with higher RV happened
if latestKey.ResourceVersion != rv {
if !rvmanager.IsRvEqual(latestKey.ResourceVersion, rv) {
// Delete the data we just wrote since it's not the latest
// if we're running with rvManager, convert the ResourceVersion back to snowflake to delete
if k.rvManager != nil {
dataKey.ResourceVersion = rvmanager.SnowflakeFromRv(dataKey.ResourceVersion)
}
_ = k.dataStore.Delete(ctx, dataKey)
return 0, fmt.Errorf("optimistic locking failed: concurrent create detected")
}
@@ -375,6 +416,10 @@ func (k *kvStorageBackend) WriteEvent(ctx context.Context, event WriteEvent) (in
// Verify that the immediate predecessor is not a create
if prevKey.Action == DataActionCreated {
// Another concurrent create happened - delete our write and return error
// if we're running with rvManager, convert the ResourceVersion back to snowflake to delete
if k.rvManager != nil {
dataKey.ResourceVersion = rvmanager.SnowflakeFromRv(dataKey.ResourceVersion)
}
_ = k.dataStore.Delete(ctx, dataKey)
return 0, fmt.Errorf("optimistic locking failed: concurrent create detected")
}
@@ -391,7 +436,7 @@ func (k *kvStorageBackend) WriteEvent(ctx context.Context, event WriteEvent) (in
Folder: obj.GetFolder(),
PreviousRV: event.PreviousRV,
}
err = k.eventStore.Save(ctx, eventData)
err := k.eventStore.Save(ctx, eventData)
if err != nil {
// Clean up the data we wrote since event save failed
_ = k.dataStore.Delete(ctx, dataKey)
pkg/storage/unified/sql/rvmanager/rv_manager.go
+25 -2
View File
@@ -21,6 +21,19 @@ import (
"github.com/grafana/grafana/pkg/storage/unified/sql/sqltemplate"
)
type contextKey string
const txKey contextKey = "rvmanager_db_tx"
func ContextWithTx(ctx context.Context, tx db.Tx) context.Context {
return context.WithValue(ctx, txKey, tx)
}
func TxFromCtx(ctx context.Context) (db.Tx, bool) {
tx, ok := ctx.Value(txKey).(db.Tx)
return tx, ok
}
var tracer = otel.Tracer("github.com/grafana/grafana/pkg/storage/unified/sql/rvmanager")
var (
@@ -294,7 +307,7 @@ func (m *ResourceVersionManager) execBatch(ctx context.Context, group, resource
// Allocate the RVs
for i, guid := range guids {
guidToRV[guid] = rv
guidToSnowflakeRV[guid] = snowflakeFromRv(rv)
guidToSnowflakeRV[guid] = SnowflakeFromRv(rv)
rvs[i] = rv
rv++
}
@@ -353,10 +366,20 @@ func (m *ResourceVersionManager) execBatch(ctx context.Context, group, resource
// takes a unix microsecond rv and transforms into a snowflake format. The timestamp is converted from microsecond to
// millisecond (the integer division) and the remainder is saved in the stepbits section. machine id is always 0
func snowflakeFromRv(rv int64) int64 {
func SnowflakeFromRv(rv int64) int64 {
return (((rv / 1000) - snowflake.Epoch) << (snowflake.NodeBits + snowflake.StepBits)) + (rv % 1000)
}
// helper utility to compare two RVs. The first RV must be in snowflake format. Will convert rv2 to snowflake and retry
// if comparison fails
func IsRvEqual(rv1, rv2 int64) bool {
if rv1 == rv2 {
return true
}
return rv1 == SnowflakeFromRv(rv2)
}
// Lock locks the resource version for the given key
func (m *ResourceVersionManager) Lock(ctx context.Context, x db.ContextExecer, group, resource string) (nextRV int64, err error) {
// 1. Lock the row and prevent concurrent updates until the transaction is committed

Some files were not shown because too many files have changed in this diff Show More