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}`;