chore: Fix typings and add Page-component to AlertRuleList #14762

public/app/features/alerting/AlertRuleList.test.tsx

@@ -18,6 +18,7 @@ const setup = (propOverrides?: object) => {
     togglePauseAlertRule: jest.fn(),
     stateFilter: '',
     search: '',
+    isLoading: false
   };
 
   Object.assign(props, propOverrides);
@@ -121,7 +122,7 @@ describe('Functions', () => {
   describe('State filter changed', () => {
     it('should update location', () => {
       const { instance } = setup();
-      const mockEvent = { target: { value: 'alerting' } };
+      const mockEvent = { target: { value: 'alerting' } } as React.ChangeEvent<HTMLSelectElement>;
 
       instance.onStateFilterChanged(mockEvent);
 
@@ -146,7 +147,7 @@ describe('Functions', () => {
   describe('Search query change', () => {
     it('should set search query', () => {
       const { instance } = setup();
-      const mockEvent = { target: { value: 'dashboard' } };
+      const mockEvent = { target: { value: 'dashboard' } } as React.ChangeEvent<HTMLInputElement>;
 
       instance.onSearchQueryChange(mockEvent);
 

public/app/features/alerting/AlertRuleList.tsx

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Page from 'app/core/components/Page/Page';
+// import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import AlertRuleItem from './AlertRuleItem';
 import appEvents from 'app/core/app_events';
 import { updateLocation } from 'app/core/actions';
@@ -19,6 +20,7 @@ export interface Props {
   togglePauseAlertRule: typeof togglePauseAlertRule;
   stateFilter: string;
   search: string;
+  isLoading: boolean;
 }
 
 export class AlertRuleList extends PureComponent<Props, any> {
@@ -54,9 +56,9 @@ export class AlertRuleList extends PureComponent<Props, any> {
     return 'all';
   }
 
-  onStateFilterChanged = event => {
+  onStateFilterChanged = (evt: React.ChangeEvent<HTMLSelectElement>) => {
     this.props.updateLocation({
-      query: { state: event.target.value },
+      query: { state: evt.target.value },
     });
   };
 
@@ -68,8 +70,8 @@ export class AlertRuleList extends PureComponent<Props, any> {
     });
   };
 
-  onSearchQueryChange = event => {
-    const { value } = event.target;
+  onSearchQueryChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = evt.target;
     this.props.setSearchQuery(value);
   };
 
@@ -77,7 +79,7 @@ export class AlertRuleList extends PureComponent<Props, any> {
     this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' });
   };
 
-  alertStateFilterOption = ({ text, value }) => {
+  alertStateFilterOption = ({ text, value }: { text: string; value: string; }) => {
     return (
       <option key={value} value={value}>
         {text}
@@ -86,12 +88,11 @@ export class AlertRuleList extends PureComponent<Props, any> {
   };
 
   render() {
-    const { navModel, alertRules, search } = this.props;
+    const { navModel, alertRules, search, isLoading } = this.props;
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={isLoading}>
           <div className="page-action-bar">
             <div className="gf-form gf-form--grow">
               <label className="gf-form--has-input-icon gf-form--grow">
@@ -131,8 +132,8 @@ export class AlertRuleList extends PureComponent<Props, any> {
               ))}
             </ol>
           </section>
-        </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
   }
 }
@@ -142,6 +143,7 @@ const mapStateToProps = (state: StoreState) => ({
   alertRules: getAlertRuleItems(state.alertRules),
   stateFilter: state.location.query.state,
   search: getSearchQuery(state.alertRules),
+  isLoading: state.alertRules.isLoading
 });
 
 const mapDispatchToProps = {

public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap

@@ -1,13 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render alert rules 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
-  >
+<Page
+  navModel={Object {}}
+>
+  <PageContents>
     <div
       className="page-action-bar"
     >
@@ -151,18 +148,15 @@ exports[`Render should render alert rules 1`] = `
         />
       </ol>
     </section>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;
 
 exports[`Render should render component 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
-  >
+<Page
+  navModel={Object {}}
+>
+  <PageContents>
     <div
       className="page-action-bar"
     >
@@ -263,6 +257,6 @@ exports[`Render should render component 1`] = `
         className="alert-rule-list"
       />
     </section>
-  </div>
-</div>
+  </PageContents>
+</Page>
 `;

public/app/features/alerting/state/actions.ts

@@ -4,11 +4,16 @@ import { ThunkAction } from 'redux-thunk';
 
 export enum ActionTypes {
   LoadAlertRules = 'LOAD_ALERT_RULES',
+  LoadedAlertRules = 'LOADED_ALERT_RULES',
   SetSearchQuery = 'SET_ALERT_SEARCH_QUERY',
 }
 
 export interface LoadAlertRulesAction {
   type: ActionTypes.LoadAlertRules;
+}
+
+export interface LoadedAlertRulesAction {
+  type: ActionTypes.LoadedAlertRules;
   payload: AlertRuleDTO[];
 }
 
@@ -17,8 +22,12 @@ export interface SetSearchQueryAction {
   payload: string;
 }
 
-export const loadAlertRules = (rules: AlertRuleDTO[]): LoadAlertRulesAction => ({
+export const loadAlertRules = (): LoadAlertRulesAction => ({
   type: ActionTypes.LoadAlertRules,
+});
+
+export const loadedAlertRules = (rules: AlertRuleDTO[]): LoadedAlertRulesAction => ({
+  type: ActionTypes.LoadedAlertRules,
   payload: rules,
 });
 
@@ -27,14 +36,15 @@ export const setSearchQuery = (query: string): SetSearchQueryAction => ({
   payload: query,
 });
 
-export type Action = LoadAlertRulesAction | SetSearchQueryAction;
+export type Action = LoadAlertRulesAction | LoadedAlertRulesAction | SetSearchQueryAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
 export function getAlertRulesAsync(options: { state: string }): ThunkResult<void> {
   return async dispatch => {
-    const rules = await getBackendSrv().get('/api/alerts', options);
-    dispatch(loadAlertRules(rules));
+    dispatch(loadAlertRules());
+    const rules: AlertRuleDTO[] = await getBackendSrv().get('/api/alerts', options);
+    dispatch(loadedAlertRules(rules));
   };
 }
 

public/app/features/alerting/state/reducers.test.ts

@@ -80,7 +80,7 @@ describe('Alert rules', () => {
 
   it('should set alert rules', () => {
     const action: Action = {
-      type: ActionTypes.LoadAlertRules,
+      type: ActionTypes.LoadedAlertRules,
       payload: payload,
     };
 

public/app/features/alerting/state/reducers.ts

@@ -3,7 +3,7 @@ import { AlertRuleDTO, AlertRule, AlertRulesState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import alertDef from './alertDef';
 
-export const initialState: AlertRulesState = { items: [], searchQuery: '' };
+export const initialState: AlertRulesState = { items: [], searchQuery: '', isLoading: false };
 
 function convertToAlertRule(rule, state): AlertRule {
   const stateModel = alertDef.getStateDisplayModel(state);
@@ -29,17 +29,21 @@ function convertToAlertRule(rule, state): AlertRule {
 export const alertRulesReducer = (state = initialState, action: Action): AlertRulesState => {
   switch (action.type) {
     case ActionTypes.LoadAlertRules: {
+      return { ...state, isLoading: true };
+    }
+
+    case ActionTypes.LoadedAlertRules: {
       const alertRules: AlertRuleDTO[] = action.payload;
 
       const alertRulesViewModel: AlertRule[] = alertRules.map(rule => {
         return convertToAlertRule(rule, rule.state);
       });
 
-      return { items: alertRulesViewModel, searchQuery: state.searchQuery };
+      return { ...state, items: alertRulesViewModel, isLoading: false };
     }
 
     case ActionTypes.SetSearchQuery:
-      return { items: state.items, searchQuery: action.payload };
+      return { ...state, searchQuery: action.payload };
   }
 
   return state;

public/app/types/alerting.ts

@@ -32,4 +32,5 @@ export interface AlertRule {
 export interface AlertRulesState {
   items: AlertRule[];
   searchQuery: string;
+  isLoading: boolean;
 }