Skip to content

Stop running queries onblur #453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Stop running queries onblur #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aeb117d
Stop running queries onblur
kevinwcyu Aug 7, 2025
544158f
Merge branch 'main' into kevinwcyu/remove-onblur-sqleditor
kevinwcyu Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 111 additions & 103 deletions src/components/QueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ResourceSelector } from '@grafana/aws-sdk';
import { ResourceSelector, QueryEditorHeader } from '@grafana/aws-sdk';
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { Select, Switch, useStyles2 } from '@grafana/ui';
import React, { useEffect, useState } from 'react';
Expand Down Expand Up @@ -106,112 +106,120 @@ export function QueryEditor(props: Props) {
}, [database, table]);

return (
<EditorRows>
<EditorRow>
<EditorFieldGroup>
<EditorField label="Database" tooltip="Use macro $__database to reference the selected database">
<ResourceSelector
id="database"
onChange={onChangeSelector('database')}
resources={databases}
value={database || null}
tooltip="Use the selected schema with the $__database macro"
label={selectors.components.ConfigEditor.defaultDatabase.input}
data-testid={selectors.components.ConfigEditor.defaultDatabase.wrapper}
labelWidth={11}
className="width-12"
/>
</EditorField>
<EditorField label="Table" tooltip="Use macro $__table to reference the selected table">
<ResourceSelector
id="table"
onChange={onChangeSelector('table')}
resources={tables}
value={table || null}
tooltip="Use the selected table with the $__table macro"
label={selectors.components.ConfigEditor.defaultTable.input}
data-testid={selectors.components.ConfigEditor.defaultTable.wrapper}
labelWidth={11}
className="width-12"
/>
</EditorField>
<EditorField label="Measure" tooltip="Use macro $__measure to reference the selected measure">
<ResourceSelector
id="measure"
onChange={onChangeSelector('measure')}
resources={measures}
value={measure || null}
tooltip="Use the selected column with the $__measure macro"
label={selectors.components.ConfigEditor.defaultMeasure.input}
data-testid={selectors.components.ConfigEditor.defaultMeasure.wrapper}
labelWidth={11}
<>
{props?.app !== 'explore' && (
<QueryEditorHeader<DataSource, TimestreamQuery, TimestreamOptions>
{...props}
enableRunButton={!!props.query.rawQuery}
/>
)}
<EditorRows>
<EditorRow>
<EditorFieldGroup>
<EditorField label="Database" tooltip="Use macro $__database to reference the selected database">
<ResourceSelector
id="database"
onChange={onChangeSelector('database')}
resources={databases}
value={database || null}
tooltip="Use the selected schema with the $__database macro"
label={selectors.components.ConfigEditor.defaultDatabase.input}
data-testid={selectors.components.ConfigEditor.defaultDatabase.wrapper}
labelWidth={11}
className="width-12"
/>
</EditorField>
<EditorField label="Table" tooltip="Use macro $__table to reference the selected table">
<ResourceSelector
id="table"
onChange={onChangeSelector('table')}
resources={tables}
value={table || null}
tooltip="Use the selected table with the $__table macro"
label={selectors.components.ConfigEditor.defaultTable.input}
data-testid={selectors.components.ConfigEditor.defaultTable.wrapper}
labelWidth={11}
className="width-12"
/>
</EditorField>
<EditorField label="Measure" tooltip="Use macro $__measure to reference the selected measure">
<ResourceSelector
id="measure"
onChange={onChangeSelector('measure')}
resources={measures}
value={measure || null}
tooltip="Use the selected column with the $__measure macro"
label={selectors.components.ConfigEditor.defaultMeasure.input}
data-testid={selectors.components.ConfigEditor.defaultMeasure.wrapper}
labelWidth={11}
className="width-12"
/>
</EditorField>
</EditorFieldGroup>
</EditorRow>
<EditorRow>
<EditorFieldGroup>
<EditorField label="Wait for all queries">
<Switch
id={`${props.query.refId}-wait-for-all-queries`}
onChange={onWaitForChange}
value={query.waitForResult}
/>
</EditorField>
</EditorFieldGroup>
<EditorFieldGroup>
<EditorField
label="Format as"
tooltipInteractive
tooltip={
<>
{
'Timeseries queries must have times in ascending order, which can be done by adding "ORDER BY <time field> ASC" to the query. '
}
<a
href="https://docs.aws.amazon.com/timestream/latest/developerguide/supported-sql-constructs.SELECT.html"
target="_blank"
rel="noopener noreferrer"
>
See the AWS Docs for more details.
</a>
</>
}
>
<Select
inputId="format-as"
options={SelectableFormatOptions}
value={props.query.format || FormatOptions.Table}
onChange={onChangeFormat}
className="width-11"
menuShouldPortal={true}
/>
</EditorField>
</EditorFieldGroup>
</EditorRow>
<EditorRow>
<EditorField label="Sample queries" tooltip="Selecting a sample will modify the current query">
<Select
aria-label={'Query'}
inputId={`${props.query.refId}-sample-query`}
options={sampleQueries}
onChange={(e: SelectableValue) => onQueryChange(e.value || '')}
className="width-12"
/>
</EditorField>
</EditorFieldGroup>
</EditorRow>
<EditorRow>
<EditorFieldGroup>
<EditorField label="Wait for all queries">
<Switch
id={`${props.query.refId}-wait-for-all-queries`}
onChange={onWaitForChange}
value={query.waitForResult}
</EditorRow>
<EditorRow>
<div className={styles.sqlEditor}>
<SQLEditor
query={query}
onRunQuery={props.onRunQuery}
onChange={props.onChange}
datasource={props.datasource}
/>
</EditorField>
</EditorFieldGroup>
<EditorFieldGroup>
<EditorField
label="Format as"
tooltipInteractive
tooltip={
<>
{
'Timeseries queries must have times in ascending order, which can be done by adding "ORDER BY <time field> ASC" to the query. '
}
<a
href="https://docs.aws.amazon.com/timestream/latest/developerguide/supported-sql-constructs.SELECT.html"
target="_blank"
rel="noopener noreferrer"
>
See the AWS Docs for more details.
</a>
</>
}
>
<Select
inputId="format-as"
options={SelectableFormatOptions}
value={props.query.format || FormatOptions.Table}
onChange={onChangeFormat}
className="width-11"
menuShouldPortal={true}
/>
</EditorField>
</EditorFieldGroup>
</EditorRow>
<EditorRow>
<EditorField label="Sample queries" tooltip="Selecting a sample will modify the current query">
<Select
aria-label={'Query'}
inputId={`${props.query.refId}-sample-query`}
options={sampleQueries}
onChange={(e: SelectableValue) => onQueryChange(e.value || '')}
className="width-12"
/>
</EditorField>
</EditorRow>
<EditorRow>
<div className={styles.sqlEditor}>
<SQLEditor
query={query}
onRunQuery={props.onRunQuery}
onChange={props.onChange}
datasource={props.datasource}
/>
</div>
</EditorRow>
</EditorRows>
</div>
</EditorRow>
</EditorRows>
</>
);
}
const getStyles = () => ({
Expand Down
3 changes: 1 addition & 2 deletions src/components/SQLEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface RawEditorProps {
datasource: DataSource;
}

export default function SQLEditor({ query, datasource, onRunQuery, onChange }: RawEditorProps) {
export default function SQLEditor({ query, datasource, onChange }: RawEditorProps) {
const queryRef = useRef<TimestreamQuery>(query);
useEffect(() => {
queryRef.current = query;
Expand Down Expand Up @@ -70,7 +70,6 @@ export default function SQLEditor({ query, datasource, onRunQuery, onChange }: R
return (
<SQLCodeEditor
query={query.rawQuery ?? ''}
onBlur={() => onRunQuery()}
onChange={onChangeRawQuery}
language={{
...timestreamLanguageDefinition,
Expand Down
2 changes: 0 additions & 2 deletions tests/alertRule.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,4 @@ test('should successfully create an alert rule', async ({
`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`
);
await expect(alertRuleEditPage.evaluate()).toBeOK();
// TODO: remove page.unrouteAll if onBlur handler is removed from SQLEditor
await page.unrouteAll({ behavior: 'ignoreErrors' });
});
Loading