update transfer data component - real api calls

This commit is contained in:
argirok 2022-05-23 12:54:34 +03:00
parent a0ff8d03c3
commit c53e23708e
2 changed files with 55 additions and 53 deletions

View File

@ -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';

View File

@ -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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
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
</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>
<div input type="select" [(value)]="selectedDestination" placeholder="Storage" hint="Select..."
<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 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(doi.indexOf("zenodo.")!=-1){
this.sourceUrls.push("https://doi.org/" + doi);
if(this.accessToken) {
for (let doi of this.dois) {
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.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.subscriptions.push(this.http.get(this.APIURL + "/parser/zenodo?source=" + this.selectedSourceUrl ).subscribe(
this.status = "loading";
this.message = null;
this.downloadElements = [];
this.subscriptions.push(this.http.get(this.APIURL + "/parser/zenodo?doi=" + encodeURIComponent(this.selectedSourceUrl)).subscribe(
res => {
console.log(res)
this.downloadElements = [];
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);
console.log(element.filename)
// element.filename = element.name; //this.parseFilename(element.downloadUrl);
// console.log(element.filename)
this.downloadElements.push(element)
}
console.log(this.downloadElements)
// this.transfer();
// console.log(this.downloadElements)
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": [
{
"url": element['downloadUrl']
}
],
"destinations": [
{
"url": this.selectedDestination.url + this.destinationPath + element.filename
}
],
"filesize": element['size']
"sources": [element['downloadUrl']],
"destinations": [this.selectedDestination.url + this.destinationPath + element.name],
};
//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)
this.message += ` <li> `+ element.filename+ `</li> `;
// console.log(element)
// 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>