Skip to content

N
nexpie-grafana-theme
Commit 50444c32 by Peter Holmberg
Options

actions and reducers for search filter

parent 42aaa2b9
Showing with 251 additions and 102 deletions
public/app/features/alerting/AlertRuleItem.test.tsx 0 → 100644
import React from 'react';
import { shallow } from 'enzyme';
import AlertRuleItem, { Props } from './AlertRuleItem';
const setup = (propOverrides?: object) => {
const props: Props = {
rule: {
id: 1,
dashboardId: 1,
panelId: 1,
name: 'Some rule',
state: 'Open',
stateText: 'state text',
stateIcon: 'icon',
stateClass: 'state class',
stateAge: 'age',
url: 'https://something.something.darkside',
},
search: '',
};
Object.assign(props, propOverrides);
return shallow(<AlertRuleItem {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
});
});
public/app/features/alerting/AlertRuleItem.tsx 0 → 100644
import React from 'react';
import Highlighter from 'react-highlight-words';
import classNames from 'classnames/bind';
import { AlertRule } from '../../types';
export interface Props {
rule: AlertRule;
search: string;
}
export default class AlertRuleItem extends React.Component<Props, any> {
toggleState = () => {
// this.props.rule.togglePaused();
};
renderText(text: string) {
return (
<Highlighter
highlightClassName="highlight-search-match"
textToHighlight={text}
searchWords={[this.props.search]}
/>
);
}
render() {
const { rule } = this.props;
const stateClass = classNames({
fa: true,
'fa-play': rule.state === 'paused',
'fa-pause': rule.state !== 'paused',
});
const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen=true&edit=true&tab=alert`;
return (
<li className="alert-rule-item">
<span className={`alert-rule-item__icon ${rule.stateClass}`}>
<i className={rule.stateIcon} />
</span>
<div className="alert-rule-item__body">
<div className="alert-rule-item__header">
<div className="alert-rule-item__name">
<a href={ruleUrl}>{this.renderText(rule.name)}</a>
</div>
<div className="alert-rule-item__text">
<span className={`${rule.stateClass}`}>{this.renderText(rule.stateText)}</span>
<span className="alert-rule-item__time"> for {rule.stateAge}</span>
</div>
</div>
{rule.info && <div className="small muted alert-rule-item__info">{this.renderText(rule.info)}</div>}
</div>
<div className="alert-rule-item__actions">
<button
className="btn btn-small btn-inverse alert-list__btn width-2"
title="Pausing an alert rule prevents it from executing"
onClick={this.toggleState}
>
<i className={stateClass} />
</button>
<a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" />
</a>
</div>
</li>
);
}
}
public/app/features/alerting/AlertRuleList.tsx
import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import classNames from 'classnames';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import AlertRuleItem from './AlertRuleItem';
import appEvents from 'app/core/app_events';
import Highlighter from 'react-highlight-words';
import { updateLocation } from 'app/core/actions';
import { getNavModel } from 'app/core/selectors/navModel';
import { NavModel, StoreState, AlertRule } from 'app/types';
import { getAlertRulesAsync } from './state/actions';
import { getAlertRulesAsync, setSearchQuery } from './state/actions';
import { getAlertRuleItems, getSearchQuery } from './state/selectors';
interface Props {
navModel: NavModel;
alertRules: AlertRule[];
updateLocation: typeof updateLocation;
getAlertRulesAsync: typeof getAlertRulesAsync;
setSearchQuery: typeof setSearchQuery;
stateFilter: string;
search: string;
}
interface State {
......@@ -32,14 +34,6 @@ export class AlertRuleList extends PureComponent<Props, State> {
{ text: 'Paused', value: 'paused' },
];
constructor(props) {
super(props);
this.state = {
search: '',
};
}
componentDidMount() {
console.log('did mount');
this.fetchRules();
......@@ -77,13 +71,21 @@ export class AlertRuleList extends PureComponent<Props, State> {
});
};
onSearchQueryChange = evt => {
// this.props.alertList.setSearchQuery(evt.target.value);
onSearchQueryChange = event => {
const { value } = event.target;
this.props.setSearchQuery(value);
};
alertStateFilterOption({ text, value }) {
return (
<option key={value} value={value}>
{text}
</option>
);
}
render() {
const { navModel, alertRules } = this.props;
const { search } = this.state;
const { navModel, alertRules, search } = this.props;
return (
<div>
......@@ -107,7 +109,7 @@ export class AlertRuleList extends PureComponent<Props, State> {
<div className="gf-form-select-wrapper width-13">
<select className="gf-form-input" onChange={this.onStateFilterChanged} value={this.getStateFilter()}>
{this.stateFilters.map(AlertStateFilterOption)}
{this.stateFilters.map(this.alertStateFilterOption)}
</select>
</div>
</div>
......@@ -130,89 +132,17 @@ export class AlertRuleList extends PureComponent<Props, State> {
}
}
function AlertStateFilterOption({ text, value }) {
return (
<option key={value} value={value}>
{text}
</option>
);
}
export interface AlertRuleItemProps {
rule: AlertRule;
search: string;
}
export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
toggleState = () => {
// this.props.rule.togglePaused();
};
renderText(text: string) {
return (
<Highlighter
highlightClassName="highlight-search-match"
textToHighlight={text}
searchWords={[this.props.search]}
/>
);
}
render() {
const { rule } = this.props;
const stateClass = classNames({
fa: true,
'fa-play': rule.state === 'paused',
'fa-pause': rule.state !== 'paused',
});
const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen=true&edit=true&tab=alert`;
return (
<li className="alert-rule-item">
<span className={`alert-rule-item__icon ${rule.stateClass}`}>
<i className={rule.stateIcon} />
</span>
<div className="alert-rule-item__body">
<div className="alert-rule-item__header">
<div className="alert-rule-item__name">
<a href={ruleUrl}>{this.renderText(rule.name)}</a>
</div>
<div className="alert-rule-item__text">
<span className={`${rule.stateClass}`}>{this.renderText(rule.stateText)}</span>
<span className="alert-rule-item__time"> for {rule.stateAge}</span>
</div>
</div>
{rule.info && <div className="small muted alert-rule-item__info">{this.renderText(rule.info)}</div>}
</div>
<div className="alert-rule-item__actions">
<button
className="btn btn-small btn-inverse alert-list__btn width-2"
title="Pausing an alert rule prevents it from executing"
onClick={this.toggleState}
>
<i className={stateClass} />
</button>
<a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" />
</a>
</div>
</li>
);
}
}
const mapStateToProps = (state: StoreState) => ({
navModel: getNavModel(state.navIndex, 'alert-list'),
alertRules: state.alertRules,
alertRules: getAlertRuleItems(state.alertRules),
stateFilter: state.location.query.state,
search: getSearchQuery(state.alertRules),
});
const mapDispatchToProps = {
updateLocation,
getAlertRulesAsync,
setSearchQuery,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(AlertRuleList));
public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<li
className="alert-rule-item"
>
<span
className="alert-rule-item__icon state class"
>
<i
className="icon"
/>
</span>
<div
className="alert-rule-item__body"
>
<div
className="alert-rule-item__header"
>
<div
className="alert-rule-item__name"
>
<a
href="https://something.something.darkside?panelId=1&fullscreen=true&edit=true&tab=alert"
>
<Highlighter
highlightClassName="highlight-search-match"
searchWords={
Array [
"",
]
}
textToHighlight="Some rule"
/>
</a>
</div>
<div
className="alert-rule-item__text"
>
<span
className="state class"
>
<Highlighter
highlightClassName="highlight-search-match"
searchWords={
Array [
"",
]
}
textToHighlight="state text"
/>
</span>
<span
className="alert-rule-item__time"
>
for
age
</span>
</div>
</div>
</div>
<div
className="alert-rule-item__actions"
>
<button
className="btn btn-small btn-inverse alert-list__btn width-2"
onClick={[Function]}
title="Pausing an alert rule prevents it from executing"
>
<i
className="fa fa-pause"
/>
</button>
<a
className="btn btn-small btn-inverse alert-list__btn width-2"
href="https://something.something.darkside?panelId=1&fullscreen=true&edit=true&tab=alert"
title="Edit alert rule"
>
<i
className="icon-gf icon-gf-settings"
/>
</a>
</div>
</li>
`;
public/app/features/alerting/state/actions.ts
......@@ -2,17 +2,32 @@ import { Dispatch } from 'redux';
import { getBackendSrv } from 'app/core/services/backend_srv';
import { AlertRule } from 'app/types';
export enum ActionTypes {
LoadAlertRules = 'LOAD_ALERT_RULES',
SetSearchQuery = 'SET_SEARCH_QUERY',
}
export interface LoadAlertRulesAction {
type: 'LOAD_ALERT_RULES';
type: ActionTypes.LoadAlertRules;
payload: AlertRule[];
}
export interface SetSearchQueryAction {
type: ActionTypes.SetSearchQuery;
payload: string;
}
export const loadAlertRules = (rules: AlertRule[]): LoadAlertRulesAction => ({
type: 'LOAD_ALERT_RULES',
type: ActionTypes.LoadAlertRules,
payload: rules,
});
export type Action = LoadAlertRulesAction;
export const setSearchQuery = (query: string): SetSearchQueryAction => ({
type: ActionTypes.SetSearchQuery,
payload: query,
});
export type Action = LoadAlertRulesAction | SetSearchQueryAction;
export const getAlertRulesAsync = (options: { state: string }) => async (
dispatch: Dispatch<Action>
......
public/app/features/alerting/state/reducers.ts
import { Action } from './actions';
import { AlertRule } from 'app/types';
import alertDef from './alertDef';
import moment from 'moment';
import { AlertRulesState } from 'app/types';
import { Action, ActionTypes } from './actions';
import alertDef from './alertDef';
export const initialState: AlertRule[] = [];
export const initialState: AlertRulesState = { items: [], searchQuery: '' };
export function setStateFields(rule, state) {
const stateModel = alertDef.getStateDisplayModel(state);
......@@ -16,9 +16,9 @@ export function setStateFields(rule, state) {
.replace(' ago', '');
}
export const alertRulesReducer = (state = initialState, action: Action): AlertRule[] => {
export const alertRulesReducer = (state = initialState, action: Action): AlertRulesState => {
switch (action.type) {
case 'LOAD_ALERT_RULES': {
case ActionTypes.LoadAlertRules: {
const alertRules = action.payload;
for (const rule of alertRules) {
......@@ -34,8 +34,11 @@ export const alertRulesReducer = (state = initialState, action: Action): AlertRu
}
}
return alertRules;
return { items: alertRules, searchQuery: state.searchQuery };
}
case ActionTypes.SetSearchQuery:
return { items: state.items, searchQuery: action.payload };
}
return state;
......
public/app/features/alerting/state/selectors.ts 0 → 100644
export const getSearchQuery = state => state.searchQuery;
export const getAlertRuleItems = state => {
const regex = new RegExp(state.searchQuery, 'i');
return state.items.filter(item => {
return regex.test(item.name) || regex.test(item.stateText) || regex.test(item.info);
});
};
public/app/types/index.ts
......@@ -69,8 +69,13 @@ export type NavIndex = { [s: string]: NavModelItem };
// Store
//
export interface AlertRulesState {
items: AlertRule[];
searchQuery: string;
}
export interface StoreState {
navIndex: NavIndex;
location: LocationState;
alertRules: AlertRule[];
alertRules: AlertRulesState;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment