[Uptime] Uptime date picker will use commonly used ranges from advance settings (#52944)

* Uptime date picker will use common ranges from advance settings

* removed duplicate constant

x-pack/legacy/plugins/uptime/common/constants/capabilities.ts

@@ -5,3 +5,6 @@
  */
 
 export const INTEGRATED_SOLUTIONS = ['apm', 'infrastructure', 'logs'];
+
+export const DEFAULT_TIMEPICKER_QUICK_RANGES = 'timepicker:quickRanges';
+export const DEFAULT_DARK_MODE = 'theme:darkMode';

x-pack/legacy/plugins/uptime/common/constants/index.ts

@@ -8,6 +8,6 @@ export { CHART_FORMAT_LIMITS } from './chart_format_limits';
 export { CLIENT_DEFAULTS } from './client_defaults';
 export { CONTEXT_DEFAULTS } from './context_defaults';
 export { INDEX_NAMES } from './index_names';
-export { INTEGRATED_SOLUTIONS } from './capabilities';
+export * from './capabilities';
 export { PLUGIN } from './plugin';
 export { QUERY, STATES } from './query';

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap

@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UptimeDatePicker component renders properly with mock data 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+>
+  <div
+    class="euiFlexItem"
+  >
+    <div
+      class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="QuickSelectPopover"
+      >
+        <div
+          class="euiPopover__anchor euiQuickSelectPopover__anchor"
+        >
+          <button
+            aria-label="Date quick select"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+            data-test-subj="superDatePickerToggleQuickMenuButton"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonEmpty__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              >
+                <svg
+                  class="euiIcon euiIcon--medium euiIcon-isLoading"
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="euiFormControlLayout__childrenWrapper"
+      >
+        <div
+          class="euiDatePickerRange euiDatePickerRange--inGroup"
+        >
+          <button
+            class="euiSuperDatePicker__prettyFormat"
+            data-test-subj="superDatePickerShowDatesButton"
+          >
+            Last 15 minutes
+            <span
+              class="euiSuperDatePicker__prettyFormatLink"
+            >
+              Show dates
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      class="euiToolTipAnchor"
+    >
+      <button
+        class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
+        data-test-subj="superDatePickerApplyTimeButton"
+        type="button"
+      >
+        <span
+          class="euiButton__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiButton__text euiSuperUpdateButton__text"
+          >
+            Refresh
+          </span>
+        </span>
+      </button>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UptimeDatePicker component renders properly without commonlyUsedRanges prop 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+>
+  <div
+    class="euiFlexItem"
+  >
+    <div
+      class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="QuickSelectPopover"
+      >
+        <div
+          class="euiPopover__anchor euiQuickSelectPopover__anchor"
+        >
+          <button
+            aria-label="Date quick select"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+            data-test-subj="superDatePickerToggleQuickMenuButton"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonEmpty__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              >
+                <svg
+                  class="euiIcon euiIcon--medium euiIcon-isLoading"
+                  focusable="false"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="euiFormControlLayout__childrenWrapper"
+      >
+        <div
+          class="euiDatePickerRange euiDatePickerRange--inGroup"
+        >
+          <button
+            class="euiSuperDatePicker__prettyFormat"
+            data-test-subj="superDatePickerShowDatesButton"
+          >
+            Last 15 minutes
+            <span
+              class="euiSuperDatePicker__prettyFormatLink"
+            >
+              Show dates
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      class="euiToolTipAnchor"
+    >
+      <button
+        class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
+        data-test-subj="superDatePickerApplyTimeButton"
+        type="button"
+      >
+        <span
+          class="euiButton__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            class="euiButton__text euiSuperUpdateButton__text"
+          >
+            Refresh
+          </span>
+        </span>
+      </button>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UptimeDatePicker component validates props with shallow render 1`] = `
+<EuiSuperDatePicker
+  commonlyUsedRanges={
+    Array [
+      Object {
+        "end": "now/d",
+        "label": "Today",
+        "start": "now/d",
+      },
+      Object {
+        "end": "now/w",
+        "label": "This week",
+        "start": "now/w",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 15 minutes",
+        "start": "now-15m",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 30 minutes",
+        "start": "now-30m",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 1 hour",
+        "start": "now-1h",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 24 hours",
+        "start": "now-24h",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 7 days",
+        "start": "now-7d",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 30 days",
+        "start": "now-30d",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 90 days",
+        "start": "now-90d",
+      },
+      Object {
+        "end": "now",
+        "label": "Last 2 year",
+        "start": "now-1y",
+      },
+    ]
+  }
+  dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+  end="now"
+  isAutoRefreshOnly={false}
+  isDisabled={false}
+  isPaused={false}
+  onRefresh={[MockFunction]}
+  onRefreshChange={[Function]}
+  onTimeChange={[Function]}
+  recentlyUsedRanges={Array []}
+  refreshInterval={60000}
+  showUpdateButton={true}
+  start="now-15m"
+  timeFormat="HH:mm"
+/>
+`;

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallowWithIntl, renderWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { UptimeDatePicker, CommonlyUsedRange } from '../uptime_date_picker';
+
+describe('UptimeDatePicker component', () => {
+  let commonlyUsedRange: CommonlyUsedRange[];
+
+  beforeEach(() => {
+    commonlyUsedRange = [
+      { from: 'now/d', to: 'now/d', display: 'Today' },
+      { from: 'now/w', to: 'now/w', display: 'This week' },
+      { from: 'now-15m', to: 'now', display: 'Last 15 minutes' },
+      { from: 'now-30m', to: 'now', display: 'Last 30 minutes' },
+      { from: 'now-1h', to: 'now', display: 'Last 1 hour' },
+      { from: 'now-24h', to: 'now', display: 'Last 24 hours' },
+      { from: 'now-7d', to: 'now', display: 'Last 7 days' },
+      { from: 'now-30d', to: 'now', display: 'Last 30 days' },
+      { from: 'now-90d', to: 'now', display: 'Last 90 days' },
+      { from: 'now-1y', to: 'now', display: 'Last 2 year' },
+    ];
+  });
+
+  it('validates props with shallow render', () => {
+    const component = shallowWithIntl(
+      <UptimeDatePicker commonlyUsedRanges={commonlyUsedRange} refreshApp={jest.fn()} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders properly with mock data', () => {
+    const component = renderWithIntl(
+      <UptimeDatePicker commonlyUsedRanges={commonlyUsedRange} refreshApp={jest.fn()} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders properly without commonlyUsedRanges prop', () => {
+    const component = renderWithIntl(<UptimeDatePicker refreshApp={jest.fn()} />);
+    expect(component).toMatchSnapshot();
+  });
+});

x-pack/legacy/plugins/uptime/public/components/functional/uptime_date_picker.tsx

@@ -20,21 +20,40 @@ interface SuperDateRangePickerRefreshChangedEvent {
   refreshInterval?: number;
 }
 
+export interface CommonlyUsedRange {
+  from: string;
+  to: string;
+  display: string;
+}
+
 interface Props {
   refreshApp: () => void;
+  commonlyUsedRanges?: CommonlyUsedRange[];
 }
 
 type UptimeDatePickerProps = Props;
 
-export const UptimeDatePicker = (props: UptimeDatePickerProps) => {
-  const { refreshApp } = props;
+export const UptimeDatePicker = ({ refreshApp, commonlyUsedRanges }: UptimeDatePickerProps) => {
   const [getUrlParams, updateUrl] = useUrlParams();
   const { autorefreshInterval, autorefreshIsPaused, dateRangeStart, dateRangeEnd } = getUrlParams();
+
+  const euiCommonlyUsedRanges = commonlyUsedRanges
+    ? commonlyUsedRanges.map(
+        ({ from, to, display }: { from: string; to: string; display: string }) => {
+          return {
+            start: from,
+            end: to,
+            label: display,
+          };
+        }
+      )
+    : CLIENT_DEFAULTS.COMMONLY_USED_DATE_RANGES;
+
   return (
     <EuiSuperDatePicker
       start={dateRangeStart}
       end={dateRangeEnd}
-      commonlyUsedRanges={CLIENT_DEFAULTS.COMMONLY_USED_DATE_RANGES}
+      commonlyUsedRanges={euiCommonlyUsedRanges}
       isPaused={autorefreshIsPaused}
       refreshInterval={autorefreshInterval}
       onTimeChange={({ start, end }: SuperDateRangePickerRangeChangedEvent) => {

x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx

@@ -13,7 +13,12 @@ import { i18n as i18nFormatter } from '@kbn/i18n';
 import { CreateGraphQLClient } from './framework_adapter_types';
 import { UptimeApp, UptimeAppProps } from '../../../uptime_app';
 import { getIntegratedAppAvailability } from './capabilities_adapter';
-import { INTEGRATED_SOLUTIONS, PLUGIN } from '../../../../common/constants';
+import {
+  INTEGRATED_SOLUTIONS,
+  PLUGIN,
+  DEFAULT_DARK_MODE,
+  DEFAULT_TIMEPICKER_QUICK_RANGES,
+} from '../../../../common/constants';
 import { getTelemetryMonitorPageLogger, getTelemetryOverviewPageLogger } from '../telemetry';
 import { UMFrameworkAdapter, BootstrapUptimeApp } from '../../lib';
 import { createApolloClient } from './apollo_client_adapter';
@@ -43,7 +48,8 @@ export const getKibanaFrameworkAdapter = (
     basePath: basePath.get(),
     canSave,
     client: createApolloClient(`${basePath.get()}/api/uptime/graphql`, 'true'),
-    darkMode: core.uiSettings.get('theme:darkMode'),
+    darkMode: core.uiSettings.get(DEFAULT_DARK_MODE),
+    commonlyUsedRanges: core.uiSettings.get(DEFAULT_TIMEPICKER_QUICK_RANGES),
     i18n,
     isApmAvailable: apm,
     isInfraAvailable: infrastructure,

x-pack/legacy/plugins/uptime/public/uptime_app.tsx

@@ -18,7 +18,7 @@ import { AutocompleteProviderRegister } from 'src/plugins/data/public';
 import { UMGraphQLClient, UMUpdateBreadcrumbs, UMUpdateBadge } from './lib/lib';
 import { MonitorPage, OverviewPage, NotFoundPage } from './pages';
 import { UptimeRefreshContext, UptimeSettingsContext, UMSettingsContextValues } from './contexts';
-import { UptimeDatePicker } from './components/functional/uptime_date_picker';
+import { UptimeDatePicker, CommonlyUsedRange } from './components/functional/uptime_date_picker';
 import { useUrlParams } from './hooks';
 import { getTitle } from './lib/helper/get_title';
 import { store } from './state';
@@ -50,6 +50,7 @@ export interface UptimeAppProps {
   setBreadcrumbs: UMUpdateBreadcrumbs;
   setBadge: UMUpdateBadge;
   renderGlobalHelpControls(): void;
+  commonlyUsedRanges: CommonlyUsedRange[];
 }
 
 const Application = (props: UptimeAppProps) => {
@@ -59,6 +60,7 @@ const Application = (props: UptimeAppProps) => {
     canSave,
     client,
     darkMode,
+    commonlyUsedRanges,
     i18n: i18nCore,
     isApmAvailable,
     isInfraAvailable,
@@ -175,7 +177,11 @@ const Application = (props: UptimeAppProps) => {
                               </EuiTitle>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
-                              <UptimeDatePicker refreshApp={refreshApp} {...rootRouteProps} />
+                              <UptimeDatePicker
+                                refreshApp={refreshApp}
+                                commonlyUsedRanges={commonlyUsedRanges}
+                                {...rootRouteProps}
+                              />
                             </EuiFlexItem>
                           </EuiFlexGroup>
                           <EuiSpacer size="s" />