finalize UI improvements

src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html

@@ -4,7 +4,7 @@
     <div class="col-md-9">
       <div class="h4">
         <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge badge-primary mr-1 mb-1">
-          {{'admin.notify.dashboard.filter' | translate}} {{ 'admin-notify-dashboard.' + (selectedSearchConfig$ | async)  | translate}}
+          {{ 'admin-notify-logs.' + (selectedSearchConfig$ | async)  | translate}}
           <span> ×</span>
         </button>
       </div>

src/app/admin/admin-notify-dashboard/admin-notify-metrics/admin-notify-metrics.model.ts

@@ -2,6 +2,7 @@ export interface AdminNotifyMetricsBox {
   color: string;
   textColor?: string;
   title: string;
+  description: string;
   config: string;
   count?: number;
 }

src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.html

@@ -16,8 +16,12 @@
           <div *ngIf="message.queueLastStartTime">{{ message.queueLastStartTime | date:"YYYY/MM/d hh:mm:ss" }}</div>
           <div *ngIf="!message.queueLastStartTime">n/a</div>
         </td>
-        <td class="cell-small text-truncate">
+        <td>
-          <a *ngIf="message.relatedItem" [routerLink]="'/items/' + (isInbound ? message.context : message.object)">{{ message.relatedItem }}</a>
+          <ds-truncatable [id]="message.id">
+            <ds-truncatable-part [id]="message.id" [minLines]="2">
+              <a *ngIf="message.relatedItem" [routerLink]="'/items/' + (message.context || message.object)">{{ message.relatedItem }}</a>
+            </ds-truncatable-part>
+          </ds-truncatable>
           <div *ngIf="!message.relatedItem">n/a</div>
         </td>
         <td>

src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.scss

@@ -1,9 +0,0 @@
-.cell-small {
-  max-width: 180px;
-}
-
-.table-responsive {
-  td, th {
-    padding: 0.5rem;
-  }
-}

src/app/admin/admin-notify-dashboard/admin-notify-search-result/admin-notify-search-result.component.ts

@@ -22,7 +22,6 @@ import { DatePipe } from '@angular/common';
 @Component({
   selector: 'ds-admin-notify-search-result',
   templateUrl: './admin-notify-search-result.component.html',
-  styleUrls: ['./admin-notify-search-result.component.scss'],
   providers: [
     {
       provide: SEARCH_CONFIG_SERVICE,

src/app/shared/notification-box/notification-box.component.html

@@ -3,6 +3,7 @@
      [ngStyle]="{'background-color': boxConfig.color}"
      [dsHoverClass]="'shadow-lg'"
      (click)="onClick(boxConfig)"
+     [title]="boxConfig.description | translate"
 >
   <div [ngStyle]="{'color': boxConfig.textColor}" class="d-flex flex-column justify-content-center align-items-center">
     <div class="mb-3 font-weight-bold box-counter">{{ boxConfig.count ?? 0 }}</div>

src/assets/i18n/en.json5

@@ -3475,24 +3475,64 @@
 
   "admin-notify-dashboard.NOTIFY.incoming.accepted": "Accepted",
 
+  "admin-notify-dashboard.NOTIFY.incoming.accepted.description": "Accepted inbound notifications",
+
+  "admin-notify-logs.NOTIFY.incoming.accepted": "Currently displaying: Accepted notifications",
+
   "admin-notify-dashboard.NOTIFY.incoming.processed": "Processed LDN",
 
+  "admin-notify-dashboard.NOTIFY.incoming.processed.description": "Processed inbound notifications",
+
+  "admin-notify-logs.NOTIFY.incoming.processed": "Currently displaying: Processed LDN",
+
+  "admin-notify-logs.NOTIFY.incoming.failure": "Currently displaying: Failed notifications",
+
   "admin-notify-dashboard.NOTIFY.incoming.failure": "Failure",
 
+  "admin-notify-dashboard.NOTIFY.incoming.failure.description": "Failed inbound notifications",
+
+  "admin-notify-logs.NOTIFY.outgoing.failure": "Currently displaying: Failed notifications",
+
   "admin-notify-dashboard.NOTIFY.outgoing.failure": "Failure",
 
+  "admin-notify-dashboard.NOTIFY.outgoing.failure.description": "Failed outbound notifications",
+
+  "admin-notify-logs.NOTIFY.incoming.untrusted": "Currently displaying: Untrusted notifications",
+
   "admin-notify-dashboard.NOTIFY.incoming.untrusted": "Untrusted",
 
+  "admin-notify-dashboard.NOTIFY.incoming.untrusted.description": "Inbound notifications not trusted",
+
+  "admin-notify-logs.NOTIFY.incoming.delivered": "Currently displaying: Delivered notifications",
+
+  "admin-notify-dashboard.NOTIFY.incoming.delivered.description": "Inbound notifications successfully delivered",
+
   "admin-notify-dashboard.NOTIFY.outgoing.delivered": "Delivered",
 
+  "admin-notify-logs.NOTIFY.outgoing.delivered": "Currently displaying: Delivered notifications",
+
+  "admin-notify-dashboard.NOTIFY.outgoing.delivered.description": "Outbound notifications successfully delivered",
+
+  "admin-notify-logs.NOTIFY.outgoing.queued": "Currently displaying: Queued notifications",
+
+  "admin-notify-dashboard.NOTIFY.outgoing.queued.description": "Notifications currently queued",
+
   "admin-notify-dashboard.NOTIFY.outgoing.queued": "Queued",
 
+  "admin-notify-logs.NOTIFY.outgoing.queued_for_retry": "Currently displaying: Queued for retry notifications",
+
   "admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry": "Queued for retry",
 
+  "admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry.description": "Notifications currently queued for retry",
+
   "admin-notify-dashboard.NOTIFY.incoming.involvedItems": "Involved items",
 
+  "admin-notify-dashboard.NOTIFY.incoming.involvedItems.description": "Items related to inbound notifications",
+
   "admin-notify-dashboard.NOTIFY.outgoing.involvedItems": "Involved items",
 
+  "admin-notify-dashboard.NOTIFY.outgoing.involvedItems.description": "Items related to outbound notifications",
+
   "admin.notify.dashboard.breadcrumbs": "Dashboard",
 
   "admin.notify.dashboard.inbound": "Inbound messages",

src/config/default-app-config.ts

@@ -462,28 +462,33 @@ export class DefaultAppConfig implements AppConfig {
         {
           color: '#B8DAFF',
           title: 'admin-notify-dashboard.NOTIFY.incoming.accepted',
-          config: 'NOTIFY.incoming.accepted'
+          config: 'NOTIFY.incoming.accepted',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.accepted.description'
         },
         {
           color: '#D4EDDA',
           title: 'admin-notify-dashboard.NOTIFY.incoming.processed',
-          config: 'NOTIFY.incoming.processed'
+          config: 'NOTIFY.incoming.processed',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.processed.description'
         },
         {
           color: '#FDBBC7',
           title: 'admin-notify-dashboard.NOTIFY.incoming.failure',
-          config: 'NOTIFY.incoming.failure'
+          config: 'NOTIFY.incoming.failure',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.failure.description'
         },
         {
           color: '#FDBBC7',
           title: 'admin-notify-dashboard.NOTIFY.incoming.untrusted',
-          config: 'NOTIFY.incoming.untrusted'
+          config: 'NOTIFY.incoming.untrusted',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.untrusted.description'
         },
         {
           color: '#43515F',
           title: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems',
           textColor: '#fff',
           config: 'NOTIFY.incoming.involvedItems',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems.description'
         },
       ]
     },
@@ -493,28 +498,33 @@ export class DefaultAppConfig implements AppConfig {
         {
           color: '#D4EDDA',
           title: 'admin-notify-dashboard.NOTIFY.outgoing.delivered',
-          config: 'NOTIFY.outgoing.delivered'
+          config: 'NOTIFY.outgoing.delivered',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.delivered.description'
         },
         {
           color: '#B8DAFF',
           title: 'admin-notify-dashboard.NOTIFY.outgoing.queued',
-          config: 'NOTIFY.outgoing.queued'
+          config: 'NOTIFY.outgoing.queued',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.queued.description'
         },
         {
           color: '#FDEEBB',
           title: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry',
-          config: 'NOTIFY.outgoing.queued_for_retry'
+          config: 'NOTIFY.outgoing.queued_for_retry',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry.description'
         },
         {
           color: '#FDBBC7',
           title: 'admin-notify-dashboard.NOTIFY.outgoing.failure',
-          config: 'NOTIFY.outgoing.failure'
+          config: 'NOTIFY.outgoing.failure',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.failure.description'
         },
         {
           color: '#43515F',
           title: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems',
           textColor: '#fff',
           config: 'NOTIFY.outgoing.involvedItems',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems.description'
         },
       ]
     }

src/environments/environment.test.ts

@@ -331,29 +331,34 @@ export const environment: BuildConfig = {
       boxes: [
         {
           color: '#B8DAFF',
-          title: 'admin-notify-dashboard.accepted',
+          title: 'admin-notify-dashboard.NOTIFY.incoming.accepted',
-          config: 'NOTIFY.incoming.accepted'
+          config: 'NOTIFY.incoming.accepted',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.accepted.description'
         },
         {
           color: '#D4EDDA',
-          title: 'admin-notify-dashboard.processed',
+          title: 'admin-notify-dashboard.NOTIFY.incoming.processed',
-          config: 'NOTIFY.incoming.processed'
+          config: 'NOTIFY.incoming.processed',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.processed.description'
         },
         {
           color: '#FDBBC7',
-          title: 'admin-notify-dashboard.failure',
+          title: 'admin-notify-dashboard.NOTIFY.incoming.failure',
-          config: 'NOTIFY.incoming.failure'
+          config: 'NOTIFY.incoming.failure',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.failure.description'
         },
         {
           color: '#FDBBC7',
-          title: 'admin-notify-dashboard.untrusted',
+          title: 'admin-notify-dashboard.NOTIFY.incoming.untrusted',
-          config: 'NOTIFY.incoming.untrusted'
+          config: 'NOTIFY.incoming.untrusted',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.untrusted.description'
         },
         {
           color: '#43515F',
-          title: 'admin-notify-dashboard.involved-items',
+          title: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems',
           textColor: '#fff',
           config: 'NOTIFY.incoming.involvedItems',
+          description: 'admin-notify-dashboard.NOTIFY.incoming.involvedItems.description'
         },
       ]
     },
@@ -362,29 +367,34 @@ export const environment: BuildConfig = {
       boxes: [
         {
           color: '#D4EDDA',
-          title: 'admin-notify-dashboard.delivered',
+          title: 'admin-notify-dashboard.NOTIFY.outgoing.delivered',
-          config: 'NOTIFY.outgoing.delivered'
+          config: 'NOTIFY.outgoing.delivered',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.delivered.description'
         },
         {
           color: '#B8DAFF',
-          title: 'admin-notify-dashboard.queued',
+          title: 'admin-notify-dashboard.NOTIFY.outgoing.queued',
-          config: 'NOTIFY.outgoing.queued'
+          config: 'NOTIFY.outgoing.queued',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.queued.description'
         },
         {
           color: '#FDEEBB',
-          title: 'admin-notify-dashboard.queued-for-retry',
+          title: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry',
-          config: 'NOTIFY.outgoing.queued_for_retry'
+          config: 'NOTIFY.outgoing.queued_for_retry',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.queued_for_retry.description'
         },
         {
           color: '#FDBBC7',
-          title: 'admin-notify-dashboard.failure',
+          title: 'admin-notify-dashboard.NOTIFY.outgoing.failure',
-          config: 'NOTIFY.outgoing.failure'
+          config: 'NOTIFY.outgoing.failure',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.failure.description'
         },
         {
           color: '#43515F',
-          title: 'admin-notify-dashboard.involved-items',
+          title: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems',
           textColor: '#fff',
           config: 'NOTIFY.outgoing.involvedItems',
+          description: 'admin-notify-dashboard.NOTIFY.outgoing.involvedItems.description'
         },
       ]
     }