[Logs UI] Refactor log entry data fetching to hooks (#51526)

* Get initialinitial log fetch working with v2 store

* Replicate shouldLoadAroundPosition logic within hooks

* Reload entries on filter change

* Add scroll to load additional entries functionality

* Cleanup types types and remove state/remote folder

* Typescript cleanup

* Remove extraneous console.log

* Fix typecheck

* Add action to load new entries manually

* Typecheck fix

* Move v2 store stuff into logs containers

* Typecheck fix

* More typecheck fix

* Remove filterQuery from log highlights redux bridge

* Rename LogEntriesDependencies to LogEntriesFetchParams

* Fix endless reloading bug

* Fix duplicate entry rendering

* Make sourceId into a dynamic parameter

* Fix bug in pagesAfterEnd not being reported causing endless reload

* Fix bugs with live streaming

Author: Zacqary

x-pack/legacy/plugins/infra/public/apps/start_app.tsx

@@ -21,6 +21,7 @@ import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
 import { ApolloClientContext } from '../utils/apollo_context';
+import { ReduxStateContextProvider } from '../utils/redux_context';
 import { HistoryContext } from '../utils/history_context';
 import {
   useUiSetting$,
@@ -46,15 +47,17 @@ export async function startApp(libs: InfraFrontendLibs) {
         <UICapabilitiesProvider>
           <EuiErrorBoundary>
             <ReduxStoreProvider store={store}>
-              <ApolloProvider client={libs.apolloClient}>
-                <ApolloClientContext.Provider value={libs.apolloClient}>
-                  <EuiThemeProvider darkMode={darkMode}>
-                    <HistoryContext.Provider value={history}>
-                      <PageRouter history={history} />
-                    </HistoryContext.Provider>
-                  </EuiThemeProvider>
-                </ApolloClientContext.Provider>
-              </ApolloProvider>
+              <ReduxStateContextProvider>
+                <ApolloProvider client={libs.apolloClient}>
+                  <ApolloClientContext.Provider value={libs.apolloClient}>
+                    <EuiThemeProvider darkMode={darkMode}>
+                      <HistoryContext.Provider value={history}>
+                        <PageRouter history={history} />
+                      </HistoryContext.Provider>
+                    </EuiThemeProvider>
+                  </ApolloClientContext.Provider>
+                </ApolloProvider>
+              </ReduxStateContextProvider>
             </ReduxStoreProvider>
           </EuiErrorBoundary>
         </UICapabilitiesProvider>

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

@@ -18,7 +18,7 @@ interface LogTextStreamLoadingItemViewProps {
   hasMore: boolean;
   isLoading: boolean;
   isStreaming: boolean;
-  lastStreamingUpdate: number | null;
+  lastStreamingUpdate: Date | null;
   onLoadMore?: () => void;
 }
 

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

@@ -39,7 +39,7 @@ interface ScrollableLogTextStreamViewProps {
   hasMoreBeforeStart: boolean;
   hasMoreAfterEnd: boolean;
   isStreaming: boolean;
-  lastLoadedTime: number | null;
+  lastLoadedTime: Date | null;
   target: TimeKey | null;
   jumpToTarget: (target: TimeKey) => any;
   reportVisibleInterval: (params: {
@@ -143,7 +143,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
     const hasItems = items.length > 0;
     return (
       <ScrollableLogTextStreamViewWrapper>
-        {isReloading && !hasItems ? (
+        {isReloading && (!isStreaming || !hasItems) ? (
           <InfraLoadingPanel
             width="100%"
             height="100%"

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

@@ -163,8 +163,10 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
       // Flag the scrollTop change that's about to happen as programmatic, as
       // opposed to being in direct response to user input
       this.nextScrollEventFromCenterTarget = true;
-      scrollRef.current.scrollTop = targetDimensions.top + targetOffset - scrollViewHeight / 2;
-      return true;
+      const currentScrollTop = scrollRef.current.scrollTop;
+      const newScrollTop = targetDimensions.top + targetOffset - scrollViewHeight / 2;
+      scrollRef.current.scrollTop = newScrollTop;
+      return currentScrollTop !== newScrollTop;
     }
     return false;
   };

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { ApolloClient } from 'apollo-client';
+import { TimeKey } from '../../../../common/time';
+import { logEntriesQuery } from '../../../graphql/log_entries.gql_query';
+import { useApolloClient } from '../../../utils/apollo_context';
+import { LogEntriesResponse } from '.';
+
+const LOAD_CHUNK_SIZE = 200;
+
+type LogEntriesGetter = (
+  client: ApolloClient<{}>,
+  countBefore: number,
+  countAfter: number
+) => (params: {
+  sourceId: string;
+  timeKey: TimeKey | null;
+  filterQuery: string | null;
+}) => Promise<LogEntriesResponse>;
+
+const getLogEntries: LogEntriesGetter = (client, countBefore, countAfter) => async ({
+  sourceId,
+  timeKey,
+  filterQuery,
+}) => {
+  if (!timeKey) throw new Error('TimeKey is null');
+  const result = await client.query({
+    query: logEntriesQuery,
+    variables: {
+      sourceId,
+      timeKey: { time: timeKey.time, tiebreaker: timeKey.tiebreaker },
+      countBefore,
+      countAfter,
+      filterQuery,
+    },
+    fetchPolicy: 'no-cache',
+  });
+  // Workaround for Typescript. Since we're removing the GraphQL API in another PR or two
+  // 7.6 goes out I don't think it's worth the effort to actually make this
+  // typecheck pass
+  const { source } = result.data as any;
+  const { logEntriesAround } = source;
+  return {
+    entries: logEntriesAround.entries,
+    entriesStart: logEntriesAround.start,
+    entriesEnd: logEntriesAround.end,
+    hasMoreAfterEnd: logEntriesAround.hasMoreAfter,
+    hasMoreBeforeStart: logEntriesAround.hasMoreBefore,
+    lastLoadedTime: new Date(),
+  };
+};
+
+export const useGraphQLQueries = () => {
+  const client = useApolloClient();
+  if (!client) throw new Error('Unable to get Apollo Client from context');
+  return {
+    getLogEntriesAround: getLogEntries(client, LOAD_CHUNK_SIZE, LOAD_CHUNK_SIZE),
+    getLogEntriesBefore: getLogEntries(client, LOAD_CHUNK_SIZE, 0),
+    getLogEntriesAfter: getLogEntries(client, 0, LOAD_CHUNK_SIZE),
+  };
+};