resize traffic graphs as window resizes

still ugly at very small widths, but I'll live with that for now
Graylog2 · Nov 21, 2017 · 402f23c · 402f23c
1 parent 11fed1b
commit 402f23c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/graylog2-web-interface/src/components/cluster/GraylogClusterOverview.jsx b/graylog2-web-interface/src/components/cluster/GraylogClusterOverview.jsx
@@ -1,4 +1,7 @@
+/* eslint-disable react/no-find-dom-node */
+/* global window */
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Reflux from 'reflux';
 import { Col, Row } from 'react-bootstrap';
 
@@ -7,6 +10,7 @@ import StoreProvider from 'injection/StoreProvider';
 import ActionsProvider from 'injection/ActionsProvider';
 import NumberUtils from 'util/NumberUtils';
 import _ from 'lodash';
+import EventHandlersThrottler from 'util/EventHandlersThrottler';
 
 import TrafficGraph from './TrafficGraph';
 
@@ -17,8 +21,31 @@ const NodesStore = StoreProvider.getStore('Nodes');
 const GraylogClusterOverview = React.createClass({
   mixins: [Reflux.connect(NodesStore, 'nodes'), Reflux.connect(ClusterTrafficStore, 'traffic')],
 
+  getInitialState() {
+    return {
+      graphWidth: 600,
+    };
+  },
+
   componentDidMount() {
     ClusterTrafficActions.traffic();
+    window.addEventListener('resize', this._onResize);
+    this._resizeGraphs();
+  },
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._onResize);
+  },
+
+  eventThrottler: new EventHandlersThrottler(),
+
+  _onResize() {
+    this.eventThrottler.throttle(() => this._resizeGraphs());
+  },
+
+  _resizeGraphs() {
+    const domNode = ReactDOM.findDOMNode(this._container);
+    this.setState({ graphWidth: domNode.clientWidth });
   },
 
   _isClusterLoading() {
@@ -54,17 +81,19 @@ const GraylogClusterOverview = React.createClass({
           <hr />
           <Row>
             <Col md={6}>
-              <h3 style={{ marginBottom: 10 }}>Incoming traffic {sumInput}</h3>
-              { !this.state.traffic ? <Spinner /> : <TrafficGraph traffic={this.state.traffic.input}
-                              from={this.state.traffic.from}
-                              to={this.state.traffic.to} />
+              <h3 ref={(container) => { this._container = container; }} style={{ marginBottom: 10 }}>Incoming traffic {sumInput}</h3>
+              {!this.state.traffic ? <Spinner /> : <TrafficGraph traffic={this.state.traffic.input}
+                                                                 from={this.state.traffic.from}
+                                                                 to={this.state.traffic.to}
+                                                                 width={this.state.graphWidth} />
               }
             </Col>
             <Col md={6}>
               <h3 style={{ marginBottom: 10 }}>Outgoing traffic {sumOutput}</h3>
-              { !this.state.traffic ? <Spinner /> : <TrafficGraph traffic={this.state.traffic.output}
-                            from={this.state.traffic.from}
-                            to={this.state.traffic.to} />
+              {!this.state.traffic ? <Spinner /> : <TrafficGraph traffic={this.state.traffic.output}
+                                                                 from={this.state.traffic.from}
+                                                                 to={this.state.traffic.to}
+                                                                 width={this.state.graphWidth} />
               }
             </Col>
           </Row>

diff --git a/graylog2-web-interface/src/components/cluster/TrafficGraph.jsx b/graylog2-web-interface/src/components/cluster/TrafficGraph.jsx
@@ -12,6 +12,7 @@ const TrafficGraph = React.createClass({
     from: PropTypes.string.isRequired,
     to: PropTypes.string.isRequired,
     traffic: PropTypes.object.isRequired,
+    width: PropTypes.number.isRequired,
   },
 
   render() {
@@ -43,7 +44,7 @@ const TrafficGraph = React.createClass({
       <HistogramVisualization id="traffic-histogram"
                               data={unixTraffic}
                               config={config}
-                              width={800}
+                              width={this.props.width}
                               interactive={false}
                               computationTimeRange={{ from: this.props.from, to: this.props.to }} />
     );