Tweak initialization logic for LogPositionState

Some of the intial state for the LogPositionState might come from the
URL. Ensure that state is in place before fetching any entries to
prevent double fetching.

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx

@@ -96,7 +96,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
  targetId: getStreamItemId(getStreamItemBeforeTimeKey(nextProps.items, nextProps.target!)),
  items: nextItems,
  };
- } else if (!nextProps.target || !hasItems) {
+ } else if (!hasItems) {
  return {
  target: null,
  targetId: null,

x-pack/legacy/plugins/infra/public/containers/logs/log_entries/index.ts

@@ -106,13 +106,14 @@ const shouldFetchNewEntries = ({
  bottomCursor,
  startDate,
  endDate,
-}: FetchEntriesParams & LogEntriesStateParams & { prevParams: FetchEntriesParams }) => {
- const shouldLoadWithNewDates =
- startDate !== prevParams.startDate || endDate !== prevParams.endDate;
-
- const shouldLoadWithNewFilter = filterQuery !== prevParams.filterQuery;
+}: FetchEntriesParams & LogEntriesStateParams & { prevParams: FetchEntriesParams | undefined }) => {
+ const shouldLoadWithNewDates = prevParams
+ ? startDate !== prevParams.startDate || endDate !== prevParams.endDate
+ : true;
+ const shouldLoadWithNewFilter = prevParams ? filterQuery !== prevParams.filterQuery : true;
  const shouldLoadAroundNewPosition =
  timeKey && (!topCursor || !bottomCursor || !timeKeyIsBetween(topCursor, bottomCursor, timeKey));
+
  return shouldLoadWithNewDates || shouldLoadWithNewFilter || shouldLoadAroundNewPosition;
 };
 
@@ -137,11 +138,11 @@ const useFetchEntriesEffect = (
  dispatch: Dispatch,
  props: LogEntriesProps
 ) => {
- const [prevParams, cachePrevParams] = useState(props);
+ const [prevParams, cachePrevParams] = useState<LogEntriesProps | undefined>();
  const [startedStreaming, setStartedStreaming] = useState(false);
 
  const runFetchNewEntriesRequest = async (overrides: Partial<LogEntriesProps> = {}) => {
- if (!props.startTimestamp || !props.endTimestamp || !props.timeKey) {
+ if (!props.startTimestamp || !props.endTimestamp) {
  return;
  }
 
@@ -163,6 +164,14 @@ const useFetchEntriesEffect = (
 
  const { data: payload } = await fetchLogEntries(fetchArgs);
  dispatch({ type: Action.ReceiveNewEntries, payload });
+
+ // Move position to the bottom if it's the first load.
+ // Do it in the next tick to allow the `dispatch` to fire
+ if (!props.timeKey && payload.bottomCursor) {
+ setTimeout(() => {
+ props.jumpToTargetPosition(payload.bottomCursor!);
+ });
+ }
  } catch (e) {
  dispatch({ type: Action.ErrorOnNewEntries });
  }

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

@@ -25,6 +25,7 @@ interface VisiblePositions {
 }
 
 export interface LogPositionStateParams {
+ initialized: boolean;
  targetPosition: TimeKeyOrNull;
  isStreaming: boolean;
  liveStreamingInterval: number;
@@ -41,6 +42,7 @@ export interface LogPositionStateParams {
 }
 
 export interface LogPositionCallbacks {
+ initialize: () => void;
  jumpToTargetPosition: (pos: TimeKeyOrNull) => void;
  jumpToTargetPositionTime: (time: number) => void;
  reportVisiblePositions: (visPos: VisiblePositions) => void;
@@ -75,6 +77,16 @@ const useVisibleMidpoint = (middleKey: TimeKeyOrNull, targetPosition: TimeKeyOrN
 };
 
 export const useLogPositionState: () => LogPositionStateParams & LogPositionCallbacks = () => {
+ // Flag to determine if `LogPositionState` has been fully initialized.
+ //
+ // When the page loads, there might be initial state in the URL. We want to
+ // prevent the entries from showing until we have processed that initial
+ // state. That prevents double fetching.
+ const [initialized, setInitialized] = useState<boolean>(false);
+ const initialize = useCallback(() => {
+ setInitialized(true);
+ }, [setInitialized]);
+
  const [targetPosition, jumpToTargetPosition] = useState<TimeKey | null>(null);
  const [isStreaming, setIsStreaming] = useState(false);
  const [liveStreamingInterval, setLiveStreamingInterval] = useState(10000);
@@ -134,6 +146,7 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
  const endTimestamp = useMemo(() => datemathToEpochMillis(dateRange.endDate), [endTimestampDep]);
 
  const state = {
+ initialized,
  targetPosition,
  isStreaming,
  firstVisiblePosition: startKey,
@@ -149,6 +162,7 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
  };
 
  const callbacks = {
+ initialize,
  jumpToTargetPosition,
  jumpToTargetPositionTime: useCallback(
  (time: number) => jumpToTargetPosition({ tiebreaker: 0, time }),

x-pack/legacy/plugins/infra/public/containers/logs/log_position/with_log_position_url_state.tsx

@@ -27,12 +27,12 @@ export const WithLogPositionUrlState = () => {
  visibleMidpoint,
  isStreaming,
  jumpToTargetPosition,
- jumpToTargetPositionTime,
  startLiveStreaming,
  stopLiveStreaming,
  startDate,
  endDate,
  updateDateRange,
+ initialize,
  } = useContext(LogPositionState.Context);
  const urlState = useMemo(
  () => ({
@@ -68,24 +68,21 @@ export const WithLogPositionUrlState = () => {
  }
  }}
  onInitialize={(initialUrlState: LogPositionUrlState | undefined) => {
- if (!initialUrlState) {
- jumpToTargetPositionTime(Date.now());
- return;
- }
+ if (initialUrlState) {
+ if (initialUrlState.start || initialUrlState.end) {
+  updateDateRange({ startDate: initialUrlState.start, endDate: initialUrlState.end });
+  }
 
- if (initialUrlState.start || initialUrlState.end) {
- updateDateRange({ startDate: initialUrlState.start, endDate: initialUrlState.end });
- }
+  if (initialUrlState.position) {
+  jumpToTargetPosition(initialUrlState.position);
+  }
 
- if (initialUrlState.position) {
- jumpToTargetPosition(initialUrlState.position);
- } else {
- jumpToTargetPositionTime(Date.now());
+ if (initialUrlState.streamLive) {
+ startLiveStreaming();
+ }
  }
 
- if (initialUrlState.streamLive) {
- startLiveStreaming();
- }
+ initialize();
  }}
  />
  );

x-pack/legacy/plugins/infra/public/pages/logs/stream/page_providers.tsx

@@ -39,6 +39,7 @@ const LogEntriesStateProvider: React.FC = ({ children }) => {
  isStreaming,
  jumpToTargetPosition,
  liveStreamingInterval,
+ initialized,
  } = useContext(LogPositionState.Context);
  const { filterQuery } = useContext(LogFilterState.Context);
 
@@ -56,6 +57,13 @@ const LogEntriesStateProvider: React.FC = ({ children }) => {
  isStreaming,
  jumpToTargetPosition,
  };
+
+ // Don't initialize the entries until the position has been fully intialized.
+ // See `<WithLogPositionUrlState />`
+ if (!initialized) {
+ return null;
+ }
+
  return <LogEntriesState.Provider {...entriesProps}>{children}</LogEntriesState.Provider>;
 };