chore(ux): message handling table

src/app/components/table/table-cell.component.html

@@ -2,6 +2,12 @@
   @case ('object') {
     <app-table-inspect-object [object]="handleNestedKeys(element)" [label]="column.name" />
   }
+  @case ('message') {
+    <app-table-inspect-message [label]="column.name" [message]="string" />
+  }
+  @case ('output') {
+    <app-table-inspect-message [label]="column.name" [message]="string" />
+  }
   @case ('link') {
     <button mat-button (click)="navigate()">
       {{ value | emptyCell }}

src/app/components/table/table-cell.component.ts

@@ -13,6 +13,7 @@ import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
 import { DurationPipe } from '@pipes/duration.pipe';
 import { EmptyCellPipe } from '@pipes/empty-cell.pipe';
 import { Subject } from 'rxjs';
+import { TableInspectMessageComponent } from './table-inspect-message.component';
 import { TableInspectObjectComponent } from './table-inspect-object.component';
 
 @Component({
@@ -28,6 +29,7 @@ import { TableInspectObjectComponent } from './table-inspect-object.component';
     MatButtonModule,
     CountTasksByStatusComponent,
     MatCheckboxModule,
+    TableInspectMessageComponent,
   ]
 })
 export class TableCellComponent<T extends DataRaw, S extends Status, O extends TaskOptions | null = null>{
@@ -78,6 +80,10 @@ export class TableCellComponent<T extends DataRaw, S extends Status, O extends T
     return this._value;
   }
 
+  get string() {
+    return this._value as string;
+  }
+
   get durationValue() {
     return this._value as Duration;
   }

src/app/components/table/table-inspect-message-dialog.component.html

@@ -0,0 +1,9 @@
+<h2 mat-dialog-title>{{ label }}</h2>
+
+<mat-dialog-content>
+  <mat-card>{{ message }}</mat-card>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-flat-button (click)="onNoClick()" color="primary">Close</button>
+</mat-dialog-actions>

src/app/components/table/table-inspect-message-dialog.component.ts

@@ -0,0 +1,53 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Inject, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+
+export interface TableInspectMessageDialogData {
+  label: string;
+  message: string;
+}
+
+@Component({
+  selector: 'app-inspect-message-dialog',
+  templateUrl: 'table-inspect-message-dialog.component.html',
+  standalone: true,
+  imports: [
+    MatCardModule,
+    MatButtonModule,
+    MatDialogModule,
+  ],
+  providers: [
+    NotificationService,
+  ]
+})
+export class TableInspectMessageDialogComponent {
+  get label() {
+    return this.data.label;
+  }
+
+  get message() {
+    return this.data.message;
+  }
+
+  constructor(
+    public dialogRef: MatDialogRef<TableInspectMessageDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: TableInspectMessageDialogData
+  ) {}
+
+  private readonly iconsService = inject(IconsService);
+  private readonly clipboard = inject(Clipboard);
+  private readonly notificationService = inject(NotificationService);
+
+  copy() {
+    this.clipboard.copy(this.message);
+    this.notificationService.success('Message copied');
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/components/table/table-inspect-message.component.html

@@ -0,0 +1,13 @@
+@if (message) {
+  <span>{{croppedMessage}}...</span>
+  <button mat-icon-button (click)="copy()">
+    <mat-icon [fontIcon]="getIcon('copy')" />
+  </button>
+  @if (displayEye) {
+    <button mat-icon-button (click)="onView()">
+      <mat-icon [fontIcon]="getIcon('view')" />
+    </button>
+  }
+} @else {
+  <span>-</span>
+}

src/app/components/table/table-inspect-message.component.ts

@@ -0,0 +1,81 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Input, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
+import { TableInspectMessageDialogComponent, TableInspectMessageDialogData } from './table-inspect-message-dialog.component';
+
+@Component({
+  selector: 'app-table-inspect-message',
+  templateUrl: 'table-inspect-message.component.html',
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  providers: [
+    NotificationService
+  ]
+})
+export class TableInspectMessageComponent {
+  @Input({ required: true }) label: string;
+
+  @Input({ required: true }) set message(entry: string | undefined) {
+
+    if (entry && entry !== '') {
+      if (entry.length > 5) {
+        this._croppedMessage = entry.substring(0, 30);
+        this._message = entry;
+        this._displayEye = true;
+      } else {
+        this._croppedMessage = entry;
+      }
+    }
+  }
+
+  private readonly iconsService = inject(IconsService);
+  private readonly dialog = inject(MatDialog);
+  private readonly clipboard = inject(Clipboard);
+  private readonly notificationService = inject(NotificationService);
+
+  private _croppedMessage: string | undefined;
+  private _message: string |undefined;
+  private _displayEye = false;
+
+  get message() {
+    return this._message;
+  }
+
+  get croppedMessage() {
+    return this._croppedMessage;
+  }
+
+  get displayEye() {
+    return this._displayEye;
+  }
+
+  getIcon(name: string) {
+    return this.iconsService.getIcon(name);
+  }
+
+  onView() {
+    if (this._message) {
+      this.dialog.open<TableInspectMessageDialogComponent, TableInspectMessageDialogData>(TableInspectMessageDialogComponent, {
+        data: {
+          label: this.label,
+          message: this._message
+        }
+      });
+    }
+  }
+
+  copy() {
+    if (this._message) {
+      this.clipboard.copy(this._message);
+      this.notificationService.success('Message copied');
+    }
+  }
+}

src/app/tasks/services/tasks-index.service.ts

@@ -98,6 +98,7 @@ export class TasksIndexService implements IndexServiceCustomInterface<TaskSummar
     {
       name: $localize`Status Message`,
       key: 'statusMessage',
+      type: 'message',
       sortable: false,
     },
     {
@@ -147,6 +148,7 @@ export class TasksIndexService implements IndexServiceCustomInterface<TaskSummar
     {
       name: $localize`Error`,
       key: 'error',
+      type: 'output',
       sortable: false,
     },
     {