[Logs UI] Pass dashboard filters to log stream embeddable (#91850)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/infra/public/components/log_stream/log_stream.tsx

@@ -13,7 +13,7 @@ import { LogEntryCursor } from '../../../common/log_entry';
 
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { useLogSource } from '../../containers/logs/log_source';
-import { useLogStream } from '../../containers/logs/log_stream';
+import { BuiltEsQuery, useLogStream } from '../../containers/logs/log_stream';
 
 import { ScrollableLogTextStreamView } from '../logging/log_text_stream';
 import { LogColumnRenderConfiguration } from '../../utils/log_column_render_configuration';
@@ -57,7 +57,7 @@ export interface LogStreamProps {
   sourceId?: string;
   startTimestamp: number;
   endTimestamp: number;
-  query?: string | Query;
+  query?: string | Query | BuiltEsQuery;
   center?: LogEntryCursor;
   highlight?: string;
   height?: string | number;

x-pack/plugins/infra/public/components/log_stream/log_stream_embeddable.tsx

@@ -8,7 +8,8 @@
 import { CoreStart } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Query, TimeRange } from '../../../../../../src/plugins/data/public';
+import { Subscription } from 'rxjs';
+import { Query, TimeRange, esQuery, Filter } from '../../../../../../src/plugins/data/public';
 import {
   Embeddable,
   EmbeddableInput,
@@ -23,13 +24,15 @@ import { LazyLogStreamWrapper } from './lazy_log_stream_wrapper';
 export const LOG_STREAM_EMBEDDABLE = 'LOG_STREAM_EMBEDDABLE';
 
 export interface LogStreamEmbeddableInput extends EmbeddableInput {
+  filters: Filter[];
   timeRange: TimeRange;
   query: Query;
 }
 
 export class LogStreamEmbeddable extends Embeddable<LogStreamEmbeddableInput> {
   public readonly type = LOG_STREAM_EMBEDDABLE;
   private node?: HTMLElement;
+  private subscription: Subscription;
 
   constructor(
     private core: CoreStart,
@@ -38,6 +41,8 @@ export class LogStreamEmbeddable extends Embeddable<LogStreamEmbeddableInput> {
     parent?: IContainer
   ) {
     super(initialInput, {}, parent);
+
+    this.subscription = this.getInput$().subscribe(() => this.renderComponent());
   }
 
   public render(node: HTMLElement) {
@@ -49,22 +54,23 @@ export class LogStreamEmbeddable extends Embeddable<LogStreamEmbeddableInput> {
     this.renderComponent();
   }
 
-  public reload() {
-    this.renderComponent();
-  }
-
   public destroy() {
     super.destroy();
+    this.subscription.unsubscribe();
     if (this.node) {
       ReactDOM.unmountComponentAtNode(this.node);
     }
   }
 
+  public async reload() {}
+
   private renderComponent() {
     if (!this.node) {
       return;
     }
 
+    const parsedQuery = esQuery.buildEsQuery(undefined, this.input.query, this.input.filters);
+
     const startTimestamp = datemathToEpochMillis(this.input.timeRange.from);
     const endTimestamp = datemathToEpochMillis(this.input.timeRange.to, 'up');
 
@@ -80,7 +86,7 @@ export class LogStreamEmbeddable extends Embeddable<LogStreamEmbeddableInput> {
               startTimestamp={startTimestamp}
               endTimestamp={endTimestamp}
               height="100%"
-              query={this.input.query}
+              query={parsedQuery}
             />
           </div>
         </EuiThemeProvider>

x-pack/plugins/infra/public/containers/logs/log_stream/index.ts

@@ -17,11 +17,13 @@ import { useFetchLogEntriesAfter } from './use_fetch_log_entries_after';
 import { useFetchLogEntriesAround } from './use_fetch_log_entries_around';
 import { useFetchLogEntriesBefore } from './use_fetch_log_entries_before';
 
+export type BuiltEsQuery = ReturnType<typeof esQuery.buildEsQuery>;
+
 interface LogStreamProps {
   sourceId: string;
   startTimestamp: number;
   endTimestamp: number;
-  query?: string | Query;
+  query?: string | Query | BuiltEsQuery;
   center?: LogEntryCursor;
   columns?: LogSourceConfigurationProperties['logColumns'];
 }
@@ -80,12 +82,10 @@ export function useLogStream({
       return undefined;
     } else if (typeof query === 'string') {
       return esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(query));
-    } else if (query.language === 'kuery') {
-      return esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(query.query as string));
-    } else if (query.language === 'lucene') {
-      return esQuery.luceneStringToDsl(query.query as string);
+    } else if ('language' in query) {
+      return getEsQueryFromQueryObject(query);
     } else {
-      return undefined;
+      return query;
     }
   }, [query]);
 
@@ -268,4 +268,13 @@ export function useLogStream({
   };
 }
 
+function getEsQueryFromQueryObject(query: Query) {
+  switch (query.language) {
+    case 'kuery':
+      return esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(query.query as string));
+    case 'lucene':
+      return esQuery.luceneStringToDsl(query.query as string);
+  }
+}
+
 export const [LogStreamProvider, useLogStreamContext] = createContainer(useLogStream);