EDELIVERY-11674 - Alerts UI Improvements

Improve alert details dialog.

smp-angular/src/app/app.module.ts

@@ -28,6 +28,7 @@ import {CredentialDialogComponent} from "./common/dialogs/credential-dialog/cred
 import {DataPanelComponent} from "./common/panels/data-panel/data-panel.component";
 import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
 import {DatePipe} from './custom-date/date.pipe';
+import {DatePipe as AngularDatePipe} from '@angular/common';
 import {DefaultPasswordDialogComponent} from './security/default-password-dialog/default-password-dialog.component';
 import {DialogComponent} from './common/dialogs/dialog/dialog.component';
 import {DomainPanelComponent} from "./system-settings/admin-domain/domain-panel/domain-panel.component";
@@ -350,6 +351,7 @@ import {MatButtonToggleModule} from "@angular/material/button-toggle";
     AuthorizedGuard,
     CertificateService,
     DatePipe,
+    AngularDatePipe,
     DnsToolsService,
     DomainService,
     DownloadService,

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

@@ -5,7 +5,7 @@
       <!-- Name Column -->
       <ng-container matColumnDef="key">
         <th mat-header-cell *matHeaderCellDef>{{ "object.properties.dialog.header.key" | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element[0] | titlecase }}</td>
+        <td mat-cell *matCellDef="let element">{{element[0] | translate | titlecase }}</td>
       </ng-container>
 
       <!-- Weight Column -->

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

@@ -13,7 +13,7 @@ export class ObjectPropertiesDialogComponent {
 
   title: string = "Object properties";
   displayedColumns: string[] = ['key', 'value'];
-  dataSource : object[];
+  dataSource: object[];
 
   constructor(public dialogRef: MatDialogRef<ObjectPropertiesDialogComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any,
@@ -21,13 +21,14 @@ export class ObjectPropertiesDialogComponent {
               private datePipe: DatePipe,
               private lookups: GlobalLookups) {
     this.translateService.get(data.i18n).subscribe(title => this.title = title);
-    this.dataSource = Array.of(data.object)
-      .map(async row => await this.translateService.get(row.i18n).subscribe(key => {
-        if (row.type === "dateTime") {
-          let dateTimeFormat = this.lookups.getDateTimeFormat();
-          return this.datePipe.transform(row.value, dateTimeFormat);
-        }
-        return row.value;
-      }));
+    this.dataSource = data.object.map(row => [row.i18n, this.parseValue(row)]);
+  }
+
+  private parseValue(row) {
+    if (row.type === "dateTime") {
+      let dateTimeFormat = this.lookups.getDateTimeFormat();
+      return this.datePipe.transform(row.value, dateTimeFormat);
+    }
+    return row.value;
   }
 }

smp-angular/src/app/common/panels/alert-panel/alert-controller.ts

@@ -36,26 +36,26 @@ export class AlertController implements SearchTableController {
         i18n: "alert.panel.dialog.title.alert.details",
         object: [{
           i18n: "alert.panel.label.column.alert.date",
-          value: row?.reportingTime,
+          value: row.row?.reportingTime,
           type: "dateTime"
         }, {
           i18n: "alert.panel.label.column.alert.level",
-          value: row?.alertLevel
+          value: row.row?.alertLevel
         }, {
           i18n: "alert.panel.label.column.for.user",
-          value: row?.username
+          value: row.row?.username
         }, {
           i18n: "alert.panel.label.column.credential.type",
-          value: row?.alertDetails['CREDENTIAL_TYPE']
+          value: row.row?.alertDetails['CREDENTIAL_TYPE']
         }, {
           i18n: "alert.panel.label.column.alert.type",
-          value: row?.alertType,
+          value: row.row?.alertType,
         }, {
           i18n: "alert.panel.label.column.alert.status",
-          value: row?.alertStatus,
+          value: row.row?.alertStatus,
         }, {
           i18n: "alert.panel.label.column.status.description",
-          value: row?.alertStatusDesc,
+          value: row.row?.alertStatusDesc,
         }]
       }
     });

smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts

@@ -34,10 +34,32 @@ export class ReviewTasksController implements SearchTableController {
   }
 
   public showDetails(row: any): MatDialogRef<any> {
-    return this.dialog.open(AlertDetailsDialogComponent, {
+    return this.dialog.open(ObjectPropertiesDialogComponent, {
       data: {
         i18n: "review.edit.dialog.title",
-        object: row,
+        object: [{
+          i18n: "review.edit.panel.label.column.review.date",
+          value: row.row?.lastUpdatedOn,
+          type: "dateTime"
+        }, {
+          i18n: "review.edit.panel.label.column.target",
+          value: row.row?.target,
+        }, {
+          i18n: "review.edit.panel.label.column.version",
+          value: row.row?.version,
+        }, {
+          i18n: "review.edit.panel.label.column.resource.scheme",
+          value: row.row?.resourceIdentifierScheme,
+        }, {
+          i18n: "review.edit.panel.label.column.resource.value",
+          value: row.row?.resourceIdentifierValue,
+        }, {
+          i18n: "review.edit.panel.label.column.subresource.scheme",
+          value: row.row?.subresourceIdentifierScheme,
+        }, {
+          i18n: "review.edit.panel.label.column.subresource.value",
+          value: row.row?.subresourceIdentifierValue,
+        }]
       }
     });
   }