I have added node menu controls confirmation action dialog in

Webui missing prompt for mass state changes of project #1342 issue.

src/app/app.module.ts

@@ -278,6 +278,7 @@ import { ImageManagerComponent } from './components/image-manager/image-manager.
 import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component';
 import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component';
 import { UploadingProcessbarComponent } from './common/uploading-processbar/uploading-processbar.component';
+import { NodesMenuConfirmationDialogComponent } from './components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component';
 
 @NgModule({
   declarations: [
@@ -472,6 +473,7 @@ import { UploadingProcessbarComponent } from './common/uploading-processbar/uplo
     AddImageDialogComponent,
     DeleteAllImageFilesDialogComponent,
     UploadingProcessbarComponent,
+    NodesMenuConfirmationDialogComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component.html

@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col-md-10">
+    <h5>Confirm {{ confirmActionData.actionType | titlecase }} All</h5>
+  </div>
+  <div class="col-md-2 txt-align">
+    <button mat-mini-fab color="warn" class="close-btn" mat-dialog-close>
+      <mat-icon class="close-icon">close</mat-icon>
+    </button>
+  </div>
+</div>
+<mat-divider></mat-divider>
+<mat-dialog-content> 
+    <p class="text-padding">Are you sure you want to {{confirmActionData.actionType}} all devices?</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>No</button>
+  <button mat-button (click)="confirmAction()"  cdkFocusInitial>Yes</button>
+</mat-dialog-actions>

src/app/components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component.scss

@@ -0,0 +1,16 @@
+.close-btn{
+    height: 30px;
+    width: 30px;
+    margin-left: 10px;
+    margin-bottom:10px
+}
+.close-icon{
+    font-size: 15px;
+}
+.text-padding{
+    padding: 15px 0 0 0;
+
+}
+.mat-dialog-actions {
+    min-height: 31px;
+}

src/app/components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NodesMenuConfirmationDialogComponent } from './nodes-menu-confirmation-dialog.component';
+
+describe('NodesMenuConfirmationDialogComponent', () => {
+  let component: NodesMenuConfirmationDialogComponent;
+  let fixture: ComponentFixture<NodesMenuConfirmationDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NodesMenuConfirmationDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NodesMenuConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-nodes-menu-confirmation-dialog',
+  templateUrl: './nodes-menu-confirmation-dialog.component.html',
+  styleUrls: ['./nodes-menu-confirmation-dialog.component.scss'],
+})
+export class NodesMenuConfirmationDialogComponent implements OnInit {
+  confirmActionData = {
+    actionType: 'start',
+    isAction:false
+  };
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<NodesMenuConfirmationDialogComponent>
+  ) {}
+
+  ngOnInit(): void {
+    this.confirmActionData.actionType = this.data;
+  }
+
+  confirmAction() {
+    this.confirmActionData.isAction = true
+    this.dialogRef.close(this.confirmActionData);
+  }
+}

src/app/components/project-map/nodes-menu/nodes-menu.component.html

@@ -12,7 +12,7 @@
     matTooltip="Start/Resume all nodes"
     matTooltipClass="custom-tooltip"
     mat-icon-button
-    (click)="startNodes()"
+    (click)="confirmControlsActions('start')"
     class="menu-button"
   >
     <mat-icon>play_arrow</mat-icon>
@@ -21,7 +21,7 @@
     matTooltip="Suspend all nodes"
     matTooltipClass="custom-tooltip"
     mat-icon-button
-    (click)="suspendNodes()"
+    (click)="confirmControlsActions('suspend')"
     class="menu-button"
   >
     <mat-icon>pause</mat-icon>
@@ -30,7 +30,7 @@
     matTooltip="Stop all nodes"
     matTooltipClass="custom-tooltip"
     mat-icon-button
-    (click)="stopNodes()"
+    (click)="confirmControlsActions('stop')"
     class="menu-button"
   >
     <mat-icon>stop</mat-icon>
@@ -39,7 +39,7 @@
     matTooltip="Reload all nodes"
     matTooltipClass="custom-tooltip"
     mat-icon-button
-    (click)="reloadNodes()"
+    (click)="confirmControlsActions('reload')"
     class="menu-button"
   >
     <mat-icon>replay</mat-icon>

src/app/components/project-map/nodes-menu/nodes-menu.component.ts

@@ -1,14 +1,16 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { MapSettingsService } from '../../../services/mapsettings.service';
+import { MatDialog } from '@angular/material/dialog';
 import { ElectronService } from 'ngx-electron';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { NodeService } from '../../../services/node.service';
+import { NodeConsoleService } from '../../../services/nodeConsole.service';
 import { ServerService } from '../../../services/server.service';
 import { SettingsService } from '../../../services/settings.service';
 import { ToasterService } from '../../../services/toaster.service';
-import { NodeConsoleService } from '../../../services/nodeConsole.service';
+import { NodesMenuConfirmationDialogComponent } from './nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component';
 
 @Component({
   selector: 'app-nodes-menu',
@@ -28,7 +30,8 @@ export class NodesMenuComponent {
     private serverService: ServerService,
     private settingsService: SettingsService,
     private mapSettingsService: MapSettingsService,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private dialog: MatDialog
   ) {}
 
   async startConsoleForAllNodes() {
@@ -83,4 +86,26 @@ export class NodesMenuComponent {
       this.toasterService.success('All nodes successfully reloaded');
     });
   }
+  public confirmControlsActions(type) {
+    const dialogRef = this.dialog.open(NodesMenuConfirmationDialogComponent, {
+      width: '500px',
+      maxHeight: '200px',
+      autoFocus: false,
+      disableClose: true,
+      data: type,
+    });
+
+    dialogRef.afterClosed().subscribe((confirmAction_result) => {
+      if (confirmAction_result.isAction && confirmAction_result.actionType == 'start') {
+        this.startNodes();
+      } else if (confirmAction_result.isAction && confirmAction_result.actionType == 'stop') {
+        this.stopNodes();
+      } else if (confirmAction_result.isAction && confirmAction_result.actionType == 'reload') {
+        this.reloadNodes();
+      } else if (confirmAction_result.isAction && confirmAction_result.actionType == 'suspend') {
+        this.suspendNodes();
+      } else {
+      }
+    });
+  }
 }