diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
index 4965e77ca..ee6dbf26f 100644
--- 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 (
- this.handleClick(e)}
- >
+
{hits}
- {name}:{" "}
- {value}
+ this.handleClick(e)}>
+ {name}:{" "}
+ {value}
+
+ {isActive ? (
+
+ ) : null}
{offset === 0 ? null : (
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.test.js b/ui/src/Components/Labels/LabelWithPercent/index.test.js
index e5e871c3d..6f2390fc6 100644
--- 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(
{
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("", () => {
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("", () => {
);
});
+ 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("", () => {
});
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/);
});
});
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js
index cc18854db..5eb4e39db 100644
--- 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
+ }
/>
))}
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index 53950a672..17911a8a1 100644
--- 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[` matches snapshot with labels to show 1`] = `
8
-
- foo:
-
-
- bar1
+
+
+ foo:
+
+
+ bar1
+
@@ -72,11 +74,13 @@ exports[`
matches snapshot with labels to show 1`] = `
4
-
- foo:
-
-
- bar2
+
+
+ foo:
+
+
+ bar2
+
@@ -108,11 +112,13 @@ exports[`
matches snapshot with labels to show 1`] = `
4
-
- foo:
-
-
- bar3
+
+
+ foo:
+
+
+ bar3
+