FOGL-6720: Add new developer feature to deprecate assets

src/app/components/common/alert-dialog/alert-dialog.component.html

@@ -4,9 +4,9 @@
     <header class="modal-card-head">
       <p *ngIf="childData" class="modal-card-title is-size-6">{{childData.headerTextValue}}</p>
       <p *ngIf="serviceRecord" class="modal-card-title is-size-6">{{serviceRecord.headerTextValue}}</p>
-      <p *ngIf="deleteTaskData" class="modal-card-title is-size-6">{{deleteTaskData.headerTextValue}}</p>
       <p *ngIf="notificationRecord" class="modal-card-title is-size-6">{{notificationRecord.headerTextValue}}</p>
-      <p *ngIf="notificationServiceRecord" class="modal-card-title is-size-6">{{notificationServiceRecord.headerTextValue}}</p>
+      <p *ngIf="notificationServiceRecord" class="modal-card-title is-size-6">
+        {{notificationServiceRecord.headerTextValue}}</p>
     </header>
 
     <section *ngIf="childData" class="modal-card-body">
@@ -23,18 +23,15 @@
     <section *ngIf="notificationServiceRecord" class="modal-card-body">
       {{notificationServiceRecord.message}}?
     </section>
-    <section *ngIf="deleteTaskData" class="modal-card-body">
-      {{deleteTaskData.message}}
-    </section>
-
     <footer class="modal-card-foot">
       <button class="button is-small" (click)="toggleModal(false)">Cancel</button>
-      <button *ngIf="childData" class="button is-small" [ngClass]="{'is-danger': childData.actionButtonValue === 'Delete', 'is-warning': childData.actionButtonValue === 'Restore' || 'Clear Sessions' }"
+      <button *ngIf="childData" class="button is-small"
+        [ngClass]="{'is-danger': childData.actionButtonValue === 'Delete', 'is-warning': childData.actionButtonValue === 'Restore' || 'Clear Sessions' }"
         (click)="triggerAction()">{{childData.actionButtonValue}}</button>
       <button *ngIf="serviceRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
       <button *ngIf="notificationRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
-      <button *ngIf="notificationServiceRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
-      <button *ngIf="deleteTaskData" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
+      <button *ngIf="notificationServiceRecord" class="button is-small is-danger"
+        (click)="triggerAction()">Delete</button>
     </footer>
   </div>
 </div>

src/app/components/common/alert-dialog/alert-dialog.component.ts

@@ -8,9 +8,8 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, HostListener
 export class AlertDialogComponent implements OnInit, OnChanges {
   @Input() notificationRecord: { name: string, message: string, key: string, headerTextValue: any };
   @Input() notificationServiceRecord: { name: string, message: string, key: string, headerTextValue: any };
-  @Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any, headerTextValue: any};
+  @Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any, headerTextValue: any };
   @Input() serviceRecord: { port: Number, key: any, name: any, message: any, protocol: string, headerTextValue: any };
-  @Input() deleteTaskData: { name: any, message: any, key: any, headerTextValue: any };
   @Output() delete = new EventEmitter<Number>();
   @Output() deleteService = new EventEmitter<Object>();
   @Output() deleteNotification = new EventEmitter<Object>();
@@ -67,17 +66,15 @@ export class AlertDialogComponent implements OnInit, OnChanges {
         this.serviceRecord.headerTextValue = 'Delete Service';
       }
     }
-    if (this.deleteTaskData) {
-      this.deleteTaskData.headerTextValue = this.deleteTaskData.key === 'deleteTask' ? 'Delete Instance' : 'Delete Service';
-    }
+
     if (this.notificationRecord) {
       if (this.notificationRecord.key === 'deleteNotification') {
         this.notificationRecord.headerTextValue = 'Delete Instance';
       }
     }
     if (this.notificationServiceRecord) {
       if (this.notificationServiceRecord.key === 'deleteNotificationService') {
-       this.notificationServiceRecord.headerTextValue = 'Delete Service';
+        this.notificationServiceRecord.headerTextValue = 'Delete Service';
       }
     }
   }
@@ -110,11 +107,11 @@ export class AlertDialogComponent implements OnInit, OnChanges {
         this.toggleModal(false);
       }
       if (this.childData.key === 'deleteCertificate') {
-        this.deleteCertificate.emit({name: this.childData.name, type: 'cert'});
+        this.deleteCertificate.emit({ name: this.childData.name, type: 'cert' });
         this.toggleModal(false);
       }
       if (this.childData.key === 'deleteKey') {
-        this.deleteCertificate.emit({name: this.childData.name, type: 'key'});
+        this.deleteCertificate.emit({ name: this.childData.name, type: 'key' });
         this.toggleModal(false);
       }
       if (this.childData.key === 'clearSessions') {
@@ -161,13 +158,5 @@ export class AlertDialogComponent implements OnInit, OnChanges {
         this.toggleModal(false);
       }
     }
-    if (this.deleteTaskData) {
-      if (this.deleteTaskData.key === 'deleteTask' || this.deleteTaskData.key === 'deleteService') {
-        this.deleteTask.emit({
-          name: this.deleteTaskData.name
-        });
-        this.toggleModal(false);
-      }
-    }
   }
 }

src/app/components/core/north/north-task-modal/north-task-modal.component.html

@@ -173,8 +173,10 @@
             </div>
             <div class="field has-text-right">
               <p class="buttons is-pulled-right">
-                <button *ngIf="task != undefined"
+                <!-- <button *ngIf="task != undefined"
                   (click)="openDeleteModal(task.name, 'Deleting this ' + btnTxt + ' can not be undone. Continue?')"
+                  class="button is-small">Delete {{btnTxt}}</button> -->
+                <button *ngIf="task != undefined" (click)="openModal('delete-task-dialog')"
                   class="button is-small">Delete {{btnTxt}}</button>
               </p>
             </div>
@@ -188,7 +190,19 @@
       </ng-container>
     </section>
   </div>
-  <app-alert-dialog (deleteTask)='onDelete($event)' [deleteTaskData]='deleteTaskData'></app-alert-dialog>
   <app-filter-alert *ngIf="isFilterOrderChanged || isFilterDeleted" (discardChanges)="discardChanges()"
     [filerDialogData]='confirmationDialogData'></app-filter-alert>
 </div>
+<app-confirmation-dialog id="delete-task-dialog">
+  <header class="modal-card-head">
+    <span class="modal-card-title is-size-6">Delete {{btnTxt}}</span>
+    <button class="delete" aria-label="close" (click)="closeModal('delete-task-dialog')"></button>
+  </header>
+  <section class="modal-card-body">
+    {{'Deleting this ' + btnTxt + ' can not be undone. Continue?'}}
+  </section>
+  <footer class="modal-card-foot">
+    <button class="button is-small" (click)="closeModal('delete-task-dialog')">Cancel</button>
+    <button class="button is-small is-danger" (click)="onDelete(task)">Delete</button>
+  </footer>
+</app-confirmation-dialog>

src/app/components/core/north/north-task-modal/north-task-modal.component.ts

@@ -13,12 +13,12 @@ import {
 import { DocService } from '../../../../services/doc.service';
 import { ValidateFormService } from '../../../../services/validate-form.service';
 import Utils from '../../../../utils';
-import { AlertDialogComponent } from '../../../common/alert-dialog/alert-dialog.component';
+import { DialogService } from '../../../common/confirmation-dialog/dialog.service';
+import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
 import {
   ViewConfigItemComponent
 } from '../../configuration-manager/view-config-item/view-config-item.component';
 import { FilterAlertComponent } from '../../filter/filter-alert/filter-alert.component';
-import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
 
 @Component({
   selector: 'app-north-task-modal',
@@ -53,17 +53,10 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
 
   @Input() task: { task: any };
   @Output() notify: EventEmitter<any> = new EventEmitter<any>();
-  @ViewChild(AlertDialogComponent, { static: true }) child: AlertDialogComponent;
   @ViewChildren('filterConfigView') filterConfigViewComponents: QueryList<ViewConfigItemComponent>;
   @ViewChild(FilterAlertComponent) filterAlert: FilterAlertComponent;
   @ViewChild('configChildComponent') configChildComponent: ConfigChildrenComponent;
 
-  // Object to hold data of north task to delete
-  public deleteTaskData = {
-    name: '',
-    message: '',
-    key: ''
-  };
   constructor(
     private router: Router,
     private schedulesService: SchedulesService,
@@ -73,6 +66,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
     private filterService: FilterService,
     private validateFormService: ValidateFormService,
     public fb: FormBuilder,
+    private dialogService: DialogService,
     public ngProgress: ProgressBarService,
     private servicesApiService: ServicesApiService,
     private docService: DocService
@@ -166,6 +160,15 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
     modal.classList.remove('is-active');
   }
 
+  openModal(id: string) {
+    this.dialogService.open(id);
+  }
+
+  closeModal(id: string) {
+    this.dialogService.close(id);
+  }
+
+
   public getCategory(): void {
     /** request started */
     this.ngProgress.start();
@@ -326,21 +329,6 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
     this.repeatTime = event.target.value;
   }
 
-  /**
-  * Open delete modal
-  * @param message   message to show on alert
-  * @param action here action is 'deleteTask'
-  */
-  openDeleteModal(name, message) {
-    this.deleteTaskData = {
-      name: name,
-      message: message,
-      key: this.task['processName'] === 'north_C' ? 'deleteService' : 'deleteTask'
-    };
-    // call child component method to toggle modal
-    this.child.toggleModal(true);
-  }
-
   onDelete(payload) {
     if (this.task['processName'] === 'north_C') {
       this.deleteService(payload);
@@ -362,6 +350,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
           this.ngProgress.done();
           this.alertService.success(data['result'], true);
           this.toggleModal(false);
+          this.closeModal('delete-task-dialog');
           this.notify.emit();
         },
         (error) => {
@@ -387,6 +376,7 @@ export class NorthTaskModalComponent implements OnInit, OnChanges {
           this.ngProgress.done();
           this.alertService.success(data['result'], true);
           this.toggleModal(false);
+          this.closeModal('delete-task-dialog');
           this.notify.emit();
         },
         (error) => {

src/app/components/core/south/south-service-modal/south-service-modal.component.html

@@ -132,9 +132,7 @@
               <button (click)="getAssetReadings(service)" class="button is-small">
                 <span>Export Readings</span>
               </button>
-              <button
-                (click)="openDeleteModal(service.management_port, service.protocol, service.name, 'Deleting this service can not be undone. Continue?', 'deleteService')"
-                class="button is-small">Delete Service</button>
+              <button (click)="openModal('delete-service-dialog')" class="button is-small">Delete Service</button>
             </p>
           </ng-container>
         </div>
@@ -146,7 +144,20 @@
       </ng-container>
     </section>
   </div>
-  <app-alert-dialog (deleteService)='deleteService($event)' [serviceRecord]='serviceRecord'></app-alert-dialog>
   <app-filter-alert *ngIf="isFilterOrderChanged || isFilterDeleted" (discardChanges)="discardChanges()"
     [filerDialogData]='confirmationDialogData'></app-filter-alert>
 </div>
+
+<app-confirmation-dialog id="delete-service-dialog">
+  <header class="modal-card-head">
+    <span class="modal-card-title is-size-6">Delete Service</span>
+    <button class="delete" aria-label="close" (click)="closeModal('delete-service-dialog')"></button>
+  </header>
+  <section class="modal-card-body">
+    Deleting this service can not be undone. Continue?
+  </section>
+  <footer class="modal-card-foot">
+    <button class="button is-small" (click)="closeModal('delete-service-dialog')">Cancel</button>
+    <button class="button is-small is-danger" (click)="deleteService(service)">Delete</button>
+  </footer>
+</app-confirmation-dialog>

src/app/components/core/south/south-service-modal/south-service-modal.component.ts

@@ -13,12 +13,12 @@ import {
 import { DocService } from '../../../../services/doc.service';
 import { ValidateFormService } from '../../../../services/validate-form.service';
 import { MAX_INT_SIZE } from '../../../../utils';
-import { AlertDialogComponent } from '../../../common/alert-dialog/alert-dialog.component';
+import { DialogService } from '../../../common/confirmation-dialog/dialog.service';
+import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
 import {
   ViewConfigItemComponent
 } from '../../configuration-manager/view-config-item/view-config-item.component';
 import { FilterAlertComponent } from '../../filter/filter-alert/filter-alert.component';
-import { ConfigChildrenComponent } from '../../configuration-manager/config-children/config-children.component';
 
 @Component({
   selector: 'app-south-service-modal',
@@ -44,7 +44,6 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
   public filterItemIndex;
   public isWizard;
   // Object to hold data of south service to delete
-  public serviceRecord;
   public selectedFilterPlugin;
 
   confirmationDialogData = {};
@@ -54,7 +53,6 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
   @Output() notify: EventEmitter<any> = new EventEmitter<any>();
   @ViewChildren('filterConfigView') filterConfigViewComponents: QueryList<ViewConfigItemComponent>;
   @ViewChild('configChildComponent') configChildComponent: ConfigChildrenComponent;
-  @ViewChild(AlertDialogComponent, { static: true }) child: AlertDialogComponent;
   @ViewChild(FilterAlertComponent) filterAlert: FilterAlertComponent;
 
   constructor(
@@ -68,6 +66,7 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
     private servicesApiService: ServicesApiService,
     private validateFormService: ValidateFormService,
     private schedulesService: SchedulesService,
+    private dialogService: DialogService,
     private docService: DocService) { }
 
   @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
@@ -273,25 +272,13 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
     document.getElementById('ss').click();
   }
 
-
-
-  /**
-   * Open delete modal
-   * @param message   message to show on alert
-   * @param action here action is 'deleteService'
-   */
-  openDeleteModal(port, protocol, name, message, action) {
-    this.serviceRecord = {
-      port: port,
-      protocol: protocol,
-      name: name,
-      message: message,
-      key: action
-    };
-    // call child component method to toggle modal
-    this.child.toggleModal(true);
+  openModal(id: string) {
+    this.dialogService.open(id);
   }
 
+  closeModal(id: string) {
+    this.dialogService.close(id);
+  }
 
   /**
   * Open confirmation modal
@@ -368,6 +355,7 @@ export class SouthServiceModalComponent implements OnInit, OnChanges {
           this.ngProgress.done();
           this.alertService.success(data['result'], true);
           this.toggleModal(false);
+          this.closeModal('delete-service-dialog');
           setTimeout(() => {
             this.notify.emit();
           }, 6000);

src/app/components/core/south/south.component.css

@@ -33,8 +33,20 @@
 
 .readings-count {
   vertical-align: middle;
+  max-width: max-content;
 }
 
 .service-name {
   padding-top: 0;
 }
+
+#deprecate_event_div {
+padding-right: 10px;
+color: #363636;
+}
+
+.tooltip {
+  opacity: 1.0 !important;
+}
+
+

src/app/components/core/south/south.component.html

@@ -37,6 +37,7 @@
                     <table class="table is-responsive">
                       <tr>
                         <td class="border-fix">Assets</td>
+                        <td *ngIf="developerFeaturesService.getDeveloperFeatureControl()" class="border-fix"></td>
                         <td class="border-fix align-right">Readings</td>
                       </tr>
                     </table>
@@ -70,8 +71,16 @@
                     <table class="table is-narrow is-responsive">
                       <tr *ngFor='let data of svc.assets' [ngClass]="{'fade': (svc.schedule_enabled === false)}">
                         <td>
+                          <a *ngIf="developerFeaturesService.getDeveloperFeatureControl()" id="deprecate_event_div"
+                            (click)="selectAsset(svc.name, data?.asset);openModal('asset-tracking-dialog')">
+                            <span class="icon is-small tooltip is-tooltip-right" data-tooltip="Deprecate asset">
+                              <i class="fa fa-sm fa-eraser" aria-hidden="true"></i>
+                            </span>
+                          </a>
                           <small>{{data.asset}}</small>
                         </td>
+                        <td>
+                        </td>
                         <td class="readings-count">
                           <small class="level-right">{{data.count | number}}</small>
                         </td>
@@ -89,3 +98,16 @@
 </div>
 <app-south-service-modal (notify)='onNotify()' [service]="service"></app-south-service-modal>
 <app-view-logs></app-view-logs>
+<app-confirmation-dialog id="asset-tracking-dialog">
+  <header class="modal-card-head">
+    <span class="modal-card-title is-size-6">Deprecate</span>
+    <button class="delete" aria-label="close" (click)="closeModal('asset-tracking-dialog')"></button>
+  </header>
+  <section class="modal-card-body">
+    Are you sure, <b>{{selectedAsset}}</b> will be deprecated if this action is continued?
+  </section>
+  <footer class="modal-card-foot">
+    <button class="button is-small" (click)="closeModal('asset-tracking-dialog')">Cancel</button>
+    <button class="button is-small is-danger" (click)="deprecateAsset(selectedAsset)">Yes</button>
+  </footer>
+</app-confirmation-dialog>