WIP: partially implement autoRefresh dropdown and app config

ui/src/dashboards/components/DashboardHeader.js

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import ReactTooltip from 'react-tooltip'
 import {Link} from 'react-router';
 
+import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
 import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
 
 const DashboardHeader = ({
@@ -10,8 +11,10 @@ const DashboardHeader = ({
   dashboard,
   headerText,
   timeRange,
+  selectedAutoRefresh,
   isHidden,
   handleChooseTimeRange,
+  handleChooseAutoRefresh,
   handleClickPresentationButton,
   sourceID,
 }) => isHidden ? null : (
@@ -45,6 +48,11 @@ const DashboardHeader = ({
           Graph Tips
         </div>
         <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
+        <AutoRefreshDropdown
+          onChoose={handleChooseAutoRefresh}
+          selected={selectedAutoRefresh.inputValue}
+          iconName="refresh"
+        />
         <TimeRangeDropdown onChooseTimeRange={handleChooseTimeRange} selected={timeRange.inputValue} />
         <div className="btn btn-info btn-sm" onClick={handleClickPresentationButton}>
           <span className="icon expand-a" style={{margin: 0}}></span>
@@ -69,8 +77,10 @@ DashboardHeader.propTypes = {
   dashboard: shape({}),
   headerText: string,
   timeRange: shape({}).isRequired,
+  selectedAutoRefresh: shape({}).isRequired,
   isHidden: bool.isRequired,
   handleChooseTimeRange: func.isRequired,
+  handleChooseAutoRefresh: func.isRequired,
   handleClickPresentationButton: func.isRequired,
 }
 

ui/src/hosts/containers/HostPage.js

@@ -3,6 +3,7 @@ import {Link} from 'react-router'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 import classnames from 'classnames';
+import {loadLocalStorage} from 'src/localStorage'
 
 import LayoutRenderer from 'shared/components/LayoutRenderer';
 import DashboardHeader from 'src/dashboards/components/DashboardHeader';
@@ -86,10 +87,13 @@ export const HostPage = React.createClass({
     this.setState({timeRange});
   },
 
+  // TODO implement
+  handleChooseAutoRefresh({})
+
   renderLayouts(layouts) {
-    const autoRefreshMs = 15000;
     const {timeRange} = this.state;
-    const {source} = this.props;
+    const {source, autoRefreshMs} = this.props;
+    console.log(autoRefreshMs)
 
     const autoflowLayouts = layouts.filter((layout) => !!layout.autoflow);
 
@@ -156,6 +160,7 @@ export const HostPage = React.createClass({
           timeRange={timeRange}
           isHidden={inPresentationMode}
           handleChooseTimeRange={this.handleChooseTimeRange}
+          handleChooseAutoRefresh={this.handleChooseAutoRefresh}
           handleClickPresentationButton={handleClickPresentationButton}
         >
           {Object.keys(hosts).map((host, i) => {
@@ -183,9 +188,11 @@ export const HostPage = React.createClass({
 
 const mapStateToProps = (state) => ({
   inPresentationMode: state.appUI.presentationMode,
+  autoRefreshMs: state.appConfig.autoRefreshMs,
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  handleChooseAutoRefresh: dispatch(setAutoRefresh()),
   handleClickPresentationButton: presentationButtonDispatcher(dispatch),
 })
 

ui/src/index.js

@@ -24,6 +24,7 @@ import {loadLocalStorage} from './localStorage';
 
 import 'src/style/chronograf.scss';
 
+// TODO ensure appConfig data in localstorage
 const store = configureStore(loadLocalStorage());
 const rootNode = document.getElementById('react-root');
 

ui/src/shared/actions/config.js

@@ -0,0 +1,16 @@
+// TODO implement both fns below
+
+export function setAutoRefresh(seconds) {
+  // write to local storage
+    // on callback & confirmation, return state
+  return {
+    type: 'SET_AUTOREFRESH',
+    payload: {
+      seconds,
+    },
+  };
+}
+
+// getAutoRefresh (used by app when loads)
+  // load from localstorage
+  // return state

ui/src/shared/components/AutoRefreshDropdown.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import classnames from 'classnames';
+import OnClickOutside from 'shared/components/OnClickOutside';
+
+import autoRefreshValues from 'hson!../data/autoRefreshValues.hson';
+
+const AutoRefreshDropdown = React.createClass({
+  autobind: false,
+
+  propTypes: {
+    selected: React.PropTypes.string.isRequired,
+    onChoose: React.PropTypes.func.isRequired,
+  },
+
+  getInitialState() {
+    return {
+      isOpen: false,
+    };
+  },
+
+  handleClickOutside() {
+    this.setState({isOpen: false});
+  },
+
+  handleSelection(params) {
+    const {seconds, menuOption} = params;
+    this.props.onChoose({seconds});
+    this.setState({isOpen: false});
+  },
+
+  toggleMenu() {
+    this.setState({isOpen: !this.state.isOpen});
+  },
+
+  render() {
+    const self = this;
+    const {selected} = self.props;
+    const {isOpen} = self.state;
+
+    return (
+      <div className="dropdown time-range-dropdown">
+        <div className="btn btn-sm btn-info dropdown-toggle" onClick={() => self.toggleMenu()}>
+          <span className="icon refresh"></span>
+          <span className="selected-time-range">{selected}</span>
+          <span className="caret" />
+        </div>
+        <ul className={classnames("dropdown-menu", {show: isOpen})}>
+          <li className="dropdown-header">Time Range</li>
+          {autoRefreshValues.map((item) => {
+            return (
+              <li key={item.menuOption}>
+                <a href="#" onClick={() => self.handleSelection(item)}>
+                  {item.menuOption}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  },
+});
+
+export default OnClickOutside(AutoRefreshDropdown);

ui/src/shared/components/Dropdown.js

@@ -1,14 +1,23 @@
 import React, {PropTypes} from 'react';
+import classnames from 'classnames';
 import OnClickOutside from 'shared/components/OnClickOutside';
 
+const {
+  arrayOf,
+  shape,
+  string,
+  func,
+} = PropTypes
+
 const Dropdown = React.createClass({
   propTypes: {
-    items: PropTypes.arrayOf(PropTypes.shape({
-      text: PropTypes.string.isRequired,
+    items: arrayOf(shape({
+      text: string.isRequired,
     })).isRequired,
-    onChoose: PropTypes.func.isRequired,
-    selected: PropTypes.string.isRequired,
-    className: PropTypes.string,
+    onChoose: func.isRequired,
+    selected: string.isRequired,
+    iconName: string,
+    className: string,
   },
   getInitialState() {
     return {
@@ -39,11 +48,12 @@ const Dropdown = React.createClass({
   },
   render() {
     const self = this;
-    const {items, selected, className, actions} = self.props;
+    const {items, selected, className, iconName, actions} = self.props;
 
     return (
       <div onClick={this.toggleMenu} className={`dropdown ${className}`}>
         <div className="btn btn-sm btn-info dropdown-toggle">
+          {iconName ? <span className={classnames("icon", {[iconName]: true})}></span> : null}
           <span className="dropdown-selected">{selected}</span>
           <span className="caret" />
         </div>

ui/src/shared/components/TimeRangeDropdown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import cN from 'classnames';
+import classnames from 'classnames';
 import OnClickOutside from 'shared/components/OnClickOutside';
 
 import timeRanges from 'hson!../data/timeRanges.hson';
@@ -48,7 +48,7 @@ const TimeRangeDropdown = React.createClass({
           <span className="selected-time-range">{selected}</span>
           <span className="caret" />
         </div>
-        <ul className={cN("dropdown-menu", {show: isOpen})}>
+        <ul className={classnames("dropdown-menu", {show: isOpen})}>
           <li className="dropdown-header">Time Range</li>
           {timeRanges.map((item) => {
             return (

ui/src/shared/data/autoRefreshValues.hson

@@ -0,0 +1,7 @@
+[
+  {ms: 5000, inputValue: 'Every 5 seconds', menuOption: 'Every 5 seconds'},
+  {ms: 10000, inputValue: 'Every 10 seconds', menuOption: 'Every 15 seconds'},
+  {ms: 15000, inputValue: 'Every 15 seconds', menuOption: 'Every 15 seconds'},
+  {ms: 30000, inputValue: 'Every 30 seconds', menuOption: 'Every 30 seconds'},
+  {ms: 60000, inputValue: 'Every 60 seconds', menuOption: 'Every 60 seconds'}
+]

ui/src/shared/reducers/appConfig.js

@@ -10,6 +10,8 @@ export default function appConfig(state = initialState, action) {
         autoRefreshMs: action.payload,
       }
     }
+
+    // TODO implement 'GET_AUTOREFRESH'
   }
 
   return state