wire up TimeRangeDropdown in HostPage

ui/src/hosts/containers/HostPage.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
 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 pastHourIndex = 2;
+
+    return {
+      layouts: [],
+      timeRange: timeRanges[pastHourIndex],
+    };
   },
 
   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);
 
@@ -65,7 +77,7 @@ export const HostPage = React.createClass({
               <p>Uptime: <strong>2d 4h 33m</strong></p>
             </div>
             <div className="enterprise-header__right">
-              <TimeRangeDropdown onChooseTimeRange={_.noop} selected="Past 30 minutes" />
+              <TimeRangeDropdown onChooseTimeRange={handleChooseTimeRange} selected={timeRange.inputValue} />
             </div>
           </div>
         </div>