Allow creation of contact points for existing integrations (#2959)

## Which issue(s) this PR fixes #2909
grafana · Sep 5, 2023 · 4f59c54 · 4f59c54
1 parent 3dd2248
commit 4f59c54
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 51 deletions.
diff --git a/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx b/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx
@@ -1,7 +1,18 @@
 import React, { useEffect, useReducer } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, Drawer, HorizontalGroup, Icon, IconButton, Select, Tooltip, VerticalGroup } from '@grafana/ui';
+import {
+  Button,
+  Drawer,
+  HorizontalGroup,
+  Icon,
+  IconButton,
+  Input,
+  RadioButtonGroup,
+  Select,
+  Tooltip,
+  VerticalGroup,
+} from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -22,6 +33,7 @@ interface IntegrationContactPointState {
   isLoading: boolean;
   isDrawerOpen: boolean;
   isConnectOpen: boolean;
+  isExistingContactPoint: boolean;
   allContactPoints: Array<{ name: string; uid: string; contact_points: string[] }>;
 
   // dropdown selected values
@@ -49,6 +61,7 @@ const IntegrationContactPoint: React.FC<{
       selectedAlertManager,
       selectedContactPoint,
       isConnectOpen,
+      isExistingContactPoint,
     },
     setState,
   ] = useReducer(
@@ -59,6 +72,7 @@ const IntegrationContactPoint: React.FC<{
     {
       isLoading: false,
       isDrawerOpen: false,
+      isExistingContactPoint: true,
       contactPointOptions: [],
       dataSourceOptions: [],
       allContactPoints: [],
@@ -78,6 +92,17 @@ const IntegrationContactPoint: React.FC<{
     })();
   }, []);
 
+  const radioOptions = [
+    {
+      label: 'Connect existing Contact point',
+      value: 'existing',
+    },
+    {
+      label: 'Create a new one',
+      value: 'new',
+    },
+  ];
+
   return (
     <IntegrationBlock
       noContent={true}
@@ -100,58 +125,19 @@ const IntegrationContactPoint: React.FC<{
                       className={cx('contactpoints__connect-toggler')}
                       onClick={() => setState({ isConnectOpen: !isConnectOpen })}
                     >
-                      <HorizontalGroup spacing="xs">
-                        <Text type="primary">Connect existing contact point</Text>
+                      <HorizontalGroup justify="space-between">
+                        <HorizontalGroup spacing="xs" align="center">
+                          <Text type="primary">Grafana Alerting Contact point</Text>
+                          <Icon name="info-circle" className={cx('extra-fields__icon')} />
+                        </HorizontalGroup>
+
                         {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>
-                    )}
+                    {renderConnectSection()}
                   </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>
           )}
@@ -204,6 +190,68 @@ const IntegrationContactPoint: React.FC<{
     />
   );
 
+  function renderConnectSection() {
+    if (!isConnectOpen) {
+      return null;
+    }
+
+    return (
+      <VerticalGroup spacing="md">
+        <RadioButtonGroup
+          options={radioOptions}
+          value={isExistingContactPoint ? 'existing' : 'new'}
+          onChange={(radioValue) => {
+            setState({
+              isExistingContactPoint: radioValue === 'existing',
+              contactPointOptions: [],
+              selectedAlertManager: null,
+              selectedContactPoint: null,
+            });
+          }}
+        />
+
+        <Select
+          options={dataSourceOptions}
+          onChange={onAlertManagerChange}
+          value={selectedAlertManager}
+          placeholder="Select Alert Manager"
+        />
+
+        {isExistingContactPoint ? (
+          <Select
+            options={contactPointOptions}
+            onChange={onContactPointChange}
+            value={selectedContactPoint}
+            placeholder="Select Contact Point"
+          />
+        ) : (
+          <Input
+            value={selectedContactPoint}
+            placeholder="Choose Contact Point"
+            onChange={({ target }) => {
+              const value = (target as HTMLInputElement).value;
+              setState({ selectedContactPoint: value });
+            }}
+          />
+        )}
+
+        <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>
+    );
+  }
+
   function renderActions(item: ContactPoint) {
     return (
       <HorizontalGroup spacing="md">
@@ -286,15 +334,19 @@ const IntegrationContactPoint: React.FC<{
 
   function onContactPointConnect() {
     setState({ isLoading: true });
-    alertReceiveChannelStore
-      .connectContactPoint(id, selectedAlertManager, selectedContactPoint)
+
+    (isExistingContactPoint
+      ? alertReceiveChannelStore.connectContactPoint(id, selectedAlertManager, selectedContactPoint)
+      : alertReceiveChannelStore.createContactPoint(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.');
+      .catch((ex) => {
+        const error = ex.response?.data?.detail ?? 'An error has occurred. Please try again.';
+        openErrorNotification(error);
       })
       .finally(() => setState({ isLoading: false }));
   }

diff --git a/src/pages/integration/Integration.module.scss b/src/pages/integration/Integration.module.scss
@@ -225,6 +225,9 @@ $LARGE-MARGIN: 24px;
     border: var(--border-weak);
     border-radius: var(--border-radius);
   }
+  &__connect-toggler {
+    width: 100%;
+  }
   &__connect-toggler:hover {
     cursor: pointer;
   }