[Stack Monitoring] Fix date picker range options (#121295) (#123122)

* Pass commonly used ranges to EuiSuperDatePicker

* Tidy up start contract types

(cherry picked from commit dcd6da7de6)

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<MonitoringStartPluginDependencies['core']>().services.application;
+  const { navigateToApp } = useKibana<MonitoringStartServices>().services.application;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 

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 {

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<MonitoringToolbarProps> = ({ pageTitle, onRefresh }) => {
+  const { services } = useKibana<MonitoringStartServices>();
+
+  const timePickerQuickRanges = services.uiSettings.get<TimePickerQuickRange[]>(
+    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<MonitoringToolbarProps> = ({ pageTitle,
             isPaused={isPaused}
             refreshInterval={refreshInterval}
             onRefreshChange={onRefreshChange}
+            commonlyUsedRanges={commonlyUsedRanges}
           />
         </div>
       </EuiFlexItem>

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,

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,

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<string | number> | Array<string | boolean>>;
-  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
-  usageCollection: UsageCollectionSetup;
   appMountParameters: AppMountParameters;
 }
+
+export type LegacyMonitoringStartPluginDependencies = MonitoringStartPluginDependencies &
+  LegacyStartDependencies;
+
+export type MonitoringStartServices = CoreStart & MonitoringStartPluginDependencies;

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;