WS-742: modified cancel request button in request operations component to only cancel...

apps/web/src/app/workspaces/components/capability-request/capability-request.component.html

 <div *ngIf="this.capabilityRequest">
   <header>
-    <app-request-header [capabilityRequest]="capabilityRequest"></app-request-header>
+    <app-request-header [capabilityRequest]="capabilityRequest" [latestVersion]="latestVersion"></app-request-header>
   </header>
   <div class="row">
 <!--    DATA ACCESS & QA ACTIONS    -->

apps/web/src/app/workspaces/components/capability-request/components/capability-data-access/capability-data-access.component.html

@@ -14,14 +14,14 @@
   <div class="d-flex justify-content-center py-3" *ngIf="currentVersion.current_execution && (shouldHaveWeblog() || shouldHaveDownload()); else processingNotCompleteMessage">
     <a id="download-button" class="btn btn-warning" *ngIf="shouldHaveDownload()"
        href="{{ this.currentVersion.current_execution.delivery_url }}">
-      Download
+      <span class="fas fa-download"></span> Download
     </a>
     <a class="btn btn-primary" *ngIf="shouldHaveWeblog()"
        href="/workflows/{{ this.capability.name }}
        /requests/{{this.currentVersion.current_execution.current_workflow_request_id}}/weblog">
-      View Weblog
+      <span class="fas fa-eye"></span> View Weblog
     </a>
-    <app-editor *ngIf="shouldHaveWeblog() && !capabilityRequest.ingested" style="margin-left: 150px" modalTitleText="Edit QA Notes" [textToEdit]="qaNotes" (newEditEvent)="emitEditEventToParent($event)">Edit QA Notes</app-editor>
+    <app-editor *ngIf="shouldHaveWeblog() && !capabilityRequest.ingested" style="margin-left: 150px" modalTitleText="Edit QA Notes" [textToEdit]="qaNotes" (newEditEvent)="emitEditEventToParent($event)"><span class="fas fa-edit"></span> Edit QA Notes</app-editor>
   </div>
 </div>
 

apps/web/src/app/workspaces/components/capability-request/components/qa-controls/qa-controls.component.html

 
 <!--Single Stage QA Controls-->
-<span id="single-qa-label" *ngIf="this.capability.state_machine === 'single_qa'">QA Processing</span>
-<div id="single-qa-container" class="container-fluid rounded-top rounded-3 p-3" *ngIf="this.capability.state_machine === 'single_qa' ">
+<span id="single-qa-label" *ngIf="this.capability && this.capability.state_machine === 'single_qa'">QA Processing</span>
+<div id="single-qa-container" class="container-fluid rounded-top rounded-3 p-3" *ngIf="this.capability && this.capability.state_machine === 'single_qa' ">
   <div id="qa-container" class="container-fluid rounded-top rounded-3 p-3">
     <div class="btn-group" >
       <button
@@ -42,8 +42,8 @@
 
 
 <!--Two Stage QA Controls-->
-<span id="double-qa-label" *ngIf="this.capability.state_machine === 'double_qa' ">Two Stage QA Processing</span>
-<div id="double-qa-container" class="container-fluid rounded-top rounded-3 p-3" *ngIf="this.capability.state_machine === 'double_qa' ">
+<span id="double-qa-label" *ngIf="this.capability && this.capability.state_machine === 'double_qa' ">Two Stage QA Processing</span>
+<div id="double-qa-container" class="container-fluid rounded-top rounded-3 p-3" *ngIf="this.capability && this.capability.state_machine === 'double_qa' ">
   <span id="qa-label">DA Review</span>
   <div id="qa-container" class="container-fluid rounded-top rounded-3 p-3">
     <div class="btn-group">

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html

@@ -14,6 +14,27 @@
         <span class="pl-2"><strong>ARCHIVED</strong></span>
       </span>
     </h5>
+    <div ngbDropdown container="body">
+      <button class="btn" id="nDropdown" ngbDropdownToggle>
+        <span class="rounded-pill">
+          <span class="fas fa-ellipsis-v"></span>
+        </span>
+      </button>
+      <div ngbDropdownMenu aria-labelledby="nDropdown">
+        <button
+          ngbDropdownItem
+          [hidden]="isCancellable()"
+          (click)="cancelRequest(capabilityRequest.id, latestVersion.version_number)"
+          >
+          <span class="text-danger">Cancel this request</span>
+        </button>
+        <button
+          ngbDropdownItem
+          >
+          <span class="text-muted">No action</span>
+        </button>
+      </div>
+    </div>
   </div>
 
   <div id="created-and-updated-timestamps" class="row px-5 justify-content-between">

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts

@@ -18,6 +18,8 @@
  */
 import { Component, Input, OnInit } from "@angular/core";
 import { CapabilityRequest } from "../../../../model/capability-request";
+import { CapabilityRequestService } from "../../../../services/capability-request.service";
+import { CapabilityVersion } from "../../../../model/capability-version";
 import * as dayjs from 'dayjs';
 import * as relativeTime from 'dayjs/plugin/relativeTime';
 import * as localizedFormat from 'dayjs/plugin/localizedFormat';
@@ -28,10 +30,11 @@ import * as localizedFormat from 'dayjs/plugin/localizedFormat';
 })
 export class RequestHeaderComponent implements OnInit {
   @Input() capabilityRequest: CapabilityRequest;
+  @Input() latestVersion: CapabilityVersion;
   createdAt;
   updatedAt;
 
-  constructor() {}
+  constructor(private capabilityRequestService: CapabilityRequestService,) {}
 
   ngOnInit(): void {
     this.createdAt = this.formatDate(this.capabilityRequest.created_at)
@@ -52,4 +55,30 @@ export class RequestHeaderComponent implements OnInit {
     date = dayjs(date)
     return now.diff(date, "week") ? true : false
   }
+
+  public cancelRequestObserver = {
+    next: () => {
+      window.location.reload();
+    },
+    error: (error) => {
+      console.log(error);
+    },
+  };
+
+  cancelRequest(request_id: string, version_id: number) {
+    this.capabilityRequestService
+      .cancelRequest(request_id, version_id.toString())
+      .subscribe(this.cancelRequestObserver)
+  }
+
+  isCancellable(): boolean {
+    return !(
+      this.latestVersion && (
+          this.latestVersion.state != 'Cancelled' &&
+          this.latestVersion.state != 'Complete' &&
+          this.latestVersion.state != 'Failed' &&
+          this.latestVersion.state != 'Error'
+        )
+      )
+  }
 }

apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.html

@@ -65,15 +65,15 @@
         ><span class="pl-2">Submit Version {{ selectedVersion.version_number }}</span>
       </button>
     </div>
-    <div class="col-auto d-flex" *ngIf="latestVersion && (latestVersion.state != 'Cancelled' && latestVersion.state != 'Complete' && latestVersion.state != 'Failed' && latestVersion.state != 'Error')">
+    <div class="col-auto d-flex" *ngIf="isVersionCancellable()">
       <button
         id="cancel-button"
         type="button"
         class="btn btn-danger"
-        (click)="cancelRequest(capabilityRequest.id, latestVersion.version_number)"
+        (click)="cancelVersion()"
       >
-        <span class="fas fa-times-circle"></span
-        ><span class="pl-2">Cancel Request</span>
+        <span class="fas fa-times-circle"></span>
+        <span class="pl-2">Cancel Version {{selectedVersion.version_number}}</span>
       </button>
     </div>
   </div>

apps/web/src/app/workspaces/components/capability-request/components/request-operations/request-operations.component.ts

@@ -21,6 +21,7 @@ import { CapabilityRequest } from "../../../../model/capability-request";
 import { Capability } from "../../../../model/capability";
 import { CapabilityLauncherService } from "../../../../services/capability-launcher.service";
 import { WorkflowLauncherService } from "../../../../services/workflow-launcher.service";
+import { WorkflowService } from "../../../../services/workflow.service";
 import { CapabilityExecution } from "../../../../model/capability-execution";
 import { CapabilityRequestService } from "../../../../services/capability-request.service";
 import { CapabilityVersion } from "../../../../model/capability-version";
@@ -34,6 +35,7 @@ export class RequestOperationsComponent implements OnInit {
   constructor(
     public capabilityLauncherService: CapabilityLauncherService,
     public workflowLauncherService: WorkflowLauncherService,
+    public workflowService: WorkflowService,
     private capabilityRequestService: CapabilityRequestService,
   ) {}
   @Input() capabilityRequest: CapabilityRequest;
@@ -83,7 +85,7 @@ export class RequestOperationsComponent implements OnInit {
     },
   };
 
-  public cancelRequestObserver = {
+  public cancelVersionObserver = {
     next: () => {
       window.location.reload();
     },
@@ -105,10 +107,19 @@ export class RequestOperationsComponent implements OnInit {
       .subscribe(this.launchCartaObserver);
   }
 
-  cancelRequest(request_id: string, version_id: string) {
-    this.capabilityRequestService
-      .cancelRequest(request_id, version_id)
-      .subscribe(this.cancelRequestObserver)
+  cancelVersion() {
+    let request_id = this.selectedVersion.current_execution["current_workflow_request_id"]
+    this.workflowService.abortWorkflow(request_id).subscribe(this.cancelVersionObserver)
+  }
+
+  isVersionCancellable(): boolean {
+    return (
+        this.selectedVersion &&
+        this.selectedVersion.state === 'Running' &&
+        this.selectedVersion.current_execution.state_name !== 'AoD Review' &&
+        this.selectedVersion.current_execution.state_name !== 'Awaiting QA' &&
+        this.selectedVersion.current_execution.state_name !== 'Ingesting'
+      )
   }
 
   ngOnInit(): void {

apps/web/src/app/workspaces/services/workflow.service.ts

@@ -38,4 +38,9 @@ export class WorkflowService {
     const url = this.endpoint + workflowName + "/requests/" + requestID + "/qa_notes";
     return this.httpClient.post<any>(url, JSON.stringify({"edits":edits}));
   }
+
+  abortWorkflow(requestID: string): Observable<string> {
+    const url = this.endpoint + "requests/" + requestID + "/abort";
+    return this.httpClient.post(url, JSON.stringify({"workflow_req_id": requestID}), {responseType: 'text'});
+  }
 }