Compare commits
55 Commits
fastfrwrd/
...
ensure-fol
| Author | SHA1 | Date | |
|---|---|---|---|
|
dfed7ae90c | ||
|
|
4c39335c6d | ||
|
5585595c16 | ||
|
6daa7ff729 | ||
|
8cfac85b48 | ||
|
0284d1e669 | ||
|
3522efdf32 | ||
|
2fbe2f77e3 | ||
|
4164239f56 | ||
|
14c595f206 | ||
|
471d6f5236 | ||
|
f91efcfe2c | ||
|
|
49032ae3d7 | ||
|
8b316cca25 | ||
|
fa73caf6c8 | ||
|
0e4b1c7b1e | ||
|
aa69d97f1e | ||
|
|
7812f783bb | ||
|
b2d6bb7a05 | ||
|
56dd1ca867 | ||
|
62b2a202de | ||
|
133865182e | ||
|
|
338ae95ef5 | ||
|
|
19c9f21cc4 | ||
|
9760eef62f | ||
|
ece38641ca | ||
|
e9a2828f66 | ||
|
c2275f6ee4 | ||
|
|
b4eb02a6f0 | ||
|
|
a0751b6e71 | ||
|
b5793a5f73 | ||
|
285f2b1d32 | ||
|
7360194ab9 | ||
|
|
4a20665cf7 | ||
|
|
50bf29b050 | ||
|
|
a311bd0e84 | ||
|
|
99f5f14de7 | ||
|
|
606a59584a | ||
|
0ec716a433 | ||
|
72e1f1e546 | ||
|
37c1e3fb02 | ||
|
39c562a911 | ||
|
|
71fda4fa42 | ||
|
|
b605f464a4 | ||
|
|
a95b28ab19 | ||
|
|
a82253e63a | ||
|
|
df4f58fa75 | ||
|
|
614248c63d | ||
|
|
ba038e2848 | ||
|
|
53eead1fa5 | ||
|
|
4c190fa6c2 | ||
|
|
b1ff3eb2f1 | ||
|
|
3cb29d02ad | ||
|
|
ff4f2b3926 | ||
|
|
9d5659bfba |
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
@@ -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
|
||||
|
||||
2
.github/actions/change-detection/action.yml
vendored
2
.github/actions/change-detection/action.yml
vendored
@@ -95,9 +95,11 @@ runs:
|
||||
- 'nx.json'
|
||||
- 'tsconfig.json'
|
||||
- '.yarn/**'
|
||||
- 'apps/dashboard/pkg/migration/**'
|
||||
- '${{ inputs.self }}'
|
||||
e2e:
|
||||
- 'e2e/**'
|
||||
- 'e2e-playwright/**'
|
||||
- '.github/actions/setup-enterprise/**'
|
||||
- '.github/actions/checkout/**'
|
||||
- 'emails/**'
|
||||
|
||||
@@ -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": [
|
||||
|
||||
@@ -955,8 +955,6 @@
|
||||
"effects": {
|
||||
"barGlow": false,
|
||||
"centerGlow": false,
|
||||
"rounded": false,
|
||||
"spotlight": false,
|
||||
"gradient": false
|
||||
},
|
||||
"orientation": "auto",
|
||||
|
||||
@@ -743,7 +743,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": true,
|
||||
"label": "cluster",
|
||||
@@ -764,7 +766,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": false,
|
||||
"label": "namespace",
|
||||
|
||||
@@ -961,8 +961,12 @@
|
||||
"hide": "dontHide",
|
||||
"refresh": "onDashboardLoad",
|
||||
"skipUrlSync": false,
|
||||
"datasource": {
|
||||
"type": "",
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"query": {
|
||||
"kind": "prometheus",
|
||||
"kind": "",
|
||||
"spec": {
|
||||
"__legacyStringValue": "label_values(up, job)"
|
||||
}
|
||||
@@ -988,8 +992,12 @@
|
||||
"hide": "dontHide",
|
||||
"refresh": "onDashboardLoad",
|
||||
"skipUrlSync": false,
|
||||
"datasource": {
|
||||
"type": "",
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"query": {
|
||||
"kind": "prometheus",
|
||||
"kind": "",
|
||||
"spec": {
|
||||
"__legacyStringValue": "label_values(up{job=~\"$cluster\"}, instance)"
|
||||
}
|
||||
|
||||
@@ -978,8 +978,11 @@
|
||||
"skipUrlSync": false,
|
||||
"query": {
|
||||
"kind": "DataQuery",
|
||||
"group": "prometheus",
|
||||
"group": "",
|
||||
"version": "v0",
|
||||
"datasource": {
|
||||
"name": "$datasource"
|
||||
},
|
||||
"spec": {
|
||||
"__legacyStringValue": "label_values(up, job)"
|
||||
}
|
||||
@@ -1007,8 +1010,11 @@
|
||||
"skipUrlSync": false,
|
||||
"query": {
|
||||
"kind": "DataQuery",
|
||||
"group": "prometheus",
|
||||
"group": "",
|
||||
"version": "v0",
|
||||
"datasource": {
|
||||
"name": "$datasource"
|
||||
},
|
||||
"spec": {
|
||||
"__legacyStringValue": "label_values(up{job=~\"$cluster\"}, instance)"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ package conversion
|
||||
|
||||
import (
|
||||
"context"
|
||||
"strings"
|
||||
|
||||
"k8s.io/apimachinery/pkg/conversion"
|
||||
"k8s.io/apiserver/pkg/endpoints/request"
|
||||
@@ -79,5 +80,57 @@ func ConvertDashboard_V0_to_V1beta1(in *dashv0.Dashboard, out *dashv1.Dashboard,
|
||||
return schemaversion.NewMigrationError(err.Error(), schemaversion.GetSchemaVersion(in.Spec.Object), schemaversion.LATEST_VERSION, "Convert_V0_to_V1")
|
||||
}
|
||||
|
||||
// Normalize template variable datasources from string to object format
|
||||
// This handles legacy dashboards where query variables have datasource: "$datasource" (string)
|
||||
// instead of datasource: { uid: "$datasource" } (object)
|
||||
// our migration pipeline in v36 doesn't address because this was not addressed historically
|
||||
// in DashboardMigrator - see public/app/features/dashboard/state/DashboardMigrator.ts#L607
|
||||
// Which means that we have schemaVersion: 42 dashboards where datasource variable references are still strings
|
||||
normalizeTemplateVariableDatasources(out.Spec.Object)
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
// normalizeTemplateVariableDatasources converts template variable string datasources to object format.
|
||||
// Legacy dashboards may have query variables with datasource: "$datasource" (string).
|
||||
// This normalizes them to datasource: { uid: "$datasource" } for consistent V1→V2 conversion.
|
||||
func normalizeTemplateVariableDatasources(dashboard map[string]interface{}) {
|
||||
templating, ok := dashboard["templating"].(map[string]interface{})
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
|
||||
list, ok := templating["list"].([]interface{})
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
|
||||
for _, variable := range list {
|
||||
varMap, ok := variable.(map[string]interface{})
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
|
||||
varType, _ := varMap["type"].(string)
|
||||
if varType != "query" {
|
||||
continue
|
||||
}
|
||||
|
||||
ds := varMap["datasource"]
|
||||
if dsStr, ok := ds.(string); ok && isTemplateVariableRef(dsStr) {
|
||||
// Convert string template variable reference to object format
|
||||
varMap["datasource"] = map[string]interface{}{
|
||||
"uid": dsStr,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// isTemplateVariableRef checks if a string is a Grafana template variable reference.
|
||||
// Template variables can be in the form: $varname or ${varname}
|
||||
func isTemplateVariableRef(s string) bool {
|
||||
if s == "" {
|
||||
return false
|
||||
}
|
||||
return strings.HasPrefix(s, "$") || strings.HasPrefix(s, "${")
|
||||
}
|
||||
|
||||
@@ -1185,6 +1185,10 @@ func buildQueryVariable(ctx context.Context, varMap map[string]interface{}, comm
|
||||
// If no UID and no type, use default
|
||||
datasourceType = getDefaultDatasourceType(ctx, dsIndexProvider)
|
||||
}
|
||||
} else if dsStr, ok := datasource.(string); ok && isTemplateVariable(dsStr) {
|
||||
// Handle datasource variable reference (e.g., "$datasource")
|
||||
// Only process template variables - other string values are not supported in V2 format
|
||||
datasourceUID = dsStr
|
||||
} else {
|
||||
datasourceType = getDefaultDatasourceType(ctx, dsIndexProvider)
|
||||
}
|
||||
@@ -1532,6 +1536,10 @@ func buildAdhocVariable(ctx context.Context, varMap map[string]interface{}, comm
|
||||
// If no UID and no type, use default
|
||||
datasourceType = getDefaultDatasourceType(ctx, dsIndexProvider)
|
||||
}
|
||||
} else if dsStr, ok := datasource.(string); ok && isTemplateVariable(dsStr) {
|
||||
// Handle datasource variable reference (e.g., "$datasource")
|
||||
// Only process template variables - other string values are not supported in V2 format
|
||||
datasourceUID = dsStr
|
||||
} else {
|
||||
datasourceType = getDefaultDatasourceType(ctx, dsIndexProvider)
|
||||
}
|
||||
@@ -1709,6 +1717,10 @@ func buildGroupByVariable(ctx context.Context, varMap map[string]interface{}, co
|
||||
|
||||
// Resolve Grafana datasource UID when type is "datasource" and UID is empty
|
||||
datasourceUID = resolveGrafanaDatasourceUID(datasourceType, datasourceUID)
|
||||
} else if dsStr, ok := datasource.(string); ok && isTemplateVariable(dsStr) {
|
||||
// Handle datasource variable reference (e.g., "$datasource")
|
||||
// Only process template variables - other string values are not supported in V2 format
|
||||
datasourceUID = dsStr
|
||||
} else {
|
||||
datasourceType = getDefaultDatasourceType(ctx, dsIndexProvider)
|
||||
}
|
||||
|
||||
@@ -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": ""
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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": ""
|
||||
}
|
||||
}
|
||||
|
||||
@@ -654,7 +654,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": true,
|
||||
"label": "cluster",
|
||||
@@ -677,7 +679,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": false,
|
||||
"label": "namespace",
|
||||
|
||||
@@ -737,7 +737,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": true,
|
||||
"label": "cluster",
|
||||
@@ -758,7 +760,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": false,
|
||||
"label": "namespace",
|
||||
|
||||
@@ -717,7 +717,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": true,
|
||||
"label": "cluster",
|
||||
@@ -739,7 +741,9 @@
|
||||
"text": "prod",
|
||||
"value": "prod"
|
||||
},
|
||||
"datasource": "$datasource",
|
||||
"datasource": {
|
||||
"uid": "$datasource"
|
||||
},
|
||||
"hide": 0,
|
||||
"includeAll": false,
|
||||
"label": "namespace",
|
||||
|
||||
22
apps/provisioning/pkg/auth/access_checker.go
Normal file
22
apps/provisioning/pkg/auth/access_checker.go
Normal 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
|
||||
}
|
||||
135
apps/provisioning/pkg/auth/access_checker_mock.go
Normal file
135
apps/provisioning/pkg/auth/access_checker_mock.go
Normal 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
|
||||
}
|
||||
@@ -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{
|
||||
|
||||
@@ -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)
|
||||
|
||||
153
apps/provisioning/pkg/auth/session_access_checker.go
Normal file
153
apps/provisioning/pkg/auth/session_access_checker.go
Normal 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))))
|
||||
}
|
||||
244
apps/provisioning/pkg/auth/session_access_checker_test.go
Normal file
244
apps/provisioning/pkg/auth/session_access_checker_test.go
Normal 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)
|
||||
}
|
||||
92
apps/provisioning/pkg/auth/token_access_checker.go
Normal file
92
apps/provisioning/pkg/auth/token_access_checker.go
Normal 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
|
||||
}
|
||||
137
apps/provisioning/pkg/auth/token_access_checker_test.go
Normal file
137
apps/provisioning/pkg/auth/token_access_checker_test.go
Normal 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
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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": ""
|
||||
}
|
||||
|
||||
@@ -956,8 +956,6 @@
|
||||
"effects": {
|
||||
"barGlow": false,
|
||||
"centerGlow": false,
|
||||
"rounded": false,
|
||||
"spotlight": false,
|
||||
"gradient": false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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 |
|
||||
|
||||
@@ -163,9 +163,9 @@ To add a new annotation query to a dashboard, follow these steps:
|
||||
|
||||
1. To create a query, do one of the following:
|
||||
- Write or construct a query in the query language of your data source. The annotation query options are different for each data source. For information about annotations in a specific data source, refer to the specific [data source](ref:data-source) topic.
|
||||
- Click **Replace with saved query** to reuse a [saved query](ref:saved-queries).
|
||||
- Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](ref:saved-queries).
|
||||
|
||||
1. (Optional) To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
1. (Optional) To [save the query](ref:save-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
|
||||
1. (Optional) Click **Test annotation query** to ensure that the query is working properly.
|
||||
1. (Optional) To add subsequent queries, click **+ Add query** or **+ Add from saved queries**, and test them as many times as needed.
|
||||
|
||||
|
||||
@@ -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" >}}
|
||||
|
||||
@@ -125,9 +125,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
|
||||
|
||||
1. To create a query, do one of the following:
|
||||
- Write or construct a query in the query language of your data source.
|
||||
- Click **Replace with saved query** to reuse a [saved query](ref:saved-queries).
|
||||
- Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](ref:saved-queries).
|
||||
|
||||
1. (Optional) To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
1. (Optional) To [save the query](ref:save-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
|
||||
1. Click **Refresh** to query the data source.
|
||||
1. (Optional) To add subsequent queries, click **+ Add query** or **+ Add from saved queries**, and refresh the data source as many times as needed.
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
{{< 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:
|
||||
|
||||
@@ -71,8 +71,9 @@ Explore consists of a toolbar, outline, query editor, the ability to add multipl
|
||||
- **Run query** - Click to run your query.
|
||||
|
||||
- **Query editor** - Interface where you construct the query for a specific data source. Query editor elements differ based on data source. In order to run queries across multiple data sources you need to select **Mixed** from the data source picker.
|
||||
- **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
- **Replace with saved query** - Reuse a saved query.
|
||||
- **Saved queries**:
|
||||
- **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
- **Replace query** - Reuse a saved query.
|
||||
- **+ Add query** - Add an additional query.
|
||||
- **+ Add from saved queries** - Add an additional query by reusing a saved query.
|
||||
|
||||
|
||||
@@ -88,8 +88,9 @@ The data section contains tabs where you enter queries, transform your data, and
|
||||
|
||||
- **Queries**
|
||||
- Select your data source. You can also set or update the data source in existing dashboards using the drop-down menu in the **Queries** tab.
|
||||
- **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
- **Replace with saved query** - Reuse a saved query.
|
||||
- **Saved queries**:
|
||||
- **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
|
||||
- **Replace query** - Reuse a saved query.
|
||||
- **+ Add query** - Add an additional query.
|
||||
- **+ Add from saved queries** - Add an additional query by reusing a saved query.
|
||||
|
||||
|
||||
@@ -156,11 +156,11 @@ In the **Saved queries** drawer, you can:
|
||||
- Edit a query title, description, tags, or the availability of the query to other users in your organization. By default, saved queries are locked for editing.
|
||||
- When you access the **Saved queries** drawer from Explore, you can use the **Edit in Explore** option to edit the body of a query.
|
||||
|
||||
To access your saved queries, click **+ Add from saved queries** or **Replace with saved query** in the query editor:
|
||||
To access your saved queries, click **+ Add from saved queries** or open the **Saved queries** drop-down menu and click **Replace query** in the query editor:
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-use-saved-queries-v12.3.png" max-width="750px" alt="Access saved queries" >}}
|
||||
|
||||
Clicking **+ Add from saved queries** adds an additional query, while clicking **Replace with saved query** updates your existing query.
|
||||
Clicking **+ Add from saved queries** adds an additional query, while clicking **Replace query** in the **Saved queries** drop-down menu updates your existing query.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Users with Admin and Editor roles can create and save queries for reuse.
|
||||
@@ -172,7 +172,7 @@ Viewers can only reuse queries.
|
||||
|
||||
To save a query you've created:
|
||||
|
||||
1. From the query editor, click the **Save query** icon:
|
||||
1. From the query editor, open the **Saved queries** drop-down menu and click the **Save query** option:
|
||||
|
||||
{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-save-query-v12.2.png" max-width="750px" alt="Save a query" >}}
|
||||
|
||||
@@ -227,7 +227,7 @@ To add a query, follow these steps:
|
||||
|
||||
1. To create a query, do one of the following:
|
||||
- Write or construct a query in the query language of your data source.
|
||||
- Click **Replace with saved query** to reuse a saved query.
|
||||
- Open the **Saved queries** drop-down menu and click **Replace query** to reuse a saved query.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
[Saved queries](#saved-queries) is currently in [public preview](https://grafana.com/docs/release-life-cycle/). Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
|
||||
@@ -235,7 +235,7 @@ To add a query, follow these steps:
|
||||
This feature is only available on Grafana Enterprise and Grafana Cloud.
|
||||
{{< /admonition >}}
|
||||
|
||||
1. (Optional) To [save the query](#save-a-query) for reuse, click the **Save query** button (or icon).
|
||||
1. (Optional) To [save the query](#save-a-query) for reuse, click the **Save query** option in the **Saved queries** drop-down menu.
|
||||
1. (Optional) Click **+ Add query** or **Add from saved queries** to add more queries as needed.
|
||||
|
||||
1. Click **Run queries**.
|
||||
|
||||
271
e2e-playwright/alerting-suite/saved-searches.spec.ts
Normal file
271
e2e-playwright/alerting-suite/saved-searches.spec.ts
Normal 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();
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -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
|
||||
@@ -4339,7 +4329,7 @@
|
||||
},
|
||||
"public/app/plugins/panel/heatmap/utils.ts": {
|
||||
"@typescript-eslint/consistent-type-assertions": {
|
||||
"count": 16
|
||||
"count": 14
|
||||
}
|
||||
},
|
||||
"public/app/plugins/panel/histogram/Histogram.tsx": {
|
||||
|
||||
@@ -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;
|
||||
@@ -1169,6 +1168,11 @@ export interface FeatureToggles {
|
||||
*/
|
||||
externalVizSuggestions?: boolean;
|
||||
/**
|
||||
* Enable Y-axis scale configuration options for pre-bucketed heatmap data (heatmap-rows)
|
||||
* @default false
|
||||
*/
|
||||
heatmapRowsAxisOptions?: boolean;
|
||||
/**
|
||||
* Restrict PanelChrome contents with overflow: hidden;
|
||||
* @default true
|
||||
*/
|
||||
@@ -1193,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;
|
||||
|
||||
@@ -185,6 +185,10 @@ export interface RowsHeatmapOptions {
|
||||
* Sets the name of the cell when not calculating from data
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* Controls the scale distribution of the y-axis buckets
|
||||
*/
|
||||
yBucketScale?: ui.ScaleDistributionConfig;
|
||||
}
|
||||
|
||||
export interface Options {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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} />);
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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',
|
||||
}),
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
]
|
||||
`;
|
||||
@@ -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"`;
|
||||
306
packages/grafana-ui/src/components/RadialGauge/colors.test.ts
Normal file
306
packages/grafana-ui/src/components/RadialGauge/colors.test.ts
Normal 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 });
|
||||
});
|
||||
});
|
||||
});
|
||||
195
packages/grafana-ui/src/components/RadialGauge/colors.ts
Normal file
195
packages/grafana-ui/src/components/RadialGauge/colors.ts
Normal 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)];
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
25
packages/grafana-ui/src/components/RadialGauge/types.ts
Normal file
25
packages/grafana-ui/src/components/RadialGauge/types.ts
Normal 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;
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -119,7 +119,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
||||
table: css({
|
||||
width: '100%',
|
||||
'th:first-child': {
|
||||
width: '100%',
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
},
|
||||
}),
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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({
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -54,6 +54,7 @@ import (
|
||||
"github.com/grafana/grafana/pkg/services/dashboardsnapshots"
|
||||
"github.com/grafana/grafana/pkg/services/datasources"
|
||||
"github.com/grafana/grafana/pkg/services/featuremgmt"
|
||||
"github.com/grafana/grafana/pkg/services/folder"
|
||||
"github.com/grafana/grafana/pkg/services/libraryelements"
|
||||
"github.com/grafana/grafana/pkg/services/librarypanels"
|
||||
"github.com/grafana/grafana/pkg/services/live"
|
||||
@@ -388,8 +389,12 @@ func (b *DashboardsAPIBuilder) validateCreate(ctx context.Context, a admission.A
|
||||
return fmt.Errorf("error getting requester: %w", err)
|
||||
}
|
||||
|
||||
if a.IsDryRun() {
|
||||
return nil // do not check folder or quota
|
||||
}
|
||||
|
||||
// Validate folder existence if specified
|
||||
if !a.IsDryRun() && accessor.GetFolder() != "" {
|
||||
if !folder.IsRootFolder(accessor.GetFolder()) {
|
||||
folder, err := b.validateFolderExists(ctx, accessor.GetFolder(), id.GetOrgID())
|
||||
if err != nil {
|
||||
return err
|
||||
@@ -401,7 +406,7 @@ func (b *DashboardsAPIBuilder) validateCreate(ctx context.Context, a admission.A
|
||||
}
|
||||
|
||||
// Validate quota
|
||||
if !b.isStandalone && !a.IsDryRun() {
|
||||
if !b.isStandalone {
|
||||
params := "a.ScopeParameters{}
|
||||
params.OrgID = id.GetOrgID()
|
||||
internalId, err := id.GetInternalID()
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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"
|
||||
)
|
||||
@@ -44,12 +46,12 @@ func validateOnCreate(ctx context.Context, f *folders.Folder, getter parentsGett
|
||||
return dashboards.ErrFolderTitleEmpty
|
||||
}
|
||||
|
||||
parentName := meta.GetFolder()
|
||||
if parentName == "" {
|
||||
switch meta.GetFolder() {
|
||||
case "", folder.GeneralFolderUID:
|
||||
return nil // OK, we do not need to validate the tree
|
||||
}
|
||||
|
||||
if parentName == f.Name {
|
||||
case folder.SharedWithMeFolderUID:
|
||||
return fmt.Errorf("can not save shared with me")
|
||||
case f.Name:
|
||||
return folder.ErrFolderCannotBeParentOfItself
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
@@ -95,14 +98,19 @@ func validateOnUpdate(ctx context.Context,
|
||||
// Validate the move operation
|
||||
newParent := folderObj.GetFolder()
|
||||
|
||||
// If we move to root, we don't need to validate the depth.
|
||||
if newParent == folder.RootFolderUID {
|
||||
return nil
|
||||
}
|
||||
|
||||
// folder cannot be moved to a k6 folder
|
||||
if newParent == accesscontrol.K6FolderUID {
|
||||
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:
|
||||
return fmt.Errorf("can not save shared with me")
|
||||
case accesscontrol.K6FolderUID:
|
||||
return fmt.Errorf("k6 project may not be moved")
|
||||
case folderObj.GetName():
|
||||
return folder.ErrFolderCannotBeParentOfItself
|
||||
}
|
||||
|
||||
parentObj, err := getter.Get(ctx, newParent, &metav1.GetOptions{})
|
||||
@@ -113,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
|
||||
@@ -129,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,
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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,
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -76,7 +76,7 @@ func ProvideAppInstallers(
|
||||
if features.IsEnabledGlobally(featuremgmt.FlagKubernetesLogsDrilldown) {
|
||||
installers = append(installers, logsdrilldownAppInstaller)
|
||||
}
|
||||
//nolint:staticcheck // not yet migrated to OpenFeature
|
||||
//nolint:staticcheck
|
||||
if features.IsEnabledGlobally(featuremgmt.FlagKubernetesAnnotations) {
|
||||
installers = append(installers, annotationAppInstaller)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -2344,13 +2344,18 @@ func (dr *DashboardServiceImpl) unstructuredToLegacyDashboardWithUsers(item *uns
|
||||
dashVersion := obj.GetGeneration()
|
||||
spec["version"] = dashVersion
|
||||
|
||||
folderUID := obj.GetFolder()
|
||||
if folderUID == folder.GeneralFolderUID {
|
||||
folderUID = "" // empty in legacy API
|
||||
}
|
||||
|
||||
title, _, _ := unstructured.NestedString(spec, "title")
|
||||
out := dashboards.Dashboard{
|
||||
OrgID: orgID,
|
||||
ID: obj.GetDeprecatedInternalID(), // nolint:staticcheck
|
||||
UID: uid,
|
||||
Slug: slugify.Slugify(title),
|
||||
FolderUID: obj.GetFolder(),
|
||||
FolderUID: folderUID,
|
||||
Version: int(dashVersion),
|
||||
Data: simplejson.NewFromAny(spec),
|
||||
APIVersion: strings.TrimPrefix(item.GetAPIVersion(), dashboardv0.GROUP+"/"),
|
||||
|
||||
@@ -23,9 +23,7 @@ type FeatureToggles interface {
|
||||
// a full server restart for a change to take place.
|
||||
//
|
||||
// Deprecated: FeatureToggles.IsEnabledGlobally is deprecated and will be removed in a future release.
|
||||
// Toggles that must be reliably evaluated at the service startup should be
|
||||
// changed to settings (see setting.StartupSettings), and/or removed entirely.
|
||||
// For app registration please use `grafana-apiserver.runtime_config` in settings.ini
|
||||
// Toggles that must be reliably evaluated at the service startup should be changed to settings and/or removed entirely.
|
||||
IsEnabledGlobally(flag string) bool
|
||||
|
||||
// Get the enabled flags -- this *may* also include disabled flags (with value false)
|
||||
|
||||
@@ -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.",
|
||||
@@ -1928,6 +1928,14 @@ var (
|
||||
Owner: grafanaDatavizSquad,
|
||||
Expression: "false",
|
||||
},
|
||||
{
|
||||
Name: "heatmapRowsAxisOptions",
|
||||
Description: "Enable Y-axis scale configuration options for pre-bucketed heatmap data (heatmap-rows)",
|
||||
Stage: FeatureStageExperimental,
|
||||
FrontendOnly: true,
|
||||
Owner: grafanaDatavizSquad,
|
||||
Expression: "false",
|
||||
},
|
||||
{
|
||||
Name: "preventPanelChromeOverflow",
|
||||
Description: "Restrict PanelChrome contents with overflow: hidden;",
|
||||
@@ -1967,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",
|
||||
|
||||
4
pkg/services/featuremgmt/toggles_gen.csv
generated
4
pkg/services/featuremgmt/toggles_gen.csv
generated
@@ -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
|
||||
@@ -262,11 +262,13 @@ pluginInstallAPISync,experimental,@grafana/plugins-platform-backend,false,false,
|
||||
newGauge,experimental,@grafana/dataviz-squad,false,false,true
|
||||
newVizSuggestions,preview,@grafana/dataviz-squad,false,false,true
|
||||
externalVizSuggestions,experimental,@grafana/dataviz-squad,false,false,true
|
||||
heatmapRowsAxisOptions,experimental,@grafana/dataviz-squad,false,false,true
|
||||
preventPanelChromeOverflow,preview,@grafana/grafana-frontend-platform,false,false,true
|
||||
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
|
||||
|
||||
|
4
pkg/services/featuremgmt/toggles_gen.go
generated
4
pkg/services/featuremgmt/toggles_gen.go
generated
@@ -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"
|
||||
|
||||
44
pkg/services/featuremgmt/toggles_gen.json
generated
44
pkg/services/featuremgmt/toggles_gen.json
generated
@@ -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",
|
||||
@@ -1647,6 +1660,20 @@
|
||||
"codeowner": "@grafana/search-and-storage"
|
||||
}
|
||||
},
|
||||
{
|
||||
"metadata": {
|
||||
"name": "heatmapRowsAxisOptions",
|
||||
"resourceVersion": "1765353244400",
|
||||
"creationTimestamp": "2025-12-10T07:54:04Z"
|
||||
},
|
||||
"spec": {
|
||||
"description": "Enable Y-axis scale configuration options for pre-bucketed heatmap data (heatmap-rows)",
|
||||
"stage": "experimental",
|
||||
"codeowner": "@grafana/dataviz-squad",
|
||||
"frontend": true,
|
||||
"expression": "false"
|
||||
}
|
||||
},
|
||||
{
|
||||
"metadata": {
|
||||
"name": "improvedExternalSessionHandling",
|
||||
@@ -2706,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",
|
||||
@@ -3501,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",
|
||||
|
||||
@@ -32,7 +32,7 @@ func convertUnstructuredToFolder(item *unstructured.Unstructured, identifiers ma
|
||||
|
||||
uid := meta.GetName()
|
||||
url := ""
|
||||
if uid != folder.RootFolder.UID {
|
||||
if !folder.IsRootFolder(uid) {
|
||||
slug := slugify.Slugify(title)
|
||||
url = dashboards.GetFolderURL(uid, slug)
|
||||
}
|
||||
@@ -62,13 +62,18 @@ func convertUnstructuredToFolder(item *unstructured.Unstructured, identifiers ma
|
||||
}
|
||||
}
|
||||
|
||||
parent := meta.GetFolder()
|
||||
if folder.IsRootFolder(parent) {
|
||||
parent = ""
|
||||
}
|
||||
|
||||
manager, _ := meta.GetManagerProperties()
|
||||
return &folder.Folder{
|
||||
UID: uid,
|
||||
Title: title,
|
||||
Description: description,
|
||||
ID: meta.GetDeprecatedInternalID(), // nolint:staticcheck
|
||||
ParentUID: meta.GetFolder(),
|
||||
ParentUID: parent,
|
||||
Version: int(meta.GetGeneration()),
|
||||
ManagedBy: manager.Kind,
|
||||
|
||||
|
||||
@@ -1283,6 +1283,10 @@ func (s *Service) buildSaveDashboardCommand(ctx context.Context, dto *dashboards
|
||||
return nil, dashboards.ErrDashboardFolderNameExists
|
||||
}
|
||||
|
||||
if dash.FolderUID == folder.GeneralFolderUID {
|
||||
dash.FolderUID = "" // general is the same as root
|
||||
}
|
||||
|
||||
if dash.FolderUID != "" {
|
||||
if _, err := s.dashboardFolderStore.GetFolderByUID(ctx, dash.OrgID, dash.FolderUID); err != nil {
|
||||
return nil, err
|
||||
@@ -1380,7 +1384,7 @@ func SplitFullpath(s string) []string {
|
||||
func (s *Service) nestedFolderCreate(ctx context.Context, cmd *folder.CreateFolderCommand) (*folder.Folder, error) {
|
||||
ctx, span := s.tracer.Start(ctx, "folder.nestedFolderCreate")
|
||||
defer span.End()
|
||||
if cmd.ParentUID != "" {
|
||||
if !folder.IsRootFolder(cmd.ParentUID) {
|
||||
if err := s.validateParent(ctx, cmd.OrgID, cmd.ParentUID, cmd.UID); err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user