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

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
2c2869a0 · Peter Holmberg · GitHub · 10aabe8c · 2c2869a0 · 2c2869a0
Commit 2c2869a0 authored Jan 26, 2021 by Peter Holmberg Committed by GitHub Jan 26, 2021
11 changed files
--- a/lerna.json
+++ b/lerna.json
 {
  "npmClient": "yarn",
  "useWorkspaces": true,
-  "packages": [
+  "packages": ["packages/*"],
-    "packages/*"
-  ],
  "version": "7.5.0-pre.0"
 }
--- a/public/app/features/alerting/AlertRuleItem.tsx
+++ b/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>
  );
 };

--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/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>
+          <VerticalGroup spacing="none">
-            <ol className="alert-rule-list">
+            {alertRules.map((rule, index) => {
-              {alertRules.map((rule) => (
+              // 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 = {

--- a/public/app/features/alerting/NextGenAlertingPage.tsx
+++ b/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;

--- a/public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
+++ b/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>
+    <VerticalGroup
-      <ol
+      spacing="none"
-        className="alert-rule-list"
    >
      <AlertRuleItem
        key="1"
@@ -126,8 +125,7 @@ exports[`Render should render alert rules 1`] = `
        }
        search=""
      />
-      </ol>
+    </VerticalGroup>
-    </section>
  </PageContents>
 </Page>
 `;
@@ -212,11 +210,9 @@ exports[`Render should render component 1`] = `
        How to add an alert
      </Button>
    </div>
-    <section>
+    <VerticalGroup
-      <ol
+      spacing="none"
-        className="alert-rule-list"
    />
-    </section>
  </PageContents>
 </Page>
 `;
--- a/public/app/features/alerting/components/AlertDefinitionItem.tsx
+++ b/public/app/features/alerting/components/AlertDefinitionItem.tsx
+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>
+);
--- a/public/app/features/alerting/state/actions.ts
+++ b/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));
  };
 }

--- a/public/app/features/alerting/state/reducers.ts
+++ b/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;

--- a/public/app/features/alerting/state/selectors.test.ts
+++ b/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);

--- a/public/app/features/alerting/state/selectors.ts
+++ b/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) => {
+export const getAlertRuleItems = (state: StoreState) => {
-  const regex = new RegExp(state.searchQuery, 'i');
+  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) => {

--- a/public/app/types/alerting.ts
+++ b/public/app/types/alerting.ts
@@ -142,6 +142,7 @@ export interface AlertDefinitionState {
  queryOptions: QueryGroupOptions;
  queryRunner: PanelQueryRunner;
  data: PanelData[];
+  alertDefinitions: AlertDefinition[];
 }
 export interface AlertDefinition {