Merge pull request #3181 from influxdata/fix/invalid-data-now

Show valid time in custom time range when now is selected

CHANGELOG.md

@@ -34,6 +34,7 @@
 1.  [#3162](https://github.com/influxdata/chronograf/pull/3162): Only send threshold value to parent on blur
 1.  [#3168](https://github.com/influxdata/chronograf/pull/3168): Require that emails on GitHub & Generic OAuth2 principals be verified & primary, if those fields are provided
 1.  [#3182](https://github.com/influxdata/chronograf/pull/3182): Send notification when rp creation returns a failure
+1.  [#3181](https://github.com/influxdata/chronograf/pull/3181): Show valid time in custom time range when now is selected
 
 ## v1.4.3.1 [2018-04-02]
 

ui/src/shared/components/CustomTimeRangeDropdown.js

@@ -1,71 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-import classnames from 'classnames'
-import OnClickOutside from 'react-onclickoutside'
-
-import CustomTimeRange from 'shared/components/CustomTimeRange'
-
-class CustomTimeRangeDropdown extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      expanded: false,
-    }
-  }
-
-  handleClickOutside() {
-    this.handleCloseDropdown()
-  }
-
-  handleToggleDropdown = () => {
-    this.setState({expanded: !this.state.expanded})
-  }
-
-  handleCloseDropdown = () => {
-    this.setState({expanded: false})
-  }
-
-  render() {
-    const {timeRange: {upper, lower}, timeRange, onApplyTimeRange} = this.props
-
-    const {expanded} = this.state
-
-    return (
-      <div
-        className={classnames('dropdown dropdown-280 custom-time-range', {
-          open: expanded,
-        })}
-      >
-        <button
-          className="btn btn-sm btn-default dropdown-toggle"
-          onClick={this.handleToggleDropdown}
-        >
-          <span className="icon clock" />
-          <span className="dropdown-selected">{`${moment(lower).format(
-            'MMM Do HH:mm'
-          )} — ${moment(upper).format('MMM Do HH:mm')}`}</span>
-          <span className="caret" />
-        </button>
-        <CustomTimeRange
-          onApplyTimeRange={onApplyTimeRange}
-          timeRange={timeRange}
-          onClose={this.handleCloseDropdown}
-        />
-      </div>
-    )
-  }
-}
-
-const {func, shape, string} = PropTypes
-
-CustomTimeRangeDropdown.propTypes = {
-  onApplyTimeRange: func.isRequired,
-  timeRange: shape({
-    lower: string.isRequired,
-    upper: string,
-  }).isRequired,
-}
-
-export default OnClickOutside(CustomTimeRangeDropdown)

ui/src/shared/components/CustomTimeRangeDropdown.tsx

@@ -0,0 +1,89 @@
+import React, {PureComponent} from 'react'
+import moment from 'moment'
+import classnames from 'classnames'
+
+import {ClickOutside} from 'src/shared/components/ClickOutside'
+import CustomTimeRange from 'src/shared/components/CustomTimeRange'
+
+interface State {
+  expanded: boolean
+}
+
+interface Props {
+  timeRange: {
+    upper?: string
+    lower: string
+  }
+  onApplyTimeRange: () => void
+}
+
+class CustomTimeRangeDropdown extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  public render() {
+    const {timeRange, onApplyTimeRange} = this.props
+
+    const {expanded} = this.state
+
+    return (
+      <ClickOutside onClickOutside={this.closeDropdown}>
+        <div
+          className={classnames('dropdown dropdown-280 custom-time-range', {
+            open: expanded,
+          })}
+        >
+          <button
+            className="btn btn-sm btn-default dropdown-toggle"
+            onClick={this.handleToggleDropdown}
+          >
+            <span className="icon clock" />
+            <span className="dropdown-selected">
+              {this.lowerTimeRange} — {this.upperTimeRange}
+            </span>
+            <span className="caret" />
+          </button>
+          <CustomTimeRange
+            onApplyTimeRange={onApplyTimeRange}
+            timeRange={timeRange}
+            onClose={this.closeDropdown}
+          />
+        </div>
+      </ClickOutside>
+    )
+  }
+
+  private get upperTimeRange(): string {
+    const {timeRange: {upper}} = this.props
+
+    if (upper === 'now()') {
+      return moment().format(this.timeFormat)
+    }
+
+    return moment(upper).format(this.timeFormat)
+  }
+
+  private get lowerTimeRange(): string {
+    const {timeRange: {lower}} = this.props
+    return moment(lower).format(this.timeFormat)
+  }
+
+  private get timeFormat(): string {
+    return 'MMM Do HH:mm'
+  }
+
+  private handleToggleDropdown = () => {
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  private closeDropdown = () => {
+    this.setState({expanded: false})
+  }
+}
+
+export default CustomTimeRangeDropdown

ui/test/shared/components/CustomTimeRangeDropdown.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import moment from 'moment'
+import {shallow} from 'enzyme'
+import CustomTimeRangeDropdown from 'src/shared/components/CustomTimeRangeDropdown'
+
+const setup = (overrides = {}) => {
+  const props = {
+    timeRange: {upper: 'now()', lower: '2017-10-24'},
+    onApplyTimeRange: () => {},
+    ...overrides,
+  }
+
+  return shallow(<CustomTimeRangeDropdown {...props} />)
+}
+
+describe('shared.Components.CustomTimeRangeDropdown', () => {
+  describe('rendering', () => {
+    it('renders correct time when now is selected', () => {
+      const wrapper = setup()
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.dive().text()).toContain(moment().format('MMM Do HH:mm'))
+    })
+
+    it('renders correct time when no upper is provided', () => {
+      const wrapper = setup({timeRange: {lower: '2017-10-24'}})
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.dive().text()).toContain(moment().format('MMM Do HH:mm'))
+    })
+  })
+})