From 8018e99b47f58d7e7da64634ac56643bddb9a21a Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:20:28 -0700 Subject: [PATCH 1/7] Use newest pattern --- ui/src/shared/components/ResizeContainer.js | 67 +++++++++++---------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 996094a80c..0947f2cbcf 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -1,47 +1,43 @@ -import React, {PropTypes} from 'react' -import ResizeHandle from 'shared/components/ResizeHandle' +import React, {Component, PropTypes} from 'react' import classnames from 'classnames' -const {node, number, string} = PropTypes +import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 const minimumTopHeight = 200 const minimumBottomHeight = 200 -const ResizeContainer = React.createClass({ - propTypes: { - children: node.isRequired, - containerClass: string.isRequired, - minTopHeight: number, - minBottomHeight: number, - }, - - getDefaultProps() { - return { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - } - }, - - getInitialState() { - return { +class ResizeContainer extends Component { + constructor(props) { + super(props) + this.state = { + isDragging: false, topHeight: '60%', bottomHeight: '40%', - isDragging: false, } - }, - handleStopDrag() { - this.setState({isDragging: false}) - }, + this.handleStartDrag = ::this.handleStartDrag + this.handleStopDrag = ::this.handleStopDrag + this.handleMouseLeave = ::this.handleMouseLeave + this.handleDrag = ::this.handleDrag + } + + static defaultProps = { + minTopHeight: minimumTopHeight, + minBottomHeight: minimumBottomHeight, + } handleStartDrag() { this.setState({isDragging: true}) - }, + } + + handleStopDrag() { + this.setState({isDragging: false}) + } handleMouseLeave() { this.setState({isDragging: false}) - }, + } handleDrag(e) { if (!this.state.isDragging) { @@ -85,7 +81,7 @@ const ResizeContainer = React.createClass({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, }) - }, + } renderHandle() { const {isDragging, topHeight} = this.state @@ -96,7 +92,7 @@ const ResizeContainer = React.createClass({ top={topHeight} /> ) - }, + } render() { const {topHeight, bottomHeight, isDragging} = this.state @@ -124,7 +120,16 @@ const ResizeContainer = React.createClass({ ) - }, -}) + } +} + +const {node, number, string} = PropTypes + +ResizeContainer.propTypes = { + children: node.isRequired, + containerClass: string.isRequired, + minTopHeight: number, + minBottomHeight: number, +} export default ResizeContainer From b88e54e4dffaa10656490695b81e30ecd8dd5c43 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:27:57 -0700 Subject: [PATCH 2/7] Add initial height props Default is now 50/50 instead of 60/40, but can be specified on a per use basis --- ui/src/shared/components/ResizeContainer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 0947f2cbcf..b955c0db0c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -6,14 +6,15 @@ import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 const minimumTopHeight = 200 const minimumBottomHeight = 200 +const initialHeight = '50%' class ResizeContainer extends Component { constructor(props) { super(props) this.state = { isDragging: false, - topHeight: '60%', - bottomHeight: '40%', + topHeight: this.props.initialTopHeight, + bottomHeight: this.props.initialBottomHeight, } this.handleStartDrag = ::this.handleStartDrag @@ -25,12 +26,14 @@ class ResizeContainer extends Component { static defaultProps = { minTopHeight: minimumTopHeight, minBottomHeight: minimumBottomHeight, + initialTopHeight: initialHeight, + initialBottomHeight: initialHeight, } handleStartDrag() { this.setState({isDragging: true}) } - + handleStopDrag() { this.setState({isDragging: false}) } @@ -130,6 +133,8 @@ ResizeContainer.propTypes = { containerClass: string.isRequired, minTopHeight: number, minBottomHeight: number, + initialTopHeight: string, + initialBottomHeight: string, } export default ResizeContainer From 6a5fc4d05a054c3d32084e179a031b1506668320 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:32:32 -0700 Subject: [PATCH 3/7] Create and use constants for initial heights of QueryMaker and Visualization Fix for #1427 --- ui/src/dashboards/components/CellEditorOverlay.js | 4 +++- ui/src/data_explorer/constants/index.js | 4 ++++ ui/src/data_explorer/containers/DataExplorer.js | 4 +++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index ab237b2bca..79e6c2d036 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/ui/src/dashboards/components/CellEditorOverlay.js @@ -12,7 +12,7 @@ import * as queryModifiers from 'src/utils/queryTransitions' import defaultQueryConfig from 'src/utils/defaultQueryConfig' import buildInfluxQLQuery from 'utils/influxql' import {getQueryConfig} from 'shared/apis' -import {MINIMUM_HEIGHTS} from 'src/data_explorer/constants' +import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants' import {removeUnselectedTemplateValues} from 'src/dashboards/constants' class CellEditorOverlay extends Component { @@ -159,6 +159,8 @@ class CellEditorOverlay extends Component { containerClass="resizer--full-size" minTopHeight={MINIMUM_HEIGHTS.visualization} minBottomHeight={MINIMUM_HEIGHTS.queryMaker} + initialTopHeight={INITIAL_HEIGHTS.visualization} + initialBottomHeight={INITIAL_HEIGHTS.queryMaker} > Date: Wed, 10 May 2017 11:42:18 -0700 Subject: [PATCH 4/7] Update Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bcc1af782..e95080903a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ ### Features ### UI Improvements + 1. [#1453](https://github.com/influxdata/chronograf/pull/1453): Initial height of QueryMaker is 2/3 of the screen when in ResizeContainer, improved usability ## v1.3.0 [2017-05-09] From 28d5224b6fb83b57d2f626c5bd6fb2209b05f021 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:30:22 -0700 Subject: [PATCH 5/7] Make prettier --- ui/src/shared/components/ResizeContainer.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index b955c0db0c..6b158e835c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -70,7 +70,8 @@ class ResizeContainer extends Component { } const topHeightPixels = newTopPanelPercent / oneHundred * containerHeight - const bottomHeightPixels = newBottomPanelPercent / oneHundred * containerHeight + const bottomHeightPixels = + newBottomPanelPercent / oneHundred * containerHeight // Don't trigger a resize if the new sizes are too small if ( @@ -102,13 +103,17 @@ class ResizeContainer extends Component { const {containerClass, children} = this.props if (React.Children.count(children) > maximumNumChildren) { - console.error(`There cannot be more than ${maximumNumChildren}' children in ResizeContainer`) + console.error( + `There cannot be more than ${maximumNumChildren}' children in ResizeContainer` + ) return } return (
{this.renderHandle()} -
+
{React.cloneElement(children[1])}
From e90acb13817653a3dd5d5be45657cb41896766f8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:36:30 -0700 Subject: [PATCH 6/7] Rename constants to be more explicit --- ui/src/shared/components/ResizeContainer.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 6b158e835c..c9893c3c6c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -4,9 +4,10 @@ import classnames from 'classnames' import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 -const minimumTopHeight = 200 -const minimumBottomHeight = 200 -const initialHeight = '50%' +const defaultMinTopHeight = 200 +const defaultMinBottomHeight = 200 +const defaultInitialTopHeight = '50%' +const defaultInitialBottomHeight = '50%' class ResizeContainer extends Component { constructor(props) { @@ -24,10 +25,10 @@ class ResizeContainer extends Component { } static defaultProps = { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - initialTopHeight: initialHeight, - initialBottomHeight: initialHeight, + minTopHeight: defaultMinTopHeight, + minBottomHeight: defaultMinBottomHeight, + initialTopHeight: defaultInitialTopHeight, + initialBottomHeight: defaultInitialBottomHeight, } handleStartDrag() { From 9c9cec95a7a3c937993af7aeecca25e71147d159 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:43:09 -0700 Subject: [PATCH 7/7] Move renderHandle directly into class render function --- ui/src/shared/components/ResizeContainer.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index c9893c3c6c..cb3fb19baf 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -14,8 +14,8 @@ class ResizeContainer extends Component { super(props) this.state = { isDragging: false, - topHeight: this.props.initialTopHeight, - bottomHeight: this.props.initialBottomHeight, + topHeight: props.initialTopHeight, + bottomHeight: props.initialBottomHeight, } this.handleStartDrag = ::this.handleStartDrag @@ -88,17 +88,6 @@ class ResizeContainer extends Component { }) } - renderHandle() { - const {isDragging, topHeight} = this.state - return ( - - ) - } - render() { const {topHeight, bottomHeight, isDragging} = this.state const {containerClass, children} = this.props @@ -123,7 +112,11 @@ class ResizeContainer extends Component {
{React.cloneElement(children[0])}
- {this.renderHandle()} +