Skip to content

Web console: react to user cancelation immediately #13376

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

Merged
vogievetsky merged 1 commit into from
Nov 18, 2022
Merged

Web console: react to user cancelation immediately #13376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion licenses.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5683,7 +5683,7 @@ license_category: binary
module: web-console
license_name: Apache License version 2.0
copyright: Imply Data
version: 0.17.1
version: 0.17.2

---

Expand Down
14 changes: 7 additions & 7 deletions web-console/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web-console/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
"d3-axis": "^2.1.0",
"d3-scale": "^3.3.0",
"d3-selection": "^2.0.0",
"druid-query-toolkit": "^0.17.1",
"druid-query-toolkit": "^0.17.2",
"file-saver": "^2.0.2",
"follow-redirects": "^1.14.7",
"fontsource-open-sans": "^3.0.9",
Expand Down
29 changes: 18 additions & 11 deletions web-console/src/views/workbench-view/helper-query/helper-query.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { Button, ButtonGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { Popover2 } from '@blueprintjs/popover2';
import axios from 'axios';
import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
import React, { useEffect, useRef, useState } from 'react';

Expand Down Expand Up @@ -92,6 +93,10 @@ export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryPro
goToIngestion,
} = props;
const [alertElement, setAlertElement] = useState<JSX.Element | undefined>();

// Store the cancellation function for natively run queries allowing us to trigger it only when the user explicitly clicks "cancel" (vs changing tab)
const nativeQueryCancelFnRef = useRef<() => void>();

const handleQueryStringChange = usePermanentCallback((queryString: string) => {
onQueryChange(query.changeQueryString(queryString));
});
Expand Down Expand Up @@ -165,11 +170,16 @@ export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryPro
const resultPromise = queryRunner.runQuery({
query,
extraQueryContext: mandatoryQueryContext,
cancelToken: new axios.CancelToken(cancelFn => {
nativeQueryCancelFnRef.current = cancelFn;
}),
});
WorkbenchRunningPromises.storePromise(id, { promise: resultPromise, sqlPrefixLines });

result = await resultPromise;
nativeQueryCancelFnRef.current = undefined;
} catch (e) {
nativeQueryCancelFnRef.current = undefined;
throw new DruidError(e, sqlPrefixLines);
}

Expand Down Expand Up @@ -236,9 +246,8 @@ export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryPro
const handleRun = usePermanentCallback(async (preview: boolean) => {
if (!query.isValid()) return;

WorkbenchHistory.addQueryToHistory(query);

if (query.getEffectiveEngine() !== 'sql-msq-task') {
WorkbenchHistory.addQueryToHistory(query);
queryManager.runQuery(query);
return;
}
Expand Down Expand Up @@ -281,6 +290,11 @@ export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryPro
} catch {}
}

const onUserCancel = () => {
queryManager.cancelCurrent();
nativeQueryCancelFnRef.current?.();
};

return (
<div className="helper-query">
<div className="query-top-bar">
Expand Down Expand Up @@ -419,17 +433,10 @@ export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryPro
execution={executionState.intermediate}
intermediateError={executionState.intermediateError}
goToIngestion={goToIngestion}
onCancel={() => {
queryManager.cancelCurrent();
}}
onCancel={onUserCancel}
/>
) : (
<Loader
cancelText="Cancel query"
onCancel={() => {
queryManager.cancelCurrent();
}}
/>
<Loader cancelText="Cancel query" onCancel={onUserCancel} />
))}
</div>
)}
Expand Down
29 changes: 18 additions & 11 deletions web-console/src/views/workbench-view/query-tab/query-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { Button, Code, Intent, Menu, MenuItem } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { Popover2 } from '@blueprintjs/popover2';
import axios from 'axios';
import classNames from 'classnames';
import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
import React, { useCallback, useEffect, useRef, useState } from 'react';
Expand Down Expand Up @@ -102,6 +103,10 @@ export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
goToIngestion,
} = props;
const [alertElement, setAlertElement] = useState<JSX.Element | undefined>();

// Store the cancellation function for natively run queries allowing us to trigger it only when the user explicitly clicks "cancel" (vs changing tab)
const nativeQueryCancelFnRef = useRef<() => void>();

const handleQueryStringChange = usePermanentCallback((queryString: string) => {
if (query.isEmptyQuery() && queryString.split('=====').length > 2) {
let parsedWorkbenchQuery: WorkbenchQuery | undefined;
Expand Down Expand Up @@ -194,11 +199,16 @@ export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
const resultPromise = queryRunner.runQuery({
query,
extraQueryContext: mandatoryQueryContext,
cancelToken: new axios.CancelToken(cancelFn => {
nativeQueryCancelFnRef.current = cancelFn;
}),
});
WorkbenchRunningPromises.storePromise(id, { promise: resultPromise, sqlPrefixLines });

result = await resultPromise;
nativeQueryCancelFnRef.current = undefined;
} catch (e) {
nativeQueryCancelFnRef.current = undefined;
throw new DruidError(e, sqlPrefixLines);
}

Expand Down Expand Up @@ -265,9 +275,8 @@ export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
const handleRun = usePermanentCallback(async (preview: boolean) => {
if (!query.isValid()) return;

WorkbenchHistory.addQueryToHistory(query);

if (query.getEffectiveEngine() !== 'sql-msq-task') {
WorkbenchHistory.addQueryToHistory(query);
queryManager.runQuery(query);
return;
}
Expand Down Expand Up @@ -303,6 +312,11 @@ export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
const queryPrefixes = query.getPrefixQueries();
const extractedCtes = query.extractCteHelpers();

const onUserCancel = () => {
queryManager.cancelCurrent();
nativeQueryCancelFnRef.current?.();
};

return (
<div className="query-tab">
<SplitterLayout
Expand Down Expand Up @@ -469,18 +483,11 @@ export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
execution={executionState.intermediate}
intermediateError={executionState.intermediateError}
goToIngestion={goToIngestion}
onCancel={() => {
queryManager.cancelCurrent();
}}
onCancel={onUserCancel}
allowLiveReportsPane
/>
) : (
<Loader
cancelText="Cancel query"
onCancel={() => {
queryManager.cancelCurrent();
}}
/>
<Loader cancelText="Cancel query" onCancel={onUserCancel} />
))}
</div>
</SplitterLayout>
Expand Down
12 changes: 7 additions & 5 deletions web-console/src/views/workbench-view/workbench-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,11 +652,13 @@ export class WorkbenchView extends React.PureComponent<WorkbenchViewProps, Workb
onClick={this.openExplainDialog}
/>
)}
<MenuItem
icon={IconNames.HISTORY}
text="Query history"
onClick={this.openHistoryDialog}
/>
{currentTabEntry.query.getEffectiveEngine() !== 'sql-msq-task' && (
<MenuItem
icon={IconNames.HISTORY}
text="Query history"
onClick={this.openHistoryDialog}
/>
)}
{currentTabEntry.query.canPrettify() && (
<MenuItem
icon={IconNames.ALIGN_LEFT}
Expand Down