add alert in react instead of angular

public/app/features/alerting/AlertTabCtrl.ts

@@ -45,6 +45,7 @@ export class AlertTabCtrl {
     this.noDataModes = alertDef.noDataModes;
     this.executionErrorModes = alertDef.executionErrorModes;
     this.appSubUrl = config.appSubUrl;
+    this.panelCtrl._enableAlert = this.enable;
   }
 
   $onInit() {
@@ -353,11 +354,11 @@ export class AlertTabCtrl {
     });
   }
 
-  enable() {
+  enable = () => {
     this.panel.alert = {};
     this.initModel();
     this.panel.alert.for = '5m'; //default value for new alerts. for existing alerts we use 0m to avoid breaking changes
-  }
+  };
 
   evaluatorParamsChanged() {
     ThresholdMapper.alertToGraphThresholds(this.panel);

public/app/features/alerting/partials/alert_tab.html

@@ -153,13 +153,3 @@
     </div>
   </div>
 </div>
-
-<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.panel.alert">
-  <div class="empty-list-cta">
-    <div class="empty-list-cta__title">Panel has no alert rule defined</div>
-    <button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
-      <i class="icon-gf icon-gf-alert"></i>
-      Create Alert
-    </button>
-  </div>
-</div>

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
 import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import appEvents from 'app/core/app_events';
 import { PanelModel } from '../panel_model';
 import 'app/features/alerting/AlertTabCtrl';
@@ -33,7 +33,7 @@ export class AlertTab extends PureComponent<Props> {
   }
 
   shouldLoadAlertTab() {
-    return this.props.angularPanel && this.element;
+    return this.props.angularPanel && this.element && !this.component;
   }
 
   componentWillUnmount() {
@@ -93,6 +93,7 @@ export class AlertTab extends PureComponent<Props> {
             panel.thresholds = [];
             this.panelCtrl.alertState = null;
             this.panelCtrl.render();
+            this.forceUpdate();
           },
         });
       },
@@ -100,15 +101,31 @@ export class AlertTab extends PureComponent<Props> {
     };
   };
 
+  onAddAlert = () => {
+    this.panelCtrl._enableAlert();
+    this.component.digest();
+    this.forceUpdate();
+  };
+
   render() {
     const { alert } = this.props.panel;
 
     const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
 
+    const model = {
+      title: 'Panel has no alert rule defined',
+      icon: 'icon-gf icon-gf-alert',
+      onClick: this.onAddAlert,
+      buttonTitle: 'Create Alert',
+    };
+
     //TODO move add button react from angular and add condition to render angular view
     return (
       <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
+        <>
           <div ref={element => (this.element = element)} />
+          {!alert && <EmptyListCTA model={model} />}
+        </>
       </EditorTabBody>
     );
   }