Web-Console: tail log based on task status (#7888)

* clean up

* fix declarations

* spacing

web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap

@@ -11,6 +11,7 @@ exports[`show log describe show log 1`] = `
       class="bp3-control bp3-checkbox"
     >
       <input
+        checked=""
         type="checkbox"
       />
       <span

web-console/src/components/show-log/show-log.spec.tsx

@@ -25,6 +25,7 @@ describe('show log', () => {
   it('describe show log', () => {
     const showLog =
       <ShowLog
+        status={'RUNNING'}
         endpoint={'test'}
         downloadFilename={'test'}
       />;

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

@@ -39,6 +39,7 @@ export interface ShowLogProps extends React.Props<any> {
   endpoint: string;
   downloadFilename?: string;
   tailOffset?: number;
+  status: string | null;
 }
 
 export interface ShowLogState {
@@ -53,11 +54,17 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
     super(props, context);
     this.state = {
       logValue: '',
-      tail: false
+      tail: true
     };
     this.getLogInfo();
   }
 
+  componentDidMount(): void {
+    if (this.props.status === 'RUNNING') {
+      this.tail();
+    }
+  }
+
   private getLogInfo = async (): Promise<void> => {
     const { endpoint, tailOffset } = this.props;
     try {
@@ -97,16 +104,19 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
 
 
   render() {
-    const { endpoint, downloadFilename } = this.props;
+    const { endpoint, downloadFilename, status } = this.props;
     const { logValue } = this.state;
 
     return <div className="show-log">
       <div className="top-actions">
+      {
+        status === 'RUNNING' &&
         <Checkbox
           label="Tail log"
           checked={this.state.tail}
           onChange={this.handleCheckboxChange}
         />
+      }
         <ButtonGroup className="right-buttons">
           {
             downloadFilename &&

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

@@ -26,6 +26,7 @@ describe('task table action dialog', () => {
   it('matches snapshot', () => {
     const taskTableActionDialog =
       <TaskTableActionDialog
+        status={'RUNNING'}
         taskId={'test'}
         actions={[basicAction]}
         onClose={() => null}

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

@@ -28,6 +28,7 @@ interface TaskTableActionDialogProps extends IDialogProps {
   taskId: string;
   actions: BasicAction[];
   onClose: () => void;
+  status: string | null ;
 }
 
 interface TaskTableActionDialogState {
@@ -43,7 +44,7 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
   }
 
   render(): React.ReactNode {
-    const { taskId, actions, onClose } = this.props;
+    const { taskId, actions, onClose, status } = this.props;
     const { activeTab } = this.state;
 
     const taskTableSideButtonMetadata: SideButtonMetaData[] = [
@@ -107,6 +108,7 @@ export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDi
       {
         activeTab === 'log' &&
         <ShowLog
+          status={status}
           endpoint={`/druid/indexer/v1/task/${taskId}/log`}
           downloadFilename={`task-log-${taskId}.json`}
           tailOffset={16000}

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

@@ -76,6 +76,7 @@ export interface TasksViewState {
   alertErrorMsg: string | null;
 
   taskTableActionDialogId: string | null;
+  taskTableActionDialogStatus: string | null;
   taskTableActionDialogActions: BasicAction[];
   supervisorTableActionDialogId: string | null;
   supervisorTableActionDialogActions: BasicAction[];
@@ -154,6 +155,7 @@ export class TasksView extends React.PureComponent<TasksViewProps, TasksViewStat
       alertErrorMsg: null,
 
       taskTableActionDialogId: null,
+      taskTableActionDialogStatus: null,
       taskTableActionDialogActions: [],
       supervisorTableActionDialogId: null,
       supervisorTableActionDialogActions: []
@@ -690,6 +692,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
               return <ActionCell
                 onDetail={() => this.setState({
                   taskTableActionDialogId: id,
+                  taskTableActionDialogStatus: status,
                   taskTableActionDialogActions: taskActions
                 })}
                 actions={taskActions}
@@ -707,7 +710,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
 
   render() {
     const { goToSql, goToLoadDataView, noSqlMode } = this.props;
-    const { groupTasksBy, supervisorSpecDialogOpen, taskSpecDialogOpen, alertErrorMsg, taskTableActionDialogId, taskTableActionDialogActions, supervisorTableActionDialogId, supervisorTableActionDialogActions } = this.state;
+    const { groupTasksBy, supervisorSpecDialogOpen, taskSpecDialogOpen, alertErrorMsg, taskTableActionDialogId, taskTableActionDialogActions, supervisorTableActionDialogId, supervisorTableActionDialogActions, taskTableActionDialogStatus } = this.state;
     const { supervisorTableColumnSelectionHandler, taskTableColumnSelectionHandler } = this;
     const submitTaskMenu = <Menu>
       <MenuItem
@@ -822,6 +825,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
         taskTableActionDialogId &&
         <TaskTableActionDialog
           isOpen
+          status={taskTableActionDialogStatus}
           taskId={taskTableActionDialogId}
           actions={taskTableActionDialogActions}
           onClose={() => this.setState({taskTableActionDialogId: null})}