From 33da55c5076bf9e79866ea69ba535d89f4eae9fb Mon Sep 17 00:00:00 2001
From: Yulya Artyukhina <Ferril.darkdiver@gmail.com>
Date: Fri, 18 Aug 2023 12:12:29 +0200
Subject: [PATCH] Improve getting/updating contact points for Grafana Alerting
 integration (#2742)

This PR improves Grafana Alerting integration:
- get alerting contact points "on fly" instead of keeping them in db
- add ability to connect more than one contact point
- add ability to create new contact point on create Grafana Alerting
integration
- show warnings in integration settings for non-active contact points
- remove creation alerting notification policies on create Grafana
Alerting integration

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

---------

Co-authored-by: Rares Mardare <rares.mardare@grafana.com>
---
 src/assets/style/utils.css                    |  23 +-
 src/components/GForm/GForm.tsx                |  55 ++-
 src/components/GForm/GForm.types.ts           |   3 +
 ...IntegrationCollapsibleTreeView.module.scss |   6 +
 .../IntegrationContactPoint.tsx               | 340 +++++++++++++
 .../IntegrationHowToConnect.tsx               | 117 +++++
 .../IntegrationSendDemoAlertModal.tsx         | 134 +++++
 ...llapsedIntegrationRouteDisplay.module.scss |   4 -
 .../IntegrationForm/IntegrationForm.config.ts |  19 +
 ...module.css => IntegrationForm.module.scss} |  22 +
 .../IntegrationForm/IntegrationForm.tsx       | 465 +++++++++++++-----
 .../alert_receive_channel.ts                  |  72 +++
 .../alert_receive_channel.types.ts            |   7 +
 src/pages/integration/Integration.helper.ts   |  10 +-
 src/pages/integration/Integration.module.scss |  39 +-
 src/pages/integration/Integration.tsx         | 302 +++---------
 src/pages/integrations/Integrations.tsx       |   2 +-
 src/types.ts                                  |   4 +
 18 files changed, 1245 insertions(+), 379 deletions(-)
 create mode 100644 src/components/IntegrationContactPoint/IntegrationContactPoint.tsx
 create mode 100644 src/components/IntegrationHowToConnect/IntegrationHowToConnect.tsx
 create mode 100644 src/components/IntegrationSendDemoAlertModal/IntegrationSendDemoAlertModal.tsx
 rename src/containers/IntegrationForm/{IntegrationForm.module.css => IntegrationForm.module.scss} (76%)

diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css
index 2955184968..b48abdd0de 100644
--- a/src/assets/style/utils.css
+++ b/src/assets/style/utils.css
@@ -16,6 +16,10 @@
   align-items: center;
 }
 
+.u-flex-space-between {
+  justify-content: space-between;
+}
+
 .u-flex-grow-1 {
   flex-grow: 1;
 }
@@ -33,7 +37,11 @@
 }
 
 .u-padding-top-md {
-  padding-top: 16px;
+  padding-top: 12px;
+}
+
+.u-margin-bottom-none {
+  margin-bottom: 0;
 }
 
 .u-pull-right {
@@ -108,3 +116,16 @@
 .buttons {
   padding-bottom: 24px;
 }
+
+/* -----
+ * Icons
+ */
+
+.icon-exclamation {
+  color: var(--error-text-color);
+}
+
+.loadingPlaceholder {
+  margin-bottom: 0;
+  margin-right: 4px;
+}
diff --git a/src/components/GForm/GForm.tsx b/src/components/GForm/GForm.tsx
index 4a4fc5a963..2d179af17a 100644
--- a/src/components/GForm/GForm.tsx
+++ b/src/components/GForm/GForm.tsx
@@ -9,6 +9,7 @@ import { FormItem, FormItemType } from 'components/GForm/GForm.types';
 import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
 import { MONACO_READONLY_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
 import GSelect from 'containers/GSelect/GSelect';
+import { CustomFieldSectionRendererProps } from 'containers/IntegrationForm/IntegrationForm';
 import RemoteSelect from 'containers/RemoteSelect/RemoteSelect';
 
 import styles from './GForm.module.scss';
@@ -19,6 +20,8 @@ interface GFormProps {
   form: { name: string; fields: FormItem[] };
   data: any;
   onSubmit: (data: any) => void;
+
+  customFieldSectionRenderer?: React.FC<CustomFieldSectionRendererProps>;
   onFieldRender?: (
     formItem: FormItem,
     disabled: boolean,
@@ -36,19 +39,24 @@ function renderFormControl(
   formItem: FormItem,
   register: any,
   control: any,
-  disabled,
+  disabled: boolean,
   onChangeFn: (field, value) => void
 ) {
   switch (formItem.type) {
     case FormItemType.Input:
       return (
-        <Input {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
+        <Input
+          {...register(formItem.name, formItem.validation)}
+          placeholder={formItem.placeholder}
+          onChange={(value) => onChangeFn(undefined, value)}
+        />
       );
 
     case FormItemType.Password:
       return (
         <Input
           {...register(formItem.name, formItem.validation)}
+          placeholder={formItem.placeholder}
           type="password"
           onChange={(value) => onChangeFn(undefined, value)}
         />
@@ -58,6 +66,7 @@ function renderFormControl(
       return (
         <TextArea
           rows={formItem.extra?.rows || 4}
+          placeholder={formItem.placeholder}
           {...register(formItem.name, formItem.validation)}
           onChange={(value) => onChangeFn(undefined, value)}
         />
@@ -80,7 +89,14 @@ function renderFormControl(
       return (
         <InputControl
           render={({ field: { ...field } }) => {
-            return <Select {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value.value)} />;
+            return (
+              <Select
+                {...field}
+                {...formItem.extra}
+                {...register(formItem.name, formItem.validation)}
+                onChange={(value) => onChangeFn(field, value.value)}
+              />
+            );
           }}
           control={control}
           name={formItem.name}
@@ -154,7 +170,7 @@ function renderFormControl(
 
 class GForm extends React.Component<GFormProps, {}> {
   render() {
-    const { form, data, onFieldRender } = this.props;
+    const { form, data, onFieldRender, customFieldSectionRenderer: CustomFieldSectionRenderer } = this.props;
 
     const openFields = form.fields.filter((field) => !field.collapsed);
     const collapsedfields = form.fields.filter((field) => field.collapsed);
@@ -167,16 +183,34 @@ class GForm extends React.Component<GFormProps, {}> {
               setValue(formItem.name, undefined); // clear input value on hide
               return null;
             }
+
             const disabled = formItem.disabled
               ? true
               : formItem.getDisabled
               ? formItem.getDisabled(getValues())
               : false;
 
-            const formControl = renderFormControl(formItem, register, control, disabled, (field, value) => {
-              field?.onChange(value);
-              this.forceUpdate();
-            });
+            const formControl = renderFormControl(formItem, register, control, disabled, this.onChange);
+
+            if (CustomFieldSectionRenderer && formItem.type === FormItemType.Other && formItem.render) {
+              return (
+                <CustomFieldSectionRenderer
+                  control={control}
+                  formItem={formItem}
+                  setValue={(fName: string, fValue: any) => {
+                    setValue(fName, fValue);
+                    this.forceUpdate();
+                  }}
+                  errors={errors}
+                  register={register}
+                />
+              );
+            }
+
+            // skip input render when there's no Custom Renderer
+            if (formItem.type === FormItemType.Other) {
+              return undefined;
+            }
 
             return (
               <Field
@@ -211,6 +245,11 @@ class GForm extends React.Component<GFormProps, {}> {
     );
   }
 
+  onChange = (field: any, value: string) => {
+    field?.onChange(value);
+    this.forceUpdate();
+  };
+
   handleSubmit = (data) => {
     const { form, onSubmit } = this.props;
 
diff --git a/src/components/GForm/GForm.types.ts b/src/components/GForm/GForm.types.ts
index 52253b93cb..bf9560a870 100644
--- a/src/components/GForm/GForm.types.ts
+++ b/src/components/GForm/GForm.types.ts
@@ -8,6 +8,7 @@ export enum FormItemType {
   'Switch' = 'switch',
   'RemoteSelect' = 'remoteselect',
   'Monaco' = 'monaco',
+  'Other' = 'other',
 }
 
 export interface FormItem {
@@ -16,6 +17,7 @@ export interface FormItem {
   type: FormItemType;
   disabled?: boolean;
   description?: string;
+  placeholder?: string;
   normalize?: (value: any) => any;
   isVisible?: (data: any) => any;
   getDisabled?: (value: any) => any;
@@ -25,4 +27,5 @@ export interface FormItem {
   };
   extra?: any;
   collapsed?: boolean;
+  render?: boolean;
 }
diff --git a/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.module.scss b/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.module.scss
index e5d8e9d4b0..9910b41891 100644
--- a/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.module.scss
+++ b/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.module.scss
@@ -13,6 +13,7 @@
 }
 
 .integrationTree__element {
+  margin-left: 6px;
   visibility: hidden;
   overflow-y: hidden;
   height: 0;
@@ -45,4 +46,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  path {
+    // this will overwrite all icons below to be gray
+    fill: var(--always-gray);
+  }
 }
diff --git a/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx b/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx
new file mode 100644
index 0000000000..d7653c7736
--- /dev/null
+++ b/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx
@@ -0,0 +1,340 @@
+import React, { useEffect, useReducer } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { Button, Drawer, HorizontalGroup, Icon, IconButton, Select, Tooltip, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import GTable from 'components/GTable/GTable';
+import IntegrationBlock from 'components/Integrations/IntegrationBlock';
+import Tag from 'components/Tag/Tag';
+import Text from 'components/Text/Text';
+import WithConfirm from 'components/WithConfirm/WithConfirm';
+import { AlertReceiveChannel, ContactPoint } from 'models/alert_receive_channel/alert_receive_channel.types';
+import styles from 'pages/integration/Integration.module.scss';
+import { useStore } from 'state/useStore';
+import { openErrorNotification, openNotification } from 'utils';
+import { getVar } from 'utils/DOM';
+
+const cx = cn.bind(styles);
+
+interface IntegrationContactPointState {
+  isLoading: boolean;
+  isDrawerOpen: boolean;
+  isConnectOpen: boolean;
+  allContactPoints: Array<{ name: string; uid: string; contact_points: string[] }>;
+
+  // dropdown selected values
+  selectedAlertManager: string;
+  selectedContactPoint: string;
+
+  // dropdown options
+  dataSourceOptions: Array<{ label: string; value: string }>;
+  contactPointOptions: Array<{ label: string; value: string }>;
+}
+
+const IntegrationContactPoint: React.FC<{
+  id: AlertReceiveChannel['id'];
+}> = observer(({ id }) => {
+  const { alertReceiveChannelStore } = useStore();
+  const contactPoints = alertReceiveChannelStore.connectedContactPoints[id];
+  const warnings = contactPoints.filter((cp) => !cp.notificationConnected);
+
+  const [
+    {
+      isLoading,
+      isDrawerOpen,
+      allContactPoints,
+      dataSourceOptions,
+      contactPointOptions,
+      selectedAlertManager,
+      selectedContactPoint,
+      isConnectOpen,
+    },
+    setState,
+  ] = useReducer(
+    (state: IntegrationContactPointState, newState: Partial<IntegrationContactPointState>) => ({
+      ...state,
+      ...newState,
+    }),
+    {
+      isLoading: false,
+      isDrawerOpen: false,
+      contactPointOptions: [],
+      dataSourceOptions: [],
+      allContactPoints: [],
+      selectedAlertManager: undefined,
+      selectedContactPoint: undefined,
+      isConnectOpen: false,
+    }
+  );
+
+  useEffect(() => {
+    (async function () {
+      const response = await alertReceiveChannelStore.getGrafanaAlertingContactPoints();
+      setState({
+        allContactPoints: response,
+        dataSourceOptions: response.map((res) => ({ label: res.name, value: res.uid })),
+      });
+    })();
+  }, []);
+
+  return (
+    <IntegrationBlock
+      noContent={true}
+      heading={
+        <div className={cx('u-flex', 'u-flex-space-between')}>
+          {isDrawerOpen && (
+            <Drawer scrollableContent title="Connected Contact Points" onClose={closeDrawer} closeOnMaskClick={false}>
+              <div className={cx('contactpoints__drawer')}>
+                <GTable
+                  className={cx('contactpoints__table')}
+                  rowKey="id"
+                  data={contactPoints}
+                  columns={getTableColumns()}
+                />
+
+                <div className={cx('contactpoints__connect')}>
+                  <VerticalGroup spacing="md">
+                    <div
+                      className={cx('contactpoints__connect-toggler')}
+                      onClick={() => setState({ isConnectOpen: !isConnectOpen })}
+                    >
+                      <HorizontalGroup spacing="xs">
+                        <Text type="primary">Connect existing contact point</Text>
+                        {isConnectOpen ? <Icon name="arrow-down" /> : <Icon name="arrow-right" />}
+                      </HorizontalGroup>
+                    </div>
+
+                    {isConnectOpen && (
+                      <VerticalGroup spacing="md">
+                        <Select
+                          options={dataSourceOptions}
+                          onChange={onAlertManagerChange}
+                          value={selectedAlertManager}
+                          placeholder="Select Alert Manager"
+                        />
+
+                        <Select
+                          options={contactPointOptions}
+                          onChange={onContactPointChange}
+                          value={selectedContactPoint}
+                          placeholder="Select Contact Point"
+                        />
+
+                        <HorizontalGroup align="center">
+                          <Button
+                            variant="primary"
+                            disabled={!selectedAlertManager || !selectedContactPoint || isLoading}
+                            onClick={onContactPointConnect}
+                          >
+                            Connect contact point
+                          </Button>
+                          <Button variant="secondary" onClick={closeDrawer}>
+                            Cancel
+                          </Button>
+                          {isLoading && <Icon name="fa fa-spinner" size="md" className={cx('loadingPlaceholder')} />}
+                        </HorizontalGroup>
+                      </VerticalGroup>
+                    )}
+                  </VerticalGroup>
+                </div>
+
+                <Text type="secondary">
+                  If you didn't find relevant Alerting Contact point, you can{' '}
+                  <a
+                    className={cx('link-flex')}
+                    href={`${window.location.origin}/alerting/notifications`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <Text type="link">create a new one</Text>
+                    <Icon name="external-link-alt" />
+                  </a>
+                </Text>
+              </div>
+            </Drawer>
+          )}
+
+          <HorizontalGroup spacing="md">
+            <Tag color={getVar('--tag-secondary-transparent')} border={getVar('--border-weak')} className={cx('tag')}>
+              <Text type="primary" size="small" className={cx('radius')}>
+                Contact point
+              </Text>
+            </Tag>
+
+            {contactPoints?.length ? (
+              <HorizontalGroup>
+                <Text type="primary">
+                  {contactPoints.length} contact point{contactPoints.length === 1 ? '' : 's'} connected
+                </Text>
+                {warnings.length > 0 && (
+                  <Tooltip
+                    content={'Check the notification policy for the contact point in Grafana Alerting'}
+                    placement={'top'}
+                  >
+                    <div className={cx('u-flex', 'u-flex-gap-xs')}>
+                      {renderExclamationIcon()}
+                      <Text type="primary">{warnings.length} with error</Text>
+                    </div>
+                  </Tooltip>
+                )}
+              </HorizontalGroup>
+            ) : (
+              <HorizontalGroup spacing="xs">
+                {renderExclamationIcon()}
+                <Text type="primary" data-testid="integration-escalation-chain-not-selected">
+                  Connect Alerting Contact point to receive alerts
+                </Text>
+              </HorizontalGroup>
+            )}
+          </HorizontalGroup>
+
+          <Button
+            variant={'secondary'}
+            icon="edit"
+            size={'sm'}
+            tooltip="Edit"
+            id={'openContactPoint'}
+            onClick={() => setState({ isDrawerOpen: true })}
+          />
+        </div>
+      }
+      content={undefined}
+    />
+  );
+
+  function renderActions(item: ContactPoint) {
+    return (
+      <HorizontalGroup spacing="md">
+        <IconButton
+          name="external-link-alt"
+          onClick={() => {
+            window.open(
+              `${window.location.origin}/alerting/notifications/receivers/${item.contactPoint}/edit?alertmanager=${item.dataSourceId}`,
+              '_blank'
+            );
+          }}
+        />
+        <WithConfirm
+          title={`Disconnect Contact point`}
+          confirmText="Disconnect"
+          description={
+            <VerticalGroup spacing="md">
+              <Text type="primary">
+                When the contact point will be disconnected, the Integration will no longer receive alerts for it.
+              </Text>
+              <Text type="primary">You can add new contact point at any time.</Text>
+            </VerticalGroup>
+          }
+        >
+          <IconButton
+            name="trash-alt"
+            onClick={() => {
+              alertReceiveChannelStore
+                .disconnectContactPoint(id, item.dataSourceId, item.contactPoint)
+                .then(() => {
+                  closeDrawer();
+                  openNotification('Contact point has been removed');
+                  alertReceiveChannelStore.updateConnectedContactPoints(id);
+                })
+                .catch(() => openErrorNotification('An error has occurred. Please try again.'));
+            }}
+          />
+        </WithConfirm>
+      </HorizontalGroup>
+    );
+  }
+
+  function renderContactPointName(item: ContactPoint) {
+    return (
+      <HorizontalGroup spacing="xs">
+        <Text type="primary">{item.contactPoint}</Text>
+
+        {!item.notificationConnected && (
+          <Tooltip
+            content={'Check the notification policy for this contact point in Grafana Alerting'}
+            placement={'top'}
+          >
+            {renderExclamationIcon()}
+          </Tooltip>
+        )}
+      </HorizontalGroup>
+    );
+  }
+
+  function renderAlertManager(item: ContactPoint) {
+    return item.dataSourceName;
+  }
+
+  function renderExclamationIcon() {
+    return (
+      <div className={cx('icon-exclamation')}>
+        <Icon name="exclamation-triangle" />
+      </div>
+    );
+  }
+
+  function closeDrawer() {
+    setState({
+      isDrawerOpen: false,
+      isConnectOpen: false,
+      selectedAlertManager: undefined,
+      selectedContactPoint: undefined,
+    });
+  }
+
+  function onContactPointConnect() {
+    setState({ isLoading: true });
+    alertReceiveChannelStore
+      .connectContactPoint(id, selectedAlertManager, selectedContactPoint)
+      .then(() => {
+        closeDrawer();
+        openNotification('A new contact point has been connected to your integration');
+        alertReceiveChannelStore.updateConnectedContactPoints(id);
+      })
+      .catch(() => {
+        openErrorNotification('An error has occurred. Please try again.');
+      })
+      .finally(() => setState({ isLoading: false }));
+  }
+
+  function onAlertManagerChange(option: SelectableValue<string>) {
+    setState({
+      selectedAlertManager: option.value,
+      selectedContactPoint: null,
+      contactPointOptions: allContactPoints
+        .find((opt) => opt.uid === option.value)
+        ?.contact_points.map((cp) => ({ value: cp, label: cp })),
+    });
+  }
+
+  function onContactPointChange(option: SelectableValue<string>) {
+    setState({ selectedContactPoint: option.value });
+  }
+
+  function getTableColumns(): Array<{ width: string; key: string; title?: string; render }> {
+    return [
+      {
+        width: '40%',
+        key: 'name',
+        title: 'Name',
+        render: renderContactPointName,
+      },
+      {
+        width: '40%',
+        title: 'Alert Manager',
+        key: 'alertmanager',
+        render: renderAlertManager,
+      },
+      {
+        width: '20%',
+        title: '',
+        key: 'actions',
+        render: renderActions,
+      },
+    ];
+  }
+});
+
+export default IntegrationContactPoint;
diff --git a/src/components/IntegrationHowToConnect/IntegrationHowToConnect.tsx b/src/components/IntegrationHowToConnect/IntegrationHowToConnect.tsx
new file mode 100644
index 0000000000..7226e66f12
--- /dev/null
+++ b/src/components/IntegrationHowToConnect/IntegrationHowToConnect.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { noop } from 'lodash-es';
+
+import IntegrationInputField from 'components/IntegrationInputField/IntegrationInputField';
+import IntegrationBlock from 'components/Integrations/IntegrationBlock';
+import Tag from 'components/Tag/Tag';
+import Text from 'components/Text/Text';
+import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
+import styles from 'pages/integration/Integration.module.scss';
+import { useStore } from 'state/useStore';
+import { getVar } from 'utils/DOM';
+
+const cx = cn.bind(styles);
+
+const IntegrationHowToConnect: React.FC<{ id: AlertReceiveChannel['id'] }> = ({ id }) => {
+  const { alertReceiveChannelStore } = useStore();
+  const alertReceiveChannelCounter = alertReceiveChannelStore.counters[id];
+  const hasAlerts = !!alertReceiveChannelCounter?.alerts_count;
+
+  const item = alertReceiveChannelStore.items[id];
+  const url = item?.integration_url || item?.inbound_email;
+
+  const howToConnectTagName = (integration: string) => {
+    switch (integration) {
+      case 'direct_paging':
+        return 'Manual';
+      case 'email':
+        return 'Inbound Email';
+      default:
+        return 'HTTP Endpoint';
+    }
+  };
+
+  return (
+    <IntegrationBlock
+      noContent={hasAlerts}
+      toggle={noop}
+      heading={
+        <div className={cx('how-to-connect__container')}>
+          <Tag color={getVar('--tag-secondary-transparent')} border={getVar('--border-weak')} className={cx('tag')}>
+            <Text type="primary" size="small" className={cx('radius')}>
+              {howToConnectTagName(item?.integration)}
+            </Text>
+          </Tag>
+          {item?.integration === 'direct_paging' ? (
+            <>
+              <Text type="secondary">Alert Groups raised manually via Web or ChatOps</Text>
+              <a
+                href="https://grafana.com/docs/oncall/latest/integrations/manual"
+                target="_blank"
+                rel="noreferrer"
+                className={cx('u-pull-right')}
+              >
+                <Text type="link" size="small">
+                  <HorizontalGroup>
+                    How it works
+                    <Icon name="external-link-alt" />
+                  </HorizontalGroup>
+                </Text>
+              </a>
+            </>
+          ) : (
+            <>
+              {url && (
+                <IntegrationInputField
+                  value={url}
+                  className={cx('integration__input-field')}
+                  showExternal={!!item?.integration_url}
+                />
+              )}
+              <a
+                href="https://grafana.com/docs/oncall/latest/integrations/"
+                target="_blank"
+                rel="noreferrer"
+                className={cx('u-pull-right')}
+              >
+                <Text type="link" size="small">
+                  <HorizontalGroup>
+                    How to connect
+                    <Icon name="external-link-alt" />
+                  </HorizontalGroup>
+                </Text>
+              </a>
+            </>
+          )}
+        </div>
+      }
+      content={hasAlerts ? null : renderContent()}
+    />
+  );
+
+  function renderContent() {
+    const callToAction = () => {
+      if (item?.integration === 'direct_paging') {
+        return <Text type={'primary'}>try to raise a demo alert group via Web or Chatops</Text>;
+      } else {
+        return item.demo_alert_enabled && <Text type={'primary'}>try to send a demo alert</Text>;
+      }
+    };
+
+    return (
+      <VerticalGroup justify={'flex-start'} spacing={'xs'}>
+        {!hasAlerts && (
+          <HorizontalGroup spacing={'xs'}>
+            <Icon name="fa fa-spinner" size="md" className={cx('loadingPlaceholder')} />
+            <Text type={'primary'}>No alerts yet;</Text> {callToAction()}
+          </HorizontalGroup>
+        )}
+      </VerticalGroup>
+    );
+  }
+};
+
+export default IntegrationHowToConnect;
diff --git a/src/components/IntegrationSendDemoAlertModal/IntegrationSendDemoAlertModal.tsx b/src/components/IntegrationSendDemoAlertModal/IntegrationSendDemoAlertModal.tsx
new file mode 100644
index 0000000000..7381108b13
--- /dev/null
+++ b/src/components/IntegrationSendDemoAlertModal/IntegrationSendDemoAlertModal.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+
+import { Button, HorizontalGroup, Icon, Modal, Tooltip, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import Emoji from 'react-emoji-render';
+import { debounce } from 'throttle-debounce';
+
+import MonacoEditor, { MONACO_LANGUAGE } from 'components/MonacoEditor/MonacoEditor';
+import { MONACO_EDITABLE_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
+import PluginLink from 'components/PluginLink/PluginLink';
+import Text from 'components/Text/Text';
+import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
+import styles from 'pages/integration/Integration.module.scss';
+import { useStore } from 'state/useStore';
+import { openNotification } from 'utils';
+
+const cx = cn.bind(styles);
+
+interface IntegrationSendDemoPayloadModalProps {
+  isOpen: boolean;
+  alertReceiveChannel: AlertReceiveChannel;
+  onHideOrCancel: () => void;
+}
+
+const IntegrationSendDemoAlertModal: React.FC<IntegrationSendDemoPayloadModalProps> = ({
+  alertReceiveChannel,
+  isOpen,
+  onHideOrCancel,
+}) => {
+  const store = useStore();
+  const { alertReceiveChannelStore } = store;
+  const initialDemoJSON = JSON.stringify(alertReceiveChannel.demo_alert_payload, null, 2);
+  const [demoPayload, setDemoPayload] = useState<string>(initialDemoJSON);
+  let onPayloadChangeDebounced = debounce(100, onPayloadChange);
+
+  return (
+    <Modal
+      closeOnBackdropClick={false}
+      closeOnEscape
+      isOpen={isOpen}
+      onDismiss={onHideOrCancel}
+      title={
+        <HorizontalGroup>
+          <Text.Title level={4}>
+            Send demo alert to integration: {''}
+            <strong>
+              <Emoji text={alertReceiveChannel.verbal_name} />
+            </strong>
+          </Text.Title>
+        </HorizontalGroup>
+      }
+    >
+      <VerticalGroup>
+        <HorizontalGroup spacing={'xs'}>
+          <Text type={'secondary'}>Alert Payload</Text>
+          <Tooltip
+            content={
+              <>
+                Modify the provided payload to test integration routes, templates, and escalations. Enable Debug
+                maintenance on the integration to prevent real notifications.
+              </>
+            }
+            placement={'top-start'}
+          >
+            <Icon name={'info-circle'} />
+          </Tooltip>
+        </HorizontalGroup>
+
+        <div className={cx('integration__payloadInput')}>
+          <MonacoEditor
+            value={initialDemoJSON}
+            disabled={true}
+            height={`60vh`}
+            useAutoCompleteList={false}
+            language={MONACO_LANGUAGE.json}
+            data={undefined}
+            monacoOptions={MONACO_EDITABLE_CONFIG}
+            showLineNumbers={false}
+            onChange={onPayloadChangeDebounced}
+          />
+        </div>
+
+        <HorizontalGroup justify={'flex-end'} spacing={'md'}>
+          <Button variant={'secondary'} onClick={onHideOrCancel}>
+            Cancel
+          </Button>
+          <CopyToClipboard text={getCurlText()} onCopy={() => openNotification('CURL has been copied')}>
+            <Button variant={'secondary'}>Copy as CURL</Button>
+          </CopyToClipboard>
+          <Button variant={'primary'} onClick={sendDemoAlert} data-testid="submit-send-alert">
+            Send Alert
+          </Button>
+        </HorizontalGroup>
+      </VerticalGroup>
+    </Modal>
+  );
+
+  function onPayloadChange(value: string) {
+    setDemoPayload(value);
+  }
+
+  function sendDemoAlert() {
+    let parsedPayload = undefined;
+    try {
+      parsedPayload = JSON.parse(demoPayload);
+    } catch (ex) {}
+
+    alertReceiveChannelStore.sendDemoAlert(alertReceiveChannel.id, parsedPayload).then(() => {
+      alertReceiveChannelStore.updateCounters();
+      openNotification(<DemoNotification />);
+      onHideOrCancel();
+    });
+  }
+
+  function getCurlText() {
+    return `curl -X POST \
+      ${alertReceiveChannel?.integration_url} \
+      -H 'Content-Type: Application/json' \
+      -d '${demoPayload}'`;
+  }
+};
+
+const DemoNotification: React.FC = () => {
+  return (
+    <div data-testid="demo-alert-sent-notification">
+      Demo alert was generated. Find it on the
+      <PluginLink query={{ page: 'alert-groups' }}> "Alert Groups" </PluginLink>
+      page and make sure it didn't freak out your colleagues 😉
+    </div>
+  );
+};
+
+export default IntegrationSendDemoAlertModal;
diff --git a/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss b/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss
index 03d8c9b90f..94433ec3bc 100644
--- a/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss
+++ b/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss
@@ -1,7 +1,3 @@
-.icon-exclamation {
-  color: var(--error-text-color);
-}
-
 .heading-container {
   width: 100%;
   display: flex;
diff --git a/src/containers/IntegrationForm/IntegrationForm.config.ts b/src/containers/IntegrationForm/IntegrationForm.config.ts
index d7c3208562..5af1c903cf 100644
--- a/src/containers/IntegrationForm/IntegrationForm.config.ts
+++ b/src/containers/IntegrationForm/IntegrationForm.config.ts
@@ -7,12 +7,14 @@ export const form: { name: string; fields: FormItem[] } = {
       label: 'Name',
       name: 'verbal_name',
       type: FormItemType.Input,
+      placeholder: 'Integration Name',
       validation: { required: true },
     },
     {
       label: 'Description',
       name: 'description_short',
       type: FormItemType.TextArea,
+      placeholder: 'Integration Description',
     },
     {
       name: 'team',
@@ -28,5 +30,22 @@ export const form: { name: string; fields: FormItem[] } = {
         allowClear: true,
       },
     },
+    {
+      name: 'alert_manager',
+      type: FormItemType.Other,
+    },
+    {
+      name: 'contact_point',
+      type: FormItemType.Other,
+    },
+    {
+      name: 'is_existing',
+      type: FormItemType.Other,
+    },
+    {
+      name: 'alerting',
+      type: FormItemType.Other,
+      render: true,
+    },
   ],
 };
diff --git a/src/containers/IntegrationForm/IntegrationForm.module.css b/src/containers/IntegrationForm/IntegrationForm.module.scss
similarity index 76%
rename from src/containers/IntegrationForm/IntegrationForm.module.css
rename to src/containers/IntegrationForm/IntegrationForm.module.scss
index 4b56b1bf2c..1f27db7335 100644
--- a/src/containers/IntegrationForm/IntegrationForm.module.css
+++ b/src/containers/IntegrationForm/IntegrationForm.module.scss
@@ -73,3 +73,25 @@
 .integration-info-item {
   margin-left: 16px;
 }
+
+.extra-fields {
+  padding: 12px;
+  margin-bottom: 24px;
+  border: var(--border-weak);
+  border-radius: var(--border-radius);
+
+  &__radio {
+    margin-bottom: 12px;
+  }
+
+  &__icon {
+    margin-top: -4px;
+  }
+}
+
+.selectors-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -15px;
+}
diff --git a/src/containers/IntegrationForm/IntegrationForm.tsx b/src/containers/IntegrationForm/IntegrationForm.tsx
index 32396026dd..01cd95b3ab 100644
--- a/src/containers/IntegrationForm/IntegrationForm.tsx
+++ b/src/containers/IntegrationForm/IntegrationForm.tsx
@@ -1,6 +1,20 @@
-import React, { useState, useCallback, ChangeEvent } from 'react';
+import React, { useState, ChangeEvent, useEffect, useReducer } from 'react';
 
-import { Drawer, VerticalGroup, HorizontalGroup, Input, Tag, EmptySearchResult, Button } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import {
+  Drawer,
+  VerticalGroup,
+  HorizontalGroup,
+  Input,
+  Tag,
+  EmptySearchResult,
+  Button,
+  RadioButtonGroup,
+  Select,
+  Icon,
+  Label,
+  Field,
+} from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 import { useHistory } from 'react-router-dom';
@@ -8,6 +22,7 @@ import { useHistory } from 'react-router-dom';
 import Collapse from 'components/Collapse/Collapse';
 import Block from 'components/GBlock/Block';
 import GForm from 'components/GForm/GForm';
+import { FormItem } from 'components/GForm/GForm.types';
 import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
 import Text from 'components/Text/Text';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
@@ -15,6 +30,7 @@ import {
   AlertReceiveChannel,
   AlertReceiveChannelOption,
 } from 'models/alert_receive_channel/alert_receive_channel.types';
+import IntegrationHelper from 'pages/integration/Integration.helper';
 import { useStore } from 'state/useStore';
 import { openErrorNotification } from 'utils';
 import { UserActions } from 'utils/authorization';
@@ -22,8 +38,7 @@ import { PLUGIN_ROOT } from 'utils/consts';
 
 import { form } from './IntegrationForm.config';
 import { prepareForEdit } from './IntegrationForm.helpers';
-
-import styles from './IntegrationForm.module.css';
+import styles from './IntegrationForm.module.scss';
 
 const cx = cn.bind(styles);
 
@@ -35,14 +50,14 @@ interface IntegrationFormProps {
 }
 
 const IntegrationForm = observer((props: IntegrationFormProps) => {
-  const { id, onHide, onUpdate, isTableView = true } = props;
-
   const store = useStore();
   const history = useHistory();
 
-  const { alertReceiveChannelStore, userStore } = store;
-
-  const user = userStore.currentUser;
+  const { id, onHide, onUpdate, isTableView = true } = props;
+  const {
+    alertReceiveChannelStore,
+    userStore: { currentUser: user },
+  } = store;
 
   const [filterValue, setFilterValue] = useState('');
   const [showNewIntegrationForm, setShowNewIntegrationForm] = useState(false);
@@ -54,52 +69,27 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
       ? { integration: selectedOption?.value, team: user?.current_team }
       : prepareForEdit(alertReceiveChannelStore.items[id]);
 
-  const handleSubmit = useCallback(
-    (data: Partial<AlertReceiveChannel>) => {
-      (id === 'new'
-        ? alertReceiveChannelStore
-            .create(data)
-            .then((response) => {
-              history.push(`${PLUGIN_ROOT}/integrations/${response.id}`);
-            })
-            .catch((err) => {
-              if (err.response?.data?.length > 0) {
-                openErrorNotification(err.response.data);
-              } else {
-                openErrorNotification('Something went wrong, please try again later.');
-              }
-            })
-        : alertReceiveChannelStore.update(id, data)
-      ).then(() => {
-        onHide();
-        onUpdate();
-      });
-    },
-    [id]
-  );
-
-  const handleNewIntegrationOptionSelectCallback = useCallback((option: AlertReceiveChannelOption) => {
-    return () => {
-      setSelectedOption(option);
-      setShowNewIntegrationForm(true);
-      setShowIntegrarionsListDrawer(false);
-    };
-  }, []);
-
-  const handleChangeFilter = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setFilterValue(e.currentTarget.value);
-  }, []);
-
   const { alertReceiveChannelOptions } = alertReceiveChannelStore;
 
   const options = alertReceiveChannelOptions
-    ? alertReceiveChannelOptions.filter(
-        (option: AlertReceiveChannelOption) =>
+    ? alertReceiveChannelOptions.filter((option: AlertReceiveChannelOption) => {
+        if (option.value === 'grafana_alerting' && !window.grafanaBootData.settings.unifiedAlertingEnabled) {
+          return false;
+        }
+
+        return (
           option.display_name.toLowerCase().includes(filterValue.toLowerCase()) &&
           !option.value.toLowerCase().startsWith('legacy_')
-      )
+        );
+      })
     : [];
 
+  const extraGFormProps: { customFieldSectionRenderer?: React.FC<CustomFieldSectionRendererProps> } = {};
+
+  if (selectedOption && IntegrationHelper.isGrafanaAlerting(selectedOption.value)) {
+    extraGFormProps.customFieldSectionRenderer = CustomFieldSectionRenderer;
+  }
+
   return (
     <>
       {showIntegrarionsListDrawer && (
@@ -110,51 +100,17 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
                 Integration receives alerts on an unique API URL, interprets them using set of templates tailored for
                 monitoring system and starts escalations.
               </Text>
+
               <div className={cx('search-integration')}>
                 <Input
                   autoFocus
                   value={filterValue}
                   placeholder="Search integrations ..."
-                  onChange={handleChangeFilter}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.currentTarget.value)}
                 />
               </div>
-              <div className={cx('cards')} data-testid="create-integration-modal">
-                {options.length ? (
-                  options.map((alertReceiveChannelChoice) => {
-                    return (
-                      <Block
-                        bordered
-                        hover
-                        shadowed
-                        onClick={handleNewIntegrationOptionSelectCallback(alertReceiveChannelChoice)}
-                        key={alertReceiveChannelChoice.value}
-                        className={cx('card', { card_featured: alertReceiveChannelChoice.featured })}
-                      >
-                        <div className={cx('card-bg')}>
-                          <IntegrationLogo integration={alertReceiveChannelChoice} scale={0.2} />
-                        </div>
-                        <div className={cx('title')}>
-                          <VerticalGroup spacing={alertReceiveChannelChoice.featured ? 'xs' : 'none'}>
-                            <HorizontalGroup>
-                              <Text strong data-testid="integration-display-name">
-                                {alertReceiveChannelChoice.display_name}
-                              </Text>
-                              {alertReceiveChannelChoice.featured && alertReceiveChannelChoice.featured_tag_name && (
-                                <Tag name={alertReceiveChannelChoice.featured_tag_name} colorIndex={5} />
-                              )}
-                            </HorizontalGroup>
-                            <Text type="secondary" size="small">
-                              {alertReceiveChannelChoice.short_description}
-                            </Text>
-                          </VerticalGroup>
-                        </div>
-                      </Block>
-                    );
-                  })
-                ) : (
-                  <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
-                )}
-              </div>
+
+              <IntegrationBlocks options={options} onBlockClick={onBlockClick} />
             </VerticalGroup>
           </div>
         </Drawer>
@@ -163,41 +119,10 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
         <Drawer scrollableContent title={getTitle()} onClose={onHide} closeOnMaskClick={false} width="640px">
           <div className={cx('content')}>
             <VerticalGroup>
-              <GForm form={form} data={data} onSubmit={handleSubmit} />
-              {isTableView && selectedOption && (
-                <Collapse
-                  headerWithBackground
-                  className={cx('collapse')}
-                  isOpen={false}
-                  label={<Text type="link">How the integration works</Text>}
-                  contentClassName={cx('collapsable-content')}
-                >
-                  <Text type="secondary">
-                    The integration will generate the following:
-                    <ul className={cx('integration-info-list')}>
-                      <li className={cx('integration-info-item')}>Unique URL endpoint for receiving alerts </li>
-                      <li className={cx('integration-info-item')}>
-                        Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
-                      </li>
-                      <li className={cx('integration-info-item')}>{selectedOption.display_name} contact point </li>
-                      <li className={cx('integration-info-item')}>{selectedOption.display_name} notification</li>
-                    </ul>
-                    What you’ll need to do next:
-                    <ul className={cx('integration-info-list')}>
-                      <li className={cx('integration-info-item')}>
-                        Finish connecting Monitoring system using Unique URL that will be provided on the next step{' '}
-                      </li>
-                      <li className={cx('integration-info-item')}>
-                        Set up routes that are based on alert content, such as severity, region, and service{' '}
-                      </li>
-                      <li className={cx('integration-info-item')}>Connect escalation chains to the routes</li>
-                      <li className={cx('integration-info-item')}>
-                        Review templates and personalize according to your requirements
-                      </li>
-                    </ul>
-                  </Text>
-                </Collapse>
-              )}
+              <GForm form={form} data={data} onSubmit={handleSubmit} {...extraGFormProps} />
+
+              {isTableView && <HowTheIntegrationWorks selectedOption={selectedOption} />}
+
               <HorizontalGroup justify="flex-end">
                 {id === 'new' ? (
                   <Button
@@ -228,12 +153,310 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
     </>
   );
 
+  function handleSubmit(data) {
+    (id === 'new' ? createNewIntegration() : alertReceiveChannelStore.update(id, data)).then(() => {
+      onHide();
+      onUpdate();
+    });
+
+    function createNewIntegration(): Promise<void> {
+      let promise = alertReceiveChannelStore.create(data);
+
+      const pushHistory = (id) => history.push(`${PLUGIN_ROOT}/integrations/${id}`);
+
+      promise
+        .then((response) => {
+          if (!IntegrationHelper.isGrafanaAlerting(selectedOption.value)) {
+            return pushHistory(response.id);
+          }
+
+          return (
+            data.is_existing
+              ? alertReceiveChannelStore.connectContactPoint(response.id, data.alert_manager, data.contact_point)
+              : alertReceiveChannelStore.createContactPoint(response.id, data.alert_manager, data.contact_point)
+          )
+            .then(() => pushHistory(response.id))
+            .catch(onCatch);
+        })
+        .catch(onCatch);
+
+      return promise;
+    }
+
+    function onCatch(err: any) {
+      if (err.response?.data?.length > 0) {
+        openErrorNotification(err.response.data);
+      } else {
+        openErrorNotification('Something went wrong, please try again later.');
+      }
+    }
+  }
+
+  function onBlockClick(option: AlertReceiveChannelOption) {
+    setSelectedOption(option);
+    setShowNewIntegrationForm(true);
+    setShowIntegrarionsListDrawer(false);
+  }
+
   function getTitle(): string {
     if (!isTableView) {
       return 'Integration Settings';
     }
+
     return id === 'new' ? `New ${selectedOption?.display_name} integration` : `Edit integration`;
   }
 });
 
+export interface CustomFieldSectionRendererProps {
+  control: any;
+  formItem: FormItem;
+  errors: any;
+  register: any;
+  setValue: (fieldName: string, fieldValue: any) => void;
+}
+
+interface CustomFieldSectionRendererState {
+  isExistingContactPoint: boolean;
+  selectedAlertManagerOption: string;
+  selectedContactPointOption: string;
+
+  dataSources: Array<{ label: string; value: string }>;
+  contactPoints: Array<{ label: string; value: string }>;
+  allContactPoints: Array<{ name: string; uid: string; contact_points: string[] }>;
+}
+
+const CustomFieldSectionRenderer: React.FC<CustomFieldSectionRendererProps> = ({
+  control: _control,
+  formItem: _formItem,
+  errors,
+  register,
+  setValue,
+}) => {
+  const radioOptions = [
+    {
+      label: 'Connect existing Contact point',
+      value: 'existing',
+    },
+    {
+      label: 'Create a new one',
+      value: 'new',
+    },
+  ];
+
+  const [
+    {
+      isExistingContactPoint,
+      dataSources,
+      contactPoints,
+      selectedAlertManagerOption,
+      selectedContactPointOption,
+      allContactPoints,
+    },
+    setState,
+  ] = useReducer(
+    (state: CustomFieldSectionRendererState, newState: Partial<CustomFieldSectionRendererState>) => ({
+      ...state,
+      ...newState,
+    }),
+    {
+      isExistingContactPoint: true,
+      selectedAlertManagerOption: undefined,
+      selectedContactPointOption: undefined,
+      dataSources: [],
+      contactPoints: [],
+      allContactPoints: [],
+    }
+  );
+
+  const { alertReceiveChannelStore } = useStore();
+
+  useEffect(() => {
+    (async function () {
+      const response = await alertReceiveChannelStore.getGrafanaAlertingContactPoints();
+      setState({
+        allContactPoints: response,
+        dataSources: response.map((res) => ({ label: res.name, value: res.uid })),
+        contactPoints: [],
+      });
+    })();
+
+    setValue('is_existing', true);
+  }, []);
+
+  return (
+    <div className={cx('extra-fields')}>
+      <VerticalGroup spacing="md">
+        <HorizontalGroup spacing="xs" align="center">
+          <Label>Grafana Alerting Contact point</Label>
+          <Icon name="info-circle" className={cx('extra-fields__icon')} />
+        </HorizontalGroup>
+
+        <div className={cx('extra-fields__radio')}>
+          <RadioButtonGroup
+            options={radioOptions}
+            value={isExistingContactPoint ? 'existing' : 'new'}
+            onChange={(radioValue) => {
+              setState({
+                isExistingContactPoint: radioValue === 'existing',
+                contactPoints: [],
+                selectedAlertManagerOption: null,
+                selectedContactPointOption: null,
+              });
+
+              setValue('is_existing', radioValue === 'existing');
+              setValue('alert_manager', undefined);
+              setValue('contact_point', undefined);
+            }}
+          />
+        </div>
+
+        <div className={cx('selectors-container')}>
+          <Field invalid={!!errors['alert_manager']} error={'Alert Manager is required'}>
+            <Select
+              {...register('alert_manager', { required: true })}
+              options={dataSources}
+              onChange={onAlertManagerChange}
+              value={selectedAlertManagerOption}
+              placeholder="Select Alert Manager"
+            />
+          </Field>
+
+          <Field invalid={!!errors['contact_point']} error={'Contact Point is required'}>
+            {isExistingContactPoint ? (
+              <Select
+                {...register('contact_point', { required: true })}
+                options={contactPoints}
+                onChange={onContactPointChange}
+                value={selectedContactPointOption}
+                placeholder="Select Contact Point"
+              />
+            ) : (
+              <Input
+                value={selectedContactPointOption}
+                placeholder="Choose Contact Point"
+                onChange={({ target }) => {
+                  const value = (target as HTMLInputElement).value;
+                  setState({ selectedContactPointOption: value });
+                  setValue('contact_point', value);
+                }}
+              />
+            )}
+          </Field>
+        </div>
+      </VerticalGroup>
+    </div>
+  );
+
+  function onAlertManagerChange(option: SelectableValue<string>) {
+    const contactPointsForCurrentOption = allContactPoints
+      .find((opt) => opt.uid === option.value)
+      .contact_points?.map((cp) => ({ value: cp, label: cp }));
+
+    const newState: Partial<CustomFieldSectionRendererState> = {
+      selectedAlertManagerOption: option.value,
+      contactPoints: contactPointsForCurrentOption,
+    };
+
+    if (isExistingContactPoint) {
+      newState.selectedContactPointOption = null;
+      setValue('contact_point', undefined);
+    }
+
+    setState(newState);
+
+    setValue('alert_manager', option.value);
+  }
+
+  function onContactPointChange(option: SelectableValue<string>) {
+    setState({ selectedContactPointOption: option.value });
+    setValue('contact_point', option.value);
+  }
+};
+
+const HowTheIntegrationWorks: React.FC<{ selectedOption: AlertReceiveChannelOption }> = ({ selectedOption }) => {
+  if (!selectedOption) {
+    return null;
+  }
+
+  return (
+    <Collapse
+      headerWithBackground
+      className={cx('collapse')}
+      isOpen={false}
+      label={<Text type="link">How the integration works</Text>}
+      contentClassName={cx('collapsable-content')}
+    >
+      <Text type="secondary">
+        The integration will generate the following:
+        <ul className={cx('integration-info-list')}>
+          <li className={cx('integration-info-item')}>Unique URL endpoint for receiving alerts </li>
+          <li className={cx('integration-info-item')}>
+            Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
+          </li>
+          <li className={cx('integration-info-item')}>{selectedOption.display_name} contact point </li>
+          <li className={cx('integration-info-item')}>{selectedOption.display_name} notification</li>
+        </ul>
+        What you'll need to do next:
+        <ul className={cx('integration-info-list')}>
+          <li className={cx('integration-info-item')}>
+            Finish connecting Monitoring system using Unique URL that will be provided on the next step{' '}
+          </li>
+          <li className={cx('integration-info-item')}>
+            Set up routes that are based on alert content, such as severity, region, and service{' '}
+          </li>
+          <li className={cx('integration-info-item')}>Connect escalation chains to the routes</li>
+          <li className={cx('integration-info-item')}>
+            Review templates and personalize according to your requirements
+          </li>
+        </ul>
+      </Text>
+    </Collapse>
+  );
+};
+
+const IntegrationBlocks: React.FC<{
+  options: AlertReceiveChannelOption[];
+  onBlockClick: (option: AlertReceiveChannelOption) => void;
+}> = ({ options, onBlockClick }) => {
+  return (
+    <div className={cx('cards')} data-testid="create-integration-modal">
+      {options.length ? (
+        options.map((alertReceiveChannelChoice) => {
+          return (
+            <Block
+              bordered
+              hover
+              shadowed
+              onClick={() => onBlockClick(alertReceiveChannelChoice)}
+              key={alertReceiveChannelChoice.value}
+              className={cx('card', { card_featured: alertReceiveChannelChoice.featured })}
+            >
+              <div className={cx('card-bg')}>
+                <IntegrationLogo integration={alertReceiveChannelChoice} scale={0.2} />
+              </div>
+              <div className={cx('title')}>
+                <VerticalGroup spacing={alertReceiveChannelChoice.featured ? 'xs' : 'none'}>
+                  <HorizontalGroup>
+                    <Text strong data-testid="integration-display-name">
+                      {alertReceiveChannelChoice.display_name}
+                    </Text>
+                    {alertReceiveChannelChoice.featured && alertReceiveChannelChoice.featured_tag_name && (
+                      <Tag name={alertReceiveChannelChoice.featured_tag_name} colorIndex={5} />
+                    )}
+                  </HorizontalGroup>
+                  <Text type="secondary" size="small">
+                    {alertReceiveChannelChoice.short_description}
+                  </Text>
+                </VerticalGroup>
+              </div>
+            </Block>
+          );
+        })
+      ) : (
+        <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
+      )}
+    </div>
+  );
+};
+
 export default IntegrationForm;
diff --git a/src/models/alert_receive_channel/alert_receive_channel.ts b/src/models/alert_receive_channel/alert_receive_channel.ts
index 76bb7df04c..927922dfe5 100644
--- a/src/models/alert_receive_channel/alert_receive_channel.ts
+++ b/src/models/alert_receive_channel/alert_receive_channel.ts
@@ -19,6 +19,7 @@ import {
   AlertReceiveChannel,
   AlertReceiveChannelOption,
   AlertReceiveChannelCounters,
+  ContactPoint,
   MaintenanceMode,
 } from './alert_receive_channel.types';
 
@@ -55,6 +56,9 @@ export class AlertReceiveChannelStore extends BaseStore {
   @observable.shallow
   templates: { [id: string]: AlertTemplatesDTO[] } = {};
 
+  @observable
+  connectedContactPoints: { [id: string]: ContactPoint[] } = {};
+
   constructor(rootStore: RootStore) {
     super(rootStore);
 
@@ -365,6 +369,74 @@ export class AlertReceiveChannelStore extends BaseStore {
     };
   }
 
+  async getGrafanaAlertingContactPoints() {
+    return await makeRequest(`${this.path}contact_points/`, {}).catch(showApiError);
+  }
+
+  @action
+  async updateConnectedContactPoints(alertReceiveChannelId: AlertReceiveChannel['id']) {
+    const response = await makeRequest(`${this.path}${alertReceiveChannelId}/connected_contact_points `, {});
+
+    this.connectedContactPoints = {
+      ...this.connectedContactPoints,
+
+      [alertReceiveChannelId]: response.reduce((list: ContactPoint[], payload) => {
+        payload.contact_points.forEach((contactPoint: { name: string; notification_connected: boolean }) => {
+          list.push({
+            dataSourceName: payload.name,
+            dataSourceId: payload.uid,
+            contactPoint: contactPoint.name,
+            notificationConnected: contactPoint.notification_connected,
+          } as ContactPoint);
+        });
+
+        return list;
+      }, []),
+    };
+  }
+
+  async connectContactPoint(
+    alertReceiveChannelId: AlertReceiveChannel['id'],
+    datasource_uid: string,
+    contact_point_name: string
+  ) {
+    return await makeRequest(`${this.path}${alertReceiveChannelId}/connect_contact_point`, {
+      method: 'POST',
+      data: {
+        datasource_uid,
+        contact_point_name,
+      },
+    });
+  }
+
+  async disconnectContactPoint(
+    alertReceiveChannelId: AlertReceiveChannel['id'],
+    datasource_uid: string,
+    contact_point_name: string
+  ) {
+    return await makeRequest(`${this.path}${alertReceiveChannelId}/disconnect_contact_point`, {
+      method: 'POST',
+      data: {
+        datasource_uid,
+        contact_point_name,
+      },
+    });
+  }
+
+  async createContactPoint(
+    alertReceiveChannelId: AlertReceiveChannel['id'],
+    datasource_uid: string,
+    contact_point_name: string
+  ) {
+    return await makeRequest(`${this.path}${alertReceiveChannelId}/create_contact_point`, {
+      method: 'POST',
+      data: {
+        datasource_uid,
+        contact_point_name,
+      },
+    });
+  }
+
   async getAccessLogs(alertReceiveChannelId: AlertReceiveChannel['id']) {
     const { integration_log } = await makeRequest(`/alert_receive_channel_access_log/${alertReceiveChannelId}/`, {});
 
diff --git a/src/models/alert_receive_channel/alert_receive_channel.types.ts b/src/models/alert_receive_channel/alert_receive_channel.types.ts
index 8e9b046594..f85152f96c 100644
--- a/src/models/alert_receive_channel/alert_receive_channel.types.ts
+++ b/src/models/alert_receive_channel/alert_receive_channel.types.ts
@@ -55,3 +55,10 @@ export interface AlertReceiveChannelChoice {
   display_name: string;
   value: number;
 }
+
+export interface ContactPoint {
+  dataSourceName: string;
+  dataSourceId: string;
+  contactPoint: string;
+  notificationConnected: boolean;
+}
diff --git a/src/pages/integration/Integration.helper.ts b/src/pages/integration/Integration.helper.ts
index 09ae8b5885..0766c71ea4 100644
--- a/src/pages/integration/Integration.helper.ts
+++ b/src/pages/integration/Integration.helper.ts
@@ -6,7 +6,7 @@
 import { IconName } from '@grafana/ui';
 import dayjs from 'dayjs';
 
-import { MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types';
+import { AlertReceiveChannel, MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
 import { RootStore } from 'state';
 import { AppFeature } from 'state/features';
@@ -14,6 +14,14 @@ import { AppFeature } from 'state/features';
 import { MAX_CHARACTERS_COUNT, TEXTAREA_ROWS_COUNT } from './IntegrationCommon.config';
 
 const IntegrationHelper = {
+  isGrafanaAlerting: (alertReceiveChannel: AlertReceiveChannel | string) => {
+    if (typeof alertReceiveChannel === 'string') {
+      return alertReceiveChannel === 'grafana_alerting';
+    }
+
+    return alertReceiveChannel.integration === 'grafana_alerting';
+  },
+
   getFilteredTemplate: (template: string, isTextArea: boolean): string => {
     if (!template) {
       return '';
diff --git a/src/pages/integration/Integration.module.scss b/src/pages/integration/Integration.module.scss
index 6063c27901..a20bf9662a 100644
--- a/src/pages/integration/Integration.module.scss
+++ b/src/pages/integration/Integration.module.scss
@@ -59,6 +59,16 @@ $LARGE-MARGIN: 24px;
   }
 }
 
+.contactpoints-warning {
+  padding-top: 12px;
+}
+
+.contact-point__container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
 .integration__actionItem {
   padding: 8px;
   display: flex;
@@ -78,11 +88,6 @@ $LARGE-MARGIN: 24px;
   }
 }
 
-.loadingPlaceholder {
-  margin-bottom: 0;
-  margin-right: 4px;
-}
-
 .integration__description-alert {
   padding-top: 24px;
 
@@ -120,8 +125,7 @@ $LARGE-MARGIN: 24px;
   align-items: center;
   gap: 8px;
 }
-.tag,
-.how-to-connect__tag {
+.tag {
   height: 25px;
 }
 
@@ -210,3 +214,24 @@ $LARGE-MARGIN: 24px;
 .inline-switch {
   height: 34px;
 }
+
+.contactpoints {
+  &__table {
+    margin-bottom: 24px;
+  }
+  &__connect {
+    padding: 12px;
+    margin-bottom: 24px;
+    border: var(--border-weak);
+    border-radius: var(--border-radius);
+  }
+  &__connect-toggler:hover {
+    cursor: pointer;
+  }
+}
+
+.link-flex {
+  align-items: center;
+  display: inline-flex;
+  gap: 4px;
+}
diff --git a/src/pages/integration/Integration.tsx b/src/pages/integration/Integration.tsx
index 5cb73215e8..5891fb34c7 100644
--- a/src/pages/integration/Integration.tsx
+++ b/src/pages/integration/Integration.tsx
@@ -6,8 +6,6 @@ import {
   VerticalGroup,
   Icon,
   LoadingPlaceholder,
-  Tooltip,
-  Modal,
   CascaderOption,
   IconButton,
   ConfirmModal,
@@ -15,12 +13,11 @@ import {
   Alert,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
-import { get, noop } from 'lodash-es';
+import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import Emoji from 'react-emoji-render';
 import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom';
-import { debounce } from 'throttle-debounce';
 
 import { templateForEdit } from 'components/AlertTemplates/AlertTemplatesForm.config';
 import { TemplateForEdit } from 'components/AlertTemplates/CommonAlertTemplatesForm.config';
@@ -28,11 +25,11 @@ import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu';
 import IntegrationCollapsibleTreeView, {
   IntegrationCollapsibleItem,
 } from 'components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView';
-import IntegrationInputField from 'components/IntegrationInputField/IntegrationInputField';
+import IntegrationContactPoint from 'components/IntegrationContactPoint/IntegrationContactPoint';
+import IntegrationHowToConnect from 'components/IntegrationHowToConnect/IntegrationHowToConnect';
 import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
+import IntegrationSendDemoAlertModal from 'components/IntegrationSendDemoAlertModal/IntegrationSendDemoAlertModal';
 import IntegrationBlock from 'components/Integrations/IntegrationBlock';
-import MonacoEditor, { MONACO_LANGUAGE } from 'components/MonacoEditor/MonacoEditor';
-import { MONACO_EDITABLE_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
 import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
 import { initErrorDataState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
 import PluginLink from 'components/PluginLink/PluginLink';
@@ -76,6 +73,7 @@ const cx = cn.bind(styles);
 interface IntegrationProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
 
 interface IntegrationState extends PageBaseState {
+  isLoading: boolean;
   isDemoModalOpen: boolean;
   isEditTemplateModalOpen: boolean;
   selectedTemplate: TemplateForEdit;
@@ -94,6 +92,7 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
     super(props);
 
     this.state = {
+      isLoading: true,
       errorData: initErrorDataState(),
       isDemoModalOpen: false,
       isEditTemplateModalOpen: false,
@@ -132,6 +131,7 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
 
   render() {
     const {
+      isLoading,
       errorData,
       isEditTemplateModalOpen,
       selectedTemplate,
@@ -150,10 +150,9 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
     const { isNotFoundError, isWrongTeamError } = errorData;
 
     const alertReceiveChannel = alertReceiveChannelStore.items[id];
-    const channelFilterIds = alertReceiveChannelStore.channelFilterIds[id];
     const templates = alertReceiveChannelStore.templates[id];
 
-    if ((!alertReceiveChannel && !isNotFoundError && !isWrongTeamError) || !channelFilterIds || !templates) {
+    if (isLoading && !isNotFoundError && !isWrongTeamError) {
       return (
         <div className={cx('root')}>
           <LoadingPlaceholder text="Loading Integration..." />
@@ -164,6 +163,7 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
     const integration = alertReceiveChannelStore.getIntegration(alertReceiveChannel);
     const alertReceiveChannelCounter = alertReceiveChannelStore.counters[id];
     const isLegacyIntegration = integration && (integration?.value as string).toLowerCase().startsWith('legacy_');
+    const contactPoints = alertReceiveChannelStore.connectedContactPoints?.[alertReceiveChannel.id];
 
     return (
       <PageErrorHandlingWrapper errorData={errorData} objectName="integration" pageName="Integration">
@@ -213,6 +213,9 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
 
               {this.renderDescriptionMaybe(alertReceiveChannel)}
 
+              {/* MobX seems to have issues updating contact points if we don't reference it here */}
+              {!contactPoints?.length && this.renderContactPointsWarningMaybe(alertReceiveChannel)}
+
               <div className={cx('no-wrap')}>
                 <IntegrationHeader
                   alertReceiveChannel={alertReceiveChannel}
@@ -224,7 +227,6 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
               {alertReceiveChannel.description && (
                 <div className={cx('integration__description-alert')}>
                   <Alert
-                    style={{ marginBottom: '0' }}
                     title={
                       (
                         <div dangerouslySetInnerHTML={{ __html: sanitize(alertReceiveChannel.description) }}></div>
@@ -336,14 +338,53 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
     );
   }
 
+  renderContactPointsWarningMaybe(alertReceiveChannel: AlertReceiveChannel) {
+    if (IntegrationHelper.isGrafanaAlerting(alertReceiveChannel)) {
+      return (
+        <div className={cx('u-padding-top-md')}>
+          <Alert
+            title={
+              (
+                <Text type="primary">
+                  Contact point connection required. Click{' '}
+                  <a href="#" onClick={() => document.querySelector<HTMLElement>('#openContactPoint')?.click()}>
+                    <Text type="link">here</Text>
+                  </a>{' '}
+                  to connect Contact point from Alerting.
+                </Text>
+              ) as any
+            }
+            className={cx('u-margin-bottom-none')}
+            severity="error"
+          />
+        </div>
+      );
+    }
+
+    return undefined;
+  }
+
   getConfigForTreeComponent(id: string, templates: AlertTemplatesDTO[]) {
+    const {
+      store: { alertReceiveChannelStore },
+    } = this.props;
+
+    const alertReceiveChannel = alertReceiveChannelStore.items[id];
+
     return [
+      IntegrationHelper.isGrafanaAlerting(alertReceiveChannel) && {
+        isCollapsible: false,
+        customIcon: 'grafana',
+        canHoverIcon: false,
+        collapsedView: null,
+        expandedView: () => <IntegrationContactPoint id={id} />,
+      },
       {
         isCollapsible: false,
         customIcon: 'plug',
         canHoverIcon: false,
         collapsedView: null,
-        expandedView: () => <HowToConnectComponent id={id} />,
+        expandedView: () => <IntegrationHowToConnect id={id} />,
       },
       {
         customIcon: 'layer-group',
@@ -443,7 +484,7 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
         ),
       },
       this.renderRoutesFn(),
-    ];
+    ].filter((opt) => opt);
   }
 
   getRoutingTemplate = (channelFilterId: ChannelFilter['id']) => {
@@ -652,128 +693,20 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
       promises.push(await alertReceiveChannelStore.updateChannelFilters(id));
     }
 
-    await Promise.all(promises).catch(() => {
-      if (!alertReceiveChannelStore.items[id]) {
-        // failed fetching the integration (most likely it's not existent)
-        history.push(`${PLUGIN_ROOT}/integrations`);
-      }
-    });
-  }
-}
-
-const DemoNotification: React.FC = () => {
-  return (
-    <div data-testid="demo-alert-sent-notification">
-      Demo alert was generated. Find it on the
-      <PluginLink query={{ page: 'alert-groups' }}> "Alert Groups" </PluginLink>
-      page and make sure it didn't freak out your colleagues 😉
-    </div>
-  );
-};
-
-interface IntegrationSendDemoPayloadModalProps {
-  isOpen: boolean;
-  alertReceiveChannel: AlertReceiveChannel;
-  onHideOrCancel: () => void;
-}
-
-const IntegrationSendDemoPayloadModal: React.FC<IntegrationSendDemoPayloadModalProps> = ({
-  alertReceiveChannel,
-  isOpen,
-  onHideOrCancel,
-}) => {
-  const store = useStore();
-  const { alertReceiveChannelStore } = store;
-  const initialDemoJSON = JSON.stringify(alertReceiveChannel.demo_alert_payload, null, 2);
-  const [demoPayload, setDemoPayload] = useState<string>(initialDemoJSON);
-  let onPayloadChangeDebounced = debounce(100, onPayloadChange);
-
-  return (
-    <Modal
-      closeOnBackdropClick={false}
-      closeOnEscape
-      isOpen={isOpen}
-      onDismiss={onHideOrCancel}
-      title={
-        <HorizontalGroup>
-          <Text.Title level={4}>
-            Send demo alert to integration: {''}
-            <strong>
-              <Emoji text={alertReceiveChannel.verbal_name} />
-            </strong>
-          </Text.Title>
-        </HorizontalGroup>
-      }
-    >
-      <VerticalGroup>
-        <HorizontalGroup spacing={'xs'}>
-          <Text type={'secondary'}>Alert Payload</Text>
-          <Tooltip
-            content={
-              <>
-                Modify the provided payload to test integration routes, templates, and escalations. Enable Debug
-                maintenance on the integration to prevent real notifications.
-              </>
-            }
-            placement={'top-start'}
-          >
-            <Icon name={'info-circle'} />
-          </Tooltip>
-        </HorizontalGroup>
-
-        <div className={cx('integration__payloadInput')}>
-          <MonacoEditor
-            value={initialDemoJSON}
-            disabled={true}
-            height={`60vh`}
-            useAutoCompleteList={false}
-            language={MONACO_LANGUAGE.json}
-            data={undefined}
-            monacoOptions={MONACO_EDITABLE_CONFIG}
-            showLineNumbers={false}
-            onChange={onPayloadChangeDebounced}
-          />
-        </div>
-
-        <HorizontalGroup justify={'flex-end'} spacing={'md'}>
-          <Button variant={'secondary'} onClick={onHideOrCancel}>
-            Cancel
-          </Button>
-          <CopyToClipboard text={getCurlText()} onCopy={() => openNotification('CURL has been copied')}>
-            <Button variant={'secondary'}>Copy as CURL</Button>
-          </CopyToClipboard>
-          <Button variant={'primary'} onClick={sendDemoAlert} data-testid="submit-send-alert">
-            Send Alert
-          </Button>
-        </HorizontalGroup>
-      </VerticalGroup>
-    </Modal>
-  );
+    // skip checking for grafana alerting so that we don't wait for the first request to complete
+    // at the cost of getting a failed network request for all other types other than alerting
+    promises.push(alertReceiveChannelStore.updateConnectedContactPoints(id));
 
-  function onPayloadChange(value: string) {
-    setDemoPayload(value);
-  }
-
-  function sendDemoAlert() {
-    let parsedPayload = undefined;
-    try {
-      parsedPayload = JSON.parse(demoPayload);
-    } catch (ex) {}
-
-    alertReceiveChannelStore.sendDemoAlert(alertReceiveChannel.id, parsedPayload).then(() => {
-      alertReceiveChannelStore.updateCounters();
-      openNotification(<DemoNotification />);
-      onHideOrCancel();
-    });
-  }
-
-  function getCurlText() {
-    return `curl -X POST \
-    ${alertReceiveChannel?.integration_url} \
-    -H 'Content-Type: Application/json' \
-    -d '${demoPayload}'`;
+    await Promise.all(promises)
+      .catch(() => {
+        if (!alertReceiveChannelStore.items[id]) {
+          // failed fetching the integration (most likely it's not existent)
+          history.push(`${PLUGIN_ROOT}/integrations`);
+        }
+      })
+      .finally(() => this.setState({ isLoading: false }));
   }
-};
+}
 
 interface IntegrationActionsProps {
   isLegacyIntegration: boolean;
@@ -828,7 +761,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
       )}
 
       {alertReceiveChannel.demo_alert_enabled && (
-        <IntegrationSendDemoPayloadModal
+        <IntegrationSendDemoAlertModal
           alertReceiveChannel={alertReceiveChannel}
           isOpen={isDemoModalOpen}
           onHideOrCancel={() => setIsDemoModalOpen(false)}
@@ -1084,109 +1017,6 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
   }
 };
 
-const HowToConnectComponent: React.FC<{ id: AlertReceiveChannel['id'] }> = ({ id }) => {
-  const { alertReceiveChannelStore } = useStore();
-  const alertReceiveChannelCounter = alertReceiveChannelStore.counters[id];
-  const hasAlerts = !!alertReceiveChannelCounter?.alerts_count;
-
-  const item = alertReceiveChannelStore.items[id];
-  const url = item?.integration_url || item?.inbound_email;
-
-  const howToConnectTagName = (integration: string) => {
-    switch (integration) {
-      case 'direct_paging':
-        return 'Manual';
-      case 'email':
-        return 'Inbound Email';
-      default:
-        return 'HTTP Endpoint';
-    }
-  };
-
-  return (
-    <IntegrationBlock
-      noContent={hasAlerts}
-      toggle={noop}
-      heading={
-        <div className={cx('how-to-connect__container')}>
-          <Tag
-            color={getVar('--tag-secondary-transparent')}
-            border={getVar('--border-weak')}
-            className={cx('how-to-connect__tag')}
-          >
-            <Text type="primary" size="small" className={cx('radius')}>
-              {howToConnectTagName(item?.integration)}
-            </Text>
-          </Tag>
-          {item?.integration === 'direct_paging' ? (
-            <>
-              <Text type="secondary">Alert Groups raised manually via Web or ChatOps</Text>
-              <a
-                href="https://grafana.com/docs/oncall/latest/integrations/manual"
-                target="_blank"
-                rel="noreferrer"
-                className={cx('u-pull-right')}
-              >
-                <Text type="link" size="small">
-                  <HorizontalGroup>
-                    How it works
-                    <Icon name="external-link-alt" />
-                  </HorizontalGroup>
-                </Text>
-              </a>
-            </>
-          ) : (
-            <>
-              {url && (
-                <IntegrationInputField
-                  value={url}
-                  className={cx('integration__input-field')}
-                  showExternal={!!item?.integration_url}
-                />
-              )}
-              <a
-                href="https://grafana.com/docs/oncall/latest/integrations/"
-                target="_blank"
-                rel="noreferrer"
-                className={cx('u-pull-right')}
-              >
-                <Text type="link" size="small">
-                  <HorizontalGroup>
-                    How to connect
-                    <Icon name="external-link-alt" />
-                  </HorizontalGroup>
-                </Text>
-              </a>
-            </>
-          )}
-        </div>
-      }
-      content={hasAlerts ? null : renderContent()}
-    />
-  );
-
-  function renderContent() {
-    const callToAction = () => {
-      if (item?.integration === 'direct_paging') {
-        return <Text type={'primary'}>try to raise a demo alert group via Web or Chatops</Text>;
-      } else {
-        return item.demo_alert_enabled && <Text type={'primary'}>try to send a demo alert</Text>;
-      }
-    };
-
-    return (
-      <VerticalGroup justify={'flex-start'} spacing={'xs'}>
-        {!hasAlerts && (
-          <HorizontalGroup spacing={'xs'}>
-            <Icon name="fa fa-spinner" size="md" className={cx('loadingPlaceholder')} />
-            <Text type={'primary'}>No alerts yet;</Text> {callToAction()}
-          </HorizontalGroup>
-        )}
-      </VerticalGroup>
-    );
-  }
-};
-
 interface IntegrationHeaderProps {
   alertReceiveChannelCounter: AlertReceiveChannelCounters;
   alertReceiveChannel: AlertReceiveChannel;
diff --git a/src/pages/integrations/Integrations.tsx b/src/pages/integrations/Integrations.tsx
index bf462d0d1f..d1b9752e08 100644
--- a/src/pages/integrations/Integrations.tsx
+++ b/src/pages/integrations/Integrations.tsx
@@ -264,7 +264,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     );
   }
 
-  renderIntegrationStatus(item: AlertReceiveChannel, alertReceiveChannelStore) {
+  renderIntegrationStatus(item: AlertReceiveChannel, alertReceiveChannelStore: AlertReceiveChannelStore) {
     const alertReceiveChannelCounter = alertReceiveChannelStore.counters[item.id];
     let routesCounter = item.routes_count;
     let connectedEscalationsChainsCount = item.connected_escalations_chains_count;
diff --git a/src/types.ts b/src/types.ts
index b418f69d3d..0b5438acf1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,6 +24,10 @@ declare global {
     // https://github.com/grafana/grafana/blob/78bef7a26a799209b5307d6bde8e25fcb4fbde7d/public/views/index-template.html#L251-L258
     grafanaBootData: {
       user: CurrentUserDTO;
+      settings: {
+        unifiedAlertingEnabled: boolean;
+        unifiedAlerting: { minInterval: string };
+      };
     };
     RECAPTCHA_SITE_KEY: string;
     grecaptcha: any;