From 02c12a0374bdcffe4b7c6a0d1b813792713f439f Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 6 Jun 2019 15:15:26 -0700 Subject: [PATCH] perf: dashboard cell and view rendering (#14078) * chore: package.lock * chore: remove unused logic * perf: only render views in view :) * chore: cleanup * chore: remove cruft --- ui/package-lock.json | 73 ++++++++++++++++--- ui/src/shared/components/RefreshingView.tsx | 4 +- ui/src/shared/components/TimeSeries.tsx | 8 +- ui/src/shared/components/cells/Cell.tsx | 39 +++++++++- ui/src/shared/components/cells/Cells.tsx | 41 +---------- .../shared/components/cells/Dashboards.scss | 2 +- ui/src/shared/components/cells/View.tsx | 1 - 7 files changed, 104 insertions(+), 64 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 1399f3c5b12..b0a656572ce 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -1034,6 +1034,38 @@ "from": "github:influxdata/influxdb2-js#dev", "requires": { "axios": "^0.19.0" + }, + "dependencies": { + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + } + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "is-buffer": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", + "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==" + } } }, "@influxdata/influxdb-templates": { @@ -5894,7 +5926,8 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5918,13 +5951,15 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5941,19 +5976,22 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6084,7 +6122,8 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6098,6 +6137,7 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6114,6 +6154,7 @@ "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6122,13 +6163,15 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6149,6 +6192,7 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6237,7 +6281,8 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6251,6 +6296,7 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6346,7 +6392,8 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6388,6 +6435,7 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6409,6 +6457,7 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6457,13 +6506,15 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/ui/src/shared/components/RefreshingView.tsx b/ui/src/shared/components/RefreshingView.tsx index 313f62c79fd..adcc4d39b95 100644 --- a/ui/src/shared/components/RefreshingView.tsx +++ b/ui/src/shared/components/RefreshingView.tsx @@ -24,7 +24,6 @@ import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface' interface OwnProps { timeRange: TimeRange - inView: boolean manualRefresh: number properties: QueryViewProperties dashboardID: string @@ -62,7 +61,7 @@ class RefreshingView extends PureComponent { } public render() { - const {inView, properties, manualRefresh, variablesStatus} = this.props + const {properties, manualRefresh, variablesStatus} = this.props const {submitToken} = this.state return ( @@ -71,7 +70,6 @@ class RefreshingView extends PureComponent { spinnerComponent={} > JSX.Element } @@ -77,7 +76,6 @@ const defaultState = (): State => ({ class TimeSeries extends Component { public static defaultProps = { - inView: true, implicitSubmit: true, } @@ -118,14 +116,10 @@ class TimeSeries extends Component { } private reload = async () => { - const {inView, variables, notify} = this.props + const {variables, notify} = this.props const queries = this.props.queries.filter(({text}) => !!text.trim()) const orgID = this.props.params.orgID - if (!inView) { - return - } - if (!queries.length) { this.setState(defaultState()) diff --git a/ui/src/shared/components/cells/Cell.tsx b/ui/src/shared/components/cells/Cell.tsx index 9afb7ab2bd5..076bc1ae79c 100644 --- a/ui/src/shared/components/cells/Cell.tsx +++ b/ui/src/shared/components/cells/Cell.tsx @@ -1,5 +1,5 @@ // Libraries -import React, {Component} from 'react' +import React, {Component, RefObject} from 'react' import {connect} from 'react-redux' import {get} from 'lodash' @@ -38,10 +38,36 @@ interface OwnProps { onEditNote: (id: string) => void } +interface State { + inView: boolean +} + type Props = StateProps & OwnProps @ErrorHandling -class CellComponent extends Component { +class CellComponent extends Component { + state: State = { + inView: false, + } + + private observer: IntersectionObserver + + private cellRef: RefObject = React.createRef() + + public componentDidMount() { + this.observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + const {isIntersecting} = entry + if (isIntersecting) { + this.setState({inView: true}) + this.observer.disconnect() + } + }) + }) + + this.observer.observe(this.cellRef.current) + } + public render() { const { onEditCell, @@ -51,6 +77,7 @@ class CellComponent extends Component { cell, view, } = this.props + const {inView} = this.state return ( <> @@ -66,8 +93,12 @@ class CellComponent extends Component { onCSVDownload={this.handleCSVDownload} /> )} -
- {this.view} +
+ {inView && this.view}
) diff --git a/ui/src/shared/components/cells/Cells.tsx b/ui/src/shared/components/cells/Cells.tsx index d7df7de3ebc..c20aba843ba 100644 --- a/ui/src/shared/components/cells/Cells.tsx +++ b/ui/src/shared/components/cells/Cells.tsx @@ -12,13 +12,7 @@ import GradientBorder from 'src/shared/components/cells/GradientBorder' import {fastMap} from 'src/utils/fast' // Constants -import { - LAYOUT_MARGIN, - PAGE_HEADER_HEIGHT, - PAGE_CONTAINER_MARGIN, - STATUS_PAGE_ROW_COUNT, - DASHBOARD_LAYOUT_ROW_HEIGHT, -} from 'src/shared/constants' +import {LAYOUT_MARGIN, DASHBOARD_LAYOUT_ROW_HEIGHT} from 'src/shared/constants' // Types import {Cell} from 'src/types' @@ -37,20 +31,8 @@ interface Props { onEditNote: (id: string) => void } -interface State { - rowHeight: number -} - @ErrorHandling -class Cells extends Component { - constructor(props) { - super(props) - - this.state = { - rowHeight: this.calculateRowHeight(), - } - } - +class Cells extends Component { public render() { const { cells, @@ -60,14 +42,13 @@ class Cells extends Component { manualRefresh, onEditNote, } = this.props - const {rowHeight} = this.state return ( { return () => onEditView(cell.id) } - - // ensures that Status Page height fits the window - private calculateRowHeight = () => { - const {location} = this.props - - return location.pathname.includes('status') - ? (window.innerHeight - - STATUS_PAGE_ROW_COUNT * LAYOUT_MARGIN - - PAGE_HEADER_HEIGHT - - PAGE_CONTAINER_MARGIN - - PAGE_CONTAINER_MARGIN) / - STATUS_PAGE_ROW_COUNT - : DASHBOARD_LAYOUT_ROW_HEIGHT - } } export default withRouter(Cells) diff --git a/ui/src/shared/components/cells/Dashboards.scss b/ui/src/shared/components/cells/Dashboards.scss index a5654ca9df5..87617c9c016 100644 --- a/ui/src/shared/components/cells/Dashboards.scss +++ b/ui/src/shared/components/cells/Dashboards.scss @@ -111,4 +111,4 @@ animation: refreshingSpinnerC 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; } -} +} \ No newline at end of file diff --git a/ui/src/shared/components/cells/View.tsx b/ui/src/shared/components/cells/View.tsx index 4220637f0fd..9e01165eedf 100644 --- a/ui/src/shared/components/cells/View.tsx +++ b/ui/src/shared/components/cells/View.tsx @@ -42,7 +42,6 @@ class ViewComponent extends Component { timeRange={timeRange} properties={view.properties} manualRefresh={manualRefresh} - inView={true} dashboardID={dashboardID} /> )