[Logs UI] Refactor log entry data fetching to hooks (elastic#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

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),
+ };
+};