Merge branch 'main' into chore/ux/message-handling-table

src/app/components/inspect-list.component.css

@@ -0,0 +1,35 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.no-data {
+  text-align: center;
+  margin: 1rem;
+  font-style: italic;
+}
+
+button {
+  width: fit-content; 
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.5rem;
+}
+
+mat-divider {
+  margin-right: 0.5rem;
+}
+
+mat-toolbar {
+  padding: 1rem;
+}
+
+mat-card {
+  max-height: 25vh;
+  overflow-y: auto;
+}

src/app/components/inspect-list.component.html

@@ -10,13 +10,17 @@
   } @else {
     @for(item of list; track item) {
       <div class="item">
-        @if(redirectLink) {
-          <button mat-button [routerLink]="'/' + redirectLink + '/' + item">
-            <span>{{item}}</span>
+        <span>{{ item }}</span>
+        <div class="item-actions">
+          <button mat-icon-button (click)="copy(item)">
+            <mat-icon [fontIcon]="getIcon('copy')" />
           </button>
-        } @else {
-          <span>{{item}}</span>
-        }
+          @if(redirectLink) {
+            <button mat-icon-button [routerLink]="'/' + redirectLink + '/' + item">
+              <mat-icon [fontIcon]="getIcon('view')" />
+            </button>
+          }
+        </div>
       </div>
       @if(!$last) {
         <mat-divider />

src/app/components/inspect-list.component.spec.ts

@@ -1,4 +1,7 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { TestBed } from '@angular/core/testing';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
 import { InspectListComponent } from './inspect-list.component';
 
 describe('InspectListComponent', () => {
@@ -11,10 +14,21 @@ describe('InspectListComponent', () => {
     '2-root-1-0': list[2]
   };
 
+  const mockClipboard = {
+    copy: jest.fn()
+  };
+
+  const mockNotificationService = {
+    success: jest.fn(),
+  };
+
   beforeEach(() => {
     component = TestBed.configureTestingModule({
       providers: [
-        InspectListComponent
+        InspectListComponent,
+        IconsService,
+        { provide: Clipboard, useValue: mockClipboard },
+        { provide: NotificationService, useValue: mockNotificationService },
       ]
     }).inject(InspectListComponent);
     component.list = list;
@@ -60,4 +74,20 @@ describe('InspectListComponent', () => {
       });
     });
   });
+
+  describe('copy', () => {
+    const id = 'id';
+
+    beforeEach(() => {
+      component.copy(id);
+    });
+
+    it('should copy the provided Id', () => {
+      expect(mockClipboard.copy).toHaveBeenCalledWith(id);
+    });
+
+    it('should notify on copy', () => {
+      expect(mockNotificationService.success).toHaveBeenCalled();
+    });
+  });
 });

src/app/components/inspect-list.component.ts

@@ -1,9 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDivider } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { Params, RouterModule } from '@angular/router';
+import { IconsService } from '@services/icons.service';
+import { NotificationService } from '@services/notification.service';
 
 /**
  * The inspect list component provide a way to display lists inside a Mat-Card.
@@ -21,42 +25,18 @@ import { Params, RouterModule } from '@angular/router';
     MatButtonModule,
     RouterModule,
     MatDivider,
+    MatIconModule,
   ],
-  styles: [`
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .no-data {
-      text-align: center;
-      margin: 1rem;
-      font-style: italic;
-    }
-
-    button {
-      width: fit-content; 
-    }
-
-    .item {
-      width: 100%;
-      margin: 0.5rem;
-    }
-
-    mat-divider {
-      margin-right: 0.5rem;
-    }
-
-    mat-toolbar {
-      padding: 1rem;
-    }
-  `]
+  styleUrl: 'inspect-list.component.css',
 })
 export class InspectListComponent {
   private _list: string[] = [];
   private _queryParams: Params;
 
+  private readonly iconsService = inject(IconsService);
+  private readonly notificationService = inject(NotificationService);
+  readonly clipboard = inject(Clipboard);
+
   @Input({ required: true }) set list(entries: string[] | undefined) {
     if (entries) {
       this._list = entries;
@@ -83,4 +63,13 @@ export class InspectListComponent {
   get queryParams(): Params {
     return this._queryParams;
   }
+
+  getIcon(name: string) {
+    return this.iconsService.getIcon(name);
+  }
+
+  copy(value: string) {
+    this.clipboard.copy(value);
+    this.notificationService.success('Id copied');
+  }
 }

src/app/components/inspection/inspection-card.component.html

@@ -1,3 +1,8 @@
+@if (optionsFields && !fields) {
+<mat-toolbar>
+  Options
+</mat-toolbar>
+}
 <mat-card>
   <app-inspection [fields]="fields" [optionsFields]="optionsFields" [data]="data" [statuses]="statuses" />
 </mat-card>

src/app/components/inspection/inspection-card.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { TaskOptions } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
 import { DataRaw, Status } from '@app/types/data';
@@ -11,7 +12,8 @@ import { InspectionComponent } from './inspection.component';
   standalone: true,
   imports: [
     MatCardModule,
-    InspectionComponent
+    InspectionComponent,
+    MatToolbarModule,
   ],
   styleUrl: '../../../inspections.css',
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/components/inspection/inspection.component.html

@@ -1,11 +1,6 @@
-<app-inspection-object [fields]="fields" [statuses]="statuses" [data]="data" />
+@if (fields) {
+  <app-inspection-object [fields]="fields" [statuses]="statuses" [data]="data" />
+}
 @if(optionsFields) {
-  <mat-accordion>
-    <mat-expansion-panel id="options">
-      <mat-expansion-panel-header>
-        <strong>Options</strong>
-      </mat-expansion-panel-header>
-      <app-inspection-object [fields]="optionsFields" [statuses]="statuses" [data]="options" />
-    </mat-expansion-panel>
-  </mat-accordion>
+  <app-inspection-object [fields]="optionsFields" [statuses]="statuses" [data]="options" />
 }

src/app/components/inspection/inspection.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { TaskOptions } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
 import { DataRaw, Status } from '@app/types/data';
@@ -12,6 +13,7 @@ import { InspectionObjectComponent } from './inspection-object.component';
   imports: [
     InspectionObjectComponent,
     MatExpansionModule,
+    MatToolbarModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrl: '../../../inspections.css',

src/app/components/show-page.component.css

@@ -0,0 +1,5 @@
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/app/components/show-page.component.html

@@ -7,8 +7,11 @@
   <ng-content select="[bonus-actions]" bonus-actions />
 </app-inspection-toolbar>
 
-@if (data) {
-  <app-inspection-card [data]="data" [statuses]="statuses" [fields]="fields" [optionsFields]="optionsFields"/>
-  <app-inspection-list-grid [arrays]="arrays" [data]="data" />
-  <app-json-inspection [data]="data" />
-}
+<section id="content">
+  @if (data) {
+    <app-inspection-card [data]="data" [statuses]="statuses" [fields]="fields" />
+    <app-inspection-list-grid [arrays]="arrays" [data]="data" />
+    <app-inspection-card [data]="data" [optionsFields]="optionsFields"/>
+    <app-json-inspection [data]="data" />
+  }  
+</section>

src/app/components/show-page.component.ts

@@ -8,21 +8,13 @@ import { InspectionJsonComponent } from './inspection/inspection-json.component'
 import { InspectionListGridComponent } from './inspection/inspection-list-grid.component';
 import { InspectionHeaderComponent } from './inspection-header.component';
 import { InspectionToolbarComponent } from './inspection-toolbar.component';
-import { ShowActionsComponent } from './show-actions.component';
-import { ShowCardComponent } from './show-card.component';
 
 @Component({
   selector: 'app-show-page',
   templateUrl: './show-page.component.html',
-  styles: [`
-span {
-  font-style: italic;
-}
-  `],
+  styleUrl: 'show-page.component.css',
   standalone: true,
   imports: [
-    ShowCardComponent,
-    ShowActionsComponent,
     InspectionCardComponent,
     InspectionHeaderComponent,
     InspectionListGridComponent,

src/app/dashboard/components/lines/applications-line.component.ts

@@ -55,6 +55,7 @@ export class ApplicationsLineComponent extends DashboardLineTableComponent<Appli
 
   ngAfterViewInit() {
     this.mergeSubscriptions();
+    this.handleAutoRefreshStart();
   }
 
   ngOnDestroy() {

src/app/dashboard/components/lines/partitions-line.component.ts

@@ -47,6 +47,7 @@ export class PartitionsLineComponent extends DashboardLineTableComponent<Partiti
 
   ngAfterViewInit() {
     this.mergeSubscriptions();
+    this.handleAutoRefreshStart();
   }
 
   ngOnDestroy(): void {

src/app/dashboard/components/lines/results-line.component.ts

@@ -12,6 +12,7 @@ import { DATA_FILTERS_SERVICE } from '@app/tokens/filters.token';
 import { DashboardLineTableComponent } from '@app/types/components/dashboard-line-table';
 import { FiltersToolbarComponent } from '@components/filters/filters-toolbar.component';
 import { TableDashboardActionsToolbarComponent } from '@components/table-dashboard-actions-toolbar.component';
+import { NotificationService } from '@services/notification.service';
 
 @Component({
   selector: 'app-dashboard-results-line',
@@ -25,6 +26,7 @@ import { TableDashboardActionsToolbarComponent } from '@components/table-dashboa
       provide: DATA_FILTERS_SERVICE,
       useExisting: ResultsFiltersService
     },
+    NotificationService,
   ],
   imports: [
     MatIconModule,
@@ -45,6 +47,7 @@ export class ResultsLineComponent extends DashboardLineTableComponent<ResultRaw,
 
   ngAfterViewInit(): void {
     this.mergeSubscriptions();
+    this.handleAutoRefreshStart();
   }
 
   ngOnDestroy(): void {

src/app/dashboard/components/lines/sessions-line.component.ts

@@ -54,6 +54,7 @@ export class SessionsLineComponent extends DashboardLineCustomColumnsComponent<S
 
   ngAfterViewInit(): void {
     this.mergeSubscriptions();
+    this.handleAutoRefreshStart();
   }
 
   ngOnDestroy(): void {

src/app/dashboard/components/lines/tasks-line.component.ts

@@ -67,6 +67,7 @@ export class TasksLineComponent extends DashboardLineCustomColumnsComponent<Task
 
   ngAfterViewInit(): void {
     this.mergeSubscriptions();
+    this.handleAutoRefreshStart();
   }
 
   ngOnDestroy(): void {

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

@@ -36,6 +36,11 @@ export class TasksInspectionService extends InspectionService<TaskRaw> {
     },
     {
       key: 'createdBy',
+      link: 'tasks',
+    },
+    {
+      key: 'payloadId',
+      link: 'results',
     },
     {
       key: 'createdAt',
@@ -46,15 +51,15 @@ export class TasksInspectionService extends InspectionService<TaskRaw> {
       type: 'date'
     },
     {
-      key: 'fetchedAt',
+      key: 'receivedAt',
       type: 'date'
     },
     {
       key: 'acquiredAt',
       type: 'date'
     },
     {
-      key: 'receivedAt',
+      key: 'fetchedAt',
       type: 'date'
     },
     {

src/app/types/components/dashboard-line-table.ts

@@ -64,7 +64,6 @@ export abstract class DashboardLineTableComponent<T extends DataRaw, F extends F
     this.initFilters();
     this.initFilters();
     this.initInterval();
-    this.handleAutoRefreshStart();
   }
 
   initColumns() {