diff --git a/ui/src/Components/AlertAck/index.js b/ui/src/Components/AlertAck/index.js index 324eec524..ffa3c9f3d 100644 --- a/ui/src/Components/AlertAck/index.js +++ b/ui/src/Components/AlertAck/index.js @@ -118,6 +118,18 @@ const AlertAck = ({ alertStore, silenceFormStore, group }) => { } }, [alertStore.data, clusters, currentCluster, reset]); + useEffect(() => { + let timer; + if (!isAcking && error) { + timer = setTimeout(() => { + setUpstreams([]); + setIsAcking(false); + reset(); + }, 20 * 1000); + } + return () => clearTimeout(timer); + }, [isAcking, error, reset]); + return useObserver(() => alertStore.settings.values.alertAcknowledgement.enabled === false ? null : ( { + jest.useFakeTimers(); advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0))); alertStore = new AlertStore([]); @@ -126,6 +127,30 @@ describe("", () => { expect(toDiffableHtml(tree.html())).toMatch(/fa-exclamation-circle/); }); + it("resets faExclamationCircle after 20s", async () => { + fetchMock.any( + { + status: 500, + body: "error message", + }, + { + overwriteRoutes: true, + } + ); + const tree = MountedAlertAck(); + const button = tree.find("span.badge"); + button.simulate("click"); + await act(async () => { + await fetchMock.flush(true); + }); + expect(toDiffableHtml(tree.html())).toMatch(/fa-exclamation-circle/); + + act(() => jest.advanceTimersByTime(21 * 1000)); + tree.update(); + expect(toDiffableHtml(tree.html())).not.toMatch(/fa-exclamation-circle/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-check/); + }); + it("uses faCheckCircle after successful fetch", async () => { const tree = MountedAlertAck(); const button = tree.find("span.badge");