bring heartbeats back to UI

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

@@ -27,16 +27,16 @@ const IntegrationHearbeatForm = observer(({ alertReceveChannelId, onClose }: Int
   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(() => {
-    if (alertReceiveChannel.heartbeat) {
-      setInterval(alertReceiveChannel.heartbeat.timeout_seconds);
-    }
-  }, [alertReceiveChannel]);
+    setInterval(heartbeat.timeout_seconds);
+  }, [heartbeat]);
 
   const timeoutOptions = heartbeatStore.timeoutOptions;
 
@@ -66,22 +66,30 @@ const IntegrationHearbeatForm = observer(({ alertReceveChannelId, onClose }: Int
               </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={alertReceiveChannel?.integration_url} showEye={false} isMasked={false} />
+              <IntegrationInputField value={heartbeat?.link} 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}>
-              Cancel
+              {heartbeat ? 'Close' : 'Cancel'}
             </Button>
             <WithPermissionControlTooltip key="ok" userAction={UserActions.IntegrationsWrite}>
               <Button variant="primary" onClick={onSave}>
-                {alertReceiveChannel.heartbeat ? 'Save' : 'Create'}
+                {heartbeat ? 'Save' : 'Create'}
               </Button>
             </WithPermissionControlTooltip>
           </HorizontalGroup>
@@ -91,24 +99,14 @@ const IntegrationHearbeatForm = observer(({ alertReceveChannelId, onClose }: Int
   );
 
   async function onSave() {
-    const heartbeat = alertReceiveChannel.heartbeat;
+    await heartbeatStore.saveHeartbeat(heartbeat.id, {
+      alert_receive_channel: heartbeat.alert_receive_channel,
+      timeout_seconds: interval,
+    });
 
-    if (heartbeat) {
-      await heartbeatStore.saveHeartbeat(heartbeat.id, {
-        alert_receive_channel: heartbeat.alert_receive_channel,
-        timeout_seconds: interval,
-      });
+    onClose();
 
-      onClose();
-    } else {
-      await heartbeatStore.createHeartbeat(alertReceveChannelId, {
-        timeout_seconds: interval,
-      });
-
-      onClose();
-    }
-
-    await alertReceiveChannelStore.updateItem(alertReceveChannelId);
+    await alertReceiveChannelStore.loadItem(alertReceveChannelId);
   }
 });
 

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

@@ -91,11 +91,14 @@ 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]: alertReceiveChannel,
+      [id]: omit(alertReceiveChannel, 'heartbeat'),
     };
 
+    this.populateHearbeats([alertReceiveChannel]);
+
     return alertReceiveChannel;
   }
 
@@ -118,31 +121,7 @@ export class AlertReceiveChannelStore extends BaseStore {
 
     this.searchResult = results.map((item: AlertReceiveChannel) => item.id);
 
-    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.populateHearbeats(results);
 
     this.updateCounters();
 
@@ -170,7 +149,15 @@ export class AlertReceiveChannelStore extends BaseStore {
       results: results.map((item: AlertReceiveChannel) => item.id),
     };
 
-    const heartbeats = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
+    this.populateHearbeats(results);
+
+    this.updateCounters();
+
+    return results;
+  }
+
+  populateHearbeats(alertReceiveChannels: AlertReceiveChannel[]) {
+    const heartbeats = alertReceiveChannels.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
       if (alertReceiveChannel.heartbeat) {
         acc[alertReceiveChannel.heartbeat.id] = alertReceiveChannel.heartbeat;
       }
@@ -183,22 +170,21 @@ export class AlertReceiveChannelStore extends BaseStore {
       ...heartbeats,
     };
 
-    const alertReceiveChannelToHeartbeat = results.reduce((acc: any, alertReceiveChannel: AlertReceiveChannel) => {
-      if (alertReceiveChannel.heartbeat) {
-        acc[alertReceiveChannel.id] = alertReceiveChannel.heartbeat.id;
-      }
+    const alertReceiveChannelToHeartbeat = alertReceiveChannels.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, heartbeatStore } = useStore();
+  const { alertReceiveChannelStore } = useStore();
 
   const history = useHistory();
 
@@ -927,9 +927,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
   );
 
   function showHeartbeatSettings() {
-    const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
-    const heartbeat = heartbeatStore.items[heartbeatId];
-    return !!heartbeat?.last_heartbeat_time_verbal;
+    return alertReceiveChannel.is_available_for_integration_heartbeat;
   }
 
   function deleteIntegration() {
@@ -1159,22 +1157,19 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
     const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
     const heartbeat = heartbeatStore.items[heartbeatId];
 
-    const heartbeatStatus = Boolean(heartbeat?.status);
-
-    if (
-      !alertReceiveChannel.is_available_for_integration_heartbeat ||
-      !alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal
-    ) {
+    if (!alertReceiveChannel.is_available_for_integration_heartbeat || !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: ${alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal}`}
+        tooltipTitle={`Last heartbeat: ${heartbeat?.last_heartbeat_time_verbal}`}
         tooltipContent={undefined}
       />
     );