From 770a21b368a19757496e11b7021fc636b60f66ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 12 Oct 2017 19:01:02 +0200 Subject: [PATCH] newgrid: worked panel duplicate --- .../app/features/dashboard/DashboardModel.ts | 33 +++++++++++---- public/app/features/dashboard/PanelModel.ts | 3 +- .../dashboard/dashgrid/DashboardGrid.tsx | 3 +- .../dashboard/specs/dashboard_model_specs.ts | 42 ++++++++----------- scripts/webpack/webpack.test.js | 2 +- 5 files changed, 47 insertions(+), 36 deletions(-) diff --git a/public/app/features/dashboard/DashboardModel.ts b/public/app/features/dashboard/DashboardModel.ts index 642b79bb7c6..8301d3b403e 100644 --- a/public/app/features/dashboard/DashboardModel.ts +++ b/public/app/features/dashboard/DashboardModel.ts @@ -1,7 +1,5 @@ -import angular from 'angular'; import moment from 'moment'; import _ from 'lodash'; -import $ from 'jquery'; import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors'; import {Emitter, contextSrv, appEvents} from 'app/core/core'; @@ -11,6 +9,7 @@ import sortByKeys from 'app/core/utils/sort_by_keys'; export const CELL_HEIGHT = 30; export const CELL_VMARGIN = 10; +export const COL_COUNT = 12; export class DashboardModel { id: any; @@ -134,10 +133,9 @@ export class DashboardModel { this.panels = _.map(panels, panel => panel.getSaveModel()); // make clone - var copy = $.extend(true, {}, this); + var copy = _.cloneDeep(this); // sort clone copy = sortByKeys(copy); - console.log(copy.panels); // restore properties this.events = events; @@ -189,7 +187,18 @@ export class DashboardModel { addPanel(panel) { 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); } @@ -265,8 +274,8 @@ export class DashboardModel { return result; } - duplicatePanel(panel, row) { - var newPanel = angular.copy(panel); + duplicatePanel(panel) { + const newPanel = _.cloneDeep(panel.getSaveModel()); newPanel.id = this.getNextPanelId(); delete newPanel.repeat; @@ -278,7 +287,15 @@ export class DashboardModel { } 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; } diff --git a/public/app/features/dashboard/PanelModel.ts b/public/app/features/dashboard/PanelModel.ts index 00676c3f434..66a6b51abfe 100644 --- a/public/app/features/dashboard/PanelModel.ts +++ b/public/app/features/dashboard/PanelModel.ts @@ -19,12 +19,13 @@ export class PanelModel { type: string; title: string; alert?: any; + scopedVars?: any; + repeat?: any; // non persisted fullscreen: boolean; isEditing: boolean; events: Emitter; - scopedVars: any; constructor(model) { this.events = new Emitter(); diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index dfd1a8e4274..0e034b509a4 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -31,7 +31,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize isResizable={true} measureBeforeMount={false} containerPadding={[0, 0]} - useCSSTransforms={true} + useCSSTransforms={false} margin={[CELL_VMARGIN, CELL_VMARGIN]} cols={COLUMN_COUNT} rowHeight={CELL_HEIGHT} @@ -68,6 +68,7 @@ export class DashboardGrid extends React.Component { // subscribe to dashboard events this.dashboard = this.panelContainer.getDashboard(); 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)); } diff --git a/public/app/features/dashboard/specs/dashboard_model_specs.ts b/public/app/features/dashboard/specs/dashboard_model_specs.ts index bfcacbb9851..0c576c47b52 100644 --- a/public/app/features/dashboard/specs/dashboard_model_specs.ts +++ b/public/app/features/dashboard/specs/dashboard_model_specs.ts @@ -2,6 +2,7 @@ import {describe, beforeEach, it, expect} from 'test/lib/common'; import _ from 'lodash'; import {DashboardModel} from '../DashboardModel'; +import {PanelModel} from '../PanelModel'; describe('DashboardModel', function() { @@ -46,51 +47,42 @@ describe('DashboardModel', function() { var saveModel = model.getSaveModelClone(); var keys = _.keys(saveModel); - expect(keys[0]).to.be('addBuiltInAnnotationQuery'); - expect(keys[1]).to.be('addPanel'); + expect(keys[0]).to.be('autoUpdate'); + expect(keys[1]).to.be('revision'); }); }); - describe.skip('row and panel manipulation', function() { + describe('row and panel manipulation', function() { var dashboard; beforeEach(function() { dashboard = new DashboardModel({}); }); - it('adding default should split span in half', function() { - dashboard.addEmptyRow(); - dashboard.rows[0].addPanel({span: 12}); - dashboard.rows[0].addPanel({span: 12}); + it('adding panel should new up panel model', function() { + dashboard.addPanel({type: 'test', title: 'test'}); - expect(dashboard.rows[0].panels[0].span).to.be(6); - expect(dashboard.rows[0].panels[1].span).to.be(6); + expect(dashboard.panels[0] instanceof PanelModel).to.be(true); }); - it('duplicate panel should try to add it to same row', function() { - var panel = { span: 4, attr: '123', id: 10 }; + it('duplicate panel should try to add to the right if there is space', function() { + var panel = {id: 10, gridPos: {x: 0, y: 0, w: 6, h: 2}}; - dashboard.addEmptyRow(); - dashboard.rows[0].addPanel(panel); - dashboard.duplicatePanel(panel, dashboard.rows[0]); + dashboard.addPanel(panel); + dashboard.duplicatePanel(dashboard.panels[0]); - expect(dashboard.rows[0].panels[0].span).to.be(4); - 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); + expect(dashboard.panels[1].gridPos).to.eql({x: 6, y: 0, h: 2, w: 6}); }); 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.rows[0].addPanel(panel); - dashboard.duplicatePanel(panel, dashboard.rows[0]); + dashboard.addPanel(panel); + dashboard.duplicatePanel(dashboard.panels[0]); - expect(dashboard.rows[0].panels[1].repeat).to.be(undefined); - expect(dashboard.rows[0].panels[1].scopedVars).to.be(undefined); + expect(dashboard.panels[1].repeat).to.be(undefined); + expect(dashboard.panels[1].scopedVars).to.be(undefined); }); - }); describe('when creating dashboard with old schema', function() { diff --git a/scripts/webpack/webpack.test.js b/scripts/webpack/webpack.test.js index 8983541a612..f30c7876185 100644 --- a/scripts/webpack/webpack.test.js +++ b/scripts/webpack/webpack.test.js @@ -3,7 +3,7 @@ const merge = require('webpack-merge'); const common = require('./webpack.common.js'); config = merge(common, { - devtool: 'inline-source-map', + devtool: 'cheap-module-source-map', externals: { 'react/addons': true, 'react/lib/ExecutionEnvironment': true,