diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c266631d..9e0e1cb1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## v1.3.7.0 [unreleased] ### Bug Fixes +1. [#1845](https://github.com/influxdata/chronograf/pull/1845): Fix no-scroll bar appearing in the Data Explorer table ### Features diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js index 4f13a53e5..b2dbb5574 100644 --- a/ui/src/data_explorer/components/Table.js +++ b/ui/src/data_explorer/components/Table.js @@ -12,7 +12,6 @@ import {Table, Column, Cell} from 'fixed-data-table' const {arrayOf, bool, func, number, oneOfType, shape, string} = PropTypes -const defaultTableHeight = 1000 const emptySeries = {columns: [], values: []} const CustomCell = React.createClass({ @@ -64,7 +63,7 @@ const ChronoTable = React.createClass({ getDefaultProps() { return { - height: defaultTableHeight, + height: 500, } }, @@ -139,11 +138,11 @@ const ChronoTable = React.createClass({ const maximumTabsCount = 11 // adjust height to proper value by subtracting the heights of the UI around it // tab height, graph-container vertical padding, graph-heading height, multitable-header height - const stylePixelOffset = 136 - const rowHeight = 34 - const defaultColumnWidth = 200 - const headerHeight = 30 const minWidth = 70 + const rowHeight = 34 + const headerHeight = 30 + const stylePixelOffset = 125 + const defaultColumnWidth = 200 const styleAdjustedHeight = height - stylePixelOffset const width = columns && columns.length > 1 ? defaultColumnWidth : containerWidth diff --git a/ui/src/data_explorer/components/VisView.js b/ui/src/data_explorer/components/VisView.js index 9e717c6f1..186240529 100644 --- a/ui/src/data_explorer/components/VisView.js +++ b/ui/src/data_explorer/components/VisView.js @@ -13,6 +13,7 @@ const VisView = ({ heightPixels, editQueryStatus, activeQueryIndex, + resizerBottomHeight, }) => { const activeQuery = queries[activeQueryIndex] const defaultQuery = queries[0] @@ -30,7 +31,7 @@ const VisView = ({ return ( ) @@ -60,6 +61,7 @@ VisView.propTypes = { heightPixels: number, editQueryStatus: func.isRequired, activeQueryIndex: number, + resizerBottomHeight: number, } export default VisView diff --git a/ui/src/data_explorer/components/Visualization.js b/ui/src/data_explorer/components/Visualization.js index b33b99a7b..e9cb86a4a 100644 --- a/ui/src/data_explorer/components/Visualization.js +++ b/ui/src/data_explorer/components/Visualization.js @@ -31,6 +31,7 @@ const Visualization = React.createClass({ bounds: arrayOf(string), }), }), + resizerBottomHeight: number, }, contextTypes: { @@ -95,6 +96,7 @@ const Visualization = React.createClass({ editQueryStatus, activeQueryIndex, isInDataExplorer, + resizerBottomHeight, } = this.props const {source: {links: {proxy}}} = this.context const {view} = this.state @@ -134,6 +136,7 @@ const Visualization = React.createClass({ editQueryStatus={editQueryStatus} activeQueryIndex={activeQueryIndex} isInDataExplorer={isInDataExplorer} + resizerBottomHeight={resizerBottomHeight} /> diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index cb3fb19ba..a8baab69e 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -31,6 +31,12 @@ class ResizeContainer extends Component { initialBottomHeight: defaultInitialBottomHeight, } + componentDidMount() { + this.setState({ + bottomHeightPixels: this.bottom.getBoundingClientRect().height, + }) + } + handleStartDrag() { this.setState({isDragging: true}) } @@ -51,7 +57,7 @@ class ResizeContainer extends Component { const {minTopHeight, minBottomHeight} = this.props const oneHundred = 100 const containerHeight = parseInt( - getComputedStyle(this.refs.resizeContainer).height, + getComputedStyle(this.resizeContainer).height, 10 ) // verticalOffset moves the resize handle as many pixels as the page-heading is taking up. @@ -85,11 +91,12 @@ class ResizeContainer extends Component { this.setState({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, + bottomHeightPixels, }) } render() { - const {topHeight, bottomHeight, isDragging} = this.state + const {bottomHeightPixels, topHeight, bottomHeight, isDragging} = this.state const {containerClass, children} = this.props if (React.Children.count(children) > maximumNumChildren) { @@ -107,10 +114,12 @@ class ResizeContainer extends Component { onMouseLeave={this.handleMouseLeave} onMouseUp={this.handleStopDrag} onMouseMove={this.handleDrag} - ref="resizeContainer" + ref={r => (this.resizeContainer = r)} >
- {React.cloneElement(children[0])} + {React.cloneElement(children[0], { + resizerBottomHeight: bottomHeightPixels, + })}
(this.bottom = r)} > - {React.cloneElement(children[1])} + {React.cloneElement(children[1], { + resizerBottomHeight: bottomHeightPixels, + })} )