diff --git a/x-pack/legacy/plugins/uptime/common/constants/capabilities.ts b/x-pack/legacy/plugins/uptime/common/constants/capabilities.ts
index 1c9ae5817495..68cc114182af 100644
--- a/x-pack/legacy/plugins/uptime/common/constants/capabilities.ts
+++ b/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';
diff --git a/x-pack/legacy/plugins/uptime/common/constants/index.ts b/x-pack/legacy/plugins/uptime/common/constants/index.ts
index 40ad1ff1d40b..e3c4352f0a48 100644
--- a/x-pack/legacy/plugins/uptime/common/constants/index.ts
+++ b/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';
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/uptime_date_picker.test.tsx.snap
new file mode 100644
index 000000000000..8a49cac07692
--- /dev/null
+++ b/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`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`UptimeDatePicker component renders properly without commonlyUsedRanges prop 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`UptimeDatePicker component validates props with shallow render 1`] = `
+
+`;
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/uptime_date_picker.test.tsx
new file mode 100644
index 000000000000..93fa0b505a89
--- /dev/null
+++ b/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(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ it('renders properly with mock data', () => {
+ const component = renderWithIntl(
+
+ );
+ expect(component).toMatchSnapshot();
+ });
+
+ it('renders properly without commonlyUsedRanges prop', () => {
+ const component = renderWithIntl();
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/uptime_date_picker.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/uptime_date_picker.tsx
index 78e69a68afbd..ebd0cd1e4ae8 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/uptime_date_picker.tsx
+++ b/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 (
{
diff --git a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx
index 94bfe79a6ca6..b7ff3b2aa626 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx
+++ b/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,
diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
index 47743729c1e7..456aff1f9a24 100644
--- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
+++ b/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) => {
-
+