From 1c733d52e308950d6ea8172e21699c9dcbc39937 Mon Sep 17 00:00:00 2001 From: Brandon Farmer Date: Thu, 21 Jun 2018 23:53:48 -0700 Subject: [PATCH] Fix dashboards crashing by making some performance optimizations Co-authored-by: Brandon Farmer --- ui/src/shared/annotations/helpers.ts | 6 ++- ui/src/shared/components/Annotations.tsx | 5 +- ui/src/shared/components/Dygraph.tsx | 56 +++++++++------------- ui/src/shared/components/DygraphLegend.tsx | 5 +- ui/src/shared/components/LayoutRenderer.js | 3 +- 5 files changed, 36 insertions(+), 39 deletions(-) diff --git a/ui/src/shared/annotations/helpers.ts b/ui/src/shared/annotations/helpers.ts index 7b44bb178..4644ef8ae 100644 --- a/ui/src/shared/annotations/helpers.ts +++ b/ui/src/shared/annotations/helpers.ts @@ -16,7 +16,8 @@ export const TEMP_ANNOTATION: AnnotationInterface = { export const visibleAnnotations = ( xAxisRange: [number, number], - annotations: AnnotationInterface[] = [] + annotations: AnnotationInterface[] = [], + tempAnnotationID: string ): AnnotationInterface[] => { const [xStart, xEnd] = xAxisRange @@ -25,6 +26,9 @@ export const visibleAnnotations = ( } return annotations.filter(a => { + if (a.id === tempAnnotationID) { + return false + } if (a.startTime === null || a.endTime === null) { return false } diff --git a/ui/src/shared/components/Annotations.tsx b/ui/src/shared/components/Annotations.tsx index 6190530f9..b68c96e76 100644 --- a/ui/src/shared/components/Annotations.tsx +++ b/ui/src/shared/components/Annotations.tsx @@ -92,8 +92,9 @@ class Annotations extends Component { get annotations() { return visibleAnnotations( this.props.xAxisRange, - this.props.annotations - ).filter(a => a.id !== TEMP_ANNOTATION.id) + this.props.annotations, + TEMP_ANNOTATION.id + ) } get tempAnnotation() { diff --git a/ui/src/shared/components/Dygraph.tsx b/ui/src/shared/components/Dygraph.tsx index 96f1c84d9..271d3cd68 100644 --- a/ui/src/shared/components/Dygraph.tsx +++ b/ui/src/shared/components/Dygraph.tsx @@ -1,10 +1,4 @@ -import React, { - Component, - CSSProperties, - MouseEvent, - ReactElement, - Children, -} from 'react' +import React, {Component, CSSProperties, MouseEvent} from 'react' import {connect} from 'react-redux' import _ from 'lodash' import NanoDate from 'nano-date' @@ -74,7 +68,6 @@ interface Props { interface State { staticLegendHeight: null | number - isMounted: boolean xAxisRange: [number, number] } @@ -110,7 +103,6 @@ class Dygraph extends Component { super(props) this.state = { staticLegendHeight: null, - isMounted: false, xAxisRange: [0, 0], } @@ -174,7 +166,7 @@ class Dygraph extends Component { const {w} = this.dygraph.getArea() this.props.setResolution(w) - this.setState({isMounted: true, xAxisRange: this.dygraph.xAxisRange()}) + this.setState({xAxisRange: this.dygraph.xAxisRange()}) } public componentWillUnmount() { @@ -184,12 +176,6 @@ class Dygraph extends Component { } } - public shouldComponentUpdate(nextProps: Props, nextState: State) { - const arePropsEqual = _.isEqual(this.props, nextProps) - const areStatesEqual = _.isEqual(this.state, nextState) - return !arePropsEqual || !areStatesEqual - } - public componentDidUpdate(prevProps: Props) { const { labels, @@ -275,7 +261,7 @@ class Dygraph extends Component { /> )} @@ -293,7 +279,7 @@ class Dygraph extends Component { } /> )} - {this.isGraphNested && + {this.nestedGraph && React.cloneElement(this.nestedGraph, { staticLegendHeight, })} @@ -312,17 +298,17 @@ class Dygraph extends Component { ) } - private get nestedGraph(): ReactElement { + private get nestedGraph(): JSX.Element { const {children} = this.props - const kids = Children.toArray(children) + if (children) { + if (children[0]) { + return children[0] + } - return _.get(kids, '0', null) - } + return children as JSX.Element + } - private get isGraphNested(): boolean { - const {children} = this.props - - return children && Children.count(children) > 0 + return null } private get dygraphStyle(): CSSProperties { @@ -375,8 +361,15 @@ class Dygraph extends Component { } private handleDraw = () => { - if (this.dygraph) { - this.setState({xAxisRange: this.dygraph.xAxisRange()}) + if (!this.dygraph) { + return + } + + const {xAxisRange} = this.state + const newXAxisRange = this.dygraph.xAxisRange() + + if (!_.isEqual(xAxisRange, newXAxisRange)) { + this.setState({xAxisRange: newXAxisRange}) } } @@ -439,12 +432,7 @@ class Dygraph extends Component { } private get areAnnotationsVisible() { - if (!this.dygraph) { - return false - } - - const [start, end] = this.dygraph && this.dygraph.xAxisRange() - return !!start && !!end + return !!this.dygraph } private getLabel = (axis: string): string => { diff --git a/ui/src/shared/components/DygraphLegend.tsx b/ui/src/shared/components/DygraphLegend.tsx index 1eb08ee80..86ab96e27 100644 --- a/ui/src/shared/components/DygraphLegend.tsx +++ b/ui/src/shared/components/DygraphLegend.tsx @@ -176,7 +176,10 @@ class DygraphLegend extends PureComponent { } private highlightCallback = (e: MouseEvent) => { - this.props.setActiveCell(this.props.cellID) + if (this.props.activeCellID !== this.props.cellID) { + this.props.setActiveCell(this.props.cellID) + } + this.setState({pageX: e.pageX}) this.props.onShow(e) } diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js index b53736cdc..af8efe5f8 100644 --- a/ui/src/shared/components/LayoutRenderer.js +++ b/ui/src/shared/components/LayoutRenderer.js @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import ReactGridLayout, {WidthProvider} from 'react-grid-layout' +import {fastMap} from 'src/utils/fast' import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized' @@ -105,7 +106,7 @@ class LayoutRenderer extends Component { isDraggable={isDashboard} isResizable={isDashboard} > - {cells.map(cell => ( + {fastMap(cells, cell => (