Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Elasticsearch: Visualize logs in Explore (#17605)
* explore: try to use existing mode when switching datasource * elasticsearch: initial explore logs support * Elasticsearch: Adds ElasticsearchOptions type Updates tests accordingly * Elasticsearch: Adds typing to query method * Elasticsearch: Makes maxConcurrentShardRequests optional * Explore: Allows empty query for elasticsearch datasource * Elasticsearch: Unifies ElasticsearchQuery interface definition Removes check for context === 'explore' * Elasticsearch: Removes context property from ElasticsearchQuery interface Adds field property Removes metricAggs property Adds typing to metrics property * Elasticsearch: Runs default 'empty' query when 'clear all' button is pressed * Elasticsearch: Removes index property from ElasticsearchOptions interface * Elasticsearch: Removes commented code from ElasticsearchQueryField.tsx * Elasticsearch: Adds comment warning usage of for...in to elastic_response.ts * Elasticsearch: adds tests related to log queries
- Loading branch information
1 parent
2fb45ee
commit eecd8d1
Showing
17 changed files
with
617 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import _ from 'lodash'; | ||
| import React from 'react'; | ||
| // @ts-ignore | ||
| import PluginPrism from 'slate-prism'; | ||
| // @ts-ignore | ||
| import Prism from 'prismjs'; | ||
|
|
||
| // dom also includes Element polyfills | ||
| import QueryField from 'app/features/explore/QueryField'; | ||
| import { ExploreQueryFieldProps } from '@grafana/ui'; | ||
| import { ElasticDatasource } from '../datasource'; | ||
| import { ElasticsearchOptions, ElasticsearchQuery } from '../types'; | ||
|
|
||
| interface Props extends ExploreQueryFieldProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions> {} | ||
|
|
||
| interface State { | ||
| syntaxLoaded: boolean; | ||
| } | ||
|
|
||
| class ElasticsearchQueryField extends React.PureComponent<Props, State> { | ||
| plugins: any[]; | ||
|
|
||
| constructor(props: Props, context: React.Context<any>) { | ||
| super(props, context); | ||
|
|
||
| this.plugins = [ | ||
| PluginPrism({ | ||
| onlyIn: (node: any) => node.type === 'code_block', | ||
| getSyntax: (node: any) => 'lucene', | ||
| }), | ||
| ]; | ||
|
|
||
| this.state = { | ||
| syntaxLoaded: false, | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.onChangeQuery('', true); | ||
| } | ||
|
|
||
| componentWillUnmount() {} | ||
|
|
||
| componentDidUpdate(prevProps: Props) { | ||
| // if query changed from the outside (i.e. cleared via explore toolbar) | ||
| if (!this.props.query.isLogsQuery) { | ||
| this.onChangeQuery('', true); | ||
| } | ||
| } | ||
|
|
||
| onChangeQuery = (value: string, override?: boolean) => { | ||
| // Send text change to parent | ||
| const { query, onChange, onRunQuery } = this.props; | ||
| if (onChange) { | ||
| const nextQuery: ElasticsearchQuery = { ...query, query: value, isLogsQuery: true }; | ||
| onChange(nextQuery); | ||
|
|
||
| if (override && onRunQuery) { | ||
| onRunQuery(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const { queryResponse, query } = this.props; | ||
| const { syntaxLoaded } = this.state; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="gf-form-inline gf-form-inline--nowrap"> | ||
| <div className="gf-form gf-form--grow flex-shrink-1"> | ||
| <QueryField | ||
| additionalPlugins={this.plugins} | ||
| initialQuery={query.query} | ||
| onChange={this.onChangeQuery} | ||
| onRunQuery={this.props.onRunQuery} | ||
| placeholder="Enter a Lucene query" | ||
| portalOrigin="elasticsearch" | ||
| syntaxLoaded={syntaxLoaded} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {queryResponse && queryResponse.error ? ( | ||
| <div className="prom-query-field-info text-error">{queryResponse.error.message}</div> | ||
| ) : null} | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ElasticsearchQueryField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.