From 0c32d7af413c1c8bbb51a583110547e893238029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 19 Jul 2021 19:32:27 +0100
Subject: [PATCH] feat(ui): support labels:valueOnly for labels

Fixes #3221
---
 CHANGELOG.md                                  |  1 +
 .../Labels/FilteringLabel/index.test.tsx      | 22 +++++++++++++++++++
 .../Labels/FilteringLabel/index.tsx           |  6 ++++-
 ui/src/Models/APITypes.ts                     |  1 +
 ui/src/Stores/AlertStore.ts                   |  1 +
 ui/src/__fixtures__/Fetch.ts                  |  1 +
 6 files changed, 31 insertions(+), 1 deletion(-)

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("<FilteringLabel />", () => {
     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(
+      <FilteringLabel alertStore={alertStore} name="foo" value="bar" />
+    );
+    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(
+      <FilteringLabel alertStore={alertStore} name="foo" value="bar" />
+    );
+    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 (
     <TooltipWrapper title="Click to only show alerts with this label or Alt+Click to hide them">
       <span className={cs.className} style={cs.style} onClick={handleClick}>
-        <span className="components-label-name">{name}:</span>{" "}
+        {alertStore.settings.values.valueOnlyLabels.includes(name) ? null : (
+          <>
+            <span className="components-label-name">{name}:</span>{" "}
+          </>
+        )}
         <span className="components-label-value">{value}</span>
       </span>
     </TooltipWrapper>
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: [],