[Observability] Persist time range across apps (#79258)

* using kibana persisted date when available to set the date time

* fixing types

* adding setTime when changin the dates in the url

* renaming

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	x-pack/plugins/observability/public/context/plugin_context.tsx
#	x-pack/plugins/observability/public/pages/overview/index.tsx
#	x-pack/plugins/observability/public/pages/overview/overview.stories.tsx
#	x-pack/plugins/observability/public/utils/test_helper.tsx

Author: cauemarcondes

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

@@ -5,10 +5,12 @@
  */
 
 import { createContext } from 'react';
-import { AppMountContext } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
+import { ObservabilityPluginSetupDeps } from '../plugin';
 
 export interface PluginContextValue {
-  core: AppMountContext['core'];
+  core: CoreStart;
+  plugins: ObservabilityPluginSetupDeps;
 }
 
 export const PluginContext = createContext({} as PluginContextValue);

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

@@ -40,7 +40,7 @@ function calculatetBucketSize({ start, end }: { start?: number; end?: number })
 }
 
 export function OverviewPage({ routeParams }: Props) {
-  const { core } = usePluginContext();
+  const { core, plugins } = usePluginContext();
 
   useTrackPageview({ app: 'observability', path: 'overview' });
   useTrackPageview({ app: 'observability', path: 'overview', delay: 15000 });
@@ -52,7 +52,11 @@ export function OverviewPage({ routeParams }: Props) {
   const { data: newsFeed } = useFetcher(() => getNewsFeed({ core }), [core]);
 
   const theme = useContext(ThemeContext);
-  const timePickerTime = useKibanaUISettings<TimePickerTime>(UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS);
+  const timePickerDefaults = useKibanaUISettings<TimePickerTime>(
+    UI_SETTINGS.TIMEPICKER_TIME_DEFAULTS
+  );
+  // read time from state and update the url
+  const timePickerSharedState = plugins.data.query.timefilter.timefilter.getTime();
 
   const result = useFetcher(() => fetchHasData(), []);
   const hasData = result.data;
@@ -64,8 +68,8 @@ export function OverviewPage({ routeParams }: Props) {
   const { refreshInterval = 10000, refreshPaused = true } = routeParams.query;
 
   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 = {

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

@@ -6,12 +6,13 @@
 
 import { makeDecorator } from '@storybook/addons';
 import { storiesOf } from '@storybook/react';
-import { AppMountContext } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 import React from 'react';
 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 AppMountContext['core'] }}>
+        <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>
@@ -119,23 +131,23 @@ const core = ({
       return euiSettings[key];
     },
   },
-} as unknown) as AppMountContext['core'];
+} as unknown) as CoreStart;
 
 const coreWithAlerts = ({
   ...core,
   http: {
     ...core.http,
     get: alertsFetchData,
   },
-} as unknown) as AppMountContext['core'];
+} as unknown) as CoreStart;
 
 const coreWithNewsFeed = ({
   ...core,
   http: {
     ...core.http,
     get: newsFeedFetchData,
   },
-} as unknown) as AppMountContext['core'];
+} as unknown) as CoreStart;
 
 const coreAlertsThrowsError = ({
   ...core,
@@ -145,7 +157,7 @@ const coreAlertsThrowsError = ({
       throw new Error('Error fetching Alerts data');
     },
   },
-} as unknown) as AppMountContext['core'];
+} as unknown) as CoreStart;
 
 storiesOf('app/Overview', module)
   .addDecorator(withCore(core))

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

@@ -5,22 +5,30 @@
  */
 import React from 'react';
 import { render as testLibRender } from '@testing-library/react';
-import { AppMountContext } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 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: {
     basePath: {
       prepend: jest.fn(),
     },
   },
-} as unknown) as AppMountContext['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(
-    <PluginContext.Provider value={{ core }}>
-      <EuiThemeProvider>{component}</EuiThemeProvider>
-    </PluginContext.Provider>
+    <KibanaContextProvider services={{ ...core }}>
+      <PluginContext.Provider value={{ core, plugins }}>
+        <EuiThemeProvider>{component}</EuiThemeProvider>
+      </PluginContext.Provider>
+    </KibanaContextProvider>
   );
 };