diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 6311912989..0d59a68edf 100644
--- 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 (
-
+
{showingDebugToolbar() && }
{showingHelp && }
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index 11f864829f..ffa83a54dd 100644
--- 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 => (
@@ -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 {
);
}
-
- setDimensions() {
- this.props.setViewportDimensions(window.innerWidth, window.innerHeight);
- }
}
@@ -93,6 +69,5 @@ function mapStateToProps(state) {
export default connect(
- mapStateToProps,
- { setViewportDimensions }
+ mapStateToProps
)(Nodes);
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 5d61053bab..8c5e5c6ede 100644
--- a/client/app/styles/_base.scss
+++ b/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;