component working

public/app/core/angular_wrappers.ts

@@ -5,7 +5,7 @@ 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';
+import AlertList from './components/Alerts/AlertList';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);

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

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 
 export interface Props {
   alerts: any[];
@@ -10,7 +11,7 @@ export class AlertList extends PureComponent<Props> {
   };
 
   render() {
-    const alerts = [{ severity: 'success', icon: 'warning', title: 'test', text: 'test text' }];
+    const { alerts } = this.props;
 
     return (
       <div>
@@ -34,3 +35,11 @@ export class AlertList extends PureComponent<Props> {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts.alerts,
+  };
+}
+
+export default connect(mapStateToProps)(AlertList);

public/app/core/components/Alerts/state/actions.ts

@@ -0,0 +1,23 @@
+import { Alert } from 'app/types';
+
+export enum ActionTypes {
+  AddAlert = 'ADD_ALERT',
+  ClearAlert = 'CLEAR_ALERT',
+}
+
+interface AddAlertAction {
+  type: ActionTypes.AddAlert;
+  payload: Alert;
+}
+
+interface ClearAlertAction {
+  type: ActionTypes.ClearAlert;
+  payload: Alert;
+}
+
+export type Action = AddAlertAction | ClearAlertAction;
+
+export const clearAlert = (alert: Alert) => ({
+  type: ActionTypes.ClearAlert,
+  payload: alert,
+});

public/app/core/components/Alerts/state/reducers.test.ts

@@ -0,0 +1,41 @@
+import { alertsReducer } from './reducers';
+import { ActionTypes } from './actions';
+
+describe('clear alert', () => {
+  it('should filter alert', () => {
+    const initialState = {
+      alerts: [
+        {
+          severity: 'success',
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+        },
+        {
+          severity: 'fail',
+          icon: 'warning',
+          title: 'test2',
+          text: 'test alert fail 2',
+        },
+      ],
+    };
+
+    const result = alertsReducer(initialState, {
+      type: ActionTypes.ClearAlert,
+      payload: initialState.alerts[1],
+    });
+
+    const expectedResult = {
+      alerts: [
+        {
+          severity: 'success',
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+        },
+      ],
+    };
+
+    expect(result).toEqual(expectedResult);
+  });
+});

public/app/core/components/Alerts/state/reducers.ts

@@ -0,0 +1,23 @@
+import { Alert, AlertsState } from 'app/types';
+import { Action, ActionTypes } from './actions';
+
+export const initialState: AlertsState = {
+  alerts: [] as Alert[],
+};
+
+export const alertsReducer = (state = initialState, action: Action): AlertsState => {
+  switch (action.type) {
+    case ActionTypes.AddAlert:
+      return { ...state, alerts: state.alerts.concat([action.payload]) };
+    case ActionTypes.ClearAlert:
+      return {
+        ...state,
+        alerts: state.alerts.filter(alert => alert !== action.payload),
+      };
+  }
+  return state;
+};
+
+export default {
+  alerts: alertsReducer,
+};

public/app/core/services/alert_srv.ts

@@ -20,8 +20,6 @@ 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/app/types/alerts.ts

@@ -0,0 +1,10 @@
+export interface Alert {
+  severity: string;
+  icon: string;
+  title: string;
+  text: string;
+}
+
+export interface AlertsState {
+  alerts: Alert[];
+}

public/app/types/index.ts

@@ -9,6 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { Alert, AlertsState } from './alerts';
 
 export {
   Team,
@@ -46,6 +47,8 @@ export {
   User,
   UsersState,
   PluginDashboard,
+  Alert,
+  AlertsState,
 };
 
 export interface StoreState {
@@ -58,4 +61,5 @@ export interface StoreState {
   dashboard: DashboardState;
   dataSources: DataSourcesState;
   users: UsersState;
+  alerts: AlertsState;
 }