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,
+ })}
)