mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
311 lines
10 KiB
TypeScript
311 lines
10 KiB
TypeScript
import _ from 'lodash';
|
|
import {DashboardModel} from '../dashboard_model';
|
|
import { expect } from 'test/lib/common';
|
|
|
|
jest.mock('app/core/services/context_srv', () => ({
|
|
|
|
}));
|
|
|
|
describe('given dashboard with panel repeat in horizontal direction', function() {
|
|
var dashboard;
|
|
|
|
beforeEach(function() {
|
|
dashboard = new DashboardModel({
|
|
panels: [{id: 2, repeat: 'apps', repeatDirection: 'h', gridPos: {x: 0, y: 0, h: 2, w: 24}}],
|
|
templating: {
|
|
list: [{
|
|
name: 'apps',
|
|
current: {
|
|
text: 'se1, se2, se3',
|
|
value: ['se1', 'se2', 'se3']
|
|
},
|
|
options: [
|
|
{text: 'se1', value: 'se1', selected: true},
|
|
{text: 'se2', value: 'se2', selected: true},
|
|
{text: 'se3', value: 'se3', selected: true},
|
|
{text: 'se4', value: 'se4', selected: false}
|
|
]
|
|
}]
|
|
}
|
|
});
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should repeat panel 3 times', function() {
|
|
expect(dashboard.panels.length).toBe(3);
|
|
});
|
|
|
|
it('should mark panel repeated', function() {
|
|
expect(dashboard.panels[0].repeat).toBe('apps');
|
|
expect(dashboard.panels[1].repeatPanelId).toBe(2);
|
|
});
|
|
|
|
it('should set scopedVars on panels', function() {
|
|
expect(dashboard.panels[0].scopedVars.apps.value).toBe('se1');
|
|
expect(dashboard.panels[1].scopedVars.apps.value).toBe('se2');
|
|
expect(dashboard.panels[2].scopedVars.apps.value).toBe('se3');
|
|
});
|
|
|
|
it('should place on first row and adjust width so all fit', function() {
|
|
expect(dashboard.panels[0].gridPos).toMatchObject({x: 0, y: 0, h: 2, w: 8});
|
|
expect(dashboard.panels[1].gridPos).toMatchObject({x: 8, y: 0, h: 2, w: 8});
|
|
expect(dashboard.panels[2].gridPos).toMatchObject({x: 16, y: 0, h: 2, w: 8});
|
|
});
|
|
|
|
describe('After a second iteration', function() {
|
|
|
|
beforeEach(function() {
|
|
dashboard.panels[0].fill = 10;
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('reused panel should copy properties from source', function() {
|
|
expect(dashboard.panels[1].fill).toBe(10);
|
|
});
|
|
|
|
it('should have same panel count', function() {
|
|
expect(dashboard.panels.length).toBe(3);
|
|
});
|
|
});
|
|
|
|
describe('After a second iteration with different variable', function() {
|
|
beforeEach(function() {
|
|
dashboard.templating.list.push({
|
|
name: 'server',
|
|
current: { text: 'se1, se2, se3', value: ['se1']},
|
|
options: [{text: 'se1', value: 'se1', selected: true}]
|
|
});
|
|
dashboard.panels[0].repeat = "server";
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should remove scopedVars value for last variable', function() {
|
|
expect(dashboard.panels[0].scopedVars.apps).toBe(undefined);
|
|
});
|
|
|
|
it('should have new variable value in scopedVars', function() {
|
|
expect(dashboard.panels[0].scopedVars.server.value).toBe("se1");
|
|
});
|
|
});
|
|
|
|
describe('After a second iteration and selected values reduced', function() {
|
|
beforeEach(function() {
|
|
dashboard.templating.list[0].options[1].selected = false;
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should clean up repeated panel', function() {
|
|
expect(dashboard.panels.length).toBe(2);
|
|
});
|
|
});
|
|
|
|
describe('After a second iteration and panel repeat is turned off', function() {
|
|
beforeEach(function() {
|
|
dashboard.panels[0].repeat = null;
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should clean up repeated panel', function() {
|
|
expect(dashboard.panels.length).toBe(1);
|
|
});
|
|
|
|
it('should remove scoped vars from reused panel', function() {
|
|
expect(dashboard.panels[0].scopedVars).toBe(undefined);
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
describe('given dashboard with panel repeat in vertical direction', function() {
|
|
var dashboard;
|
|
|
|
beforeEach(function() {
|
|
dashboard = new DashboardModel({
|
|
panels: [{id: 2, repeat: 'apps', repeatDirection: 'v', gridPos: {x: 5, y: 0, h: 2, w: 8}}],
|
|
templating: {
|
|
list: [{
|
|
name: 'apps',
|
|
current: {
|
|
text: 'se1, se2, se3',
|
|
value: ['se1', 'se2', 'se3']
|
|
},
|
|
options: [
|
|
{text: 'se1', value: 'se1', selected: true},
|
|
{text: 'se2', value: 'se2', selected: true},
|
|
{text: 'se3', value: 'se3', selected: true},
|
|
{text: 'se4', value: 'se4', selected: false}
|
|
]
|
|
}]
|
|
}
|
|
});
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should place on items on top of each other and keep witdh', function() {
|
|
expect(dashboard.panels[0].gridPos).toMatchObject({x: 5, y: 0, h: 2, w: 8});
|
|
expect(dashboard.panels[1].gridPos).toMatchObject({x: 5, y: 2, h: 2, w: 8});
|
|
expect(dashboard.panels[2].gridPos).toMatchObject({x: 5, y: 4, h: 2, w: 8});
|
|
});
|
|
});
|
|
|
|
describe('given dashboard with row repeat', function() {
|
|
let dashboard, dashboardJSON;
|
|
|
|
beforeEach(function() {
|
|
dashboardJSON = {
|
|
panels: [
|
|
{id: 1, type: 'row', gridPos: {x: 0, y: 0, h: 1 , w: 24}, repeat: 'apps'},
|
|
{id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}},
|
|
{id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}},
|
|
{id: 4, type: 'row', gridPos: {x: 0, y: 2, h: 1 , w: 24}},
|
|
{id: 5, type: 'graph', gridPos: {x: 0, y: 3, h: 1 , w: 12}},
|
|
],
|
|
templating: {
|
|
list: [{
|
|
name: 'apps',
|
|
current: {
|
|
text: 'se1, se2',
|
|
value: ['se1', 'se2']
|
|
},
|
|
options: [
|
|
{text: 'se1', value: 'se1', selected: true},
|
|
{text: 'se2', value: 'se2', selected: true},
|
|
{text: 'se3', value: 'se3', selected: false}
|
|
]
|
|
}]
|
|
}
|
|
};
|
|
dashboard = new DashboardModel(dashboardJSON);
|
|
dashboard.processRepeats();
|
|
});
|
|
|
|
it('should not repeat only row', function() {
|
|
const panel_types = _.map(dashboard.panels, 'type');
|
|
expect(panel_types).toEqual([
|
|
'row', 'graph', 'graph',
|
|
'row', 'graph', 'graph',
|
|
'row', 'graph'
|
|
]);
|
|
});
|
|
|
|
it('should set scopedVars for each panel', function() {
|
|
dashboardJSON.templating.list[0].options[2].selected = true;
|
|
dashboard = new DashboardModel(dashboardJSON);
|
|
dashboard.processRepeats();
|
|
|
|
expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}});
|
|
expect(dashboard.panels[4].scopedVars).toMatchObject({apps: {text: 'se2', value: 'se2'}});
|
|
|
|
const scopedVars = _.compact(_.map(dashboard.panels, (panel) => {
|
|
return panel.scopedVars ? panel.scopedVars.apps.value : null;
|
|
}));
|
|
|
|
expect(scopedVars).toEqual([
|
|
'se1', 'se1', 'se1',
|
|
'se2', 'se2', 'se2',
|
|
'se3', 'se3', 'se3',
|
|
]);
|
|
});
|
|
|
|
it('should repeat only configured row', function() {
|
|
expect(dashboard.panels[6].id).toBe(4);
|
|
expect(dashboard.panels[7].id).toBe(5);
|
|
});
|
|
|
|
it('should repeat only row if it is collapsed', function() {
|
|
dashboardJSON.panels = [
|
|
{
|
|
id: 1, type: 'row', collapsed: true, repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24},
|
|
panels: [
|
|
{id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}},
|
|
{id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}},
|
|
]
|
|
},
|
|
{id: 4, type: 'row', gridPos: {x: 0, y: 1, h: 1 , w: 24}},
|
|
{id: 5, type: 'graph', gridPos: {x: 0, y: 2, h: 1 , w: 12}},
|
|
];
|
|
dashboard = new DashboardModel(dashboardJSON);
|
|
dashboard.processRepeats();
|
|
|
|
const panel_types = _.map(dashboard.panels, 'type');
|
|
expect(panel_types).toEqual([
|
|
'row', 'row', 'row', 'graph'
|
|
]);
|
|
expect(dashboard.panels[0].panels).toHaveLength(2);
|
|
expect(dashboard.panels[1].panels).toHaveLength(2);
|
|
});
|
|
|
|
it('should properly repeat multiple rows', function() {
|
|
dashboardJSON.panels = [
|
|
{id: 1, type: 'row', gridPos: {x: 0, y: 0, h: 1 , w: 24}, repeat: 'apps'}, // repeat
|
|
{id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}},
|
|
{id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}},
|
|
{id: 4, type: 'row', gridPos: {x: 0, y: 2, h: 1 , w: 24}}, // don't touch
|
|
{id: 5, type: 'graph', gridPos: {x: 0, y: 3, h: 1 , w: 12}},
|
|
{id: 6, type: 'row', gridPos: {x: 0, y: 4, h: 1 , w: 24}, repeat: 'hosts'}, // repeat
|
|
{id: 7, type: 'graph', gridPos: {x: 0, y: 5, h: 1 , w: 6}},
|
|
{id: 8, type: 'graph', gridPos: {x: 6, y: 5, h: 1 , w: 6}}
|
|
];
|
|
dashboardJSON.templating.list.push({
|
|
name: 'hosts',
|
|
current: {
|
|
text: 'backend01, backend02',
|
|
value: ['backend01', 'backend02']
|
|
},
|
|
options: [
|
|
{text: 'backend01', value: 'backend01', selected: true},
|
|
{text: 'backend02', value: 'backend02', selected: true},
|
|
{text: 'backend03', value: 'backend03', selected: false}
|
|
]
|
|
});
|
|
dashboard = new DashboardModel(dashboardJSON);
|
|
dashboard.processRepeats();
|
|
|
|
const panel_types = _.map(dashboard.panels, 'type');
|
|
expect(panel_types).toEqual([
|
|
'row', 'graph', 'graph',
|
|
'row', 'graph', 'graph',
|
|
'row', 'graph',
|
|
'row', 'graph', 'graph',
|
|
'row', 'graph', 'graph',
|
|
]);
|
|
|
|
expect(dashboard.panels[0].scopedVars['apps'].value).toBe('se1');
|
|
expect(dashboard.panels[1].scopedVars['apps'].value).toBe('se1');
|
|
expect(dashboard.panels[3].scopedVars['apps'].value).toBe('se2');
|
|
expect(dashboard.panels[4].scopedVars['apps'].value).toBe('se2');
|
|
expect(dashboard.panels[8].scopedVars['hosts'].value).toBe('backend01');
|
|
expect(dashboard.panels[9].scopedVars['hosts'].value).toBe('backend01');
|
|
expect(dashboard.panels[11].scopedVars['hosts'].value).toBe('backend02');
|
|
expect(dashboard.panels[12].scopedVars['hosts'].value).toBe('backend02');
|
|
});
|
|
|
|
it('should assign unique ids for repeated panels', function() {
|
|
dashboardJSON.panels = [
|
|
{
|
|
id: 1, type: 'row', collapsed: true, repeat: 'apps', gridPos: {x: 0, y: 0, h: 1 , w: 24},
|
|
panels: [
|
|
{id: 2, type: 'graph', gridPos: {x: 0, y: 1, h: 1 , w: 6}},
|
|
{id: 3, type: 'graph', gridPos: {x: 6, y: 1, h: 1 , w: 6}},
|
|
]
|
|
},
|
|
{id: 4, type: 'row', gridPos: {x: 0, y: 1, h: 1 , w: 24}},
|
|
{id: 5, type: 'graph', gridPos: {x: 0, y: 2, h: 1 , w: 12}},
|
|
];
|
|
dashboard = new DashboardModel(dashboardJSON);
|
|
dashboard.processRepeats();
|
|
|
|
const panel_ids = _.flattenDeep(_.map(dashboard.panels, (panel) => {
|
|
let ids = [];
|
|
if (panel.panels && panel.panels.length) {
|
|
ids = _.map(panel.panels, 'id');
|
|
}
|
|
ids.push(panel.id);
|
|
return ids;
|
|
}));
|
|
expect(panel_ids.length).toEqual(_.uniq(panel_ids).length);
|
|
});
|
|
});
|
|
|
|
|