DashbboardScene: RowRepeaterBehavior (#74505)

* Repeating rows start

* working

* Progress

* Progress

* Update

* up scenes lib

* Update

* Progress

* restore url sync

* Progress

* Fixes and tests

* Update

* Adds tests and code to remove repeats from save model

* Update

* Fix test
This commit is contained in:
Torkel Ödegaard
2023-09-11 12:02:04 +02:00
committed by GitHub
parent fb367bf91d
commit 97d568e60a
20 changed files with 1372 additions and 899 deletions

View File

@@ -1,334 +0,0 @@
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"iteration": 1640181176989,
"links": [],
"liveNow": false,
"panels": [
{
"collapsed": false,
"gridPos": {
"h": 1,
"w": 24,
"x": 0,
"y": 0
},
"id": 2,
"panels": [],
"repeat": "row",
"title": "Row title $row",
"type": "row"
},
{
"datasource": {
"type": "testdata"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 8,
"x": 0,
"y": 1
},
"id": 4,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"title": "Panel Title",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 8,
"x": 8,
"y": 1
},
"id": 9,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"repeat": "vertical",
"repeatDirection": "v",
"title": "Vertical repeating $vertical",
"type": "timeseries"
}
],
"schemaVersion": 34,
"tags": [],
"templating": {
"list": [
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "vertical",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
},
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "horizontal",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
},
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "row",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
}
]
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "utc",
"title": "Repeating a row with a non-repeating panel and vertical repeating panel",
"uid": "7lS-ojt7z",
"version": 2,
"weekStart": ""
}

View File

@@ -1,257 +0,0 @@
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"iteration": 1640181195825,
"links": [],
"liveNow": false,
"panels": [
{
"collapsed": false,
"gridPos": {
"h": 1,
"w": 24,
"x": 0,
"y": 0
},
"id": 2,
"panels": [],
"repeat": "row",
"title": "Row title $row",
"type": "row"
},
{
"datasource": {
"type": "testdata"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 8,
"x": 0,
"y": 1
},
"id": 4,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"title": "Panel Title",
"type": "timeseries"
}
],
"schemaVersion": 34,
"tags": [],
"templating": {
"list": [
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "vertical",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
},
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "horizontal",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
},
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "row",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
}
]
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "utc",
"title": "Repeating a row with a non-repeating panel",
"uid": "ZzyTojpnz",
"version": 3,
"weekStart": ""
}

View File

@@ -4,19 +4,13 @@
{
"builtIn": 1,
"datasource": {
"type": "datasource",
"uid": "grafana"
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
@@ -24,41 +18,72 @@
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 85,
"links": [],
"liveNow": false,
"panels": [
{
"collapsed": false,
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"gridPos": {
"h": 1,
"w": 24,
"x": 0,
"y": 0
},
"id": 2,
"id": 20,
"panels": [],
"repeat": "row",
"title": "Row $row",
"title": "Row at the top - not repeated - saved expanded",
"type": "row"
},
{
"gridPos": {
"h": 2,
"w": 24,
"x": 0,
"y": 1
},
"id": 15,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "<div class=\"center-vh\">\n Repeated row below. The row has \n a panel that is also repeated horizontally based\n on values in the $pod variable. \n</div>",
"mode": "markdown"
},
"pluginVersion": "10.2.0-pre",
"type": "text"
},
{
"gridPos": {
"h": 1,
"w": 24,
"x": 0,
"y": 3
},
"id": 16,
"panels": [],
"repeat": "server",
"repeatDirection": "h",
"title": "Row for server $server",
"type": "row"
},
{
"datasource": {
"type": "testdata"
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"axisShow": false,
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
@@ -68,6 +93,7 @@
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
@@ -89,7 +115,8 @@
"mode": "absolute",
"steps": [
{
"color": "green"
"color": "green",
"value": null
},
{
"color": "red",
@@ -101,145 +128,174 @@
"overrides": []
},
"gridPos": {
"h": 8,
"w": 8,
"h": 6,
"w": 12,
"x": 0,
"y": 1
"y": 4
},
"id": 4,
"id": 2,
"maxPerRow": 3,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"title": "Row $row non-repeating panel",
"repeat": "pod",
"repeatDirection": "h",
"targets": [
{
"alias": "server = $server, pod id = $pod ",
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "random_walk",
"seriesCount": 1
}
],
"title": "server = $server, pod = $pod",
"type": "timeseries"
},
{
"datasource": {
"type": "testdata"
},
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 0,
"gradientMode": "none",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"lineInterpolation": "linear",
"lineWidth": 1,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "auto",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"collapsed": true,
"gridPos": {
"h": 8,
"w": 8,
"h": 1,
"w": 24,
"x": 0,
"y": 9
"y": 21
},
"id": 9,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"tooltip": {
"mode": "single",
"sort": "none"
"id": 25,
"panels": [
{
"gridPos": {
"h": 2,
"w": 24,
"x": 0,
"y": 22
},
"id": 30,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "<div class=\"center-vh\">\n Just a panel\n</div>",
"mode": "markdown"
},
"pluginVersion": "10.2.0-pre",
"type": "text"
}
},
"repeat": "horizontal",
"repeatDirection": "h",
"title": "Row $row repeating panel $horizontal",
"type": "timeseries"
],
"title": "Row at the bottom - not repeated - saved collapsed ",
"type": "row"
}
],
"schemaVersion": 36,
"tags": [],
"refresh": "",
"schemaVersion": 38,
"tags": [
"templating",
"gdev"
],
"templating": {
"list": [
{
"current": {
"selected": true,
"text": [
"All"
"A",
"B"
],
"value": [
"$__all"
"A",
"B"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "vertical",
"name": "server",
"options": [
{
"selected": true,
"selected": false,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
"selected": true,
"text": "A",
"value": "A"
},
{
"selected": true,
"text": "B",
"value": "B"
},
{
"selected": false,
"text": "2",
"value": "2"
"text": "C",
"value": "C"
},
{
"selected": false,
"text": "3",
"value": "3"
"text": "D",
"value": "D"
},
{
"selected": false,
"text": "E",
"value": "E"
},
{
"selected": false,
"text": "F",
"value": "F"
},
{
"selected": false,
"text": "E",
"value": "E"
},
{
"selected": false,
"text": "G",
"value": "G"
},
{
"selected": false,
"text": "H",
"value": "H"
},
{
"selected": false,
"text": "I",
"value": "I"
},
{
"selected": false,
"text": "J",
"value": "J"
},
{
"selected": false,
"text": "K",
"value": "K"
},
{
"selected": false,
"text": "L",
"value": "L"
}
],
"query": "1,2,3",
"query": "A,B,C,D,E,F,E,G,H,I,J,K,L",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
@@ -248,80 +304,51 @@
"current": {
"selected": true,
"text": [
"All"
"Bob",
"Rob"
],
"value": [
"$__all"
"1",
"2"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "horizontal",
"name": "pod",
"options": [
{
"selected": true,
"selected": false,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"selected": true,
"text": "Bob",
"value": "1"
},
{
"selected": false,
"text": "2",
"value": "2"
},
{
"selected": false,
"text": "3",
"value": "3"
}
],
"query": "1,2,3",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
},
{
"current": {
"selected": true,
"text": [
"All"
],
"value": [
"$__all"
]
},
"hide": 0,
"includeAll": true,
"multi": true,
"name": "row",
"options": [
{
"selected": true,
"text": "All",
"value": "$__all"
},
{
"selected": false,
"text": "1",
"value": "1"
},
{
"selected": false,
"text": "2",
"text": "Rob",
"value": "2"
},
{
"selected": false,
"text": "3",
"text": "Sod",
"value": "3"
},
{
"selected": false,
"text": "Hod",
"value": "4"
},
{
"selected": false,
"text": "Cod",
"value": "5"
}
],
"query": "1,2,3",
"query": "Bob : 1, Rob : 2,Sod : 3, Hod : 4, Cod : 5",
"queryValue": "",
"skipUrlSync": false,
"type": "custom"
@@ -333,9 +360,9 @@
"to": "now"
},
"timepicker": {},
"timezone": "utc",
"title": "Repeating a row with a non-repeating panel and horizontal repeating panel",
"uid": "k3PEoCpnk",
"timezone": "",
"title": "Repeating rows",
"uid": "Repeating-rows-uid",
"version": 1,
"weekStart": ""
}
}

View File

@@ -30,27 +30,6 @@ local dashboard = grafana.dashboard;
id: 0,
}
},
dashboard.new('Repeating-a-row-with-a-non-repeating-pan', import '../dev-dashboards/e2e-repeats/Repeating-a-row-with-a-non-repeating-panel-and-horizontal-repeating-panel.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
id: 0,
}
},
dashboard.new('Repeating-a-row-with-a-non-repeating-pan', import '../dev-dashboards/e2e-repeats/Repeating-a-row-with-a-non-repeating-panel-and-vertical-repeating-panel.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
id: 0,
}
},
dashboard.new('Repeating-a-row-with-a-non-repeating-pan', import '../dev-dashboards/e2e-repeats/Repeating-a-row-with-a-non-repeating-panel.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
id: 0,
}
},
dashboard.new('Repeating-a-row-with-a-repeating-horizon', import '../dev-dashboards/e2e-repeats/Repeating-a-row-with-a-repeating-horizontal-panel.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
@@ -625,6 +604,13 @@ local dashboard = grafana.dashboard;
id: 0,
}
},
dashboard.new('templating-repeating-rows', import '../dev-dashboards/feature-templating/templating-repeating-rows.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
id: 0,
}
},
dashboard.new('templating-textbox-e2e-scenarios', import '../dev-dashboards/feature-templating/templating-textbox-e2e-scenarios.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{