Refactor CustomTimeRangeDropdown to contain its own display state. Add CustomTimeRangeDropdown to DE. Add quotes to date strings in a naive manner.

ui/src/alerts/containers/AlertsApp.js

@@ -27,7 +27,6 @@ class AlertsApp extends Component {
       loading: true,
       hasKapacitor: false,
       alerts: [],
-      isTimeOpen: false,
       timeRange: {
         upper: moment().format(),
         lower: moment().subtract(lowerInSec || oneDayInSec, 'seconds').format(),
@@ -40,8 +39,6 @@ class AlertsApp extends Component {
     this.fetchAlerts = ::this.fetchAlerts
     this.renderSubComponents = ::this.renderSubComponents
     this.handleGetMoreAlerts = ::this.handleGetMoreAlerts
-    this.handleToggleTime = ::this.handleToggleTime
-    this.handleCloseTime = ::this.handleCloseTime
     this.handleApplyTime = ::this.handleApplyTime
   }
 
@@ -138,14 +135,6 @@ class AlertsApp extends Component {
       : <NoKapacitorError source={source} />
   }
 
-  handleToggleTime() {
-    this.setState({isTimeOpen: !this.state.isTimeOpen})
-  }
-
-  handleCloseTime() {
-    this.setState({isTimeOpen: false})
-  }
-
   handleApplyTime(timeRange) {
     this.setState({timeRange})
   }
@@ -171,9 +160,6 @@ class AlertsApp extends Component {
               <div className="page-header__right">
                 <SourceIndicator sourceName={source.name} />
                 <CustomTimeRangeDropdown
-                  isVisible={this.state.isTimeOpen}
-                  onToggle={this.handleToggleTime}
-                  onClose={this.handleCloseTime}
                   onApplyTimeRange={this.handleApplyTime}
                   timeRange={timeRange}
                 />

ui/src/dashboards/containers/DashboardPage.js

@@ -10,8 +10,7 @@ import CellEditorOverlay from 'src/dashboards/components/CellEditorOverlay'
 import DashboardHeader from 'src/dashboards/components/DashboardHeader'
 import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
 import Dashboard from 'src/dashboards/components/Dashboard'
-import TemplateVariableManager
-  from 'src/dashboards/components/TemplateVariableManager'
+import TemplateVariableManager from 'src/dashboards/components/TemplateVariableManager'
 
 import {errorThrown as errorThrownAction} from 'shared/actions/errors'
 
@@ -104,8 +103,8 @@ class DashboardPage extends Component {
     this.setState({selectedCell: cell})
   }
 
-  handleChooseTimeRange({lower}) {
-    this.props.dashboardActions.setTimeRange({lower, upper: null})
+  handleChooseTimeRange(timeRange) {
+    this.props.dashboardActions.setTimeRange(timeRange)
   }
 
   handleUpdatePosition(cells) {
@@ -283,8 +282,10 @@ class DashboardPage extends Component {
       values: [],
     }
 
-    const templatesIncludingDashTime = (dashboard &&
-      dashboard.templates.concat(dashboardTime).concat(interval)) || []
+    const templatesIncludingDashTime =
+      (dashboard &&
+        dashboard.templates.concat(dashboardTime).concat(interval)) ||
+      []
 
     const {selectedCell, isEditMode, isTemplating} = this.state
 
@@ -337,13 +338,13 @@ class DashboardPage extends Component {
               showTemplateControlBar={showTemplateControlBar}
             >
               {dashboards
-                ? dashboards.map((d, i) => (
+                ? dashboards.map((d, i) =>
                     <li className="dropdown-item" key={i}>
                       <Link to={`/sources/${sourceID}/dashboards/${d.id}`}>
                         {d.name}
                       </Link>
                     </li>
-                  ))
+                  )
                 : null}
             </DashboardHeader>}
         {dashboard

ui/src/data_explorer/containers/Header.js

@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 import {withRouter} from 'react-router'
 
 import AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
-import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
+import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import GraphTips from 'shared/components/GraphTips'
 
@@ -60,9 +60,9 @@ const Header = React.createClass({
               selected={autoRefresh}
               iconName="refresh"
             />
-            <TimeRangeDropdown
-              onChooseTimeRange={this.handleChooseTimeRange}
-              selected={timeRange}
+            <CustomTimeRangeDropdown
+              onApplyTimeRange={this.handleChooseTimeRange}
+              timeRange={timeRange}
             />
           </div>
         </div>

ui/src/shared/components/CustomTimeRange.js

@@ -75,11 +75,14 @@ class CustomTimeRange extends Component {
   }
 
   handleClick() {
+    const {onApplyTimeRange, onClose} = this.props
     const lower = this.lowerCal.getDate().toISOString()
     const upper = this.upperCal.getDate().toISOString()
 
-    this.props.onApplyTimeRange({lower, upper})
-    this.props.onClose()
+    onApplyTimeRange({lower, upper})
+    if (onClose) {
+      onClose()
+    }
   }
 }
 
@@ -91,7 +94,7 @@ CustomTimeRange.propTypes = {
     lower: string.isRequired,
     upper: string.isRequired,
   }).isRequired,
-  onClose: func.isRequired,
+  onClose: func,
 }
 
 export default CustomTimeRange

ui/src/shared/components/CustomTimeRangeDropdown.js

@@ -8,30 +8,40 @@ import CustomTimeRange from 'shared/components/CustomTimeRange'
 class CustomTimeRangeDropdown extends Component {
   constructor(props) {
     super(props)
+
+    this.state = {
+      isDropdownOpen: false,
+    }
+
+    this.handleToggleDropdown = ::this.handleToggleDropdown
+    this.handleCloseDropdown = ::this.handleCloseDropdown
   }
 
   handleClickOutside() {
-    this.props.onClose()
+    this.handleCloseDropdown()
+  }
+
+  handleToggleDropdown() {
+    this.setState({isDropdownOpen: !this.state.isDropdownOpen})
+  }
+
+  handleCloseDropdown() {
+    this.setState({isDropdownOpen: false})
   }
 
   render() {
-    const {
-      isVisible,
-      onToggle,
-      onClose,
-      timeRange: {upper, lower},
-      timeRange,
-      onApplyTimeRange,
-    } = this.props
+    const {timeRange: {upper, lower}, timeRange, onApplyTimeRange} = this.props
+
+    const {isDropdownOpen} = this.state
 
     return (
       <div
-        className={classnames('custom-time-range', {open: isVisible})}
+        className={classnames('custom-time-range', {open: isDropdownOpen})}
         style={{display: 'flex'}}
       >
         <button
           className="btn btn-sm btn-default dropdown-toggle"
-          onClick={onToggle}
+          onClick={this.handleToggleDropdown}
         >
           <span className="icon clock" />
           <span className="dropdown-selected">{`${moment(lower).format(
@@ -43,7 +53,7 @@ class CustomTimeRangeDropdown extends Component {
           <CustomTimeRange
             onApplyTimeRange={onApplyTimeRange}
             timeRange={timeRange}
-            onClose={onClose}
+            onClose={this.handleCloseDropdown}
           />
         </div>
       </div>
@@ -51,7 +61,7 @@ class CustomTimeRangeDropdown extends Component {
   }
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 CustomTimeRangeDropdown.propTypes = {
   onApplyTimeRange: func.isRequired,
@@ -59,9 +69,6 @@ CustomTimeRangeDropdown.propTypes = {
     lower: string.isRequired,
     upper: string.isRequired,
   }).isRequired,
-  isVisible: bool.isRequired,
-  onToggle: func.isRequired,
-  onClose: func.isRequired,
 }
 
 export default OnClickOutside(CustomTimeRangeDropdown)

ui/src/shared/components/CustomTimeRangeOverlay.js

@@ -30,7 +30,7 @@ class CustomTimeRangeOverlay extends Component {
   }
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 CustomTimeRangeOverlay.propTypes = {
   onApplyTimeRange: func.isRequired,
@@ -38,9 +38,7 @@ CustomTimeRangeOverlay.propTypes = {
     lower: string.isRequired,
     upper: string.isRequired,
   }).isRequired,
-  isVisible: bool.isRequired,
-  onToggle: func.isRequired,
-  onClose: func.isRequired,
+  onClose: func,
 }
 
 export default OnClickOutside(CustomTimeRangeOverlay)

ui/src/shared/components/TimeRangeDropdown.js

@@ -45,13 +45,8 @@ class TimeRangeDropdown extends Component {
     this.setState({isOpen: false})
   }
 
-  handleSelection(params) {
-    const {lower, upper, menuOption} = params
-    if (menuOption.toLowerCase() === 'custom') {
-      this.props.onChooseTimeRange({custom: true})
-    } else {
-      this.props.onChooseTimeRange({lower, upper})
-    }
+  handleSelection(timeRange) {
+    this.props.onChooseTimeRange(timeRange)
     this.setState({isOpen: false})
   }
 
@@ -65,6 +60,7 @@ class TimeRangeDropdown extends Component {
 
   handleApplyCustomTimeRange(timeRange) {
     this.setState({timeRange})
+    this.handleSelection({...timeRange})
   }
 
   handleToggleCustomTimeRange() {

ui/src/utils/influxql.js

@@ -1,6 +1,9 @@
 import _ from 'lodash'
 
-import {TEMP_VAR_INTERVAL, DEFAULT_DASHBOARD_GROUP_BY_INTERVAL} from 'shared/constants'
+import {
+  TEMP_VAR_INTERVAL,
+  DEFAULT_DASHBOARD_GROUP_BY_INTERVAL,
+} from 'shared/constants'
 
 export default function buildInfluxQLQuery(timeBounds, config) {
   const {groupBy, tags, areTagsAccepted} = config
@@ -54,6 +57,15 @@ function _buildFields(fieldFuncs) {
 
 function _buildWhereClause({lower, upper, tags, areTagsAccepted}) {
   const timeClauses = []
+
+  if (lower && lower.includes('Z')) {
+    lower = `'${lower}'`
+  }
+
+  if (upper && upper.includes('Z')) {
+    upper = `'${upper}'`
+  }
+
   if (lower) {
     timeClauses.push(`time > ${lower}`)
   }
@@ -94,7 +106,9 @@ function _buildGroupByTime(groupBy) {
     return ''
   }
 
-  return ` GROUP BY ${groupBy.time === DEFAULT_DASHBOARD_GROUP_BY_INTERVAL ? TEMP_VAR_INTERVAL : `time(${groupBy.time})`}`
+  return ` GROUP BY ${groupBy.time === DEFAULT_DASHBOARD_GROUP_BY_INTERVAL
+    ? TEMP_VAR_INTERVAL
+    : `time(${groupBy.time})`}`
 }
 
 function _buildGroupByTags(groupBy) {