[Infra UI] Fix live tailing with the graphql api

x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx

@@ -36,7 +36,7 @@ interface LogMinimapProps {
   intervalSize: number;
   summaryBuckets: SummaryBucket[];
   // searchSummaryBuckets?: SearchSummaryBucket[];
-  target: number;
+  target: number | null;
   width: number;
 }
 
@@ -55,8 +55,10 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
   public getYScale = () => {
     const { height, intervalSize, target } = this.props;
 
+    const domainStart = target ? target - intervalSize / 2 : 0;
+    const domainEnd = target ? target + intervalSize / 2 : 0;
     return scaleLinear()
-      .domain([target - intervalSize / 2, target + intervalSize / 2])
+      .domain([domainStart, domainEnd])
       .range([0, height]);
   };
 

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

@@ -8,41 +8,40 @@ import { EuiProgress, EuiText } from '@elastic/eui';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {
-  getTimeOrDefault,
-  isExhaustedLoadingResult,
-  isIntervalLoadingPolicy,
-  isRunningLoadingProgress,
-  LoadingState,
-} from '../../../utils/loading_state';
 import { RelativeTime } from './relative_time';
 
 interface LogTextStreamLoadingItemViewProps {
   alignment: 'top' | 'bottom';
   className?: string;
-  loadingState: LoadingState<any>;
+  hasMore: boolean;
+  isLoading: boolean;
+  isStreaming: boolean;
+  lastStreamingUpdate: number | null;
 }
 
 export class LogTextStreamLoadingItemView extends React.PureComponent<
   LogTextStreamLoadingItemViewProps,
   {}
 > {
   public render() {
-    const { alignment, className, loadingState } = this.props;
-
-    const isLoading = isRunningLoadingProgress(loadingState.current);
-    const isExhausted = isExhaustedLoadingResult(loadingState.last);
-    const lastLoadedTime = getTimeOrDefault(loadingState.last);
-    const isStreaming = isIntervalLoadingPolicy(loadingState.policy);
+    const {
+      alignment,
+      className,
+      hasMore,
+      isLoading,
+      isStreaming,
+      lastStreamingUpdate,
+    } = this.props;
 
     if (isStreaming) {
       return (
         <ProgressEntry alignment={alignment} className={className} color="primary" isLoading={true}>
           <EuiText color="subdued">
             Streaming new entries
-            {lastLoadedTime ? (
+            {lastStreamingUpdate ? (
               <>
-                : last updated <RelativeTime time={lastLoadedTime} refreshInterval={1000} /> ago
+                : last updated <RelativeTime time={lastStreamingUpdate} refreshInterval={1000} />{' '}
+                ago
               </>
             ) : null}
           </EuiText>
@@ -54,7 +53,7 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
           Loading additional entries
         </ProgressEntry>
       );
-    } else if (isExhausted) {
+    } else if (!hasMore) {
       return (
         <ProgressEntry
           alignment={alignment}

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

@@ -9,11 +9,6 @@ import * as React from 'react';
 import { TextScale } from '../../../../common/log_text_scale';
 import { TimeKey } from '../../../../common/time';
 import { callWithoutRepeats } from '../../../utils/handlers';
-import {
-  isIntervalLoadingPolicy,
-  isRunningLoadingProgress,
-  LoadingState,
-} from '../../../utils/loading_state';
 import { LogTextStreamEmptyView } from './empty_view';
 import { getStreamItemBeforeTimeKey, getStreamItemId, parseStreamItemId, StreamItem } from './item';
 import { LogTextStreamItemView } from './item_view';
@@ -28,9 +23,13 @@ interface ScrollableLogTextStreamViewProps {
   items: StreamItem[];
   scale: TextScale;
   wrap: boolean;
-  startLoadingState: LoadingState<any>;
-  endLoadingState: LoadingState<any>;
-  target: TimeKey;
+  isReloading: boolean;
+  isLoadingMore: boolean;
+  hasMoreBeforeStart: boolean;
+  hasMoreAfterEnd: boolean;
+  isStreaming: boolean;
+  lastLoadedTime: number | null;
+  target: TimeKey | null;
   jumpToTarget: (target: TimeKey) => any;
   reportVisibleInterval: (
     params: {
@@ -44,8 +43,8 @@ interface ScrollableLogTextStreamViewProps {
 }
 
 interface ScrollableLogTextStreamViewState {
-  target: TimeKey | undefined;
-  targetId: string | undefined;
+  target: TimeKey | null;
+  targetId: string | null;
 }
 
 export class ScrollableLogTextStreamView extends React.PureComponent<
@@ -58,43 +57,51 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
   ): Partial<ScrollableLogTextStreamViewState> | null {
     const hasNewTarget = nextProps.target && nextProps.target !== prevState.target;
     const hasItems = nextProps.items.length > 0;
-    const isEndStreaming = isIntervalLoadingPolicy(nextProps.endLoadingState.policy);
 
-    if (isEndStreaming && hasItems) {
+    if (nextProps.isStreaming && hasItems) {
       return {
         target: nextProps.target,
         targetId: getStreamItemId(nextProps.items[nextProps.items.length - 1]),
       };
     } else if (hasNewTarget && hasItems) {
       return {
         target: nextProps.target,
-        targetId: getStreamItemId(getStreamItemBeforeTimeKey(nextProps.items, nextProps.target)),
+        targetId: getStreamItemId(getStreamItemBeforeTimeKey(nextProps.items, nextProps.target!)),
       };
     } else if (!nextProps.target || !hasItems) {
       return {
-        target: undefined,
-        targetId: undefined,
+        target: null,
+        targetId: null,
       };
     }
 
     return null;
   }
 
   public readonly state = {
-    target: undefined,
-    targetId: undefined,
+    target: null,
+    targetId: null,
   };
 
   public render() {
-    const { items, height, width, scale, wrap, startLoadingState, endLoadingState } = this.props;
+    const {
+      items,
+      height,
+      width,
+      scale,
+      wrap,
+      isReloading,
+      isLoadingMore,
+      hasMoreBeforeStart,
+      hasMoreAfterEnd,
+      isStreaming,
+      lastLoadedTime,
+    } = this.props;
     const { targetId } = this.state;
 
     const hasItems = items.length > 0;
-    const isStartLoading = isRunningLoadingProgress(startLoadingState.current);
-    const isEndLoading = isRunningLoadingProgress(endLoadingState.current);
-    const isLoading = isStartLoading || isEndLoading;
 
-    if (isLoading && !hasItems) {
+    if (isReloading && !hasItems) {
       return <LogTextStreamLoadingView height={height} width={width} />;
     } else if (!hasItems) {
       return <LogTextStreamEmptyView height={height} width={width} reload={this.handleReload} />;
@@ -109,7 +116,13 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
         >
           {registerChild => (
             <>
-              <LogTextStreamLoadingItemView alignment="bottom" loadingState={startLoadingState} />
+              <LogTextStreamLoadingItemView
+                alignment="bottom"
+                isLoading={isLoadingMore}
+                hasMore={hasMoreBeforeStart}
+                isStreaming={false}
+                lastStreamingUpdate={null}
+              />
               {items.map(item => (
                 <MeasurableItemView
                   register={registerChild}
@@ -121,7 +134,13 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
                   )}
                 </MeasurableItemView>
               ))}
-              <LogTextStreamLoadingItemView alignment="top" loadingState={endLoadingState} />
+              <LogTextStreamLoadingItemView
+                alignment="top"
+                isLoading={isStreaming || isLoadingMore}
+                hasMore={hasMoreAfterEnd}
+                isStreaming={isStreaming}
+                lastStreamingUpdate={isStreaming ? lastLoadedTime : null}
+              />
             </>
           )}
         </VerticalScrollPanel>
@@ -130,7 +149,11 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
   }
 
   private handleReload = () => {
-    this.props.jumpToTarget(this.props.target);
+    const { jumpToTarget, target } = this.props;
+
+    if (target) {
+      jumpToTarget(target);
+    }
   };
 
   // this is actually a method but not recognized as such

x-pack/plugins/infra/public/components/logging/log_time_controls.tsx

@@ -12,18 +12,18 @@ import styled from 'styled-components';
 const noop = () => undefined;
 
 interface LogTimeControlsProps {
-  currentTime: number;
-  disableLiveStreaming: () => any;
-  enableLiveStreaming: () => any;
+  currentTime: number | null;
+  startLiveStreaming: (interval: number) => any;
+  stopLiveStreaming: () => any;
   isLiveStreaming: boolean;
   jumpToTime: (time: number) => any;
 }
 
 export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
   public render() {
-    const { currentTime, disableLiveStreaming, enableLiveStreaming, isLiveStreaming } = this.props;
+    const { currentTime, isLiveStreaming } = this.props;
 
-    const currentMoment = moment(currentTime);
+    const currentMoment = currentTime ? moment(currentTime) : null;
 
     if (isLiveStreaming) {
       return (
@@ -35,7 +35,7 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
             color="primary"
             iconType="pause"
             iconSide="left"
-            onClick={disableLiveStreaming}
+            onClick={this.stopLiveStreaming}
           >
             Stop streaming
           </EuiFilterButton>
@@ -53,10 +53,10 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
               shouldCloseOnSelect
               showTimeSelect
               timeFormat="LTS"
-              injectTimes={[currentMoment]}
+              injectTimes={currentMoment ? [currentMoment] : []}
             />
           </InlineWrapper>
-          <EuiFilterButton iconType="play" iconSide="left" onClick={enableLiveStreaming}>
+          <EuiFilterButton iconType="play" iconSide="left" onClick={this.startLiveStreaming}>
             Stream live
           </EuiFilterButton>
         </EuiFilterGroup>
@@ -69,6 +69,14 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
       this.props.jumpToTime(date.valueOf());
     }
   };
+
+  private startLiveStreaming = () => {
+    this.props.startLiveStreaming(5000);
+  };
+
+  private stopLiveStreaming = () => {
+    this.props.stopLiveStreaming();
+  };
 }
 
 const InlineWrapper = styled.div`

x-pack/plugins/infra/public/containers/logging_legacy/state/actions.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { targetActions } from './target';
+export { logPositionActions } from './log_position';
 export { entriesActions } from './entries';
 export { textviewActions } from './textview';
 export { summaryActions } from './summary';

x-pack/plugins/infra/public/containers/logging_legacy/state/entries/epics.ts

@@ -6,18 +6,12 @@
 
 import { Action } from 'redux';
 import { combineEpics, Epic, EpicWithState } from 'redux-observable';
-import { /*interval,*/ merge } from 'rxjs';
+import { merge } from 'rxjs';
 import { exhaustMap, filter, map, withLatestFrom } from 'rxjs/operators';
 
 import { pickTimeKey, TimeKey, timeKeyIsBetween } from '../../../../../common/time';
-import { targetActions } from '../target';
-import {
-  loadEntries,
-  loadMoreEntries,
-  reportVisibleEntries,
-  // startLiveStreaming,
-  // stopLiveStreaming,
-} from './actions';
+import { logPositionActions } from '../log_position';
+import { loadEntries, loadMoreEntries, reportVisibleEntries } from './actions';
 import { loadMoreEntriesEpic } from './load_more_operation';
 import { loadEntriesEpic } from './load_operation';
 
@@ -29,6 +23,7 @@ interface ManageEntriesDependencies<State> {
   selectEntriesEnd: (state: State) => TimeKey | null;
   selectHasMoreBeforeStart: (state: State) => boolean;
   selectHasMoreAfterEnd: (state: State) => boolean;
+  selectIsAutoReloading: (state: State) => boolean;
   selectIsLoadingEntries: (state: State) => boolean;
 }
 
@@ -52,11 +47,12 @@ export const createEntriesEffectsEpic = <State>(): Epic<
     selectEntriesEnd,
     selectHasMoreBeforeStart,
     selectHasMoreAfterEnd,
+    selectIsAutoReloading,
     selectIsLoadingEntries,
   }
 ) => {
   const shouldLoadAround$ = action$.pipe(
-    filter(targetActions.jumpToTarget.match),
+    filter(logPositionActions.jumpToTargetPosition.match),
     withLatestFrom(state$),
     filter(([{ payload }, state]) => {
       const entriesStart = selectEntriesStart(state);
@@ -73,6 +69,7 @@ export const createEntriesEffectsEpic = <State>(): Epic<
     filter(reportVisibleEntries.match),
     filter(({ payload: { pagesBeforeStart } }) => pagesBeforeStart < DESIRED_BUFFER_PAGES),
     withLatestFrom(state$),
+    filter(([action, state]) => !selectIsAutoReloading(state)),
     filter(([action, state]) => !selectIsLoadingEntries(state)),
     filter(([action, state]) => selectHasMoreBeforeStart(state)),
     map(([action, state]) => selectEntriesStart(state)),
@@ -84,6 +81,7 @@ export const createEntriesEffectsEpic = <State>(): Epic<
     filter(reportVisibleEntries.match),
     filter(({ payload: { pagesAfterEnd } }) => pagesAfterEnd < DESIRED_BUFFER_PAGES),
     withLatestFrom(state$),
+    filter(([action, state]) => !selectIsAutoReloading(state)),
     filter(([action, state]) => !selectIsLoadingEntries(state)),
     filter(([action, state]) => selectHasMoreAfterEnd(state)),
     map(([action, state]) => selectEntriesEnd(state)),

x-pack/plugins/infra/public/containers/logging_legacy/state/entries/selectors.ts

@@ -62,6 +62,8 @@ export const selectHasMoreAfterEnd = createSelector(
   data => (data ? data.hasMoreAfter : true)
 );
 
+export const selectEntriesLastLoadedTime = entriesGraphlStateSelectors.selectLoadingResultTime;
+
 export const selectEntriesStartLoadingState = entriesGraphlStateSelectors.selectLoadingState;
 
 export const selectEntriesEndLoadingState = entriesGraphlStateSelectors.selectLoadingState;

x-pack/plugins/infra/public/containers/logging_legacy/state/epics.ts

@@ -7,14 +7,16 @@
 import { combineEpics } from 'redux-observable';
 
 import { entriesEpics } from './entries';
+import { logPositionEpics } from './log_position';
 // import { searchResultsEpics } from './search_results';
 // import { searchSummaryEpics } from './search_summary';
 import { summaryEpics } from './summary';
 
 export const createRootEpic = <State>() =>
   combineEpics(
     summaryEpics.createSummaryEpic<State>(),
-    entriesEpics.createEntriesEpic<State>()
+    entriesEpics.createEntriesEpic<State>(),
+    logPositionEpics.createLogPositionEpic<State>()
     // searchResultsEpics.createSearchResultsEpic<State>(),
     // searchSummaryEpics.createSearchSummaryEpic<State>()
   );