[Observability] Persist time range across apps

x-pack/plugins/observability/kibana.json

@@ -4,6 +4,7 @@
   "kibanaVersion": "kibana",
   "configPath": ["xpack", "observability"],
   "optionalPlugins": ["licensing", "home", "usageCollection"],
+  "requiredPlugins": ["data"],
   "ui": true,
   "server": true,
   "requiredBundles": ["data", "kibanaReact", "kibanaUtils"]

x-pack/plugins/observability/public/application/index.tsx

@@ -65,7 +65,7 @@ export const renderApp = (
 
   ReactDOM.render(
     <KibanaContextProvider services={{ ...core, ...plugins }}>
-      <PluginContext.Provider value={{ core }}>
+      <PluginContext.Provider value={{ core, plugins }}>
         <Router history={history}>
           <EuiThemeProvider darkMode={isDarkMode}>
             <i18nCore.Context>

x-pack/plugins/observability/public/components/shared/data_picker/index.tsx

@@ -5,9 +5,10 @@
  */
 
 import { EuiSuperDatePicker } from '@elastic/eui';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UI_SETTINGS, useKibanaUISettings } from '../../../hooks/use_kibana_ui_settings';
+import { usePluginContext } from '../../../hooks/use_plugin_context';
 import { fromQuery, toQuery } from '../../../utils/url';
 
 export interface TimePickerTime {
@@ -34,6 +35,14 @@ interface Props {
 export function DatePicker({ rangeFrom, rangeTo, refreshPaused, refreshInterval }: Props) {
   const location = useLocation();
   const history = useHistory();
+  const { plugins } = usePluginContext();
+
+  useEffect(() => {
+    plugins.data.query.timefilter.timefilter.setTime({
+      from: rangeFrom,
+      to: rangeTo,
+    });
+  }, [plugins, rangeFrom, rangeTo]);
 
   const timePickerQuickRanges = useKibanaUISettings<TimePickerQuickRange[]>(
     UI_SETTINGS.TIMEPICKER_QUICK_RANGES

x-pack/plugins/observability/public/context/plugin_context.tsx

@@ -6,9 +6,11 @@
 
 import { createContext } from 'react';
 import { CoreStart } from 'kibana/public';
+import { ObservabilityPluginSetupDeps } from '../plugin';
 
 export interface PluginContextValue {
   core: CoreStart;
+  plugins: ObservabilityPluginSetupDeps;
 }
 
 export const PluginContext = createContext({} as PluginContextValue);

x-pack/plugins/observability/public/pages/overview/index.tsx

@@ -37,11 +37,18 @@ function calculateBucketSize({ start, end }: { start?: number; end?: number }) {
 }
 
 export function OverviewPage({ routeParams }: Props) {
-  const timePickerTime = useKibanaUISettings<TimePickerTime>(UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS);
+  const { core, plugins } = usePluginContext();
+
+  // read time from state and update the url
+  const timePickerSharedState = plugins.data.query.timefilter.timefilter.getTime();
+
+  const timePickerDefaults = useKibanaUISettings<TimePickerTime>(
+    UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS
+  );
 
   const relativeTime = {
-    start: routeParams.query.rangeFrom ?? timePickerTime.from,
-    end: routeParams.query.rangeTo ?? timePickerTime.to,
+    start: routeParams.query.rangeFrom || timePickerSharedState.from || timePickerDefaults.from,
+    end: routeParams.query.rangeTo || timePickerSharedState.to || timePickerDefaults.to,
   };
 
   const absoluteTime = {
@@ -52,8 +59,6 @@ export function OverviewPage({ routeParams }: Props) {
   useTrackPageview({ app: 'observability', path: 'overview' });
   useTrackPageview({ app: 'observability', path: 'overview', delay: 15000 });
 
-  const { core } = usePluginContext();
-
   const { data: alerts = [], status: alertStatus } = useFetcher(() => {
     return getObservabilityAlerts({ core });
   }, [core]);

x-pack/plugins/observability/public/pages/overview/overview.stories.tsx

@@ -12,6 +12,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { UI_SETTINGS } from '../../../../../../src/plugins/data/public';
 import { PluginContext } from '../../context/plugin_context';
 import { registerDataHandler, unregisterDataHandler } from '../../data_handler';
+import { ObservabilityPluginSetupDeps } from '../../plugin';
 import { EuiThemeProvider } from '../../typings';
 import { OverviewPage } from './';
 import { alertsFetchData } from './mock/alerts.mock';
@@ -36,7 +37,18 @@ const withCore = makeDecorator({
 
     return (
       <MemoryRouter>
-        <PluginContext.Provider value={{ core: options as CoreStart }}>
+        <PluginContext.Provider
+          value={{
+            core: options as CoreStart,
+            plugins: ({
+              data: {
+                query: {
+                  timefilter: { timefilter: { setTime: () => {}, getTime: () => ({}) } },
+                },
+              },
+            } as unknown) as ObservabilityPluginSetupDeps,
+          }}
+        >
           <EuiThemeProvider>{storyFn(context)}</EuiThemeProvider>
         </PluginContext.Provider>
       </MemoryRouter>

x-pack/plugins/observability/public/plugin.ts

@@ -6,6 +6,7 @@
 
 import { BehaviorSubject } from 'rxjs';
 import { i18n } from '@kbn/i18n';
+import { DataPublicPluginSetup } from '../../../../src/plugins/data/public';
 import {
   AppMountParameters,
   AppUpdater,
@@ -25,6 +26,7 @@ export interface ObservabilityPluginSetup {
 
 export interface ObservabilityPluginSetupDeps {
   home?: HomePublicPluginSetup;
+  data: DataPublicPluginSetup;
 }
 
 export type ObservabilityPluginStart = void;

x-pack/plugins/observability/public/utils/test_helper.tsx

@@ -10,6 +10,7 @@ import { of } from 'rxjs';
 import { PluginContext } from '../context/plugin_context';
 import { EuiThemeProvider } from '../typings';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+import { ObservabilityPluginSetupDeps } from '../plugin';
 
 export const core = ({
   http: {
@@ -23,10 +24,14 @@ export const core = ({
   },
 } as unknown) as CoreStart;
 
+const plugins = ({
+  data: { query: { timefilter: { timefilter: { setTime: jest.fn() } } } },
+} as unknown) as ObservabilityPluginSetupDeps;
+
 export const render = (component: React.ReactNode) => {
   return testLibRender(
     <KibanaContextProvider services={{ ...core }}>
-      <PluginContext.Provider value={{ core }}>
+      <PluginContext.Provider value={{ core, plugins }}>
         <EuiThemeProvider>{component}</EuiThemeProvider>
       </PluginContext.Provider>
     </KibanaContextProvider>