chore: adding icons as per transfer process states and minor refactor…

…ings

src/app/core/services/api/edc-api.service.ts

@@ -1,13 +1,15 @@
 import {Inject, Injectable} from '@angular/core';
 import {Observable, from} from 'rxjs';
 import {
+  AssetDto,
   AssetPage,
   ConnectorLimits,
   ContractAgreementPage,
   ContractAgreementTransferRequest,
   EdcClient,
   IdResponse,
   IdResponseDto,
+  TransferHistoryPage,
   buildEdcClient,
 } from '@sovity.de/edc-client';
 import {AssetCreateRequest} from '@sovity.de/edc-client/dist/generated/models/AssetCreateRequest';
@@ -34,9 +36,7 @@ export class EdcApiService {
     return from(this.edcClient.uiApi.assetPage());
   }
 
-  deleteAsset(
-    assetId: string,
-  ): Observable<IdResponseDto> {
+  deleteAsset(assetId: string): Observable<IdResponseDto> {
     return from(this.edcClient.uiApi.deleteAsset({assetId}));
   }
 
@@ -52,6 +52,16 @@ export class EdcApiService {
     );
   }
 
+  getTransferHistoryPage(): Observable<TransferHistoryPage> {
+    return from(this.edcClient.uiApi.transferHistoryPageEndpoint());
+  }
+
+  getTransferProcessAsset(transferProcessId: string): Observable<AssetDto> {
+    return from(
+      this.edcClient.uiApi.getTransferProcessAsset({transferProcessId}),
+    );
+  }
+
   getEnterpriseEditionConnectorLimits(): Observable<ConnectorLimits> {
     return from(this.edcClient.enterpriseEditionApi.connectorLimits());
   }

src/app/routes/connector-ui/transfer-history-page/transfer-history-page.module.ts

@@ -4,7 +4,9 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTableModule} from '@angular/material/table';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
 import {CatalogModule} from '../../../component-library/catalog/catalog.module';
 import {PipesAndDirectivesModule} from '../../../component-library/pipes-and-directives/pipes-and-directives.module';
@@ -27,6 +29,8 @@ import {TransferHistoryPageComponent} from './transfer-history-page/transfer-his
 
     // EDC UI Modules
     CatalogModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
     PipesAndDirectivesModule,
     UiElementsModule,
   ],

src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.html

@@ -39,7 +39,7 @@
       <ng-container matColumnDef="direction">
         <th *matHeaderCellDef mat-header-cell scope="col">Direction</th>
         <td *matCellDef="let item" mat-cell>
-          <mat-icon mat-table-avatar>
+          <mat-icon class="mat-icon-[28px]">
             {{ item.direction === 'PROVIDING' ? 'upload' : 'download' }}
           </mat-icon>
         </td>
@@ -52,17 +52,39 @@
               class="link"
               href="javascript:void(0)"
               (click)="onAssetDetailsClick(item.transferProcessId)">
-              {{ item.assetName ?? item.assetId }}
+              {{ item.assetName }}
             </a>
           </div>
           <div *ngIf="item.direction === 'CONSUMING'">
-            {{ item.assetName ?? item.assetId }}
+            {{ item.assetName }}
           </div>
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
         <th *matHeaderCellDef mat-header-cell scope="col">State</th>
-        <td *matCellDef="let item" mat-cell>{{ item.state.name }}</td>
+        <td *matCellDef="let item" mat-cell>
+          <div class="flex flex-row space-x-[5px]">
+            {{ item.state.name }}
+            {{
+              item.state.name === 'CUSTOM' ? ' (' + item.state.code + ')' : ''
+            }}
+            <!-- Error Icon -->
+            <mat-icon
+              *ngIf="item.state.simplifiedState === 'ERROR'"
+              class="text-warn mat-icon-[14px]"
+              [matTooltip]="item.errorMessage!!"
+              >warning
+            </mat-icon>
+            <!-- Progress Spinner -->
+            <mat-progress-spinner
+              *ngIf="item.state.simplifiedState === 'RUNNING'"
+              class="mat-icon-[14px]"
+              diameter="14"
+              color="primary"
+              mode="indeterminate">
+            </mat-progress-spinner>
+          </div>
+        </td>
       </ng-container>
       <ng-container matColumnDef="lastUpdated">
         <th *matHeaderCellDef mat-header-cell scope="col">Last updated</th>

src/app/routes/connector-ui/transfer-history-page/transfer-history-page/transfer-history-page.component.ts

@@ -55,53 +55,42 @@ export class TransferHistoryPageComponent implements OnInit {
     this.dialog.open(JsonDialogComponent, {data});
   }
 
-  loadAssetDetails(transferProcessId: string): Observable<Fetched<Asset>> {
+  loadAssetDetails(transferProcessId: string): Observable<Asset> {
     return this.edcApiService.getTransferProcessAsset(transferProcessId)
       .pipe(
         map((asset) =>
           this.assetPropertyMapper.buildAssetFromProperties(asset.properties),
         ),
-        Fetched.wrap({
-          failureMessage: 'Failed fetching asset details!',
-        }),
       );
   }
 
-  buildAssetDetailsDialog(fetchedAssetData: Fetched<Asset>) {
-    fetchedAssetData.match({
-      ifOk: (assetData) => {
+  onAssetDetailsClick(transferProcessId: string) {
+    this.loadAssetDetails(transferProcessId).subscribe({
+      next: (asset) => {
         this.dialog.open(AssetDetailDialogComponent, {
           data: this.assetDetailDialogDataService.assetDetails(
-            assetData,
+            asset,
             false,
           ),
           maxHeight: '90vh',
         });
       },
-      ifError: (error) => {
-        console.log(error);
-        this.notificationService.showError(error.failureMessage);
-      },
-      ifLoading: () => {
+      error: (error) => {
+        console.error('Failed to fetch asset details!', error);
+        this.notificationService.showError("Failed to fetch asset details!");
       },
     });
   }
 
-  onAssetDetailsClick(transferProcessId: string) {
-    this.loadAssetDetails(transferProcessId).subscribe((fetchedAssetData) => {
-      this.buildAssetDetailsDialog(fetchedAssetData);
-    });
-  }
-
   ngOnInit(): void {
     this.loadTransferProcesses();
   }
 
   loadTransferProcesses() {
     this.edcApiService.getTransferHistoryPage()
       .pipe(
-        map((transferProcesses) => ({
-          transferProcesses: [...transferProcesses.transferEntries]
+        map((transferHistoryPage) => ({
+          transferProcesses: transferHistoryPage.transferEntries
         })),
         Fetched.wrap({
           failureMessage: 'Failed fetching transfer history.',

src/theme.scss

@@ -42,14 +42,6 @@ mat-icon[mat-card-avatar] {
   line-height: 40px;
 }
 
-// Fix Icon sizes used in table avatars
-mat-icon[mat-table-avatar] {
-  font-size: 30px;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-}
-
 // Fix mat-chips exploding out and/or having multiline exploding strings
 mat-chip {
   max-width: 100%;