[Metrics UI] Setup commonly used time ranges in timepicker

Author: simianhacker

x-pack/legacy/plugins/infra/public/components/metrics_explorer/toolbar.tsx

@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperDatePicker,
+  EuiText,
+  EuiSuperDatePickerCommonRange,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { IIndexPattern } from 'src/plugins/data/public';
@@ -26,6 +32,7 @@ import { MetricsExplorerChartOptions as MetricsExplorerChartOptionsComponent } f
 import { SavedViewsToolbarControls } from '../saved_views/toolbar_control';
 import { MetricExplorerViewState } from '../../pages/infrastructure/metrics_explorer/use_metric_explorer_state';
 import { metricsExplorerViewSavedObjectType } from '../../../common/saved_objects/metrics_explorer_view';
+import { useKibanaUiSetting } from '../../utils/use_kibana_ui_setting';
 
 interface Props {
   derivedIndexPattern: IIndexPattern;
@@ -43,6 +50,12 @@ interface Props {
   onViewStateChange: (vs: MetricExplorerViewState) => void;
 }
 
+interface QueryRange {
+  from: string;
+  to: string;
+  display: string;
+}
+
 export const MetricsExplorerToolbar = ({
   timeRange,
   derivedIndexPattern,
@@ -59,6 +72,14 @@ export const MetricsExplorerToolbar = ({
   onViewStateChange,
 }: Props) => {
   const isDefaultOptions = options.aggregation === 'avg' && options.metrics.length === 0;
+  const [timepickerQuickRanges] = useKibanaUiSetting('timepicker:quickRanges');
+  const commonlyUsedRanges: EuiSuperDatePickerCommonRange[] = timepickerQuickRanges
+    ? timepickerQuickRanges.map((r: QueryRange) => ({
+        start: r.from,
+        end: r.to,
+        label: r.display,
+      }))
+    : [];
   return (
     <Toolbar>
       <EuiFlexGroup alignItems="center">
@@ -134,6 +155,7 @@ export const MetricsExplorerToolbar = ({
             end={timeRange.to}
             onTimeChange={({ start, end }) => onTimeChange(start, end)}
             onRefresh={onRefresh}
+            commonlyUsedRanges={commonlyUsedRanges}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.tsx

@@ -4,10 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSuperDatePicker, OnRefreshChangeProps, OnTimeChangeProps } from '@elastic/eui';
-import React from 'react';
+import {
+  EuiSuperDatePicker,
+  OnRefreshChangeProps,
+  OnTimeChangeProps,
+  EuiSuperDatePickerCommonRange,
+} from '@elastic/eui';
+import React, { useCallback } from 'react';
 import euiStyled from '../../../../../../common/eui_styled_components';
 import { MetricsTimeInput } from '../containers/with_metrics_time';
+import { useKibanaUiSetting } from '../../../utils/use_kibana_ui_setting';
 
 interface MetricsTimeControlsProps {
   currentTimeRange: MetricsTimeInput;
@@ -19,42 +25,71 @@ interface MetricsTimeControlsProps {
   onRefresh: () => void;
 }
 
-export class MetricsTimeControls extends React.Component<MetricsTimeControlsProps> {
-  public render() {
-    const { currentTimeRange, isLiveStreaming, refreshInterval } = this.props;
-    return (
-      <MetricsTimeControlsContainer>
-        <EuiSuperDatePicker
-          start={currentTimeRange.from}
-          end={currentTimeRange.to}
-          isPaused={!isLiveStreaming}
-          refreshInterval={refreshInterval ? refreshInterval : 0}
-          onTimeChange={this.handleTimeChange}
-          onRefreshChange={this.handleRefreshChange}
-          onRefresh={this.props.onRefresh}
-        />
-      </MetricsTimeControlsContainer>
-    );
-  }
-
-  private handleTimeChange = ({ start, end }: OnTimeChangeProps) => {
-    this.props.onChangeTimeRange({
-      from: start,
-      to: end,
-      interval: '>=1m',
-    });
-  };
-
-  private handleRefreshChange = ({ isPaused, refreshInterval }: OnRefreshChangeProps) => {
-    if (isPaused) {
-      this.props.setAutoReload(false);
-    } else {
-      this.props.setRefreshInterval(refreshInterval);
-      this.props.setAutoReload(true);
-    }
-  };
+interface QueryRange {
+  from: string;
+  to: string;
+  display: string;
 }
 
+export const MetricsTimeControls = (props: MetricsTimeControlsProps) => {
+  const [timepickerQuickRanges] = useKibanaUiSetting('timepicker:quickRanges');
+  const {
+    onChangeTimeRange,
+    onRefresh,
+    currentTimeRange,
+    isLiveStreaming,
+    refreshInterval,
+    setAutoReload,
+    setRefreshInterval,
+  } = props;
+
+  const commonlyUsedRanges: EuiSuperDatePickerCommonRange[] = timepickerQuickRanges
+    ? timepickerQuickRanges.map((r: QueryRange) => ({
+        start: r.from,
+        end: r.to,
+        label: r.display,
+      }))
+    : [];
+
+  const handleTimeChange = useCallback(
+    ({ start, end }: OnTimeChangeProps) => {
+      onChangeTimeRange({
+        from: start,
+        to: end,
+        interval: '>=1m',
+      });
+    },
+    [onChangeTimeRange]
+  );
+
+  const handleRefreshChange = useCallback(
+    ({ isPaused, refreshInterval: _refreshInterval }: OnRefreshChangeProps) => {
+      if (isPaused) {
+        setAutoReload(false);
+      } else {
+        setRefreshInterval(_refreshInterval);
+        setAutoReload(true);
+      }
+    },
+    [setAutoReload, setRefreshInterval]
+  );
+
+  return (
+    <MetricsTimeControlsContainer>
+      <EuiSuperDatePicker
+        start={currentTimeRange.from}
+        end={currentTimeRange.to}
+        isPaused={!isLiveStreaming}
+        refreshInterval={refreshInterval ? refreshInterval : 0}
+        onTimeChange={handleTimeChange}
+        onRefreshChange={handleRefreshChange}
+        onRefresh={onRefresh}
+        commonlyUsedRanges={commonlyUsedRanges}
+      />
+    </MetricsTimeControlsContainer>
+  );
+};
+
 const MetricsTimeControlsContainer = euiStyled.div`
   max-width: 750px;
 `;