public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Johannes Schill
2019-01-28 23:19:19 +01:00
parent e448a140f5
commit d54c4173ca
7 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/alerting/AlertRuleList.test.tsx
+3 -2
View File
@@ -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
+14 -12
View File
@@ -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
+12 -18
View File
@@ -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
+14 -4
View File
@@ -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
+1 -1
View File
@@ -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
+7 -3
View File
@@ -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
+1
View File
@@ -32,4 +32,5 @@ export interface AlertRule {
export interface AlertRulesState {
items: AlertRule[];
searchQuery: string;
isLoading: boolean;
}