feat(ui): support labels:valueOnly for labels

Fixes #3221

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
 

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");
+  });
 });

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>

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[];

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[],

ui/src/__fixtures__/Fetch.ts

@@ -72,6 +72,7 @@ const EmptyAPIResponse = (): APIAlertsResponseT => ({
       comment: "ACK! Mock comment",
     },
     staticColorLabels: ["job"],
+    valueOnlyLabels: [],
     annotationsDefaultHidden: false,
     annotationsHidden: [],
     annotationsVisible: [],