Skip to content

N
nexpie-grafana-theme
Commit e5a6cb62 by Torkel Ödegaard
Options

newgrid: added constants, changed grid to 24 cols, added tests for panel repeats

parent 9fb4f619
Showing with 262 additions and 396 deletions
public/app/core/constants.ts 0 → 100644
export const GRID_CELL_HEIGHT = 20;
export const GRID_CELL_VMARGIN = 10;
export const GRID_COLUMN_COUNT = 24;
public/app/features/dashboard/dashboard_model.ts
import moment from 'moment';
import _ from 'lodash';
import {GRID_COLUMN_COUNT, GRID_CELL_HEIGHT} from 'app/core/constants';
import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
import {Emitter, contextSrv} from 'app/core/core';
import {DashboardRow} from './row/row_model';
import {PanelModel} from './panel_model';
import sortByKeys from 'app/core/utils/sort_by_keys';
export const CELL_HEIGHT = 30;
export const CELL_VMARGIN = 10;
export const COL_COUNT = 12;
import {DashboardRow} from './row/row_model';
import {PanelModel} from './panel_model';
export class DashboardModel {
id: any;
......@@ -48,10 +46,10 @@ export class DashboardModel {
events: Emitter;
static nonPersistedProperties: {[str: string]: boolean} = {
"events": true,
"meta": true,
"panels": true, // needs special handling
"templating": true, // needs special handling
events: true,
meta: true,
panels: true, // needs special handling
templating: true, // needs special handling
};
constructor(data, meta?) {
......@@ -66,12 +64,12 @@ export class DashboardModel {
this.autoUpdate = data.autoUpdate;
this.description = data.description;
this.tags = data.tags || [];
this.style = data.style || "dark";
this.style = data.style || 'dark';
this.timezone = data.timezone || '';
this.editable = data.editable !== false;
this.graphTooltip = data.graphTooltip || 0;
this.hideControls = data.hideControls || false;
this.time = data.time || { from: 'now-6h', to: 'now' };
this.time = data.time || {from: 'now-6h', to: 'now'};
this.timepicker = data.timepicker || {};
this.templating = this.ensureListExist(data.templating);
this.annotations = this.ensureListExist(data.annotations);
......@@ -144,7 +142,7 @@ export class DashboardModel {
// get variable save models
copy.templating = {
list: _.map(this.templating.list, variable => variable.getSaveModel ? variable.getSaveModel() : variable),
list: _.map(this.templating.list, variable => (variable.getSaveModel ? variable.getSaveModel() : variable)),
};
// get panel save models
......@@ -166,17 +164,24 @@ export class DashboardModel {
}
private ensureListExist(data) {
if (!data) { data = {}; }
if (!data.list) { data.list = []; }
if (!data) {
data = {};
}
if (!data.list) {
data.list = [];
}
return data;
}
getNextPanelId() {
var j, panel, max = 0;
for (j = 0; j < this.panels.length; j++) {
panel = this.panels[j];
if (panel.id > max) { max = panel.id; }
let max = 0;
for (let panel of this.panels) {
if (panel.id > max) {
max = panel.id;
}
}
return max + 1;
}
......@@ -225,9 +230,13 @@ export class DashboardModel {
}
this.iteration = (this.iteration || new Date().getTime()) + 1;
let panelsToRemove = [];
// cleanup scopedVars
for (let panel of this.panels) {
delete panel.scopedVars;
}
for (let panel of this.panels) {
if (panel.repeat) {
if (!cleanUpOnly) {
......@@ -263,7 +272,9 @@ export class DashboardModel {
repeatPanel(panel: PanelModel) {
var variable = _.find(this.templating.list, {name: panel.repeat});
if (!variable) { return; }
if (!variable) {
return;
}
var selected;
if (variable.current.text === 'All') {
......@@ -276,7 +287,7 @@ export class DashboardModel {
var option = selected[index];
var copy = this.getRepeatClone(panel, index);
copy.scopedVars = copy.scopedVars || {};
copy.scopedVars = {};
copy.scopedVars[variable.name] = option;
// souce panel uses original possition
......@@ -285,9 +296,9 @@ export class DashboardModel {
}
if (panel.repeatDirection === 'Y') {
copy.gridPos.y = panel.gridPos.y + (panel.gridPos.h*index);
copy.gridPos.y = panel.gridPos.y + panel.gridPos.h * index;
} else {
copy.gridPos.x = panel.gridPos.x + (panel.gridPos.w*index);
copy.gridPos.x = panel.gridPos.x + panel.gridPos.w * index;
}
}
}
......@@ -304,46 +315,39 @@ export class DashboardModel {
updateSubmenuVisibility() {
this.meta.submenuEnabled = (() => {
if (this.links.length > 0) { return true; }
if (this.links.length > 0) {
return true;
}
var visibleVars = _.filter(this.templating.list, variable => variable.hide !== 2);
if (visibleVars.length > 0) { return true; }
if (visibleVars.length > 0) {
return true;
}
var visibleAnnotations = _.filter(this.annotations.list, annotation => annotation.hide !== true);
if (visibleAnnotations.length > 0) { return true; }
if (visibleAnnotations.length > 0) {
return true;
}
return false;
})();
}
getPanelInfoById(panelId) {
var result: any = {};
_.each(this.rows, function(row) {
_.each(row.panels, function(panel, index) {
if (panel.id === panelId) {
result.panel = panel;
result.row = row;
result.index = index;
for (let i = 0; i < this.panels.length; i++) {
if (this.panels[i].id === panelId) {
return {
panel: this.panels[i],
index: i,
};
}
});
});
_.each(this.panels, function(panel, index) {
if (panel.id === panelId) {
result.panel = panel;
result.index = index;
}
});
if (!result.panel) {
return null;
}
return result;
}
duplicatePanel(panel) {
const newPanel = _.cloneDeep(panel.getSaveModel());
const newPanel = panel.getSaveModel();
newPanel.id = this.getNextPanelId();
delete newPanel.repeat;
......@@ -356,7 +360,7 @@ export class DashboardModel {
delete newPanel.alert;
// does it fit to the right?
if (panel.gridPos.x + (panel.gridPos.w*2) <= COL_COUNT) {
if (panel.gridPos.x + panel.gridPos.w * 2 <= GRID_COLUMN_COUNT) {
newPanel.gridPos.x += panel.gridPos.w;
} else {
// add bellow
......@@ -372,9 +376,7 @@ export class DashboardModel {
format = format || 'YYYY-MM-DD HH:mm:ss';
let timezone = this.getTimezone();
return timezone === 'browser' ?
moment(date).format(format) :
moment.utc(date).format(format);
return timezone === 'browser' ? moment(date).format(format) : moment.utc(date).format(format);
}
destroy() {
......@@ -407,9 +409,7 @@ export class DashboardModel {
getRelativeTime(date) {
date = moment.isMoment(date) ? date : moment(date);
return this.timezone === 'browser' ?
moment(date).fromNow() :
moment.utc(date).fromNow();
return this.timezone === 'browser' ? moment(date).fromNow() : moment.utc(date).fromNow();
}
getNextQueryLetter(panel) {
......@@ -442,7 +442,6 @@ export class DashboardModel {
// version 2 schema changes
if (oldVersion < 2) {
if (old.services) {
if (old.services.filter) {
this.time = old.services.filter.time;
......@@ -460,7 +459,9 @@ export class DashboardModel {
return;
}
if (_.isBoolean(panel.legend)) { panel.legend = { show: panel.legend }; }
if (_.isBoolean(panel.legend)) {
panel.legend = {show: panel.legend};
}
if (panel.grid) {
if (panel.grid.min) {
......@@ -502,9 +503,11 @@ export class DashboardModel {
if (oldVersion < 4) {
// move aliasYAxis changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'graph') { return; }
if (panel.type !== 'graph') {
return;
}
_.each(panel.aliasYAxis, function(value, key) {
panel.seriesOverrides = [{ alias: key, yaxis: value }];
panel.seriesOverrides = [{alias: key, yaxis: value}];
});
delete panel.aliasYAxis;
});
......@@ -512,7 +515,7 @@ export class DashboardModel {
if (oldVersion < 6) {
// move pulldowns to new schema
var annotations = _.find(old.pulldowns, { type: 'annotations' });
var annotations = _.find(old.pulldowns, {type: 'annotations'});
if (annotations) {
this.annotations = {
......@@ -521,12 +524,20 @@ export class DashboardModel {
}
// update template variables
for (i = 0 ; i < this.templating.list.length; i++) {
for (i = 0; i < this.templating.list.length; i++) {
var variable = this.templating.list[i];
if (variable.datasource === void 0) { variable.datasource = null; }
if (variable.type === 'filter') { variable.type = 'query'; }
if (variable.type === void 0) { variable.type = 'query'; }
if (variable.allFormat === void 0) { variable.allFormat = 'glob'; }
if (variable.datasource === void 0) {
variable.datasource = null;
}
if (variable.type === 'filter') {
variable.type = 'query';
}
if (variable.type === void 0) {
variable.type = 'query';
}
if (variable.allFormat === void 0) {
variable.allFormat = 'glob';
}
}
}
......@@ -537,11 +548,14 @@ export class DashboardModel {
// ensure query refIds
panelUpgrades.push(function(panel) {
_.each(panel.targets, function(target) {
_.each(
panel.targets,
function(target) {
if (!target.refId) {
target.refId = this.getNextQueryLetter(panel);
}
}.bind(this));
}.bind(this),
);
});
}
......@@ -592,14 +606,16 @@ export class DashboardModel {
if (oldVersion < 9) {
// move aliasYAxis changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'singlestat' && panel.thresholds !== "") { return; }
if (panel.type !== 'singlestat' && panel.thresholds !== '') {
return;
}
if (panel.thresholds) {
var k = panel.thresholds.split(",");
var k = panel.thresholds.split(',');
if (k.length >= 3) {
k.shift();
panel.thresholds = k.join(",");
panel.thresholds = k.join(',');
}
}
});
......@@ -609,7 +625,9 @@ export class DashboardModel {
if (oldVersion < 10) {
// move aliasYAxis changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'table') { return; }
if (panel.type !== 'table') {
return;
}
_.each(panel.styles, function(style) {
if (style.thresholds && style.thresholds.length >= 3) {
......@@ -624,8 +642,12 @@ export class DashboardModel {
if (oldVersion < 12) {
// update template variables
_.each(this.templating.list, function(templateVariable) {
if (templateVariable.refresh) { templateVariable.refresh = 1; }
if (!templateVariable.refresh) { templateVariable.refresh = 0; }
if (templateVariable.refresh) {
templateVariable.refresh = 1;
}
if (!templateVariable.refresh) {
templateVariable.refresh = 0;
}
if (templateVariable.hideVariable) {
templateVariable.hide = 2;
} else if (templateVariable.hideLabel) {
......@@ -637,8 +659,12 @@ export class DashboardModel {
if (oldVersion < 12) {
// update graph yaxes changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'graph') { return; }
if (!panel.grid) { return; }
if (panel.type !== 'graph') {
return;
}
if (!panel.grid) {
return;
}
if (!panel.yaxes) {
panel.yaxes = [
......@@ -657,7 +683,7 @@ export class DashboardModel {
logBase: panel.grid.rightLogBase,
format: panel.y_formats[1],
label: panel.rightYAxisLabel,
}
},
];
panel.xaxis = {
......@@ -682,11 +708,16 @@ export class DashboardModel {
if (oldVersion < 13) {
// update graph yaxes changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'graph') { return; }
if (!panel.grid) { return; }
if (panel.type !== 'graph') {
return;
}
if (!panel.grid) {
return;
}
panel.thresholds = [];
var t1: any = {}, t2: any = {};
var t1: any = {},
t2: any = {};
if (panel.grid.threshold1 !== null) {
t1.value = panel.grid.threshold1;
......@@ -760,6 +791,7 @@ export class DashboardModel {
upgradeToGridLayout(old) {
let yPos = 0;
let widthFactor = GRID_COLUMN_COUNT / 12;
//let rowIds = 1000;
//
......@@ -789,15 +821,17 @@ export class DashboardModel {
height = parseInt(height.replace('px', ''), 10);
}
const rowGridHeight = Math.ceil(height / CELL_HEIGHT);
const rowGridHeight = Math.ceil(height / GRID_CELL_HEIGHT);
for (let panel of row.panels) {
const panelWidth = Math.floor(panel.span) * widthFactor;
// should wrap to next row?
if (xPos + panel.span >= 12) {
if (xPos + panelWidth >= GRID_COLUMN_COUNT) {
yPos += rowGridHeight;
}
panel.gridPos = { x: xPos, y: yPos, w: panel.span, h: rowGridHeight };
panel.gridPos = {x: xPos, y: yPos, w: panelWidth, h: rowGridHeight};
delete panel.span;
......@@ -808,6 +842,5 @@ export class DashboardModel {
yPos += rowGridHeight;
}
}
}
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
import React from 'react';
import coreModule from 'app/core/core_module';
import ReactGridLayout from 'react-grid-layout';
import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard_model';
import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT} from 'app/core/constants';
import {DashboardPanel} from './DashboardPanel';
import {DashboardModel} from '../dashboard_model';
import {PanelContainer} from './PanelContainer';
......@@ -9,7 +9,6 @@ import {PanelModel} from '../panel_model';
import classNames from 'classnames';
import sizeMe from 'react-sizeme';
const COLUMN_COUNT = 12;
let lastGridWidth = 1200;
function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
......@@ -32,9 +31,9 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
measureBeforeMount={false}
containerPadding={[0, 0]}
useCSSTransforms={false}
margin={[CELL_VMARGIN, CELL_VMARGIN]}
cols={COLUMN_COUNT}
rowHeight={CELL_HEIGHT}
margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
cols={GRID_COLUMN_COUNT}
rowHeight={GRID_CELL_HEIGHT}
draggableHandle=".grid-drag-handle"
layout={layout}
onResize={onResize}
......
public/app/features/dashboard/repeat_option/repeat_option.ts
///<reference path="../../../headers/common.d.ts" />
import {coreModule} from 'app/core/core';
var template = `
<div class="gf-form-select-wrapper max-width-13">
<select class="gf-form-input" ng-model="model.repeat" ng-options="f.value as f.text for f in variables">
<option value=""></option>
<select class="gf-form-input" ng-model="model.repeat" ng-options="f.value as f.text for f in variables" ng-change="optionChanged()">
<option value=""></option>
</div>
`;
......@@ -29,6 +27,17 @@ function dashRepeatOptionDirective(variableSrv) {
}
scope.variables.unshift({text: 'Disabled', value: null});
// if repeat is set and no direction set to horizontal
if (scope.panel.repeat && !scope.panel.repeatDirection) {
scope.panel.repeatDirection = 'h';
}
scope.optionChanged = function() {
if (scope.panel.repeat) {
scope.panel.repeatDirection = 'h';
}
};
}
};
}
......
public/app/features/dashboard/specs/dashboard_model_specs.ts
......@@ -400,20 +400,126 @@ describe('DashboardModel', function() {
});
describe('updateSubmenuVisibility with hidden annotation toggle', function() {
var model;
var dashboard;
beforeEach(function() {
model = new DashboardModel({
dashboard = new DashboardModel({
annotations: {
list: [{hide: true}]
}
});
model.updateSubmenuVisibility();
dashboard.updateSubmenuVisibility();
});
it('should not enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(false);
expect(dashboard.meta.submenuEnabled).to.be(false);
});
});
describe('given dashboard with panel repeat', function(ctx) {
var dashboard;
beforeEach(function() {
dashboard = new DashboardModel({
panels: [{id: 2, repeat: 'apps'}],
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).to.be(3);
});
it('should mark panel repeated', function() {
expect(dashboard.panels[0].repeat).to.be('apps');
expect(dashboard.panels[1].repeatPanelId).to.be(2);
});
it('should set scopedVars on panels', function() {
expect(dashboard.panels[0].scopedVars.apps.value).to.be('se1');
expect(dashboard.panels[1].scopedVars.apps.value).to.be('se2');
expect(dashboard.panels[2].scopedVars.apps.value).to.be('se3');
});
describe('After a second iteration', function() {
var repeatedPanelAfterIteration1;
beforeEach(function() {
repeatedPanelAfterIteration1 = dashboard.panels[1];
dashboard.panels[0].fill = 10;
dashboard.processRepeats();
});
it('reused panel should copy properties from source', function() {
expect(dashboard.panels[1].fill).to.be(10);
});
it('should have same panel count', function() {
expect(dashboard.panels.length).to.be(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).to.be(undefined);
});
it('should have new variable value in scopedVars', function() {
expect(dashboard.panels[0].scopedVars.server.value).to.be("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).to.be(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).to.be(1);
});
it('should remove scoped vars from reused panel', function() {
expect(dashboard.panels[0].scopedVars).to.be(undefined);
});
});
});
});
public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts deleted 100644 → 0
// import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
//
// import '../dashboard_srv';
// import {DynamicDashboardSrv} from '../dynamic_dashboard_srv';
//
// function dynamicDashScenario(desc, func) {
//
// describe.skip(desc, function() {
// var ctx: any = {};
//
// ctx.setup = function (setupFunc) {
//
// beforeEach(angularMocks.module('grafana.core'));
// beforeEach(angularMocks.module('grafana.services'));
// beforeEach(angularMocks.module(function($provide) {
// $provide.value('contextSrv', {
// user: { timezone: 'utc'}
// });
// }));
//
// beforeEach(angularMocks.inject(function(dashboardSrv) {
// ctx.dashboardSrv = dashboardSrv;
//
// var model = {
// rows: [],
// templating: { list: [] }
// };
//
// setupFunc(model);
// ctx.dash = ctx.dashboardSrv.create(model);
// ctx.dynamicDashboardSrv = new DynamicDashboardSrv();
// ctx.dynamicDashboardSrv.init(ctx.dash);
// ctx.dynamicDashboardSrv.process();
// ctx.rows = ctx.dash.rows;
// }));
// };
//
// func(ctx);
// });
// }
//
// dynamicDashScenario('given dashboard with panel repeat', function(ctx) {
// ctx.setup(function(dash) {
// dash.rows.push({
// panels: [{id: 2, repeat: 'apps'}]
// });
// dash.templating.list.push({
// 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}
// ]
// });
// });
//
// it('should repeat panel one time', function() {
// expect(ctx.rows[0].panels.length).to.be(3);
// });
//
// it('should mark panel repeated', function() {
// expect(ctx.rows[0].panels[0].repeat).to.be('apps');
// expect(ctx.rows[0].panels[1].repeatPanelId).to.be(2);
// });
//
// it('should set scopedVars on panels', function() {
// expect(ctx.rows[0].panels[0].scopedVars.apps.value).to.be('se1');
// expect(ctx.rows[0].panels[1].scopedVars.apps.value).to.be('se2');
// expect(ctx.rows[0].panels[2].scopedVars.apps.value).to.be('se3');
// });
//
// describe('After a second iteration', function() {
// var repeatedPanelAfterIteration1;
//
// beforeEach(function() {
// repeatedPanelAfterIteration1 = ctx.rows[0].panels[1];
// ctx.rows[0].panels[0].fill = 10;
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should have reused same panel instances', function() {
// expect(ctx.rows[0].panels[1]).to.be(repeatedPanelAfterIteration1);
// });
//
// it('reused panel should copy properties from source', function() {
// expect(ctx.rows[0].panels[1].fill).to.be(10);
// });
//
// it('should have same panel count', function() {
// expect(ctx.rows[0].panels.length).to.be(3);
// });
// });
//
// describe('After a second iteration with different variable', function() {
// beforeEach(function() {
// ctx.dash.templating.list.push({
// name: 'server',
// current: { text: 'se1, se2, se3', value: ['se1']},
// options: [{text: 'se1', value: 'se1', selected: true}]
// });
// ctx.rows[0].panels[0].repeat = "server";
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should remove scopedVars value for last variable', function() {
// expect(ctx.rows[0].panels[0].scopedVars.apps).to.be(undefined);
// });
//
// it('should have new variable value in scopedVars', function() {
// expect(ctx.rows[0].panels[0].scopedVars.server.value).to.be("se1");
// });
// });
//
// describe('After a second iteration and selected values reduced', function() {
// beforeEach(function() {
// ctx.dash.templating.list[0].options[1].selected = false;
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should clean up repeated panel', function() {
// expect(ctx.rows[0].panels.length).to.be(2);
// });
// });
//
// describe('After a second iteration and panel repeat is turned off', function() {
// beforeEach(function() {
// ctx.rows[0].panels[0].repeat = null;
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should clean up repeated panel', function() {
// expect(ctx.rows[0].panels.length).to.be(1);
// });
//
// it('should remove scoped vars from reused panel', function() {
// expect(ctx.rows[0].panels[0].scopedVars).to.be(undefined);
// });
// });
//
// });
//
// dynamicDashScenario('given dashboard with row repeat', function(ctx) {
// ctx.setup(function(dash) {
// dash.rows.push({
// repeat: 'servers',
// panels: [{id: 2}]
// });
// dash.rows.push({panels: []});
// dash.templating.list.push({
// name: 'servers',
// current: {
// text: 'se1, se2',
// value: ['se1', 'se2']
// },
// options: [
// {text: 'se1', value: 'se1', selected: true},
// {text: 'se2', value: 'se2', selected: true},
// ]
// });
// });
//
// it('should repeat row one time', function() {
// expect(ctx.rows.length).to.be(3);
// });
//
// it('should keep panel ids on first row', function() {
// expect(ctx.rows[0].panels[0].id).to.be(2);
// });
//
// it('should keep first row as repeat', function() {
// expect(ctx.rows[0].repeat).to.be('servers');
// });
//
// it('should clear repeat field on repeated row', function() {
// expect(ctx.rows[1].repeat).to.be(null);
// });
//
// it('should add scopedVars to rows', function() {
// expect(ctx.rows[0].scopedVars.servers.value).to.be('se1');
// expect(ctx.rows[1].scopedVars.servers.value).to.be('se2');
// });
//
// it('should generate a repeartRowId based on repeat row index', function() {
// expect(ctx.rows[1].repeatRowId).to.be(1);
// expect(ctx.rows[1].repeatIteration).to.be(ctx.dynamicDashboardSrv.iteration);
// });
//
// it('should set scopedVars on row panels', function() {
// expect(ctx.rows[0].panels[0].scopedVars.servers.value).to.be('se1');
// expect(ctx.rows[1].panels[0].scopedVars.servers.value).to.be('se2');
// });
//
// describe('After a second iteration', function() {
// var repeatedRowAfterFirstIteration;
//
// beforeEach(function() {
// repeatedRowAfterFirstIteration = ctx.rows[1];
// ctx.rows[0].height = 500;
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should still only have 2 rows', function() {
// expect(ctx.rows.length).to.be(3);
// });
//
// it.skip('should have updated props from source', function() {
// expect(ctx.rows[1].height).to.be(500);
// });
//
// it('should reuse row instance', function() {
// expect(ctx.rows[1]).to.be(repeatedRowAfterFirstIteration);
// });
// });
//
// describe('After a second iteration and selected values reduced', function() {
// beforeEach(function() {
// ctx.dash.templating.list[0].options[1].selected = false;
// ctx.dynamicDashboardSrv.process();
// });
//
// it('should remove repeated second row', function() {
// expect(ctx.rows.length).to.be(2);
// });
// });
// });
//
// dynamicDashScenario('given dashboard with row repeat and panel repeat', function(ctx) {
// ctx.setup(function(dash) {
// dash.rows.push({
// repeat: 'servers',
// panels: [{id: 2, repeat: 'metric'}]
// });
// dash.templating.list.push({
// name: 'servers',
// current: { text: 'se1, se2', value: ['se1', 'se2'] },
// options: [
// {text: 'se1', value: 'se1', selected: true},
// {text: 'se2', value: 'se2', selected: true},
// ]
// });
// dash.templating.list.push({
// name: 'metric',
// current: { text: 'm1, m2', value: ['m1', 'm2'] },
// options: [
// {text: 'm1', value: 'm1', selected: true},
// {text: 'm2', value: 'm2', selected: true},
// ]
// });
// });
//
// it('should repeat row one time', function() {
// expect(ctx.rows.length).to.be(2);
// });
//
// it('should repeat panel on both rows', function() {
// expect(ctx.rows[0].panels.length).to.be(2);
// expect(ctx.rows[1].panels.length).to.be(2);
// });
//
// it('should keep panel ids on first row', function() {
// expect(ctx.rows[0].panels[0].id).to.be(2);
// });
//
// it('should mark second row as repeated', function() {
// expect(ctx.rows[0].repeat).to.be('servers');
// });
//
// it('should clear repeat field on repeated row', function() {
// expect(ctx.rows[1].repeat).to.be(null);
// });
//
// it('should generate a repeartRowId based on repeat row index', function() {
// expect(ctx.rows[1].repeatRowId).to.be(1);
// });
//
// it('should set scopedVars on row panels', function() {
// expect(ctx.rows[0].panels[0].scopedVars.servers.value).to.be('se1');
// expect(ctx.rows[1].panels[0].scopedVars.servers.value).to.be('se2');
// });
//
// });
public/app/features/panel/panel_ctrl.ts
......@@ -3,7 +3,7 @@ import _ from 'lodash';
import $ from 'jquery';
import {appEvents, profiler} from 'app/core/core';
import Remarkable from 'remarkable';
import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/dashboard_model';
import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
const TITLE_HEIGHT = 25;
const EMPTY_TITLE_HEIGHT = 9;
......@@ -163,7 +163,7 @@ export class PanelCtrl {
var fullscreenHeight = Math.floor(docHeight * 0.8);
this.containerHeight = this.editMode ? editHeight : fullscreenHeight;
} else {
this.containerHeight = this.panel.gridPos.h * CELL_HEIGHT + ((this.panel.gridPos.h-1) * CELL_VMARGIN);
this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
}
this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
......
public/app/partials/panelgeneral.html
......@@ -9,24 +9,24 @@
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" placeholder="Panel description, supports markdown & links"></textarea>
</div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
<h5 class="section-heading">Repeat</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Repeat Panel</span>
<span class="gf-form-label width-9">For each value of</span>
<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Min width</span>
<div class="gf-form" ng-show="ctrl.panel.repeat">
<span class="gf-form-label width-9">Min width</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option>
</select>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Direction</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f for f in ['X', 'Y']">
<div class="gf-form" ng-show="ctrl.panel.repeat">
<span class="gf-form-label width-9">Direction</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f.value as f.text for f in [{value: 'v', text: 'Vertical'}, {value: 'h', text: 'Horizontal'}]">
<option value=""></option>
</select>
</div>
......
public/dashboards/home.json
......@@ -21,8 +21,8 @@
"transparent": true,
"type": "text",
"gridPos": {
"w": 12,
"h": 2,
"w": 24,
"h": 3,
"x": 0,
"y": 0
}
......@@ -42,7 +42,7 @@
"transparent": false,
"type": "dashlist",
"gridPos": {
"w": 7,
"w": 12,
"h": 17,
"x": 0,
"y": 6
......@@ -57,9 +57,9 @@
"transparent": false,
"type": "pluginlist",
"gridPos": {
"w": 5,
"w": 12,
"h": 17,
"x": 7,
"x": 12,
"y": 6
}
}
......
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