Fix for Hostpage.

ui/src/hosts/containers/HostPage.js

@@ -98,9 +98,13 @@ export const HostPage = React.createClass({
     this.setState({layouts: filteredLayouts, hosts: filteredHosts}) // eslint-disable-line react/no-did-mount-set-state
   },
 
-  handleChooseTimeRange({lower}) {
-    const timeRange = timeRanges.find(range => range.lower === lower)
-    this.setState({timeRange})
+  handleChooseTimeRange({lower, upper}) {
+    if (upper) {
+      this.setState({timeRange: {lower, upper}})
+    } else {
+      const timeRange = timeRanges.find(range => range.lower === lower)
+      this.setState({timeRange})
+    }
   },
 
   synchronizer(dygraph) {

ui/src/shared/components/LayoutRenderer.js

@@ -42,13 +42,19 @@ class LayoutRenderer extends Component {
   }
 
   buildQueryForOldQuerySchema(q) {
-    const {timeRange: {lower}, host} = this.props
-    const {defaultGroupBy} = timeRanges.find(range => range.lower === lower)
+    const {timeRange: {lower, upper}, host} = this.props
+    const {defaultGroupBy} = timeRanges.find(
+      range => range.lower === lower
+    ) || {defaultGroupBy: '5m'}
     const {wheres, groupbys} = q
 
     let text = q.text
 
-    text += ` where time > ${lower}`
+    if (upper) {
+      text += ` where time > '${lower}' AND time < '${upper}'`
+    } else {
+      text += ` where time > ${lower}`
+    }
 
     if (host) {
       text += ` and \"host\" = '${host}'`