openaire-library/utils/dataTransfer/transferData.component.ts

303 lines
12 KiB
TypeScript
Raw Normal View History

import {Component, Input, ViewChild} from '@angular/core';
2022-05-19 11:15:52 +02:00
import {Subscriber} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
2022-05-19 11:15:52 +02:00
import {Location} from '@angular/common';
import {COOKIE} from "../../login/utils/helper.class";
import {Router} from "@angular/router";
import {properties} from "../../../../environments/environment";
2022-05-19 11:15:52 +02:00
declare var UIkit;
@Component({
selector: 'egi-transfer-data',
template: `
<a (click)="open()"
[title]="'Send data to cloud storage [demo]'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
2022-05-19 11:15:52 +02:00
> <span icon="cloud-upload"></span>
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<span uk-icon="cloud-upload"></span>
</span>
</a>
<!-- This is the modal -->
<modal-alert #egiTransferModal large="true" >
<div *ngIf="!accessToken" class="">
<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
</button>
</div>
</div>
<div *ngIf="accessToken" class="">
<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 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 *ngIf="status!='loading'" class="uk-margin-top">
2022-05-26 13:05:29 +02:00
<div>{{this.downloadElements.length}} files found:</div>
<div class="uk-overflow-auto" style="max-height: 135px">
<ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li>
</ul>
</div>
<div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
</div>
</div>
<div>
<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>
2022-05-30 11:45:05 +02:00
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
[options]="destinationOptions"></div>
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
[validators]="validators" 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' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)">
>> Transfer
</button>
</div>
</div>
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
<div>
2022-05-19 11:15:52 +02:00
<span class="uk-icon uk-spinner">
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
data-svg="spinner"><circle
fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
2022-05-19 11:15:52 +02:00
</span>
</div>
</div>
<div *ngIf="message" class="uk-width-1-1 uk-alert"
[class.uk-alert-success]="status && status.indexOf('error')==-1"
[class.uk-alert-error]="status && status.indexOf('error')!=-1"
[innerHTML]="message">
2022-05-19 11:15:52 +02:00
</div>
<div class="uk-width-1-1 uk-text-right "
[class.uk-invisible]="!(status == 'success' || status.indexOf('error')!=-1)">
<button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>
</div>
</div>
</modal-alert>
2022-05-19 11:15:52 +02:00
`
})
export class EGIDataTransferComponent {
subscriptions = [];
accessToken = null;
@Input() dois;
loginURL = properties.environment == "development"? "http://rudie.di.uoa.gr:8580/openid_connect_login":"https://explore.eosc-portal.eu/egi-login-service/openid_connect_login"
2022-05-19 11:15:52 +02:00
sourceUrls = []
selectedSourceUrl = null;
destinationPath = "";
destinationOptions = [{label: "EGI dCache (dcache-demo.desy.de)", value: {label: "EGI dCache (dcache-demo.desy.de)", url: "https://dcache-demo.desy.de:2443", id: "dcache" , webpage:"https://dcache-demo.desy.de"} }];
2022-05-19 11:15:52 +02:00
selectedDestination = null;
downloadElements = null;
@Input() isOpen = false;
@ViewChild('egiTransferModal') egiTransferModal;
APIURL = "https://eosc-data-transfer.vm.fedcloud.eu"
// APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
2022-05-19 11:15:52 +02:00
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init";
message;
doiPrefix = properties.doiURL;
validators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/];
2022-05-19 11:15:52 +02:00
constructor(private http: HttpClient, private location: Location, private _router: Router) {
}
ngAfterViewInit() {
2022-05-19 11:15:52 +02:00
if(this.isOpen){
this.open();
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
open(){
this.accessToken = COOKIE.getCookie("EGIAccessToken");
if(this.accessToken) {
for (let doi of this.dois) {
if (doi.indexOf("zenodo.") != -1) {
this.sourceUrls.push(this.doiPrefix + doi);
}
2022-05-19 11:15:52 +02:00
}
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();
2022-05-19 11:15:52 +02:00
}
this.isOpen = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false;
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.destinationPath = "";
this.selectedDestination = this.destinationOptions[0].value;
this.selectedSourceUrl = this.sourceUrls[0];
this.message = null;
this.status = "init";
this.egiTransferModal.open();
2022-05-19 11:15:52 +02:00
}
close(){
if(this.isOpen) {
this.isOpen = false;
this.egiTransferModal.cancel();
}
2022-05-19 11:15:52 +02:00
// this.downloadElements = [];
this.destinationPath = "";
this.selectedDestination = this.destinationOptions[0].value;
this.selectedSourceUrl = this.sourceUrls[0];
this.message = null;
this.status = "init";
if(this._router.url.indexOf("&egiTransfer")){
this.location.go(this._router.url.split("&egiTransfer")[0]);
}
}
checkin(){
window.location.href = this.loginURL+"?redirect="+ encodeURIComponent(window.location.href + (window.location.href.indexOf("&egiTransfer=t")!=-1?"":"&egiTransfer=t"));
2022-05-19 11:15:52 +02:00
}
parse(){
this.status = "loading";
this.message = null;
this.downloadElements = [];
this.subscriptions.push(this.http.get(this.APIURL + "/parser?doi=" + encodeURIComponent(this.selectedSourceUrl)).subscribe(
2022-05-19 11:15:52 +02:00
res => {
this.downloadElements= res['elements']
// console.log(this.downloadElements)
this.status = "init";
2022-05-19 11:15:52 +02:00
}, 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: 3000,
2022-05-19 11:15:52 +02:00
pos: 'bottom-right'
});
}
));
}
transfer() {
// console.log(this.selectedDestination)
2022-05-19 11:15:52 +02:00
this.status = "loading";
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)
2022-05-19 11:15:52 +02:00
let body = {
"files": [],
"params": {
"priority": 0,
"overwrite": true,
"retry": 3
}
};
// console.log(this.selectedDestination)
2022-05-19 11:15:52 +02:00
for (let element of this.downloadElements) {
let file = {
"sources": [element['downloadUrl']],
"destinations": [this.selectedDestination.url + this.destinationPath + element.name],
2022-05-19 11:15:52 +02:00
};
//TODO priority? checksum? filesize?
// "filesize": element['size']
2022-05-19 11:15:52 +02:00
body.files.push(file);
}
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.post(this.APIURL + "/transfers" ,body, {headers: headers}).subscribe(
2022-05-19 11:15:52 +02:00
res => {
// console.log(res)
2022-05-19 11:15:52 +02:00
UIkit.notification('Data transfer has began! ', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
this.status = "success"
this.message = `
<!--div class="uk-text-large uk-margin-bottom">Data transfer has began!</div-->
<div>Transfer of ` + this.downloadElements.length + ` files to <a href="`+ this.selectedDestination.webpage + `" target=_blank>`+this.selectedDestination.label+`</a> has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
2022-05-19 11:15:52 +02:00
<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> <a href="`+ this.selectedDestination.webpage + this.destinationPath + element.name + `" target="_blank">`+ element.name+ `</a></li> `;
this.message += ` <li>`+ element.name+ `</li> `;
2022-05-19 11:15:52 +02:00
}
this.message += `
</ul>
</div>
</div>`*/
this.message += `
2022-05-19 11:15:52 +02:00
</div>`
}, error => {
this.status = "errorTransfer";
this.message = "Couldn't transfer files";
UIkit.notification("Couldn't transfer files", {
status: 'error',
timeout: 6000,
pos: 'bottom-right'
});
}
));
}, error => {
this.status = "errorUser";
this.message = "User can't be authenticated!";
UIkit.notification("User can't be authenticated!", {
status: 'error',
timeout: 6000,
pos: 'bottom-right'
});
}
));
}
private parseFilename(url){
let filename = url.split("/")[url.split("/").length - 1];
return filename.split("?")[0];
}
pathValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: string } | null => {
if (!this.validatePath()) {
return {'error': 'Path should start and end with "/" e.g /path/'};
}
return null;
}
}
validatePath():boolean {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g;
return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null)
}
2022-05-19 11:15:52 +02:00
}