Merge pull request #1744 from influxdata/feature/1685-moving-time-ranges

Custom date picker shortcuts

CHANGELOG.md

@@ -32,6 +32,7 @@
 1. [#1813](https://github.com/influxdata/chronograf/pull/1813): Guarantee UUID for each Alert Table key to prevent dropping items when keys overlap
 
 ### Features
+1. [#1744](https://github.com/influxdata/chronograf/pull/1744): Add a few time range shortcuts to the custom time range menu
 1. [#1714](https://github.com/influxdata/chronograf/pull/1714): Add ability to edit a dashboard graph's y-axis bounds
 1. [#1714](https://github.com/influxdata/chronograf/pull/1714): Add ability to edit a dashboard graph's y-axis label
 

ui/src/shared/components/CustomTimeRange.js

@@ -2,12 +2,15 @@ import React, {PropTypes, Component} from 'react'
 import rome from 'rome'
 import moment from 'moment'
 
+import shortcuts from 'hson!shared/data/timeRangeShortcuts.hson'
+
 class CustomTimeRange extends Component {
   constructor(props) {
     super(props)
 
     this.handleClick = ::this.handleClick
     this._formatTimeRange = ::this._formatTimeRange
+    this.handleTimeRangeShortcut = ::this.handleTimeRangeShortcut
   }
 
   componentDidMount() {
@@ -39,15 +42,29 @@ class CustomTimeRange extends Component {
   render() {
     return (
       <div className="custom-time--container">
-        <div className="custom-time--dates">
-          <div className="custom-time--lower" ref={r => (this.lower = r)} />
-          <div className="custom-time--upper" ref={r => (this.upper = r)} />
+        <div className="custom-time--shortcuts">
+          <div className="custom-time--shortcuts-header">Shortcuts</div>
+          {shortcuts.map(({id, name}) =>
+            <div
+              key={id}
+              className="custom-time--shortcut"
+              onClick={this.handleTimeRangeShortcut(id)}
+            >
+              {name}
+            </div>
+          )}
         </div>
-        <div
-          className="custom-time--apply btn btn-sm btn-primary"
-          onClick={this.handleClick}
-        >
-          Apply
+        <div className="custom-time--wrap">
+          <div className="custom-time--dates">
+            <div className="custom-time--lower" ref={r => (this.lower = r)} />
+            <div className="custom-time--upper" ref={r => (this.upper = r)} />
+          </div>
+          <div
+            className="custom-time--apply btn btn-sm btn-primary"
+            onClick={this.handleClick}
+          >
+            Apply
+          </div>
         </div>
       </div>
     )
@@ -78,10 +95,48 @@ class CustomTimeRange extends Component {
     const upper = this.upperCal.getDate().toISOString()
 
     onApplyTimeRange({lower, upper})
+
     if (onClose) {
       onClose()
     }
   }
+
+  handleTimeRangeShortcut(shortcut) {
+    return () => {
+      let lower
+      const upper = moment()
+
+      switch (shortcut) {
+        case 'pastWeek': {
+          lower = moment().subtract(1, 'week')
+          break
+        }
+        case 'pastMonth': {
+          lower = moment().subtract(1, 'month')
+          break
+        }
+        case 'pastYear': {
+          lower = moment().subtract(1, 'year')
+          break
+        }
+        case 'thisWeek': {
+          lower = moment().startOf('week')
+          break
+        }
+        case 'thisMonth': {
+          lower = moment().startOf('month')
+          break
+        }
+        case 'thisYear': {
+          lower = moment().startOf('year')
+          break
+        }
+      }
+
+      this.lowerCal.setValue(lower)
+      this.upperCal.setValue(upper)
+    }
+  }
 }
 
 const {func, shape, string} = PropTypes

ui/src/shared/components/TimeRangeDropdown.js

@@ -85,10 +85,17 @@ class TimeRangeDropdown extends Component {
   render() {
     const {selected, preventCustomTimeRange} = this.props
     const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state
+    const isRelativeTimeRange = selected.upper === null
 
     return (
       <div className="time-range-dropdown">
-        <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
+        <div
+          className={classnames('dropdown', {
+            'dropdown-160': isRelativeTimeRange,
+            'dropdown-290': !isRelativeTimeRange,
+            open: isOpen,
+          })}
+        >
           <div
             className="btn btn-sm btn-default dropdown-toggle"
             onClick={() => this.toggleMenu()}
@@ -105,20 +112,25 @@ class TimeRangeDropdown extends Component {
               autoHeight={true}
               maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
             >
-              <li className="dropdown-header">Time Range</li>
               {preventCustomTimeRange
                 ? null
-                : <li
-                    className={
-                      isCustomTimeRangeOpen
-                        ? 'active dropdown-item custom-timerange'
-                        : 'dropdown-item custom-timerange'
-                    }
-                  >
-                    <a href="#" onClick={this.showCustomTimeRange}>
-                      Custom Time Range
-                    </a>
-                  </li>}
+                : <div>
+                    <li className="dropdown-header">Absolute Time Ranges</li>
+                    <li
+                      className={
+                        isCustomTimeRangeOpen
+                          ? 'active dropdown-item custom-timerange'
+                          : 'dropdown-item custom-timerange'
+                      }
+                    >
+                      <a href="#" onClick={this.showCustomTimeRange}>
+                        Custom Date Picker
+                      </a>
+                    </li>
+                  </div>}
+              <li className="dropdown-header">
+                {preventCustomTimeRange ? '' : 'Relative '}Time Ranges
+              </li>
               {timeRanges.map(item => {
                 return (
                   <li className="dropdown-item" key={item.menuOption}>

ui/src/shared/data/timeRangeShortcuts.hson

@@ -0,0 +1,26 @@
+[
+  {
+    "id": "pastWeek",
+    "name": "Past Week"
+  },
+  {
+    "id": "pastMonth",
+    "name": "Past Month"
+  },
+  {
+    "id": "pastYear",
+    "name": "Past Year"
+  },
+  {
+    "id": "thisWeek",
+    "name": "This Week"
+  },
+  {
+    "id": "thisMonth",
+    "name": "This Month"
+  },
+  {
+    "id": "thisYear",
+    "name": "This Year"
+  }
+]

ui/src/style/components/custom-time-range.scss

@@ -9,16 +9,25 @@
 .custom-time--container {
   display: none;
   position: absolute;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: stretch;
   top: 35px;
   right: 0;
-  background: $g5-pepper;
   border-radius: $radius;
-  padding: 8px;
   z-index: 1000;
   box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
 }
+.custom-time--wrap,
+.custom-time--moving-dates {
+  display: flex;
+  flex-direction: column;
+}
+.custom-time--wrap {
+  padding: 8px;
+  align-items: center;
+  border-radius: 0 $radius $radius 0;
+  background: $g5-pepper;
+}
 .custom-time--dates {
   display: flex;
   align-items: flex-start;
@@ -30,6 +39,33 @@
 .custom-time--upper {
   margin-left: 4px;
 }
+.custom-time--shortcuts {
+  @include no-user-select();
+  align-items: stretch;
+  background-color: $g6-smoke;
+  border-radius: $radius 0 0 $radius;
+}
+.custom-time--shortcuts-header {
+  white-space: nowrap;
+  padding: 16px;
+  color: $g15-platinum;
+  font-weight: 700;
+}
+.custom-time--shortcut {
+  white-space: nowrap;
+  padding: 6px 16px;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+  color: $g11-sidewalk;
+  font-weight: 500;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $g7-graphite;
+    color: $g17-whisper;
+  }
+}
 
 $custom-time-arrow: 28px;
 $rd-cell-size: 30px;
@@ -222,7 +258,7 @@ $rd-cell-size: 30px;
 
 .custom-time--container .btn.custom-time--apply {
   margin-top: 8px;
-  width: 120px;
+  width: 210px;
 }
 
 /* Open State */