Use <LogStream /> in "View in context" component

elastic · Sep 1, 2020 · 2b60b1a · 2b60b1a
1 parent 66a2919
commit 2b60b1a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 91 deletions.
diff --git a/x-pack/plugins/infra/public/containers/logs/view_log_in_context/view_log_in_context.ts b/x-pack/plugins/infra/public/containers/logs/view_log_in_context/view_log_in_context.ts
@@ -3,34 +3,17 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import createContainer from 'constate';
 import { LogEntry } from '../../../../common/http_api';
-import { fetchLogEntries } from '../log_entries/api/fetch_log_entries';
-import { esKuery } from '../../../../../../../src/plugins/data/public';
-
-function getQueryFromLogEntry(entry: LogEntry) {
- const expression = Object.entries(entry.context).reduce((kuery, [key, value]) => {
- const currentExpression = `${key} : "${value}"`;
- if (kuery.length > 0) {
- return `${kuery} AND ${currentExpression}`;
- } else {
- return currentExpression;
- }
- }, '');
-
- return JSON.stringify(esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(expression)));
-}
 
 interface ViewLogInContextProps {
  sourceId: string;
  startTimestamp: number;
  endTimestamp: number;
 }
 
-export interface ViewLogInContextState {
- entries: LogEntry[];
- isLoading: boolean;
+export interface ViewLogInContextState extends ViewLogInContextProps {
  contextEntry?: LogEntry;
 }
 
@@ -42,37 +25,14 @@ export const useViewLogInContext = (
  props: ViewLogInContextProps
 ): [ViewLogInContextState, ViewLogInContextCallbacks] => {
  const [contextEntry, setContextEntry] = useState<LogEntry | undefined>();
- const [entries, setEntries] = useState<LogEntry[]>([]);
- const [isLoading, setIsLoading] = useState<boolean>(false);
  const { startTimestamp, endTimestamp, sourceId } = props;
 
- const maybeFetchLogs = useCallback(async () => {
- if (contextEntry) {
- setIsLoading(true);
- const { data } = await fetchLogEntries({
- sourceId,
- startTimestamp,
- endTimestamp,
- center: contextEntry.cursor,
- query: getQueryFromLogEntry(contextEntry),
- });
- setEntries(data.entries);
- setIsLoading(false);
- } else {
- setEntries([]);
- setIsLoading(false);
- }
- }, [contextEntry, startTimestamp, endTimestamp, sourceId]);
-
- useEffect(() => {
- maybeFetchLogs();
- }, [maybeFetchLogs]);
-
  return [
  {
+ startTimestamp,
+ endTimestamp,
+ sourceId,
  contextEntry,
- entries,
- isLoading,
  },
  {
  setContextEntry,

diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx
@@ -15,40 +15,36 @@ import {
  EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { noop } from 'lodash';
+import { isEmpty } from 'lodash';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { LogEntry } from '../../../../common/http_api';
-import { ScrollableLogTextStreamView } from '../../../components/logging/log_text_stream';
-import { useLogSourceContext } from '../../../containers/logs/log_source';
-import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
 import { useViewportDimensions } from '../../../utils/use_viewport_dimensions';
 import { euiStyled } from '../../../../../observability/public';
+import { LogStream } from '../../../components/log_stream';
 
 const MODAL_MARGIN = 25;
 
 export const PageViewLogInContext: React.FC = () => {
- const { sourceConfiguration } = useLogSourceContext();
- const { textScale, textWrap } = useContext(LogViewConfiguration.Context);
- /* eslint-disable-next-line react-hooks/exhaustive-deps */
- const columnConfigurations = useMemo(() => sourceConfiguration?.configuration.logColumns ?? [], [
- sourceConfiguration,
- ]);
- const [{ contextEntry, entries, isLoading }, { setContextEntry }] = useContext(
- ViewLogInContext.Context
- );
+ const [
+ { contextEntry, startTimestamp, endTimestamp, sourceId },
+ { setContextEntry },
+ ] = useContext(ViewLogInContext.Context);
  const closeModal = useCallback(() => setContextEntry(undefined), [setContextEntry]);
  const { width: vw, height: vh } = useViewportDimensions();
 
- const streamItems = useMemo(
- () =>
- entries.map((entry) => ({
- kind: 'logEntry' as const,
- logEntry: entry,
- highlights: [],
- })),
- [entries]
- );
+ const contextQuery = useMemo(() => {
+ if (contextEntry && !isEmpty(contextEntry.context)) {
+ return Object.entries(contextEntry.context).reduce((kuery, [key, value]) => {
+ const currentExpression = `${key} : "${value}"`;
+ if (kuery.length > 0) {
+ return `${kuery} AND ${currentExpression}`;
+ } else {
+ return currentExpression;
+ }
+ }, '');
+ }
+ }, [contextEntry]);
 
  if (!contextEntry) {
  return null;
@@ -64,31 +60,17 @@ export const PageViewLogInContext: React.FC = () => {
  wrap={false}
  style={{ height: '100%' }}
  >
- <EuiFlexItem grow={1}>
+ <EuiFlexItem grow={false}>
  <LogEntryContext context={contextEntry.context} />
- <EuiSpacer size="m" />
- <ScrollableLogTextStreamView
- target={contextEntry.cursor}
- columnConfigurations={columnConfigurations}
- items={streamItems}
- scale={textScale}
- wrap={textWrap}
- isReloading={isLoading}
- isLoadingMore={false}
- hasMoreBeforeStart={false}
- hasMoreAfterEnd={false}
- isStreaming={false}
- lastLoadedTime={null}
- jumpToTarget={noop}
- reportVisibleInterval={noop}
- loadNewerItems={noop}
- reloadItems={noop}
- highlightedItem={contextEntry.id}
- currentHighlightKey={null}
- startDateExpression={''}
- endDateExpression={''}
- updateDateRange={noop}
- startLiveStreaming={noop}
+ </EuiFlexItem>
+ <EuiFlexItem grow={1}>
+ <LogStream
+ sourceId={sourceId}
+ startTimestamp={startTimestamp}
+ endTimestamp={endTimestamp}
+ query={contextQuery}
+ center={contextEntry.cursor}
+ highlight={contextEntry.id}
  />
  </EuiFlexItem>
  </EuiFlexGroup>