MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

data-transfer-v2 #6

Merged
konstantina.galouni merged 26 commits from data-transfer-v2 into develop 2023-06-13 16:20:04 +02:00
Conversation 0 Commits 26 Files Changed 6 +383 -161
6 changed files with 383 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
landingPages/result/resultLanding.component.html
View File

@ -71,8 +71,7 @@
</orcid-work> </orcid-work>
</li> </li>
<li *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' && <li *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') && resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi')"
resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
class="uk-text-center"> class="uk-text-center">
<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data> <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
</li> </li>
@ -165,8 +164,7 @@
</orcid-work> </orcid-work>
</div> </div>
<div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' && <div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') && resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi')"
resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
class=""> class="">
<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data> <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
</div> </div>

144
utils/dataTransfer/transferData.component.html
View File

@ -9,11 +9,11 @@
<!-- This is the modal --> <!-- This is the modal -->
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'success' <fs-modal #egiTransferModal classBody="uk-container-xlarge" [okButtonDisabled]="destinationPath.length == 0 || status == 'succeeded'
||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)" || (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(alertOutput)="transfer()" > (okEmitter)="transfer()" (cancelEmitter)="init()">
<div *ngIf="!accessToken" class=""> <div *ngIf="!accessToken" class="">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> <div class="uk-width-1-1 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. In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
</div> </div>
<div class="uk-text-center"> <div class="uk-text-center">
@ -22,18 +22,18 @@
</div> </div>
</div> </div>
<div *ngIf="accessToken" class=""> <div *ngIf="accessToken" class="">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> <div class="uk-width-1-1 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 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>
<div class="uk-grid uk-child-width-1-2 uk-grid-divider"> <div class="uk-grid uk-grid-small uk-child-width-1-2 uk-grid-divider">
<!-- Source --> <!-- Source -->
<div class="uk-first-column source"> <div class="uk-first-column source">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available DOI URLs:</p>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..." <div input type="select" [(value)]="selectedSourceUrl" hint="Select..." [inputClass]="'flat'"
[options]="sourceUrls" (valueChange)="this.parse()"></div> [options]="sourceUrls" (valueChange)="this.parse()"></div>
<div *ngIf="status!='loading'" class="uk-margin-top"> <div *ngIf="status!='active'" class="uk-margin-top">
<div>{{this.downloadElements.length}} files found:</div> <div>{{this.downloadElements.length}} files found:</div>
<div class="uk-overflow-auto" style="max-height: 135px"> <div class="uk-margin-small-top uk-height-max-medium uk-overflow-auto">
<ul> <ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}} <li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li> </li>
@ -43,53 +43,100 @@
</div> </div>
</div> </div>
<!-- Destination --> <!-- Destination -->
<div class="destination"> <div *ngIf="destinationOptions" class="destination">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type:</p> <!-- -->
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..." <!-- Testing:<br>-->
[options]="destinationOptions"></div> <!-- https://dcache-demo.desy.de:2443-->
<ng-container *ngIf="selectedDestination.id == 'dcache'"> <!-- <br>-->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the corresponding storage destination path:</p> <!-- /Demonstrators/EOSC-Future/EGI/-->
<div input [(value)]="destinationPath" placeholder="Give a destination path..." <!-- <br>-->
[validators]="validators" class=""></div> <!-- -->
<div *ngIf="selectedDestination.hasBrowse"> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination storage type:</p>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a <div input type="select" [(value)]="selectedDestination" hint="Select..." [inputClass]="'flat'"
class="uk-text-primary" (click)="browseFolder(selectedDestination.defaultFolder)">browse</a> to [options]="destinationOptions" (valueChange)="folders = {}"></div>
select a folder.</p>
<div *ngIf="folders[selectedDestination.defaultFolder]" class="uk-height-small uk-overflow-auto"> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination system (e.g. hostname:8080):</p>
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders[selectedDestination.defaultFolder], folderPath: selectedDestination.defaultFolder}"></ng-container> <div input [(value)]="destinationUrl" [inputClass]="'flat'"
[validators]="URLValidators" class=""></div>
<ng-container
*ngIf="selectedDestination.authType == 'password' || selectedDestination.authType == 'keys'">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Authentication:</p>
<div class="uk-grid uk-child-width-1-2">
<div input [(value)]="destinationAuthUser" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'username':'access key') " [inputClass]="'flat x-small'"
class=""></div>
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'password':'secret key') " [inputClass]="'flat x-small'"
class=""></div>
</div> </div>
<!-- <div class="uk-text-xsmall">You can check our data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</div>-->
</div>
</ng-container>
<ng-container *ngIf="selectedDestination.id == 'ftp'">
<p>Comming soon!</p>
</ng-container> </ng-container>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination path (e.g. /folder1/folder2):</p>
<div input [(value)]="destinationPath" [inputClass]="'flat'"
[validators]="pathValidators" class=""></div>
<!-- <div *ngIf="selectedDestination.hasBrowse">-->
<p *ngIf="selectedDestination.canBrowse" class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a
[ngClass]="!validateDestinationUrl() ? 'uk-text-muted uk-disabled' : 'uk-text-primary'" [attr.disabled]="!destinationUrl"
(click)="browseFolder('/')">browse</a> to
select a folder.</p>
<div *ngIf="folders['/']" class="uk-height-max-medium uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
</div>
<!-- </div>-->
<ng-container *ngIf="selectedDestination.destination == 'ftp'">
<p>Comming soon!</p>
</ng-container>
<div class="uk-margin-top">
<!-- (ngModelChange)="filterChange(value.selected)"-->
<input type="checkbox" class="uk-checkbox"
[(ngModel)]="privacyAccepted"/>
<span class="uk-margin-small-left uk-text-small">*I have read and accepted the data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</span>
</div>
<div class="uk-align-right uk-margin-medium-top uk-margin-bottom">
<button class="uk-button uk-button-primary"
[disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
[class.uk-disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(click)="transfer()">
>> Transfer
</button>
</div>
</div> </div>
</div> </div>
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted"> <!-- [class.uk-alert-success]="status && status.indexOf('error')==-1"-->
<div> <!-- [class.uk-alert-error]="status && status.indexOf('error')!=-1">-->
<span class="uk-icon uk-spinner"> <div id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert uk-margin-medium-top" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" <div [innerHTML]="message"></div>
data-svg="spinner"><circle <!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg> <!-- Try again!-->
</span> <!-- </a>-->
<div *ngIf="requests > 0" class="uk-flex uk-flex-center uk-text-muted">
<div>
<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>
</span>
</div>
</div> </div>
</div> <a *ngIf="requests <= 0" class="uk-alert-close" uk-close></a>
<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">
</div> </div>
<!-- <div *ngIf="jobId || status == 'canceled'"> <!-- <div *ngIf="jobId || status == 'canceled'">
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button> <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button>
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button> <button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button>
<div>{{statusMessage}}</div> <div>{{statusMessage}}</div>
</div>--> </div>-->
<div *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right " <!-- <div *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right "-->
[class.uk-invisible]="!(status == 'success' || status.indexOf('error')!=-1)"> <!-- [class.uk-invisible]="!(status == 'succeeded' || status.indexOf('error')!=-1)">-->
<button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button> <!-- <button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>-->
</div> <!-- </div>-->
<!-- TESTS --> <!-- TESTS -->
<!-- <button (click)="hasBrowse()" <!-- <button (click)="hasBrowse()"
@ -109,7 +156,7 @@
</button>--> </button>-->
<!-- End of TESTS--> <!-- End of TESTS-->
</div> </div>
</modal-alert> </fs-modal>
<!-- Browse Templates --> <!-- Browse Templates -->
<ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" > <ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" >
@ -117,7 +164,8 @@
<ul *ngIf="folders[folderPath] && folders[folderPath].isOpen" class="uk-list uk-list-divider uk-margin-small-left folder " style="border-left: 1px solid #e3e3e3; padding-left: 5px;"> <ul *ngIf="folders[folderPath] && folders[folderPath].isOpen" class="uk-list uk-list-divider uk-margin-small-left folder " style="border-left: 1px solid #e3e3e3; padding-left: 5px;">
<li *ngFor=" let file of files[folderPath]"> <li *ngFor=" let file of files[folderPath]">
<ng-container *ngIf="file.isFolder else itsFile"> <ng-container *ngIf="file.isFolder else itsFile">
<ng-container *ngTemplateOutlet = "folderListTmpl; context:{ folder: file, folderPath:file.accessUrl.split(selectedDestination.url)[1]}"></ng-container> <ng-container *ngTemplateOutlet = "folderListTmpl; context:{ folder: file,
folderPath:file.accessUrl.split(destinationUrl)[1]}"></ng-container>
</ng-container> </ng-container>
<ng-template #itsFile> <ng-template #itsFile>
<ng-container *ngTemplateOutlet="fileTmpl; context: { file: file}"></ng-container> <ng-container *ngTemplateOutlet="fileTmpl; context: { file: file}"></ng-container>
@ -144,7 +192,7 @@
title="Expand/ Collapse"></span> title="Expand/ Collapse"></span>
<span (click)="destinationPath = folderPath" title="Select folder"> <span (click)="destinationPath = folderPath" title="Select folder">
<span uk-icon="folder"></span> <span <span uk-icon="folder"></span> <span
class="uk-width-expand uk-text-truncate uk-margin-small-left">{{folder.name?folder.name:folder.accessUrl.split(selectedDestination.url)[1]}}</span> class="uk-width-expand uk-text-truncate uk-margin-small-left">{{folder.name?folder.name:folder.accessUrl.split(destinationUrl)[1]}}</span>
<!--<span class="uk-width-auto uk-text-truncate">{{(folder.createdAt?folder.createdAt:folder.modifiedAt) |date : 'medium'}}</span>--> <!--<span class="uk-width-auto uk-text-truncate">{{(folder.createdAt?folder.createdAt:folder.modifiedAt) |date : 'medium'}}</span>-->
</span> </span>
</div> </div>

383
utils/dataTransfer/transferData.component.ts
View File

@ -1,12 +1,15 @@
import {Component, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
import {Subscriber} from "rxjs"; import {interval, Subscriber, Subscription} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http"; import {HttpClient, HttpHeaders} from "@angular/common/http";
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms"; import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
import {Location} from '@angular/common'; import {Location} from '@angular/common';
import {COOKIE} from "../../login/utils/helper.class"; import {COOKIE} from "../../login/utils/helper.class";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {delay, repeat} from "rxjs/operators"; import {delay, repeat, startWith, switchMap} from "rxjs/operators";
import {StringUtils} from "../string-utils.class";
import {HelperFunctions} from "../HelperFunctions.class";
import {FullScreenModalComponent} from "../modal/full-screen-modal/full-screen-modal.component";
declare var UIkit; declare var UIkit;
@Component({ @Component({
@ -33,30 +36,58 @@ declare var UIkit;
}) })
export class EGIDataTransferComponent { export class EGIDataTransferComponent {
subscriptions = []; subscriptions = [];
statusSub: Subscription[] = [];
accessToken = null; accessToken = null;
@Input() dois; @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" loginURL = properties.eoscDataTransferLoginUrl;
sourceUrls = []; sourceUrls = [];
selectedSourceUrl = null; selectedSourceUrl = null;
destinationUrl = "";
destinationAuthUser = "";
destinationAuthPass = "";
destinationPath = ""; destinationPath = "";
destinationOptions = properties.eoscDataTransferDestinations; destinationOptions = null;//properties.eoscDataTransferDestinations.map(dest => {return {"label": dest.destination, "value": dest}});
selectedDestination = null; selectedDestination:{ kind: string, destination: string, description: string, authType: 'token' | 'password' | 'keys',
protocol: string, canBrowse: boolean, transferWith: string} = null;
folders = {}; folders = {};
files = {}; files = {};
requests: number = 0;
downloadElements = null; downloadElements = null;
@Input() isOpen = false; @Input() isOpen = false;
@Input() selectedDestinationId = "dcache"; // @Input() selectedDestinationId = "dcache";
@ViewChild('egiTransferModal') egiTransferModal; @ViewChild('egiTransferModal') egiTransferModal: FullScreenModalComponent;
APIURL = properties.eoscDataTransferAPI; APIURL = properties.eoscDataTransferAPI;
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init"; // status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
status: "unused" | "staging" | "submitted" | "active" | "succeeded" | "partial" | "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init";
// unused("unused"),
// active("active"),
// succeeded("succeeded"),
// failed("failed"),
// canceled("canceled");
message; message;
doiPrefix = properties.doiURL; doiPrefix = properties.doiURL;
validators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/]; pathValidators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/];
// URLValidators = [Validators.required, StringUtils.urlValidator()];
URLValidators = [Validators.required];
jobId = null; jobId = null;
statusMessage = null; statusMessage = null;
jobStatus; jobStatus;
constructor(private http: HttpClient, private location: Location, private _router: Router) {
privacyAccepted: boolean = false;
public hostnameRegex = '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|' +
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|' +
'[a-zA-Z0-9]+\.[^\s]{2,}|' +
'[a-zA-Z0-9]+\.[^\s]{2,}'
constructor(private http: HttpClient, private location: Location, private _router: Router, private cdr: ChangeDetectorRef) {
}
ngOnInit() {
this.URLValidators = [Validators.required, Validators.pattern(this.hostnameRegex)];
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -71,25 +102,37 @@ export class EGIDataTransferComponent {
subscription.unsubscribe(); subscription.unsubscribe();
} }
}); });
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
} }
open(){ open(){
this.accessToken = COOKIE.getCookie("EGIAccessToken"); this.accessToken = COOKIE.getCookie("EGIAccessToken");
if(this.accessToken) { if(this.accessToken) {
if (this.selectedDestinationId) { // if (this.selectedDestinationId) {
for (let option of this.destinationOptions) { // for (let option of this.destinationOptions) {
if (this.selectedDestinationId == option.value.id) { // if (this.selectedDestinationId == option.value.destination) {
this.selectedDestination = option.value; // this.selectedDestination = option.value;
} // }
// }
// } else {
// this.selectedDestination = this.destinationOptions[0].value;
// }
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/storage/types", {headers: headers}).subscribe(
(res: Array<any>) => {
this.destinationOptions = res.map(dest => {return {"label": dest.description, "value": dest}});
this.selectedDestination = res[0];
} }
} else { ));
this.selectedDestination = this.destinationOptions[0].value;
}
for (let doi of this.dois) { for (let doi of this.dois) {
if (doi.indexOf("zenodo.") != -1) {
this.sourceUrls.push(this.doiPrefix + doi); this.sourceUrls.push(this.doiPrefix + doi);
}
} }
try { try {
this.sourceUrls.sort(function (a, b) { this.sourceUrls.sort(function (a, b) {
@ -103,13 +146,15 @@ export class EGIDataTransferComponent {
this.parse(); this.parse();
} }
this.isOpen = true; this.isOpen = true;
this.egiTransferModal.back = true;
this.egiTransferModal.cancelButton = false; this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = true; this.egiTransferModal.okButton = false;
this.egiTransferModal.okButtonText = ">> Transfer"; this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]"; this.egiTransferModal.title = "EOSC Data Transfer [demo]";
this.egiTransferModal.stayOpen = true;
this.init(); this.init();
this.egiTransferModal.open(); if(typeof document !== 'undefined') {
this.egiTransferModal.open();
}
} }
close(){ close(){
if(this.isOpen) { if(this.isOpen) {
@ -125,34 +170,52 @@ export class EGIDataTransferComponent {
} }
init(){ init(){
this.destinationPath = ""; this.destinationPath = "";
this.selectedDestination = this.destinationOptions[0].value; // this.selectedDestination = this.destinationOptions[0].value;
this.selectedSourceUrl = this.sourceUrls[0]; this.selectedSourceUrl = this.sourceUrls[0];
this.message = null; this.message = null;
this.status = "init"; this.status = "init";
this.jobId = null; this.jobId = null;
this.statusMessage = null; // this.statusMessage = null;
this.statusMessage = "primary";
this.requests = 0;
this.folders = {};
this.files = {};
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
} }
checkin(){ checkin(){
window.location.href = this.loginURL+"?redirect="+ encodeURIComponent(window.location.href + (window.location.href.indexOf("&egiTransfer=t")!=-1?"":"&egiTransfer=t")); window.location.href = this.loginURL+"?redirect="+ encodeURIComponent(window.location.href + (window.location.href.indexOf("&egiTransfer=t")!=-1?"":"&egiTransfer=t"));
} }
parse(){ parse(){
this.status = "loading"; this.status = "active";
this.message = null; this.message = null;
this.downloadElements = []; this.downloadElements = [];
this.subscriptions.push(this.http.get(this.APIURL + "/parser?doi=" + encodeURIComponent(this.selectedSourceUrl)).subscribe( let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/parser?doi=" + encodeURIComponent(this.selectedSourceUrl), {headers: headers}).subscribe(
res => { res => {
// res['elements'].forEach(element => {
// if(element.downloadUrl && element.name) {
// this.downloadElements.push(element);
// }
// })
this.downloadElements= res['elements'] this.downloadElements= res['elements']
// console.log(this.downloadElements) // console.log(this.downloadElements)
this.status = "init"; this.status = "init";
}, error => { }, error => {
this.status = "errorParser"; this.status = "errorParser";
this.message = "Couldn't get download URLs from zenodo"; this.message = error.error && error.error.id && error.error.id == 'doiNotSupported'?'DOI not supported.':( error.error && error.error.description && error.error.description? (error.error.description+'.'):'Error parsing information.') ;
UIkit.notification("Couldn't get download URLs from zenodo", { this.statusMessage = "danger";
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
/* UIkit.notification(this.message, {
status: 'error', status: 'error',
timeout: 3000, timeout: 3000,
pos: 'bottom-right' pos: 'bottom-right'
}); });*/
} }
)); ));
@ -161,9 +224,11 @@ export class EGIDataTransferComponent {
transfer() { transfer() {
// console.log(this.selectedDestination) // console.log(this.selectedDestination)
this.status = "loading"; this.status = "active";
this.message = "";
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/user/info?dest="+this.selectedDestination.id, {headers: headers}).subscribe(
this.subscriptions.push(this.http.get(this.APIURL + "/user/info?dest="+this.selectedDestination.destination, {headers: headers}).subscribe(
res => { res => {
// console.log(res) // console.log(res)
let body = { let body = {
@ -177,10 +242,9 @@ export class EGIDataTransferComponent {
// console.log(this.selectedDestination) // console.log(this.selectedDestination)
for (let element of this.downloadElements) { for (let element of this.downloadElements) {
let file = { let file = {
"sources": [element['downloadUrl']], "sources": [element['downloadUrl']],
"destinations": [this.selectedDestination.url + this.destinationPath + element.name], "destinations": [(this.selectedDestination.protocol+"://") + this.destinationUrl + this.destinationPath + (this.destinationPath.endsWith("/") ? "" : "/") + ((element.path && element.path != "/") ? element.path : "") + element.name],
}; };
//TODO priority? checksum? filesize? //TODO priority? checksum? filesize?
@ -189,20 +253,28 @@ export class EGIDataTransferComponent {
} }
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
if(this.selectedDestination.authType != "token" && this.destinationAuthPass.length > 0 && this.destinationAuthUser.length > 0){
headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken,
'Authorization-Storage': btoa(this.destinationAuthUser + ':' + this.destinationAuthPass)});
}
this.subscriptions.push(this.http.post(this.APIURL + "/transfers" ,body, {headers: headers}).subscribe( this.subscriptions.push(this.http.post(this.APIURL + "/transfers" ,body, {headers: headers}).subscribe(
res => { res => {
// console.log(res) // console.log(res)
UIkit.notification('Data transfer has began! ', { // UIkit.notification('Data transfer has began! ', {
status: 'success', // status: 'success',
timeout: 6000, // timeout: 6000,
pos: 'bottom-right' // pos: 'bottom-right'
}); // });
this.jobId = res['jobId']; this.jobId = res['jobId'];
this.status = "success"; this.getStatus();
this.egiTransferModal.okButton = false; this.status = "active";
this.statusMessage = "primary";
// this.egiTransferModal.okButton = false;
this.message = ` this.message = `
<!--div class="uk-text-large uk-margin-bottom">Data transfer has began!</div--> <!--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.`; <div>Transfer of ` + this.downloadElements.length + ` files to `+this.selectedDestination.description+` has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" > /*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
<ul> <ul>
`; `;
@ -219,27 +291,37 @@ export class EGIDataTransferComponent {
this.message += ` this.message += `
</div>` </div>`
// this.getStatus(true)
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
// this.getStatus(true)
}, error => { }, error => {
this.status = "errorTransfer"; this.status = "failed";
this.message = "Couldn't transfer files"; this.message = "Files could not be transfered.";
UIkit.notification("Couldn't transfer files", { this.statusMessage = "danger";
status: 'error', this.cdr.detectChanges();
timeout: 6000, HelperFunctions.scrollToId("transferAlert");
pos: 'bottom-right' // UIkit.notification("Couldn't transfer files", {
}); // status: 'error',
// timeout: 6000,
// pos: 'bottom-right'
// });
} }
)); ));
}, error => { }, error => {
this.status = "errorUser"; this.status = "errorUser";
this.message = "User can't be authenticated!"; this.message = "User cannot be authenticated.";
UIkit.notification("User can't be authenticated!", { this.statusMessage = "danger";
status: 'error', this.cdr.detectChanges();
timeout: 6000, HelperFunctions.scrollToId("transferAlert");
pos: 'bottom-right' // UIkit.notification("User can't be authenticated!", {
}); // status: 'error',
// timeout: 6000,
// pos: 'bottom-right'
// });
} }
)); ));
@ -247,50 +329,131 @@ export class EGIDataTransferComponent {
getStatus(updateTransferMessage:boolean = false){ getStatus(updateTransferMessage:boolean = false){
if(this.jobId){ if(this.jobId){
this.requests = 10;
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
let source = this.http.get(this.APIURL + "/transfer/" +this.jobId , {headers: headers}).pipe(delay(5000)); let source = this.http.get(this.APIURL + "/transfer/" +this.jobId , {headers: headers}).pipe(delay(5000));
this.subscriptions.push(source.pipe(repeat(3)).subscribe(
res => {
this.jobStatus = res;
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" >
<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> `;
}
this.message += `
</ul>
</div>
</div>`*/
this.message += `
</div>`;
console.log(res)
this.statusMessage = res['jobState'] + (res['reason']?(" :" + res['reason']):"");
UIkit.notification('got status! ', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
let source2 = interval(5000) // request status every 5 secs
.pipe(
startWith(2000), // first call after 2 secs
switchMap(() => this.http.get(this.APIURL + "/transfer/" +this.jobId , {headers: headers}))
);
this.statusSub.push(source2.subscribe((res: any) => {
this.requests--;
if(this.status != res.jobState) {
this.status = res.jobState;
this.jobStatus = res;
this.message = `
<!--div class="uk-text-large uk-margin-bottom">Data transfer has began!</div-->
<div>Transfer of ` + this.downloadElements.length + ` files to ` + this.selectedDestination.description + ` has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
<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> `;
}
this.message += `
</ul>
</div>
</div>`*/
this.message += `
</div>`;
this.message += "<div>Transfer status: <b>"+res.jobState+"</b>.</div>";
this.statusMessage = "primary";
//this.statusMessage = res['jobState'] + (res['reason'] ? (" :" + res['reason']) : "");
if(this.status == "partial") {
this.message = "At least one of the selected files was successfully transfered.";
this.statusMessage = "success";
//this.statusSub.unsubscribe();
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
this.requests = 0;
} else if(this.status == "succeeded") {
this.message = "Transfer successfully completed!";
this.statusMessage = "success";
//this.statusSub.unsubscribe();
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
this.requests = 0;
// UIkit.notification('Transfer successfully completed! ', {
// status: 'success',
// timeout: 6000,
// pos: 'bottom-right'
// });
} else if(this.status == "failed") {
this.message = "Transfer failed.";
this.statusMessage = "danger";
//this.statusSub.unsubscribe();
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
this.requests = 0;
// UIkit.notification('Transfer failed', {
// status: 'danger',
// timeout: 6000,
// pos: 'bottom-right'
// });
} else if(this.requests <= 0 || (this.status != "active" && this.status != "submitted" && this.status != "staging")) {
this.message = "Transfer status: <b>"+this.status+"</b>.";
this.statusMessage = "warning";
//this.statusSub.unsubscribe();
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
this.requests = 0;
// UIkit.notification('Transfer completed with status: '+this.status, {
// status: 'warning',
// timeout: 6000,
// pos: 'bottom-right'
// });
}
}
if(this.requests <= 0) {
this.message = "Transfer status: <b>"+this.status+"</b>.";
this.statusMessage = "warning";
//this.statusSub.unsubscribe();
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
}
}, error => { }, error => {
this.status = "errorTransfer"; this.status = "failed";
this.message = "Couldn't get status "; this.message = "Status of the transfer could not be retrieved.";
UIkit.notification("Couldn't get status", { this.statusMessage = "danger";
status: 'error', this.statusSub.forEach(sub => {
timeout: 6000, if(sub instanceof Subscriber) {
pos: 'bottom-right' sub.unsubscribe();
}); }
});
this.requests = 0;
// UIkit.notification("Couldn't get status", {
// status: 'error',
// timeout: 6000,
// pos: 'bottom-right'
// });
} }
)); ));
@ -303,7 +466,6 @@ export class EGIDataTransferComponent {
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.delete(this.APIURL + "/transfer/" +this.jobId , {headers: headers}).subscribe( this.subscriptions.push(this.http.delete(this.APIURL + "/transfer/" +this.jobId , {headers: headers}).subscribe(
res => { res => {
console.log(res);
this.jobStatus = res; this.jobStatus = res;
this.statusMessage = res['jobState'] + (res['reason']?(" :" + res['reason']):""); this.statusMessage = res['jobState'] + (res['reason']?(" :" + res['reason']):"");
this.jobId = null; this.jobId = null;
@ -314,7 +476,7 @@ export class EGIDataTransferComponent {
} }
hasBrowse(){ hasBrowse(){
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/storage/info?dest="+this.selectedDestination.id+"&seUrl="+encodeURIComponent(this.selectedDestination.url + this.destinationPath) , {headers: headers}).subscribe( this.subscriptions.push(this.http.get(this.APIURL + "/storage/info?dest="+this.selectedDestination.destination+"&seUrl="+encodeURIComponent((this.selectedDestination.protocol+'://') + this.destinationUrl + this.destinationPath) , {headers: headers}).subscribe(
res => { res => {
console.log(res); console.log(res);
} }
@ -324,7 +486,7 @@ export class EGIDataTransferComponent {
getFolder(folderPath){ getFolder(folderPath){
//TODO is this necessary? //TODO is this necessary?
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/storage/folder?dest="+this.selectedDestination.id+"&seUrl="+encodeURIComponent(this.selectedDestination.url + folderPath) , {headers: headers}).subscribe( this.subscriptions.push(this.http.get(this.APIURL + "/storage/folder?dest="+this.selectedDestination.destination+"&seUrl="+encodeURIComponent((this.selectedDestination.protocol + '://') + this.destinationUrl + folderPath) , {headers: headers}).subscribe(
res => { res => {
this.folders[folderPath]= res; this.folders[folderPath]= res;
this.folders[folderPath]['isOpen'] = true; this.folders[folderPath]['isOpen'] = true;
@ -339,7 +501,7 @@ export class EGIDataTransferComponent {
} }
this.getFolder(folderPath); this.getFolder(folderPath);
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.get(this.APIURL + "/storage/folder/list?dest="+this.selectedDestination.id+"&folderUrl="+encodeURIComponent(this.selectedDestination.url + folderPath) , {headers: headers}).subscribe( this.subscriptions.push(this.http.get(this.APIURL + "/storage/folder/list?dest="+this.selectedDestination.destination+"&folderUrl="+encodeURIComponent((this.selectedDestination.protocol + '://') + this.destinationUrl + folderPath) , {headers: headers}).subscribe(
res => { res => {
this.files[folderPath]= res['elements']; this.files[folderPath]= res['elements'];
} }
@ -348,8 +510,8 @@ export class EGIDataTransferComponent {
} }
createFolder(){ createFolder(){
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.post(this.APIURL + "/storage/folder?dest="+this.selectedDestination.id+"&seUrl="+ this.subscriptions.push(this.http.post(this.APIURL + "/storage/folder?dest="+this.selectedDestination.destination+"&seUrl="+
encodeURIComponent(this.selectedDestination.url + this.destinationPath + "test1/") , {headers: headers}).subscribe( encodeURIComponent(this.destinationUrl + this.destinationPath + "test1/") , {headers: headers}).subscribe(
res => { res => {
console.log(res); console.log(res);
} }
@ -359,7 +521,7 @@ export class EGIDataTransferComponent {
deleteFolder(){ deleteFolder(){
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.delete(this.APIURL + "/storage/folder?dest="+this.selectedDestination.id+"&seUrl="+encodeURIComponent(this.selectedDestination.url + this.destinationPath + "test1/") , {headers: headers}).subscribe( this.subscriptions.push(this.http.delete(this.APIURL + "/storage/folder?dest="+this.selectedDestination.destination+"&seUrl="+encodeURIComponent(this.destinationUrl + this.destinationPath + "test1/") , {headers: headers}).subscribe(
res => { res => {
console.log(res); console.log(res);
} }
@ -373,14 +535,23 @@ export class EGIDataTransferComponent {
pathValidator(): ValidatorFn { pathValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: string } | null => { return (control: AbstractControl): { [key: string]: string } | null => {
if (!this.validatePath()) { if (!this.validatePath()) {
return {'error': 'Path should start and end with "/" e.g /path/'}; return {'error': 'Path should start with "/"'};
} }
return null; return null;
} }
} }
validatePath():boolean { validatePath():boolean {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g; let exp1 = /^\/([A-z0-9-_+]+\/?)*$/g;
return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null) return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null)
} }
validateDestinationUrl():boolean {
return (this.destinationUrl.length > 0 && new RegExp(this.hostnameRegex).test(this.destinationUrl));
}
// public sourceUrlValidators() {
// this.URLValidators = [];
// this.URLValidators = [Validators.required, Validators.pattern(this.hostnameRegex)];
// }
} }

3
utils/dataTransfer/transferData.module.ts
View File

@ -4,10 +4,11 @@ import {FormsModule} from '@angular/forms';
import {EGIDataTransferComponent} from "./transferData.component"; import {EGIDataTransferComponent} from "./transferData.component";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {AlertModalModule} from "../modal/alertModal.module"; import {AlertModalModule} from "../modal/alertModal.module";
import {FullScreenModalModule} from "../modal/full-screen-modal/full-screen-modal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, InputModule, AlertModalModule CommonModule, FormsModule, InputModule, AlertModalModule, FullScreenModalModule
], ],
declarations: [ declarations: [

7
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -31,12 +31,14 @@ declare var ResizeObserver;
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center"> class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
<h2 class="uk-margin-remove">{{title}}</h2> <h2 class="uk-margin-remove">{{title}}</h2>
</div> </div>
<div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton"> <div class="uk-width-medium@l uk-width-auto uk-flex"
[class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton"
[class.uk-invisible]="okButton || cancelButton">
<button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled" <button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
[class.uk-disabled]="okButtonDisabled" (click)="ok()"> [class.uk-disabled]="okButtonDisabled" (click)="ok()">
{{okButtonText}} {{okButtonText}}
</button> </button>
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()"> <button *ngIf="!okButton && cancelButton" class="uk-close uk-icon" (click)="cancel()">
<icon name="close" ratio="2"></icon> <icon name="close" ratio="2"></icon>
</button> </button>
</div> </div>
@ -58,6 +60,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
@Input() classBody: string = 'uk-container-large'; @Input() classBody: string = 'uk-container-large';
back: boolean = false; back: boolean = false;
title: string; title: string;
cancelButton: boolean = true;
okButton: boolean = false; okButton: boolean = false;
okButtonText = 'OK'; okButtonText = 'OK';
@Input() @Input()

1
utils/properties/env-properties.ts
View File

@ -143,6 +143,7 @@ export interface EnvProperties {
egiNotebookLink?: string; egiNotebookLink?: string;
connectPortalUrl?; connectPortalUrl?;
eoscDataTransferAPI?; eoscDataTransferAPI?;
eoscDataTransferLoginUrl?;
eoscDataTransferDestinations?; eoscDataTransferDestinations?;
hasMachineCache?: boolean; hasMachineCache?: boolean;
} }