Skip to content

Commit c554dff

Browse files
kevinwcyukevinwcyu
authored
Stop running queries onblur (#453)
1 parent 37bd475 commit c554dff

File tree

3 files changed

+112
-107
lines changed

3 files changed

+112
-107
lines changed

‎src/components/QueryEditor.tsx‎

Lines changed: 111 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ResourceSelector } from '@grafana/aws-sdk';
1+
import { ResourceSelector, QueryEditorHeader } from '@grafana/aws-sdk';
22
import { QueryEditorProps, SelectableValue } from '@grafana/data';
33
import { Select, Switch, useStyles2 } from '@grafana/ui';
44
import React, { useEffect, useState } from 'react';
@@ -106,112 +106,120 @@ export function QueryEditor(props: Props) {
106106
}, [database, table]);
107107

108108
return (
109-
<EditorRows>
110-
<EditorRow>
111-
<EditorFieldGroup>
112-
<EditorField label="Database" tooltip="Use macro $__database to reference the selected database">
113-
<ResourceSelector
114-
id="database"
115-
onChange={onChangeSelector('database')}
116-
resources={databases}
117-
value={database || null}
118-
tooltip="Use the selected schema with the $__database macro"
119-
label={selectors.components.ConfigEditor.defaultDatabase.input}
120-
data-testid={selectors.components.ConfigEditor.defaultDatabase.wrapper}
121-
labelWidth={11}
122-
className="width-12"
123-
/>
124-
</EditorField>
125-
<EditorField label="Table" tooltip="Use macro $__table to reference the selected table">
126-
<ResourceSelector
127-
id="table"
128-
onChange={onChangeSelector('table')}
129-
resources={tables}
130-
value={table || null}
131-
tooltip="Use the selected table with the $__table macro"
132-
label={selectors.components.ConfigEditor.defaultTable.input}
133-
data-testid={selectors.components.ConfigEditor.defaultTable.wrapper}
134-
labelWidth={11}
135-
className="width-12"
136-
/>
137-
</EditorField>
138-
<EditorField label="Measure" tooltip="Use macro $__measure to reference the selected measure">
139-
<ResourceSelector
140-
id="measure"
141-
onChange={onChangeSelector('measure')}
142-
resources={measures}
143-
value={measure || null}
144-
tooltip="Use the selected column with the $__measure macro"
145-
label={selectors.components.ConfigEditor.defaultMeasure.input}
146-
data-testid={selectors.components.ConfigEditor.defaultMeasure.wrapper}
147-
labelWidth={11}
109+
<>
110+
{props?.app !== 'explore' && (
111+
<QueryEditorHeader<DataSource, TimestreamQuery, TimestreamOptions>
112+
{...props}
113+
enableRunButton={!!props.query.rawQuery}
114+
/>
115+
)}
116+
<EditorRows>
117+
<EditorRow>
118+
<EditorFieldGroup>
119+
<EditorField label="Database" tooltip="Use macro $__database to reference the selected database">
120+
<ResourceSelector
121+
id="database"
122+
onChange={onChangeSelector('database')}
123+
resources={databases}
124+
value={database || null}
125+
tooltip="Use the selected schema with the $__database macro"
126+
label={selectors.components.ConfigEditor.defaultDatabase.input}
127+
data-testid={selectors.components.ConfigEditor.defaultDatabase.wrapper}
128+
labelWidth={11}
129+
className="width-12"
130+
/>
131+
</EditorField>
132+
<EditorField label="Table" tooltip="Use macro $__table to reference the selected table">
133+
<ResourceSelector
134+
id="table"
135+
onChange={onChangeSelector('table')}
136+
resources={tables}
137+
value={table || null}
138+
tooltip="Use the selected table with the $__table macro"
139+
label={selectors.components.ConfigEditor.defaultTable.input}
140+
data-testid={selectors.components.ConfigEditor.defaultTable.wrapper}
141+
labelWidth={11}
142+
className="width-12"
143+
/>
144+
</EditorField>
145+
<EditorField label="Measure" tooltip="Use macro $__measure to reference the selected measure">
146+
<ResourceSelector
147+
id="measure"
148+
onChange={onChangeSelector('measure')}
149+
resources={measures}
150+
value={measure || null}
151+
tooltip="Use the selected column with the $__measure macro"
152+
label={selectors.components.ConfigEditor.defaultMeasure.input}
153+
data-testid={selectors.components.ConfigEditor.defaultMeasure.wrapper}
154+
labelWidth={11}
155+
className="width-12"
156+
/>
157+
</EditorField>
158+
</EditorFieldGroup>
159+
</EditorRow>
160+
<EditorRow>
161+
<EditorFieldGroup>
162+
<EditorField label="Wait for all queries">
163+
<Switch
164+
id={`${props.query.refId}-wait-for-all-queries`}
165+
onChange={onWaitForChange}
166+
value={query.waitForResult}
167+
/>
168+
</EditorField>
169+
</EditorFieldGroup>
170+
<EditorFieldGroup>
171+
<EditorField
172+
label="Format as"
173+
tooltipInteractive
174+
tooltip={
175+
<>
176+
{
177+
'Timeseries queries must have times in ascending order, which can be done by adding "ORDER BY <time field> ASC" to the query. '
178+
}
179+
<a
180+
href="https://docs.aws.amazon.com/timestream/latest/developerguide/supported-sql-constructs.SELECT.html"
181+
target="_blank"
182+
rel="noopener noreferrer"
183+
>
184+
See the AWS Docs for more details.
185+
</a>
186+
</>
187+
}
188+
>
189+
<Select
190+
inputId="format-as"
191+
options={SelectableFormatOptions}
192+
value={props.query.format || FormatOptions.Table}
193+
onChange={onChangeFormat}
194+
className="width-11"
195+
menuShouldPortal={true}
196+
/>
197+
</EditorField>
198+
</EditorFieldGroup>
199+
</EditorRow>
200+
<EditorRow>
201+
<EditorField label="Sample queries" tooltip="Selecting a sample will modify the current query">
202+
<Select
203+
aria-label={'Query'}
204+
inputId={`${props.query.refId}-sample-query`}
205+
options={sampleQueries}
206+
onChange={(e: SelectableValue) => onQueryChange(e.value || '')}
148207
className="width-12"
149208
/>
150209
</EditorField>
151-
</EditorFieldGroup>
152-
</EditorRow>
153-
<EditorRow>
154-
<EditorFieldGroup>
155-
<EditorField label="Wait for all queries">
156-
<Switch
157-
id={`${props.query.refId}-wait-for-all-queries`}
158-
onChange={onWaitForChange}
159-
value={query.waitForResult}
210+
</EditorRow>
211+
<EditorRow>
212+
<div className={styles.sqlEditor}>
213+
<SQLEditor
214+
query={query}
215+
onRunQuery={props.onRunQuery}
216+
onChange={props.onChange}
217+
datasource={props.datasource}
160218
/>
161-
</EditorField>
162-
</EditorFieldGroup>
163-
<EditorFieldGroup>
164-
<EditorField
165-
label="Format as"
166-
tooltipInteractive
167-
tooltip={
168-
<>
169-
{
170-
'Timeseries queries must have times in ascending order, which can be done by adding "ORDER BY <time field> ASC" to the query. '
171-
}
172-
<a
173-
href="https://docs.aws.amazon.com/timestream/latest/developerguide/supported-sql-constructs.SELECT.html"
174-
target="_blank"
175-
rel="noopener noreferrer"
176-
>
177-
See the AWS Docs for more details.
178-
</a>
179-
</>
180-
}
181-
>
182-
<Select
183-
inputId="format-as"
184-
options={SelectableFormatOptions}
185-
value={props.query.format || FormatOptions.Table}
186-
onChange={onChangeFormat}
187-
className="width-11"
188-
menuShouldPortal={true}
189-
/>
190-
</EditorField>
191-
</EditorFieldGroup>
192-
</EditorRow>
193-
<EditorRow>
194-
<EditorField label="Sample queries" tooltip="Selecting a sample will modify the current query">
195-
<Select
196-
aria-label={'Query'}
197-
inputId={`${props.query.refId}-sample-query`}
198-
options={sampleQueries}
199-
onChange={(e: SelectableValue) => onQueryChange(e.value || '')}
200-
className="width-12"
201-
/>
202-
</EditorField>
203-
</EditorRow>
204-
<EditorRow>
205-
<div className={styles.sqlEditor}>
206-
<SQLEditor
207-
query={query}
208-
onRunQuery={props.onRunQuery}
209-
onChange={props.onChange}
210-
datasource={props.datasource}
211-
/>
212-
</div>
213-
</EditorRow>
214-
</EditorRows>
219+
</div>
220+
</EditorRow>
221+
</EditorRows>
222+
</>
215223
);
216224
}
217225
const getStyles = () => ({

‎src/components/SQLEditor.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface RawEditorProps {
1313
datasource: DataSource;
1414
}
1515

16-
export default function SQLEditor({ query, datasource, onRunQuery, onChange }: RawEditorProps) {
16+
export default function SQLEditor({ query, datasource, onChange }: RawEditorProps) {
1717
const queryRef = useRef<TimestreamQuery>(query);
1818
useEffect(() => {
1919
queryRef.current = query;
@@ -70,7 +70,6 @@ export default function SQLEditor({ query, datasource, onRunQuery, onChange }: R
7070
return (
7171
<SQLCodeEditor
7272
query={query.rawQuery ?? ''}
73-
onBlur={() => onRunQuery()}
7473
onChange={onChangeRawQuery}
7574
language={{
7675
...timestreamLanguageDefinition,

‎tests/alertRule.spec.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,4 @@ test('should successfully create an alert rule', async ({
2121
`select region, avg(measure_value::double) from $__database.$__table where time between from_milliseconds(1615395600000) and from_milliseconds(1615395900000) and measure_value::double > 1 group by region limit 10`
2222
);
2323
await expect(alertRuleEditPage.evaluate()).toBeOK();
24-
// TODO: remove page.unrouteAll if onBlur handler is removed from SQLEditor
25-
await page.unrouteAll({ behavior: 'ignoreErrors' });
2624
});

0 commit comments

Comments
 (0)