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