diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx index 94a29df9..654a603f 100644 --- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx +++ b/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 -
- +
+ {/*

+ To send periodic heartbeat alerts from to OnCall, do + the following: + +

*/} @@ -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); } }); diff --git a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts b/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts index fb81d578..67b2c8d3 100644 --- a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts +++ b/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 { 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 diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx index 550dce15..80465896 100644 --- a/grafana-plugin/src/pages/integration/Integration.tsx +++ b/grafana-plugin/src/pages/integration/Integration.tsx @@ -726,7 +726,7 @@ const IntegrationActions: React.FC = ({ alertReceiveChannel, changeIsTemplateSettingsOpen, }) => { - const { alertReceiveChannelStore, heartbeatStore } = useStore(); + const { alertReceiveChannelStore } = useStore(); const history = useHistory(); @@ -927,9 +927,7 @@ const IntegrationActions: React.FC = ({ ); 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 = ({ 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 ( : } - tooltipTitle={`Last heartbeat: ${alertReceiveChannel.heartbeat?.last_heartbeat_time_verbal}`} + tooltipTitle={`Last heartbeat: ${heartbeat?.last_heartbeat_time_verbal}`} tooltipContent={undefined} /> );