From 5042ef35442bb4293a65b4eca6334ed2c53a6944 Mon Sep 17 00:00:00 2001 From: Kerry Gallagher Date: Tue, 18 Jan 2022 12:28:53 +0000 Subject: [PATCH] [Stack Monitoring] Fix date picker range options (#121295) (#123123) * Pass commonly used ranges to EuiSuperDatePicker * Tidy up start contract types (cherry picked from commit dcd6da7de662db1224eebb134022a263ce9a7d91) # Conflicts: # x-pack/plugins/monitoring/public/plugin.ts --- .../public/alerts/alerts_dropdown.tsx | 5 ++-- .../contexts/global_state_context.tsx | 4 +-- .../public/components/shared/toolbar.tsx | 29 +++++++++++++++++-- .../plugins/monitoring/public/legacy_shims.ts | 7 +++-- x-pack/plugins/monitoring/public/plugin.ts | 8 +++-- x-pack/plugins/monitoring/public/types.ts | 13 +++++++-- x-pack/plugins/monitoring/public/url_state.ts | 4 +-- 7 files changed, 54 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/monitoring/public/alerts/alerts_dropdown.tsx b/x-pack/plugins/monitoring/public/alerts/alerts_dropdown.tsx index 976569f39de4c7..60eaa7c7213dda 100644 --- a/x-pack/plugins/monitoring/public/alerts/alerts_dropdown.tsx +++ b/x-pack/plugins/monitoring/public/alerts/alerts_dropdown.tsx @@ -15,13 +15,12 @@ import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { useKibana } from '../../../../../src/plugins/kibana_react/public'; -import { MonitoringStartPluginDependencies } from '../types'; +import { MonitoringStartServices } from '../types'; import { useAlertsModal } from '../application/hooks/use_alerts_modal'; export const AlertsDropdown: React.FC<{}> = () => { const alertsEnableModalProvider = useAlertsModal(); - const { navigateToApp } = - useKibana().services.application; + const { navigateToApp } = useKibana().services.application; const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/x-pack/plugins/monitoring/public/application/contexts/global_state_context.tsx b/x-pack/plugins/monitoring/public/application/contexts/global_state_context.tsx index cc8619dbc7ad2a..3dbb703b5706f7 100644 --- a/x-pack/plugins/monitoring/public/application/contexts/global_state_context.tsx +++ b/x-pack/plugins/monitoring/public/application/contexts/global_state_context.tsx @@ -6,13 +6,13 @@ */ import React, { createContext } from 'react'; import { GlobalState } from '../../url_state'; -import { MonitoringStartPluginDependencies } from '../../types'; +import { MonitoringStartPluginDependencies, MonitoringStartServices } from '../../types'; import { TimeRange, RefreshInterval } from '../../../../../../src/plugins/data/public'; import { Legacy } from '../../legacy_shims'; interface GlobalStateProviderProps { query: MonitoringStartPluginDependencies['data']['query']; - toasts: MonitoringStartPluginDependencies['core']['notifications']['toasts']; + toasts: MonitoringStartServices['notifications']['toasts']; } export interface State { diff --git a/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx b/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx index 6a1ed1dd16f481..eac4814580adbe 100644 --- a/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx +++ b/x-pack/plugins/monitoring/public/components/shared/toolbar.tsx @@ -12,17 +12,41 @@ import { EuiTitle, OnRefreshChangeProps, } from '@elastic/eui'; -import React, { useContext, useCallback } from 'react'; +import React, { useContext, useCallback, useMemo } from 'react'; import { MonitoringTimeContainer } from '../../application/hooks/use_monitoring_time'; import { GlobalStateContext } from '../../application/contexts/global_state_context'; import { Legacy } from '../../legacy_shims'; - +import { MonitoringStartServices } from '../../types'; +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { UI_SETTINGS } from '../../../../../../src/plugins/data/common'; interface MonitoringToolbarProps { pageTitle?: string; onRefresh?: () => void; } +interface TimePickerQuickRange { + from: string; + to: string; + display: string; +} + export const MonitoringToolbar: React.FC = ({ pageTitle, onRefresh }) => { + const { services } = useKibana(); + + const timePickerQuickRanges = services.uiSettings.get( + UI_SETTINGS.TIMEPICKER_QUICK_RANGES + ); + + const commonlyUsedRanges = useMemo( + () => + timePickerQuickRanges.map(({ from, to, display }) => ({ + start: from, + end: to, + label: display, + })), + [timePickerQuickRanges] + ); + const { currentTimerange, handleTimeChange, @@ -88,6 +112,7 @@ export const MonitoringToolbar: React.FC = ({ pageTitle, isPaused={isPaused} refreshInterval={refreshInterval} onRefreshChange={onRefreshChange} + commonlyUsedRanges={commonlyUsedRanges} /> diff --git a/x-pack/plugins/monitoring/public/legacy_shims.ts b/x-pack/plugins/monitoring/public/legacy_shims.ts index 7c7e7642cac810..37d04e11214736 100644 --- a/x-pack/plugins/monitoring/public/legacy_shims.ts +++ b/x-pack/plugins/monitoring/public/legacy_shims.ts @@ -8,7 +8,10 @@ import { CoreStart, HttpSetup, IUiSettingsClient, AppMountParameters } from 'kibana/public'; import { Observable } from 'rxjs'; import { HttpRequestInit } from '../../../../src/core/public'; -import { MonitoringStartPluginDependencies } from './types'; +import { + MonitoringStartPluginDependencies, + LegacyMonitoringStartPluginDependencies, +} from './types'; import { TriggersAndActionsUIPublicPluginStart } from '../../triggers_actions_ui/public'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { TypeRegistry } from '../../triggers_actions_ui/public/application/type_registry'; @@ -75,7 +78,7 @@ export class Legacy { triggersActionsUi, usageCollection, appMountParameters, - }: MonitoringStartPluginDependencies) { + }: LegacyMonitoringStartPluginDependencies) { this._shims = { toastNotifications: core.notifications.toasts, capabilities: core.application.capabilities, diff --git a/x-pack/plugins/monitoring/public/plugin.ts b/x-pack/plugins/monitoring/public/plugin.ts index 5b1505831fe337..e532a1e2ff3000 100644 --- a/x-pack/plugins/monitoring/public/plugin.ts +++ b/x-pack/plugins/monitoring/public/plugin.ts @@ -36,7 +36,11 @@ import { createMissingMonitoringDataAlertType } from './alerts/missing_monitorin import { createThreadPoolRejectionsAlertType } from './alerts/thread_pool_rejections_alert'; import { setConfig } from './external_config'; import { Legacy } from './legacy_shims'; -import { MonitoringConfig, MonitoringStartPluginDependencies } from './types'; +import { + MonitoringConfig, + MonitoringStartPluginDependencies, + LegacyMonitoringStartPluginDependencies, +} from './types'; interface MonitoringSetupPluginDependencies { home?: HomePublicPluginSetup; @@ -94,7 +98,7 @@ export class MonitoringPlugin mount: async (params: AppMountParameters) => { const [coreStart, pluginsStart] = await core.getStartServices(); const externalConfig = this.getExternalConfig(); - const deps: MonitoringStartPluginDependencies = { + const deps: LegacyMonitoringStartPluginDependencies = { navigation: pluginsStart.navigation, element: params.element, core: coreStart, diff --git a/x-pack/plugins/monitoring/public/types.ts b/x-pack/plugins/monitoring/public/types.ts index fa92cfacafdcc3..35c6b7acf0cf34 100644 --- a/x-pack/plugins/monitoring/public/types.ts +++ b/x-pack/plugins/monitoring/public/types.ts @@ -10,7 +10,6 @@ import { NavigationPublicPluginStart as NavigationStart } from '../../../../src/ import { DataPublicPluginStart } from '../../../../src/plugins/data/public'; import { TriggersAndActionsUIPublicPluginStart } from '../../triggers_actions_ui/public'; import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public'; - // eslint-disable-next-line @kbn/eslint/no-restricted-paths export type { MonitoringConfig } from '../server'; // eslint-disable-next-line @kbn/eslint/no-restricted-paths @@ -19,12 +18,20 @@ export type { MLJobs } from '../server/lib/elasticsearch/get_ml_jobs'; export interface MonitoringStartPluginDependencies { navigation: NavigationStart; data: DataPublicPluginStart; + triggersActionsUi: TriggersAndActionsUIPublicPluginStart; + usageCollection: UsageCollectionSetup; +} + +interface LegacyStartDependencies { element: HTMLElement; core: CoreStart; isCloud: boolean; pluginInitializerContext: PluginInitializerContext; externalConfig: Array | Array>; - triggersActionsUi: TriggersAndActionsUIPublicPluginStart; - usageCollection: UsageCollectionSetup; appMountParameters: AppMountParameters; } + +export type LegacyMonitoringStartPluginDependencies = MonitoringStartPluginDependencies & + LegacyStartDependencies; + +export type MonitoringStartServices = CoreStart & MonitoringStartPluginDependencies; diff --git a/x-pack/plugins/monitoring/public/url_state.ts b/x-pack/plugins/monitoring/public/url_state.ts index 8f89df732b800e..ab7d578dbca498 100644 --- a/x-pack/plugins/monitoring/public/url_state.ts +++ b/x-pack/plugins/monitoring/public/url_state.ts @@ -6,7 +6,7 @@ */ import { Subscription } from 'rxjs'; import { History, createHashHistory } from 'history'; -import { MonitoringStartPluginDependencies } from './types'; +import { MonitoringStartPluginDependencies, MonitoringStartServices } from './types'; import { Legacy } from './legacy_shims'; import { @@ -67,7 +67,7 @@ export class GlobalState { constructor( queryService: MonitoringStartPluginDependencies['data']['query'], - toasts: MonitoringStartPluginDependencies['core']['notifications']['toasts'], + toasts: MonitoringStartServices['notifications']['toasts'], externalState: RawObject ) { this.timefilterRef = queryService.timefilter.timefilter;