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
2025-02-25 18:55:37 -06:00 · 2021-01-26 12:12:41 +01:00 · 2021-01-26 12:12:41 +01:00 · 2c2869a0ae
commit 2c2869a0ae
parent 10aabe8ce3
11 changed files with 243 additions and 179 deletions
--- a/lerna.json
+++ b/lerna.json
@ -1,8 +1,6 @@
 {
  "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
@ -1,7 +1,6 @@
 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,39 +25,33 @@ 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}`} />
-        </Card.Figure>
-        <Card.Meta>
-          <span key="state">
-            <span key="text" className={`${rule.stateClass}`}>
-              {renderText(rule.stateText)}{' '}
-            </span>
-            for {rule.stateAge}
+    <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}`} />
+      </Card.Figure>
+      <Card.Meta>
+        <span key="state">
+          <span key="text" className={`${rule.stateClass}`}>
+            {renderText(rule.stateText)}{' '}
          </span>
-          {rule.info ? renderText(rule.info) : null}
-        </Card.Meta>
-        <Card.Actions>
-          <Button
-            key="play"
-            variant="secondary"
-            icon={rule.state === 'paused' ? 'play' : 'pause'}
-            onClick={onTogglePause}
-          >
-            {rule.state === 'paused' ? 'Resume' : 'Pause'}
-          </Button>
-          <LinkButton key="edit" variant="secondary" href={ruleUrl} icon="cog">
-            Edit alert
-          </LinkButton>
-        </Card.Actions>
-      </Card>
-    </li>
+          for {rule.stateAge}
+        </span>
+        {rule.info ? renderText(rule.info) : null}
+      </Card.Meta>
+      <Card.Actions>
+        <Button
+          key="play"
+          variant="secondary"
+          icon={rule.state === 'paused' ? 'play' : 'pause'}
+          onClick={onTogglePause}
+        >
+          {rule.state === 'paused' ? 'Resume' : 'Pause'}
+        </Button>
+        <LinkButton key="edit" variant="secondary" href={ruleUrl} icon="cog">
+          Edit alert
+        </LinkButton>
+      </Card.Actions>
+    </Card>
  );
 };

--- 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>
-            <ol className="alert-rule-list">
-              {alertRules.map((rule) => (
-                <AlertRuleItem
-                  rule={rule}
-                  key={rule.id}
+          <VerticalGroup spacing="none">
+            {alertRules.map((rule, index) => {
+              // Alert definition has "title" as name property.
+              if (rule.hasOwnProperty('name')) {
+                return (
+                  <AlertRuleItem
+                    rule={rule as AlertRule}
+                    key={rule.id}
+                    search={search}
+                    onTogglePause={() => this.onTogglePause(rule as AlertRule)}
+                  />
+                );
+              }
+              return (
+                <AlertDefinitionItem
+                  key={`${rule.id}-${index}`}
+                  alertDefinition={rule as AlertDefinition}
                  search={search}
-                  onTogglePause={() => this.onTogglePause(rule)}
                />
-              ))}
-            </ol>
-          </section>
+              );
+            })}
+          </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,54 +80,52 @@ exports[`Render should render alert rules 1`] = `
        How to add an alert
      </Button>
    </div>
-    <section>
-      <ol
-        className="alert-rule-list"
-      >
-        <AlertRuleItem
-          key="1"
-          onTogglePause={[Function]}
-          rule={
-            Object {
-              "dashboardId": 7,
-              "dashboardSlug": "alerting-with-testdata",
-              "dashboardUid": "ggHbN42mk",
-              "evalData": Object {},
-              "evalDate": "0001-01-01T00:00:00Z",
-              "executionError": "",
-              "id": 1,
-              "name": "TestData - Always OK",
-              "newStateDate": "2018-09-04T10:01:01+02:00",
-              "panelId": 3,
-              "state": "ok",
-              "url": "/d/ggHbN42mk/alerting-with-testdata",
-            }
+    <VerticalGroup
+      spacing="none"
+    >
+      <AlertRuleItem
+        key="1"
+        onTogglePause={[Function]}
+        rule={
+          Object {
+            "dashboardId": 7,
+            "dashboardSlug": "alerting-with-testdata",
+            "dashboardUid": "ggHbN42mk",
+            "evalData": Object {},
+            "evalDate": "0001-01-01T00:00:00Z",
+            "executionError": "",
+            "id": 1,
+            "name": "TestData - Always OK",
+            "newStateDate": "2018-09-04T10:01:01+02:00",
+            "panelId": 3,
+            "state": "ok",
+            "url": "/d/ggHbN42mk/alerting-with-testdata",
          }
-          search=""
-        />
-        <AlertRuleItem
-          key="3"
-          onTogglePause={[Function]}
-          rule={
-            Object {
-              "dashboardId": 7,
-              "dashboardSlug": "alerting-with-testdata",
-              "dashboardUid": "ggHbN42mk",
-              "evalData": Object {},
-              "evalDate": "0001-01-01T00:00:00Z",
-              "executionError": "error",
-              "id": 3,
-              "name": "TestData - ok",
-              "newStateDate": "2018-09-04T10:01:01+02:00",
-              "panelId": 3,
-              "state": "ok",
-              "url": "/d/ggHbN42mk/alerting-with-testdata",
-            }
+        }
+        search=""
+      />
+      <AlertRuleItem
+        key="3"
+        onTogglePause={[Function]}
+        rule={
+          Object {
+            "dashboardId": 7,
+            "dashboardSlug": "alerting-with-testdata",
+            "dashboardUid": "ggHbN42mk",
+            "evalData": Object {},
+            "evalDate": "0001-01-01T00:00:00Z",
+            "executionError": "error",
+            "id": 3,
+            "name": "TestData - ok",
+            "newStateDate": "2018-09-04T10:01:01+02:00",
+            "panelId": 3,
+            "state": "ok",
+            "url": "/d/ggHbN42mk/alerting-with-testdata",
          }
-          search=""
-        />
-      </ol>
-    </section>
+        }
+        search=""
+      />
+    </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"
-      />
-    </section>
+    <VerticalGroup
+      spacing="none"
+    />
  </PageContents>
 </Page>
 `;
--- a/public/app/features/alerting/components/AlertDefinitionItem.tsx
+++ b/public/app/features/alerting/components/AlertDefinitionItem.tsx
@ -0,0 +1,38 @@
+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
@ -1,5 +1,5 @@
 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,21 +12,23 @@ describe('Get search query', () => {
 describe('Get alert rule items', () => {
  it('should get alert rule items', () => {
    const state = {
-      items: [
-        {
-          id: 1,
-          dashboardId: 1,
-          panelId: 1,
-          name: '',
-          state: '',
-          stateText: '',
-          stateIcon: '',
-          stateClass: '',
-          stateAge: '',
-          url: '',
-        },
-      ],
-      searchQuery: '',
+      alertRules: {
+        items: [
+          {
+            id: 1,
+            dashboardId: 1,
+            panelId: 1,
+            name: '',
+            state: '',
+            stateText: '',
+            stateIcon: '',
+            stateClass: '',
+            stateAge: '',
+            url: '',
+          },
+        ],
+        searchQuery: '',
+      },
    };

    const result = getAlertRuleItems(state as any);
@ -35,57 +37,59 @@ describe('Get alert rule items', () => {

  it('should filter rule items based on search query', () => {
    const state = {
-      items: [
-        {
-          id: 1,
-          dashboardId: 1,
-          panelId: 1,
-          name: 'dashboard',
-          state: '',
-          stateText: '',
-          stateIcon: '',
-          stateClass: '',
-          stateAge: '',
-          url: '',
-        },
-        {
-          id: 2,
-          dashboardId: 3,
-          panelId: 1,
-          name: 'dashboard2',
-          state: '',
-          stateText: '',
-          stateIcon: '',
-          stateClass: '',
-          stateAge: '',
-          url: '',
-        },
-        {
-          id: 3,
-          dashboardId: 5,
-          panelId: 1,
-          name: 'hello',
-          state: '',
-          stateText: '',
-          stateIcon: '',
-          stateClass: '',
-          stateAge: '',
-          url: '',
-        },
-        {
-          id: 4,
-          dashboardId: 7,
-          panelId: 1,
-          name: 'test',
-          state: '',
-          stateText: 'dashboard',
-          stateIcon: '',
-          stateClass: '',
-          stateAge: '',
-          url: '',
-        },
-      ],
-      searchQuery: 'dashboard',
+      alertRules: {
+        items: [
+          {
+            id: 1,
+            dashboardId: 1,
+            panelId: 1,
+            name: 'dashboard',
+            state: '',
+            stateText: '',
+            stateIcon: '',
+            stateClass: '',
+            stateAge: '',
+            url: '',
+          },
+          {
+            id: 2,
+            dashboardId: 3,
+            panelId: 1,
+            name: 'dashboard2',
+            state: '',
+            stateText: '',
+            stateIcon: '',
+            stateClass: '',
+            stateAge: '',
+            url: '',
+          },
+          {
+            id: 3,
+            dashboardId: 5,
+            panelId: 1,
+            name: 'hello',
+            state: '',
+            stateText: '',
+            stateIcon: '',
+            stateClass: '',
+            stateAge: '',
+            url: '',
+          },
+          {
+            id: 4,
+            dashboardId: 7,
+            panelId: 1,
+            name: 'test',
+            state: '',
+            stateText: 'dashboard',
+            stateIcon: '',
+            stateClass: '',
+            stateAge: '',
+            url: '',
+          },
+        ],
+        searchQuery: 'dashboard',
+      },
    };

    const result = getAlertRuleItems(state as any);
--- a/public/app/features/alerting/state/selectors.ts
+++ b/public/app/features/alerting/state/selectors.ts
@ -1,13 +1,27 @@
-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) => {
-    return regex.test(item.name) || regex.test(item.stateText) || regex.test(item.info!);
-  });
+  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 {