Merge pull request #926 from influxdata/fix-kapacitor-graph-height

Fix Kapacitor rule graph display

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Bug Fixes
   1. [#882](https://github.com/influxdata/chronograf/pull/882): Fix y-axis graph padding
   2. [#907](https://github.com/influxdata/chronograf/pull/907): Fix react-router warning
+  3. [#926](https://github.com/influxdata/chronograf/pull/926): Fix Kapacitor RuleGraph display
 
 ### Features
   1. [#873](https://github.com/influxdata/chronograf/pull/873): Add [TLS](https://github.com/influxdata/chronograf/blob/master/docs/tls.md) support

ui/src/shared/components/Dygraph.js

@@ -174,7 +174,7 @@ export default React.createClass({
 
   render() {
     return (
-      <div ref="self">
+      <div ref="self" style={{height: '100%'}}>
         <div ref="graphContainer" style={this.props.containerStyle} />
         <div className="container--dygraph-legend" ref="legendContainer" />
         <div className="graph-vertical-marker" ref="graphVerticalMarker" />

ui/src/shared/components/LineGraph.js

@@ -104,7 +104,10 @@ export default React.createClass({
     }
 
     return (
-      <div className={classNames({"graph--hasYLabel": !!(options.ylabel || options.y2label)})}>
+      <div
+        className={classNames({"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
+        style={{height: '100%'}}
+      >
         {isRefreshing ? this.renderSpinner() : null}
         <Dygraph
           containerStyle={{width: '100%', height: '100%'}}