changed deployment start stop process

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>

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();
+  });
+});

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)
+
+  }
+}
+

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}}

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,

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> {

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 = {

src/app/core/services/module-manager/module-manager-service.service.ts

@@ -104,36 +104,67 @@ 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> {
       var url = this.moduleManagerPath + "/deployments/" + this.doubleEncode(moduleId) + '/upt-template' 
       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> {

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()
+  }
 }

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
   ],

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>