Merge pull request #306 from influxdata/feature/241-time-selector

Feature/241 time selector

ui/src/chronograf/containers/Header.js

@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react';
 import moment from 'moment';
 import {withRouter} from 'react-router';
-import TimeRangeDropdown from '../components/TimeRangeDropdown';
+import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
-import timeRanges from 'hson!../data/timeRanges.hson';
+import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 import Dropdown from 'shared/components/Dropdown';
 
 const Header = React.createClass({

ui/src/hosts/components/LayoutRenderer.js

@@ -8,6 +8,7 @@ const RefreshingLineGraph = AutoRefresh(LineGraph);
 
 export const LayoutRenderer = React.createClass({
   propTypes: {
+    timeRange: PropTypes.string.isRequired,
     cells: PropTypes.arrayOf(
       PropTypes.shape({
         queries: PropTypes.arrayOf(
@@ -37,10 +38,12 @@ export const LayoutRenderer = React.createClass({
   },
 
   generateGraphs() {
+    const {timeRange, host, autoRefreshMs, source} = this.props;
+
     return this.props.cells.map((cell) => {
       const qs = cell.queries.map((q) => {
-        _.merge(q, {host: this.props.source});
+        _.merge(q, {host: source});
-        q.text += ` where host = '${this.props.host}' and time > now() - 15m`;
+        q.text += ` where host = '${host}' and time > ${timeRange}`;
         return q;
       });
       return (
@@ -49,7 +52,7 @@ export const LayoutRenderer = React.createClass({
           <div className="hosts-graph graph-panel__graph-container">
             <RefreshingLineGraph
               queries={qs}
-              autoRefresh={this.props.autoRefreshMs}
+              autoRefresh={autoRefreshMs}
             />
           </div>
         </div>

ui/src/hosts/containers/HostPage.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
-// TODO: move this to a higher level package than chronograf?
 import LayoutRenderer from '../components/LayoutRenderer';
+import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
+import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 import {fetchLayouts} from '../apis';
 import _ from 'lodash';
 
@@ -17,7 +18,12 @@ export const HostPage = React.createClass({
   },
 
   getInitialState() {
-    return {layouts: []};
+    const fifteenMinutesIndex = 1;
+
+    return {
+      layouts: [],
+      timeRange: timeRanges[fifteenMinutesIndex],
+    };
   },
 
   componentDidMount() {
@@ -26,10 +32,16 @@ export const HostPage = React.createClass({
     });
   },
 
+  handleChooseTimeRange({lower}) {
+    const timeRange = timeRanges.find((range) => range.queryValue === lower);
+    this.setState({timeRange});
+  },
+
   render() {
     const autoRefreshMs = 15000;
     const source = this.props.source.links.proxy;
     const hostID = this.props.params.hostID;
+    const {timeRange} = this.state;
 
     const layout = _.head(this.state.layouts);
 
@@ -44,6 +56,7 @@ export const HostPage = React.createClass({
 
       layoutComponent = (
         <LayoutRenderer
+          timeRange={timeRange.queryValue}
           cells={layout.cells}
           autoRefreshMs={autoRefreshMs}
           source={source}
@@ -64,6 +77,9 @@ export const HostPage = React.createClass({
             <div className="enterprise-header__right">
               <p>Uptime: <strong>2d 4h 33m</strong></p>
             </div>
+            <div className="enterprise-header__right">
+              <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={timeRange.inputValue} />
+            </div>
           </div>
         </div>
         <div className="container-fluid hosts-dashboard">