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

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,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>
   );
 };
 

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 = {

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,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>
 `;

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>
+);

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,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);

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) => {
-    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) => {

public/app/types/alerting.ts

@@ -142,6 +142,7 @@ export interface AlertDefinitionState {
   queryOptions: QueryGroupOptions;
   queryRunner: PanelQueryRunner;
   data: PanelData[];
+  alertDefinitions: AlertDefinition[];
 }
 
 export interface AlertDefinition {