newgrid: worked panel duplicate

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;
   }
 

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();

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<DashboardGridProps, any> {
     // 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));
   }
 

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() {

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,