From 4d27a748165be62e41c8bb8b6e2c3684e30391c4 Mon Sep 17 00:00:00 2001
From: Hannes Hansen <mail@hannesh.de>
Date: Tue, 7 Nov 2023 14:12:02 +0100
Subject: [PATCH] changed deployment start stop process

---
 .../confirm-dialog.component.css              |   0
 .../confirm-dialog.component.html             |   7 +
 .../confirm-dialog.component.spec.ts          |  21 ++
 .../confirm-dialog.component.ts               |  28 +++
 .../main-navigation.component.html            |   6 +-
 src/app/core/core.module.ts                   |   6 +-
 src/app/core/services/api/api.service.ts      |   6 +-
 .../module-manager-mock.service.ts            |  27 ++-
 .../module-manager-service.service.ts         |  47 ++++-
 src/app/core/services/util/util.service.ts    |   9 +-
 src/app/deployments/deployments.module.ts     |   2 +
 .../pages/list/deployment-list.component.html |  69 ++++++-
 .../pages/list/deployment-list.component.ts   | 190 +++++++++++++++---
 src/app/jobs/list/list.component.html         |   8 +-
 14 files changed, 365 insertions(+), 61 deletions(-)
 create mode 100644 src/app/core/components/confirm-dialog/confirm-dialog.component.css
 create mode 100644 src/app/core/components/confirm-dialog/confirm-dialog.component.html
 create mode 100644 src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts
 create mode 100644 src/app/core/components/confirm-dialog/confirm-dialog.component.ts

diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.css b/src/app/core/components/confirm-dialog/confirm-dialog.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/app/core/components/confirm-dialog/confirm-dialog.component.html
new file mode 100644
index 0000000..56e14fa
--- /dev/null
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,7 @@
+<div id="outer" class="modal-outer">
+  <span>{{ message }}</span>
+  <div>
+    <button mat-raised-button color="primary" (click)="confirm()">Yes</button>
+    <button mat-raised-button color="primary" (click)="cancel()">No</button>
+  </div>
+</div>
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts
new file mode 100644
index 0000000..cf09cfd
--- /dev/null
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ConfirmDialogComponent]
+    });
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts
new file mode 100644
index 0000000..ebd8392
--- /dev/null
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.css']
+})
+export class ConfirmDialogComponent {
+  message!: string
+
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) data: any
+  ) {
+    this.message = data.message
+  }
+
+  cancel() {
+    this.dialogRef.close(false)
+  }
+
+  confirm() {
+    this.dialogRef.close(true)
+
+  }
+}
+
diff --git a/src/app/core/components/main-navigation/main-navigation.component.html b/src/app/core/components/main-navigation/main-navigation.component.html
index 8f8168d..439656e 100644
--- a/src/app/core/components/main-navigation/main-navigation.component.html
+++ b/src/app/core/components/main-navigation/main-navigation.component.html
@@ -2,13 +2,13 @@
   <mat-sidenav opened="true" mode="side" id="sidenav">
     <ul class="side-menu">
       <li *ngFor="let section of sections">
-        <button mat-button type=button routerLink="{{section.state}}" routerLinkActive="background-color-sidenav"
+        <button type=button routerLink="{{section.state}}" routerLinkActive="background-color-sidenav"
           *ngIf="section.type === 'link'">
           <mat-icon>{{section.icon}}</mat-icon>
           {{section.name | uppercase}}
         </button>
 
-        <button mat-button *ngIf="section.type === 'toggle'" (click)="toggleSection(section)"
+        <button *ngIf="section.type === 'toggle'" (click)="toggleSection(section)"
           [ngClass]="{'background-color-sidenav': isSectionOpen(section)}">
           <span class="toggle-button">
             <mat-icon>{{section.icon}}</mat-icon>
@@ -22,7 +22,7 @@
 
         <ul [ngClass]="{'toggled': isSectionOpen(section)}" class="toggle-list">
           <li *ngFor="let page of section.pages">
-            <button mat-button routerLink="{{page.state}}" routerLinkActive="background-color-sidenav" class="toggle-list-button">
+            <button routerLink="{{page.state}}" routerLinkActive="background-color-sidenav" class="toggle-list-button">
               <mat-icon>
                 {{page.icon}}</mat-icon>
               {{page.name}}
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 85342c5..a9596ae 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -7,11 +7,14 @@ import { MainNavigationComponent } from './components/main-navigation/main-navig
 import { RouterModule } from '@angular/router';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
+import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [
     SpinnerComponent,
-    MainNavigationComponent
+    MainNavigationComponent,
+    ConfirmDialogComponent
   ],
   imports: [
     CommonModule,
@@ -20,6 +23,7 @@ import { MatIconModule } from '@angular/material/icon';
     MatProgressSpinnerModule,
     MatSidenavModule,
     MatIconModule,
+    MatButtonModule,
   ],
   exports: [
     SpinnerComponent,
diff --git a/src/app/core/services/api/api.service.ts b/src/app/core/services/api/api.service.ts
index f1177a4..8fe0ff5 100644
--- a/src/app/core/services/api/api.service.ts
+++ b/src/app/core/services/api/api.service.ts
@@ -50,8 +50,10 @@ export class ApiService {
         return this.httpClient.put(this.baseUrl + path, payload);
     }
 
-    public delete(path: string, body?: any): Observable<unknown> {
-        return this.httpClient.request('DELETE', this.baseUrl + path, {body});
+    public delete(path: string, body?: any, queryParams?: HttpParams): Observable<unknown> {
+        var params: any = {params: queryParams}
+
+        return this.httpClient.delete(this.baseUrl + path, {body, params});
     }
 
     public patch(path: string, payload?: any, queryParams?: HttpParams, responseType?: string): Observable<unknown> {
diff --git a/src/app/core/services/module-manager/module-manager-mock.service.ts b/src/app/core/services/module-manager/module-manager-mock.service.ts
index 64c6c49..9999e8a 100644
--- a/src/app/core/services/module-manager/module-manager-mock.service.ts
+++ b/src/app/core/services/module-manager/module-manager-mock.service.ts
@@ -438,11 +438,27 @@ cancelModuleUpdate(moduleID: string): Observable<string> {
       })
    }
 
+   public startDeployments(deploymentIDs: string): Observable<Job> {
+      return new Observable(obs => {
+            obs.next({"id": "id", "completed": new Date(), "error": null, "created": new Date(), "canceled": new Date(), "description": "Test", "started": new Date()})
+         })
+      }
+
    restartDeployment(deploymentID: string): Observable<any> {
       return of({"id": "id", "completed": new Date(), "error": null, "created": new Date(), "canceled": new Date(), "description": "Test", "started": new Date()})
    }
 
-   public stopDeployment(deploymentID: string, changeDependencies: boolean): Observable<Job> {
+   restartDeployments(deploymentIDs: string): Observable<any> {
+      return of({"id": "id", "completed": new Date(), "error": null, "created": new Date(), "canceled": new Date(), "description": "Test", "started": new Date()})
+   }
+
+   public stopDeployment(deploymentID: string, force: boolean): Observable<Job> {
+      return new Observable(obs => {
+            obs.next({"id": "id", "completed": new Date(), "error": null, "created": new Date(), "canceled": new Date(), "description": "Test", "started": new Date()})
+         })
+   }
+
+   public stopDeployments(deploymentIDs: string, force: boolean): Observable<Job> {
       return new Observable(obs => {
             obs.next({"id": "id", "completed": new Date(), "error": null, "created": new Date(), "canceled": new Date(), "description": "Test", "started": new Date()})
          })
@@ -477,12 +493,19 @@ cancelModuleUpdate(moduleID: string): Observable<string> {
       })
    }
 
-   deleteDeployment(deploymentID: string): Observable<any> {
+   deleteDeployment(deploymentID: string, force: boolean): Observable<any> {
       return new Observable(obs => {
          obs.next(true)
       })
    }
 
+   deleteDeployments(deploymentIDs: string, force: boolean): Observable<any> {
+      return new Observable(obs => {
+         obs.next(true)
+      })
+   }
+
+
    // Health
    getDeploymentsHealth(): Observable<DeploymentHealths> {
      var health = {
diff --git a/src/app/core/services/module-manager/module-manager-service.service.ts b/src/app/core/services/module-manager/module-manager-service.service.ts
index 5a51fee..0abccb6 100644
--- a/src/app/core/services/module-manager/module-manager-service.service.ts
+++ b/src/app/core/services/module-manager/module-manager-service.service.ts
@@ -104,9 +104,22 @@ export class ModuleManagerService {
     return <Observable<string>>this.http.patch(url, update, undefined, "text");
   }
 
-  deleteDeployment(deploymentID: string): Observable<any> {
+  deleteDeployment(deploymentID: string, forceConfirmed: boolean): Observable<any> {
     var url = this.moduleManagerPath + "/deployments/" + deploymentID 
-    return <Observable<any>>this.http.delete(url);
+    let queryParams = new HttpParams()
+    if(forceConfirmed) {
+      queryParams = queryParams.set("force", "true")
+    }
+    return <Observable<any>>this.http.delete(url, undefined, queryParams);
+   }
+
+  deleteDeployments(deploymentIDs: string[], forceConfirmed: boolean): Observable<any> {
+    var url = this.moduleManagerPath + "/deployments-batch" 
+    let queryParams = new HttpParams()
+    if(forceConfirmed) {
+      queryParams = queryParams.set("force", "true")
+    }
+    return <Observable<any>>this.http.delete(url, deploymentIDs, queryParams);
    }
 
   loadDeploymentUpdateTemplate(moduleId: string): Observable<DeploymentTemplate> {
@@ -114,26 +127,44 @@ export class ModuleManagerService {
       return <Observable<DeploymentTemplate>>this.http.get(url);
   }
 
-  stopDeployment(deploymentID: string, changeDependencies: boolean): Observable<string> {
+  stopDeployment(deploymentID: string, forceConfirmed: boolean): Observable<string> {
+    var url = this.moduleManagerPath + "/deployments/" + deploymentID + '/stop' 
     let queryParams = new HttpParams()
-    if(changeDependencies) {
-      queryParams = queryParams.set("dependencies", "true")
+    if(forceConfirmed) {
+      queryParams = queryParams.set("force", "true")
     }
-
-    var url = this.moduleManagerPath + "/deployments/" + deploymentID + '/disable' 
     return <Observable<string>>this.http.patch(url, null, queryParams, 'text')
   }
 
+  stopDeployments(deploymentIDs: string[], forceConfirmed: boolean): Observable<any> {
+    var url = this.moduleManagerPath + "/deployments-batch/stop" 
+    let queryParams = new HttpParams()
+    if(forceConfirmed) {
+      queryParams = queryParams.set("force", "true")
+    }
+    return <Observable<any>>this.http.post(url, deploymentIDs, queryParams, 'text');
+   }
+
   startDeployment(deploymentID: string): Observable<any> {
-    var url = this.moduleManagerPath + "/deployments/" + deploymentID + '/enable' 
+    var url = this.moduleManagerPath + "/deployments/" + deploymentID + '/start' 
     return this.http.patch(url)
   }
 
+  startDeployments(deploymentIDs: string[]): Observable<any> {
+    var url = this.moduleManagerPath + "/deployments-batch/start" 
+    return this.http.post(url, deploymentIDs, undefined)
+  }
+
   restartDeployment(deploymentID: string): Observable<string> {
     var url = this.moduleManagerPath + "/deployments/" + deploymentID + '/restart' 
     return  <Observable<string>>this.http.patch(url, null, undefined, 'text')
   }
 
+  restartDeployments(deploymentIDs: string[]): Observable<string> {
+    var url = this.moduleManagerPath + "/deployments-batch/restart" 
+    return  <Observable<string>>this.http.post(url, deploymentIDs, undefined, 'text')
+  }
+
   // Jobs
 
   getJobStatus(jobID: string): Observable<Job> {
diff --git a/src/app/core/services/util/util.service.ts b/src/app/core/services/util/util.service.ts
index 0f976f2..8a90429 100644
--- a/src/app/core/services/util/util.service.ts
+++ b/src/app/core/services/util/util.service.ts
@@ -19,7 +19,8 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { throwError } from 'rxjs';
+import { Observable, throwError } from 'rxjs';
+import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component';
 import { JobLoaderModalComponent } from '../../components/job-loader-modal/job-loader-modal.component';
 
 
@@ -63,4 +64,10 @@ export class UtilService {
   objectIsEmptyOrNull(obj: any) {
     return obj === null || obj === undefined || Object.keys(obj).length === 0;
   }
+
+  askForConfirmation(message: string): Observable<boolean> {
+    var dialogRef = this.dialog.open(ConfirmDialogComponent, {data: {message: message}});
+    
+    return dialogRef?.afterClosed()
+  }
 }
\ No newline at end of file
diff --git a/src/app/deployments/deployments.module.ts b/src/app/deployments/deployments.module.ts
index 34cb98b..7c15bfb 100644
--- a/src/app/deployments/deployments.module.ts
+++ b/src/app/deployments/deployments.module.ts
@@ -22,6 +22,7 @@ import { JobLoaderModalComponent } from '../core/components/job-loader-modal/job
 import { InfoComponent } from './pages/info/info.component';
 import {MatCardModule} from '@angular/material/card'; 
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
 const routes: Routes = [
   {
     path: 'deployments', 
@@ -62,6 +63,7 @@ const routes: Routes = [
     MatFormFieldModule,
     MatChipsModule,
     MatSelectModule,
+    MatTooltipModule,
     FormsModule,
     ReactiveFormsModule
   ],
diff --git a/src/app/deployments/pages/list/deployment-list.component.html b/src/app/deployments/pages/list/deployment-list.component.html
index 1f3961a..ad9bcb6 100644
--- a/src/app/deployments/pages/list/deployment-list.component.html
+++ b/src/app/deployments/pages/list/deployment-list.component.html
@@ -24,6 +24,20 @@
   <div class="mat-elevation-z1" [hidden]="(!ready && init) || dataSource.data.length === 0">
     <div class="table-container table-container-with-button">
       <table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef class="button-column">
+              <mat-checkbox (change)="$event ? masterToggle() : null"
+                  [checked]="selection.hasValue() && isAllSelected()"
+                  [indeterminate]="selection.hasValue() && !isAllSelected()">
+              </mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row">
+              <mat-checkbox (click)="$event.stopPropagation()"
+                  (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+              </mat-checkbox>
+          </td>
+      </ng-container>
+
         <ng-container matColumnDef="status">
           <th mat-header-cell mat-sort-header *matHeaderCellDef class="button-column">Health</th>
           <td mat-cell *matCellDef="let deployment">
@@ -40,12 +54,21 @@
           </td>
         </ng-container>
 
-        <ng-container matColumnDef="enabled">
-          <th mat-header-cell mat-sort-header *matHeaderCellDef class="button-column">Enabled</th>
+        <ng-container matColumnDef="start">
+          <th mat-header-cell mat-sort-header *matHeaderCellDef class="button-column">Start</th>
+          <td mat-cell *matCellDef="let deployment">
+            <button mat-icon-button color="primary" matTooltip="Start" (click)="start(deployment.id)">
+              <mat-icon>start</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="stop">
+          <th mat-header-cell mat-sort-header *matHeaderCellDef class="button-column">Stop</th>
           <td mat-cell *matCellDef="let deployment">
-            <mat-slide-toggle color="primary" [checked]="deployment.enabled"
-              (change)="toggleState($event, deployment.id)">
-            </mat-slide-toggle>
+            <button mat-icon-button color="primary" matTooltip="Stop" (click)="stop(deployment.id)">
+              <mat-icon>stop</mat-icon>
+            </button>
           </td>
         </ng-container>
 
@@ -61,18 +84,18 @@
         <ng-container matColumnDef="created">
           <th mat-header-cell mat-sort-header *matHeaderCellDef>Created</th>
           <td mat-cell *matCellDef="let deployment">
-            <span *ngIf="utilsService.dateIsToday(deployment.created)">{{ deployment.created |  date:'HH:mm'}}</span>
+            <span *ngIf="utilsService.dateIsToday(deployment.created)">{{ deployment.created |  date:'HH:mm:ss'}}</span>
             <span
-              *ngIf="!utilsService.dateIsToday(deployment.created)">{{ deployment.created |  date:'dd.MM.yyyy - HH:mm'}}</span>
+              *ngIf="!utilsService.dateIsToday(deployment.created)">{{ deployment.created |  date:'dd.MM.yyyy - HH:mm:ss'}}</span>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="updated">
           <th mat-header-cell mat-sort-header *matHeaderCellDef>Updated</th>
           <td mat-cell *matCellDef="let deployment">
-            <span *ngIf="utilsService.dateIsToday(deployment.updated)">{{ deployment.updated |  date:'HH:mm'}}</span>
+            <span *ngIf="utilsService.dateIsToday(deployment.updated)">{{ deployment.updated |  date:'HH:mm:ss'}}</span>
             <span
-              *ngIf="!utilsService.dateIsToday(deployment.updated)">{{ deployment.updated |  date:'dd.MM.yyyy - HH:mm'}}</span>
+              *ngIf="!utilsService.dateIsToday(deployment.updated)">{{ deployment.updated |  date:'dd.MM.yyyy - HH:mm:ss'}}</span>
           </td>
         </ng-container>
 
@@ -99,7 +122,7 @@
         <ng-container matColumnDef="delete">
           <th mat-header-cell *matHeaderCellDef disableClear class="button-column">Delete</th>
           <td mat-cell *matCellDef="let deployment">
-            <button mat-icon-button color="primary" (click)="delete(deployment.id)" matTooltip="Delete" [disabled]="deployment.enabled">
+            <button mat-icon-button color="primary" (click)="delete(deployment.id)" matTooltip="Delete">
               <mat-icon>delete</mat-icon>
             </button>
           </td>
@@ -114,6 +137,32 @@
           </td>
         </ng-container>
 
+        <ng-container matColumnDef="header-all">
+          <th mat-header-cell *matHeaderCellDef colspan="10">
+              <div>
+                  <span>You have selected {{selection.selected.length}} deployments</span>
+                  <button matTooltip="Delete" mat-icon-button color="accent" (click)="deleteMultiple()">
+                      <mat-icon>delete</mat-icon>
+                  </button>
+
+                  <button matTooltip="Start" mat-icon-button color="accent" (click)="startMultiple()">
+                    <mat-icon>start</mat-icon>
+                </button>
+
+                <button matTooltip="Stop" mat-icon-button color="accent" (click)="stopMultiple()">
+                  <mat-icon>stop</mat-icon>
+              </button>
+
+              <button matTooltip="Restart" mat-icon-button color="accent" (click)="restartMultiple()">
+                <mat-icon>restart_alt</mat-icon>
+            </button>
+              </div>
+          </th>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="['header-all']" [hidden]="selection.selected.length === 0">
+        </tr>
+
         <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let m; columns: displayColumns;"></tr>
       </table>
diff --git a/src/app/deployments/pages/list/deployment-list.component.ts b/src/app/deployments/pages/list/deployment-list.component.ts
index b09377e..ed6b3d4 100644
--- a/src/app/deployments/pages/list/deployment-list.component.ts
+++ b/src/app/deployments/pages/list/deployment-list.component.ts
@@ -7,8 +7,8 @@ import { ModuleManagerService } from 'src/app/core/services/module-manager/modul
 import { Deployment, DeploymentHealth, DeploymentWithHealth } from '../../models/deployment_models';
 import { ErrorService } from 'src/app/core/services/util/error.service';
 import { Router } from '@angular/router';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { throwMatDuplicatedDrawerError } from '@angular/material/sidenav';
+import { SelectionModel } from '@angular/cdk/collections';
+import { catchError, map, of} from 'rxjs';
 
 @Component({
   selector: 'deployment-list',
@@ -21,8 +21,9 @@ export class DeploymentListComponent implements OnInit, OnDestroy {
   init: Boolean = true;
   interval: any
   @ViewChild(MatSort) sort!: MatSort;
-  displayColumns = ['name', 'created', 'updated', 'status', 'enabled', 'restart', 'info', 'edit', 'delete', 'show']
-  
+  displayColumns = ['select', 'name', 'created', 'updated', 'status', 'start', 'stop', 'restart', 'info', 'edit', 'delete', 'show']
+  selection = new SelectionModel<Deployment>(true, []);
+
   constructor(
     public dialog: MatDialog, 
     @Inject("ModuleManagerService") private moduleService: ModuleManagerService, 
@@ -131,26 +132,63 @@ export class DeploymentListComponent implements OnInit, OnDestroy {
   }
 
   stop(deploymentID: string) {
-    this.moduleService.stopDeployment(deploymentID, false).subscribe(
-      {
-        next: (jobID) => {
-          // Stop results in a job which needs to be polled 
-          var message = "Deployment is stopping"
+    this.ready = false;
+    this.stopPeriodicRefresh()
+
+    this.utilsService.askForConfirmation("Do you want to force stop?").subscribe(forceConfirmed => {
+      this.moduleService.stopDeployment(deploymentID, forceConfirmed).subscribe(
+        {
+          next: (jobID) => {
+            // Stop results in a job which needs to be polled 
+            var message = "Deployment is stopping"
+            var self = this
+            this.utilsService.checkJobStatus(jobID, message, function() {
+              self.loadDeployments(false)
+              self.startPeriodicRefresh()
+            })
+          },
+          error: (err) => {
+            this.errorService.handleError(DeploymentListComponent.name, "stop", err)
+            this.ready = true
+          }
+        }
+      )
+    })
+  }
+
+  stopMultiple() {
+    this.ready = false;
+    this.stopPeriodicRefresh()
+
+    const ids: string[] = [];
+
+    this.utilsService.askForConfirmation("Do you want to force stop?").subscribe(forceConfirmed => {
+      this.selection.selected.forEach((deployment: Deployment) => {
+        ids.push(deployment.id);
+      });
+              
+      this.moduleService.stopDeployments(ids, forceConfirmed).pipe(
+        map(jobID => {
+          var message = "Deployments are stopping"
           var self = this
           this.utilsService.checkJobStatus(jobID, message, function() {
             self.loadDeployments(false)
             self.startPeriodicRefresh()
           })
-        },
-        error: (err) => {
-          this.errorService.handleError(DeploymentListComponent.name, "stop", err)
-        }
-      }
-    )
+        }),
+        catchError(err => {
+          this.errorService.handleError(DeploymentListComponent.name, "stopDeployments", err)
+          this.ready = true
+          return of()
+        })
+      ).subscribe()
+    })
   }
 
   start(deploymentID: string) {
     this.ready = false
+    this.stopPeriodicRefresh()
+
     this.moduleService.startDeployment(deploymentID).subscribe(
       {
         next: (_) => {
@@ -165,6 +203,29 @@ export class DeploymentListComponent implements OnInit, OnDestroy {
     )
   }
 
+  startMultiple() {
+    this.ready = false;
+    this.stopPeriodicRefresh()
+
+    const ids: string[] = [];
+
+    this.selection.selected.forEach((deployment: Deployment) => {
+      ids.push(deployment.id);
+    });
+            
+    this.moduleService.startDeployments(ids).pipe(
+      map(_ => {
+        this.loadDeployments(false)
+        this.startPeriodicRefresh()
+      }),
+      catchError(err => {
+        this.errorService.handleError(DeploymentListComponent.name, "startMultiple", err)
+        this.ready = true
+        return of()
+      })
+    ).subscribe()
+  }
+
   restart(deploymentID: string) {
     this.stopPeriodicRefresh()
     this.moduleService.restartDeployment(deploymentID).subscribe(
@@ -180,35 +241,104 @@ export class DeploymentListComponent implements OnInit, OnDestroy {
         },
         error: (err) => {
           this.errorService.handleError(DeploymentListComponent.name, "restart", err)
+          this.ready = true
         }
       }
     )
   }
 
-  toggleState(event: MatSlideToggleChange, deploymentID: string) {
-    if(event.checked) {
-      this.start(deploymentID)
-    } else {
-      this.stop(deploymentID)
-    }
+  restartMultiple() {
+    this.ready = false;
+    this.stopPeriodicRefresh()
+
+    const ids: string[] = [];
+
+    this.selection.selected.forEach((deployment: Deployment) => {
+      ids.push(deployment.id);
+    });
+            
+    this.moduleService.restartDeployments(ids).pipe(
+      map(jobID => {
+        var message = "Deployments are restarting"
+        var self = this
+        this.utilsService.checkJobStatus(jobID, message, function() {
+          self.loadDeployments(false)
+          self.startPeriodicRefresh()
+        })
+      }),
+      catchError(err => {
+        this.errorService.handleError(DeploymentListComponent.name, "restartMultiple", err)
+        this.ready = true
+        return of()
+      })
+    ).subscribe()
   }
 
   delete(deploymentID: string) {
     this.ready = false
-    this.moduleService.deleteDeployment(deploymentID).subscribe(
-      {
-        next: (_) => {
+    this.stopPeriodicRefresh()
+
+    this.utilsService.askForConfirmation("Do you want to force delete?").subscribe(forceConfirmed => {
+      this.moduleService.deleteDeployment(deploymentID, forceConfirmed).subscribe(
+        {
+          next: (_) => {
+            this.loadDeployments(false)
+            this.startPeriodicRefresh()
+          },
+          error:(err) => {
+            this.errorService.handleError(DeploymentListComponent.name, "delete", err)
+            this.ready = true
+          }
+        }
+      )
+    })
+  }
+
+  deleteMultiple() {
+    this.ready = false;
+    this.stopPeriodicRefresh()
+
+    const ids: string[] = [];
+
+    this.utilsService.askForConfirmation("Do you want to force delete?").subscribe(forceConfirmed => {
+      this.selection.selected.forEach((deployment: Deployment) => {
+        ids.push(deployment.id);
+      });
+              
+      this.moduleService.deleteDeployments(ids, forceConfirmed).pipe(
+        map(_ => {
           this.loadDeployments(false)
-        },
-        error:(err) => {
-          this.errorService.handleError(DeploymentListComponent.name, "delete", err)
+          this.startPeriodicRefresh()
+        }),
+        catchError(err => {
+          this.errorService.handleError(DeploymentListComponent.name, "deleteMultiple", err)
           this.ready = true
-        }
-      }
-    )
+          return of()
+        })
+      ).subscribe()
+    })
   }
 
   showInstances(deploymentID: string) {
     this.router.navigate(["/deployments/show/" + deploymentID])
   }
+
+
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const currentViewed = this.dataSource.connect().value.length;
+    return numSelected === currentViewed;
+  }
+
+  masterToggle() {
+      if (this.isAllSelected()) {
+          this.selectionClear();
+      } else {
+          this.dataSource.connect().value.forEach((row) => this.selection.select(row));
+      }
+  }
+
+  selectionClear(): void {
+      this.selection.clear();
+  }
 }
diff --git a/src/app/jobs/list/list.component.html b/src/app/jobs/list/list.component.html
index f2c2543..31226e7 100644
--- a/src/app/jobs/list/list.component.html
+++ b/src/app/jobs/list/list.component.html
@@ -41,28 +41,28 @@
                 <ng-container matColumnDef="created">
                     <th mat-header-cell mat-sort-header *matHeaderCellDef>Created</th>
                     <td mat-cell *matCellDef="let job">
-                        {{job.created | date: 'short'}}
+                        {{job.created | date: 'medium'}}
                     </td>
                 </ng-container>
 
                 <ng-container matColumnDef="started">
                     <th mat-header-cell mat-sort-header *matHeaderCellDef>Started</th>
                     <td mat-cell *matCellDef="let job">
-                        {{job.started | date: 'short'}}
+                        {{job.started | date: 'medium'}}
                     </td>
                 </ng-container>
 
                 <ng-container matColumnDef="completed">
                     <th mat-header-cell mat-sort-header *matHeaderCellDef>Completed</th>
                     <td mat-cell *matCellDef="let job">
-                        {{job.completed | date: 'short'}}
+                        {{job.completed | date: 'medium'}}
                     </td>
                 </ng-container>
 
                 <ng-container matColumnDef="canceled">
                     <th mat-header-cell mat-sort-header *matHeaderCellDef>Canceled</th>
                     <td mat-cell *matCellDef="let job">
-                        {{job.canceled | date: 'short'}}
+                        {{job.canceled | date: 'medium'}}
                     </td>
                 </ng-container>