#422753 - Upgrade 'edc-connector-client' version. Adaptation of assets section

ppelgmv · ppelgmv · commit 11aadbf050fd · 2024-02-21T12:57:53.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "~17.0.8",
     "@angular/platform-browser-dynamic": "~17.0.8",
     "@angular/router": "~17.0.8",
-    "@think-it-labs/edc-connector-client": "0.2.0",
+    "@think-it-labs/edc-connector-client": "^0.3.0",
     "rxjs": "~7.8.1",
     "zone.js": "~0.14.2"
   },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -67,7 +67,7 @@ import { HttpClientModule } from '@angular/common/http';
     },
     {
       provide: 'STORAGE_TYPES',
-      useFactory: () => [{id: "AzureStorage", name: "AzureStorage"}, {id: "AmazonS3", name: "AmazonS3"}],
+      useFactory: () => [{id: "HttpData", name: "HttpData"}, {id: "AmazonS3", name: "AmazonS3"}],
     },
     {
       provide: HTTP_INTERCEPTORS, multi: true, useFactory: () => {
diff --git a/src/app/pages/assets/asset-editor-dialog/asset-editor-dialog.component.html b/src/app/pages/assets/asset-editor-dialog/asset-editor-dialog.component.html
@@ -24,28 +24,46 @@
   <div>
     <mat-form-field class="form-field" color="accent" id="form-field-destination">
       <mat-label>Destination</mat-label>
-      <mat-select [(ngModel)]="storageTypeId" disabled>
+      <mat-select [(ngModel)]="storageTypeId">
         <mat-option *ngFor="let storageType of storageTypes " [value]="storageType.id">
           {{storageType.name}}
         </mat-option>
       </mat-select>
     </mat-form-field>
+  </div>
 
-    <mat-form-field class="form-field" color="accent" id="form-field-account">
-      <mat-label>Account</mat-label>
-      <input [(ngModel)]="account" matInput>
+  <div *ngIf="storageTypeId == 'HttpData'">
+    <mat-form-field class="form-field" color="accent" id="form-field-name">
+      <mat-label>Name</mat-label>
+      <input [(ngModel)]="name" matInput>
     </mat-form-field>
 
-    <mat-form-field class="form-field" color="accent" id="form-field-container">
-      <mat-label>Container</mat-label>
-      <input disabled [(ngModel)]="container" matInput>
+    <mat-form-field class="form-field" color="accent" id="form-field-base-url">
+      <mat-label>Base URL</mat-label>
+      <input [(ngModel)]="baseUrl" matInput>
     </mat-form-field>
 
-    <mat-form-field class="form-field" color="accent" id="form-field-blobname">
-      <mat-label>Blob Name</mat-label>
-      <input [(ngModel)]="blobname" matInput>
+    <mat-form-field class="form-field" color="accent" id="form-field-proxy-path">
+      <mat-label>Proxy Path</mat-label>
+      <input [(ngModel)]="proxyPath" matInput>
     </mat-form-field>
   </div>
+
+  <div *ngIf="storageTypeId == 'AmazonS3'">
+    <mat-form-field class="form-field" color="accent" id="form-field-region">
+      <mat-label>Region</mat-label>
+      <input [(ngModel)]="region" matInput>
+    </mat-form-field>
+    <mat-form-field class="form-field" color="accent" id="form-field-key-name">
+      <mat-label>Key Name</mat-label>
+      <input [(ngModel)]="keyName" matInput>
+    </mat-form-field>
+    <mat-form-field class="form-field" color="accent" id="form-field-bucket-name">
+      <mat-label>Bucket Name</mat-label>
+      <input [(ngModel)]="bucketName" matInput>
+    </mat-form-field>
+  </div>
+
 </mat-dialog-content>
 
 
diff --git a/src/app/pages/assets/asset-editor-dialog/asset-editor-dialog.component.ts b/src/app/pages/assets/asset-editor-dialog/asset-editor-dialog.component.ts
@@ -1,11 +1,12 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { AssetInput } from "@think-it-labs/edc-connector-client";
+import { AssetInput, DataAddress } from "@think-it-labs/edc-connector-client";
 import { MatDialogRef } from "@angular/material/dialog";
 import { StorageType } from "../../../shared/models/storage-type";
+import { NotificationService } from 'src/app/shared/services/notification.service';
 
 
 @Component({
-  selector: 'edc-demo-asset-editor-dialog',
+  selector: 'app-asset-editor-dialog',
   templateUrl: './asset-editor-dialog.component.html',
   styleUrls: ['./asset-editor-dialog.component.scss']
 })
@@ -15,36 +16,72 @@ export class AssetEditorDialog implements OnInit {
   version: string = '';
   name: string = '';
   contenttype: string = '';
+  storageTypeId: string = '';
+
+  // AmazonS3 dataAddress attributes
+  region: string = '';
+  keyName: string = '';
+  bucketName: string = '';
+
+  // HttpData dataAddress attributes
+  httpDataName: string = '';
+  baseUrl: string = '';
+  proxyPath: string = '';
 
-  storageTypeId: string = 'AzureStorage';
-  account: string = '';
-  container: string = 'src-container';
-  blobname: string = '';
 
   constructor(private dialogRef: MatDialogRef<AssetEditorDialog>,
+              private notificationService: NotificationService,
       @Inject('STORAGE_TYPES') public storageTypes: StorageType[]) {
   }
 
   ngOnInit(): void {
   }
 
   onSave() {
+    if (!this.checkRequiredFields()) {
+      this.notificationService.showError("Review required fields");
+      return;
+    }
+
+    let dataAddress: any;
+
+    if (this.storageTypeId === 'AmazonS3') {
+      dataAddress = {
+        "type": this.storageTypeId,
+        "region": this.region,
+        "keyName": this.keyName,
+        "bucketName": this.bucketName
+      };
+    } else if (this.storageTypeId === 'HttpData') {
+      dataAddress = {
+        "type": this.storageTypeId,
+        "name": this.httpDataName,
+        "baseUrl": this.baseUrl,
+        "proxyPath": this.proxyPath
+      };
+    } else {
+      this.notificationService.showError("Incorrect destination value");
+      return;
+    }
+
     const assetInput: AssetInput = {
       "@id": this.id,
       properties: {
         "name": this.name,
         "version": this.version,
         "contenttype": this.contenttype,
       },
-      dataAddress: {
-        "type": this.storageTypeId,
-        "account": this.account,
-        "container": this.container,
-        "blobname": this.blobname,
-        "keyName": `${this.account}-key1`
-      }
+      dataAddress: dataAddress
     };
 
     this.dialogRef.close({ assetInput });
   }
+
+  private checkRequiredFields(): boolean {
+    if(!this.id || !this.storageTypeId){
+      return false;
+    } else {
+      return true;
+    }
+  }
 }
diff --git a/src/app/pages/assets/asset-viewer/asset-viewer.component.ts b/src/app/pages/assets/asset-viewer/asset-viewer.component.ts
@@ -10,7 +10,7 @@ import {NotificationService} from "../../../shared/services/notification.service
 
 
 @Component({
-  selector: 'edc-demo-asset-viewer',
+  selector: 'app-asset-viewer',
   templateUrl: './asset-viewer.component.html',
   styleUrls: ['./asset-viewer.component.scss']
 })
diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html
@@ -75,12 +75,13 @@
 
             <mat-divider inset></mat-divider>
             <mat-card-actions class="card-actions">
-              <button (click)="onNegotiateClicked(contractOffer)"
+              <!-- TODO: Pendiente de abordar en #422765 -->
+              <!-- <button (click)="onNegotiateClicked(contractOffer)"
                       [disabled]="isBusy(contractOffer) || isNegotiated(contractOffer)"
                       color="accent" mat-stroked-button>
                 <mat-icon>drive_file_rename_outline</mat-icon>
                 Negotiate
-              </button>
+              </button> -->
             </mat-card-actions>
             <mat-card-footer>
               <mat-progress-bar *ngIf="isBusy(contractOffer)" color="accent" mode="indeterminate"></mat-progress-bar>
diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts b/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts
@@ -17,7 +17,7 @@ interface RunningTransferProcess {
 }
 
 @Component({
-  selector: 'edc-demo-catalog-browser',
+  selector: 'app-catalog-browser',
   templateUrl: './catalog-browser.component.html',
   styleUrls: ['./catalog-browser.component.scss']
 })
@@ -54,7 +54,8 @@ export class CatalogBrowserComponent implements OnInit {
     this.fetch$.next(null);
   }
 
-  onNegotiateClicked(contractOffer: ContractOffer) {
+  // TODO: Pendiente de abordar en #422765
+  /* onNegotiateClicked(contractOffer: ContractOffer) {
     const initiateRequest: ContractNegotiationRequest = {
       connectorAddress: contractOffer.originator,
       offer: {
@@ -108,7 +109,7 @@ export class CatalogBrowserComponent implements OnInit {
       console.error(error);
       this.notificationService.showError("Error starting negotiation");
     });
-  }
+  } */
 
   isBusy(contractOffer: ContractOffer) {
     return this.runningNegotiations.get(contractOffer.id) !== undefined || !!this.runningTransferProcesses.find(tp => tp.assetId === contractOffer.assetId);
diff --git a/src/app/pages/contract-definitions/contract-definition-editor-dialog/contract-definition-editor-dialog.component.ts b/src/app/pages/contract-definitions/contract-definition-editor-dialog/contract-definition-editor-dialog.component.ts
@@ -6,7 +6,7 @@ import { Asset, ContractDefinitionInput, PolicyDefinition } from "../../../share
 
 
 @Component({
-  selector: 'edc-demo-contract-definition-editor-dialog',
+  selector: 'app-contract-definition-editor-dialog',
   templateUrl: './contract-definition-editor-dialog.component.html',
   styleUrls: ['./contract-definition-editor-dialog.component.scss']
 })
diff --git a/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.ts b/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.ts
@@ -12,7 +12,7 @@ import { ContractDefinitionInput, ContractDefinition } from "../../../shared/mod
 
 
 @Component({
-  selector: 'edc-demo-contract-definition-viewer',
+  selector: 'app-contract-definition-viewer',
   templateUrl: './contract-definition-viewer.component.html',
   styleUrls: ['./contract-definition-viewer.component.scss']
 })
diff --git a/src/app/pages/contracts/contract-viewer/contract-viewer.component.html b/src/app/pages/contracts/contract-viewer/contract-viewer.component.html
@@ -30,11 +30,12 @@
 
           <mat-divider inset></mat-divider>
           <mat-card-actions class="card-actions">
-            <button (click)="onTransferClicked(contract)" [disabled]="isTransferInProgress(contract.id!)" color="accent"
+            <!-- TODO: Pendiente de abordar en #422768 -->
+            <!-- <button (click)="onTransferClicked(contract)" [disabled]="isTransferInProgress(contract.id!)" color="accent"
                     mat-stroked-button>
               <mat-icon>downloading</mat-icon>
               Transfer
-            </button>
+            </button> -->
           </mat-card-actions>
           <mat-card-footer class="contract-card-footer">
             <mat-progress-bar *ngIf="isTransferInProgress(contract.id!)" color="accent" mode="indeterminate"></mat-progress-bar>
diff --git a/src/app/pages/contracts/contract-viewer/contract-viewer.component.ts b/src/app/pages/contracts/contract-viewer/contract-viewer.component.ts
@@ -62,7 +62,8 @@ export class ContractViewerComponent implements OnInit {
     return '';
   }
 
-  onTransferClicked(contract: ContractAgreement) {
+  // TODO: Pendiente de abordar en #422768
+/*   onTransferClicked(contract: ContractAgreement) {
     const dialogRef = this.dialog.open(CatalogBrowserTransferDialog);
 
     dialogRef.afterClosed().pipe(first()).subscribe(result => {
@@ -80,13 +81,14 @@ export class ContractViewerComponent implements OnInit {
           this.notificationService.showError("Error initiating transfer");
         });
     });
-  }
+  } */
 
   isTransferInProgress(contractId: string): boolean {
     return !!this.runningTransfers.find(rt => rt.contractId === contractId);
   }
 
-  private createTransferRequest(contract: ContractAgreement, storageTypeId: string): Observable<TransferProcessInput> {
+  // TODO: Pendiente de abordar en #422768
+/*   private createTransferRequest(contract: ContractAgreement, storageTypeId: string): Observable<TransferProcessInput> {
     return this.getContractOfferForAssetId(contract.assetId!).pipe(map(contractOffer => {
 
       const iniateTransfer : TransferProcessInput = {
@@ -105,7 +107,7 @@ export class ContractViewerComponent implements OnInit {
       return iniateTransfer;
     }));
 
-  }
+  } */
 
   /**
    * This method is used to obtain that URL of the connector that is offering a particular asset from the catalog.
diff --git a/src/app/pages/introduction/introduction.component.ts b/src/app/pages/introduction/introduction.component.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 @Component({
-  selector: 'edc-demo-introduction',
+  selector: 'app-introduction',
   templateUrl: './introduction.component.html',
   styleUrls: ['./introduction.component.scss']
 })
diff --git a/src/app/pages/transfer-history/transfer-history-viewer.component.ts b/src/app/pages/transfer-history/transfer-history-viewer.component.ts
@@ -7,7 +7,7 @@ import {ConfirmationDialogComponent, ConfirmDialogModel} from "../../shared/comp
 import {MatDialog} from "@angular/material/dialog";
 
 @Component({
-  selector: 'edc-demo-transfer-history',
+  selector: 'app-transfer-history',
   templateUrl: './transfer-history-viewer.component.html',
   styleUrls: ['./transfer-history-viewer.component.scss']
 })
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -6,6 +6,11 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import {MatButtonModule} from '@angular/material/button';
+import {FlexLayoutModule} from '@angular/flex-layout';
+
+import {MatFormFieldModule} from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {MatDialogModule} from '@angular/material/dialog';
 
 import {NavigationComponent} from './components/navigation/navigation.component';
 import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
@@ -18,7 +23,12 @@ import { ConfirmationDialogComponent } from './components/confirmation-dialog/co
     MatSidenavModule,
     CommonModule,
     RouterModule,
-    MatButtonModule
+    MatButtonModule,
+    FlexLayoutModule,
+    MatFormFieldModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
   ],
   declarations: [
     NavigationComponent,
diff --git a/src/styles.scss b/src/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ import { HttpClientModule } from '@angular/common/http';`
`67`	`67`	`},`
`68`	`68`	`{`
`69`	`69`	`provide: 'STORAGE_TYPES',`
`70`		`- useFactory: () => [{id: "AzureStorage", name: "AzureStorage"}, {id: "AmazonS3", name: "AmazonS3"}],`
	`70`	`+ useFactory: () => [{id: "HttpData", name: "HttpData"}, {id: "AmazonS3", name: "AmazonS3"}],`
`71`	`71`	`},`
`72`	`72`	`{`
`73`	`73`	`provide: HTTP_INTERCEPTORS, multi: true, useFactory: () => {`