Merge pull request #3066 from weaveworks/3015-dynamic-table-height

Relative positioning for Table view tables

client/app/scripts/charts/nodes-grid.js

@@ -9,7 +9,7 @@ import { shownNodesSelector } from '../selectors/node-filters';
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { TABLE_VIEW_MODE } from '../constants/naming';
 
-import { canvasMarginsSelector, canvasHeightSelector } from '../selectors/canvas';
+import { windowHeightSelector } from '../selectors/canvas';
 import { searchNodeMatchesSelector } from '../selectors/search';
 import { getNodeColor } from '../utils/color-utils';
 
@@ -86,6 +86,7 @@ class NodesGrid extends React.Component {
 
     this.onClickRow = this.onClickRow.bind(this);
     this.onSortChange = this.onSortChange.bind(this);
+    this.saveTableRef = this.saveTableRef.bind(this);
   }
 
   onClickRow(ev, node) {
@@ -101,16 +102,20 @@ class NodesGrid extends React.Component {
     this.props.sortOrderChanged(sortedBy, sortedDesc);
   }
 
+  saveTableRef(ref) {
+    this.tableRef = ref;
+  }
+
   render() {
     const {
-      nodes, height, gridSortedBy, gridSortedDesc, canvasMargins,
-      searchNodeMatches, searchQuery
+      nodes, gridSortedBy, gridSortedDesc, searchNodeMatches, searchQuery, windowHeight
     } = this.props;
+    const height =
+      this.tableRef ? windowHeight - this.tableRef.getBoundingClientRect().top - 30 : 0;
     const cmpStyle = {
       height,
-      marginTop: canvasMargins.top,
-      paddingLeft: canvasMargins.left,
-      paddingRight: canvasMargins.right,
+      paddingLeft: 40,
+      paddingRight: 40,
     };
     // TODO: What are 24 and 18? Use a comment or extract into constants.
     const tbodyHeight = height - 24 - 18;
@@ -130,7 +135,7 @@ class NodesGrid extends React.Component {
     };
 
     return (
-      <div className="nodes-grid">
+      <div className="nodes-grid" ref={this.saveTableRef}>
         {nodes.size > 0 && <NodeDetailsTable
           style={cmpStyle}
           className={className}
@@ -154,8 +159,6 @@ class NodesGrid extends React.Component {
 function mapStateToProps(state) {
   return {
     nodes: shownNodesSelector(state),
-    canvasMargins: canvasMarginsSelector(state),
-    height: canvasHeightSelector(state),
     gridSortedBy: state.get('gridSortedBy'),
     gridSortedDesc: state.get('gridSortedDesc'),
     currentTopology: state.get('currentTopology'),
@@ -163,6 +166,7 @@ function mapStateToProps(state) {
     searchNodeMatches: searchNodeMatchesSelector(state),
     searchQuery: state.get('searchQuery'),
     selectedNodeId: state.get('selectedNodeId'),
+    windowHeight: windowHeightSelector(state),
   };
 }
 

client/app/scripts/constants/styles.js

@@ -1,4 +1,4 @@
-import { GRAPH_VIEW_MODE, TABLE_VIEW_MODE, RESOURCE_VIEW_MODE } from './naming';
+import { GRAPH_VIEW_MODE, RESOURCE_VIEW_MODE } from './naming';
 
 
 export const DETAILS_PANEL_WIDTH = 420;
@@ -41,9 +41,6 @@ export const CANVAS_MARGINS = {
   [GRAPH_VIEW_MODE]: {
     top: 220, left: 80, right: 80, bottom: 150
   },
-  [TABLE_VIEW_MODE]: {
-    top: 220, left: 40, right: 40, bottom: 30
-  },
   [RESOURCE_VIEW_MODE]: {
     top: 200, left: 210, right: 40, bottom: 150
   },

client/app/scripts/selectors/canvas.js

@@ -7,6 +7,17 @@ import {
 } from '../constants/styles';
 
 
+// Listens in on viewport height state for window height updates.
+// Window height is useful as it includes the whole app viewport,
+// including e.g. top nav bar in Weave Cloud which is outside of
+// Scope app viewport.
+export const windowHeightSelector = createSelector(
+  [
+    state => state.getIn(['viewport', 'height']),
+  ],
+  () => window.innerHeight,
+);
+
 export const canvasMarginsSelector = createSelector(
   [
     state => state.get('topologyViewMode'),

client/app/styles/_base.scss

@@ -103,7 +103,7 @@ a {
   font-size: 0.7rem;
   justify-content: center;
   padding: 5px;
-  position: absolute;
+  position: fixed;
   bottom: 11px;
 
   button {
@@ -2001,10 +2001,6 @@ a {
 //
 
 .nodes-grid {
-  // TODO: Would be good to have relative positioning here.
-  position: absolute;
-  top: 0;
-
   tr {
     border-radius: 6px;
   }