From d7ba3a36da33a2f475d529d8bd4f68ff0fde38b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 6 Nov 2019 11:56:17 +0000 Subject: [PATCH] feat(ui): show alertmanager badges on silences when multiple clusters are present --- .../ManagedSilence/SilenceComment.js | 16 ++ .../ManagedSilence/SilenceComment.test.js | 79 ++++++++++ .../__snapshots__/SilenceComment.test.js.snap | 138 ++++++++++++++++++ ui/src/Components/ManagedSilence/index.js | 1 + 4 files changed, 234 insertions(+) diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js index 8e1da6811..8789dbe4f 100644 --- a/ui/src/Components/ManagedSilence/SilenceComment.js +++ b/ui/src/Components/ManagedSilence/SilenceComment.js @@ -13,6 +13,7 @@ import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; import { SilenceProgress } from "./SilenceProgress"; const SilenceComment = ({ + cluster, silence, alertCount, alertCountAlwaysVisible, @@ -37,6 +38,10 @@ const SilenceComment = ({ silence.comment ); + const alertmanagers = alertStore.data.upstreams.instances.filter( + u => u.cluster === cluster + ); + return (
@@ -58,6 +63,16 @@ const SilenceComment = ({ — {silence.createdBy} + {collapsed && + Object.keys(alertStore.data.upstreams.clusters).length > 1 && + alertmanagers.map(alertmanager => ( + + {alertmanager.name} + + ))} {collapsed ? : null}
@@ -85,6 +100,7 @@ const SilenceComment = ({ ); }; SilenceComment.propTypes = { + cluster: PropTypes.string.isRequired, silence: APISilence.isRequired, alertCount: PropTypes.number.isRequired, collapsed: PropTypes.bool.isRequired, diff --git a/ui/src/Components/ManagedSilence/SilenceComment.test.js b/ui/src/Components/ManagedSilence/SilenceComment.test.js index 6cb01e817..11409d8e2 100644 --- a/ui/src/Components/ManagedSilence/SilenceComment.test.js +++ b/ui/src/Components/ManagedSilence/SilenceComment.test.js @@ -28,6 +28,7 @@ const MountedSilenceComment = collapsed => { { ); }; +const MockMultipleClusters = () => { + alertStore.data.upstreams = { + clusters: { default: ["default", "fallback"], second: ["second"] }, + instances: [ + { + name: "default", + uri: "http://am1.example.com", + publicURI: "http://am1.example.com", + headers: {}, + error: "", + version: "0.15.0", + cluster: "default", + clusterMembers: ["default", "fallback"] + }, + { + name: "fallback", + uri: "http://am2.example.com", + publicURI: "http://am2.example.com", + headers: {}, + error: "", + version: "0.15.0", + cluster: "default", + clusterMembers: ["default", "fallback"] + }, + { + name: "second", + uri: "http://am3.example.com", + publicURI: "http://am3.example.com", + headers: {}, + error: "", + version: "0.15.0", + cluster: "second", + clusterMembers: ["second"] + } + ] + }; +}; + describe("", () => { it("Matches snapshot when collapsed", () => { const tree = MountedSilenceComment(true); @@ -46,6 +85,18 @@ describe("", () => { expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); + it("Matches snapshot when collapsed and multiple clusters are present", () => { + MockMultipleClusters(); + const tree = MountedSilenceComment(true); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + + it("Matches snapshot when collapsed and multiple clusters are present", () => { + MockMultipleClusters(); + const tree = MountedSilenceComment(false); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + it("Renders a JIRA link if present", () => { silence.jiraURL = "http://localhost/1234"; silence.jiraID = "1234"; @@ -66,4 +117,32 @@ describe("", () => { collapse.simulate("click"); expect(CollapseMock).toHaveBeenCalled(); }); + + it("Doesn't render alertmanager badges when collapsed and only a single cluster is present", () => { + const tree = MountedSilenceComment(true); + const ams = tree.find("span.badge.badge-secondary"); + expect(ams).toHaveLength(0); + }); + + it("Doesn't render alertmanager badges when expanded and only a single cluster is present", () => { + const tree = MountedSilenceComment(false); + const ams = tree.find("span.badge.badge-secondary"); + expect(ams).toHaveLength(0); + }); + + it("Renders alertmanager badges when collapsed and multiple clusters are present", () => { + MockMultipleClusters(); + const tree = MountedSilenceComment(true); + const ams = tree.find("span.badge.badge-secondary"); + expect(ams).toHaveLength(2); + expect(toDiffableHtml(ams.at(0).html())).toMatch(/default/); + expect(toDiffableHtml(ams.at(1).html())).toMatch(/fallback/); + }); + + it("Doesn't render alertmanager badges when expanded and multiple clusters are present", () => { + MockMultipleClusters(); + const tree = MountedSilenceComment(false); + const ams = tree.find("span.badge.badge-secondary"); + expect(ams).toHaveLength(0); + }); }); diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap index 1af97975a..c311ce334 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap @@ -69,6 +69,144 @@ exports[` Matches snapshot when collapsed 1`] = ` " `; +exports[` Matches snapshot when collapsed and multiple clusters are present 1`] = ` +" +
+
+ + + + +
+
+
+ Mocked Silence +
+
+ + — me@example.com + + + default + + + fallback + + + Expired + + +
+
+
+
+
+ + 123 + +
+ + + + +
+
+
+" +`; + +exports[` Matches snapshot when collapsed and multiple clusters are present 2`] = ` +" +
+
+ + + + +
+
+
+ Mocked Silence +
+
+ + — me@example.com + +
+
+
+
+
+ + 123 + +
+ + + + +
+
+
+" +`; + exports[` Matches snapshot when expanded 1`] = ` "
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js index 9456171b2..8db044877 100644 --- a/ui/src/Components/ManagedSilence/index.js +++ b/ui/src/Components/ManagedSilence/index.js @@ -76,6 +76,7 @@ const ManagedSilence = observer(