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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
