[Logs UI] Refactor log position to hooks

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { transparentize } from 'polished';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
@@ -21,28 +21,26 @@ import {
   LogEntryColumnWidths,
 } from './log_entry_column';
 import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel';
-import { WithLogPosition } from '../../../containers/logs/with_log_position';
+import { LogPositionState } from '../../../containers/logs/log_position';
 import { localizedDate } from '../../../utils/formatters/datetime';
 
 export const LogColumnHeaders: React.FunctionComponent<{
   columnConfigurations: LogColumnConfiguration[];
   columnWidths: LogEntryColumnWidths;
 }> = ({ columnConfigurations, columnWidths }) => {
+  const { firstVisiblePosition } = useContext(LogPositionState.Context);
   return (
     <LogColumnHeadersWrapper>
       {columnConfigurations.map(columnConfiguration => {
         if (isTimestampLogColumnConfiguration(columnConfiguration)) {
           return (
-            <WithLogPosition key={columnConfiguration.timestampColumn.id}>
-              {({ firstVisiblePosition }) => (
-                <LogColumnHeader
-                  columnWidth={columnWidths[columnConfiguration.timestampColumn.id]}
-                  data-test-subj="logColumnHeader timestampLogColumnHeader"
-                >
-                  {firstVisiblePosition ? localizedDate(firstVisiblePosition.time) : 'Timestamp'}
-                </LogColumnHeader>
-              )}
-            </WithLogPosition>
+            <LogColumnHeader
+              key={columnConfiguration.timestampColumn.id}
+              columnWidth={columnWidths[columnConfiguration.timestampColumn.id]}
+              data-test-subj="logColumnHeader timestampLogColumnHeader"
+            >
+              {firstVisiblePosition ? localizedDate(firstVisiblePosition.time) : 'Timestamp'}
+            </LogColumnHeader>
           );
         } else if (isMessageLogColumnConfiguration(columnConfiguration)) {
           return (

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

@@ -55,17 +55,13 @@ interface ScrollableLogTextStreamViewProps {
   setFlyoutVisibility: (visible: boolean) => void;
   highlightedItem: string | null;
   currentHighlightKey: UniqueTimeKey | null;
-  scrollLock: {
-    enable: () => void;
-    disable: () => void;
-    isEnabled: boolean;
-  };
 }
 
 interface ScrollableLogTextStreamViewState {
   target: TimeKey | null;
   targetId: string | null;
   items: StreamItem[];
+  isScrollLocked: boolean;
 }
 
 export class ScrollableLogTextStreamView extends React.PureComponent<
@@ -81,8 +77,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
 
     // Prevent new entries from being appended and moving the stream forward when
     // the user has scrolled up during live streaming
-    const nextItems =
-      hasItems && nextProps.scrollLock.isEnabled ? prevState.items : nextProps.items;
+    const nextItems = hasItems && prevState.isScrollLocked ? prevState.items : nextProps.items;
 
     if (nextProps.isStreaming && hasItems) {
       return {
@@ -121,6 +116,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
       target: null,
       targetId: null,
       items: props.items,
+      isScrollLocked: false,
     };
   }
 
@@ -137,9 +133,8 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
       lastLoadedTime,
       scale,
       wrap,
-      scrollLock,
     } = this.props;
-    const { targetId, items } = this.state;
+    const { targetId, items, isScrollLocked } = this.state;
     const hasItems = items.length > 0;
     return (
       <ScrollableLogTextStreamViewWrapper>
@@ -187,7 +182,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
                         target={targetId}
                         hideScrollbar={true}
                         data-test-subj={'logStream'}
-                        isLocked={scrollLock.isEnabled}
+                        isLocked={isScrollLocked}
                         entriesCount={items.length}
                       >
                         {registerChild => (
@@ -248,7 +243,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
                               lastStreamingUpdate={isStreaming ? lastLoadedTime : null}
                               onLoadMore={this.handleLoadNewerItems}
                             />
-                            {scrollLock.isEnabled && (
+                            {isScrollLocked && (
                               <LogTextStreamJumpToTail
                                 width={width}
                                 onClickJump={this.handleJumpToTail}
@@ -308,7 +303,9 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
       fromScroll: boolean;
     }) => {
       if (fromScroll && this.props.isStreaming) {
-        this.props.scrollLock[pagesBelow === 0 ? 'disable' : 'enable']();
+        this.setState({
+          isScrollLocked: pagesBelow !== 0,
+        });
       }
       this.props.reportVisibleInterval({
         endKey: parseStreamItemId(bottomChild),
@@ -322,11 +319,11 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
   );
 
   private handleJumpToTail = () => {
-    const { items, scrollLock } = this.props;
-    scrollLock.disable();
+    const { items } = this.props;
     const lastItemTarget = getStreamItemId(items[items.length - 1]);
     this.setState({
       targetId: lastItemTarget,
+      isScrollLocked: false,
     });
   };
 }

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

@@ -5,7 +5,7 @@
  */
 import { useEffect, useState, useReducer, useCallback } from 'react';
 import createContainer from 'constate';
-import { pick, throttle } from 'lodash';
+import { pick, throttle, omit } from 'lodash';
 import { useGraphQLQueries } from './gql_queries';
 import { TimeKey, timeKeyIsBetween } from '../../../../common/time';
 import { InfraLogEntry } from './types';
@@ -45,6 +45,7 @@ interface LogEntriesProps {
   pagesAfterEnd: number | null;
   sourceId: string;
   isAutoReloading: boolean;
+  jumpToTargetPosition: (position: TimeKey) => void;
 }
 
 type FetchEntriesParams = Omit<LogEntriesProps, 'isAutoReloading'>;
@@ -65,7 +66,7 @@ export type LogEntriesStateParams = {
 } & LogEntriesResponse;
 
 export interface LogEntriesCallbacks {
-  fetchNewerEntries: () => Promise<void>;
+  fetchNewerEntries: () => Promise<TimeKey | null | undefined>;
 }
 export const logEntriesInitialCallbacks = {
   fetchNewerEntries: async () => {},
@@ -127,10 +128,13 @@ const useFetchEntriesEffect = (
   const [prevParams, cachePrevParams] = useState(props);
   const [startedStreaming, setStartedStreaming] = useState(false);
 
-  const runFetchNewEntriesRequest = async () => {
+  const runFetchNewEntriesRequest = async (override = {}) => {
     dispatch({ type: Action.FetchingNewEntries });
     try {
-      const payload = await getLogEntriesAround(props);
+      const payload = await getLogEntriesAround({
+        ...omit(props, 'jumpToTargetPosition'),
+        ...override,
+      });
       dispatch({ type: Action.ReceiveNewEntries, payload });
     } catch (e) {
       dispatch({ type: Action.ErrorOnNewEntries });
@@ -150,6 +154,7 @@ const useFetchEntriesEffect = (
         type: getEntriesBefore ? Action.ReceiveEntriesBefore : Action.ReceiveEntriesAfter,
         payload,
       });
+      return payload.entriesEnd;
     } catch (e) {
       dispatch({ type: Action.ErrorOnMoreEntries });
     }
@@ -185,19 +190,37 @@ const useFetchEntriesEffect = (
 
   const fetchNewerEntries = useCallback(
     throttle(() => runFetchMoreEntriesRequest(ShouldFetchMoreEntries.After), 500),
-    [props]
+    [props, state.entriesEnd]
   );
 
-  const streamEntriesEffectDependencies = [props.isAutoReloading, state.isLoadingMore];
+  const streamEntriesEffectDependencies = [
+    props.isAutoReloading,
+    state.isLoadingMore,
+    state.isReloading,
+  ];
   const streamEntriesEffect = () => {
     (async () => {
-      if (props.isAutoReloading && !state.isLoadingMore) {
+      if (props.isAutoReloading && !state.isLoadingMore && !state.isReloading) {
         if (startedStreaming) {
           await new Promise(res => setTimeout(res, 5000));
         } else {
+          const nowKey = {
+            tiebreaker: 0,
+            time: Date.now(),
+          };
+          props.jumpToTargetPosition(nowKey);
           setStartedStreaming(true);
+          if (state.hasMoreAfterEnd) {
+            runFetchNewEntriesRequest({
+              timeKey: nowKey,
+            });
+            return;
+          }
+        }
+        const newEntriesEnd = await runFetchMoreEntriesRequest(ShouldFetchMoreEntries.After);
+        if (newEntriesEnd) {
+          props.jumpToTargetPosition(newEntriesEnd);
         }
-        fetchNewerEntries();
       } else if (!props.isAutoReloading) {
         setStartedStreaming(false);
       }

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

@@ -5,4 +5,3 @@
  */
 
 export * from './log_highlights';
-export * from './redux_bridges';

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

@@ -9,9 +9,9 @@ import { useState, useContext } from 'react';
 import { useLogEntryHighlights } from './log_entry_highlights';
 import { useLogSummaryHighlights } from './log_summary_highlights';
 import { useNextAndPrevious } from './next_and_previous';
-import { useReduxBridgeSetters } from './redux_bridge_setters';
 import { useLogSummaryBufferInterval } from '../log_summary';
 import { LogViewConfiguration } from '../log_view_configuration';
+import { LogPositionState } from '../log_position';
 import { TimeKey } from '../../../../common/time';
 
 export const useLogHighlightsState = ({
@@ -28,14 +28,7 @@ export const useLogHighlightsState = ({
   filterQuery: string | null;
 }) => {
   const [highlightTerms, setHighlightTerms] = useState<string[]>([]);
-  const {
-    visibleMidpoint,
-    setFilterQuery,
-    setVisibleMidpoint,
-    jumpToTarget,
-    setJumpToTarget,
-  } = useReduxBridgeSetters();
-
+  const { visibleMidpoint, jumpToTargetPosition } = useContext(LogPositionState.Context);
   const { intervalSize: summaryIntervalSize } = useContext(LogViewConfiguration.Context);
   const {
     start: summaryStart,
@@ -79,25 +72,22 @@ export const useLogHighlightsState = ({
     visibleMidpoint,
     logEntryHighlights,
     highlightTerms,
-    jumpToTarget,
+    jumpToTargetPosition,
   });
 
   return {
     highlightTerms,
     setHighlightTerms,
-    setFilterQuery,
     logEntryHighlights,
     logEntryHighlightsById,
     logSummaryHighlights,
     loadLogEntryHighlightsRequest,
     loadLogSummaryHighlightsRequest,
-    setVisibleMidpoint,
     currentHighlightKey,
     hasPreviousHighlight,
     hasNextHighlight,
     goToPreviousHighlight,
     goToNextHighlight,
-    setJumpToTarget,
   };
 };
 

x-pack/legacy/plugins/infra/public/containers/logs/log_highlights/next_and_previous.tsx

@@ -17,12 +17,12 @@ import { LogEntryHighlights } from './log_entry_highlights';
 
 export const useNextAndPrevious = ({
   highlightTerms,
-  jumpToTarget,
+  jumpToTargetPosition,
   logEntryHighlights,
   visibleMidpoint,
 }: {
   highlightTerms: string[];
-  jumpToTarget: (target: TimeKey) => void;
+  jumpToTargetPosition: (target: TimeKey) => void;
   logEntryHighlights: LogEntryHighlights | undefined;
   visibleMidpoint: TimeKey | null;
 }) => {
@@ -41,9 +41,9 @@ export const useNextAndPrevious = ({
 
   useEffect(() => {
     if (currentTimeKey) {
-      jumpToTarget(currentTimeKey);
+      jumpToTargetPosition(currentTimeKey);
     }
-  }, [currentTimeKey, jumpToTarget]);
+  }, [currentTimeKey, jumpToTargetPosition]);
 
   useEffect(() => {
     if (currentTimeKey === null && entries.length > 0) {