From b7d821b524c0b671da59f5df670375dcb0582a07 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Mon, 22 Oct 2018 14:22:40 +0200 Subject: [PATCH] component working --- public/app/core/angular_wrappers.ts | 2 +- .../app/core/components/Alerts/AlertList.tsx | 11 ++++- .../core/components/Alerts/state/actions.ts | 23 +++++++++++ .../components/Alerts/state/reducers.test.ts | 41 +++++++++++++++++++ .../core/components/Alerts/state/reducers.ts | 23 +++++++++++ public/app/core/services/alert_srv.ts | 2 - public/app/types/alerts.ts | 10 +++++ public/app/types/index.ts | 4 ++ 8 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 public/app/core/components/Alerts/state/actions.ts create mode 100644 public/app/core/components/Alerts/state/reducers.test.ts create mode 100644 public/app/core/components/Alerts/state/reducers.ts create mode 100644 public/app/types/alerts.ts diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 03d402ce86d..5b14ebe46fa 100644 --- a/public/app/core/angular_wrappers.ts +++ b/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']); diff --git a/public/app/core/components/Alerts/AlertList.tsx b/public/app/core/components/Alerts/AlertList.tsx index bd9fc49a007..e384924d96f 100644 --- a/public/app/core/components/Alerts/AlertList.tsx +++ b/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 { }; render() { - const alerts = [{ severity: 'success', icon: 'warning', title: 'test', text: 'test text' }]; + const { alerts } = this.props; return (
@@ -34,3 +35,11 @@ export class AlertList extends PureComponent { ); } } + +function mapStateToProps(state) { + return { + alerts: state.alerts.alerts, + }; +} + +export default connect(mapStateToProps)(AlertList); diff --git a/public/app/core/components/Alerts/state/actions.ts b/public/app/core/components/Alerts/state/actions.ts new file mode 100644 index 00000000000..cc82f21a3e7 --- /dev/null +++ b/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, +}); diff --git a/public/app/core/components/Alerts/state/reducers.test.ts b/public/app/core/components/Alerts/state/reducers.test.ts new file mode 100644 index 00000000000..16848e6b233 --- /dev/null +++ b/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); + }); +}); diff --git a/public/app/core/components/Alerts/state/reducers.ts b/public/app/core/components/Alerts/state/reducers.ts new file mode 100644 index 00000000000..efbfa96aa2c --- /dev/null +++ b/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, +}; diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index 9a4fabb761a..2d447651b75 100644 --- a/public/app/core/services/alert_srv.ts +++ b/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) => { diff --git a/public/app/types/alerts.ts b/public/app/types/alerts.ts new file mode 100644 index 00000000000..2e744ddc9b7 --- /dev/null +++ b/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[]; +} diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 7b35f3d6787..af0dacf27ee 100644 --- a/public/app/types/index.ts +++ b/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; }