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) => { - +