update transfer data component - real api calls

landingPages/result/resultLanding.component.ts

@@ -443,6 +443,7 @@ export class ResultLandingComponent {
       data => {
         this.resultLandingInfo = data;
         this.id = this.resultLandingInfo.objIdentifier;
+        console.log(this.resultLandingInfo.identifiers, this.resultLandingInfo.identifiers.get('doi'),this.resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.'))
         //old
         // this.viewsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoViews", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
         // this.downloadsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';

utils/dataTransfer/transferData.component.ts

@@ -6,13 +6,14 @@ import {Location} from '@angular/common';
 import {StringUtils} from "../string-utils.class";
 import {COOKIE} from "../../login/utils/helper.class";
 import {Router} from "@angular/router";
+import {properties} from "../../../../environments/environment";
 declare var UIkit;
 
 @Component({
   selector: 'egi-transfer-data',
   template: `
       <a (click)="open()"
-         [title]="'Transfer Data'"
+         [title]="'Send data to cloud storage'"
          [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'"
       > <span icon="cloud-upload"></span>
           <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
@@ -23,17 +24,15 @@ declare var UIkit;
 
       <!-- This is the modal -->
       <div id="modal-example" class="uk-modal uk-open " style="display: block" [class.uk-invisible]="!isOpen">
-          <div class="uk-modal-dialog uk-modal-body uk-width-expand uk-text-left">
+          <div class="uk-modal-dialog uk-modal-body uk-width-expand uk-text-left" style="max-width:400px">
               <button class="uk-modal-close-default" type="button" uk-close (click)="close()"></button>
               <div class="uk-padding">
                   <div *ngIf="!accessToken" class="">
                       <div class="uk-width-1-1 uk-text-center">
                           <h2 class="uk-modal-title">EOSC data transfer service</h2>
                       </div>
-                      <div class="uk-width-1-1 uk-margin-top uk-margin-bottom">
+                      <div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                          In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
-                          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                          laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                       <div class="uk-text-center">
                           <button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login
@@ -44,35 +43,34 @@ declare var UIkit;
                       <div class="uk-width-1-1  uk-text-center">
                           <h2 class="uk-modal-title">EOSC data transfer service</h2>
                       </div>
-                      <div class="uk-width-1-1 uk-margin-top uk-margin-bottom">
+                      <div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                          You have requested to send the data corresponding to the DOI <a [href]="selectedSourceUrl" target="_blank">{{selectedSourceUrl.split(doiPrefix)[1]}}</a> to a cloud storage using the EOSC Data Transfer service
-                          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                          laboris nisi ut aliquip ex ea commodo consequat.
                       </div>
                       <div class="uk-grid uk-child-width-1-2 uk-grid-divider">
                           <div class="uk-first-column">
-                              <p class="uk-text-meta">Lorem ipsum ....</p>
+                              <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p>
                               <div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
                                    [options]="sourceUrls" (valueChange)="this.parse()"></div>
                             <div class="uk-margin-top">
-                                <div>Files to be transfered:</div>
+                                <div>Files to be transferred:</div>
                                 <ul>
                                     
-                                    <li *ngFor=" let element of this.downloadElements">{{ element.filename}}
+                                    <li *ngFor=" let element of this.downloadElements">{{ element.name}}
                                     </li>
                                 </ul>
+                                <div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
                             </div>                              
                           </div>
                           <div>
-                              <p class="uk-text-meta">Lorem ipsum ....</p>
+                              <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type and provide the corresponding storage destination path.</p>
-                              <div input type="select" [(value)]="selectedDestination" placeholder="Storage" hint="Select..."
+                              <div input type="select" [(value)]="selectedDestination" placeholder="Storage type" hint="Select..."
                                    [options]="destinationOptions"></div>
                               <div input [(value)]="destinationPath" placeholder="Give a destination path..."
                                    [validators]="validators[0]" class="uk-margin-top"></div>
                               <button (click)="transfer()"
                                       class="uk-button uk-button-primary uk-margin-top"
                                       [class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' ">
-                                  >> Transfer to Storage
+                                  >> Transfer
                               </button>
                           </div>
                       </div>
@@ -112,14 +110,16 @@ export class EGIDataTransferComponent {
   sourceUrls = []
   selectedSourceUrl = null;
   destinationPath = "";
-  destinationOptions = [{label: "EGI storage", value: { url: "https://egi.storage.eu", id: "egi" } }];
+  destinationOptions = [{label: "EGI storage", value: { url: "https://dcache-demo.desy.de:2443", id: "egi" , webpage:"https://dcache-demo.desy.de"} }];
   selectedDestination = null;
 
   downloadElements = null;
   @Input() isOpen = false;
-  APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
+  APIURL = "https://eosc-data-transfer.vm.fedcloud.eu"
+    // APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
   status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init";
   message;
+  doiPrefix = properties.doiURL;
   validators = [Validators.required, StringUtils.urlValidator()];
   constructor(private http: HttpClient, private location: Location,  private _router: Router) {
 
@@ -141,14 +141,22 @@ export class EGIDataTransferComponent {
   }
   open(){
     this.accessToken = COOKIE.getCookie("EGIAccessToken");
-    for(let doi of this.dois){
+    if(this.accessToken) {
-      if(doi.indexOf("zenodo.")!=-1){
+      for (let doi of this.dois) {
-        this.sourceUrls.push("https://doi.org/" + doi);
+        if (doi.indexOf("zenodo.") != -1) {
+          this.sourceUrls.push(this.doiPrefix + doi);
         }
       }
+      try {
+        this.sourceUrls.sort(function (a, b) {
+          return Number(b.split("zenodo.")[1]) - Number(a.split("zenodo.")[1]);
+        });
+      }catch (e){}
+
       this.selectedSourceUrl = this.sourceUrls[0];
       this.selectedDestination = this.destinationOptions[0].value;
       this.parse();
+    }
     this.isOpen = true;
   }
   close(){
@@ -169,29 +177,28 @@ export class EGIDataTransferComponent {
 
   }
   parse(){
-
+    this.status = "loading";
-        this.subscriptions.push(this.http.get(this.APIURL + "/parser/zenodo?source=" + this.selectedSourceUrl ).subscribe(
+    this.message = null;
-          res => {
-            console.log(res)
     this.downloadElements = [];
+        this.subscriptions.push(this.http.get(this.APIURL + "/parser/zenodo?doi=" + encodeURIComponent(this.selectedSourceUrl)).subscribe(
+          res => {
             for( let element of res['elements']){
               //TODO remove
               element.downloadUrl = "https://zenodo.org/record/6354460/files/preprocessed_data/weights/atlas_EUCP_ICTP_CMIP6_REA_tas_weights.nc?download=1";
               //TODO can we use element.name instead?
-              element.filename = this.parseFilename(element.downloadUrl);
+              // element.filename = element.name; //this.parseFilename(element.downloadUrl);
-              console.log(element.filename)
+              // console.log(element.filename)
               this.downloadElements.push(element)
             }
 
-            console.log(this.downloadElements)
+            // console.log(this.downloadElements)
-            // this.transfer();
+            this.status = "init";
-
           }, error => {
             this.status = "errorParser";
             this.message = "Couldn't get download URLs from zenodo";
             UIkit.notification("Couldn't get download URLs from zenodo", {
               status: 'error',
-              timeout: 6000,
+              timeout: 3000,
               pos: 'bottom-right'
             });
 
@@ -206,7 +213,7 @@ export class EGIDataTransferComponent {
   let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
   this.subscriptions.push(this.http.get(this.APIURL + "/user/info", {headers: headers}).subscribe(
     res => {
-      console.log(res)
+      // console.log(res)
     let body = {
       "files": [],
       "params": {
@@ -215,30 +222,24 @@ export class EGIDataTransferComponent {
         "retry": 3
       }
     };
-      console.log(this.selectedDestination)
+
+      // console.log(this.selectedDestination)
     for (let element of this.downloadElements) {
 
      let file = {
-        "sources": [
+        "sources": [element['downloadUrl']],
-        {
+        "destinations": [this.selectedDestination.url + this.destinationPath + element.name],
-          "url": element['downloadUrl']
+
-        }
-      ],
-        "destinations": [
-        {
-          "url": this.selectedDestination.url + this.destinationPath + element.filename
-        }
-      ],
-        "filesize": element['size']
       };
-     //TODO priority? checksum?
+     //TODO priority? checksum? filesize?
+     //  "filesize": element['size']
      body.files.push(file);
     }
 
     let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
     this.subscriptions.push(this.http.post(this.APIURL + "/transfer" ,body, {headers: headers}).subscribe(
       res => {
-        console.log(res)
+        // console.log(res)
         UIkit.notification('Data transfer has began! ', {
           status: 'success',
           timeout: 6000,
@@ -248,14 +249,14 @@ export class EGIDataTransferComponent {
         this.status = "success"
         this.message = `
             <div class="uk-text-large uk-margin-bottom">Data transfer has began!</div>
-            <div>Transfering ` + this.downloadElements.length + ` files to <a href="`+ this.selectedDestination.url + this.destinationPath + `" target=_blank> EGI Storage</a>: 
+            <div>Transfering ` + this.downloadElements.length + ` files to <a href="`+ this.selectedDestination.webpage + `" target=_blank> EGI Storage</a>: 
             <ul>           
 `;
         // TODO LATER we can call status for each file and see if the transfer has been complete
         for(let element of this.downloadElements){
-          console.log(element)
+          // console.log(element)
-          this.message += ` <li> `+ element.filename+ `</li>  `;
+          // this.message += ` <li> <a href="`+ this.selectedDestination.webpage + this.destinationPath + element.name + `" target="_blank">`+ element.name+ `</a></li>  `;
-
+          this.message += ` <li>`+ element.name+ `</li>  `;
         }
         this.message += `
         </ul>