Batch Application context menu and delete refactor.

app/components/application/action/delete/delete-application-action.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 
 import { BackgroundTaskService } from "app/components/base/background-task";
 import { WaitForDeletePoller } from "app/components/core/pollers";
@@ -14,8 +14,21 @@ export class DeleteApplicationAction extends LongRunningDeleteAction {
         super("Application", applicationIds);
     }
 
+    /**
+     * Delete the package versions first and then remove the parent
+     * application container.
+     */
     public deleteAction(id: string) {
-        return this.applicationService.delete(id);
+        return this.applicationService.get(id)
+            .flatMap((app) => {
+                const packageArray = app.packages.toArray();
+                const observable = Observable.interval(100).take(packageArray.length);
+                return observable.flatMap((i) => {
+                    return this.applicationService.deletePackage(id, packageArray[i].version);
+                });
+            }).last().flatMap(() => {
+                return this.applicationService.delete(id);
+            }).share();
     }
 
     protected waitForDelete(id: string, taskManager?: BackgroundTaskService) {

app/components/application/action/delete/delete-application-dialog.html

@@ -1,4 +1,4 @@
-<bl-simple-form [submit]="destroyApplication" [containerRef]="dialogRef" actionColor="warn" actionName="Delete" [stickyFooter]="false" [multiUse]="false"
+<bl-simple-form [submit]="destroyApplication" [containerRef]="dialogRef" actionColor="warn" actionName="Delete" [multiUse]="false"
     size="small" title="Delete application">
     <div class="message">
         <p>Do you want to delete the application: '<b>{{applicationId}}</b>'?</p>

app/components/application/browse/application-list.component.ts

@@ -1,18 +1,20 @@
 import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { MatDialog } from "@angular/material";
 import { Router } from "@angular/router";
 import { autobind } from "core-decorators";
 import { List } from "immutable";
 import { Observable, Subscription } from "rxjs";
 
-import { BackgroundTaskService } from "app/components/base/background-task";
+import { ContextMenu, ContextMenuItem } from "app/components/base/context-menu";
 import { LoadingStatus } from "app/components/base/loading";
 import { QuickListItemStatus } from "app/components/base/quick-list";
 import { ListOrTableBase } from "app/components/base/selectable-list";
 import { BatchApplication } from "app/models";
 import { ApplicationService } from "app/services";
 import { RxListProxy } from "app/services/core";
 import { Filter } from "app/utils/filter-builder";
-import { DeleteApplicationAction } from "../action";
+import { SidebarManager } from "../../base/sidebar";
+import { ApplicationEditDialogComponent, DeleteApplicationDialogComponent } from "../action";
 
 @Component({
     selector: "bl-application-list",
@@ -40,8 +42,9 @@ export class ApplicationListComponent extends ListOrTableBase implements OnInit,
 
     constructor(
         router: Router,
+        protected dialog: MatDialog,
         private applicationService: ApplicationService,
-        private taskManager: BackgroundTaskService) {
+        private sidebarManager: SidebarManager) {
 
         super();
 
@@ -86,13 +89,18 @@ export class ApplicationListComponent extends ListOrTableBase implements OnInit,
         this.data.fetchNext();
     }
 
-    public deleteSelected() {
-        this.taskManager.startTask("", (backgroundTask) => {
-            const task = new DeleteApplicationAction(this.applicationService, this.selectedItems);
-            task.start(backgroundTask);
-
-            return task.waitingDone;
-        });
+    public contextmenu(application: BatchApplication) {
+        return new ContextMenu([
+            new ContextMenuItem({
+                label: "Delete",
+                click: () => this._deleteApplication(application),
+                enabled: application.allowUpdates,
+            }),
+            new ContextMenuItem({
+                label: "Edit",
+                click: () => this._editApplication(application),
+            }),
+        ]);
     }
 
     private _filterApplications() {
@@ -106,4 +114,17 @@ export class ApplicationListComponent extends ListOrTableBase implements OnInit,
             return !text || app.id.toLowerCase().indexOf(text) !== -1;
         }));
     }
+
+    private _editApplication(application: BatchApplication) {
+        const sidebarRef = this.sidebarManager.open("edit-application", ApplicationEditDialogComponent);
+        sidebarRef.component.setValue(application);
+        sidebarRef.afterCompletion.subscribe(() => {
+            this.refresh();
+        });
+    }
+
+    private _deleteApplication(application: BatchApplication) {
+        const dialogRef = this.dialog.open(DeleteApplicationDialogComponent);
+        dialogRef.componentInstance.applicationId = application.id;
+    }
 }

app/components/application/browse/application-list.html

@@ -1,5 +1,6 @@
 <bl-quick-list *ngIf="quickList">
-    <bl-quick-list-item *ngFor="let application of displayedApplications" [link]="['/applications/', application.id]" [key]="application.id">
+    <bl-quick-list-item *ngFor="let application of displayedApplications" [link]="['/applications/', application.id]"
+        [key]="application.id" [contextmenu]="contextmenu(application)">
         <bl-quick-list-item-status [status]="appStatus(application)">
         </bl-quick-list-item-status>
 
@@ -18,7 +19,8 @@
         <bl-column>Default Version</bl-column>
         <bl-column>Allow Updates</bl-column>
     </bl-thead>
-    <bl-row *ngFor="let application of displayedApplications" [link]="['/applications/', application.id]" [key]="application.id">
+    <bl-row *ngFor="let application of displayedApplications" [link]="['/applications/', application.id]"
+        [key]="application.id" [contextmenu]="contextmenu(application)">
         <bl-cell>{{application.id}}</bl-cell>
         <bl-cell>{{application.packages?.size}}</bl-cell>
         <bl-cell>{{application.defaultVersion}}</bl-cell>

app/components/application/details/application-details.html

@@ -15,7 +15,7 @@
                 <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
                 <bl-add-button title="Add package" [action]="addPackage"></bl-add-button>
                 <bl-edit-button [action]="editApplication"></bl-edit-button>
-                <bl-delete-button [entity]="application" [action]="deleteApplication"></bl-delete-button>
+                <bl-delete-button [action]="deleteApplication" [enabled]="application.allowUpdates"></bl-delete-button>
             </bl-button-group>
         </bl-summary-card>
         <bl-application-error-display [application]="application"></bl-application-error-display>

app/components/base/buttons/buttons.component.ts

@@ -107,19 +107,17 @@ export class TerminateButtonComponent extends BaseButton {
 })
 export class DeleteButtonComponent extends BaseButton {
     @Input()
-    public entity: any;
+    public set enabled(enabled: boolean) {
+        this._enabled = enabled;
+    }
 
     @Input()
     public title: string = "Delete";
 
+    private _enabled: boolean = true;
+
     public get enabled() {
-        if (this.entity instanceof Job) {
-            return this.entity
-                && this.entity.state !== JobState.deleting
-                && this.entity.state !== JobState.terminating;
-        } else {
-            return true;
-        }
+        return this._enabled;
     }
 }
 

app/components/data/details/data-details.html

@@ -8,7 +8,7 @@
             <bl-button-group summaryActions>
                 <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
                 <bl-edit-button title="Add more files to the file group" [action]="manageFileGroup"></bl-edit-button>
-                <bl-delete-button title="Delete this file group" [entity]="container" [action]="deleteFileGroup"></bl-delete-button>
+                <bl-delete-button title="Delete this file group" [action]="deleteFileGroup"></bl-delete-button>
                 <bl-download-button title="Download this file group" [action]="download"></bl-download-button>
             </bl-button-group>
         </bl-summary-card>

app/components/job/details/job-details.component.ts

@@ -5,7 +5,7 @@ import { autobind } from "core-decorators";
 import { List } from "immutable";
 import { Subscription } from "rxjs";
 
-import { Job } from "app/models";
+import { Job, JobState } from "app/models";
 import { JobDecorator } from "app/models/decorators";
 import { JobParams, JobService } from "app/services";
 import { EntityView } from "app/services/core";
@@ -37,7 +37,7 @@ export class JobDetailsComponent implements OnInit, OnDestroy {
     public job: Job;
     public decorator: JobDecorator;
     public data: EntityView<Job, JobParams>;
-
+    public JobState = JobState;
     public hasHookTask = false;
 
     private _paramsSubscriber: Subscription;

app/components/job/details/job-details.html

@@ -11,7 +11,7 @@
                 <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
                 <bl-add-task-button title="Add task" [job]="job" [action]="addTask"></bl-add-task-button>
                 <bl-terminate-button [entity]="job" [action]="terminateJob"></bl-terminate-button>
-                <bl-delete-button [entity]="job" [action]="deleteJob"></bl-delete-button>
+                <bl-delete-button [action]="deleteJob" [enabled]="job.state !== JobState.deleting && job.state !== JobState.terminating"></bl-delete-button>
                 <bl-disable-button [job]="job" [action]="disableJob"></bl-disable-button>
                 <bl-enable-button [job]="job" [action]="enableJob"></bl-enable-button>
                 <bl-clone-button [action]="cloneJob"></bl-clone-button>

app/components/node/details/node-details.html

@@ -7,7 +7,7 @@
             <bl-button-group summaryActions>
                 <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
                 <bl-button color="light" [action]="connect" icon="fa fa-plug"></bl-button>
-                <bl-delete-button [entity]="node" [action]="delete"></bl-delete-button>
+                <bl-delete-button [action]="delete"></bl-delete-button>
                 <bl-button color="light" [action]="reboot" title="Reboot"><i class="fa fa-power-off"></i></bl-button>
                 <bl-edit-button [action]="editStartTask" title="Edit start task"></bl-edit-button>
             </bl-button-group>

app/components/pool/details/pool-details.html

@@ -15,7 +15,7 @@
                 <bl-add-button title="Add job" [action]="addJob"></bl-add-button>
                 <bl-resize-button [action]="resizePool"></bl-resize-button>
                 <bl-clone-button [action]="clonePool"></bl-clone-button>
-                <bl-delete-button [entity]="pool" [action]="deletePool"></bl-delete-button>
+                <bl-delete-button [action]="deletePool"></bl-delete-button>
             </bl-button-group>
             <div summaryRightContent>
                 <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>

app/components/task/details/task-details.html

@@ -6,7 +6,7 @@
             <bl-button-group summaryActions>
                 <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
                 <bl-terminate-button [entity]="task" [action]="terminateTask"></bl-terminate-button>
-                <bl-delete-button [entity]="task" [action]="deleteTask"></bl-delete-button>
+                <bl-delete-button [action]="deleteTask"></bl-delete-button>
                 <bl-clone-button [action]="cloneTask"></bl-clone-button>
             </bl-button-group>
             <div summaryRightContent>

test/app/components/application/browse/application-list.component.spec.ts

@@ -1,11 +1,13 @@
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { MatDialog } from "@angular/material";
 import { By } from "@angular/platform-browser";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Subject } from "rxjs";
 
 import { ApplicationListComponent } from "app/components/application/browse";
 import { BackgroundTaskService } from "app/components/base/background-task";
+import { SidebarManager } from "app/components/base/sidebar";
 import { BatchApplication } from "app/models";
 import { ApplicationService } from "app/services";
 import { FilterBuilder } from "app/utils/filter-builder";
@@ -38,8 +40,10 @@ describe("ApplicationListComponent", () => {
             imports: [RouterTestingModule],
             declarations: [ApplicationListComponent, NoItemMockComponent],
             providers: [
+                { provide: MatDialog, useValue: null },
                 { provide: ApplicationService, useValue: applicationServiceSpy },
                 { provide: BackgroundTaskService, useValue: null },
+                { provide: SidebarManager, useValue: null },
             ],
             schemas: [NO_ERRORS_SCHEMA],
         });