From ed31e2c465e6bee53fedf4e5c8bf49947f0a2a07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sat, 19 Feb 2022 12:14:38 +0000 Subject: [PATCH] fix(ui): don't render @cluster labels if there's only one Fixes #3994 --- CHANGELOG.md | 4 + .../AlertGrid/AlertGroup/Alert/index.test.tsx | 61 ++++++++++ .../Grid/AlertGrid/AlertGroup/Alert/index.tsx | 22 ++-- .../__snapshots__/index.test.tsx.snap | 20 ---- .../AlertGroup/GroupFooter/index.test.tsx | 66 +++++++++++ .../AlertGroup/GroupFooter/index.tsx | 18 +-- .../Grid/AlertGrid/AlertGroup/index.test.tsx | 104 +++++++++++++++++- 7 files changed, 256 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6aaf4e90..a425a1740 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ - Fixed regexp escaping when editing silences #3936. +### Changed + +- Don't render `@cluster` labels if there's only one cluster configured #3994. + ## v0.98 ### Fixed diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx index c6a7ea5a6..cb829067a 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx @@ -134,6 +134,37 @@ describe("", () => { }); it("renders @cluster label for non-shared clusters", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], second: ["second"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "second", + cluster: "second", + clusterMembers: ["second"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); + const alert = MockedAlert(); const group = MockAlertGroup([], [alert], [], [], {}); const tree = MountedAlert(alert, group, false, false); @@ -144,6 +175,36 @@ describe("", () => { }); it("only renders one @cluster label per alertmanager cluster", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], second: ["second"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "HA", + cluster: "HA", + clusterMembers: ["HA"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); const alert = MockedAlert(); alert.alertmanager.push({ fingerprint: "123", diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx index c8ab41154..b4e1e0757 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx @@ -120,16 +120,18 @@ const Alert: FC<{ alertStore={alertStore} /> ))} - {clusters - .filter((c) => group.shared.clusters.indexOf(c) < 0) - .map((cluster) => ( - - ))} + {Object.keys(alertStore.data.upstreams.clusters).length > 1 + ? clusters + .filter((c) => group.shared.clusters.indexOf(c) < 0) + .map((cluster) => ( + + )) + : null} {showReceiver ? ( matches snapshot 1`] = ` -
- - - @cluster: - - - default - - -
@@ -200,16 +190,6 @@ exports[` mathes snapshot when silence is rendered 1`] = `
-
- - - @cluster: - - - default - - -
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx index 054ff3e41..8274088ca 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx @@ -208,4 +208,70 @@ describe("", () => { expect(tree.find("RenderLinkAnnotation")).toHaveLength(0); expect(tree.find("RenderNonLinkAnnotation")).toHaveLength(0); }); + + it("renders @cluster label if there's more than one cluster", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], second: ["second"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "second", + cluster: "second", + clusterMembers: ["second"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); + group.shared.clusters = ["default", "second"]; + const tree = mount( + , + { + wrappingComponent: ThemeContext.Provider, + wrappingComponentProps: { value: MockThemeContext }, + } + ); + expect(toDiffableHtml(tree.html())).toMatch(/@cluster:/); + }); + + it("doesn't render @cluster label if there's only one cluster", () => { + group.shared.clusters = ["default"]; + const tree = mount( + , + { + wrappingComponent: ThemeContext.Provider, + wrappingComponentProps: { value: MockThemeContext }, + } + ); + expect(toDiffableHtml(tree.html())).not.toMatch(/@cluster:/); + }); }); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx index 5a5a861c1..994c10949 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx @@ -51,14 +51,16 @@ const GroupFooter: FC<{ alertStore={alertStore} /> ))} - {group.shared.clusters.map((cluster) => ( - - ))} + {Object.keys(alertStore.data.upstreams.clusters).length > 1 + ? group.shared.clusters.map((cluster) => ( + + )) + : null} {alertStore.data.receivers.length > 1 ? ( ", () => { }); it("renders Alertmanager cluster labels in footer if shared", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], second: ["second"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "second", + cluster: "second", + clusterMembers: ["second"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); MockAlerts(2, 2); - group.shared.clusters = ["default"]; + group.shared.clusters = ["default", "second"]; const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)"); expect(tree.find("Memo(GroupFooter)").html()).toMatch(/@cluster/); }); it("only renders one @cluster label per cluster in the footer", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], HA: ["ha1", "ha2"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "ha1", + cluster: "HA", + clusterMembers: ["ha1", "ha2"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "ha2", + cluster: "HA", + clusterMembers: ["ha1", "ha2"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); MockAlerts(2, 2); for (let i = 0; i < group.alerts.length; i++) { group.alerts[i].alertmanager.push({ @@ -198,6 +270,36 @@ describe("", () => { }); it("doesn't render @cluster labels in footer when they are unique", () => { + alertStore.data.setUpstreams({ + counters: { total: 2, healthy: 2, failed: 0 }, + clusters: { default: ["default"], second: ["second"] }, + instances: [ + { + name: "default", + cluster: "default", + clusterMembers: ["default"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + { + name: "second", + cluster: "second", + clusterMembers: ["second"], + uri: "http://localhost", + publicURI: "http://localhost", + error: "", + version: "0.21.0", + readonly: false, + corsCredentials: "include", + headers: {}, + }, + ], + }); MockAlerts(5, 5); for (let i = 0; i < group.alerts.length; i++) { group.alerts[i].alertmanager[0].name = `fakeAlertmanager${i}`;