added alert tab to new react panel editor

public/app/features/alerting/AlertTabCtrl.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import coreModule from 'app/core/core_module';
 import { ThresholdMapper } from './state/ThresholdMapper';
 import { QueryPart } from 'app/core/components/query_part/query_part';
 import alertDef from './state/alertDef';
@@ -430,3 +431,5 @@ export function alertTab() {
     controller: AlertTabCtrl,
   };
 }
+
+coreModule.directive('alertTab', alertTab);

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

@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { EditorTabBody } from './EditorTabBody';
+import 'app/features/alerting/AlertTabCtrl';
+
+interface Props {
+  angularPanel?: AngularComponent;
+}
+
+export class AlertTab extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (this.shouldLoadAlertTab()) {
+      this.loadAlertTab();
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.shouldLoadAlertTab()) {
+      this.loadAlertTab();
+    }
+  }
+
+  shouldLoadAlertTab() {
+    return this.props.angularPanel && this.element;
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  loadAlertTab() {
+    const { angularPanel } = this.props;
+
+    const scope = angularPanel.getScope();
+
+    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
+    if (!scope.$$childHead) {
+      setTimeout(() => {
+        this.forceUpdate();
+      });
+      return;
+    }
+
+    const panelCtrl = scope.$$childHead.ctrl;
+    const loader = getAngularLoader();
+    const template = '<alert-tab />';
+
+    const scopeProps = {
+      ctrl: panelCtrl,
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  render() {
+    return (
+      <EditorTabBody toolbarItems={[]}>
+        <div ref={element => (this.element = element)} />
+      </EditorTabBody>
+    );
+  }
+}

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

@@ -51,7 +51,7 @@ export class GeneralTab extends PureComponent<Props> {
 
     return (
       <EditorTabBody main={currentDataSource} toolbarItems={[]}>
-        <div ref={element => (this.element = element)} style={{ width: '100%' }} />
+        <div ref={element => (this.element = element)} />
       </EditorTabBody>
     );
   }

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

@@ -4,7 +4,9 @@ import classNames from 'classnames';
 import { QueriesTab } from './QueriesTab';
 import { VisualizationTab } from './VisualizationTab';
 import { GeneralTab } from './GeneralTab';
+import { AlertTab } from './AlertTab';
 
+import config from 'app/core/config';
 import { store } from 'app/store/store';
 import { updateLocation } from 'app/core/actions';
 import { AngularComponent } from 'app/core/services/AngularLoader';
@@ -28,16 +30,8 @@ interface PanelEditorTab {
 }
 
 export class PanelEditor extends PureComponent<PanelEditorProps> {
-  tabs: PanelEditorTab[];
-
   constructor(props) {
     super(props);
-
-    this.tabs = [
-      { id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
-      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
-      { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
-    ];
   }
 
   onChangeTab = (tab: PanelEditorTab) => {
@@ -50,10 +44,48 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     this.forceUpdate();
   };
 
-  render() {
+  renderCurrentTab(activeTab: string) {
     const { panel, dashboard, onTypeChanged, plugin, angularPanel } = this.props;
-    const { location } = store.getState();
+
-    const activeTab = location.query.tab || 'queries';
+    switch (activeTab) {
+      case 'general':
+        return <GeneralTab panel={panel} />;
+      case 'queries':
+        return <QueriesTab panel={panel} dashboard={dashboard} />;
+      case 'alert':
+        return <AlertTab angularPanel={angularPanel} />;
+      case 'visualization':
+        return (
+          <VisualizationTab
+            panel={panel}
+            dashboard={dashboard}
+            plugin={plugin}
+            onTypeChanged={onTypeChanged}
+            angularPanel={angularPanel}
+          />
+        );
+      default:
+        return null;
+    }
+  }
+
+  render() {
+    const { plugin } = this.props;
+    const activeTab = store.getState().location.query.tab || 'queries';
+
+    const tabs = [
+      { id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
+      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
+      { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
+    ];
+
+    if (config.alertingEnabled && plugin.id === 'graph') {
+      tabs.push({
+        id: 'alert',
+        text: 'Alert',
+        icon: 'gicon gicon-alert',
+      });
+    }
 
     return (
       <div className="panel-editor-container__editor">
@@ -65,23 +97,12 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
 
         <div className="panel-editor-tabs">
           <ul className="gf-tabs">
-            {this.tabs.map(tab => {
+            {tabs.map(tab => {
               return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
             })}
           </ul>
         </div>
-
+        {this.renderCurrentTab(activeTab)}
-        {activeTab === 'general' && <GeneralTab panel={panel} />}
-        {activeTab === 'queries' && <QueriesTab panel={panel} dashboard={dashboard} />}
-        {activeTab === 'visualization' && (
-          <VisualizationTab
-            panel={panel}
-            dashboard={dashboard}
-            plugin={plugin}
-            onTypeChanged={onTypeChanged}
-            angularPanel={angularPanel}
-          />
-        )}
       </div>
     );
   }

public/app/plugins/panel/graph/module.ts

@@ -138,11 +138,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Display options', 'public/app/plugins/panel/graph/tab_display.html');
     this.addEditorTab('Axes', axesEditorComponent);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
-
-    // if (config.alertingEnabled) {
-    //   this.addEditorTab('Alert', alertTab, 5);
-    // }
-
     this.subTabIndex = 0;
   }
 

public/sass/components/_panel_editor.scss

@@ -10,12 +10,14 @@
   &--edit {
     flex: 1 1 0;
     height: unset;
+    margin: 0 $dashboard-padding;
   }
 
   &--view {
     flex: 1 1 0;
     height: 80%;
-    padding: $dashboard-padding;
+    margin: 0 $dashboard-padding;
+    padding-top: $dashboard-padding;
   }
 }