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

Elasticsearch: Fix QueryEditor styling issues (#44041)

Browse Source
This commit is contained in:
Giordano Ricci
2022-01-14 14:58:25 +00:00
committed by GitHub
parent 3239c62a24
commit 6b1321dbfa
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
View File

@ -47,12 +47,12 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
display: flex; display: flex;
`} `}
> >
<div <InlineField label="Query" labelWidth={8}>
className={css` <div
width: 250px; className={css`
`} width: 150px;
> `}
<InlineField label="Query" labelWidth={10}> >
<QueryField <QueryField
placeholder="Lucene Query" placeholder="Lucene Query"
portalOrigin="elasticsearch" portalOrigin="elasticsearch"
@ -60,10 +60,11 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
onChange={(query) => dispatch(changeFilter({ index, filter: { ...filter, query } }))} onChange={(query) => dispatch(changeFilter({ index, filter: { ...filter, query } }))}
query={filter.query} query={filter.query}
/> />
</InlineField> </div>
</div> </InlineField>
<InlineField label="Label" labelWidth={10}> <InlineField label="Label" labelWidth={8}>
<Input <Input
width={16}
id={`${baseId}-label-${index}`} id={`${baseId}-label-${index}`}
placeholder="Label" placeholder="Label"
onBlur={(e) => dispatch(changeFilter({ index, filter: { ...filter, label: e.target.value } }))} onBlur={(e) => dispatch(changeFilter({ index, filter: { ...filter, label: e.target.value } }))}

25
public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
View File

@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import { getDefaultTimeRange, QueryEditorProps } from '@grafana/data'; import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { ElasticDatasource } from '../../datasource'; import { ElasticDatasource } from '../../datasource';
import { ElasticsearchOptions, ElasticsearchQuery } from '../../types'; import { ElasticsearchOptions, ElasticsearchQuery } from '../../types';
import { ElasticsearchProvider } from './ElasticsearchQueryContext'; import { ElasticsearchProvider } from './ElasticsearchQueryContext';
import { InlineField, InlineFieldRow, Input, QueryField } from '@grafana/ui'; import { InlineField, InlineLabel, Input, QueryField, useStyles2 } from '@grafana/ui';
import { changeAliasPattern, changeQuery } from './state'; import { changeAliasPattern, changeQuery } from './state';
import { MetricAggregationsEditor } from './MetricAggregationsEditor'; import { MetricAggregationsEditor } from './MetricAggregationsEditor';
import { BucketAggregationsEditor } from './BucketAggregationsEditor'; import { BucketAggregationsEditor } from './BucketAggregationsEditor';
import { useDispatch } from '../../hooks/useStatelessReducer'; import { useDispatch } from '../../hooks/useStatelessReducer';
import { useNextId } from '../../hooks/useNextId'; import { useNextId } from '../../hooks/useNextId';
import { metricAggregationConfig } from './MetricAggregationsEditor/utils'; import { metricAggregationConfig } from './MetricAggregationsEditor/utils';
import { css } from '@emotion/css';
export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>; export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchQuery, ElasticsearchOptions>;
@ -25,6 +26,16 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }:
</ElasticsearchProvider> </ElasticsearchProvider>
); );
const getStyles = (theme: GrafanaTheme2) => ({
root: css`
display: flex;
`,
queryFieldWrapper: css`
flex-grow: 1;
margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
`,
});
interface Props { interface Props {
value: ElasticsearchQuery; value: ElasticsearchQuery;
} }
@ -32,6 +43,7 @@ interface Props {
const QueryEditorForm = ({ value }: Props) => { const QueryEditorForm = ({ value }: Props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const nextId = useNextId(); const nextId = useNextId();
const styles = useStyles2(getStyles);
// To be considered a time series query, the last bucked aggregation must be a Date Histogram // To be considered a time series query, the last bucked aggregation must be a Date Histogram
const isTimeSeriesQuery = value.bucketAggs?.slice(-1)[0]?.type === 'date_histogram'; const isTimeSeriesQuery = value.bucketAggs?.slice(-1)[0]?.type === 'date_histogram';
@ -42,8 +54,9 @@ const QueryEditorForm = ({ value }: Props) => {
return ( return (
<> <>
<InlineFieldRow> <div className={styles.root}>
<InlineField label="Query" labelWidth={17} grow> <InlineLabel width={17}>Query</InlineLabel>
<div className={styles.queryFieldWrapper}>
<QueryField <QueryField
query={value.query} query={value.query}
// By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender // By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
@ -53,7 +66,7 @@ const QueryEditorForm = ({ value }: Props) => {
placeholder="Lucene Query" placeholder="Lucene Query"
portalOrigin="elasticsearch" portalOrigin="elasticsearch"
/> />
</InlineField> </div>
<InlineField <InlineField
label="Alias" label="Alias"
labelWidth={15} labelWidth={15}
@ -67,7 +80,7 @@ const QueryEditorForm = ({ value }: Props) => {
defaultValue={value.alias} defaultValue={value.alias}
/> />
</InlineField> </InlineField>
</InlineFieldRow> </div>
<MetricAggregationsEditor nextId={nextId} /> <MetricAggregationsEditor nextId={nextId} />
{showBucketAggregationsEditor && <BucketAggregationsEditor nextId={nextId} />} {showBucketAggregationsEditor && <BucketAggregationsEditor nextId={nextId} />}