Revert "bring heartbeats back to UI" (#2548)

This reverts commit 03f5b0f071.

# What this PR does

## Which issue(s) this PR fixes

## Checklist

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

grafana-plugin/src/containers/IntegrationContainers/IntegrationHeartbeatForm/IntegrationHeartbeatForm.tsx

@@ -27,16 +27,16 @@ const IntegrationHeartbeatForm = observer(({ alertReceveChannelId, onClose }: In
   const { heartbeatStore, alertReceiveChannelStore } = useStore();
 
   const alertReceiveChannel = alertReceiveChannelStore.items[alertReceveChannelId];
-  const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
-  const heartbeat = heartbeatStore.items[heartbeatId];
 
   useEffect(() => {
     heartbeatStore.updateTimeoutOptions();
-  }, []);
+  }, [heartbeatStore]);
 
   useEffect(() => {
-    setInterval(heartbeat.timeout_seconds);
-  }, [heartbeat]);
+    if (alertReceiveChannel.heartbeat) {
+      setInterval(alertReceiveChannel.heartbeat.timeout_seconds);
+    }
+  }, [alertReceiveChannel]);
 
   const timeoutOptions = heartbeatStore.timeoutOptions;
 
@@ -66,30 +66,22 @@ const IntegrationHeartbeatForm = observer(({ alertReceveChannelId, onClose }: In
               </WithPermissionControlTooltip>
             </Field>
           </div>
+
           <div className={cx('u-width-100')}>
             <Field label="Endpoint" description="Use the following unique Grafana link to send GET and POST requests">
-              <IntegrationInputField value={heartbeat?.link} showEye={false} isMasked={false} />
+              <IntegrationInputField value={alertReceiveChannel?.integration_url} showEye={false} isMasked={false} />
             </Field>
           </div>
-          {/*  <p>
-            To send periodic heartbeat alerts from <Emoji text={alertReceiveChannel?.verbal_name || ''} /> to OnCall, do
-            the following:
-            <span
-              dangerouslySetInnerHTML={{
-                __html: heartbeat.instruction,
-              }}
-            />
-          </p> */}
         </VerticalGroup>
 
         <VerticalGroup style={{ marginTop: 'auto' }}>
           <HorizontalGroup className={cx('buttons')} justify="flex-end">
             <Button variant={'secondary'} onClick={onClose}>
-              {heartbeat ? 'Close' : 'Cancel'}
+              Cancel
             </Button>
             <WithPermissionControlTooltip key="ok" userAction={UserActions.IntegrationsWrite}>
               <Button variant="primary" onClick={onSave}>
-                {heartbeat ? 'Save' : 'Create'}
+                {alertReceiveChannel.heartbeat ? 'Save' : 'Create'}
               </Button>
             </WithPermissionControlTooltip>
           </HorizontalGroup>
@@ -99,14 +91,24 @@ const IntegrationHeartbeatForm = observer(({ alertReceveChannelId, onClose }: In
   );
 
   async function onSave() {
-    await heartbeatStore.saveHeartbeat(heartbeat.id, {
-      alert_receive_channel: heartbeat.alert_receive_channel,
-      timeout_seconds: interval,
-    });
+    const heartbeat = alertReceiveChannel.heartbeat;
 
-    onClose();
+    if (heartbeat) {
+      await heartbeatStore.saveHeartbeat(heartbeat.id, {
+        alert_receive_channel: heartbeat.alert_receive_channel,
+        timeout_seconds: interval,
+      });
 
-    await alertReceiveChannelStore.loadItem(alertReceveChannelId);
+      onClose();
+    } else {
+      await heartbeatStore.createHeartbeat(alertReceveChannelId, {
+        timeout_seconds: interval,
+      });
+
+      onClose();
+    }
+
+    await alertReceiveChannelStore.updateItem(alertReceveChannelId);
   }
 });
 

grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts

@@ -91,14 +91,11 @@ export class AlertReceiveChannelStore extends BaseStore {
   async loadItem(id: AlertReceiveChannel['id'], skipErrorHandling = false): Promise<AlertReceiveChannel> {
     const alertReceiveChannel = await this.getById(id, skipErrorHandling);
 
-    // @ts-ignore
     this.items = {
       ...this.items,
-      [id]: omit(alertReceiveChannel, 'heartbeat'),
+      [id]: alertReceiveChannel,
     };
 
-    this.populateHearbeats([alertReceiveChannel]);
-
     return alertReceiveChannel;
   }
 
@@ -121,7 +118,31 @@ export class AlertReceiveChannelStore extends BaseStore {
 
     this.searchResult = results.map((item: AlertReceiveChannel) => item.id);
 
-    this.populateHearbeats(results);
+    const heartbeats = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
+      if (alertReceiveChannel.heartbeat) {
+        acc[alertReceiveChannel.heartbeat.id] = alertReceiveChannel.heartbeat;
+      }
+
+      return acc;
+    }, {});
+
+    this.rootStore.heartbeatStore.items = {
+      ...this.rootStore.heartbeatStore.items,
+      ...heartbeats,
+    };
+
+    const alertReceiveChannelToHeartbeat = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
+      if (alertReceiveChannel.heartbeat) {
+        acc[alertReceiveChannel.id] = alertReceiveChannel.heartbeat.id;
+      }
+
+      return acc;
+    }, {});
+
+    this.alertReceiveChannelToHeartbeat = {
+      ...this.alertReceiveChannelToHeartbeat,
+      ...alertReceiveChannelToHeartbeat,
+    };
 
     this.updateCounters();
 
@@ -149,15 +170,7 @@ export class AlertReceiveChannelStore extends BaseStore {
       results: results.map((item: AlertReceiveChannel) => item.id),
     };
 
-    this.populateHearbeats(results);
-
-    this.updateCounters();
-
-    return results;
-  }
-
-  populateHearbeats(alertReceiveChannels: AlertReceiveChannel[]) {
-    const heartbeats = alertReceiveChannels.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
+    const heartbeats = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
       if (alertReceiveChannel.heartbeat) {
         acc[alertReceiveChannel.heartbeat.id] = alertReceiveChannel.heartbeat;
       }
@@ -170,21 +183,22 @@ export class AlertReceiveChannelStore extends BaseStore {
       ...heartbeats,
     };
 
-    const alertReceiveChannelToHeartbeat = alertReceiveChannels.reduce(
-      (acc: any, alertReceiveChannel: AlertReceiveChannel) => {
-        if (alertReceiveChannel.heartbeat) {
-          acc[alertReceiveChannel.id] = alertReceiveChannel.heartbeat.id;
-        }
+    const alertReceiveChannelToHeartbeat = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
+      if (alertReceiveChannel.heartbeat) {
+        acc[alertReceiveChannel.id] = alertReceiveChannel.heartbeat.id;
+      }
 
-        return acc;
-      },
-      {}
-    );
+      return acc;
+    }, {});
 
     this.alertReceiveChannelToHeartbeat = {
       ...this.alertReceiveChannelToHeartbeat,
       ...alertReceiveChannelToHeartbeat,
     };
+
+    this.updateCounters();
+
+    return results;
   }
 
   @action

grafana-plugin/src/pages/integration/Integration.tsx

@@ -726,7 +726,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
   alertReceiveChannel,
   changeIsTemplateSettingsOpen,
 }) => {
-  const { alertReceiveChannelStore } = useStore();
+  const { alertReceiveChannelStore, heartbeatStore } = useStore();
 
   const history = useHistory();
 
@@ -927,7 +927,9 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
   );
 
   function showHeartbeatSettings() {
-    return alertReceiveChannel.is_available_for_integration_heartbeat;
+    const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
+    const heartbeat = heartbeatStore.items[heartbeatId];
+    return !!heartbeat?.last_heartbeat_time_verbal;
   }
 
   function deleteIntegration() {
@@ -1157,19 +1159,22 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
     const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
     const heartbeat = heartbeatStore.items[heartbeatId];
 
-    if (!alertReceiveChannel.is_available_for_integration_heartbeat || !heartbeat?.last_heartbeat_time_verbal) {
+    const heartbeatStatus = Boolean(heartbeat?.status);
+
+    if (
+      !alertReceiveChannel.is_available_for_integration_heartbeat ||
+      !alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal
+    ) {
       return null;
     }
 
-    const heartbeatStatus = Boolean(heartbeat?.status);
-
     return (
       <TooltipBadge
         text={undefined}
         className={cx('heartbeat-badge')}
         borderType={heartbeatStatus ? 'success' : 'danger'}
         customIcon={heartbeatStatus ? <HeartIcon /> : <HeartRedIcon />}
-        tooltipTitle={`Last heartbeat: ${heartbeat?.last_heartbeat_time_verbal}`}
+        tooltipTitle={`Last heartbeat: ${alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal}`}
         tooltipContent={undefined}
       />
     );