From 113847f90312b423b512e5e13cb525b18c25152c Mon Sep 17 00:00:00 2001
From: Jade McGough <jade@thezets.com>
Date: Mon, 31 Oct 2016 22:12:25 -0700
Subject: [PATCH] wire up TimeRangeDropdown in HostPage

---
 ui/src/hosts/containers/HostPage.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index d9d1e11360..0e49e47cd9 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/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>