Add manual refresh magic.

ui/src/dashboards/components/Dashboard.js

@@ -13,6 +13,7 @@ const Dashboard = ({
   onAddCell,
   timeRange,
   autoRefresh,
+  manualRefresh,
   onDeleteCell,
   synchronizer,
   onPositionChange,
@@ -57,6 +58,7 @@ const Dashboard = ({
               isEditable={true}
               timeRange={timeRange}
               autoRefresh={autoRefresh}
+              manualRefresh={manualRefresh}
               synchronizer={synchronizer}
               onDeleteCell={onDeleteCell}
               onPositionChange={onPositionChange}
@@ -111,6 +113,7 @@ Dashboard.propTypes = {
   }).isRequired,
   sources: arrayOf(shape({})).isRequired,
   autoRefresh: number.isRequired,
+  manualRefresh: number,
   timeRange: shape({}).isRequired,
   onOpenTemplateManager: func.isRequired,
   onSelectTemplate: func.isRequired,

ui/src/dashboards/components/DashboardHeader.js

@@ -17,6 +17,7 @@ const DashboardHeader = ({
   isHidden,
   handleChooseTimeRange,
   handleChooseAutoRefresh,
+  handleManualRefresh,
   handleClickPresentationButton,
   onAddCell,
   onEditDashboard,
@@ -76,6 +77,7 @@ const DashboardHeader = ({
               : null}
             <AutoRefreshDropdown
               onChoose={handleChooseAutoRefresh}
+              handleManualRefresh={handleManualRefresh}
               selected={autoRefresh}
               iconName="refresh"
             />
@@ -118,6 +120,7 @@ DashboardHeader.propTypes = {
   isHidden: bool.isRequired,
   handleChooseTimeRange: func.isRequired,
   handleChooseAutoRefresh: func.isRequired,
+  handleManualRefresh: func.isRequired,
   handleClickPresentationButton: func.isRequired,
   onAddCell: func,
   onEditDashboard: func,

ui/src/dashboards/containers/DashboardPage.js

@@ -32,6 +32,7 @@ class DashboardPage extends Component {
       selectedCell: null,
       isTemplating: false,
       zoomedTimeRange: {zoomedLower: null, zoomedUpper: null},
+      manualRefresh: Date.now(),
     }
   }
 
@@ -184,8 +185,14 @@ class DashboardPage extends Component {
     return dashboards.find(d => d.id === +dashboardID)
   }
 
+  handleManualRefresh = () => {
+    this.setState({
+      manualRefresh: Date.now(),
+    })
+  }
+
   render() {
-    const {zoomedTimeRange} = this.state
+    const {zoomedTimeRange, manualRefresh} = this.state
     const {zoomedLower, zoomedUpper} = zoomedTimeRange
 
     const {
@@ -309,6 +316,7 @@ class DashboardPage extends Component {
               buttonText={dashboard ? dashboard.name : ''}
               showTemplateControlBar={showTemplateControlBar}
               handleChooseAutoRefresh={handleChooseAutoRefresh}
+              handleManualRefresh={this.handleManualRefresh}
               handleChooseTimeRange={this.handleChooseTimeRange}
               onToggleTempVarControls={this.handleToggleTempVarControls}
               handleClickPresentationButton={handleClickPresentationButton}
@@ -330,6 +338,7 @@ class DashboardPage extends Component {
               dashboard={dashboard}
               timeRange={timeRange}
               autoRefresh={autoRefresh}
+              manualRefresh={manualRefresh}
               onZoom={this.handleZoomedTimeRange}
               onAddCell={this.handleAddCell}
               synchronizer={this.synchronizer}
@@ -400,6 +409,7 @@ DashboardPage.propTypes = {
   ),
   handleChooseAutoRefresh: func.isRequired,
   autoRefresh: number.isRequired,
+  manualRefresh: number,
   templateControlBarVisibilityToggled: func.isRequired,
   timeRange: shape({}).isRequired,
   showTemplateControlBar: bool.isRequired,

ui/src/shared/components/AutoRefreshDropdown.js

@@ -25,14 +25,10 @@ class AutoRefreshDropdown extends Component {
     this.setState({isOpen: false})
   }
 
-  handleManualRefresh = () => {
-    console.log('Refresh this bashboard')
-  }
-
   toggleMenu = () => this.setState({isOpen: !this.state.isOpen})
 
   render() {
-    const {selected} = this.props
+    const {selected, handleManualRefresh} = this.props
     const {isOpen} = this.state
     const {milliseconds, inputValue} = this.findAutoRefreshItem(selected)
 
@@ -72,7 +68,7 @@ class AutoRefreshDropdown extends Component {
         {+milliseconds === 0
           ? <div
               className="btn btn-sm btn-default btn-square"
-              onClick={this.handleManualRefresh}
+              onClick={handleManualRefresh}
             >
               <span className="icon refresh" />
             </div>
@@ -87,6 +83,7 @@ const {number, func} = PropTypes
 AutoRefreshDropdown.propTypes = {
   selected: number.isRequired,
   onChoose: func.isRequired,
+  handleManualRefresh: func,
 }
 
 export default OnClickOutside(AutoRefreshDropdown)

ui/src/shared/components/Layout.js

@@ -28,6 +28,7 @@ const Layout = (
     isEditable,
     onEditCell,
     autoRefresh,
+    manualRefresh,
     onDeleteCell,
     synchronizer,
     resizeCoords,
@@ -55,6 +56,7 @@ const Layout = (
           timeRange={timeRange}
           templates={templates}
           autoRefresh={autoRefresh}
+          manualRefresh={manualRefresh}
           synchronizer={synchronizer}
           resizeCoords={resizeCoords}
           queries={buildQueriesForLayouts(
@@ -74,6 +76,7 @@ Layout.contextTypes = {
 
 Layout.propTypes = {
   autoRefresh: number.isRequired,
+  manualRefresh: number,
   timeRange: shape({
     lower: string.isRequired,
   }),

ui/src/shared/components/LayoutRenderer.js

@@ -75,6 +75,7 @@ class LayoutRenderer extends Component {
       isEditable,
       onEditCell,
       autoRefresh,
+      manualRefresh,
       onDeleteCell,
       synchronizer,
       onCancelEditCell,
@@ -114,6 +115,7 @@ class LayoutRenderer extends Component {
                 onEditCell={onEditCell}
                 resizeCoords={resizeCoords}
                 autoRefresh={autoRefresh}
+                manualRefresh={manualRefresh}
                 onDeleteCell={onDeleteCell}
                 synchronizer={synchronizer}
                 onCancelEditCell={onCancelEditCell}
@@ -131,6 +133,7 @@ const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 LayoutRenderer.propTypes = {
   autoRefresh: number.isRequired,
+  manualRefresh: number,
   timeRange: shape({
     lower: string.isRequired,
   }),

ui/src/shared/components/RefreshingGraph.js

@@ -18,6 +18,7 @@ const RefreshingGraph = ({
   timeRange,
   cellHeight,
   autoRefresh,
+  manualRefresh,
   synchronizer,
   resizeCoords,
   editQueryStatus,
@@ -50,6 +51,7 @@ const RefreshingGraph = ({
 
   return (
     <RefreshingLineGraph
+      key={manualRefresh || 0}
       axes={axes}
       onZoom={onZoom}
       queries={queries}
@@ -73,6 +75,7 @@ RefreshingGraph.propTypes = {
     lower: string.isRequired,
   }),
   autoRefresh: number.isRequired,
+  manualRefresh: number,
   templates: arrayOf(shape()),
   synchronizer: func,
   type: string.isRequired,