From 856acd1de7b53131d95117f6b281ce764d5dd8c5 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 17 Aug 2017 13:06:20 -0700 Subject: [PATCH 1/3] Add inputs for custom time ranges --- ui/src/shared/components/CustomTimeRange.js | 65 +++++++++++++++---- .../style/components/custom-time-range.scss | 2 + 2 files changed, 55 insertions(+), 12 deletions(-) diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js index 8b84f315a..9b4921807 100644 --- a/ui/src/shared/components/CustomTimeRange.js +++ b/ui/src/shared/components/CustomTimeRange.js @@ -3,39 +3,62 @@ import rome from 'rome' import moment from 'moment' import shortcuts from 'hson!shared/data/timeRangeShortcuts.hson' +const dateFormat = 'YYYY-MM-DD HH:mm' class CustomTimeRange extends Component { constructor(props) { super(props) - - this.handleClick = ::this.handleClick - this._formatTimeRange = ::this._formatTimeRange - this.handleTimeRangeShortcut = ::this.handleTimeRangeShortcut } componentDidMount() { const {timeRange} = this.props const lower = rome(this.lower, { - initialValue: this._formatTimeRange(timeRange.lower), + appendTo: this.lowerContainer, + initialValue: this.getInitialDate(timeRange.lower), + autoClose: false, + autoHideOnBlur: false, + autoHideOnClick: false, }) + const upper = rome(this.upper, { - initialValue: this._formatTimeRange(timeRange.upper), + appendTo: this.upperContainer, + autoClose: false, + initialValue: this.getInitialDate(timeRange.upper), + autoHideOnBlur: false, + autoHideOnClick: false, }) this.lowerCal = lower this.upperCal = upper + + this.lowerCal.show() + this.upperCal.show() + } + + getInitialDate = time => { + const {upper, lower} = this.props.timeRange + + if (upper || lower) { + return this._formatTimeRange(time) + } + + return moment(new Date()).format(dateFormat) } // If there is an upper or lower time range set, set the corresponding calendar's value. componentWillReceiveProps(nextProps) { const {lower, upper} = nextProps.timeRange if (lower) { + const formattedLower = this._formatTimeRange(lower) this.lowerCal.setValue(this._formatTimeRange(lower)) + this.lower.value = formattedLower } if (upper) { + const formattedUpper = this._formatTimeRange(upper) this.upperCal.setValue(this._formatTimeRange(upper)) + this.upper.value = formattedUpper } } @@ -56,8 +79,26 @@ class CustomTimeRange extends Component {
-
(this.lower = r)} /> -
(this.upper = r)} /> +
(this.lowerContainer = r)} + > + (this.lower = r)} + placeholder="from" + /> +
+
(this.upperContainer = r)} + > + (this.upper = r)} + placeholder="to" + /> +
{ if (!timeRange) { return '' } @@ -86,10 +127,10 @@ class CustomTimeRange extends Component { moment().subtract(duration, unitOfTime) } - return moment(timeRange.replace(/\'/g, '')).format('YYYY-MM-DD HH:mm') + return moment(timeRange.replace(/\'/g, '')).format(dateFormat) } - handleClick() { + handleClick = () => { const {onApplyTimeRange, onClose} = this.props const lower = this.lowerCal.getDate().toISOString() const upper = this.upperCal.getDate().toISOString() @@ -101,7 +142,7 @@ class CustomTimeRange extends Component { } } - handleTimeRangeShortcut(shortcut) { + handleTimeRangeShortcut = shortcut => { return () => { let lower const upper = moment() diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss index 48f2e924b..8164d6a99 100644 --- a/ui/src/style/components/custom-time-range.scss +++ b/ui/src/style/components/custom-time-range.scss @@ -35,9 +35,11 @@ } .custom-time--lower { margin-right: 4px; + text-align: center; } .custom-time--upper { margin-left: 4px; + text-align: center; } .custom-time--shortcuts { @include no-user-select(); From 0d64792d2608672a67364f10941769af1f2582d0 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 17 Aug 2017 14:41:49 -0700 Subject: [PATCH 2/3] Add date validation to calendars A user will now no longer be able to select an invalid time range. i.e. an upper time lower than their lower time or a lower time greater than their upper time. Yay. --- ui/src/shared/components/CustomTimeRange.js | 129 ++++++++++-------- .../style/components/custom-time-range.scss | 7 +- 2 files changed, 76 insertions(+), 60 deletions(-) diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js index 9b4921807..0b03629f7 100644 --- a/ui/src/shared/components/CustomTimeRange.js +++ b/ui/src/shared/components/CustomTimeRange.js @@ -14,6 +14,7 @@ class CustomTimeRange extends Component { const {timeRange} = this.props const lower = rome(this.lower, { + dateValidator: rome.val.beforeEq(this.upper), appendTo: this.lowerContainer, initialValue: this.getInitialDate(timeRange.lower), autoClose: false, @@ -22,6 +23,7 @@ class CustomTimeRange extends Component { }) const upper = rome(this.upper, { + dateValidator: rome.val.afterEq(this.lower), appendTo: this.upperContainer, autoClose: false, initialValue: this.getInitialDate(timeRange.upper), @@ -36,17 +38,6 @@ class CustomTimeRange extends Component { this.upperCal.show() } - getInitialDate = time => { - const {upper, lower} = this.props.timeRange - - if (upper || lower) { - return this._formatTimeRange(time) - } - - return moment(new Date()).format(dateFormat) - } - - // If there is an upper or lower time range set, set the corresponding calendar's value. componentWillReceiveProps(nextProps) { const {lower, upper} = nextProps.timeRange if (lower) { @@ -62,53 +53,19 @@ class CustomTimeRange extends Component { } } - render() { - return ( -
-
-
Shortcuts
- {shortcuts.map(({id, name}) => -
- {name} -
- )} -
-
-
-
(this.lowerContainer = r)} - > - (this.lower = r)} - placeholder="from" - /> -
-
(this.upperContainer = r)} - > - (this.upper = r)} - placeholder="to" - /> -
-
-
- Apply -
-
-
- ) + getInitialDate = time => { + const {upper, lower} = this.props.timeRange + + if (upper || lower) { + return this._formatTimeRange(time) + } + + return moment(new Date()).format(dateFormat) + } + + handleRefreshCals = () => { + this.lowerCal.refresh() + this.upperCal.refresh() } /* @@ -174,10 +131,66 @@ class CustomTimeRange extends Component { } } + this.lower.value = lower.format(dateFormat) + this.upper.value = upper.format(dateFormat) + this.lowerCal.setValue(lower) this.upperCal.setValue(upper) + + this.handleRefreshCals() } } + + render() { + return ( +
+
+
Shortcuts
+ {shortcuts.map(({id, name}) => +
+ {name} +
+ )} +
+
+
+
(this.lowerContainer = r)} + > + (this.lower = r)} + placeholder="from" + onKeyUp={this.handleRefreshCals} + /> +
+
(this.upperContainer = r)} + > + (this.upper = r)} + placeholder="to" + onKeyUp={this.handleRefreshCals} + /> +
+
+
+ Apply +
+
+
+ ) + } } const {func, shape, string} = PropTypes diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss index 8164d6a99..3cf69b996 100644 --- a/ui/src/style/components/custom-time-range.scss +++ b/ui/src/style/components/custom-time-range.scss @@ -181,13 +181,16 @@ $rd-cell-size: 30px; &.rd-day-next-month, &.rd-day-prev-month { cursor: default; - color: $g8-storm !important; - background-color: $g5-pepper !important; + visibility: hidden; } &.rd-day-selected { background-color: $c-pool !important; color: $g20-white !important; } + &.rd-day-disabled { + color: $g8-storm !important; + background-color: $g5-pepper !important; + } } } From 8635631dad9f2767356f33bfa1853665740b1094 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 17 Aug 2017 14:50:00 -0700 Subject: [PATCH 3/3] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8d9b1904..0e9ff3840 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ ### Features 1. [#1863](https://github.com/influxdata/chronograf/pull/1863): Improve 'new-sources' server flag example by adding 'type' key +1. [#1898](https://github.com/influxdata/chronograf/pull/1898): Add an input and validation to custom time range calendar dropdowns ### UI Improvements 1. [#1862](https://github.com/influxdata/chronograf/pull/1862): Show "Add Graph" button on cells with no queries