[ML] Add commonly used ranges to date picker (#96501)

elastic · Apr 8, 2021 · 4a54188 · 4a54188
1 parent 767567f
commit 4a54188
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/...c/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.test.tsx b/...c/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.test.tsx
@@ -35,7 +35,20 @@ jest.mock('../../../contexts/kibana', () => ({
   useMlKibana: () => {
     return {
       services: {
-        uiSettings: { get: jest.fn() },
+        uiSettings: {
+          get: jest.fn().mockReturnValue([
+            {
+              from: 'now/d',
+              to: 'now/d',
+              display: 'Today',
+            },
+            {
+              from: 'now/w',
+              to: 'now/w',
+              display: 'This week',
+            },
+          ]),
+        },
         data: {
           query: {
             timefilter: {

diff --git a/...public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.tsx b/...public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.tsx
@@ -5,17 +5,24 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Subscription } from 'rxjs';
 import { debounce } from 'lodash';
 
 import { EuiSuperDatePicker, OnRefreshProps } from '@elastic/eui';
 import { TimeHistoryContract, TimeRange } from 'src/plugins/data/public';
+import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
 
 import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
 import { useUrlState } from '../../../util/url_state';
 import { useMlKibana } from '../../../contexts/kibana';
 
+interface TimePickerQuickRange {
+  from: string;
+  to: string;
+  display: string;
+}
+
 interface Duration {
   start: string;
   end: string;
@@ -71,6 +78,19 @@ export const DatePickerWrapper: FC = () => {
   );
 
   const dateFormat = config.get('dateFormat');
+  const timePickerQuickRanges = config.get<TimePickerQuickRange[]>(
+    UI_SETTINGS.TIMEPICKER_QUICK_RANGES
+  );
+
+  const commonlyUsedRanges = useMemo(
+    () =>
+      timePickerQuickRanges.map(({ from, to, display }) => ({
+        start: from,
+        end: to,
+        label: display,
+      })),
+    [timePickerQuickRanges]
+  );
 
   useEffect(() => {
     const subscriptions = new Subscription();
@@ -141,6 +161,7 @@ export const DatePickerWrapper: FC = () => {
         onRefreshChange={updateInterval}
         recentlyUsedRanges={recentlyUsedRanges}
         dateFormat={dateFormat}
+        commonlyUsedRanges={commonlyUsedRanges}
       />
     </div>
   ) : null;

diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts
@@ -5,8 +5,11 @@
  * 2.0.
  */
 
+import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
+
 export const kibanaContextMock = {
   services: {
+    uiSettings: { get: jest.fn() },
     chrome: { recentlyAccessed: { add: jest.fn() } },
     application: { navigateToApp: jest.fn() },
     http: {
@@ -17,6 +20,7 @@ export const kibanaContextMock = {
     share: {
       urlGenerators: { getUrlGenerator: jest.fn() },
     },
+    data: dataPluginMock.createStartContract(),
   },
 };