show execution dialog in task view (#14930)

web-console/src/helpers/execution/sql-task-execution.ts

@@ -224,8 +224,9 @@ export async function getTaskExecution(
     execution = execution.updateWithTaskPayload(taskPayload);
   }
 
-  // Still have to pull the destination page info from the async status
+  // Still have to pull the destination page info from the async status, do this in a best effort way since the statements API may have permission errors
   if (execution.status === 'SUCCESS' && !execution.destinationPages) {
+    try {
       const statusResp = await Api.instance.get<AsyncStatusResponse>(
         `/druid/v2/sql/statements/${encodedId}`,
         {
@@ -234,6 +235,9 @@ export async function getTaskExecution(
       );
 
       execution = execution.updateWithAsyncStatus(statusResp.data);
+    } catch (e) {
+      if (Api.isNetworkError(e)) throw e;
+    }
   }
 
   if (execution.hasPotentiallyStuckStage()) {

web-console/src/views/tasks-view/tasks-view.tsx

@@ -52,6 +52,7 @@ import {
   QueryState,
 } from '../../utils';
 import type { BasicAction } from '../../utils/basic-action';
+import { ExecutionDetailsDialog } from '../workbench-view/execution-details-dialog/execution-details-dialog';
 
 import './tasks-view.scss';
 
@@ -99,9 +100,8 @@ export interface TasksViewState {
   taskSpecDialogOpen: boolean;
   alertErrorMsg?: string;
 
-  taskTableActionDialogId?: string;
-  taskTableActionDialogStatus?: string;
-  taskTableActionDialogActions: BasicAction[];
+  taskTableActionDialogOpen?: { id: string; status: string; actions: BasicAction[] };
+  executionDialogOpen?: string;
   visibleColumns: LocalStorageBackedVisibility;
 }
 
@@ -160,8 +160,6 @@ ORDER BY
 
       taskSpecDialogOpen: Boolean(props.openTaskDialog),
 
-      taskTableActionDialogActions: [],
-
       visibleColumns: new LocalStorageBackedVisibility(
         LocalStorageKeys.TASK_TABLE_COLUMN_SELECTION,
       ),
@@ -243,10 +241,26 @@ ORDER BY
     datasource: string,
     status: string,
     type: string,
+    fromTable?: boolean,
   ): BasicAction[] {
     const { goToDatasource, goToClassicBatchDataLoader } = this.props;
 
     const actions: BasicAction[] = [];
+    if (fromTable) {
+      actions.push({
+        icon: IconNames.SEARCH_TEMPLATE,
+        title: 'View raw details',
+        onAction: () => {
+          this.setState({
+            taskTableActionDialogOpen: {
+              id,
+              status,
+              actions: this.getTaskActions(id, datasource, status, type),
+            },
+          });
+        },
+      });
+    }
     if (datasource && status === 'SUCCESS') {
       actions.push({
         icon: IconNames.MULTI_SELECT,
@@ -317,16 +331,19 @@ ORDER BY
   }
 
   private onTaskDetail(task: TaskQueryResultRow) {
+    if (task.type === 'query_controller') {
       this.setState({
-      taskTableActionDialogId: task.task_id,
-      taskTableActionDialogStatus: task.status,
-      taskTableActionDialogActions: this.getTaskActions(
-        task.task_id,
-        task.datasource,
-        task.status,
-        task.type,
-      ),
+        executionDialogOpen: task.task_id,
       });
+    } else {
+      this.setState({
+        taskTableActionDialogOpen: {
+          id: task.task_id,
+          status: task.status,
+          actions: this.getTaskActions(task.task_id, task.datasource, task.status, task.type),
+        },
+      });
+    }
   }
 
   private renderTaskTable() {
@@ -482,11 +499,10 @@ ORDER BY
               const id = row.value;
               const type = row.row.type;
               const { datasource, status } = row.original;
-              const taskActions = this.getTaskActions(id, datasource, status, type);
               return (
                 <ActionCell
                   onDetail={() => this.onTaskDetail(row.original)}
-                  actions={taskActions}
+                  actions={this.getTaskActions(id, datasource, status, type, true)}
                 />
               );
             },
@@ -520,13 +536,13 @@ ORDER BY
   }
 
   render() {
+    const { onFiltersChange } = this.props;
     const {
       groupTasksBy,
       taskSpecDialogOpen,
+      executionDialogOpen,
       alertErrorMsg,
-      taskTableActionDialogId,
-      taskTableActionDialogActions,
-      taskTableActionDialogStatus,
+      taskTableActionDialogOpen,
       visibleColumns,
     } = this.state;
 
@@ -603,12 +619,22 @@ ORDER BY
         >
           <p>{alertErrorMsg}</p>
         </AlertDialog>
-        {taskTableActionDialogId && taskTableActionDialogStatus && (
+        {taskTableActionDialogOpen && (
           <TaskTableActionDialog
-            status={taskTableActionDialogStatus}
-            taskId={taskTableActionDialogId}
-            actions={taskTableActionDialogActions}
-            onClose={() => this.setState({ taskTableActionDialogId: undefined })}
+            taskId={taskTableActionDialogOpen.id}
+            status={taskTableActionDialogOpen.status}
+            actions={taskTableActionDialogOpen.actions}
+            onClose={() => this.setState({ taskTableActionDialogOpen: undefined })}
+          />
+        )}
+        {executionDialogOpen && (
+          <ExecutionDetailsDialog
+            id={executionDialogOpen}
+            goToTask={taskId => {
+              onFiltersChange([{ id: 'task_id', value: `=${taskId}` }]);
+              this.setState({ executionDialogOpen: undefined });
+            }}
+            onClose={() => this.setState({ executionDialogOpen: undefined })}
           />
         )}
       </div>

web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx

@@ -95,6 +95,7 @@ export const ExecutionDetailsPane = React.memo(function ExecutionDetailsPane(
                 ? String(execution.sqlQuery)
                 : JSONBig.stringify(execution.nativeQuery, undefined, 2)
             }
+            leaveBackground
           />
         );
 

web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx

@@ -221,7 +221,7 @@ export const ExecutionStagesPane = React.memo(function ExecutionStagesPane(
             accessor: d => d.index,
             width: 100,
             Cell({ value }) {
-              const taskId = `${execution.id}-worker${value}`;
+              const taskId = `${execution.id}-worker${value}_0`;
               return (
                 <TableClickableCell
                   hoverIcon={IconNames.SHARE}