From 89c3e330f221479b7eb43b6003d2c1902940126a Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Mon, 12 Feb 2018 13:33:40 +0100
Subject: [PATCH] Use relative positioning of Table view tables.

---
 client/app/scripts/charts/nodes-grid.js | 22 +++++++++++++---------
 client/app/scripts/constants/styles.js  |  5 +----
 client/app/scripts/selectors/canvas.js  | 11 +++++++++++
 client/app/styles/_base.scss            |  6 +-----
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js
index a54e8745cf..2ba14e61cb 100644
--- a/client/app/scripts/charts/nodes-grid.js
+++ b/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),
   };
 }
 
diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js
index 7d18ab11d9..7c1c904d7c 100644
--- a/client/app/scripts/constants/styles.js
+++ b/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
   },
diff --git a/client/app/scripts/selectors/canvas.js b/client/app/scripts/selectors/canvas.js
index 39854af4e1..9e61aff085 100644
--- a/client/app/scripts/selectors/canvas.js
+++ b/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'),
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 94e083cdd0..6352e295e4 100644
--- a/client/app/styles/_base.scss
+++ b/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;
   }