Skip to content

N
nexpie-grafana-theme
Commit 2c2869a0 by Peter Holmberg Committed by GitHub
Options

AlertingNG: List saved Alert definitions in Alert Rule list (#30603) 

* fetch alert definitions

* add new card for ng definitions

* get alerts from selector

* fix tests

* replace ol/li with verticalgroup
parent 10aabe8c
Showing with 106 additions and 42 deletions
lerna.json
{
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
],
"packages": ["packages/*"],
"version": "7.5.0-pre.0"
}
public/app/features/alerting/AlertRuleItem.tsx
import React, { useCallback } from 'react';
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { css } from 'emotion';
import { Icon, IconName, Button, LinkButton, Card } from '@grafana/ui';
import { AlertRule } from '../../types';
......@@ -26,11 +25,6 @@ const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => {
);
return (
<li
className={css`
width: 100%;
`}
>
<Card heading={<a href={ruleUrl}>{renderText(rule.name)}</a>}>
<Card.Figure>
<Icon size="xl" name={rule.stateIcon as IconName} className={`alert-rule-item__icon ${rule.stateClass}`} />
......@@ -58,7 +52,6 @@ const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => {
</LinkButton>
</Card.Actions>
</Card>
</li>
);
};
......
public/app/features/alerting/AlertRuleList.tsx
......@@ -6,17 +6,18 @@ import AlertRuleItem from './AlertRuleItem';
import appEvents from 'app/core/app_events';
import { updateLocation } from 'app/core/actions';
import { getNavModel } from 'app/core/selectors/navModel';
import { AlertRule, CoreEvents, StoreState } from 'app/types';
import { AlertDefinition, AlertRule, CoreEvents, StoreState } from 'app/types';
import { getAlertRulesAsync, togglePauseAlertRule } from './state/actions';
import { getAlertRuleItems, getSearchQuery } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { NavModel, SelectableValue } from '@grafana/data';
import { setSearchQuery } from './state/reducers';
import { Button, Select } from '@grafana/ui';
import { Button, Select, VerticalGroup } from '@grafana/ui';
import { AlertDefinitionItem } from './components/AlertDefinitionItem';
export interface Props {
navModel: NavModel;
alertRules: AlertRule[];
alertRules: Array<AlertRule | AlertDefinition>;
updateLocation: typeof updateLocation;
getAlertRulesAsync: typeof getAlertRulesAsync;
setSearchQuery: typeof setSearchQuery;
......@@ -121,18 +122,28 @@ export class AlertRuleList extends PureComponent<Props, any> {
How to add an alert
</Button>
</div>
<section>
<ol className="alert-rule-list">
{alertRules.map((rule) => (
<VerticalGroup spacing="none">
{alertRules.map((rule, index) => {
// Alert definition has "title" as name property.
if (rule.hasOwnProperty('name')) {
return (
<AlertRuleItem
rule={rule}
rule={rule as AlertRule}
key={rule.id}
search={search}
onTogglePause={() => this.onTogglePause(rule)}
onTogglePause={() => this.onTogglePause(rule as AlertRule)}
/>
))}
</ol>
</section>
);
}
return (
<AlertDefinitionItem
key={`${rule.id}-${index}`}
alertDefinition={rule as AlertDefinition}
search={search}
/>
);
})}
</VerticalGroup>
</Page.Contents>
</Page>
);
......@@ -141,10 +152,11 @@ export class AlertRuleList extends PureComponent<Props, any> {
const mapStateToProps = (state: StoreState) => ({
navModel: getNavModel(state.navIndex, 'alert-list'),
alertRules: getAlertRuleItems(state.alertRules),
alertRules: getAlertRuleItems(state),
stateFilter: state.location.query.state,
search: getSearchQuery(state.alertRules),
isLoading: state.alertRules.isLoading,
ngAlertDefinitions: state.alertDefinition.alertDefinitions,
});
const mapDispatchToProps = {
......
public/app/features/alerting/NextGenAlertingPage.tsx
......@@ -162,13 +162,10 @@ export default hot(module)(
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
wrapper: css`
width: 100%;
width: calc(100% - 55px);
height: 100%;
position: fixed;
z-index: ${theme.zIndex.sidemenu};
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${theme.colors.dashboardBg};
display: flex;
......
public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
......@@ -80,9 +80,8 @@ exports[`Render should render alert rules 1`] = `
How to add an alert
</Button>
</div>
<section>
<ol
className="alert-rule-list"
<VerticalGroup
spacing="none"
>
<AlertRuleItem
key="1"
......@@ -126,8 +125,7 @@ exports[`Render should render alert rules 1`] = `
}
search=""
/>
</ol>
</section>
</VerticalGroup>
</PageContents>
</Page>
`;
......@@ -212,11 +210,9 @@ exports[`Render should render component 1`] = `
How to add an alert
</Button>
</div>
<section>
<ol
className="alert-rule-list"
<VerticalGroup
spacing="none"
/>
</section>
</PageContents>
</Page>
`;
public/app/features/alerting/components/AlertDefinitionItem.tsx 0 → 100644
import React, { FC } from 'react';
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { Card, FeatureBadge, Icon } from '@grafana/ui';
import { AlertDefinition } from 'app/types';
import { FeatureState } from '@grafana/data';
interface Props {
alertDefinition: AlertDefinition;
search: string;
}
export const AlertDefinitionItem: FC<Props> = ({ alertDefinition, search }) => {
return (
<Card heading={CardTitle(alertDefinition.title, search)}>
<Card.Figure>
<Icon size="xl" name="question-circle" className="alert-rule-item__icon" />
</Card.Figure>
<Card.Meta>
<span key="state">
<span key="text">{alertDefinition.description}</span>
</span>
</Card.Meta>
</Card>
);
};
const CardTitle = (title: string, search: string) => (
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<Highlighter
key={title}
highlightClassName="highlight-search-match"
textToHighlight={title}
searchWords={[search]}
/>
<FeatureBadge featureState={FeatureState.beta} />
</div>
);
public/app/features/alerting/state/actions.ts
import { AppEvents, dateMath } from '@grafana/data';
import { getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
import { appEvents } from 'app/core/core';
import { updateLocation } from 'app/core/actions';
import store from 'app/core/store';
......@@ -12,6 +12,7 @@ import {
ALERT_DEFINITION_UI_STATE_STORAGE_KEY,
updateAlertDefinition,
setQueryOptions,
setAlertDefinitions,
} from './reducers';
import {
AlertDefinition,
......@@ -29,6 +30,12 @@ export function getAlertRulesAsync(options: { state: string }): ThunkResult<void
return async (dispatch) => {
dispatch(loadAlertRules());
const rules: AlertRuleDTO[] = await getBackendSrv().get('/api/alerts', options);
if (config.featureToggles.ngalert) {
const ngAlertDefinitions = await getBackendSrv().get('/api/alert-definitions');
dispatch(setAlertDefinitions(ngAlertDefinitions.results));
}
dispatch(loadedAlertRules(rules));
};
}
......
public/app/features/alerting/state/reducers.ts
......@@ -63,6 +63,7 @@ export const initialAlertDefinitionState: AlertDefinitionState = {
queryRunner: new PanelQueryRunner(dataConfig),
uiState: { ...store.getObject(ALERT_DEFINITION_UI_STATE_STORAGE_KEY, DEFAULT_ALERT_DEFINITION_UI_STATE) },
data: [],
alertDefinitions: [] as AlertDefinition[],
};
function convertToAlertRule(dto: AlertRuleDTO, state: string): AlertRule {
......@@ -170,6 +171,9 @@ const alertDefinitionSlice = createSlice({
queryOptions: action.payload,
};
},
setAlertDefinitions: (state: AlertDefinitionState, action: PayloadAction<AlertDefinition[]>) => {
return { ...state, alertDefinitions: action.payload };
},
},
});
......@@ -181,7 +185,7 @@ export const {
resetSecureField,
} = notificationChannelSlice.actions;
export const { setUiState, updateAlertDefinition, setQueryOptions } = alertDefinitionSlice.actions;
export const { setUiState, updateAlertDefinition, setQueryOptions, setAlertDefinitions } = alertDefinitionSlice.actions;
export const alertRulesReducer = alertRulesSlice.reducer;
export const notificationChannelReducer = notificationChannelSlice.reducer;
......
public/app/features/alerting/state/selectors.test.ts
......@@ -12,6 +12,7 @@ describe('Get search query', () => {
describe('Get alert rule items', () => {
it('should get alert rule items', () => {
const state = {
alertRules: {
items: [
{
id: 1,
......@@ -27,6 +28,7 @@ describe('Get alert rule items', () => {
},
],
searchQuery: '',
},
};
const result = getAlertRuleItems(state as any);
......@@ -35,6 +37,7 @@ describe('Get alert rule items', () => {
it('should filter rule items based on search query', () => {
const state = {
alertRules: {
items: [
{
id: 1,
......@@ -86,6 +89,7 @@ describe('Get alert rule items', () => {
},
],
searchQuery: 'dashboard',
},
};
const result = getAlertRuleItems(state as any);
......
public/app/features/alerting/state/selectors.ts
import { AlertRulesState, NotificationChannelState } from 'app/types';
import { AlertDefinition, AlertRule, AlertRulesState, NotificationChannelState, StoreState } from 'app/types';
import { config } from '@grafana/runtime';
export const getSearchQuery = (state: AlertRulesState) => state.searchQuery;
export const getAlertRuleItems = (state: AlertRulesState) => {
const regex = new RegExp(state.searchQuery, 'i');
export const getAlertRuleItems = (state: StoreState) => {
const regex = new RegExp(state.alertRules.searchQuery, 'i');
const result: Array<AlertRule | AlertDefinition> = [];
return state.items.filter((item) => {
result.push(
...state.alertRules.items.filter((item) => {
return regex.test(item.name) || regex.test(item.stateText) || regex.test(item.info!);
});
})
);
if (config.featureToggles.ngalert) {
result.push(
...state.alertDefinition.alertDefinitions.filter((item) => {
return regex.test(item.title);
})
);
}
return result;
};
export const getNotificationChannel = (state: NotificationChannelState, channelId: number) => {
......
public/app/types/alerting.ts
......@@ -142,6 +142,7 @@ export interface AlertDefinitionState {
queryOptions: QueryGroupOptions;
queryRunner: PanelQueryRunner;
data: PanelData[];
alertDefinitions: AlertDefinition[];
}
export interface AlertDefinition {
......
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