diff --git a/ui/package-lock.json b/ui/package-lock.json index 1c6959dea..e03ea88c5 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -12474,14 +12474,6 @@ "prop-types": "^15.6.2" } }, - "react-lazily-render": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/react-lazily-render/-/react-lazily-render-1.2.0.tgz", - "integrity": "sha512-7G3w4m187V1VXs2LmF5e++ZPj3BqZ0lSsD63Tnz1L+MqsPCW55qqsqf1cM/uTHAR8gRK0tARosx0o9mJUyBeAg==", - "requires": { - "scrollparent": "^2.0.1" - } - }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -13501,11 +13493,6 @@ "ajv-keywords": "^3.1.0" } }, - "scrollparent": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz", - "integrity": "sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=" - }, "scss-tokenizer": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", diff --git a/ui/package.json b/ui/package.json index 300540214..bda32d7c5 100644 --- a/ui/package.json +++ b/ui/package.json @@ -39,7 +39,6 @@ "react-input-range": "1.3.0", "react-js-pagination": "3.0.2", "react-json-pretty": "2.1.0", - "react-lazily-render": "1.2.0", "react-linkify": "0.2.2", "react-masonry-infinite": "1.2.2", "react-moment": "0.9.2", diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/index.test.js.snap deleted file mode 100644 index f116851e6..000000000 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,149 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` lazy rendering matches snapshot when invisible 1`] = ` -" -
-
-
- - - - - - - - - -
- - - alertname: - - - Fake Alert - - -
-
- - - groupName: - - - fakeGroup - - -
- - -
- - 1 - -
- -
- - - - -
- - -
-
-
    -
  • -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
-
-
-
-" -`; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index 333792e8b..3e0cc34a1 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -6,8 +6,6 @@ import { observable, action, toJS } from "mobx"; import hash from "object-hash"; -import LazilyRender from "react-lazily-render"; - import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus"; import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus"; @@ -52,87 +50,6 @@ const AllAlertsAreUsingSameAlertmanagers = alerts => { ); }; -const AlertGroupContent = observer( - ({ - alertStore, - silenceFormStore, - group, - showAlertmanagers, - afterUpdate, - renderConfig, - showLoadButtons, - loadLess, - loadMore - }) => ( -
- -
- ) -); - -const FakeLabel = ({ width, color }) => ( -
- {" "} -
-); - -const AlertGroupPlaceholder = () => ( -
- -
-); - const AlertGroup = observer( class AlertGroup extends Component { static propTypes = { @@ -307,43 +224,56 @@ const AlertGroup = observer( setIsMenuOpen={this.renderConfig.setIsMenuOpen} /> {this.collapse.value ? null : ( - this.defaultRenderCount - } - loadLess={this.loadLess} - loadMore={this.loadMore} - /> - } - placeholder={} - /> +
+
    + {group.alerts + .slice(0, this.renderConfig.alertsToRender) + .map(alert => ( + + ))} + {group.alerts.length > this.defaultRenderCount ? ( +
  • + + + {Math.min( + this.renderConfig.alertsToRender, + group.alerts.length + )} + {" of "} + {group.alerts.length} + + +
    • + ) : null} +
+
)} {this.collapse.value === false && group.alerts.length > 1 ? ( - - } - placeholder={null} + ) : null} diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js index 1f092d8c2..c79616719 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js @@ -6,8 +6,6 @@ import { mount } from "enzyme"; import moment from "moment"; -import toDiffableHtml from "diffable-html"; - import { MockAlert, MockAlertGroup } from "__mocks__/Alerts.js"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; @@ -32,12 +30,6 @@ const MockGroup = groupName => { let originalInnerWidth; -const MockedLazyRender = jest.fn(({ content }) => { - return content; -}); - -jest.mock("react-lazily-render", () => props => MockedLazyRender(props)); - beforeAll(() => { originalInnerWidth = global.innerWidth; }); @@ -380,50 +372,3 @@ describe(" card theme", () => { expect(tree.find("GroupHeader").props().themedCounters).toBe(false); }); }); - -describe(" lazy rendering", () => { - // need to add 2x mockImplementationOnce per render since we use it twice - // inside each AlertGroupContent - const RenderPlaceholder = ({ placeholder }) => { - return placeholder; - }; - - it("renders FilteringLabel when visible", () => { - MockAlerts(5); - const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find("FilteringLabel").length).toBe(8); - }); - - it("renders GroupFooter when visible", () => { - MockAlerts(5); - const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find("GroupFooter").length).toBe(1); - }); - - it("renders AlertGroupPlaceholder when invisible", () => { - MockAlerts(5); - MockedLazyRender.mockImplementationOnce( - RenderPlaceholder - ).mockImplementationOnce(RenderPlaceholder); - const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find("AlertGroupPlaceholder").length).toBe(1); - }); - - it("doesn't render GroupFooter when invisible", () => { - MockAlerts(5); - MockedLazyRender.mockImplementationOnce( - RenderPlaceholder - ).mockImplementationOnce(RenderPlaceholder); - const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find("GroupFooter").length).toBe(0); - }); - - it("matches snapshot when invisible", () => { - MockAlerts(5); - MockedLazyRender.mockImplementationOnce( - RenderPlaceholder - ).mockImplementationOnce(RenderPlaceholder); - const tree = MountedAlertGroup(jest.fn(), false); - expect(toDiffableHtml(tree.html())).toMatchSnapshot(); - }); -});