mirror of https://github.com/grafana/grafana
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 testpull/74650/head^2
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
fb367bf91d
commit
97d568e60a
@ -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": "" |
|
||||||
} |
|
||||||
@ -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": "" |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
import { e2e } from '../utils'; |
|
||||||
const PAGE_UNDER_TEST = 'k3PEoCpnk/repeating-a-row-with-a-non-repeating-panel-and-horizontal-repeating-panel'; |
|
||||||
const DASHBOARD_NAME = 'Repeating a row with a non-repeating panel and horizontal repeating panel'; |
|
||||||
|
|
||||||
describe('Repeating a row with repeated panels and a non-repeating panel', () => { |
|
||||||
beforeEach(() => { |
|
||||||
e2e.flows.login('admin', 'admin'); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should be able to collapse and expand a repeated row without losing panels', () => { |
|
||||||
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST }); |
|
||||||
e2e().contains(DASHBOARD_NAME).should('be.visible'); |
|
||||||
|
|
||||||
const panelsToCheck = [ |
|
||||||
'Row 2 non-repeating panel', |
|
||||||
'Row 2 repeating panel 1', |
|
||||||
'Row 2 repeating panel 2', |
|
||||||
'Row 2 repeating panel 3', |
|
||||||
]; |
|
||||||
|
|
||||||
// Collapse Row 1 first so the Row 2 panels all fit on the screen
|
|
||||||
e2e.components.DashboardRow.title('Row 1').click(); |
|
||||||
|
|
||||||
// Rows are expanded by default, so check that all panels are visible
|
|
||||||
panelsToCheck.forEach((title) => { |
|
||||||
e2e.components.Panels.Panel.title(title).should('be.visible'); |
|
||||||
}); |
|
||||||
|
|
||||||
// Collapse the row and check panels are no longer visible
|
|
||||||
e2e.components.DashboardRow.title('Row 2').click(); |
|
||||||
panelsToCheck.forEach((title) => { |
|
||||||
e2e.components.Panels.Panel.title(title).should('not.exist'); |
|
||||||
}); |
|
||||||
|
|
||||||
// Expand the row and check all panels are visible again
|
|
||||||
e2e.components.DashboardRow.title('Row 2').click(); |
|
||||||
panelsToCheck.forEach((title) => { |
|
||||||
e2e.components.Panels.Panel.title(title).should('be.visible'); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -0,0 +1,144 @@ |
|||||||
|
import { |
||||||
|
EmbeddedScene, |
||||||
|
SceneCanvasText, |
||||||
|
SceneGridItem, |
||||||
|
SceneGridLayout, |
||||||
|
SceneGridRow, |
||||||
|
SceneTimeRange, |
||||||
|
SceneVariableSet, |
||||||
|
TestVariable, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE } from 'app/features/variables/constants'; |
||||||
|
|
||||||
|
import { activateFullSceneTree } from '../utils/test-utils'; |
||||||
|
|
||||||
|
import { RepeatDirection } from './PanelRepeaterGridItem'; |
||||||
|
import { RowRepeaterBehavior } from './RowRepeaterBehavior'; |
||||||
|
|
||||||
|
describe('RowRepeaterBehavior', () => { |
||||||
|
describe('Given scene with variable with 5 values', () => { |
||||||
|
let scene: EmbeddedScene, grid: SceneGridLayout; |
||||||
|
|
||||||
|
beforeEach(async () => { |
||||||
|
({ scene, grid } = buildScene({ variableQueryTime: 0 })); |
||||||
|
activateFullSceneTree(scene); |
||||||
|
await new Promise((r) => setTimeout(r, 1)); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Should repeat row', () => { |
||||||
|
// Verify that panel above row remains
|
||||||
|
expect(grid.state.children[0]).toBeInstanceOf(SceneGridItem); |
||||||
|
// Verify that first row still has repeat behavior
|
||||||
|
const row1 = grid.state.children[1] as SceneGridRow; |
||||||
|
expect(row1.state.$behaviors?.[0]).toBeInstanceOf(RowRepeaterBehavior); |
||||||
|
expect(row1.state.$variables!.state.variables[0].getValue()).toBe('1'); |
||||||
|
|
||||||
|
const row2 = grid.state.children[2] as SceneGridRow; |
||||||
|
expect(row2.state.$variables!.state.variables[0].getValueText?.()).toBe('B'); |
||||||
|
|
||||||
|
// Should give repeated panels unique keys
|
||||||
|
const gridItem = row2.state.children[0] as SceneGridItem; |
||||||
|
expect(gridItem.state.body?.state.key).toBe('canvas-1-row-1'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Should push row at the bottom down', () => { |
||||||
|
// Should push row at the bottom down
|
||||||
|
const rowAtTheBottom = grid.state.children[6] as SceneGridRow; |
||||||
|
expect(rowAtTheBottom.state.title).toBe('Row at the bottom'); |
||||||
|
|
||||||
|
// Panel at the top is 10, each row is (1+5)*5 = 30, so the grid item below it should be 40
|
||||||
|
expect(rowAtTheBottom.state.y).toBe(40); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Should handle second repeat cycle and update remove old repeats', async () => { |
||||||
|
// trigger another repeat cycle by changing the variable
|
||||||
|
const variable = scene.state.$variables!.state.variables[0] as TestVariable; |
||||||
|
variable.changeValueTo(['2', '3']); |
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 1)); |
||||||
|
|
||||||
|
// should now only have 2 repeated rows (and the panel above + the row at the bottom)
|
||||||
|
expect(grid.state.children.length).toBe(4); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
interface SceneOptions { |
||||||
|
variableQueryTime: number; |
||||||
|
maxPerRow?: number; |
||||||
|
itemHeight?: number; |
||||||
|
repeatDirection?: RepeatDirection; |
||||||
|
} |
||||||
|
|
||||||
|
function buildScene(options: SceneOptions) { |
||||||
|
const grid = new SceneGridLayout({ |
||||||
|
children: [ |
||||||
|
new SceneGridItem({ |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
width: 24, |
||||||
|
height: 10, |
||||||
|
body: new SceneCanvasText({ |
||||||
|
text: 'Panel above row', |
||||||
|
}), |
||||||
|
}), |
||||||
|
new SceneGridRow({ |
||||||
|
x: 0, |
||||||
|
y: 10, |
||||||
|
width: 24, |
||||||
|
height: 1, |
||||||
|
$behaviors: [ |
||||||
|
new RowRepeaterBehavior({ |
||||||
|
variableName: 'server', |
||||||
|
sources: [ |
||||||
|
new SceneGridItem({ |
||||||
|
x: 0, |
||||||
|
y: 11, |
||||||
|
width: 24, |
||||||
|
height: 5, |
||||||
|
body: new SceneCanvasText({ |
||||||
|
key: 'canvas-1', |
||||||
|
text: 'Panel inside repeated row, server = $server', |
||||||
|
}), |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
new SceneGridRow({ |
||||||
|
x: 0, |
||||||
|
y: 16, |
||||||
|
width: 24, |
||||||
|
height: 5, |
||||||
|
title: 'Row at the bottom', |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
const scene = new EmbeddedScene({ |
||||||
|
$timeRange: new SceneTimeRange({ from: 'now-6h', to: 'now' }), |
||||||
|
$variables: new SceneVariableSet({ |
||||||
|
variables: [ |
||||||
|
new TestVariable({ |
||||||
|
name: 'server', |
||||||
|
query: 'A.*', |
||||||
|
value: ALL_VARIABLE_VALUE, |
||||||
|
text: ALL_VARIABLE_TEXT, |
||||||
|
isMulti: true, |
||||||
|
includeAll: true, |
||||||
|
delayMs: options.variableQueryTime, |
||||||
|
optionsToReturn: [ |
||||||
|
{ label: 'A', value: '1' }, |
||||||
|
{ label: 'B', value: '2' }, |
||||||
|
{ label: 'C', value: '3' }, |
||||||
|
{ label: 'D', value: '4' }, |
||||||
|
{ label: 'E', value: '5' }, |
||||||
|
], |
||||||
|
}), |
||||||
|
], |
||||||
|
}), |
||||||
|
body: grid, |
||||||
|
}); |
||||||
|
|
||||||
|
return { scene, grid }; |
||||||
|
} |
||||||
@ -0,0 +1,215 @@ |
|||||||
|
import { |
||||||
|
LocalValueVariable, |
||||||
|
MultiValueVariable, |
||||||
|
sceneGraph, |
||||||
|
SceneGridItemLike, |
||||||
|
SceneGridLayout, |
||||||
|
SceneGridRow, |
||||||
|
SceneObjectBase, |
||||||
|
SceneObjectState, |
||||||
|
SceneVariable, |
||||||
|
SceneVariableSet, |
||||||
|
VariableDependencyConfig, |
||||||
|
VariableValueSingle, |
||||||
|
} from '@grafana/scenes'; |
||||||
|
|
||||||
|
import { getMultiVariableValues } from '../utils/utils'; |
||||||
|
|
||||||
|
interface RowRepeaterBehaviorState extends SceneObjectState { |
||||||
|
variableName: string; |
||||||
|
sources: SceneGridItemLike[]; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* This behavior will run an effect function when specified variables change |
||||||
|
*/ |
||||||
|
|
||||||
|
export class RowRepeaterBehavior extends SceneObjectBase<RowRepeaterBehaviorState> { |
||||||
|
protected _variableDependency = new VariableDependencyConfig(this, { |
||||||
|
variableNames: [this.state.variableName], |
||||||
|
onVariableUpdatesCompleted: this._onVariableChanged.bind(this), |
||||||
|
}); |
||||||
|
|
||||||
|
private _isWaitingForVariables = false; |
||||||
|
|
||||||
|
public constructor(state: RowRepeaterBehaviorState) { |
||||||
|
super(state); |
||||||
|
|
||||||
|
this.addActivationHandler(() => this._activationHandler()); |
||||||
|
} |
||||||
|
|
||||||
|
private _activationHandler() { |
||||||
|
// If we our variable is ready we can process repeats on activation
|
||||||
|
if (sceneGraph.hasVariableDependencyInLoadingState(this)) { |
||||||
|
this._isWaitingForVariables = true; |
||||||
|
} else { |
||||||
|
this._performRepeat(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _onVariableChanged(changedVariables: Set<SceneVariable>, dependencyChanged: boolean): void { |
||||||
|
if (dependencyChanged) { |
||||||
|
this._performRepeat(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// If we are waiting for variables and the variable is no longer loading then we are ready to repeat as well
|
||||||
|
if (this._isWaitingForVariables && !sceneGraph.hasVariableDependencyInLoadingState(this)) { |
||||||
|
this._isWaitingForVariables = false; |
||||||
|
this._performRepeat(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private _performRepeat() { |
||||||
|
const variable = sceneGraph.lookupVariable(this.state.variableName, this.parent?.parent!); |
||||||
|
|
||||||
|
if (!variable) { |
||||||
|
console.error('RepeatedRowBehavior: Variable not found'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!(variable instanceof MultiValueVariable)) { |
||||||
|
console.error('RepeatedRowBehavior: Variable is not a MultiValueVariable'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!(this.parent instanceof SceneGridRow)) { |
||||||
|
console.error('RepeatedRowBehavior: Parent is not a SceneGridRow'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const layout = sceneGraph.getLayout(this); |
||||||
|
|
||||||
|
if (!(layout instanceof SceneGridLayout)) { |
||||||
|
console.error('RepeatedRowBehavior: Layout is not a SceneGridLayout'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const rowToRepeat = this.parent as SceneGridRow; |
||||||
|
const { values, texts } = getMultiVariableValues(variable); |
||||||
|
const rows: SceneGridRow[] = []; |
||||||
|
const rowContentHeight = getRowContentHeight(this.state.sources); |
||||||
|
let maxYOfRows = 0; |
||||||
|
|
||||||
|
// Loop through variable values and create repeates
|
||||||
|
for (let index = 0; index < values.length; index++) { |
||||||
|
const children: SceneGridItemLike[] = []; |
||||||
|
|
||||||
|
// Loop through panels inside row
|
||||||
|
for (const source of this.state.sources) { |
||||||
|
const sourceItemY = source.state.y ?? 0; |
||||||
|
const itemY = sourceItemY + (rowContentHeight + 1) * index; |
||||||
|
|
||||||
|
const itemClone = source.clone({ |
||||||
|
key: `${source.state.key}-clone-${index}`, |
||||||
|
y: itemY, |
||||||
|
}); |
||||||
|
|
||||||
|
//Make sure all the child scene objects have unique keys
|
||||||
|
ensureUniqueKeys(itemClone, index); |
||||||
|
|
||||||
|
children.push(itemClone); |
||||||
|
|
||||||
|
if (maxYOfRows < itemY + itemClone.state.height!) { |
||||||
|
maxYOfRows = itemY + itemClone.state.height!; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const rowClone = this.getRowClone(rowToRepeat, index, values[index], texts[index], rowContentHeight, children); |
||||||
|
rows.push(rowClone); |
||||||
|
} |
||||||
|
|
||||||
|
updateLayout(layout, rows, maxYOfRows, rowToRepeat); |
||||||
|
} |
||||||
|
|
||||||
|
getRowClone( |
||||||
|
rowToRepeat: SceneGridRow, |
||||||
|
index: number, |
||||||
|
value: VariableValueSingle, |
||||||
|
text: VariableValueSingle, |
||||||
|
rowContentHeight: number, |
||||||
|
children: SceneGridItemLike[] |
||||||
|
): SceneGridRow { |
||||||
|
if (index === 0) { |
||||||
|
rowToRepeat.setState({ |
||||||
|
// not activated
|
||||||
|
$variables: new SceneVariableSet({ |
||||||
|
variables: [new LocalValueVariable({ name: this.state.variableName, value, text: String(text) })], |
||||||
|
}), |
||||||
|
children, |
||||||
|
}); |
||||||
|
return rowToRepeat; |
||||||
|
} |
||||||
|
|
||||||
|
const sourceRowY = rowToRepeat.state.y ?? 0; |
||||||
|
|
||||||
|
return rowToRepeat.clone({ |
||||||
|
key: `${rowToRepeat.state.key}-clone-${index}`, |
||||||
|
$variables: new SceneVariableSet({ |
||||||
|
variables: [new LocalValueVariable({ name: this.state.variableName, value, text: String(text) })], |
||||||
|
}), |
||||||
|
$behaviors: [], |
||||||
|
children, |
||||||
|
y: sourceRowY + rowContentHeight * index + index, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getRowContentHeight(panels: SceneGridItemLike[]): number { |
||||||
|
let maxY = 0; |
||||||
|
let minY = Number.MAX_VALUE; |
||||||
|
|
||||||
|
for (const panel of panels) { |
||||||
|
if (panel.state.y! + panel.state.height! > maxY) { |
||||||
|
maxY = panel.state.y! + panel.state.height!; |
||||||
|
} |
||||||
|
if (panel.state.y! < minY) { |
||||||
|
minY = panel.state.y!; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return maxY - minY; |
||||||
|
} |
||||||
|
|
||||||
|
function updateLayout(layout: SceneGridLayout, rows: SceneGridRow[], maxYOfRows: number, rowToRepeat: SceneGridRow) { |
||||||
|
const allChildren = getLayoutChildrenFilterOutRepeatClones(layout, rowToRepeat); |
||||||
|
const index = allChildren.indexOf(rowToRepeat); |
||||||
|
|
||||||
|
if (index === -1) { |
||||||
|
throw new Error('RowRepeaterBehavior: Parent row not found in layout children'); |
||||||
|
} |
||||||
|
|
||||||
|
const newChildren = [...allChildren.slice(0, index), ...rows, ...allChildren.slice(index + 1)]; |
||||||
|
|
||||||
|
// Is there grid items after rows?
|
||||||
|
if (allChildren.length > index + 1) { |
||||||
|
const childrenAfter = allChildren.slice(index + 1); |
||||||
|
const firstChildAfterY = childrenAfter[0].state.y!; |
||||||
|
const diff = maxYOfRows - firstChildAfterY; |
||||||
|
|
||||||
|
for (const child of childrenAfter) { |
||||||
|
if (child.state.y! < maxYOfRows) { |
||||||
|
child.setState({ y: child.state.y! + diff }); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
layout.setState({ children: newChildren }); |
||||||
|
} |
||||||
|
|
||||||
|
function getLayoutChildrenFilterOutRepeatClones(layout: SceneGridLayout, rowToRepeat: SceneGridRow) { |
||||||
|
return layout.state.children.filter((child) => { |
||||||
|
if (child.state.key?.startsWith(`${rowToRepeat.state.key}-clone-`)) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function ensureUniqueKeys(item: SceneGridItemLike, rowIndex: number) { |
||||||
|
item.forEachChild((child) => { |
||||||
|
child.setState({ key: `${child.state.key}-row-${rowIndex}` }); |
||||||
|
ensureUniqueKeys(child, rowIndex); |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,353 @@ |
|||||||
|
{ |
||||||
|
"annotations": { |
||||||
|
"list": [ |
||||||
|
{ |
||||||
|
"builtIn": 1, |
||||||
|
"datasource": { |
||||||
|
"type": "grafana", |
||||||
|
"uid": "-- Grafana --" |
||||||
|
}, |
||||||
|
"enable": true, |
||||||
|
"hide": true, |
||||||
|
"iconColor": "rgba(0, 211, 255, 1)", |
||||||
|
"name": "Annotations & Alerts", |
||||||
|
"type": "dashboard" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"editable": true, |
||||||
|
"fiscalYearStartMonth": 0, |
||||||
|
"graphTooltip": 0, |
||||||
|
"links": [], |
||||||
|
"liveNow": false, |
||||||
|
"panels": [ |
||||||
|
{ |
||||||
|
"collapsed": false, |
||||||
|
"gridPos": { |
||||||
|
"h": 1, |
||||||
|
"w": 24, |
||||||
|
"x": 0, |
||||||
|
"y": 0 |
||||||
|
}, |
||||||
|
"id": 20, |
||||||
|
"panels": [], |
||||||
|
"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", |
||||||
|
"uid": "PD8C576611E62080A" |
||||||
|
}, |
||||||
|
"fieldConfig": { |
||||||
|
"defaults": { |
||||||
|
"color": { |
||||||
|
"mode": "palette-classic" |
||||||
|
}, |
||||||
|
"custom": { |
||||||
|
"axisCenteredZero": false, |
||||||
|
"axisColorMode": "text", |
||||||
|
"axisLabel": "", |
||||||
|
"axisPlacement": "auto", |
||||||
|
"axisShow": false, |
||||||
|
"barAlignment": 0, |
||||||
|
"drawStyle": "line", |
||||||
|
"fillOpacity": 0, |
||||||
|
"gradientMode": "none", |
||||||
|
"hideFrom": { |
||||||
|
"legend": false, |
||||||
|
"tooltip": false, |
||||||
|
"viz": false |
||||||
|
}, |
||||||
|
"insertNulls": false, |
||||||
|
"lineInterpolation": "linear", |
||||||
|
"lineWidth": 1, |
||||||
|
"pointSize": 5, |
||||||
|
"scaleDistribution": { |
||||||
|
"type": "linear" |
||||||
|
}, |
||||||
|
"showPoints": "auto", |
||||||
|
"spanNulls": false, |
||||||
|
"stacking": { |
||||||
|
"group": "A", |
||||||
|
"mode": "none" |
||||||
|
}, |
||||||
|
"thresholdsStyle": { |
||||||
|
"mode": "off" |
||||||
|
} |
||||||
|
}, |
||||||
|
"mappings": [], |
||||||
|
"thresholds": { |
||||||
|
"mode": "absolute", |
||||||
|
"steps": [ |
||||||
|
{ |
||||||
|
"color": "green", |
||||||
|
"value": null |
||||||
|
}, |
||||||
|
{ |
||||||
|
"color": "red", |
||||||
|
"value": 80 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
"overrides": [] |
||||||
|
}, |
||||||
|
"gridPos": { |
||||||
|
"h": 10, |
||||||
|
"w": 12, |
||||||
|
"x": 0, |
||||||
|
"y": 4 |
||||||
|
}, |
||||||
|
"id": 2, |
||||||
|
"maxPerRow": 3, |
||||||
|
"options": { |
||||||
|
"legend": { |
||||||
|
"calcs": [], |
||||||
|
"displayMode": "list", |
||||||
|
"placement": "bottom", |
||||||
|
"showLegend": true |
||||||
|
}, |
||||||
|
"tooltip": { |
||||||
|
"mode": "single", |
||||||
|
"sort": "none" |
||||||
|
} |
||||||
|
}, |
||||||
|
"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" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"collapsed": true, |
||||||
|
"gridPos": { |
||||||
|
"h": 1, |
||||||
|
"w": 24, |
||||||
|
"x": 0, |
||||||
|
"y": 25 |
||||||
|
}, |
||||||
|
"id": 25, |
||||||
|
"panels": [ |
||||||
|
{ |
||||||
|
"gridPos": { |
||||||
|
"h": 2, |
||||||
|
"w": 24, |
||||||
|
"x": 0, |
||||||
|
"y": 26 |
||||||
|
}, |
||||||
|
"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" |
||||||
|
} |
||||||
|
], |
||||||
|
"title": "Row at the bottom - not repeated - saved collapsed ", |
||||||
|
"type": "row" |
||||||
|
} |
||||||
|
], |
||||||
|
"refresh": "", |
||||||
|
"schemaVersion": 38, |
||||||
|
"tags": ["templating", "gdev"], |
||||||
|
"templating": { |
||||||
|
"list": [ |
||||||
|
{ |
||||||
|
"current": { |
||||||
|
"selected": true, |
||||||
|
"text": ["A", "B"], |
||||||
|
"value": ["A", "B"] |
||||||
|
}, |
||||||
|
"hide": 0, |
||||||
|
"includeAll": true, |
||||||
|
"multi": true, |
||||||
|
"name": "server", |
||||||
|
"options": [ |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "All", |
||||||
|
"value": "$__all" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": true, |
||||||
|
"text": "A", |
||||||
|
"value": "A" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": true, |
||||||
|
"text": "B", |
||||||
|
"value": "B" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "C", |
||||||
|
"value": "C" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"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": "A,B,C,D,E,F,E,G,H,I,J,K,L", |
||||||
|
"queryValue": "", |
||||||
|
"skipUrlSync": false, |
||||||
|
"type": "custom" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"current": { |
||||||
|
"selected": true, |
||||||
|
"text": ["Bob", "Rob"], |
||||||
|
"value": ["1", "2"] |
||||||
|
}, |
||||||
|
"hide": 0, |
||||||
|
"includeAll": true, |
||||||
|
"multi": true, |
||||||
|
"name": "pod", |
||||||
|
"options": [ |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "All", |
||||||
|
"value": "$__all" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": true, |
||||||
|
"text": "Bob", |
||||||
|
"value": "1" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": true, |
||||||
|
"text": "Rob", |
||||||
|
"value": "2" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "Sod", |
||||||
|
"value": "3" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "Hod", |
||||||
|
"value": "4" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "Cod", |
||||||
|
"value": "5" |
||||||
|
} |
||||||
|
], |
||||||
|
"query": "Bob : 1, Rob : 2,Sod : 3, Hod : 4, Cod : 5", |
||||||
|
"queryValue": "", |
||||||
|
"skipUrlSync": false, |
||||||
|
"type": "custom" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"time": { |
||||||
|
"from": "now-6h", |
||||||
|
"to": "now" |
||||||
|
}, |
||||||
|
"timepicker": {}, |
||||||
|
"timezone": "", |
||||||
|
"title": "Repeating rows", |
||||||
|
"uid": "Repeating-rows-uid", |
||||||
|
"version": 1, |
||||||
|
"weekStart": "" |
||||||
|
} |
||||||
Loading…
Reference in new issue