Ensure smooth resizing of gauges inside cells and the CEO

ui/src/dashboards/components/Visualization.js

@@ -14,6 +14,7 @@ const DashVisualization = (
     onCellRename,
     queryConfigs,
     editQueryStatus,
+    resizerTopHeight,
   },
   {source: {links: {proxy}}}
 ) =>
@@ -27,6 +28,7 @@ const DashVisualization = (
         templates={templates}
         autoRefresh={autoRefresh}
         editQueryStatus={editQueryStatus}
+        resizerTopHeight={resizerTopHeight}
       />
     </div>
   </div>
@@ -55,6 +57,7 @@ DashVisualization.propTypes = {
     }),
   }),
   onCellRename: func,
+  resizerTopHeight: number,
 }
 
 DashVisualization.contextTypes = {

ui/src/shared/components/GaugeChart.js

@@ -4,6 +4,7 @@ import lastValues from 'shared/parsing/lastValues'
 import Gauge from 'shared/components/Gauge'
 
 import {DEFAULT_COLORS} from 'src/dashboards/constants/gaugeColors'
+import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants'
 
 class GaugeChart extends Component {
   shouldComponentUpdate(nextProps, nextState) {
@@ -11,7 +12,14 @@ class GaugeChart extends Component {
   }
 
   render() {
-    const {data, cellHeight, isFetchingInitially, colors} = this.props
+    const {
+      data,
+      cellHeight,
+      isFetchingInitially,
+      colors,
+      resizeCoords,
+      resizerTopHeight,
+    } = this.props
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
     if (isFetchingInitially) {
@@ -23,17 +31,34 @@ class GaugeChart extends Component {
     }
 
     const lastValue = lastValues(data)[1]
-
     const precision = 100.0
     const roundedValue = Math.round(+lastValue * precision) / precision
 
-    const trueHeight = (cellHeight * 83).toString()
+    // When a new height is passed the Gauge component resizes internally
+    // Passing in a new often ensures the gauge appears sharp
+
+    const initialCellHeight =
+      cellHeight && (cellHeight * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
+
+    const resizeCoordsHeight =
+      resizeCoords && (resizeCoords.h * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
+
+    const height = (resizeCoordsHeight ||
+      initialCellHeight ||
+      resizerTopHeight ||
+      300)
+      .toString()
+
+    // console.log('resizeCoordsHeight', resizeCoordsHeight)
+    // console.log('initialCellHeight', initialCellHeight)
+    // console.log('resizerTopHeight', resizerTopHeight)
+    // console.log('height', height)
 
     return (
-      <div className="single-stat">
+      <div className="single-stat" ref={r => (this.gaugeContainer = r)}>
         <Gauge
-          width="400"
-          height={trueHeight || 200}
+          width="900"
+          height={height}
           colors={colors}
           gaugePosition={roundedValue}
         />
@@ -52,6 +77,8 @@ GaugeChart.propTypes = {
   data: arrayOf(shape()).isRequired,
   isFetchingInitially: bool,
   cellHeight: number,
+  resizerTopHeight: number,
+  resizeCoords: shape(),
   colors: arrayOf(
     shape({
       type: string.isRequired,

ui/src/shared/components/RefreshingGraph.js

@@ -21,6 +21,7 @@ const RefreshingGraph = ({
   timeRange,
   cellHeight,
   autoRefresh,
+  resizerTopHeight,
   manualRefresh, // when changed, re-mounts the component
   synchronizer,
   resizeCoords,
@@ -58,6 +59,8 @@ const RefreshingGraph = ({
         templates={templates}
         autoRefresh={autoRefresh}
         cellHeight={cellHeight}
+        resizerTopHeight={resizerTopHeight}
+        resizeCoords={resizeCoords}
       />
     )
   }
@@ -99,6 +102,7 @@ RefreshingGraph.propTypes = {
   synchronizer: func,
   type: string.isRequired,
   cellHeight: number,
+  resizerTopHeight: number,
   axes: shape(),
   queries: arrayOf(shape()).isRequired,
   editQueryStatus: func,

ui/src/shared/components/ResizeContainer.js

@@ -131,7 +131,7 @@ class ResizeContainer extends Component {
         >
           {React.cloneElement(children[0], {
             resizerBottomHeight: bottomHeightPixels,
-            resizeTopHeight: topHeightPixels,
+            resizerTopHeight: topHeightPixels,
           })}
         </div>
         <ResizeHandle