Stop task execution

Resolves #1223

Author: oodamien

ui/src/app/tasks/task-execution/task-execution.component.html

@@ -19,6 +19,12 @@
         <span class="fa fa-play"></span>
         Relaunch task
       </button>
+      <button name="task-launch" type="button" id="task-stop"
+              (click)="stop(taskExecution)" class="btn btn-primary btn-fa" title="Stop the task execution"
+              [dataflowAppRoles]="['ROLE_CREATE']" [disabled]="!isRunning(taskExecution)">
+        <span class="fa fa-stop"></span>
+        Stop execution
+      </button>
     </app-page-head-actions>
   </app-page-head>
 

ui/src/app/tasks/task-execution/task-execution.component.spec.ts

@@ -17,15 +17,17 @@ import { DATAFLOW_LIST } from 'src/app/shared/components/list/list.component';
 import { DATAFLOW_PAGE } from '../../shared/components/page/page.component';
 import { PagerComponent } from '../../shared/components/pager/pager.component';
 import { NgxPaginationModule } from 'ngx-pagination';
-import { BsDropdownModule, TooltipModule } from 'ngx-bootstrap';
+import { BsDropdownModule, BsModalRef, BsModalService, TooltipModule } from 'ngx-bootstrap';
 import { DateTime } from 'luxon';
 import { RolesDirective } from '../../auth/directives/roles.directive';
 import { SharedAboutService } from '../../shared/services/shared-about.service';
 import { AuthService } from '../../auth/auth.service';
 import { MockAuthService } from '../../tests/mocks/auth';
 import { MocksSharedAboutService } from '../../tests/mocks/shared-about';
+import { LoggerService } from '../../shared/services/logger.service';
+import { MockModalService } from '../../tests/mocks/modal';
 
-describe('TaskExecutionsDetailsComponent', () => {
+describe('TaskExecutionComponent', () => {
   let component: TaskExecutionComponent;
   let fixture: ComponentFixture<TaskExecutionComponent>;
   let activeRoute: MockActivatedRoute;
@@ -35,6 +37,8 @@ describe('TaskExecutionsDetailsComponent', () => {
 
   const authService = new MockAuthService();
   const aboutService = new MocksSharedAboutService();
+  const bsModalRef = new BsModalRef();
+  const modalServie = new MockModalService();
 
   const commonTestParams = { id: '1' };
   const commonTestExecutionDetails = {
@@ -48,20 +52,7 @@ describe('TaskExecutionsDetailsComponent', () => {
       arguments: ['--spring.cloud.task.executionid=1'],
       jobExecutionIds: [],
       errorMessage: null,
-      externalExecutionId: 'footask-d465ffe7-6874-42f7-ab04-191e9e6c6376'
-    }
-  };
-  const commonTestExecutionDetailsWithJobIds = {
-    1: {
-      executionId: 1,
-      exitCode: 0,
-      taskName: 'footask',
-      startTime: DateTime.fromISO('2017-08-10T05:46:19.079Z'),
-      endTime: DateTime.fromISO('2017-08-10T05:46:19.098Z'),
-      exitMessage: null,
-      arguments: ['--spring.cloud.task.executionid=1'],
-      jobExecutionIds: [1, 2, 3],
-      errorMessage: null,
+      taskExecutionStatus: 'COMPLETE',
       externalExecutionId: 'footask-d465ffe7-6874-42f7-ab04-191e9e6c6376'
     }
   };
@@ -93,7 +84,10 @@ describe('TaskExecutionsDetailsComponent', () => {
         { provide: TasksService, useValue: tasksService },
         { provide: RoutingStateService, useValue: routingStateService },
         { provide: ActivatedRoute, useValue: activeRoute },
-        { provide: NotificationService, useValue: notificationService }
+        { provide: NotificationService, useValue: notificationService },
+        { provide: BsModalRef, useValue: bsModalRef },
+        { provide: BsModalService, useValue: modalServie },
+        LoggerService
       ]
     })
       .compileComponents();

ui/src/app/tasks/task-execution/task-execution.component.ts

@@ -7,6 +7,9 @@ import { Observable, EMPTY, of } from 'rxjs';
 import { RoutingStateService } from '../../shared/services/routing-state.service';
 import { NotificationService } from '../../shared/services/notification.service';
 import { AppError, HttpAppError } from '../../shared/model/error.model';
+import { TaskExecutionsStopComponent } from '../task-executions-stop/task-executions-stop.component';
+import { LoggerService } from '../../shared/services/logger.service';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
 
 /**
  * Component that display a Task Execution.
@@ -26,19 +29,28 @@ export class TaskExecutionComponent implements OnInit {
    */
   taskExecution$: Observable<any>;
 
+  /**
+   * Modal reference
+   */
+  modal: BsModalRef;
+
   /**
    * Constructor
    *
    * @param {TasksService} tasksService
    * @param {RoutingStateService} routingStateService
    * @param {NotificationService} notificationService
+   * @param {LoggerService} loggerService
+   * @param {BsModalService} modalService
    * @param {Router} router
    * @param {ActivatedRoute} route
    * @param {TasksService} tasksService
    */
   constructor(private tasksService: TasksService,
               private routingStateService: RoutingStateService,
               private notificationService: NotificationService,
+              private loggerService: LoggerService,
+              private modalService: BsModalService,
               private router: Router,
               private route: ActivatedRoute) {
   }
@@ -47,6 +59,13 @@ export class TaskExecutionComponent implements OnInit {
    * Initialize component
    */
   ngOnInit() {
+    this.refresh();
+  }
+
+  /**
+   * Refresh Method
+   */
+  refresh() {
     this.taskExecution$ = this.route.params
       .pipe(
         mergeMap(
@@ -114,5 +133,32 @@ export class TaskExecutionComponent implements OnInit {
     this.router.navigate([`tasks/definitions/${taskDefinitionName}`]);
   }
 
+  /**
+   * Task Execution running
+   * @param {TaskExecution} execution
+   */
+  isRunning(execution: TaskExecution): boolean {
+    if (execution && (execution.taskExecutionStatus === 'COMPLETE' || execution.taskExecutionStatus === 'ERROR')) {
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Stop a task execution
+   * @param {TaskExecution} execution
+   */
+  stop(execution: TaskExecution) {
+    if (!this.isRunning(execution)) {
+      this.notificationService.error('The task execution can not be stopped, the execution is already terminated.');
+      return;
+    }
+    this.loggerService.log(`Stop ${execution} task execution`, execution);
+    this.modal = this.modalService.show(TaskExecutionsStopComponent, { class: 'modal-md' });
+    this.modal.content.open({ taskExecutions: [execution] }).subscribe(() => {
+      this.refresh();
+    });
+  }
+
 
 }

ui/src/app/tasks/task-executions-stop/task-executions-stop.component.html

@@ -0,0 +1,39 @@
+<div *ngIf="taskExecutions">
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">Confirm Stop Task Execution</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body" *ngIf="taskExecutions.length == 1">
+    <p>This action will stop the task execution <strong>{{ taskExecutions[0].executionId }}</strong> (task
+      <strong>{{ taskExecutions[0].taskName }}</strong>). Are you sure?</p>
+  </div>
+  <div class="modal-body" *ngIf="taskExecutions.length > 1">
+    <p>
+      This action will stop <strong>{{ taskExecutions.length }} task executions</strong>.
+      Are you sure?
+    </p>
+    <br/>
+    <table id="table-tasks" class="table table-striped">
+      <thead>
+      <tr>
+        <th>Task Execution ID</th>
+        <th>Task</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let item of taskExecutions">
+        <td>{{ item.executionId }}</td>
+        <td>{{ item.taskName }}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="modal-footer" style="text-align:center">
+    <button id="btn-cancel" type="button" class="btn btn-default" (click)="cancel()">No</button>
+    <button id="btn-stop" type="button" class="btn btn-primary" (click)="stop()">
+      Stop Task Execution(s)
+    </button>
+  </div>
+</div>