[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:
parent
98c1f94477
commit
baf0b3577b
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue