[Logs UI] Sync logs timerange with wider Kibana

x-pack/plugins/infra/public/containers/logs/log_position/log_position_state.ts

@@ -9,6 +9,7 @@ import createContainer from 'constate';
 import { useSetState } from 'react-use';
 import { TimeKey } from '../../../../common/time';
 import { datemathToEpochMillis, isValidDatemath } from '../../../utils/datemath';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
 type TimeKeyOrNull = TimeKey | null;
 
@@ -55,7 +56,6 @@ export interface LogPositionCallbacks {
   updateDateRange: (newDateRage: Partial<DateRange>) => void;
 }
 
-const DEFAULT_DATE_RANGE = { startDateExpression: 'now-1d', endDateExpression: 'now' };
 const DESIRED_BUFFER_PAGES = 2;
 
 const useVisibleMidpoint = (middleKey: TimeKeyOrNull, targetPosition: TimeKeyOrNull) => {
@@ -81,6 +81,13 @@ const useVisibleMidpoint = (middleKey: TimeKeyOrNull, targetPosition: TimeKeyOrN
 };
 
 export const useLogPositionState: () => LogPositionStateParams & LogPositionCallbacks = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { from: sharedFrom, to: sharedTo } = services.data.query.timefilter.timefilter.getTime();
+  const DEFAULT_DATE_RANGE = {
+    startDateExpression: sharedFrom || 'now-1d',
+    endDateExpression: sharedTo || 'now',
+  };
+
   // Flag to determine if `LogPositionState` has been fully initialized.
   //
   // When the page loads, there might be initial state in the URL. We want to
@@ -110,6 +117,15 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
     timestampsLastUpdate: Date.now(),
   });
 
+  useEffect(() => {
+    // Share timestamp changes with the rest of Kibana
+    const { startDateExpression, endDateExpression } = dateRange;
+    services.data.query.timefilter.timefilter.setTime({
+      from: startDateExpression,
+      to: endDateExpression,
+    });
+  }, [dateRange, services.data.query.timefilter.timefilter]);
+
   const { startKey, middleKey, endKey, pagesBeforeStart, pagesAfterEnd } = visiblePositions;
 
   const visibleMidpoint = useVisibleMidpoint(middleKey, targetPosition);

x-pack/plugins/infra/public/pages/logs/log_entry_categories/use_log_entry_categories_results_url_state.tsx

@@ -4,12 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useEffect } from 'react';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import { pipe } from 'fp-ts/lib/pipeable';
 import * as rt from 'io-ts';
 
 import { useUrlState } from '../../../utils/use_url_state';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
 const autoRefreshRT = rt.union([
   rt.type({
@@ -31,10 +33,13 @@ const TIME_RANGE_URL_STATE_KEY = 'timeRange';
 const AUTOREFRESH_URL_STATE_KEY = 'autoRefresh';
 
 export const useLogEntryCategoriesResultsUrlState = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { from: sharedFrom, to: sharedTo } = services.data.query.timefilter.timefilter.getTime();
+
   const [timeRange, setTimeRange] = useUrlState({
     defaultState: {
-      startTime: 'now-2w',
-      endTime: 'now',
+      startTime: sharedFrom || 'now-2w',
+      endTime: sharedTo || 'now',
     },
     decodeUrlState: (value: unknown) =>
       pipe(urlTimeRangeRT.decode(value), fold(constant(undefined), identity)),
@@ -43,6 +48,15 @@ export const useLogEntryCategoriesResultsUrlState = () => {
     writeDefaultState: true,
   });
 
+  useEffect(() => {
+    // Share timestamp changes with the rest of Kibana
+    const { startTime, endTime } = timeRange;
+    services.data.query.timefilter.timefilter.setTime({
+      from: startTime,
+      to: endTime,
+    });
+  }, [timeRange, services.data.query.timefilter.timefilter]);
+
   const [autoRefresh, setAutoRefresh] = useUrlState({
     defaultState: {
       isPaused: false,

x-pack/plugins/infra/public/pages/logs/log_entry_rate/use_log_entry_rate_results_url_state.tsx

@@ -4,12 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useEffect } from 'react';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
 import { pipe } from 'fp-ts/lib/pipeable';
 import * as rt from 'io-ts';
 
 import { useUrlState } from '../../../utils/use_url_state';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 
 const autoRefreshRT = rt.union([
   rt.type({
@@ -31,10 +33,13 @@ const TIME_RANGE_URL_STATE_KEY = 'timeRange';
 const AUTOREFRESH_URL_STATE_KEY = 'autoRefresh';
 
 export const useLogAnalysisResultsUrlState = () => {
+  const { services } = useKibanaContextForPlugin();
+  const { from: sharedFrom, to: sharedTo } = services.data.query.timefilter.timefilter.getTime();
+
   const [timeRange, setTimeRange] = useUrlState({
     defaultState: {
-      startTime: 'now-2w',
-      endTime: 'now',
+      startTime: sharedFrom || 'now-2w',
+      endTime: sharedTo || 'now',
     },
     decodeUrlState: (value: unknown) =>
       pipe(urlTimeRangeRT.decode(value), fold(constant(undefined), identity)),
@@ -43,6 +48,15 @@ export const useLogAnalysisResultsUrlState = () => {
     writeDefaultState: true,
   });
 
+  useEffect(() => {
+    // Share timestamp changes with the rest of Kibana
+    const { startTime, endTime } = timeRange;
+    services.data.query.timefilter.timefilter.setTime({
+      from: startTime,
+      to: endTime,
+    });
+  }, [timeRange, services.data.query.timefilter.timefilter]);
+
   const [autoRefresh, setAutoRefresh] = useUrlState({
     defaultState: {
       isPaused: false,