EDELIVERY-11674 Alerts - UI Improvements

Show time to Alert date column in the Alerts table.
Add Status Description data when displaying an Alert in a popup.
Use title case for key labels when displaying an Alert in a popup.
Update Alert popup title.

smp-angular/src/app/alert/alert-controller.ts

@@ -30,31 +30,32 @@ export class AlertController implements SearchTableController {
     return true;
   }
 
-  public showDetails(row: any) {
-    this.dialog.open(ObjectPropertiesDialogComponent, {
+  public showDetails(row: any): MatDialogRef<any> {
+    return this.dialog.open(ObjectPropertiesDialogComponent, {
       data: {
         title: "Alert details",
-        object: row.alertDetails,
-
+        object: row,
       }
     });
   }
 
-  public edit(row: any) {
-    this.dialog.open(ObjectPropertiesDialogComponent, {
+  public edit(row: any): MatDialogRef<any> {
+    return this.dialog.open(ObjectPropertiesDialogComponent, {
       data: {
-        title: "Alert details!",
-        object: row.alertDetails,
-
+        title: "Update Alert",
+        object: row,
       }
     });
   }
 
-
   public delete(row: any) {
   }
 
-  newDialog(config?: MatDialogConfig): MatDialogRef<any> {
-    return this.dialog.open(ObjectPropertiesDialogComponent, config);
+  newDialog(config): MatDialogRef<any> {
+    if (config && config.data && config.data.edit) {
+      return this.edit(config.data);
+    } else {
+      return this.showDetails(config.data);
+    }
   }
 }

smp-angular/src/app/alert/alert.component.html

@@ -17,7 +17,7 @@
     <span style="width: 2px">&nbsp;</span>
   </ng-template>
   <ng-template #dateTimeColumn let-value="value" ngx-datatable-cell-template>
-    <div class='truncate-text' title="{{value | date:dateTimeFormat}}" >{{value | date:dateFormat}}</div></ng-template>
+    <div class='truncate-text' title="{{value | date:dateTimeFormat}}">{{value | date:dateTimeFormat}}</div></ng-template>
   <ng-template #truncateText  let-value="value" ngx-datatable-cell-template>
     <div class='truncate-text' title="{{value}}" >{{value}}</div>
   </ng-template>

smp-angular/src/app/alert/alert.component.ts

@@ -19,7 +19,6 @@ import {SearchTableComponent} from "../common/search-table/search-table.componen
 import {SecurityService} from "../security/security.service";
 import {ObjectPropertiesDialogComponent} from "../common/dialogs/object-properties-dialog/object-properties-dialog.component";
 
-
 @Component({
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.css']
@@ -34,7 +33,6 @@ export class AlertComponent implements OnInit, AfterViewInit, AfterViewChecked {
   @ViewChild('credentialType') credentialType: TemplateRef<any>;
   @ViewChild('forUser') forUser: TemplateRef<any>;
 
-
   readonly dateTimeFormat: string = SmpConstants.DATE_TIME_FORMAT;
   readonly dateFormat: string = SmpConstants.DATE_FORMAT;
 
@@ -44,7 +42,6 @@ export class AlertComponent implements OnInit, AfterViewInit, AfterViewChecked {
   filter: any = {};
   isSMPIntegrationOn: boolean = false;
 
-
   constructor(public securityService: SecurityService,
               protected lookups: GlobalLookups,
               protected http: HttpClient,
@@ -68,7 +65,7 @@ export class AlertComponent implements OnInit, AfterViewInit, AfterViewChecked {
         title: "Alert date",
         prop: 'reportingTime',
         showInitially: true,
-        maxWidth: 100,
+        maxWidth: 250,
         cellTemplate: this.dateTimeColumn,
       },
       {

smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.html

@@ -2,22 +2,20 @@
 <mat-dialog-content  style="height: 400px;width: 800px;">
     <table mat-table style="width: 100%" [dataSource]="dataSource">
 
-
       <!-- Name Column -->
       <ng-container matColumnDef="key">
-        <th mat-header-cell *matHeaderCellDef> Key</th>
-        <td mat-cell *matCellDef="let element"> {{element[0]}} </td>
+        <th mat-header-cell *matHeaderCellDef>Key</th>
+        <td mat-cell *matCellDef="let element">{{element[0] | titlecase }}</td>
       </ng-container>
 
       <!-- Weight Column -->
       <ng-container matColumnDef="value">
-        <th mat-header-cell *matHeaderCellDef> Value</th>
-        <td mat-cell *matCellDef="let element"> {{element[1]}} </td>
+        <th mat-header-cell *matHeaderCellDef>Value</th>
+        <td mat-cell *matCellDef="let element">{{element[1]}}</td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-
 </mat-dialog-content>
 
 <mat-dialog-actions>

smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts

@@ -8,18 +8,25 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 })
 export class ObjectPropertiesDialogComponent {
 
-  title: string="Object properties";
+  title: string = "Object properties";
   object:Object
   displayedColumns: string[] = ['key', 'value'];
   dataSource : object[];
 
   constructor(public dialogRef: MatDialogRef<ObjectPropertiesDialogComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any) {
-    //this.title=data.title;
-    this.object=data.row.alertDetails;
-    this.dataSource = Object.keys(this.object).map((key) => [key, this.object[key]]);
-
-
+    this.title = data.title;
+    this.object = {...data.object.row.alertDetails,
+          statusDescription: data.object.row.alertStatusDesc};
+    this.dataSource = Object.keys(this.object)
+      .map((key) => [ this.toTitleCase(key), this.object[key] ])
+      .sort();
+  }
 
+  private toTitleCase(input: string): string {
+    return input
+      .replace(/([A-Z]+)/g, " $1")     // camelCase -> Title Case (part #1)
+      .replace(/([A-Z][a-z])/g, " $1")  // camelCase -> Title Case (part #2)
+      .replaceAll('_', '');
   }
 }

smp-angular/src/app/common/search-table/search-table-controller.ts

@@ -2,14 +2,21 @@ import {MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
 import {SearchTableEntity} from './search-table-entity.model';
 
 export interface SearchTableController {
-  showDetails(row);
-  edit(row);
+
+  showDetails(row): MatDialogRef<any>;
+
+  edit(row): MatDialogRef<any>;
 
   validateDeleteOperation(rows: Array<SearchTableEntity>);
+
   delete(row);
+
   newRow(): SearchTableEntity;
-  newDialog(config?: MatDialogConfig): MatDialogRef<any>;
+
+  newDialog(config): MatDialogRef<any>;
+
   dataSaved();
+
   isRecordChanged(oldModel, newModel): boolean;
 
   /**
@@ -18,7 +25,4 @@ export interface SearchTableController {
    * @param row the row for which the row expander should be disabled or not
    */
   isRowExpanderDisabled(row: SearchTableEntity): boolean;
-
-
-
 }

smp-angular/src/app/common/search-table/search-table.component.html

@@ -77,7 +77,7 @@
 
         title="Expand/Collapse Row"
         (click)="toggleExpandRow(row)">
-        <mat-icon >
+        <mat-icon>
           {{expanded ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </a>

smp-angular/src/app/common/search-table/search-table.component.ts

@@ -297,7 +297,6 @@ export class SearchTableComponent implements OnInit {
     this.editSearchTableEntity(this.rowNumber);
   }
 
-
   onSaveButtonClicked(withDownloadCSV: boolean) {
     try {
       this.dialog.open(SaveDialogComponent).afterClosed().subscribe(result => {
@@ -388,7 +387,7 @@ export class SearchTableComponent implements OnInit {
   private editSearchTableEntity(rowNumber: number) {
     const row = this.rows[rowNumber];
     const formRef: MatDialogRef<any> = this.searchTableController.newDialog({
-      data: {edit: row?.status!=EntityStatus.NEW, row}
+      data: {edit: row?.status != EntityStatus.NEW, row}
     });
     if (!formRef) {
       return;

smp-angular/src/app/service-group-search/service-group-search-controller.ts

 import {SearchTableController} from '../common/search-table/search-table-controller';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
 import {ServiceGroupSearchRo} from './service-group-search-ro.model';
 import {of} from "rxjs/internal/observable/of";
 import {SearchTableValidationResult} from "../common/search-table/search-table-validation-result.model";
@@ -9,18 +9,25 @@ export class ServiceGroupSearchController implements SearchTableController {
 
   constructor(public dialog: MatDialog) { }
 
-  public showDetails(row: any) {
+  public showDetails(row): MatDialogRef<any> {
+    return null;
   }
 
   public showExtension(row: any) {
   }
 
-  public edit(row: any) { }
+  public edit(row): MatDialogRef<any> {
+    return null;
+  }
 
   public delete(row: any) { }
 
-  public newDialog(config?: MatDialogConfig) {
-    return null;
+  newDialog(config): MatDialogRef<any> {
+    if (config && config.data && config.data.edit) {
+      return this.edit(config.data);
+    } else {
+      return this.showDetails(config.data);
+    }
   }
 
   public newRow(): ServiceGroupSearchRo {

smp-angular/src/app/system-settings/domain/domain-controller.ts

@@ -14,22 +14,23 @@ export class DomainController implements SearchTableController {
   constructor(protected http: HttpClient, protected lookups: GlobalLookups, public dialog: MatDialog) {
   }
 
-  public showDetails( row: any) {
-
-    let dialogRef: MatDialogRef<DomainDetailsDialogComponent> = this.dialog.open(DomainDetailsDialogComponent);
-    dialogRef.afterClosed().subscribe(result => {
-      console.log("Domain dialog is closed!");
-    });
+  public showDetails(row): MatDialogRef<any> {
+    return this.dialog.open(DomainDetailsDialogComponent);
   }
 
-  public edit(row: any) {
+  public edit(row): MatDialogRef<any> {
+    return this.dialog.open(DomainDetailsDialogComponent, row);
   }
 
   public delete(row: any) {
   }
 
-  public newDialog(config?: MatDialogConfig): MatDialogRef<DomainDetailsDialogComponent> {
-    return this.dialog.open(DomainDetailsDialogComponent, config);
+  newDialog(config): MatDialogRef<any> {
+    if (config && config.data && config.data.edit) {
+      return this.edit(config.data);
+    } else {
+      return this.showDetails(config.data);
+    }
   }
 
   public newRow(): DomainRo {

smp-angular/src/app/system-settings/property/property-controller.ts

@@ -35,21 +35,23 @@ export class PropertyController implements SearchTableController {
     return true;
   }
 
-  public showDetails(row: any) {
-    let dialogRef: MatDialogRef<PropertyDetailsDialogComponent> = this.dialog.open(PropertyDetailsDialogComponent);
-    dialogRef.afterClosed().subscribe(result => {
-      console.log("Property dialog is closed!");
-    });
+  public showDetails(row: any): MatDialogRef<any> {
+    return this.dialog.open(PropertyDetailsDialogComponent);
   }
 
-  public edit(row: any) {
+  public edit(row: any): MatDialogRef<any> {
+    return this.dialog.open(PropertyDetailsDialogComponent, row);
   }
 
   public delete(row: any) {
   }
 
-  newDialog(config?: MatDialogConfig): MatDialogRef<any> {
-    return this.dialog.open(PropertyDetailsDialogComponent, config);
+  newDialog(config): MatDialogRef<any> {
+    if (config && config.data && config.data.edit) {
+      return this.edit(config.data);
+    } else {
+      return this.showDetails(config.data);
+    }
   }
 
   isEqual(val1, val2): boolean {

smp-angular/src/app/system-settings/user/user-controller.ts

@@ -23,25 +23,23 @@ export class UserController implements SearchTableController {
     this.nullCert = this.newCertificateRo();
   }
 
-  public showDetails(row: any) {
-    /*let dialogRef: MatDialogRef<UserDetailsDialogComponent> = this.dialog.open(UserDetailsDialogComponent);
-    dialogRef.afterClosed().subscribe(result => {
-      //Todo:
-    });
-     */
+  public showDetails(row): MatDialogRef<any> {
+    return null;
   }
 
-  public edit(row: any) {
+  public edit(row): MatDialogRef<any> {
+    return null;
   }
 
   public delete(row: any) {
   }
-
-  public newDialog(config?: MatDialogConfig): MatDialogRef<any> {
-    //return this.dialog.open(UserDetailsDialogComponent, this.convertWithMode(config));
-    return null;
+  newDialog(config): MatDialogRef<any> {
+    if (config && config.data && config.data.edit) {
+      return this.edit(config.data);
+    } else {
+      return this.showDetails(config.data);
+    }
   }
-
   public changePasswordDialog(config?: MatDialogConfig): MatDialogRef<PasswordChangeDialogComponent> {
     return this.dialog.open(PasswordChangeDialogComponent, this.convertWithMode(config));
   }