feat: prompt for instance shutdown when Tale delete=409

src/app/+tale-catalog/tale-catalog/components/my-tales/my-tales.component.html

@@ -13,7 +13,7 @@
     </div>
 
   <!-- Running Tales -->
-  <app-running-tales [instances]="instances" [creators]="creators" [taleList]="tales"></app-running-tales>
+  <app-running-tales [instances]="instances" [creators]="creators" [taleList]="tales" (taleDeleted)="refresh()"></app-running-tales>
 
   <div class="row" style="margin-top:40px;margin-bottom:30px;" *ngIf="(tales | myTales | stopped:instances) as allStoppedTales">
     <div class="sixteen wide column" *ngIf="(tales | searchTales:searchQuery:creators | myTales | stopped:instances) as filteredStoppedTales">

src/app/+tale-catalog/tale-catalog/components/public-tales/public-tales.component.html

@@ -13,7 +13,7 @@
     </div>
 
   <!-- Running Tales -->
-  <app-running-tales *ngIf="tokenService.user.value" [instances]="instances" [creators]="creators" [taleList]="tales"></app-running-tales>
+  <app-running-tales *ngIf="tokenService.user.value" [instances]="instances" [creators]="creators" [taleList]="tales" (taleDeleted)="refresh()"></app-running-tales>
 
   <div class="row" style="margin-top:40px;margin-bottom:30px;" *ngIf="(tales | publicTales) as allPublicTales">
     <div class="sixteen wide column" *ngIf="(tales | searchTales:searchQuery:creators | publicTales) as filteredPublicTales">

src/app/+tale-catalog/tale-catalog/components/public-tales/public-tales.component.ts

@@ -1,8 +1,10 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Component, Input, NgZone, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AccessLevel, Instance, Tale, User } from '@api/models';
 import { InstanceService, TaleService, UserService } from '@api/services';
 import { TokenService } from '@api/token.service';
+import { ConfirmationModalComponent } from '@shared/common/components/confirmation-modal/confirmation-modal.component';
 import { LogService } from '@shared/core/log.service';
 import { TaleAuthor } from '@tales/models/tale-author';
 import { SyncService } from '@tales/sync.service';
@@ -204,10 +206,33 @@ export class PublicTalesComponent implements OnChanges, OnInit, OnDestroy {
 
         this.tales = this.tales.filter((t: Tale) => t._id !== id);
         this.ref.detectChanges();
-      }, err => {
+      }, (err: HttpErrorResponse) => {
+        if (err.status === 409) {
+          const confirmRef = this.dialog.open(ConfirmationModalComponent, {
+            data: {
+              content: [
+                'This Tale still has running instances.',
+                'Deleting this Tale will terminate the running instances.',
+                'This cannot be undone.',
+                '',
+                'Are you sure?'
+              ]
+            }
+          });
+          confirmRef.afterClosed().subscribe(confirmResult => {
+            if (confirmResult) {
+              this.taleService.taleDeleteTale({ id, force: true }).subscribe(deleted => {
+                this.tales = this.tales.filter((t: Tale) => t._id !== id);
+                this.ref.detectChanges();
+              }, (confirmErr) => {
+                this.logger.error("Failed to force deletion of Tale:", confirmErr);
+              });
+            }
+          });
+        } else {
           this.logger.error("Failed to delete Tale:", err);
+        }
       });
     });
   }
-
 }

src/app/+tale-catalog/tale-catalog/components/running-tales/running-tales.component.html

@@ -18,6 +18,7 @@
         <div class="ui two stackable doubling selectable special cards">
           <div class="ui card" *ngFor="let tale of filteredRunningTales; index as i; trackBy: trackById">
             <div class="extra content">
+              <div class="right floated meta" (click)="openDeleteTaleModal(tale)"><i class="close icon"></i></div>
               <span style="text-transform:uppercase">
                 {{ tale.copyOfTale ? 'copy' : 'original' }}
               </span>

src/app/+tale-catalog/tale-catalog/components/running-tales/running-tales.component.ts

@@ -1,6 +1,14 @@
-import { Component, Input, NgZone, Output } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Instance, Tale, User } from '@api/models';
+import { TaleService } from '@api/services/tale.service';
+import { ConfirmationModalComponent } from '@shared/common/components/confirmation-modal/confirmation-modal.component';
+import { LogService } from '@shared/core';
 import { TaleAuthor } from '@tales/models/tale-author';
+import {
+  DeleteTaleModalComponent
+} from '~/app/+tale-catalog/tale-catalog/modals/delete-tale-modal/delete-tale-modal.component';
 
 // import * as $ from 'jquery';
 declare var $: any;
@@ -16,11 +24,20 @@ export class RunningTalesComponent {
 
   @Input() instances: Map<string, Instance>; // = new Map<string, Instance> ();
 
+  @Output()
+  readonly taleDeleted: EventEmitter<Tale> = new EventEmitter<Tale>();
+
   @Input() creators: Map<string, User>; // = new Map<string, User> ();
 
   truncateLength = 100;
 
-  constructor(private readonly zone: NgZone) {  }
+  constructor(
+    private readonly zone: NgZone,
+    private readonly ref: ChangeDetectorRef,
+    private readonly dialog: MatDialog,
+    private readonly logger: LogService,
+    private readonly taleService: TaleService
+  ) {  }
 
   get instanceCount(): number {
     return Object.keys(this.instances).length;
@@ -46,7 +63,46 @@ export class RunningTalesComponent {
     });
   }
 
-  taleInstanceStateChanged(updated: {tale: Tale, instance: Instance}): void {
+  openDeleteTaleModal(tale: Tale): void {
+    const dialogRef = this.dialog.open(DeleteTaleModalComponent);
+    dialogRef.afterClosed().subscribe(result => {
+      if (!result) { return; }
+
+      const id = tale._id;
+      this.taleService.taleDeleteTale({ id }).subscribe(response => {
+        this.logger.debug("Successfully deleted Tale:", response);
+        this.taleDeleted.emit(tale);
+
+        this.ref.detectChanges();
+      }, (err: HttpErrorResponse) => {
+        if (err.status === 409) {
+          this.dialog.open(ConfirmationModalComponent, {
+            data: {
+              content: [
+                'This Tale still has running instances.',
+                'Deleting this Tale will terminate the running instances.',
+                'This cannot be undone.',
+                '',
+                'Are you sure?'
+              ]
+            }
+          }).afterClosed().subscribe(confirmResult => {
+            if (confirmResult) {
+              this.taleService.taleDeleteTale({ id, force: true }).subscribe(deleted => {
+                this.taleDeleted.emit(tale);
+              }, (confirmErr) => {
+                this.logger.error("Failed to force deletion of Tale:", confirmErr);
+              });
+            }
+          });
+        } else {
+          this.logger.error("Failed to delete Tale:", err);
+        }
+      });
+    });
+  }
+
+  taleInstanceStateChanged($event: { tale: Tale; instance: Instance }): void {
     // this.refresh();
   }
 }

src/app/+tale-catalog/tale-catalog/components/shared-tales/shared-tales.component.html

@@ -13,7 +13,7 @@
     </div>
 
   <!-- Running Tales -->
-  <app-running-tales [instances]="instances" [creators]="creators" [taleList]="tales"></app-running-tales>
+  <app-running-tales [instances]="instances" [creators]="creators" [taleList]="tales" (taleDeleted)="refresh()"></app-running-tales>
 
   <!-- Shared Tales -->
   <div class="row" style="margin-top:40px;margin-bottom:30px;" *ngIf="(tales | sharedTales | stopped:instances) as allStoppedTales">

src/app/api/services/tale.service.ts

@@ -204,6 +204,7 @@ class TaleService extends __BaseService {
     let __body: any = null;
 
     if (params.progress != null) __params = __params.set('progress', params.progress.toString());
+    if (params.force != null) __params = __params.set('force', params.force.toString());
     let req = new HttpRequest<any>('DELETE', this.rootUrl + `/tale/${params.id}`, __body, {
       headers: __headers,
       params: __params,
@@ -729,6 +730,11 @@ module TaleService {
      * Whether to record progress on this task.
      */
     progress?: boolean;
+
+    /**
+     * Whether to force deletion when Instances of this Tale still exist.
+     */
+    force?: boolean;
   }
 
   /**