Web console: Simplify task and supervisor detail displays (#7848)

* simplify detail display

* update tests

web-console/src/components/show-json/show-json.tsx

@@ -29,6 +29,7 @@ import './show-json.scss';
 
 export interface ShowJsonProps extends React.Props<any> {
   endpoint: string;
+  transform?: (x: any) => any;
   downloadFilename?: string;
 }
 
@@ -47,12 +48,14 @@ export class ShowJson extends React.PureComponent<ShowJsonProps, ShowJsonState>
   }
 
   private getJsonInfo = async (): Promise<void> => {
-    const { endpoint } = this.props;
+    const { endpoint, transform } = this.props;
+
     try {
       const resp = await axios.get(endpoint);
-      const data = resp.data;
+      let data = resp.data;
+      if (transform) data = transform(data);
       this.setState({
-        jsonValue: typeof (data) === 'string' ? data : JSON.stringify(data, undefined, 2)
+        jsonValue: typeof data === 'string' ? data : JSON.stringify(data, undefined, 2)
       });
     } catch (e) {
       this.setState({

web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap

@@ -61,35 +61,6 @@ exports[`supervisor table action dialog matches snapshot 1`] = `
             <button
               class="bp3-button bp3-intent-primary tab-button"
               type="button"
-            >
-              <span
-                class="bp3-icon bp3-icon-align-left"
-                icon="align-left"
-              >
-                <svg
-                  data-icon="align-left"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <desc>
-                    align-left
-                  </desc>
-                  <path
-                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
-              <span
-                class="bp3-button-text"
-              >
-                Payload
-              </span>
-            </button>
-            <button
-              class="bp3-button bp3-minimal tab-button"
-              type="button"
             >
               <span
                 class="bp3-icon bp3-icon-dashboard"
@@ -116,6 +87,35 @@ exports[`supervisor table action dialog matches snapshot 1`] = `
                 Status
               </span>
             </button>
+            <button
+              class="bp3-button bp3-minimal tab-button"
+              type="button"
+            >
+              <span
+                class="bp3-icon bp3-icon-align-left"
+                icon="align-left"
+              >
+                <svg
+                  data-icon="align-left"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <desc>
+                    align-left
+                  </desc>
+                  <path
+                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp3-button-text"
+              >
+                Payload
+              </span>
+            </button>
             <button
               class="bp3-button bp3-minimal tab-button"
               type="button"

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx

@@ -21,6 +21,7 @@ import * as React from 'react';
 
 import { ShowJson } from '../../components';
 import { BasicAction, basicActionsToButtons } from '../../utils/basic-action';
+import { deepGet } from '../../utils/object-change';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 interface SupervisorTableActionDialogProps extends IDialogProps {
@@ -30,14 +31,14 @@ interface SupervisorTableActionDialogProps extends IDialogProps {
 }
 
 interface SupervisorTableActionDialogState {
-  activeTab: 'payload' | 'status' | 'stats' | 'history';
+  activeTab: 'status' | 'payload' | 'stats' | 'history';
 }
 
 export class SupervisorTableActionDialog extends React.PureComponent<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
   constructor(props: SupervisorTableActionDialogProps) {
     super(props);
     this.state = {
-      activeTab: 'payload'
+      activeTab: 'status'
     };
   }
 
@@ -46,18 +47,18 @@ export class SupervisorTableActionDialog extends React.PureComponent<SupervisorT
     const { activeTab } = this.state;
 
     const supervisorTableSideButtonMetadata: SideButtonMetaData[] = [
-      {
-        icon: 'align-left',
-        text: 'Payload',
-        active: activeTab === 'payload',
-        onClick: () => this.setState({ activeTab: 'payload' })
-      },
       {
         icon: 'dashboard',
         text: 'Status',
         active: activeTab === 'status',
         onClick: () => this.setState({ activeTab: 'status' })
       },
+      {
+        icon: 'align-left',
+        text: 'Payload',
+        active: activeTab === 'payload',
+        onClick: () => this.setState({ activeTab: 'payload' })
+      },
       {
         icon: 'chart',
         text: 'Statistics',
@@ -79,10 +80,35 @@ export class SupervisorTableActionDialog extends React.PureComponent<SupervisorT
       title={`Supervisor: ${supervisorId}`}
       bottomButtons={basicActionsToButtons(actions)}
     >
-      {activeTab === 'payload' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}`} downloadFilename={`supervisor-payload-${supervisorId}.json`}/>}
+      {
-      {activeTab === 'status' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/status`} downloadFilename={`supervisor-status-${supervisorId}.json`}/>}
+        activeTab === 'status' &&
-      {activeTab === 'stats' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/stats`} downloadFilename={`supervisor-stats-${supervisorId}.json`}/>}
+        <ShowJson
-      {activeTab === 'history' && <ShowJson endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/history`} downloadFilename={`supervisor-history-${supervisorId}.json`}/>}
+          endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/status`}
+          transform={x => deepGet(x, 'payload')}
+          downloadFilename={`supervisor-status-${supervisorId}.json`}
+        />
+      }
+      {
+        activeTab === 'payload' &&
+        <ShowJson
+          endpoint={`/druid/indexer/v1/supervisor/${supervisorId}`}
+          downloadFilename={`supervisor-payload-${supervisorId}.json`}
+        />
+      }
+      {
+        activeTab === 'stats' &&
+        <ShowJson
+          endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/stats`}
+          downloadFilename={`supervisor-stats-${supervisorId}.json`}
+        />
+      }
+      {
+        activeTab === 'history' &&
+        <ShowJson
+          endpoint={`/druid/indexer/v1/supervisor/${supervisorId}/history`}
+          downloadFilename={`supervisor-history-${supervisorId}.json`}
+        />
+      }
     </TableActionDialog>;
   }
 }

web-console/src/dialogs/task-table-action-dialog/__snapshots__/task-table-action-dialog.spec.tsx.snap

@@ -61,35 +61,6 @@ exports[`task table action dialog matches snapshot 1`] = `
             <button
               class="bp3-button bp3-intent-primary tab-button"
               type="button"
-            >
-              <span
-                class="bp3-icon bp3-icon-align-left"
-                icon="align-left"
-              >
-                <svg
-                  data-icon="align-left"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
-                >
-                  <desc>
-                    align-left
-                  </desc>
-                  <path
-                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
-              <span
-                class="bp3-button-text"
-              >
-                Payload
-              </span>
-            </button>
-            <button
-              class="bp3-button bp3-minimal tab-button"
-              type="button"
             >
               <span
                 class="bp3-icon bp3-icon-dashboard"
@@ -116,6 +87,35 @@ exports[`task table action dialog matches snapshot 1`] = `
                 Status
               </span>
             </button>
+            <button
+              class="bp3-button bp3-minimal tab-button"
+              type="button"
+            >
+              <span
+                class="bp3-icon bp3-icon-align-left"
+                icon="align-left"
+              >
+                <svg
+                  data-icon="align-left"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <desc>
+                    align-left
+                  </desc>
+                  <path
+                    d="M1 7h10c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h18c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 14H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm4-8H1c-.55 0-1 .45-1 1s.45 1 1 1h18c.55 0 1-.45 1-1s-.45-1-1-1zM1 15h6c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp3-button-text"
+              >
+                Payload
+              </span>
+            </button>
             <button
               class="bp3-button bp3-minimal tab-button"
               type="button"

web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx

@@ -21,6 +21,7 @@ import * as React from 'react';
 
 import { ShowJson, ShowLog } from '../../components';
 import { BasicAction, basicActionsToButtons } from '../../utils/basic-action';
+import { deepGet } from '../../utils/object-change';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 interface TaskTableActionDialogProps extends IDialogProps {
@@ -30,14 +31,14 @@ interface TaskTableActionDialogProps extends IDialogProps {
 }
 
 interface TaskTableActionDialogState {
-  activeTab: 'payload' | 'status' | 'reports' | 'log';
+  activeTab: 'status' | 'payload' | 'reports' | 'log';
 }
 
 export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDialogProps, TaskTableActionDialogState> {
   constructor(props: TaskTableActionDialogProps) {
     super(props);
     this.state = {
-      activeTab: 'payload'
+      activeTab: 'status'
     };
   }
 
@@ -46,18 +47,18 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
     const { activeTab } = this.state;
 
     const taskTableSideButtonMetadata: SideButtonMetaData[] = [
-      {
-        icon: 'align-left',
-        text: 'Payload',
-        active: activeTab === 'payload',
-        onClick: () => this.setState({ activeTab: 'payload' })
-      },
       {
         icon: 'dashboard',
         text: 'Status',
         active: activeTab === 'status',
         onClick: () => this.setState({ activeTab: 'status' })
       },
+      {
+        icon: 'align-left',
+        text: 'Payload',
+        active: activeTab === 'payload',
+        onClick: () => this.setState({ activeTab: 'payload' })
+      },
       {
         icon: 'comparison',
         text: 'Reports',
@@ -79,10 +80,38 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
       title={`Task: ${taskId}`}
       bottomButtons={basicActionsToButtons(actions)}
     >
-      {activeTab === 'payload' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}`} downloadFilename={`task-payload-${taskId}.json`}/>}
+      {
-      {activeTab === 'status' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}/status`} downloadFilename={`task-status-${taskId}.json`}/>}
+        activeTab === 'status' &&
-      {activeTab === 'reports' && <ShowJson endpoint={`/druid/indexer/v1/task/${taskId}/reports`} downloadFilename={`task-reports-${taskId}.json`}/>}
+        <ShowJson
-      {activeTab === 'log' && <ShowLog endpoint={`/druid/indexer/v1/task/${taskId}/log`} downloadFilename={`task-log-${taskId}.json`} tailOffset={16000}/>}
+          endpoint={`/druid/indexer/v1/task/${taskId}/status`}
+          transform={x => deepGet(x, 'status')}
+          downloadFilename={`task-status-${taskId}.json`}
+        />
+      }
+      {
+        activeTab === 'payload' &&
+        <ShowJson
+          endpoint={`/druid/indexer/v1/task/${taskId}`}
+          transform={x => deepGet(x, 'payload')}
+          downloadFilename={`task-payload-${taskId}.json`}
+        />
+      }
+      {
+        activeTab === 'reports' &&
+        <ShowJson
+          endpoint={`/druid/indexer/v1/task/${taskId}/reports`}
+          transform={x => deepGet(x, 'ingestionStatsAndErrors.payload')}
+          downloadFilename={`task-reports-${taskId}.json`}
+        />
+      }
+      {
+        activeTab === 'log' &&
+        <ShowLog
+          endpoint={`/druid/indexer/v1/task/${taskId}/log`}
+          downloadFilename={`task-log-${taskId}.json`}
+          tailOffset={16000}
+        />
+      }
     </TableActionDialog>;
   }
 }