feat(panels): fixed duplicate and remove panel

public/app/features/dashboard/rowCtrl.js

@@ -127,10 +127,6 @@ function (angular, _, config) {
       });
     };
 
-    $scope.updatePanelSpan = function(panel, span) {
-      panel.span = Math.min(Math.max(Math.floor(panel.span + span), 1), 12);
-    };
-
     $scope.replacePanel = function(newPanel, oldPanel) {
       var row = $scope.row;
       var index = _.indexOf(row.panels, oldPanel);

public/app/features/panel/metrics_panel_ctrl.ts

@@ -32,7 +32,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     // make metrics tab the default
     this.editorTabIndex = 1;
     this.$q = $injector.get('$q');
-    this.$timeout = $injector.get('$timeout');
     this.datasourceSrv = $injector.get('datasourceSrv');
     this.timeSrv = $injector.get('timeSrv');
 

public/app/features/panel/panel_ctrl.ts

@@ -1,6 +1,7 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import config from 'app/core/config';
+import _ from 'lodash';
 
 export class PanelCtrl {
   panel: any;
@@ -13,6 +14,7 @@ export class PanelCtrl {
   editorTabs: any;
   $scope: any;
   $injector: any;
+  $timeout: any;
   fullscreen: boolean;
   inspector: any;
   editModeInitiated: boolean;
@@ -23,6 +25,7 @@ export class PanelCtrl {
 
     this.$injector = $injector;
     this.$scope = $scope;
+    this.$timeout = $injector.get('$timeout');
     this.pluginName = plugin.name;
     this.pluginId = plugin.id;
     this.icon = plugin.info.icon;
@@ -102,12 +105,34 @@ export class PanelCtrl {
     this.$scope.$broadcast('render', arg1, arg2);
   }
 
- toggleEditorHelp(index) {
-   if (this.editorHelpIndex === index) {
-     this.editorHelpIndex = null;
-     return;
-   }
-   this.editorHelpIndex = index;
- }
+  toggleEditorHelp(index) {
+    if (this.editorHelpIndex === index) {
+      this.editorHelpIndex = null;
+      return;
+    }
+    this.editorHelpIndex = index;
+  }
+
+  duplicate() {
+    this.dashboard.duplicatePanel(this.panel, this.row);
+  }
+
+  updateColumnSpan(span) {
+    this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12);
+    this.$timeout(() => {
+      this.broadcastRender();
+    });
+  }
+
+  removePanel() {
+    this.publishAppEvent('confirm-modal', {
+      title: 'Are you sure you want to remove this panel?',
+      icon: 'fa-trash',
+      yesText: 'Delete',
+      onConfirm: () => {
+        this.row.panels = _.without(this.row.panels, this.panel);
+      }
+    });
+  }
 
 }

public/app/features/panel/panel_menu.js

@@ -34,9 +34,9 @@ function (angular, $, _) {
         if (ctrl.dashboard.meta.canEdit) {
           template += '<div class="panel-menu-inner">';
           template += '<div class="panel-menu-row">';
-          template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
-          template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
-          template += '<a class="panel-menu-icon pull-right" ng-click="removePanel(panel)"><i class="fa fa-remove"></i></a>';
+          template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
+          template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
+          template += '<a class="panel-menu-icon pull-right" ng-click="ctrl.removePanel()"><i class="fa fa-remove"></i></a>';
           template += '<div class="clearfix"></div>';
           template += '</div>';
         }
@@ -96,7 +96,7 @@ function (angular, $, _) {
 
             // if hovering or draging pospone close
             if (force !== true) {
-              if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) {
+              if ($menu.is(':hover') || $scope.ctrl.dashboard.$$panelDragging) {
                 dismiss(2200);
                 return;
               }