Skip to content

N
nexpie-grafana-theme
Commit 770a21b3 by Torkel Ödegaard
Options

newgrid: worked panel duplicate

parent 48c8e4d6
Showing with 47 additions and 36 deletions
public/app/features/dashboard/DashboardModel.ts
import angular from 'angular';
import moment from 'moment'; import moment from 'moment';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery';
import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors'; import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
import {Emitter, contextSrv, appEvents} from 'app/core/core'; import {Emitter, contextSrv, appEvents} from 'app/core/core';
...@@ -11,6 +9,7 @@ import sortByKeys from 'app/core/utils/sort_by_keys'; ...@@ -11,6 +9,7 @@ import sortByKeys from 'app/core/utils/sort_by_keys';
export const CELL_HEIGHT = 30; export const CELL_HEIGHT = 30;
export const CELL_VMARGIN = 10; export const CELL_VMARGIN = 10;
export const COL_COUNT = 12;
export class DashboardModel { export class DashboardModel {
id: any; id: any;
...@@ -134,10 +133,9 @@ export class DashboardModel { ...@@ -134,10 +133,9 @@ export class DashboardModel {
this.panels = _.map(panels, panel => panel.getSaveModel()); this.panels = _.map(panels, panel => panel.getSaveModel());
// make clone // make clone
var copy = $.extend(true, {}, this); var copy = _.cloneDeep(this);
// sort clone // sort clone
copy = sortByKeys(copy); copy = sortByKeys(copy);
console.log(copy.panels);
// restore properties // restore properties
this.events = events; this.events = events;
...@@ -189,7 +187,18 @@ export class DashboardModel { ...@@ -189,7 +187,18 @@ export class DashboardModel {
addPanel(panel) { addPanel(panel) {
panel.id = this.getNextPanelId(); panel.id = this.getNextPanelId();
this.panels.unshift(new PanelModel(panel));
this.panels.push(new PanelModel(panel));
// make sure it's sorted by pos
this.panels.sort(function(panelA, panelB) {
if (panelA.gridPos.y === panelB.gridPos.y) {
return panelA.gridPos.x - panelB.gridPos.x;
} else {
return panelA.gridPos.y - panelB.gridPos.y;
}
});
this.events.emit('panel-added', panel); this.events.emit('panel-added', panel);
} }
...@@ -265,8 +274,8 @@ export class DashboardModel { ...@@ -265,8 +274,8 @@ export class DashboardModel {
return result; return result;
} }
duplicatePanel(panel, row) { duplicatePanel(panel) {
var newPanel = angular.copy(panel); const newPanel = _.cloneDeep(panel.getSaveModel());
newPanel.id = this.getNextPanelId(); newPanel.id = this.getNextPanelId();
delete newPanel.repeat; delete newPanel.repeat;
...@@ -278,7 +287,15 @@ export class DashboardModel { ...@@ -278,7 +287,15 @@ export class DashboardModel {
} }
delete newPanel.alert; delete newPanel.alert;
row.addPanel(newPanel); // does it fit to the right?
if (panel.gridPos.x + (panel.gridPos.w*2) <= COL_COUNT) {
newPanel.gridPos.x += panel.gridPos.w;
} else {
// add bellow
newPanel.gridPos.y += panel.gridPos.h;
}
this.addPanel(newPanel);
return newPanel; return newPanel;
} }
......
public/app/features/dashboard/PanelModel.ts
...@@ -19,12 +19,13 @@ export class PanelModel { ...@@ -19,12 +19,13 @@ export class PanelModel {
type: string; type: string;
title: string; title: string;
alert?: any; alert?: any;
scopedVars?: any;
repeat?: any;
// non persisted // non persisted
fullscreen: boolean; fullscreen: boolean;
isEditing: boolean; isEditing: boolean;
events: Emitter; events: Emitter;
scopedVars: any;
constructor(model) { constructor(model) {
this.events = new Emitter(); this.events = new Emitter();
......
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
...@@ -31,7 +31,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize ...@@ -31,7 +31,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
isResizable={true} isResizable={true}
measureBeforeMount={false} measureBeforeMount={false}
containerPadding={[0, 0]} containerPadding={[0, 0]}
useCSSTransforms={true} useCSSTransforms={false}
margin={[CELL_VMARGIN, CELL_VMARGIN]} margin={[CELL_VMARGIN, CELL_VMARGIN]}
cols={COLUMN_COUNT} cols={COLUMN_COUNT}
rowHeight={CELL_HEIGHT} rowHeight={CELL_HEIGHT}
...@@ -68,6 +68,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> { ...@@ -68,6 +68,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
// subscribe to dashboard events // subscribe to dashboard events
this.dashboard = this.panelContainer.getDashboard(); this.dashboard = this.panelContainer.getDashboard();
this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this)); this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
this.dashboard.on('panel-removed', this.triggerForceUpdate.bind(this));
this.dashboard.on('view-mode-changed', this.triggerForceUpdate.bind(this)); this.dashboard.on('view-mode-changed', this.triggerForceUpdate.bind(this));
} }
......
public/app/features/dashboard/specs/dashboard_model_specs.ts
...@@ -2,6 +2,7 @@ import {describe, beforeEach, it, expect} from 'test/lib/common'; ...@@ -2,6 +2,7 @@ import {describe, beforeEach, it, expect} from 'test/lib/common';
import _ from 'lodash'; import _ from 'lodash';
import {DashboardModel} from '../DashboardModel'; import {DashboardModel} from '../DashboardModel';
import {PanelModel} from '../PanelModel';
describe('DashboardModel', function() { describe('DashboardModel', function() {
...@@ -46,51 +47,42 @@ describe('DashboardModel', function() { ...@@ -46,51 +47,42 @@ describe('DashboardModel', function() {
var saveModel = model.getSaveModelClone(); var saveModel = model.getSaveModelClone();
var keys = _.keys(saveModel); var keys = _.keys(saveModel);
expect(keys[0]).to.be('addBuiltInAnnotationQuery'); expect(keys[0]).to.be('autoUpdate');
expect(keys[1]).to.be('addPanel'); expect(keys[1]).to.be('revision');
}); });
}); });
describe.skip('row and panel manipulation', function() { describe('row and panel manipulation', function() {
var dashboard; var dashboard;
beforeEach(function() { beforeEach(function() {
dashboard = new DashboardModel({}); dashboard = new DashboardModel({});
}); });
it('adding default should split span in half', function() { it('adding panel should new up panel model', function() {
dashboard.addEmptyRow(); dashboard.addPanel({type: 'test', title: 'test'});
dashboard.rows[0].addPanel({span: 12});
dashboard.rows[0].addPanel({span: 12});
expect(dashboard.rows[0].panels[0].span).to.be(6); expect(dashboard.panels[0] instanceof PanelModel).to.be(true);
expect(dashboard.rows[0].panels[1].span).to.be(6);
}); });
it('duplicate panel should try to add it to same row', function() { it('duplicate panel should try to add to the right if there is space', function() {
var panel = { span: 4, attr: '123', id: 10 }; var panel = {id: 10, gridPos: {x: 0, y: 0, w: 6, h: 2}};
dashboard.addEmptyRow(); dashboard.addPanel(panel);
dashboard.rows[0].addPanel(panel); dashboard.duplicatePanel(dashboard.panels[0]);
dashboard.duplicatePanel(panel, dashboard.rows[0]);
expect(dashboard.rows[0].panels[0].span).to.be(4); expect(dashboard.panels[1].gridPos).to.eql({x: 6, y: 0, h: 2, w: 6});
expect(dashboard.rows[0].panels[1].span).to.be(4);
expect(dashboard.rows[0].panels[1].attr).to.be('123');
expect(dashboard.rows[0].panels[1].id).to.be(11);
}); });
it('duplicate panel should remove repeat data', function() { it('duplicate panel should remove repeat data', function() {
var panel = { span: 4, attr: '123', id: 10, repeat: 'asd', scopedVars: { test: 'asd' }}; var panel = {id: 10, gridPos: {x: 0, y: 0, w: 6, h: 2}, repeat: 'asd', scopedVars: {test: 'asd'}};
dashboard.addEmptyRow(); dashboard.addPanel(panel);
dashboard.rows[0].addPanel(panel); dashboard.duplicatePanel(dashboard.panels[0]);
dashboard.duplicatePanel(panel, dashboard.rows[0]);
expect(dashboard.rows[0].panels[1].repeat).to.be(undefined); expect(dashboard.panels[1].repeat).to.be(undefined);
expect(dashboard.rows[0].panels[1].scopedVars).to.be(undefined); expect(dashboard.panels[1].scopedVars).to.be(undefined);
}); });
}); });
describe('when creating dashboard with old schema', function() { describe('when creating dashboard with old schema', function() {
......
scripts/webpack/webpack.test.js
...@@ -3,7 +3,7 @@ const merge = require('webpack-merge'); ...@@ -3,7 +3,7 @@ const merge = require('webpack-merge');
const common = require('./webpack.common.js'); const common = require('./webpack.common.js');
config = merge(common, { config = merge(common, {
devtool: 'inline-source-map', devtool: 'cheap-module-source-map',
externals: { externals: {
'react/addons': true, 'react/addons': true,
'react/lib/ExecutionEnvironment': true, 'react/lib/ExecutionEnvironment': true,
......
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