Skip to content

Commit d7e192a

Browse files
ivanahuckovazoltanbedi
ivanahuckova
and
zoltanbedi
authored
Prometheus/Explore: Update position of fields in editor (grafana#27816)
* Update position of buttons * Refactor, add tests * Pass onKeydown func * Update public/app/plugins/datasource/prometheus/components/PromQueryField.tsx Co-authored-by: Zoltán Bedi <[email protected]> Co-authored-by: Zoltán Bedi <[email protected]>
1 parent e82e3f2 commit d7e192a

File tree

6 files changed

+155
-187
lines changed

6 files changed

+155
-187
lines changed

‎public/app/plugins/datasource/prometheus/components/PromExploreExtraField.test.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
11
import React from 'react';
2-
import { shallow } from 'enzyme';
3-
import { PromExploreExtraField, PromExploreExtraFieldProps } from './PromExploreExtraField';
2+
import { render, screen } from '@testing-library/react';
3+
import { PromExploreExtraFieldProps, PromExploreExtraField } from './PromExploreExtraField';
44

55
const setup = (propOverrides?: PromExploreExtraFieldProps) => {
6-
const label = 'Prometheus Explore Extra Field';
7-
const value = '123';
8-
const onChangeFunc = jest.fn();
6+
const queryType = 'range';
7+
const stepValue = '1';
8+
const onStepChange = jest.fn();
9+
const onQueryTypeChange = jest.fn();
910
const onKeyDownFunc = jest.fn();
1011

1112
const props: any = {
12-
label,
13-
value,
14-
onChangeFunc,
13+
queryType,
14+
stepValue,
15+
onStepChange,
16+
onQueryTypeChange,
1517
onKeyDownFunc,
1618
};
1719

1820
Object.assign(props, propOverrides);
1921

20-
return shallow(<PromExploreExtraField {...props} />);
22+
return render(<PromExploreExtraField {...props} />);
2123
};
2224

23-
describe('PrometheusExploreExtraField', () => {
24-
it('should render component', () => {
25-
const wrapper = setup();
26-
expect(wrapper).toMatchSnapshot();
25+
describe('PromExploreExtraField', () => {
26+
it('should render step field', () => {
27+
setup();
28+
expect(screen.getByTestId('stepField')).toBeInTheDocument();
29+
});
30+
31+
it('should render query type field', () => {
32+
setup();
33+
expect(screen.getByTestId('queryTypeField')).toBeInTheDocument();
2734
});
2835
});

‎public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

Lines changed: 61 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,72 @@
11
// Libraries
22
import React, { memo } from 'react';
3+
import { css, cx } from 'emotion';
34

45
// Types
5-
import { InlineFormLabel } from '@grafana/ui';
6+
import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
67

78
export interface PromExploreExtraFieldProps {
8-
label: string;
9-
onChangeFunc: (e: React.SyntheticEvent<HTMLInputElement>) => void;
9+
queryType: string;
10+
stepValue: string;
11+
onStepChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
1012
onKeyDownFunc: (e: React.KeyboardEvent<HTMLInputElement>) => void;
11-
value: string;
12-
hasTooltip?: boolean;
13-
tooltipContent?: string;
13+
onQueryTypeChange: (value: string) => void;
1414
}
1515

16-
export function PromExploreExtraField(props: PromExploreExtraFieldProps) {
17-
const { label, onChangeFunc, onKeyDownFunc, value, hasTooltip, tooltipContent } = props;
16+
export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
17+
({ queryType, stepValue, onStepChange, onQueryTypeChange, onKeyDownFunc }) => {
18+
const rangeOptions = [
19+
{ value: 'range', label: 'Range' },
20+
{ value: 'instant', label: 'Instant' },
21+
{ value: 'both', label: 'Both' },
22+
];
1823

19-
return (
20-
<div className="gf-form-inline" aria-label="Prometheus extra field">
21-
<div className="gf-form">
22-
<InlineFormLabel width={5} tooltip={hasTooltip ? tooltipContent : undefined}>
23-
{label}
24-
</InlineFormLabel>
25-
<input
26-
type={'text'}
27-
className="gf-form-input width-4"
28-
placeholder={'auto'}
29-
onChange={onChangeFunc}
30-
onKeyDown={onKeyDownFunc}
31-
value={value}
32-
/>
33-
</div>
34-
</div>
35-
);
36-
}
24+
return (
25+
<div aria-label="Prometheus extra field" className="gf-form-inline">
26+
{/*QueryTypeField */}
27+
<div
28+
data-testid="queryTypeField"
29+
className={cx(
30+
'gf-form explore-input-margin',
31+
css`
32+
flex-wrap: nowrap;
33+
`
34+
)}
35+
aria-label="Query type field"
36+
>
37+
<InlineFormLabel width={5}>Query type</InlineFormLabel>
3738

38-
export default memo(PromExploreExtraField);
39+
<RadioButtonGroup options={rangeOptions} value={queryType} onChange={onQueryTypeChange} />
40+
</div>
41+
{/*Step field*/}
42+
<div
43+
data-testid="stepField"
44+
className={cx(
45+
'gf-form',
46+
css`
47+
flex-wrap: nowrap;
48+
`
49+
)}
50+
aria-label="Step field"
51+
>
52+
<InlineFormLabel
53+
width={5}
54+
tooltip={
55+
'Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
56+
}
57+
>
58+
Step
59+
</InlineFormLabel>
60+
<input
61+
type={'text'}
62+
className="gf-form-input width-4"
63+
placeholder={'auto'}
64+
onChange={onStepChange}
65+
onKeyDown={onKeyDownFunc}
66+
value={stepValue}
67+
/>
68+
</div>
69+
</div>
70+
);
71+
}
72+
);

‎public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

Lines changed: 24 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { memo, FC } from 'react';
2-
import { css } from 'emotion';
32

43
// Types
54
import { ExploreQueryFieldProps } from '@grafana/data';
6-
import { RadioButtonGroup } from '@grafana/ui';
75

86
import { PrometheusDatasource } from '../datasource';
97
import { PromQuery, PromOptions } from '../types';
@@ -28,6 +26,12 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
2826
}
2927
}
3028

29+
function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
30+
if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey)) {
31+
onRunQuery();
32+
}
33+
}
34+
3135
function onQueryTypeChange(value: string) {
3236
const { query, onChange } = props;
3337
let nextQuery;
@@ -41,69 +45,25 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
4145
onChange(nextQuery);
4246
}
4347

44-
function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
45-
if (e.key === 'Enter') {
46-
onRunQuery();
47-
}
48-
}
49-
50-
return (
51-
<>
52-
<PromQueryField
53-
datasource={datasource}
54-
query={query}
55-
onRunQuery={onRunQuery}
56-
onChange={onChange}
57-
onBlur={() => {}}
58-
history={history}
59-
data={data}
60-
ExtraFieldElement={
61-
<PromExploreExtraField
62-
label={'Step'}
63-
onChangeFunc={onStepChange}
64-
onKeyDownFunc={onReturnKeyDown}
65-
value={query.interval || ''}
66-
hasTooltip={true}
67-
tooltipContent={
68-
'Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
69-
}
70-
/>
71-
}
72-
/>
73-
<PromExploreRadioButton
74-
selected={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
75-
onQueryTypeChange={onQueryTypeChange}
76-
/>
77-
</>
78-
);
79-
};
80-
81-
type PromExploreRadioButtonProps = {
82-
selected: string;
83-
onQueryTypeChange: (value: string) => void;
84-
};
85-
86-
const PromExploreRadioButton: React.FunctionComponent<PromExploreRadioButtonProps> = ({
87-
selected,
88-
onQueryTypeChange,
89-
}) => {
90-
const rangeOptions = [
91-
{ value: 'range', label: 'Range' },
92-
{ value: 'instant', label: 'Instant' },
93-
{ value: 'both', label: 'Both' },
94-
];
95-
9648
return (
97-
<div
98-
className={css`
99-
display: flex;
100-
`}
101-
>
102-
<button className={`gf-form-label gf-form-label--btn width-5`}>
103-
<span className="btn-title">Query type</span>
104-
</button>
105-
<RadioButtonGroup options={rangeOptions} value={selected} onChange={onQueryTypeChange} />
106-
</div>
49+
<PromQueryField
50+
datasource={datasource}
51+
query={query}
52+
onRunQuery={onRunQuery}
53+
onChange={onChange}
54+
onBlur={() => {}}
55+
history={history}
56+
data={data}
57+
ExtraFieldElement={
58+
<PromExploreExtraField
59+
queryType={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
60+
stepValue={query.interval || ''}
61+
onQueryTypeChange={onQueryTypeChange}
62+
onStepChange={onStepChange}
63+
onKeyDownFunc={onReturnKeyDown}
64+
/>
65+
}
66+
/>
10767
);
10868
};
10969

‎public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
331331
{chooserText}
332332
</ButtonCascader>
333333
</div>
334-
<div className={'gf-form gf-form--grow flex-shrink-1 min-width-15 explore-input-margin'}>
334+
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
335335
<QueryField
336336
additionalPlugins={this.plugins}
337337
cleanText={cleanText}
@@ -346,8 +346,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
346346
syntaxLoaded={syntaxLoaded}
347347
/>
348348
</div>
349-
{ExtraFieldElement}
350349
</div>
350+
{ExtraFieldElement}
351351
{hint ? (
352352
<div className="query-row-break">
353353
<div className="prom-query-field-info text-warning">

‎public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreExtraField.test.tsx.snap

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)