opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-24 11:04:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Elasticsearch: Migrate queryeditor to React (#28033)

Browse Source 
Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Giordano Ricci
2020-12-04 14:29:40 +00:00
committed by GitHub
parent 3d6380a0aa
commit bb45f5fedc
76 changed files with 4364 additions and 1924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import React, { FunctionComponent } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { ElasticDatasource } from '../../datasource';
import { ElasticsearchOptions, ElasticsearchQuery } from '../../types';
import { ElasticsearchProvider } from './ElasticsearchQueryContext';
import { InlineField, InlineFieldRow, Input, QueryField } from '@grafana/ui';
import { changeAliasPattern, changeQuery } from './state';
import { MetricAggregationsEditor } from './MetricAggregationsEditor';
import { BucketAggregationsEditor } from './BucketAggregationsEditor';
import { useDispatch } from '../../hooks/useStatelessReducer';
import { useNextId } from '../../hooks/useNextId';
export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>;
export const QueryEditor: FunctionComponent<ElasticQueryEditorProps> = ({ query, onChange, datasource }) => (
<ElasticsearchProvider datasource={datasource} onChange={onChange} query={query}>
<QueryEditorForm value={query} />
</ElasticsearchProvider>
);
interface Props {
value: ElasticsearchQuery;
}
const QueryEditorForm: FunctionComponent<Props> = ({ value }) => {
const dispatch = useDispatch();
const nextId = useNextId();
return (
<>
<InlineFieldRow>
<InlineField label="Query" labelWidth={17} grow>
<QueryField
query={value.query}
// By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
// And slate will claim the focus, making it impossible to leave the field.
onBlur={() => {}}
onChange={query => dispatch(changeQuery(query))}
placeholder="Lucene Query"
portalOrigin="elasticsearch"
/>
</InlineField>
<InlineField label="Alias" labelWidth={15}>
<Input placeholder="Alias Pattern" onBlur={e => dispatch(changeAliasPattern(e.currentTarget.value))} />
</InlineField>
</InlineFieldRow>
<MetricAggregationsEditor nextId={nextId} />
<BucketAggregationsEditor nextId={nextId} />
</>
);
};