using react component

public/app/core/angular_wrappers.ts

@@ -5,10 +5,12 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
+import { AlertList } from './components/Alerts/AlertList';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
   react2AngularDirective('sidemenu', SideMenu, []);
+  react2AngularDirective('pageAlertList', AlertList, []);
   react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
   react2AngularDirective('searchResult', SearchResult, []);

public/app/core/components/Alerts/AlertList.tsx

+import React, { PureComponent } from 'react';
+
+export interface Props {
+  alerts: any[];
+}
+
+export class AlertList extends PureComponent<Props> {
+  onClearAlert = alert => {
+    console.log('clear alert', alert);
+  };
+
+  render() {
+    const alerts = [{ severity: 'success', icon: 'warning', title: 'test', text: 'test text' }];
+
+    return (
+      <div>
+        {alerts.map((alert, index) => {
+          return (
+            <div key={index} className={`alert-${alert.severity} alert`}>
+              <div className="alert-icon">
+                <i className={alert.icon} />
+              </div>
+              <div className="alert-body">
+                <div className="alert-title">{alert.title}</div>
+                <div className="alert-text">{alert.text}</div>
+              </div>
+              <button type="button" className="alert-close" onClick={() => this.onClearAlert(alert)}>
+                <i className="fa fa fa-remove" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}

public/app/core/services/alert_srv.ts

@@ -20,6 +20,8 @@ export class AlertSrv {
       this.$rootScope
     );
 
+    this.list.push({ severity: 'success', icon: 'warning', title: 'test', text: 'test text' });
+
     this.$rootScope.onAppEvent(
       'alert-warning',
       (e, alert) => {

public/views/index.template.html

@@ -200,21 +200,8 @@
 
   <grafana-app class="grafana-app" ng-cloak>
     <sidemenu class="sidemenu"></sidemenu>
+    <page-alert-list class="page-alert-list"></page-alert-list>
 
-    <div class="page-alert-list">
-      <div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
-        <div class="alert-icon">
-          <i class="{{alert.icon}}"></i>
-        </div>
-        <div class="alert-body">
-          <div class="alert-title">{{alert.title}}</div>
-          <div class="alert-text" ng-bind='alert.text'></div>
-        </div>
-        <button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
-          <i class="fa fa fa-remove"></i>
-        </button>
-      </div>
-    </div>
 
     <div class="main-view">
       <div class="scroll-canvas" page-scrollbar>