Add autoRefresh interval choice to DataExplorer

ui/src/data_explorer/containers/DataExplorer.js

@@ -1,17 +1,18 @@
 import React, {PropTypes} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import QueryBuilder from '../components/QueryBuilder';
 import Visualization from '../components/Visualization';
 import Header from '../containers/Header';
 import ResizeContainer from 'src/shared/components/ResizeContainer';
 
-import {
-  setTimeRange as setTimeRangeAction,
-} from '../actions/view';
+import {setAutoRefresh} from 'shared/actions/appConfig'
+import {setTimeRange as setTimeRangeAction} from '../actions/view';
 
 const {
   arrayOf,
   func,
+  number,
   shape,
   string,
 } = PropTypes;
@@ -25,6 +26,8 @@ const DataExplorer = React.createClass({
       }).isRequired,
     }).isRequired,
     queryConfigs: PropTypes.shape({}),
+    autoRefresh: number.isRequired,
+    handleChooseAutoRefresh: func.isRequired,
     timeRange: shape({
       upper: string,
       lower: string,
@@ -59,18 +62,20 @@ const DataExplorer = React.createClass({
   },
 
   render() {
-    const {timeRange, setTimeRange, queryConfigs, dataExplorer} = this.props;
+    const {autoRefresh, handleChooseAutoRefresh, timeRange, setTimeRange, queryConfigs, dataExplorer} = this.props;
     const {activeQueryID} = this.state;
     const queries = dataExplorer.queryIDs.map((qid) => queryConfigs[qid]);
 
     return (
       <div className="data-explorer">
         <Header
-          actions={{setTimeRange}}
+          actions={{handleChooseAutoRefresh, setTimeRange}}
+          autoRefresh={autoRefresh}
           timeRange={timeRange}
         />
         <ResizeContainer>
           <Visualization
+            autoRefresh={autoRefresh}
             timeRange={timeRange}
             queryConfigs={queries}
             activeQueryID={this.state.activeQueryID}
@@ -78,6 +83,7 @@ const DataExplorer = React.createClass({
           />
           <QueryBuilder
             queries={queries}
+            autoRefresh={autoRefresh}
             timeRange={timeRange}
             setActiveQuery={this.handleSetActiveQuery}
             activeQueryID={activeQueryID}
@@ -89,15 +95,21 @@ const DataExplorer = React.createClass({
 });
 
 function mapStateToProps(state) {
-  const {timeRange, queryConfigs, dataExplorer} = state;
+  const {appConfig: {autoRefresh}, timeRange, queryConfigs, dataExplorer} = state;
 
   return {
+    autoRefresh,
     timeRange,
     queryConfigs,
     dataExplorer,
   };
 }
 
-export default connect(mapStateToProps, {
-  setTimeRange: setTimeRangeAction,
-})(DataExplorer);
+function mapDispatchToProps(dispatch) {
+  return {
+    handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
+    setTimeRange: bindActionCreators(setTimeRangeAction, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DataExplorer);

ui/src/data_explorer/containers/Header.js

@@ -1,23 +1,35 @@
 import React, {PropTypes} from 'react';
 import moment from 'moment';
 import {withRouter} from 'react-router';
+
+import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
 import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
+
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
+const {
+  func,
+  number,
+  shape,
+  string,
+} = PropTypes
+
 const Header = React.createClass({
   propTypes: {
-    timeRange: PropTypes.shape({
-      upper: PropTypes.string,
-      lower: PropTypes.string,
+    autoRefresh: number.isRequired,
+    timeRange: shape({
+      upper: string,
+      lower: string,
     }).isRequired,
-    actions: PropTypes.shape({
-      setTimeRange: PropTypes.func.isRequired,
+    actions: shape({
+      handleChooseAutoRefresh: func.isRequired,
+      setTimeRange: func.isRequired,
     }),
   },
 
   contextTypes: {
-    source: PropTypes.shape({
-      name: PropTypes.string,
+    source: shape({
+      name: string,
     }),
   },
 
@@ -36,7 +48,7 @@ const Header = React.createClass({
   },
 
   render() {
-    const {timeRange} = this.props;
+    const {autoRefresh, actions: {handleChooseAutoRefresh}, timeRange} = this.props;
 
     return (
       <div className="page-header">
@@ -50,6 +62,7 @@ const Header = React.createClass({
               <span className="icon cpu"></span>
               {this.context.source.name}
             </div>
+            <AutoRefreshDropdown onChoose={handleChooseAutoRefresh} selected={autoRefresh} iconName="refresh" />
             <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.findSelected(timeRange)} />
           </div>
         </div>

ui/src/hosts/containers/HostPage.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
 import _ from 'lodash'
 import classnames from 'classnames';
 
@@ -12,7 +13,6 @@ import {fetchLayouts} from 'shared/apis';
 
 import {setAutoRefresh} from 'shared/actions/appConfig'
 import {presentationButtonDispatcher} from 'shared/dispatchers'
-import {bindActionCreators} from 'redux'
 
 const {
   shape,