feat(ui): allow removing filters from the overview modal

2026-05-07 03:26:52 +00:00 · 2019-07-12 16:55:16 +01:00
parent 3d7fefb8e5
commit 88ba0cc657
5 changed files with 162 additions and 43 deletions
--- a/ui/src/Components/Labels/LabelWithPercent/snapshots/index.test.js.snap
+++ b/ui/src/Components/Labels/LabelWithPercent/snapshots/index.test.js.snap
@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
+"
+<div class
+     style=\\"display: inline-block; max-width: 100%;\\"
+     data-tooltipped
+     aria-describedby=\\"tippy-tooltip-3\\"
+     data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
+>
+  <span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
+    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+      25
+    </span>
+    <span>
+      <span class=\\"components-label-name\\">
+        foo:
+      </span>
+      <span class=\\"components-label-value\\">
+        bar
+      </span>
+    </span>
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"times\\"
+         class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 352 512\\"
+         style=\\"font-size: 100%;\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+      >
+      </path>
+    </svg>
+  </span>
+  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+    <div class=\\"progress-bar bg-warning\\"
+         role=\\"progressbar\\"
+         style=\\"width: 50%;\\"
+         aria-valuenow=\\"50\\"
+         aria-valuemin=\\"0\\"
+         aria-valuemax=\\"100\\"
+    >
+    </div>
+  </div>
+</div>
+"
+`;
+
 exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 "
 <div class
@@ -12,11 +62,13 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
      25
    </span>
-    <span class=\\"components-label-name\\">
-      foo:
-    </span>
-    <span class=\\"components-label-value\\">
-      bar
+    <span>
+      <span class=\\"components-label-name\\">
+        foo:
+      </span>
+      <span class=\\"components-label-value\\">
+        bar
+      </span>
    </span>
  </span>
  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
@@ -45,11 +97,13 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
      25
    </span>
-    <span class=\\"components-label-name\\">
-      foo:
-    </span>
-    <span class=\\"components-label-value\\">
-      bar
+    <span>
+      <span class=\\"components-label-name\\">
+        foo:
+      </span>
+      <span class=\\"components-label-value\\">
+        bar
+      </span>
    </span>
  </span>
  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
--- a/ui/src/Components/Labels/LabelWithPercent/index.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -3,7 +3,11 @@ import PropTypes from "prop-types";

 import { inject, observer } from "mobx-react";

+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
+
 import { AlertStore } from "Stores/AlertStore";
+import { QueryOperators, FormatQuery } from "Common/Query";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { BaseLabel } from "Components/Labels/BaseLabel";

@@ -18,11 +22,19 @@ const LabelWithPercent = inject("alertStore")(
        value: PropTypes.string.isRequired,
        hits: PropTypes.number.isRequired,
        percent: PropTypes.number.isRequired,
-        offset: PropTypes.number.isRequired
+        offset: PropTypes.number.isRequired,
+        isActive: PropTypes.bool.isRequired
+      };
+
+      removeFromFilters = () => {
+        const { alertStore, name, value } = this.props;
+        alertStore.filters.removeFilter(
+          FormatQuery(name, QueryOperators.Equal, value)
+        );
      };

      render() {
-        const { name, value, hits, percent, offset } = this.props;
+        const { name, value, hits, percent, offset, isActive } = this.props;

        let cs = this.getClassAndStyle(
          name,
@@ -39,16 +51,22 @@ const LabelWithPercent = inject("alertStore")(

        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={e => this.handleClick(e)}
-            >
+            <span className={cs.className} style={cs.style}>
              <span className="mr-1 px-1 bg-primary text-white components-labelWithPercent-percent">
                {hits}
              </span>
-              <span className="components-label-name">{name}:</span>{" "}
-              <span className="components-label-value">{value}</span>
+              <span onClick={e => this.handleClick(e)}>
+                <span className="components-label-name">{name}:</span>{" "}
+                <span className="components-label-value">{value}</span>
+              </span>
+              {isActive ? (
+                <FontAwesomeIcon
+                  className="cursor-pointer text-reset ml-1 close"
+                  style={{ fontSize: "100%" }}
+                  icon={faTimes}
+                  onClick={this.removeFromFilters}
+                />
+              ) : null}
            </span>
            <div className="progress components-labelWithPercent-progress mr-1">
              {offset === 0 ? null : (
--- a/ui/src/Components/Labels/LabelWithPercent/index.test.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.test.js
@@ -14,7 +14,14 @@ beforeEach(() => {
  alertStore = new AlertStore([]);
 });

-const MountedLabelWithPercent = (name, value, hits, percent, offset) => {
+const MountedLabelWithPercent = (
+  name,
+  value,
+  hits,
+  percent,
+  offset,
+  isActive
+) => {
  return mount(
    <LabelWithPercent
      alertStore={alertStore}
@@ -23,27 +30,37 @@ const MountedLabelWithPercent = (name, value, hits, percent, offset) => {
      hits={hits}
      percent={percent}
      offset={offset}
+      isActive={isActive}
    />
  );
 };

 const RenderAndClick = (name, value, clickOptions) => {
-  const tree = MountedLabelWithPercent(name, value, 25, 50, 0);
-  tree.find(".components-label").simulate("click", clickOptions || {});
+  const tree = MountedLabelWithPercent(name, value, 25, 50, 0, false);
+  tree
+    .find(".components-label")
+    .find("span")
+    .at(2)
+    .simulate("click", clickOptions || {});
 };

 describe("<LabelWithPercent />", () => {
  it("matches snapshot with offset=0", () => {
-    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 0);
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 0, false);
    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
  });

  it("matches snapshot with offset=25", () => {
-    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 25);
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 25, false);
    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
  });

-  it("calling onClick() adds a new filter 'foo=bar'", () => {
+  it("matches snapshot with isActive=true", () => {
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 0, true);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("calling adds a new filter 'foo=bar'", () => {
    RenderAndClick("foo", "bar");
    expect(alertStore.filters.values).toHaveLength(1);
    expect(alertStore.filters.values).toContainEqual(
@@ -51,6 +68,18 @@ describe("<LabelWithPercent />", () => {
    );
  });

+  it("clicking the X buttom removes label from filters", () => {
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 50, 0, true);
+    tree
+      .find(".components-label")
+      .find("svg")
+      .simulate("click");
+    expect(alertStore.filters.values).toHaveLength(0);
+    expect(alertStore.filters.values).not.toContainEqual(
+      NewUnappliedFilter("foo=bar")
+    );
+  });
+
  it("calling onClick() while holding Alt key adds a new filter 'foo!=bar'", () => {
    RenderAndClick("foo", "bar", { altKey: true });
    expect(alertStore.filters.values).toHaveLength(1);
@@ -60,17 +89,17 @@ describe("<LabelWithPercent />", () => {
  });

  it("uses bg-danger when percent is >66", () => {
-    const tree = MountedLabelWithPercent("foo", "bar", 25, 67, 0);
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 67, 0, false);
    expect(tree.html()).toMatch(/progress-bar bg-danger/);
  });

  it("uses bg-warning when percent is >33", () => {
-    const tree = MountedLabelWithPercent("foo", "bar", 25, 66, 0);
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 66, 0, false);
    expect(tree.html()).toMatch(/progress-bar bg-warning/);
  });

  it("uses bg-success when percent is <=33", () => {
-    const tree = MountedLabelWithPercent("foo", "bar", 25, 33, 0);
+    const tree = MountedLabelWithPercent("foo", "bar", 25, 33, 0, false);
    expect(tree.html()).toMatch(/progress-bar bg-success/);
  });
 });
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";

 import { AlertStore } from "Stores/AlertStore";
+import { QueryOperators, FormatQuery } from "Common/Query";
 import { LabelWithPercent } from "Components/Labels/LabelWithPercent";

 const LabelsTable = observer(({ alertStore }) => (
@@ -34,6 +35,17 @@ const LabelsTable = observer(({ alertStore }) => (
                  .slice(0, i)
                  .map(ns => ns.percent)
                  .reduce((a, b) => a + b, 0)}
+                isActive={
+                  alertStore.filters.values.filter(
+                    f =>
+                      f.raw ===
+                      FormatQuery(
+                        nameStats.name,
+                        QueryOperators.Equal,
+                        valueStats.value
+                      )
+                  ).length > 0
+                }
              />
            ))}
          </td>
--- a/ui/src/Components/OverviewModal/snapshots/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/snapshots/OverviewModalContent.test.js.snap
@@ -44,11 +44,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                  8
                </span>
-                <span class=\\"components-label-name\\">
-                  foo:
-                </span>
-                <span class=\\"components-label-value\\">
-                  bar1
+                <span>
+                  <span class=\\"components-label-name\\">
+                    foo:
+                  </span>
+                  <span class=\\"components-label-value\\">
+                    bar1
+                  </span>
                </span>
              </span>
              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
@@ -72,11 +74,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                  4
                </span>
-                <span class=\\"components-label-name\\">
-                  foo:
-                </span>
-                <span class=\\"components-label-value\\">
-                  bar2
+                <span>
+                  <span class=\\"components-label-name\\">
+                    foo:
+                  </span>
+                  <span class=\\"components-label-value\\">
+                    bar2
+                  </span>
                </span>
              </span>
              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
@@ -108,11 +112,13 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                  4
                </span>
-                <span class=\\"components-label-name\\">
-                  foo:
-                </span>
-                <span class=\\"components-label-value\\">
-                  bar3
+                <span>
+                  <span class=\\"components-label-name\\">
+                    foo:
+                  </span>
+                  <span class=\\"components-label-value\\">
+                    bar3
+                  </span>
                </span>
              </span>
              <div class=\\"progress components-labelWithPercent-progress mr-1\\">