[EuiSuperDatePicker] add showRefreshOnly prop

src-docs/src/views/date_picker/super_date_picker.js

@@ -15,6 +15,7 @@ export default class extends Component {
     recentlyUsedRanges: [],
     isLoading: false,
     showUpdateButton: true,
+    showRefreshOnly: false,
     start: 'now-30m',
     end: 'now',
   }
@@ -60,6 +61,39 @@ export default class extends Component {
     }));
   }
 
+  toggleShowRefreshOnly = () => {
+    this.setState(prevState => ({
+      showRefreshOnly: !prevState.showRefreshOnly,
+    }));
+  }
+
+  renderTimeRange = () => {
+    if (this.state.showRefreshOnly) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiFormRow
+          label="start"
+        >
+          <EuiFieldText
+            readOnly
+            value={this.state.start}
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label="end"
+        >
+          <EuiFieldText
+            readOnly
+            value={this.state.end}
+          />
+        </EuiFormRow>
+      </Fragment>
+    );
+  }
+
   render() {
     return (
       <Fragment>
@@ -68,6 +102,11 @@ export default class extends Component {
           onChange={this.toggleShowApplyButton}
           checked={this.state.showUpdateButton}
         />
+        <EuiSwitch
+          label="Show refresh only"
+          onChange={this.toggleShowRefreshOnly}
+          checked={this.state.showRefreshOnly}
+        />
         <EuiSpacer />
 
         <EuiSuperDatePicker
@@ -80,24 +119,12 @@ export default class extends Component {
           onRefreshChange={this.onRefreshChange}
           recentlyUsedRanges={this.state.recentlyUsedRanges}
           showUpdateButton={this.state.showUpdateButton}
+          showRefreshOnly={this.state.showRefreshOnly}
         />
 
-        <EuiFormRow
-          label="start"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.start}
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          label="end"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.end}
-          />
-        </EuiFormRow>
+        <EuiSpacer />
+
+        {this.renderTimeRange()}
       </Fragment>
     );
   }

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -75,6 +75,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
+          showRefreshOnly={false}
           start="now-15m"
         />
       }
@@ -207,6 +208,7 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
+          showRefreshOnly={false}
           start="now-15m"
         />
       }

src/components/date_picker/super_date_picker/pretty_interval.js

@@ -0,0 +1,27 @@
+
+const MS_IN_SECOND = 1000;
+const MS_IN_MINUTE = 60 * MS_IN_SECOND;
+const MS_IN_HOUR = 60 * MS_IN_MINUTE;
+const MS_IN_DAY = 24 * MS_IN_HOUR;
+
+export function prettyInterval(isPaused, intervalInMs) {
+  if (isPaused || intervalInMs === 0) {
+    return 'Off';
+  } else if (intervalInMs < MS_IN_MINUTE) {
+    const intervalInSeconds = Math.round(intervalInMs / MS_IN_SECOND);
+    const units = intervalInSeconds > 1 ? 'seconds' : 'second';
+    return `${intervalInSeconds} ${units}`;
+  } else if (intervalInMs < MS_IN_HOUR) {
+    const intervalInMinutes = Math.round(intervalInMs / MS_IN_MINUTE);
+    const units = intervalInMinutes > 1 ? 'minutes' : 'minute';
+    return `${intervalInMinutes} ${units}`;
+  } else if (intervalInMs < MS_IN_DAY) {
+    const intervalInHours = Math.round(intervalInMs / MS_IN_HOUR);
+    const units = intervalInHours > 1 ? 'hours' : 'hour';
+    return `${intervalInHours} ${units}`;
+  }
+
+  const intervalInDays = Math.round(intervalInMs / MS_IN_DAY);
+  const units = intervalInDays > 1 ? 'days' : 'day';
+  return `${intervalInDays} ${units}`;
+}

src/components/date_picker/super_date_picker/pretty_interval.test.js

@@ -0,0 +1,30 @@
+
+import { prettyInterval } from './pretty_interval';
+
+const IS_NOT_PAUSED = false;
+const IS_PAUSED = true;
+
+test('Off', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 0)).toBe('Off');
+  expect(prettyInterval(IS_PAUSED, 1000)).toBe('Off');
+});
+
+test('seconds', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 1000)).toBe('1 second');
+  expect(prettyInterval(IS_NOT_PAUSED, 15000)).toBe('15 seconds');
+});
+
+test('minutes', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 60000)).toBe('1 minute');
+  expect(prettyInterval(IS_NOT_PAUSED, 1800000)).toBe('30 minutes');
+});
+
+test('hours', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 3600000)).toBe('1 hour');
+  expect(prettyInterval(IS_NOT_PAUSED, 43200000)).toBe('12 hours');
+});
+
+test('days', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 86400000)).toBe('1 day');
+  expect(prettyInterval(IS_NOT_PAUSED, 86400000 * 2)).toBe('2 days');
+});

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiSuperDatePicker is rendered 1`] = `
+exports[`EuiQuickSelect is rendered 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"
@@ -212,7 +212,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
 </React.Fragment>
 `;
 
-exports[`EuiSuperDatePicker prevQuickSelect 1`] = `
+exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiQuickSelectPopover is rendered 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      aria-label="Date quick select"
+      className="euiFormControlLayout__prepend"
+      color="primary"
+      data-test-subj="superDatePickerToggleQuickMenuButton"
+      iconSide="right"
+      iconType="arrowDown"
+      onClick={[Function]}
+      size="xs"
+      textProps={
+        Object {
+          "className": "euiQuickSelectPopover__buttonText",
+        }
+      }
+      type="button"
+    >
+      <EuiIcon
+        size="m"
+        type="calendar"
+      />
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  hasArrow={true}
+  id="QuickSelectPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="m"
+>
+  <div
+    className="euiQuickSelectPopover__content"
+    data-test-subj="superDatePickerQuickMenu"
+  >
+    <React.Fragment>
+      <EuiQuickSelect
+        applyTime={[Function]}
+        end="now"
+        prevQuickSelect={Object {}}
+        start="now-15m"
+      />
+      <EuiCommonlyUsedTimeRanges
+        applyTime={[Function]}
+        commonlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+      />
+      <EuiRecentlyUsed
+        applyTime={[Function]}
+        commonlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+        dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+        recentlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+      />
+    </React.Fragment>
+    <EuiRefreshInterval
+      applyRefreshInterval={[Function]}
+      isPaused={true}
+      refreshInterval={0}
+    />
+  </div>
+</EuiPopover>
+`;
+
+exports[`EuiQuickSelectPopover showRefreshOnly 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      aria-label="Date quick select"
+      className="euiFormControlLayout__prepend"
+      color="primary"
+      data-test-subj="superDatePickerToggleQuickMenuButton"
+      iconSide="right"
+      iconType="arrowDown"
+      onClick={[Function]}
+      size="xs"
+      textProps={
+        Object {
+          "className": "euiQuickSelectPopover__buttonText",
+        }
+      }
+      type="button"
+    >
+      <EuiIcon
+        size="m"
+        type="calendar"
+      />
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  hasArrow={true}
+  id="QuickSelectPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="m"
+>
+  <div
+    className="euiQuickSelectPopover__content"
+    data-test-subj="superDatePickerQuickMenu"
+  >
+    <EuiRefreshInterval
+      applyRefreshInterval={[Function]}
+      isPaused={true}
+      refreshInterval={0}
+    />
+  </div>
+</EuiPopover>
+`;

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js

@@ -11,7 +11,7 @@ const defaultProps = {
   start: 'now-15m',
   end: 'now',
 };
-describe('EuiSuperDatePicker', () => {
+describe('EuiQuickSelect', () => {
   test('is rendered', () => {
     const component = shallow(
       <EuiQuickSelect

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -1,6 +1,6 @@
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { commonlyUsedRangeShape, recentlyUsedRangeShape } from '../types';
 
 import {
@@ -49,6 +49,33 @@ export class EuiQuickSelectPopover extends Component {
     }
   }
 
+  renderDateTimeSections = () => {
+    if (this.props.showRefreshOnly) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiQuickSelect
+          applyTime={this.applyTime}
+          start={this.props.start}
+          end={this.props.end}
+          prevQuickSelect={this.state.prevQuickSelect}
+        />
+        <EuiCommonlyUsedTimeRanges
+          applyTime={this.applyTime}
+          commonlyUsedRanges={this.props.commonlyUsedRanges}
+        />
+        <EuiRecentlyUsed
+          applyTime={this.applyTime}
+          commonlyUsedRanges={this.props.commonlyUsedRanges}
+          dateFormat={this.props.dateFormat}
+          recentlyUsedRanges={this.props.recentlyUsedRanges}
+        />
+      </Fragment>
+    );
+  }
+
   render() {
     const quickSelectButton = (
       <EuiButtonEmpty
@@ -78,22 +105,7 @@ export class EuiQuickSelectPopover extends Component {
           className="euiQuickSelectPopover__content"
           data-test-subj="superDatePickerQuickMenu"
         >
-          <EuiQuickSelect
-            applyTime={this.applyTime}
-            start={this.props.start}
-            end={this.props.end}
-            prevQuickSelect={this.state.prevQuickSelect}
-          />
-          <EuiCommonlyUsedTimeRanges
-            applyTime={this.applyTime}
-            commonlyUsedRanges={this.props.commonlyUsedRanges}
-          />
-          <EuiRecentlyUsed
-            applyTime={this.applyTime}
-            commonlyUsedRanges={this.props.commonlyUsedRanges}
-            dateFormat={this.props.dateFormat}
-            recentlyUsedRanges={this.props.recentlyUsedRanges}
-          />
+          {this.renderDateTimeSections()}
           <EuiRefreshInterval
             applyRefreshInterval={this.props.applyRefreshInterval}
             isPaused={this.props.isPaused}
@@ -115,4 +127,5 @@ EuiQuickSelectPopover.propTypes = {
   commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
   dateFormat: PropTypes.string.isRequired,
   recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
+  showRefreshOnly: PropTypes.bool.isRequired,
 };