Add moving time range to Custom Time Range component.

ui/src/shared/components/CustomTimeRange.js

@@ -8,6 +8,7 @@ class CustomTimeRange extends Component {
 
     this.handleClick = ::this.handleClick
     this._formatTimeRange = ::this._formatTimeRange
+    this.handleMovingTimeRange = ::this.handleMovingTimeRange
   }
 
   componentDidMount() {
@@ -39,15 +40,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--moving-dates">
+          <div onClick={this.handleMovingTimeRange('pastWeek')}>Past week</div>
+          <div onClick={this.handleMovingTimeRange('pastMonth')}>
+            Past month
+          </div>
+          <div onClick={this.handleMovingTimeRange('pastYear')}>Past year</div>
+          <div onClick={this.handleMovingTimeRange('thisWeek')}>This week</div>
+          <div onClick={this.handleMovingTimeRange('thisMonth')}>
+            This month
+          </div>
+          <div onClick={this.handleMovingTimeRange('thisYear')}>This year</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>
     )
@@ -82,6 +97,41 @@ class CustomTimeRange extends Component {
       onClose()
     }
   }
+
+  handleMovingTimeRange(movingTimeRange) {
+    return () => {
+      let lower
+
+      switch (movingTimeRange) {
+        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)
+    }
+  }
 }
 
 const {func, shape, string} = PropTypes

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

@@ -7,9 +7,9 @@
   position: relative;
 }
 .custom-time--container {
-  display: none;
+  display: flex;
   position: absolute;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   top: 35px;
   right: 0;
@@ -19,6 +19,10 @@
   z-index: 1000;
   box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
 }
+.custom-time--wrap {
+  display: flex;
+  flex-direction: column;
+}
 .custom-time--dates {
   display: flex;
   align-items: flex-start;
@@ -30,6 +34,13 @@
 .custom-time--upper {
   margin-left: 4px;
 }
+.custom-time--moving-dates {
+  flex: 1;
+  width: 80px;
+  > div {
+    cursor: pointer;
+  }
+}
 
 $custom-time-arrow: 28px;
 $rd-cell-size: 30px;
@@ -229,7 +240,7 @@ $rd-cell-size: 30px;
 
 .custom-time--container .btn.custom-time--apply {
   margin-top: 8px;
-  width: 120px;
+  width: 210px;
 }