Fix Table view in DE graph

ui/src/data_explorer/components/MultiTable.js

@@ -2,7 +2,14 @@ import React, {PropTypes} from 'react';
 import Table from './Table';
 import classNames from 'classnames';
 
-const {bool, string, shape, arrayOf, func} = PropTypes;
+const {
+  arrayOf,
+  bool,
+  func,
+  number,
+  shape,
+  string,
+} = PropTypes;
 
 const MultiTable = React.createClass({
   propTypes: {
@@ -10,6 +17,7 @@ const MultiTable = React.createClass({
       host: arrayOf(string.isRequired).isRequired,
       text: string.isRequired,
     })),
+    height: number,
   },
 
   getInitialState() {
@@ -40,13 +48,14 @@ const MultiTable = React.createClass({
   },
 
   renderTable() {
+    const {height} = this.props;
     const query = this.getActiveQuery();
     const noQuery = !query || !query.text;
     if (noQuery) {
       return null;
     }
 
-    return <Table key={query.text} query={query} />;
+    return <Table key={query.text} query={query} height={height} />;
   },
 
   renderTabs() {

ui/src/data_explorer/components/Table.js

@@ -33,6 +33,7 @@ const ChronoTable = React.createClass({
       text: string.isRequired,
     }),
     containerWidth: number.isRequired,
+    height: number,
   },
 
   getInitialState() {
@@ -45,6 +46,12 @@ const ChronoTable = React.createClass({
     };
   },
 
+  getDefaultProps() {
+    return {
+      height: 600,
+    };
+  },
+
   fetchCellData(query) {
     this.setState({isLoading: true});
     // second param is db, we want to leave this blank
@@ -81,30 +88,33 @@ const ChronoTable = React.createClass({
 
   // Table data as a list of array.
   render() {
-    const {containerWidth} = this.props;
+    const {containerWidth, height} = this.props;
     const {cellData, columnWidths, isLoading} = this.state;
     const {columns, values} = cellData;
 
-    const ownerHeight = 300;
+    // 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 height = 300;
     const width = 200;
-    const headerHeight = 40;
+    const headerHeight = 30;
     const minWidth = 70;
+    const styleAdjustedHeight = height - stylePixelOffset;
 
     if (!isLoading && !values.length) {
-      return <div>Your query returned no data</div>;
+      return <div className="generic-empty-state">Your query returned no data</div>;
     }
 
     return (
       <Table
         onColumnResizeEndCallback={this.handleColumnResize}
         isColumnResizing={false}
-        ownerHeight={ownerHeight}
         rowHeight={rowHeight}
         rowsCount={values.length}
         width={containerWidth}
-        height={height}
+        ownerHeight={styleAdjustedHeight}
+        height={styleAdjustedHeight}
         headerHeight={headerHeight}>
         {columns.map((columnName, colIndex) => {
           return (

ui/src/data_explorer/components/Visualization.js

@@ -23,6 +23,7 @@ const Visualization = React.createClass({
     name: string,
     activeQueryIndex: number,
     height: string,
+    heightPixels: number,
   },
 
   contextTypes: {
@@ -44,7 +45,7 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, activeQueryIndex, height} = this.props;
+    const {queryConfigs, timeRange, activeQueryIndex, height, heightPixels} = this.props;
     const {source} = this.context;
     const proxyLink = source.links.proxy;
 
@@ -72,7 +73,7 @@ const Visualization = React.createClass({
             </ul>
           </div>
         </div>
-        <div className="graph-container">
+        <div className={classNames("", {"graph-container": isGraphInView, "table-container": !isGraphInView})}>
           {isGraphInView ? (
             <RefreshingLineGraph
               queries={queries}
@@ -80,7 +81,7 @@ const Visualization = React.createClass({
               activeQueryIndex={activeQueryIndex}
               isInDataExplorer={isInDataExplorer}
               />
-          ) : <MultiTable queries={queries} />}
+          ) : <MultiTable queries={queries} height={heightPixels} />}
         </div>
       </div>
     );

ui/src/shared/components/ResizeContainer.js

@@ -48,16 +48,19 @@ const ResizeContainer = React.createClass({
     // Don't trigger a resize if the new sizes are too small
     const minTopPanelHeight = 300;
     const minBottomPanelHeight = 250;
-    if (((newTopPanelPercent / turnToPercent) * appHeight) < minTopPanelHeight || ((newBottomPanelPercent / turnToPercent) * appHeight) < minBottomPanelHeight) {
+    const topHeightPixels = ((newTopPanelPercent / turnToPercent) * appHeight);
+    const bottomHeightPixels = ((newBottomPanelPercent / turnToPercent) * appHeight);
+
+    if (topHeightPixels < minTopPanelHeight || bottomHeightPixels < minBottomPanelHeight) {
       return;
     }
 
-    this.setState({topHeight: `${(newTopPanelPercent)}%`, bottomHeight: `${(newBottomPanelPercent)}%`});
+    this.setState({topHeight: `${(newTopPanelPercent)}%`, bottomHeight: `${(newBottomPanelPercent)}%`, topHeightPixels});
   },
 
   render() {
-    const {topHeight, bottomHeight, isDragging} = this.state;
+    const {topHeight, bottomHeight, isDragging, topHeightPixels} = this.state;
-    const top = React.cloneElement(this.props.children[0], {height: topHeight});
+    const top = React.cloneElement(this.props.children[0], {height: topHeight, heightPixels: topHeightPixels});
     const bottom = React.cloneElement(this.props.children[1], {height: bottomHeight, top: topHeight});
     const handle = <ResizeHandle isDragging={isDragging} onHandleStartDrag={this.handleStartDrag} top={topHeight} />;
 

ui/src/style/pages/data-explorer/visualization.scss

@@ -34,6 +34,41 @@
   display: flex;
   align-items: center;
 }
+.table-container {
+  background-color: $graph-bg-color;
+  border-radius: 0 0 $graph-radius $graph-radius;
+  padding: 8px 16px;
+  position: relative;
+  top: $de-vertical-margin;
+  height: calc(100% - #{$de-graph-heading-height} - #{($de-vertical-margin * 2)});
+
+  & > div {
+    position: absolute;
+    width: calc(100% - #{($de-vertical-margin * 2)});
+    height: calc(100% - #{$de-vertical-margin});
+    top: ($de-vertical-margin/2);
+    left: $de-vertical-margin;;
+  }
+  & > div .multi-table__tabs {
+    position: absolute;
+    height: 30px;
+    width: 100%;
+  }
+  & > div > div:last-child {
+    position: absolute;
+    top: 30px;
+    height: calc(100% - 30px) !important;
+    width: 100%;
+  }
+  .fixedDataTableLayout_main {
+    height: 100% !important;
+  }
+  .generic-empty-state {
+    background-color: $g6-smoke;
+    padding: 50px 0;
+    height: 100%;
+  }
+}
 .graph-container {
   background-color: $graph-bg-color;
   border-radius: 0 0 $graph-radius $graph-radius;