From 443dfc02bedf372a1951f7704f59bf9fd1ed5d27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 31 Jul 2019 23:22:53 +0100 Subject: [PATCH] Revert "feat(ui): lazy render alert group content" This reverts commit 42a9998f14b7dc7d6f9bc1633e4f6755c69dec67. Lazy render conflicts with grid packing and alert groups being move around, this is because it only listens to scroll events. Need a visibility sensor for this feature to work properly. --- ui/package-lock.json | 13 -- ui/package.json | 1 - .../__snapshots__/index.test.js.snap | 149 ---------------- .../Grid/AlertGrid/AlertGroup/index.js | 166 +++++------------- .../Grid/AlertGrid/AlertGroup/index.test.js | 55 ------ 5 files changed, 48 insertions(+), 336 deletions(-) delete mode 100644 ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/index.test.js.snap 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 - }) => ( -
-
    - {group.alerts.slice(0, renderConfig.alertsToRender).map(alert => ( - - ))} - {showLoadButtons ? ( -
  • - - - {Math.min(renderConfig.alertsToRender, group.alerts.length)} - {" of "} - {group.alerts.length} - - -
    • - ) : null} -
-
- ) -); - -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(); - }); -});