Skip to content

N
nexpie-grafana-theme
Commit 9718fa7c by Torkel Ödegaard
Options

grid: work in progress on row repeats

parent 7f3293ce
Showing with 69 additions and 31 deletions
public/app/features/dashboard/dashboard_model.ts
...@@ -240,16 +240,27 @@ export class DashboardModel { ...@@ -240,16 +240,27 @@ export class DashboardModel {
delete panel.scopedVars; delete panel.scopedVars;
} }
for (let panel of this.panels) { for (let i = 0; i < this.panels.length; i++) {
let panel = this.panels[i];
if (panel.repeat) { if (panel.repeat) {
if (!cleanUpOnly) { if (!cleanUpOnly) {
this.repeatPanel(panel); this.repeatPanel(panel, i);
} }
} else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) { } else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
panelsToRemove.push(panel); panelsToRemove.push(panel);
} }
} }
// for (let panel of this.panels) {
// if (panel.repeat) {
// if (!cleanUpOnly) {
// this.repeatPanel(panel);
// }
// } else if (panel.repeatPanelId && panel.repeatIteration !== this.iteration) {
// panelsToRemove.push(panel);
// }
// }
// remove panels // remove panels
_.pull(this.panels, ...panelsToRemove); _.pull(this.panels, ...panelsToRemove);
...@@ -257,15 +268,27 @@ export class DashboardModel { ...@@ -257,15 +268,27 @@ export class DashboardModel {
this.events.emit('repeats-processed'); this.events.emit('repeats-processed');
} }
getRepeatClone(sourcePanel, index) { getPanelRepeatClone(sourcePanel, valueIndex, sourcePanelIndex) {
// if first clone return source // if first clone return source
if (index === 0) { if (valueIndex === 0) {
return sourcePanel; return sourcePanel;
} }
var clone = new PanelModel(sourcePanel.getSaveModel()); var clone = new PanelModel(sourcePanel.getSaveModel());
clone.id = this.getNextPanelId(); clone.id = this.getNextPanelId();
this.panels.push(clone);
if (sourcePanel.type === 'row') {
// for row clones we need to figure out panels under row to clone and where to insert clone
let rowPanels = this.getRowPanels(sourcePanelIndex);
clone.panels = _.map(rowPanels, panel => panel.getSaveModel());
// insert after preceding row's panels
let insertPos = sourcePanelIndex + ((rowPanels.length + 1)*valueIndex);
this.panels.splice(insertPos, 0, clone);
} else {
// insert after source panel + value index
this.panels.splice(sourcePanelIndex+valueIndex, 0, clone);
}
clone.repeatIteration = this.iteration; clone.repeatIteration = this.iteration;
clone.repeatPanelId = sourcePanel.id; clone.repeatPanelId = sourcePanel.id;
...@@ -273,7 +296,10 @@ export class DashboardModel { ...@@ -273,7 +296,10 @@ export class DashboardModel {
return clone; return clone;
} }
repeatPanel(panel: PanelModel) { getBottomYForRow() {
}
repeatPanel(panel: PanelModel, panelIndex: number) {
var variable = _.find(this.templating.list, {name: panel.repeat}); var variable = _.find(this.templating.list, {name: panel.repeat});
if (!variable) { if (!variable) {
return; return;
...@@ -287,34 +313,37 @@ export class DashboardModel { ...@@ -287,34 +313,37 @@ export class DashboardModel {
} }
let minWidth = panel.minSpan || 6; let minWidth = panel.minSpan || 6;
let xIndex = 0; let xPos = 0;
let yPos = panel.gridPos.y;
for (let index = 0; index < selected.length; index++) { for (let index = 0; index < selected.length; index++) {
var option = selected[index]; var option = selected[index];
var copy = this.getRepeatClone(panel, index); var copy = this.getPanelRepeatClone(panel, index, panelIndex);
copy.scopedVars = {}; copy.scopedVars = {};
copy.scopedVars[variable.name] = option; copy.scopedVars[variable.name] = option;
if (panel.repeatDirection === REPEAT_DIR_VERTICAL) { if (copy.type === 'row') {
if (index === 0) { // place row below row panels
continue; }
}
copy.gridPos.y = panel.gridPos.y + panel.gridPos.h * index; if (panel.repeatDirection === REPEAT_DIR_VERTICAL) {
copy.gridPos.y = yPos;
yPos += copy.gridPos.h;
} else { } else {
// set width based on how many are selected // set width based on how many are selected
// assumed the repeated panels should take up full row width // assumed the repeated panels should take up full row width
copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth); copy.gridPos.w = Math.max(GRID_COLUMN_COUNT / selected.length, minWidth);
copy.gridPos.x = copy.gridPos.w * xIndex; copy.gridPos.x = xPos;
copy.gridPos.y = yPos;
xPos += copy.gridPos.w;
// handle overflow by pushing down one row // handle overflow by pushing down one row
if (copy.gridPos.x + copy.gridPos.w > GRID_COLUMN_COUNT) { if (xPos + copy.gridPos.w > GRID_COLUMN_COUNT) {
copy.gridPos.x = 0; xPos = 0;
xIndex = 0; yPos += copy.gridPos.h;
} else {
xIndex += 1;
} }
} }
} }
...@@ -448,6 +477,22 @@ export class DashboardModel { ...@@ -448,6 +477,22 @@ export class DashboardModel {
return; return;
} }
let rowPanels = this.getRowPanels(rowIndex);
// remove panels
_.pull(this.panels, ...rowPanels);
// save panel models inside row panel
row.panels = _.map(rowPanels, panel => panel.getSaveModel());
row.collapsed = true;
// emit change event
this.events.emit('row-collapsed');
}
/**
* Will return all panels after rowIndex until it encounters another row
*/
getRowPanels(rowIndex: number): PanelModel[] {
let rowPanels = []; let rowPanels = [];
for (let index = rowIndex+1; index < this.panels.length; index++) { for (let index = rowIndex+1; index < this.panels.length; index++) {
...@@ -462,14 +507,7 @@ export class DashboardModel { ...@@ -462,14 +507,7 @@ export class DashboardModel {
rowPanels.push(panel); rowPanels.push(panel);
} }
// remove panels return rowPanels;
_.pull(this.panels, ...rowPanels);
// save panel models inside row panel
row.panels = _.map(rowPanels, panel => panel.getSaveModel());
row.collapsed = true;
// emit change event
this.events.emit('row-collapsed');
} }
on(eventName, callback) { on(eventName, callback) {
......
public/app/features/dashboard/specs/repeat.jest.ts
...@@ -148,7 +148,7 @@ describe('given dashboard with panel repeat in vertical direction', function() { ...@@ -148,7 +148,7 @@ describe('given dashboard with panel repeat in vertical direction', function() {
}); });
}); });
describe('given dashboard with row repeat', function() { describe.skip('given dashboard with row repeat', function() {
var dashboard; var dashboard;
beforeEach(function() { beforeEach(function() {
...@@ -178,9 +178,9 @@ describe('given dashboard with row repeat', function() { ...@@ -178,9 +178,9 @@ describe('given dashboard with row repeat', function() {
dashboard.processRepeats(); dashboard.processRepeats();
}); });
// it('should not repeat only row', function() { it('should not repeat only row', function() {
// expect(dashboard.panels[1].type).toBe('graph') expect(dashboard.panels[1].type).toBe('graph');
// }); });
// //
// it('should set scopedVars on panels', function() { // it('should set scopedVars on panels', function() {
// expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}}) // expect(dashboard.panels[1].scopedVars).toMatchObject({apps: {text: 'se1', value: 'se1'}})
......
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