Link to a more useful log stream from setFilter

elastic · Aug 19, 2020 · 044f951 · 044f951
1 parent da5f350
commit 044f951
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_flyout/index.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_flyout/index.tsx
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { LogEntryFlyout } from './log_entry_flyout';
+export * from './log_entry_flyout';
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx
@@ -26,14 +26,19 @@ import { InfraLoadingPanel } from '../../loading';
 import { LogEntryActionsMenu } from './log_entry_actions_menu';
 import { LogEntriesItem, LogEntriesItemField } from '../../../../common/http_api';
 
-interface Props {
+export interface LogEntryFlyoutProps {
   flyoutItem: LogEntriesItem | null;
   setFlyoutVisibility: (visible: boolean) => void;
   setFilter: (filter: string, flyoutItemId: string, timeKey?: TimeKey) => void;
   loading: boolean;
 }
 
-export const LogEntryFlyout = ({ flyoutItem, loading, setFlyoutVisibility, setFilter }: Props) => {
+export const LogEntryFlyout = ({
+  flyoutItem,
+  loading,
+  setFlyoutVisibility,
+  setFilter,
+}: LogEntryFlyoutProps) => {
   const createFilterHandler = useCallback(
     (field: LogEntriesItemField) => () => {
       const filter = `${field.field}:"${field.value}"`;

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
@@ -7,6 +7,8 @@
 import datemath from '@elastic/datemath';
 import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel, EuiSuperDatePicker } from '@elastic/eui';
 import moment from 'moment';
+import { encode, RisonValue } from 'rison-node';
+import { stringify } from 'query-string';
 import React, { useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import { euiStyled, useTrackPageview } from '../../../../../observability/public';
@@ -30,7 +32,7 @@ import {
   StringTimeRange,
   useLogAnalysisResultsUrlState,
 } from './use_log_entry_rate_results_url_state';
-import { LogEntryFlyout } from '../../../components/logging/log_entry_flyout';
+import { LogEntryFlyout, LogEntryFlyoutProps } from '../../../components/logging/log_entry_flyout';
 import { LogFlyout } from '../../../containers/logs/log_flyout';
 
 export const SORT_DEFAULTS = {
@@ -46,11 +48,6 @@ export const LogEntryRateResultsContent: React.FunctionComponent = () => {
   useTrackPageview({ app: 'infra_logs', path: 'log_entry_rate_results' });
   useTrackPageview({ app: 'infra_logs', path: 'log_entry_rate_results', delay: 15000 });
 
-  const history = useHistory();
-  const linkToLogStream = useCallback((filter) => history.push(`/link-to?filter=${filter}`), [
-    history,
-  ]);
-
   const { sourceId } = useLogSourceContext();
 
   const { hasLogAnalysisSetupCapabilities } = useLogAnalysisCapabilitiesContext();
@@ -87,6 +84,30 @@ export const LogEntryRateResultsContent: React.FunctionComponent = () => {
     lastChangedTime: Date.now(),
   }));
 
+  const history = useHistory();
+  const linkToLogStream = useCallback<LogEntryFlyoutProps['setFilter']>(
+    (filter, id, timeKey) => {
+      const params = {
+        logPosition: encode({
+          end: moment(queryTimeRange.value.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+          position: timeKey as RisonValue,
+          start: moment(queryTimeRange.value.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+          streamLive: false,
+        }),
+        flyoutOptions: encode({
+          surroundingLogsId: id,
+        }),
+        logFilter: encode({
+          expression: filter,
+          kind: 'kuery',
+        }),
+      };
+
+      history.push(`/stream?${stringify(params)}`);
+    },
+    [history, queryTimeRange]
+  );
+
   const bucketDuration = useMemo(
     () => getBucketDuration(queryTimeRange.value.startTime, queryTimeRange.value.endTime),
     [queryTimeRange.value.endTime, queryTimeRange.value.startTime]