PMM-10344: new Alerting for Grafana 9 (#482)

* PMM-10091 add changes from alerting poc

* PMM-10091 fix tabs height

* PMM-10091 fix highlight param

* PMM-10091 fix table width break

* PMM-10344 add percona to rule types

* PMM-10344 add templated alert to selection

* PMM-10344 first migration to react-hook-form

* PMM-10344 first working version

* PMM-10344 use grafana's Label

* PMM-10344 remove unused code

* PMM-10344 add error messages

* PMM-10344 make templated alert rule default

* PMM-10344 cleanup alerts code

* PMM-10344 alert rule types on core

* PMM-10344 fix imports

* PMM-10344 fix getFloatDescription

* PMM-10344 add key to templates dropdown

* PMM-10344 check IA status

* PMM-10344 fix tabs height

* PMM-10344 link from templates to new rule

* PMM-10344 use query params to select template

* PMM-10344 add loading status to select

* PMM-10344 first version with alertmanager's api

* PMM-10344 use actions to show/hide details

* PMM-10344 adapt test

* PMM-10344 send Alerting toggle out of tech preview

* PMM-10344 remove notifs channels page

* PMM-10344 fix alerting tests

* PMM-10344 remove useless backticks

* PMM-10344 use receivers from store

* PMM-10344 use redux to store rule templates

* PMM-10344 remove moment from AlertRuleTemplate

* PMM-10344 fix date format

* PMM-10344 change copy

* PMM-10344 remove disabled field

* PMM-10344 remove notification channels

* PMM-10344 change filter fields

* PMM-10344 Allow group/folder selection

* PMM-10344 add @percona annotations

* PMM-10344 change API endpoint

* PMM-10344 set minimum duration

* PMM-10344 "for" as string

* PMM-10344 fix double error toast

* PMM-10344 change duration label

* PMM-10344 send duration always as seconds

* PMM-10344 hide communication settings

* PMM-10344 remove alerting item if off

* PMM-10344 use default name

* PMM-10344 set default group

* PMM-10344 break word in rules table

* PMM-10344 fix double tabs

* PMM-10344 fix bad import in test

Author: fabio-silva

packages/grafana-data/src/types/datasource.ts

@@ -341,6 +341,7 @@ abstract class DataSourceApi<
    * Defines new variable support
    * @alpha -- experimental
    */
+  // @ts-ignore
   variables?:
     | StandardVariableSupport<DataSourceApi<TQuery, TOptions>>
     | CustomVariableSupport<DataSourceApi<TQuery, TOptions>>

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -26,8 +26,9 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false
     tabs: css`
       position: relative;
       display: flex;
-      height: ${theme.components.menuTabs.height}px;
+      ${!!vertical ? 'height' : 'min-height'}: ${theme.components.menuTabs.height}px;
       flex-direction: ${!!vertical ? 'column' : 'row'};
+      flex-wrap: ${!!vertical ? 'no-wrap' : 'wrap'};
     `,
   };
 });

public/app/core/components/NavBar/NavBar.tsx

@@ -27,7 +27,6 @@ import { NavBarToggle } from './NavBarToggle';
 import {
   getPmmSettingsPage,
   PMM_ADD_INSTANCE_PAGE,
-  PMM_ALERTING_PAGE,
   PMM_BACKUP_PAGE,
   PMM_DBAAS_PAGE,
   PMM_ENTITLEMENTS_PAGE,
@@ -46,6 +45,7 @@ import {
   getActiveItem,
   isMatchOrInnerMatch,
   isSearchActive,
+  removeAlertingMenuItem,
   SEARCH_ITEM_ID,
 } from './utils';
 
@@ -62,7 +62,7 @@ export const NavBar = React.memo(() => {
   const dispatch = useDispatch();
   const kiosk = getKioskMode();
   const { result } = useSelector(getPerconaSettings);
-  const { alertingEnabled } = result!;
+  const { alertingEnabled, sttEnabled, dbaasEnabled, backupEnabled } = result!;
   const { isPlatformUser, isAuthorized } = useSelector(getPerconaUser);
   const [showSwitcherModal, setShowSwitcherModal] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -114,11 +114,11 @@ export const NavBar = React.memo(() => {
     .map((item) => enrichWithClickDispatch(item, dispatch, dispatchOffset));
 
   const activeItem = isSearchActive(location) ? searchItem : getActiveItem(navTree, location.pathname);
+  const iaMenuItem = alertingEnabled ? buildIntegratedAlertingMenuItem(coreItems) : removeAlertingMenuItem(coreItems);
 
   // @PERCONA
   // All these dispatches are our pages
   dispatch(updateNavIndex(getPmmSettingsPage(alertingEnabled)));
-  dispatch(updateNavIndex(PMM_ALERTING_PAGE));
   dispatch(updateNavIndex(PMM_STT_PAGE));
   dispatch(updateNavIndex(PMM_DBAAS_PAGE));
   dispatch(updateNavIndex(PMM_BACKUP_PAGE));
@@ -128,12 +128,14 @@ export const NavBar = React.memo(() => {
   dispatch(updateNavIndex(PMM_ENTITLEMENTS_PAGE));
   dispatch(updateNavIndex(PMM_ENVIRONMENT_OVERVIEW_PAGE));
 
+  if (iaMenuItem) {
+    dispatch(updateNavIndex(iaMenuItem));
+  }
+
   // @PERCONA
   useEffect(() => {
     const updatedNavTree = cloneDeep(initialState);
 
-    const { sttEnabled, alertingEnabled, dbaasEnabled, backupEnabled } = result!;
-
     // @PERCONA
     if (isPlatformUser) {
       updatedNavTree.push(PMM_ENTITLEMENTS_PAGE);
@@ -145,10 +147,6 @@ export const NavBar = React.memo(() => {
     if (isAuthorized) {
       buildInventoryAndSettings(updatedNavTree);
 
-      if (alertingEnabled) {
-        buildIntegratedAlertingMenuItem(updatedNavTree);
-      }
-
       if (sttEnabled) {
         updatedNavTree.push(PMM_STT_PAGE);
       }

public/app/core/components/NavBar/constants.ts

@@ -100,42 +100,20 @@ export const PMM_BACKUP_PAGE: NavModelItem = {
   ],
 };
 
-export const PMM_ALERTING_PAGE: NavModelItem = {
-  id: 'integrated-alerting',
-  icon: 'bell',
-  text: 'Integrated Alerting',
-  url: `${config.appSubUrl}/integrated-alerting`,
-  subTitle: 'Percona Integrated Alerting',
-  section: NavSection.Core,
-  breadcrumbs: [
-    {
-      title: 'Integrated Alerting',
-      url: `${config.appSubUrl}/integrated-alerting`,
-    },
-  ],
-  children: [
-    {
-      id: 'integrated-alerting-alerts',
-      text: 'Alerts',
-      url: `${config.appSubUrl}/integrated-alerting/alerts`,
-    },
-    {
-      id: 'integrated-alerting-rules',
-      text: 'Alert Rules',
-      url: `${config.appSubUrl}/integrated-alerting/alert-rules`,
-    },
-    {
-      id: 'integrated-alerting-templates',
-      text: 'Alert Rule Templates',
-      url: `${config.appSubUrl}/integrated-alerting/alert-rule-templates`,
-    },
-    {
-      id: 'integrated-alerting-notification-channels',
-      text: 'Notification Channels',
-      url: `${config.appSubUrl}/integrated-alerting/notification-channels`,
-    },
-  ],
-};
+export const PMM_ALERTING_PERCONA_ALERTS: NavModelItem[] = [
+  {
+    id: 'integrated-alerting-alerts',
+    text: 'Fired alerts',
+    icon: 'info-circle',
+    url: `${config.appSubUrl}/alerting/alerts`,
+  },
+  {
+    id: 'integrated-alerting-templates',
+    text: 'Alert rule templates',
+    icon: 'brackets-curly',
+    url: `${config.appSubUrl}/alerting/alert-rule-templates`,
+  },
+];
 
 export const PMM_INVENTORY_PAGE: NavModelItem = {
   id: 'inventory',
@@ -210,13 +188,14 @@ export const getPmmSettingsPage = (alertingEnabled = false): NavModelItem => {
     },
   ];
 
-  if (alertingEnabled) {
-    children.push({
-      id: 'settings-communication',
-      text: 'Communication',
-      url: `${config.appSubUrl}/settings/communication`,
-    });
-  }
+  // TODO remove after integrating SMTP/slack with Grafana's alerting system
+  // if (alertingEnabled) {
+  //   children.push({
+  //     id: 'settings-communication',
+  //     text: 'Communication',
+  //     url: `${config.appSubUrl}/settings/communication`,
+  //   });
+  // }
   const page: NavModelItem = {
     id: 'settings',
     icon: 'percona-setting',

public/app/core/components/NavBar/utils.ts

@@ -12,7 +12,7 @@ import appEvents from '../../app_events';
 import { getFooterLinks } from '../Footer/Footer';
 import { HelpModal } from '../help/HelpModal';
 
-import { PMM_ADD_INSTANCE_PAGE } from './constants';
+import { PMM_ADD_INSTANCE_PAGE, PMM_ALERTING_PERCONA_ALERTS } from './constants';
 
 export const SEARCH_ITEM_ID = 'search';
 export const NAV_MENU_PORTAL_CONTAINER_ID = 'navbar-menu-portal-container';
@@ -199,30 +199,33 @@ export function getNavModelItemKey(item: NavModelItem) {
   return item.id ?? item.text;
 }
 
-export const buildIntegratedAlertingMenuItem = (mainLinks: NavModelItem[]): NavModelItem[] => {
-  const integratedAlertingLink = {
-    id: 'integrated-alerting',
-    text: 'Integrated Alerting',
-    icon: 'bell',
-    url: `${config.appSubUrl}/integrated-alerting`,
-  };
+export const buildIntegratedAlertingMenuItem = (mainLinks: NavModelItem[]): NavModelItem | undefined => {
+  const alertingItem = mainLinks.find(({ id }) => id === 'alerting');
 
-  const alertingIndex = mainLinks.findIndex(({ id }) => id === 'alerting');
+  if (alertingItem?.url) {
+    alertingItem.url = `${config.appSubUrl}/alerting/alerts`;
+  }
 
-  if (alertingIndex === -1) {
-    mainLinks.push({
-      id: 'alerting',
-      text: 'Alerting',
-      icon: 'bell',
-      url: `${config.appSubUrl}/integrated-alerting/alerts`,
-      subTitle: 'Alert rules & notifications',
-      children: [integratedAlertingLink],
-    });
-  } else {
-    mainLinks[alertingIndex].children?.unshift(integratedAlertingLink, DIVIDER);
+  alertingItem?.children?.unshift(...PMM_ALERTING_PERCONA_ALERTS);
+  return alertingItem;
+};
+
+export const removeAlertingMenuItem = (mainLinks: NavModelItem[]) => {
+  const alertingItem = mainLinks.find(({ id }) => id === 'alerting');
+
+  PMM_ALERTING_PERCONA_ALERTS.forEach((alertingTab, idx) => {
+    const item = alertingItem?.children?.find((c) => c.id === alertingTab.id);
+
+    if (item) {
+      alertingItem?.children?.splice(idx, 1);
+    }
+  });
+
+  if (alertingItem?.url) {
+    alertingItem.url = `${config.appSubUrl}/alerting/list`;
   }
 
-  return mainLinks;
+  return alertingItem;
 };
 
 export const buildInventoryAndSettings = (mainLinks: NavModelItem[]): NavModelItem[] => {

public/app/core/components/Select/FolderPicker.tsx

@@ -14,7 +14,9 @@ import appEvents from '../../app_events';
 export type FolderPickerFilter = (hits: DashboardSearchHit[]) => DashboardSearchHit[];
 
 export interface Props {
-  onChange: ($folder: { title: string; id: number }) => void;
+  // @PERCONA
+  // Added uid here
+  onChange: ($folder: { title: string; id: number; uid: number }) => void;
   enableCreateNew?: boolean;
   rootName?: string;
   enableReset?: boolean;
@@ -137,7 +139,9 @@ export class FolderPicker extends PureComponent<Props, State> {
       {
         folder: newFolder,
       },
-      () => this.props.onChange({ id: newFolder.value!, title: newFolder.label! })
+      // @PERCONA
+      // Added uid here
+      () => this.props.onChange({ id: newFolder.value!, title: newFolder.label!, uid: newFolder.uid })
     );
   };
 
@@ -147,7 +151,9 @@ export class FolderPicker extends PureComponent<Props, State> {
 
     if (newFolder.id > -1) {
       appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);
-      folder = { value: newFolder.id, label: newFolder.title };
+      // @PERCONA
+      // Added uid here
+      folder = { value: newFolder.id, label: newFolder.title, uid: newFolder.uid };
       this.setState(
         {
           folder: newFolder,
@@ -201,7 +207,9 @@ export class FolderPicker extends PureComponent<Props, State> {
       () => {
         // if this is not the same as our initial value notify parent
         if (folder && folder.value !== initialFolderId) {
-          this.props.onChange({ id: folder.value!, title: folder.label! });
+          // @PERCONA
+          // Added uid here
+          this.props.onChange({ id: folder.value!, title: folder.label!, uid: folder.uid });
         }
       }
     );
@@ -234,7 +242,9 @@ export class FolderPicker extends PureComponent<Props, State> {
 
 function mapSearchHitsToOptions(hits: DashboardSearchHit[], filter?: FolderPickerFilter) {
   const filteredHits = filter ? filter(hits) : hits;
-  return filteredHits.map((hit) => ({ label: hit.title, value: hit.id }));
+  // @PERCONA
+  // Added uid here
+  return filteredHits.map((hit) => ({ label: hit.title, value: hit.id, uid: hit.uid }));
 }
 
 interface Args {

public/app/core/reducers/navModel.ts

@@ -63,20 +63,21 @@ export const navIndexReducer = (state: NavIndex = initialState, action: AnyActio
   if (updateNavIndex.match(action)) {
     const newPages: NavIndex = {};
     const payload = action.payload;
-
-    if (payload.children && payload.children.length) {
-      for (const node of payload.children) {
-        if (node.id) {
-          newPages[node.id] = {
-            ...node,
-            parentItem: payload,
-          };
+    if (payload) {
+      if (payload.children && payload.children.length) {
+        for (const node of payload.children) {
+          if (node.id) {
+            newPages[node.id] = {
+              ...node,
+              parentItem: payload,
+            };
+          }
         }
+      } else if (payload.id) {
+        newPages[payload.id] = {
+          ...payload,
+        };
       }
-    } else if (payload.id) {
-      newPages[payload.id] = {
-        ...payload,
-      };
     }
 
     return { ...state, ...newPages };

public/app/features/alerting/routes.tsx

@@ -14,7 +14,7 @@ const commonRoutes: RouteDescriptor[] = [
   {
     path: '/alerting',
     // eslint-disable-next-line react/display-name
-    component: () => <Redirect to="/alerting/list" />,
+    component: () => <Redirect to="/alerting/alerts" />,
   },
 ];
 

public/app/features/alerting/unified/components/DynamicTable.tsx

@@ -236,6 +236,8 @@ const getStyles = <T extends unknown>(
     `,
     bodyCell: css`
       overflow: hidden;
+      // @PERCONA
+      word-break: break-all;
 
       ${theme.breakpoints.down('sm')} {
         grid-column-end: right;

public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx

@@ -1,14 +1,15 @@
 import { css } from '@emotion/css';
 import React, { FC, useMemo, useState } from 'react';
 import { FormProvider, useForm, UseFormWatch } from 'react-hook-form';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, ConfirmModal, CustomScrollbar, PageToolbar, Spinner, useStyles2 } from '@grafana/ui';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
+import { getPerconaSettings } from 'app/percona/shared/core/selectors';
 import { RuleWithLocation } from 'app/types/unified-alerting';
 
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@@ -23,6 +24,7 @@ import { DetailsStep } from './DetailsStep';
 import { GrafanaEvaluationBehavior } from './GrafanaEvaluationBehavior';
 import { NotificationsStep } from './NotificationsStep';
 import { RuleInspector } from './RuleInspector';
+import { TemplateStep } from './TemplateStep/TemplateStep';
 import { QueryAndAlertConditionStep } from './query-and-alert-condition/QueryAndAlertConditionStep';
 
 type Props = {
@@ -35,6 +37,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
   const notifyApp = useAppNotification();
   const [queryParams] = useQueryParams();
   const [showEditYaml, setShowEditYaml] = useState(false);
+  const { result } = useSelector(getPerconaSettings);
 
   const returnTo: string = (queryParams['returnTo'] as string | undefined) ?? '/alerting/list';
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
@@ -47,9 +50,12 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
       ...getDefaultFormValues(),
       queries: getDefaultQueries(),
       ...(queryParams['defaults'] ? JSON.parse(queryParams['defaults'] as string) : {}),
-      type: RuleFormType.grafana,
+      // @PERCONA
+      // Set templated as default
+      type: result && !!result.alertingEnabled ? RuleFormType.templated : RuleFormType.grafana,
+      group: result && !!result.alertingEnabled ? 'default-alert-group' : '',
     };
-  }, [existing, queryParams]);
+  }, [existing, queryParams, result]);
 
   const formAPI = useForm<RuleFormValues>({
     mode: 'onSubmit',
@@ -63,6 +69,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
   const dataSourceName = watch('dataSourceName');
 
   const showStep2 = Boolean(type && (type === RuleFormType.grafana || !!dataSourceName));
+  const showTemplateStep = type === RuleFormType.templated;
 
   const submitState = useUnifiedAlertingSelector((state) => state.ruleForm.saveRule) || initialAsyncRequestState;
   useCleanup((state) => state.unifiedAlerting.ruleForm.saveRule);
@@ -152,6 +159,8 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
           <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <div className={styles.contentInner}>
               <QueryAndAlertConditionStep editingExistingRule={!!existing} />
+              {/* @PERCONA */}
+              {showTemplateStep && <TemplateStep />}
               {showStep2 && (
                 <>
                   {type === RuleFormType.grafana ? <GrafanaEvaluationBehavior /> : <CloudEvaluationBehavior />}