diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf72d1582..8f07a8187 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
- Individual alert details are now lazy-loaded to improve performance
when dealing with a huge number of alerts per group.
- Added `/version` endpoint returning karma and Go runtime version #3332.
+- Added `labels:valueOnly` config option, see #3221.
### Changed
diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.tsx b/ui/src/Components/Labels/FilteringLabel/index.test.tsx
index ee041784d..78e41126a 100644
--- a/ui/src/Components/Labels/FilteringLabel/index.test.tsx
+++ b/ui/src/Components/Labels/FilteringLabel/index.test.tsx
@@ -80,4 +80,26 @@ describe("", () => {
const tree = MountedFilteringLabel("foo", "bar");
expect(tree.hasClass("components-label-bright")).toBe(true);
});
+
+ it("doesn't render the name if it's included in valueOnlyLabels", () => {
+ alertStore.settings.setValues({
+ ...alertStore.settings.values,
+ valueOnlyLabels: ["foo"],
+ });
+ const tree = mount(
+
+ );
+ expect(tree.text()).toBe("bar");
+ });
+
+ it("renders the name if it's not included in valueOnlyLabels", () => {
+ alertStore.settings.setValues({
+ ...alertStore.settings.values,
+ valueOnlyLabels: ["bar"],
+ });
+ const tree = mount(
+
+ );
+ expect(tree.text()).toBe("foo: bar");
+ });
});
diff --git a/ui/src/Components/Labels/FilteringLabel/index.tsx b/ui/src/Components/Labels/FilteringLabel/index.tsx
index 402188d09..c3fae385f 100644
--- a/ui/src/Components/Labels/FilteringLabel/index.tsx
+++ b/ui/src/Components/Labels/FilteringLabel/index.tsx
@@ -36,7 +36,11 @@ const FilteringLabel: FC<{
return (
- {name}:{" "}
+ {alertStore.settings.values.valueOnlyLabels.includes(name) ? null : (
+ <>
+ {name}:{" "}
+ >
+ )}
{value}
diff --git a/ui/src/Models/APITypes.ts b/ui/src/Models/APITypes.ts
index b4b87adc0..1de8fd55d 100644
--- a/ui/src/Models/APITypes.ts
+++ b/ui/src/Models/APITypes.ts
@@ -173,6 +173,7 @@ export interface APILabelCounterT {
export interface APISettingsT {
staticColorLabels: string[];
+ valueOnlyLabels: string[];
annotationsDefaultHidden: boolean;
annotationsHidden: string[];
annotationsVisible: string[];
diff --git a/ui/src/Stores/AlertStore.ts b/ui/src/Stores/AlertStore.ts
index 591e2acf6..747175722 100644
--- a/ui/src/Stores/AlertStore.ts
+++ b/ui/src/Stores/AlertStore.ts
@@ -462,6 +462,7 @@ class AlertStore {
{
values: {
staticColorLabels: [] as string[],
+ valueOnlyLabels: [] as string[],
annotationsDefaultHidden: false as boolean,
annotationsHidden: [] as string[],
annotationsVisible: [] as string[],
diff --git a/ui/src/__fixtures__/Fetch.ts b/ui/src/__fixtures__/Fetch.ts
index f3ab5c58e..991e6df1f 100644
--- a/ui/src/__fixtures__/Fetch.ts
+++ b/ui/src/__fixtures__/Fetch.ts
@@ -72,6 +72,7 @@ const EmptyAPIResponse = (): APIAlertsResponseT => ({
comment: "ACK! Mock comment",
},
staticColorLabels: ["job"],
+ valueOnlyLabels: [],
annotationsDefaultHidden: false,
annotationsHidden: [],
annotationsVisible: [],