AlertManager v2 (#2643)

Introduce AlertManager v2 integration with improved internal behaviour

it's using grouping from AlertManager, not trying to re-group alerts on
OnCall side.
Existing AlertManager and Grafana Alerting integrations are marked as
Legacy with options to migrate them manually now or be migrated
automatically after DEPRECATION DATE(TBD).
Integration urls and public api responses stay the same both for legacy
and new integrations.

---------

Co-authored-by: Rares Mardare <rares.mardare@grafana.com>
Co-authored-by: Joey Orlando <joey.orlando@grafana.com>

src/assets/style/utils.css

@@ -1,13 +1,39 @@
-.link {
-  text-decoration: none !important;
+/* -----
+ * Flex
+ */
+
+.u-flex {
+  display: flex;
+  flex-direction: row;
 }
 
-.u-position-relative {
-  position: relative;
+.u-align-items-center {
+  align-items: center;
 }
 
-.u-overflow-x-auto {
-  overflow-x: auto;
+.u-flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.u-flex-grow-1 {
+  flex-grow: 1;
+}
+
+.u-flex-gap-xs {
+  gap: 4px;
+}
+
+/* -----
+ * Margins/Paddings
+ */
+
+.u-margin-right-xs {
+  margin-right: 4px;
+}
+
+.u-padding-top-md {
+  padding-top: 16px;
 }
 
 .u-pull-right {
@@ -18,9 +44,9 @@
   margin-right: auto;
 }
 
-.u-break-word {
-  word-break: break-word;
-}
+/* -----
+ * Display
+ */
 
 .u-width-100 {
   width: 100%;
@@ -34,26 +60,36 @@
   display: block;
 }
 
-.u-flex {
-  display: flex;
-  flex-direction: row;
+/* -----
+ * Other
+ */
+
+.back-arrow {
+  padding-top: 8px;
 }
 
-.u-flex-center {
-  justify-content: center;
-  align-items: center;
+.link {
+  text-decoration: none !important;
 }
 
-.u-flex-grow-1 {
-  flex-grow: 1;
+.u-position-relative {
+  position: relative;
 }
 
-.u-align-items-center {
-  align-items: center;
+.u-overflow-x-auto {
+  overflow-x: auto;
 }
 
+.u-break-word {
+  word-break: break-word;
+}
+
+.u-opacity,
 .u-disabled {
   opacity: var(--opacity);
+}
+
+.u-disabled {
   cursor: not-allowed !important;
   pointer-events: none;
 }
@@ -69,18 +105,6 @@
   opacity: 15%;
 }
 
-.u-flex-xs {
-  gap: 4px;
-}
-
-.u-margin-right-xs {
-  margin-right: 4px;
-}
-
-.u-margin-right-md {
-  margin-right: 8px;
-}
-
 .buttons {
   padding-bottom: 24px;
 }

src/components/GForm/GForm.tsx

@@ -41,7 +41,6 @@ function renderFormControl(
 ) {
   switch (formItem.type) {
     case FormItemType.Input:
-      console.log({ ...register(formItem.name, formItem.validation) });
       return (
         <Input {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
       );

src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx

@@ -123,7 +123,7 @@ const CollapsedIntegrationRouteDisplay: React.FC<CollapsedIntegrationRouteDispla
                 )}
 
                 <div className={cx('collapsedRoute__item')}>
-                  <div className={cx('u-flex', 'u-align-items-center', 'u-flex-xs')}>
+                  <div className={cx('u-flex', 'u-align-items-center', 'u-flex-gap-xs')}>
                     <Icon name="list-ui-alt" />
                     <Text type="secondary" className={cx('u-margin-right-xs')}>
                       Trigger escalation chain
@@ -141,7 +141,7 @@ const CollapsedIntegrationRouteDisplay: React.FC<CollapsedIntegrationRouteDispla
                   )}
 
                   {!escalationChain?.name && (
-                    <div className={cx('u-flex', 'u-align-items-center', 'u-flex-xs')}>
+                    <div className={cx('u-flex', 'u-align-items-center', 'u-flex-gap-xs')}>
                       <div className={cx('icon-exclamation')}>
                         <Icon name="exclamation-triangle" />
                       </div>

src/containers/IntegrationForm/IntegrationForm.tsx

@@ -93,8 +93,10 @@ const IntegrationForm = observer((props: IntegrationFormProps) => {
   const { alertReceiveChannelOptions } = alertReceiveChannelStore;
 
   const options = alertReceiveChannelOptions
-    ? alertReceiveChannelOptions.filter((option: AlertReceiveChannelOption) =>
-        option.display_name.toLowerCase().includes(filterValue.toLowerCase())
+    ? alertReceiveChannelOptions.filter(
+        (option: AlertReceiveChannelOption) =>
+          option.display_name.toLowerCase().includes(filterValue.toLowerCase()) &&
+          !option.value.toLowerCase().startsWith('legacy_')
       )
     : [];
 

src/models/alert_receive_channel/alert_receive_channel.ts

@@ -227,6 +227,13 @@ export class AlertReceiveChannelStore extends BaseStore {
     };
   }
 
+  @action
+  async migrateChannel(id: AlertReceiveChannel['id']) {
+    return await makeRequest(`/alert_receive_channels/${id}/migrate`, {
+      method: 'POST',
+    });
+  }
+
   @action
   async createChannelFilter(data: Partial<ChannelFilter>) {
     return await makeRequest('/channel_filters/', {

src/models/alert_receive_channel/alert_receive_channel.types.ts

@@ -10,7 +10,7 @@ export enum MaintenanceMode {
 
 export interface AlertReceiveChannelOption {
   display_name: string;
-  value: number;
+  value: string;
   featured: boolean;
   short_description: string;
   featured_tag_name: string;

src/pages/integration/Integration.module.scss

@@ -13,6 +13,7 @@ $LARGE-MARGIN: 24px;
   &__heading-container {
     display: flex;
     gap: $FLEX-GAP;
+    align-items: center;
   }
 
   &__heading {
@@ -52,6 +53,10 @@ $LARGE-MARGIN: 24px;
   &__input-field {
     margin-right: 24px;
   }
+
+  &__name {
+    margin: 0;
+  }
 }
 
 .integration__actionItem {
@@ -204,4 +209,4 @@ $LARGE-MARGIN: 24px;
 
 .inline-switch {
   height: 34px;
-}
+}