wip: panel-header: Remove panel

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -14,6 +14,7 @@ interface PanelHeaderProps {
 
 export class PanelHeader extends React.Component<PanelHeaderProps, any> {
   render() {
+    const { dashboard } = this.props;
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
@@ -38,7 +39,7 @@ export class PanelHeader extends React.Component<PanelHeaderProps, any> {
               {this.props.panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
             </span>
 
-            <PanelHeaderMenu panelId={this.props.panel.id} />
+            <PanelHeaderMenu panelId={this.props.panel.id} dashboard={dashboard} />
             <span className="panel-time-info">
               <i className="fa fa-clock-o" /> 4m
             </span>

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
 // import { store } from 'app/store/configureStore';
+import { DashboardModel } from 'app/features/dashboard/dashboard_model';
+import { PanelModel } from 'app/features/dashboard/panel_model';
 import { PanelHeaderMenuItem, PanelHeaderMenuItemTypes } from './PanelHeaderMenuItem';
 import appEvents from 'app/core/app_events';
 import { store } from 'app/store/configureStore';
@@ -7,6 +9,7 @@ import { updateLocation } from 'app/core/actions';
 
 export interface PanelHeaderMenuProps {
   panelId: number;
+  dashboard: DashboardModel;
 }
 
 export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
@@ -35,9 +38,32 @@ export class PanelHeaderMenu extends PureComponent<PanelHeaderMenuProps, any> {
   };
 
   onRemovePanel = () => {
-    appEvents.emit('panel-remove', {
+    const { panelId, dashboard } = this.props;
-      panelId: this.props.panelId,
+    const panelInfo = dashboard.getPanelInfoById(panelId);
+    this.removePanel(panelInfo.panel, true);
+  };
+
+  removePanel = (panel: PanelModel, ask: boolean) => {
+    const { dashboard } = this.props;
+
+    // confirm deletion
+    if (ask !== false) {
+      const text2 = panel.alert ? 'Panel includes an alert rule, removing panel will also remove alert rule' : null;
+      const confirmText = panel.alert ? 'YES' : null;
+
+      appEvents.emit('confirm-modal', {
+        title: 'Remove Panel',
+        text: 'Are you sure you want to remove this panel?',
+        text2: text2,
+        icon: 'fa-trash',
+        confirmText: confirmText,
+        yesText: 'Remove',
+        onConfirm: () => this.removePanel(panel, false),
       });
+      return;
+    }
+
+    dashboard.removePanel(panel);
   };
 
   render() {