Commit 70005d3e by Torkel Ödegaard

grid: repeat refactoring and unit tests

parent e5a6cb62
......@@ -2,5 +2,6 @@
export const GRID_CELL_HEIGHT = 20;
export const GRID_CELL_VMARGIN = 10;
export const GRID_COLUMN_COUNT = 24;
export const REPEAT_DIR_VERTICAL = 'v';
import moment from 'moment';
import _ from 'lodash';
import {GRID_COLUMN_COUNT, GRID_CELL_HEIGHT} from 'app/core/constants';
import {GRID_COLUMN_COUNT, GRID_CELL_HEIGHT, REPEAT_DIR_VERTICAL} from 'app/core/constants';
import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
import {Emitter, contextSrv} from 'app/core/core';
import sortByKeys from 'app/core/utils/sort_by_keys';
......@@ -283,6 +283,9 @@ export class DashboardModel {
selected = _.filter(variable.options, {selected: true});
}
let minWidth = panel.minSpan || 6;
let xIndex = 0;
for (let index = 0; index < selected.length; index++) {
var option = selected[index];
var copy = this.getRepeatClone(panel, index);
......@@ -290,15 +293,26 @@ export class DashboardModel {
copy.scopedVars = {};
copy.scopedVars[variable.name] = option;
// souce panel uses original possition
if (panel.repeatDirection === REPEAT_DIR_VERTICAL) {
if (index === 0) {
continue;
}
if (panel.repeatDirection === 'Y') {
copy.gridPos.y = panel.gridPos.y + panel.gridPos.h * index;
} else {
copy.gridPos.x = panel.gridPos.x + panel.gridPos.w * index;
// set width based on how many are selected
// assumed the repeated panels should take up full row width
copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth);
copy.gridPos.x = copy.gridPos.w * xIndex;
// handle overflow by pushing down one row
if (copy.gridPos.x + copy.gridPos.w > GRID_COLUMN_COUNT) {
copy.gridPos.x = 0;
xIndex = 0;
} else {
xIndex += 1;
}
}
}
}
......
///<reference path="../../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
......
......@@ -21,10 +21,11 @@ export class PanelModel {
title: string;
alert?: any;
scopedVars?: any;
repeat?: any;
repeatIteration?: any;
repeatPanelId?: any;
repeatDirection?: any;
repeat?: string;
repeatIteration?: number;
repeatPanelId?: number;
repeatDirection?: string;
minSpan?: number;
// non persisted
fullscreen: boolean;
......
......@@ -416,12 +416,12 @@ describe('DashboardModel', function() {
});
});
describe('given dashboard with panel repeat', function(ctx) {
describe('given dashboard with panel repeat in horizontal direction', function(ctx) {
var dashboard;
beforeEach(function() {
dashboard = new DashboardModel({
panels: [{id: 2, repeat: 'apps'}],
panels: [{id: 2, repeat: 'apps', repeatDirection: 'h', gridPos: {x: 0, y: 0, h: 2, w: 24}}],
templating: {
list: [{
name: 'apps',
......@@ -456,6 +456,12 @@ describe('DashboardModel', function() {
expect(dashboard.panels[2].scopedVars.apps.value).to.be('se3');
});
it('should place on first row and adjust width so all fit', function() {
expect(dashboard.panels[0].gridPos).to.eql({x: 0, y: 0, h: 2, w: 8});
expect(dashboard.panels[1].gridPos).to.eql({x: 8, y: 0, h: 2, w: 8});
expect(dashboard.panels[2].gridPos).to.eql({x: 16, y: 0, h: 2, w: 8});
});
describe('After a second iteration', function() {
var repeatedPanelAfterIteration1;
......@@ -522,4 +528,36 @@ describe('DashboardModel', function() {
});
describe('given dashboard with panel repeat in vertical direction', function(ctx) {
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).to.eql({x: 5, y: 0, h: 2, w: 8});
expect(dashboard.panels[1].gridPos).to.eql({x: 5, y: 2, h: 2, w: 8});
expect(dashboard.panels[2].gridPos).to.eql({x: 5, y: 4, h: 2, w: 8});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment