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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alejandro Fernández Gómez 2021-03-08 16:03:14 +01:00 committed by GitHub
parent 98c1f94477
commit baf0b3577b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 14 deletions

View file

@ -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;

View file

@ -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,6 +24,7 @@ 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;
}
@ -30,6 +32,7 @@ export interface LogStreamEmbeddableInput extends EmbeddableInput {
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>

View file

@ -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);