Calculate viewport dimensions from the scope-app div (#2473)

* Calculate viewport dimensions from the scope-app div.

* Addressed @foot's comments.

client/app/scripts/components/app.js

@@ -1,6 +1,7 @@
 import debug from 'debug';
 import React from 'react';
 import { connect } from 'react-redux';
+import { debounce } from 'lodash';
 
 import Logo from './logo';
 import Footer from './footer';
@@ -23,7 +24,8 @@ import {
   setGraphView,
   setTableView,
   setResourceView,
-  shutdown
+  shutdown,
+  setViewportDimensions,
 } from '../actions/app-actions';
 import Details from './details';
 import Nodes from './nodes';
@@ -39,6 +41,7 @@ import {
   isTableViewModeSelector,
   isGraphViewModeSelector,
 } from '../selectors/topology';
+import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
 import {
   BACKSPACE_KEY_CODE,
   ESC_KEY_CODE,
@@ -51,11 +54,17 @@ class App extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    this.setViewportDimensions = this.setViewportDimensions.bind(this);
+    this.handleResize = debounce(this.setViewportDimensions, VIEWPORT_RESIZE_DEBOUNCE_INTERVAL);
+
+    this.saveAppRef = this.saveAppRef.bind(this);
     this.onKeyPress = this.onKeyPress.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
   }
 
   componentDidMount() {
+    this.setViewportDimensions();
+    window.addEventListener('resize', this.handleResize);
     window.addEventListener('keypress', this.onKeyPress);
     window.addEventListener('keyup', this.onKeyUp);
 
@@ -69,6 +78,7 @@ class App extends React.Component {
   }
 
   componentWillUnmount() {
+    window.addEventListener('resize', this.handleResize);
     window.removeEventListener('keypress', this.onKeyPress);
     window.removeEventListener('keyup', this.onKeyUp);
     this.props.dispatch(shutdown());
@@ -141,13 +151,24 @@ class App extends React.Component {
     });
   }
 
+  setViewportDimensions() {
+    if (this.appRef) {
+      const { width, height } = this.appRef.getBoundingClientRect();
+      this.props.dispatch(setViewportDimensions(width, height));
+    }
+  }
+
+  saveAppRef(ref) {
+    this.appRef = ref;
+  }
+
   render() {
     const { isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails, showingHelp,
       showingNetworkSelector, showingTroubleshootingMenu } = this.props;
     const isIframe = window !== window.top;
 
     return (
-      <div className="scope-app">
+      <div className="scope-app" ref={this.saveAppRef}>
         {showingDebugToolbar() && <DebugToolbar />}
 
         {showingHelp && <HelpPanel />}

client/app/scripts/components/nodes.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { debounce } from 'lodash';
 
 import NodesChart from '../charts/nodes-chart';
 import NodesGrid from '../charts/nodes-grid';
@@ -9,15 +8,12 @@ import NodesError from '../charts/nodes-error';
 import DelayedShow from '../utils/delayed-show';
 import { Loading, getNodeType } from './loading';
 import { isTopologyEmpty } from '../utils/topology-utils';
-import { setViewportDimensions } from '../actions/app-actions';
 import {
   isGraphViewModeSelector,
   isTableViewModeSelector,
   isResourceViewModeSelector,
 } from '../selectors/topology';
 
-import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
-
 
 const EmptyTopologyError = show => (
   <NodesError faIconClass="fa-circle-thin" hidden={!show}>
@@ -34,22 +30,6 @@ const EmptyTopologyError = show => (
 );
 
 class Nodes extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.setDimensions = this.setDimensions.bind(this);
-    this.handleResize = debounce(this.setDimensions, VIEWPORT_RESIZE_DEBOUNCE_INTERVAL);
-    this.setDimensions();
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
   render() {
     const { topologyEmpty, topologiesLoaded, nodesLoaded, topologies, currentTopology,
       isGraphViewMode, isTableViewMode, isResourceViewMode } = this.props;
@@ -71,10 +51,6 @@ class Nodes extends React.Component {
       </div>
     );
   }
-
-  setDimensions() {
-    this.props.setViewportDimensions(window.innerWidth, window.innerHeight);
-  }
 }
 
 
@@ -93,6 +69,5 @@ function mapStateToProps(state) {
 
 
 export default connect(
-  mapStateToProps,
-  { setViewportDimensions }
+  mapStateToProps
 )(Nodes);

client/app/styles/_base.scss

@@ -72,7 +72,7 @@
   color: $text-color;
   font-family: $base-font;
   font-size: 13px;
-  height: 100%;
+  height: auto;
   left: 0;
   line-height: 150%;
   margin: 0;