You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by "vogievetsky (via GitHub)" <gi...@apache.org> on 2024/01/06 00:21:42 UTC
[PR] Update load query detail archive dialog for file input support (druid)
vogievetsky opened a new pull request, #15632:
URL: https://github.com/apache/druid/pull/15632
Modified the execution-submit-dialog to support file inputs instead of text inputs for better usability. Users can now submit their queries by selecting a JSON file directly or dragging the file into the dialog. Made appropriate UI adjustments to accommodate this change in execution-submit-dialog styles file.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
Re: [PR] Update load query detail archive dialog for file input support (druid)
Posted by "vogievetsky (via GitHub)" <gi...@apache.org>.
vogievetsky merged PR #15632:
URL: https://github.com/apache/druid/pull/15632
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
Re: [PR] Update load query detail archive dialog for file input support (druid)
Posted by "techdocsmith (via GitHub)" <gi...@apache.org>.
techdocsmith commented on code in PR #15632:
URL: https://github.com/apache/druid/pull/15632#discussion_r1443612160
##########
web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx:
##########
@@ -102,42 +124,71 @@ export const ExecutionSubmitDialog = React.memo(function ExecutionSubmitDialog(
return (
<Dialog
className="execution-submit-dialog"
+ backdropClassName={dragging ? `dragging-file` : undefined}
+ style={dragging ? { pointerEvents: 'none' } : undefined}
isOpen
onClose={onClose}
title="Load query detail archive"
+ backdropProps={{
+ onDrop(ev: DragEvent<HTMLDivElement>) {
+ // Prevent default behavior (Prevent file from being opened)
+ ev.preventDefault();
+ if (dragging) setDragging(false);
+
+ const droppedFile = getDraggedFile(ev);
+
+ if (droppedFile) {
+ if (!droppedFile.name.endsWith('.json')) {
+ AppToaster.show({
+ intent: Intent.DANGER,
+ message: `The Query Detail Archive must be a .json file`,
+ timeout: 5000,
+ });
+ return;
+ }
+
+ setSelectedFile(droppedFile);
+ }
+ },
+ onDragOver(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (!dragging) setDragging(true);
+ },
+ onDragLeave(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (dragging) setDragging(false);
+ },
+ }}
canOutsideClickClose={false}
>
- <AceEditor
- mode="hjson"
- theme="solarized_dark"
- className="execution-submit-dialog-textarea placeholder-padding"
- onChange={setArchive}
- fontSize={12}
- showPrintMargin={false}
- showGutter
- highlightActiveLine
- value={archive}
- width="100%"
- setOptions={{
- showLineNumbers: true,
- tabSize: 2,
- newLineMode: 'unix' as any, // newLineMode is incorrectly assumed to be boolean in the typings
- }}
- style={{}}
- placeholder="{ Query detail archive or query report... }"
- onLoad={editor => {
- editor.renderer.setPadding(10);
- editor.renderer.setScrollMargin(10, 10, 0, 0);
- }}
- />
+ <div className={Classes.DIALOG_BODY}>
+ <p>
+ You can load query detail archive files downloaded from other Druid clusters to get a
+ rendering of that file here.
Review Comment:
```suggestion
You can load query detail archive files from other Druid clusters to render the query detail here.
```
I think "downloaded" can be implied. Consider "to render" instead of "to get a rendering"
##########
web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx:
##########
@@ -102,42 +124,71 @@ export const ExecutionSubmitDialog = React.memo(function ExecutionSubmitDialog(
return (
<Dialog
className="execution-submit-dialog"
+ backdropClassName={dragging ? `dragging-file` : undefined}
+ style={dragging ? { pointerEvents: 'none' } : undefined}
isOpen
onClose={onClose}
title="Load query detail archive"
+ backdropProps={{
+ onDrop(ev: DragEvent<HTMLDivElement>) {
+ // Prevent default behavior (Prevent file from being opened)
+ ev.preventDefault();
+ if (dragging) setDragging(false);
+
+ const droppedFile = getDraggedFile(ev);
+
+ if (droppedFile) {
+ if (!droppedFile.name.endsWith('.json')) {
+ AppToaster.show({
+ intent: Intent.DANGER,
+ message: `The Query Detail Archive must be a .json file`,
+ timeout: 5000,
+ });
+ return;
+ }
+
+ setSelectedFile(droppedFile);
+ }
+ },
+ onDragOver(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (!dragging) setDragging(true);
+ },
+ onDragLeave(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (dragging) setDragging(false);
+ },
+ }}
canOutsideClickClose={false}
>
- <AceEditor
- mode="hjson"
- theme="solarized_dark"
- className="execution-submit-dialog-textarea placeholder-padding"
- onChange={setArchive}
- fontSize={12}
- showPrintMargin={false}
- showGutter
- highlightActiveLine
- value={archive}
- width="100%"
- setOptions={{
- showLineNumbers: true,
- tabSize: 2,
- newLineMode: 'unix' as any, // newLineMode is incorrectly assumed to be boolean in the typings
- }}
- style={{}}
- placeholder="{ Query detail archive or query report... }"
- onLoad={editor => {
- editor.renderer.setPadding(10);
- editor.renderer.setScrollMargin(10, 10, 0, 0);
- }}
- />
+ <div className={Classes.DIALOG_BODY}>
+ <p>
+ You can load query detail archive files downloaded from other Druid clusters to get a
+ rendering of that file here.
+ </p>
+ <p>
+ The query detail archive for a given query can be downloaded by clicking on that query in
+ the <Code>Recent query tasks</Code> panel on the right of the query view.
+ </p>
+ <FormGroup label="Select query detail archive file">
+ <FileInput
+ hasSelection={Boolean(selectedFile)}
+ text={selectedFile?.name ?? 'Choose file...'}
+ onInputChange={e => setSelectedFile((e.target as any).files[0])}
+ inputProps={{ accept: '.json' }}
+ fill
+ />
+ </FormGroup>
+ <p>You can also drag a file onto this dialog.</p>
Review Comment:
```suggestion
<p>Alternatively, drag a file from your file browser onto this dialog.</p>
```
##########
web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx:
##########
@@ -102,42 +124,71 @@ export const ExecutionSubmitDialog = React.memo(function ExecutionSubmitDialog(
return (
<Dialog
className="execution-submit-dialog"
+ backdropClassName={dragging ? `dragging-file` : undefined}
+ style={dragging ? { pointerEvents: 'none' } : undefined}
isOpen
onClose={onClose}
title="Load query detail archive"
+ backdropProps={{
+ onDrop(ev: DragEvent<HTMLDivElement>) {
+ // Prevent default behavior (Prevent file from being opened)
+ ev.preventDefault();
+ if (dragging) setDragging(false);
+
+ const droppedFile = getDraggedFile(ev);
+
+ if (droppedFile) {
+ if (!droppedFile.name.endsWith('.json')) {
+ AppToaster.show({
+ intent: Intent.DANGER,
+ message: `The Query Detail Archive must be a .json file`,
+ timeout: 5000,
+ });
+ return;
+ }
+
+ setSelectedFile(droppedFile);
+ }
+ },
+ onDragOver(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (!dragging) setDragging(true);
+ },
+ onDragLeave(ev: DragEvent<HTMLDivElement>) {
+ ev.preventDefault(); // Prevent default behavior (Prevent file from being opened)
+ if (dragging) setDragging(false);
+ },
+ }}
canOutsideClickClose={false}
>
- <AceEditor
- mode="hjson"
- theme="solarized_dark"
- className="execution-submit-dialog-textarea placeholder-padding"
- onChange={setArchive}
- fontSize={12}
- showPrintMargin={false}
- showGutter
- highlightActiveLine
- value={archive}
- width="100%"
- setOptions={{
- showLineNumbers: true,
- tabSize: 2,
- newLineMode: 'unix' as any, // newLineMode is incorrectly assumed to be boolean in the typings
- }}
- style={{}}
- placeholder="{ Query detail archive or query report... }"
- onLoad={editor => {
- editor.renderer.setPadding(10);
- editor.renderer.setScrollMargin(10, 10, 0, 0);
- }}
- />
+ <div className={Classes.DIALOG_BODY}>
+ <p>
+ You can load query detail archive files downloaded from other Druid clusters to get a
+ rendering of that file here.
+ </p>
+ <p>
+ The query detail archive for a given query can be downloaded by clicking on that query in
+ the <Code>Recent query tasks</Code> panel on the right of the query view.
Review Comment:
```suggestion
To download the query detail archive for a query, click on the query in
the <Code>Recent query tasks</Code> panel in the query view.
```
Suggest active voice / imperative. Also suggest omitting "on the right" directional if possible.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org