Merge pull request #1785 from influxdata/fix/invalid_date-1764

Fix Custom Time Range and Preset options in Data Explorer; remove CTR option from Rule Builder

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 CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown'
+import TimeRangeDropdown from 'shared/components/TimeRangeDropdown'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import GraphTips from 'shared/components/GraphTips'
 
@@ -58,9 +58,9 @@ const Header = React.createClass({
               selected={autoRefresh}
               iconName="refresh"
             />
-            <CustomTimeRangeDropdown
-              onApplyTimeRange={this.handleChooseTimeRange}
-              timeRange={timeRange}
+            <TimeRangeDropdown
+              onChooseTimeRange={this.handleChooseTimeRange}
+              selected={timeRange}
             />
           </div>
         </div>

ui/src/kapacitor/components/RuleHeader.js

@@ -83,6 +83,7 @@ export const RuleHeader = React.createClass({
         <TimeRangeDropdown
           onChooseTimeRange={onChooseTimeRange}
           selected={timeRange}
+          preventCustomTimeRange={true}
         />
         {saveButton}
         <ReactTooltip

ui/src/shared/components/TimeRangeDropdown.js

@@ -11,16 +11,27 @@ import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'
 
 class TimeRangeDropdown extends Component {
   constructor(props) {
+    const {lower, upper} = props.selected
+
     super(props)
+
     this.state = {
       autobind: false,
       isOpen: false,
       isCustomTimeRangeOpen: false,
-      customTimeRange: {
-        lower: '',
-        upper: '',
-      },
+      customTimeRange:
+        moment(props.selected.upper).isValid() &&
+        moment(props.selected.lower).isValid()
+          ? {
+              lower,
+              upper,
+            }
+          : {
+              lower: '',
+              upper: '',
+            },
     }
+
     this.findTimeRangeInputValue = ::this.findTimeRangeInputValue
     this.handleSelection = ::this.handleSelection
     this.toggleMenu = ::this.toggleMenu
@@ -72,7 +83,7 @@ class TimeRangeDropdown extends Component {
   }
 
   render() {
-    const {selected} = this.props
+    const {selected, preventCustomTimeRange} = this.props
     const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state
 
     return (
@@ -95,17 +106,19 @@ class TimeRangeDropdown extends Component {
               maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
             >
               <li className="dropdown-header">Time Range</li>
-              <li
-                className={
-                  isCustomTimeRangeOpen
-                    ? 'active dropdown-item custom-timerange'
-                    : 'dropdown-item custom-timerange'
-                }
-              >
-                <a href="#" onClick={this.showCustomTimeRange}>
-                  Custom Time Range
-                </a>
-              </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>}
               {timeRanges.map(item => {
                 return (
                   <li className="dropdown-item" key={item.menuOption}>
@@ -132,7 +145,7 @@ class TimeRangeDropdown extends Component {
   }
 }
 
-const {shape, string, func} = PropTypes
+const {bool, func, shape, string} = PropTypes
 
 TimeRangeDropdown.propTypes = {
   selected: shape({
@@ -140,6 +153,7 @@ TimeRangeDropdown.propTypes = {
     upper: string,
   }).isRequired,
   onChooseTimeRange: func.isRequired,
+  preventCustomTimeRange: bool,
 }
 
 export default OnClickOutside(TimeRangeDropdown)

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

@@ -58,9 +58,7 @@ $rd-cell-size: 30px;
   background-color: transparent;
   border-radius: 50%;
   color: $g15-platinum;
-  transition:
-    background-color 0.25s ease,
-    color 0.25s ease;
+  transition: background-color 0.25s ease, color 0.25s ease;
 
   &:after {
     font-family: 'icomoon' !important;
@@ -70,7 +68,7 @@ $rd-cell-size: 30px;
     color: inherit;
     position: absolute;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     font-size: 16px;
   }
   &:hover {
@@ -132,9 +130,7 @@ $rd-cell-size: 30px;
     @include no-user-select();
     letter-spacing: -1px;
     font-family: $code-font;
-    transition:
-      background-color 0.25s ease,
-      color 0.25s ease;
+    transition: background-color 0.25s ease, color 0.25s ease;
     color: $g13-mist !important;
     background-color: $g3-castle;
     border-radius: 5px;
@@ -157,7 +153,6 @@ $rd-cell-size: 30px;
   }
 }
 
-
 .rd-time {
   margin: 0 2px;
   width: calc(100% - 4px);
@@ -178,9 +173,7 @@ $rd-cell-size: 30px;
   font-family: $code-font;
   color: $g13-mist;
   display: inline-block;
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease;
+  transition: color 0.25s ease, background-color 0.25s ease;
   text-align: center;
 
   &:hover {
@@ -196,7 +189,7 @@ $rd-cell-size: 30px;
   left: 50%;
   width: 120px;
   height: 200px;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   overflow: auto;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -232,7 +225,6 @@ $rd-cell-size: 30px;
   width: 120px;
 }
 
-
 /* Open State */
 .custom-time-range.open {
   .custom-time--container {
@@ -251,7 +243,9 @@ $rd-cell-size: 30px;
   position: absolute;
   top: 0;
   right: calc(100% + 4px);
-  z-index: 2;
+  z-index: 4;
 
-  .custom-time--container {display: flex;}
+  .custom-time--container {
+    display: flex;
+  }
 }