fixed panel removal

public/app/core/services/keybindingSrv.ts

@@ -144,7 +144,7 @@ export class KeybindingSrv {
     this.$location.search(search);
   }
 
-  setupDashboardBindings(scope, dashboard) {
+  setupDashboardBindings(scope, dashboard, onRemovePanel) {
     this.bind('mod+o', () => {
       dashboard.graphTooltip = (dashboard.graphTooltip + 1) % 3;
       appEvents.emit('graph-hover-clear');
@@ -212,9 +212,7 @@ export class KeybindingSrv {
     // delete panel
     this.bind('p r', () => {
       if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
-        this.$rootScope.appEvent('panel-remove', {
-          panelId: dashboard.meta.focusPanelId,
-        });
+        onRemovePanel(dashboard.meta.focusPanelId);
         dashboard.meta.focusPanelId = 0;
       }
     });

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -171,33 +171,29 @@ export class DashNav extends PureComponent<Props> {
               <i className="fa fa-link" />
             </a>
           )}
+        </div>
 
-          <div className="navbar-buttons navbar-buttons--tv">
+        <div className="navbar-buttons navbar-buttons--tv">
+          <button className="btn navbar-button navbar-button--tv" onClick={this.onToggleTVMode} title="Cycle view mode">
+            <i className="fa fa-desktop" />
+          </button>
+        </div>
+
+        {
+          // <gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
+        }
+
+        {(isFullscreen || editview) && (
+          <div className="navbar-buttons navbar-buttons--close">
             <button
-              className="btn navbar-button navbar-button--tv"
-              onClick={this.onToggleTVMode}
-              title="Cycle view mode"
+              className="btn navbar-button navbar-button--primary"
+              onClick={this.onClose}
+              title="Back to dashboard"
             >
-              <i className="fa fa-desktop" />
+              <i className="fa fa-reply" />
             </button>
           </div>
-
-          {
-            // <gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
-          }
-
-          {(isFullscreen || editview) && (
-            <div className="navbar-buttons navbar-buttons--close">
-              <button
-                className="btn navbar-button navbar-button--primary"
-                onClick={this.onClose}
-                title="Back to dashboard"
-              >
-                <i className="fa fa-reply" />
-              </button>
-            </div>
-          )}
-        </div>
+        )}
       </div>
     );
   }

public/app/features/dashboard/state/DashboardModel.ts

@@ -1,20 +1,25 @@
+// Libaries
 import moment from 'moment';
 import _ from 'lodash';
-import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
 
+// Constants
+import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
 import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
+
+// Utils & Services
 import { Emitter } from 'app/core/utils/emitter';
 import { contextSrv } from 'app/core/services/context_srv';
 import sortByKeys from 'app/core/utils/sort_by_keys';
 
+// Types
 import { PanelModel } from './PanelModel';
 import { DashboardMigrator } from './DashboardMigrator';
 import { TimeRange } from '@grafana/ui/src';
 
 export class DashboardModel {
   id: any;
-  uid: any;
-  title: any;
+  uid: string;
+  title: string;
   autoUpdate: any;
   description: any;
   tags: any;

public/app/features/dashboard/state/initDashboard.ts

@@ -7,6 +7,7 @@ import { updateLocation } from 'app/core/actions';
 import { notifyApp } from 'app/core/actions';
 import locationUtil from 'app/core/utils/location_util';
 import { setDashboardLoadingState, ThunkResult, setDashboardModel } from './actions';
+import { removePanel } from '../utils/panel';
 
 // Types
 import { DashboardLoadingState } from 'app/types/dashboard';
@@ -102,7 +103,15 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
 
       $scope.dashboard = dashboard;
       $injector.get('dashboardViewStateSrv').create($scope);
-      $injector.get('keybindingSrv').setupDashboardBindings($scope, dashboard);
+
+      // dashboard keybindings should not live in core, this needs a bigger refactoring
+      // So declaring this here so it can depend on the removePanel util function
+      // Long term onRemovePanel should be handled via react prop callback
+      const onRemovePanel = (panelId: number) => {
+        removePanel(dashboard, dashboard.getPanelById(panelId), true);
+      };
+
+      $injector.get('keybindingSrv').setupDashboardBindings($scope, dashboard, onRemovePanel);
     } catch (err) {
       dispatch(notifyApp(createErrorNotification('Dashboard init failed', err.toString())));
       console.log(err);

public/app/features/panel/panel_ctrl.ts

@@ -7,6 +7,7 @@ import { Emitter } from 'app/core/core';
 import getFactors from 'app/core/utils/factors';
 import {
   duplicatePanel,
+  removePanel,
   copyPanel as copyPanelUtil,
   editPanelJson as editPanelJsonUtil,
   sharePanel as sharePanelUtil,
@@ -213,9 +214,7 @@ export class PanelCtrl {
   }
 
   removePanel() {
-    this.publishAppEvent('panel-remove', {
-      panelId: this.panel.id,
-    });
+    removePanel(this.dashboard, this.panel, true);
   }
 
   editPanelJson() {