Addressed @foot's comments.

weaveworks · Apr 27, 2017 · d68af37 · d68af37
1 parent cdb7a61
commit d68af37
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 36 deletions.
diff --git a/client/app/scripts/components/app.js b/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 />}

diff --git a/client/app/scripts/components/nodes.js b/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);
-  }
-
-  componentDidMount() {
-    this.setDimensions();
-    window.addEventListener('resize', this.handleResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
   render() {
     const { topologyEmpty, topologiesLoaded, nodesLoaded, topologies, currentTopology,
       isGraphViewMode, isTableViewMode, isResourceViewMode } = this.props;
@@ -71,18 +51,6 @@ class Nodes extends React.Component {
       </div>
     );
   }
-
-  setDimensions() {
-    // Use the `scope-app` div to determine the viewport rectangle, because `window` gives
-    // wrong values for scope container inside Weave Cloud (on dev & prod), because of the
-    // top navigation toolbar that is counted in, even though it's not part of Scope.
-    const viewport = document.getElementsByClassName('scope-app')[0].getBoundingClientRect();
-    // Not sure why we need to subtract `left` and `top`, but that gives us correct values.
-    this.props.setViewportDimensions(
-      viewport.width - viewport.left,
-      viewport.height - viewport.top
-    );
-  }
 }
 
 
@@ -101,6 +69,5 @@ function mapStateToProps(state) {
 
 
 export default connect(
-  mapStateToProps,
-  { setViewportDimensions }
+  mapStateToProps
 )(Nodes);