diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js
index f05dde437..999aba214 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -2,53 +2,97 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { observer } from "mobx-react";
+import { observable, action } from "mobx";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import { AlertStore } from "Stores/AlertStore";
+import { TooltipWrapper } from "Components/TooltipWrapper";
import { LabelWithPercent } from "Components/Labels/LabelWithPercent";
-const LabelsTable = observer(({ alertStore }) => (
-
-
- {alertStore.data.counters.map(nameStats => (
-
- |
-
-
- {nameStats.hits}
-
- {nameStats.name}
-
- |
-
- {nameStats.values.slice(0, 9).map((valueStats, i) => (
- f.raw === valueStats.raw
- ).length > 0
- }
- />
- ))}
- {nameStats.values.length > 9 ? (
-
- +{nameStats.values.length - 9} more
-
- ) : null}
- |
-
- ))}
-
-
-));
+const TableRows = observer(({ alertStore, nameStats }) =>
+ nameStats.map(nameStats => (
+
+ |
+
+
+ {nameStats.hits}
+
+ {nameStats.name}
+
+ |
+
+ {nameStats.values.slice(0, 9).map((valueStats, i) => (
+ f.raw === valueStats.raw)
+ .length > 0
+ }
+ />
+ ))}
+ {nameStats.values.length > 9 ? (
+
+ +{nameStats.values.length - 9} more
+
+ ) : null}
+ |
+
+ ))
+);
+
+const LabelsTable = observer(
+ ({ alertStore, showAllLabels, toggleAllLabels }) => (
+
+
+
+ nameStats.hits >= alertStore.info.totalAlerts
+ )}
+ >
+ {alertStore.data.counters.filter(
+ nameStats => nameStats.hits < alertStore.info.totalAlerts
+ ).length > 0 ? (
+
+ |
+
+
+
+ |
+
+ ) : null}
+ {showAllLabels ? (
+ nameStats.hits < alertStore.info.totalAlerts
+ )}
+ >
+ ) : null}
+
+
+
+ )
+);
const NothingToShow = () => (
@@ -65,6 +109,18 @@ const OverviewModalContent = observer(
onHide: PropTypes.func.isRequired
};
+ allLabels = observable(
+ {
+ show: false,
+ toggle() {
+ this.show = !this.show;
+ }
+ },
+ {
+ toggle: action.bound
+ }
+ );
+
render() {
const { alertStore, onHide } = this.props;
@@ -80,7 +136,11 @@ const OverviewModalContent = observer(
{alertStore.data.counters.length === 0 ? (
) : (
-
+
)}
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.test.js b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
index 4fd65343f..ffa1ede25 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.test.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
@@ -21,6 +21,18 @@ afterEach(() => {
jest.restoreAllMocks();
});
+const MountedOverviewModalContent = () =>
+ // we have multiple fragments and enzyme only renders the first one
+ // in html() and text(), debug() would work but it's noisy
+ // https://github.com/airbnb/enzyme/issues/1213
+ mount(
+
+
+
+
+
+ );
+
describe("", () => {
it("matches snapshot with labels to show", () => {
alertStore.filters.values = [
@@ -63,32 +75,70 @@ describe("", () => {
}
];
- // we have multiple fragments and enzyme only renders the first one
- // in html() and text(), debug() would work but it's noisy
- // https://github.com/airbnb/enzyme/issues/1213
- const tree = mount(
-
-
-
-
-
- );
+ const tree = MountedOverviewModalContent();
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot with no labels to show", () => {
alertStore.data.counters = [];
-
- // we have multiple fragments and enzyme only renders the first one
- // in html() and text(), debug() would work but it's noisy
- // https://github.com/airbnb/enzyme/issues/1213
- const tree = mount(
-
-
-
-
-
- );
+ const tree = MountedOverviewModalContent();
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
+
+ it("renders all labels after expand button click", () => {
+ alertStore.info.totalAlerts = 5;
+ alertStore.data.counters = [
+ {
+ name: "foo",
+ hits: 5,
+ values: [
+ { value: "bar", raw: "foo=bar", hits: 5, percent: 100, offset: 0 }
+ ]
+ },
+ {
+ name: "bar",
+ hits: 3,
+ values: [
+ {
+ value: "foo",
+ raw: "bar=foo",
+ hits: 3,
+ percent: 100,
+ offset: 0
+ }
+ ]
+ }
+ ];
+ const tree = MountedOverviewModalContent();
+
+ expect(tree.find("span.components-label")).toHaveLength(2);
+ expect(
+ tree
+ .find("span.components-label")
+ .at(0)
+ .text()
+ ).toBe("5foo");
+ expect(
+ tree
+ .find("span.components-label")
+ .at(1)
+ .text()
+ ).toBe("5foo: bar");
+
+ tree.find("svg.cursor-pointer").simulate("click");
+
+ expect(tree.find("span.components-label")).toHaveLength(4);
+ expect(
+ tree
+ .find("span.components-label")
+ .at(2)
+ .text()
+ ).toBe("3bar");
+ expect(
+ tree
+ .find("span.components-label")
+ .at(3)
+ .text()
+ ).toBe("3bar: foo");
+ });
});