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

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

@ -9,11 +9,11 @@
<!-- This is the modal -->
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'success'
||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)"
(alertOutput)="transfer()" >
<fs-modal #egiTransferModal classBody="uk-container-xlarge" [okButtonDisabled]="destinationPath.length == 0 || status == 'succeeded'
|| (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(okEmitter)="transfer()" (cancelEmitter)="init()">
<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.
</div>
<div class="uk-text-center">
@ -22,18 +22,18 @@
</div>
</div>
<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
</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 -->
<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>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
<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" hint="Select..." [inputClass]="'flat'"
[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 class="uk-overflow-auto" style="max-height: 135px">
<div class="uk-margin-small-top uk-height-max-medium uk-overflow-auto">
<ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li>
@ -43,53 +43,100 @@
</div>
</div>
<!-- Destination -->
<div 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..."
[options]="destinationOptions"></div>
<ng-container *ngIf="selectedDestination.id == 'dcache'">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the corresponding storage destination path:</p>
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
[validators]="validators" class=""></div>
<div *ngIf="selectedDestination.hasBrowse">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a
class="uk-text-primary" (click)="browseFolder(selectedDestination.defaultFolder)">browse</a> to
select a folder.</p>
<div *ngIf="folders[selectedDestination.defaultFolder]" class="uk-height-small uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders[selectedDestination.defaultFolder], folderPath: selectedDestination.defaultFolder}"></ng-container>
<div *ngIf="destinationOptions" class="destination">
<!-- -->
<!-- Testing:<br>-->
<!-- https://dcache-demo.desy.de:2443-->
<!-- <br>-->
<!-- /Demonstrators/EOSC-Future/EGI/-->
<!-- <br>-->
<!-- -->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination storage type:</p>
<div input type="select" [(value)]="selectedDestination" hint="Select..." [inputClass]="'flat'"
[options]="destinationOptions" (valueChange)="folders = {}"></div>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Destination system (e.g. hostname:8080):</p>
<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>
</ng-container>
<ng-container *ngIf="selectedDestination.id == 'ftp'">
<p>Comming soon!</p>
<!-- <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>-->
</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 *ngIf="status == 'loading'" 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>
<!-- [class.uk-alert-success]="status && status.indexOf('error')==-1"-->
<!-- [class.uk-alert-error]="status && status.indexOf('error')!=-1">-->
<div id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert uk-margin-medium-top" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
<div [innerHTML]="message"></div>
<!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
<!-- Try again!-->
<!-- </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 *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">
<a *ngIf="requests <= 0" class="uk-alert-close" uk-close></a>
</div>
<!-- <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)="cancel()">Cancel</button>
<div>{{statusMessage}}</div>
</div>-->
<div *ngIf=" status != 'canceled'" 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 *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right "-->
<!-- [class.uk-invisible]="!(status == 'succeeded' || status.indexOf('error')!=-1)">-->
<!-- <button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>-->
<!-- </div>-->
<!-- TESTS -->
<!-- <button (click)="hasBrowse()"
@ -109,7 +156,7 @@
</button>-->
<!-- End of TESTS-->
</div>
</modal-alert>
</fs-modal>
<!-- Browse Templates -->
<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;">
<li *ngFor=" let file of files[folderPath]">
<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-template #itsFile>
<ng-container *ngTemplateOutlet="fileTmpl; context: { file: file}"></ng-container>
@ -144,7 +192,7 @@
title="Expand/ Collapse"></span>
<span (click)="destinationPath = folderPath" title="Select folder">
<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>
</div>

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

@ -1,12 +1,15 @@
import {Component, Input, ViewChild} from '@angular/core';
import {Subscriber} from "rxjs";
import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
import {interval, Subscriber, Subscription} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {AbstractControl, ValidatorFn, Validators} from "@angular/forms";
import {Location} from '@angular/common';
import {COOKIE} from "../../login/utils/helper.class";
import {Router} from "@angular/router";
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;
@Component({
@ -33,30 +36,58 @@ declare var UIkit;
})
export class EGIDataTransferComponent {
subscriptions = [];
statusSub: Subscription[] = [];
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"
loginURL = properties.eoscDataTransferLoginUrl;
sourceUrls = [];
selectedSourceUrl = null;
destinationUrl = "";
destinationAuthUser = "";
destinationAuthPass = "";
destinationPath = "";
destinationOptions = properties.eoscDataTransferDestinations;
selectedDestination = null;
destinationOptions = null;//properties.eoscDataTransferDestinations.map(dest => {return {"label": dest.destination, "value": dest}});
selectedDestination:{ kind: string, destination: string, description: string, authType: 'token' | 'password' | 'keys',
protocol: string, canBrowse: boolean, transferWith: string} = null;
folders = {};
files = {};
requests: number = 0;
downloadElements = null;
@Input() isOpen = false;
@Input() selectedDestinationId = "dcache";
@ViewChild('egiTransferModal') egiTransferModal;
// @Input() selectedDestinationId = "dcache";
@ViewChild('egiTransferModal') egiTransferModal: FullScreenModalComponent;
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;
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;
statusMessage = null;
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() {
@ -71,25 +102,37 @@ export class EGIDataTransferComponent {
subscription.unsubscribe();
}
});
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
sub.unsubscribe();
}
});
}
open(){
this.accessToken = COOKIE.getCookie("EGIAccessToken");
if(this.accessToken) {
if (this.selectedDestinationId) {
for (let option of this.destinationOptions) {
if (this.selectedDestinationId == option.value.id) {
this.selectedDestination = option.value;
}
// if (this.selectedDestinationId) {
// for (let option of this.destinationOptions) {
// if (this.selectedDestinationId == option.value.destination) {
// 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) {
if (doi.indexOf("zenodo.") != -1) {
this.sourceUrls.push(this.doiPrefix + doi);
}
}
try {
this.sourceUrls.sort(function (a, b) {
@ -103,13 +146,15 @@ export class EGIDataTransferComponent {
this.parse();
}
this.isOpen = true;
this.egiTransferModal.back = true;
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = true;
this.egiTransferModal.okButton = false;
this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.egiTransferModal.stayOpen = true;
this.egiTransferModal.title = "EOSC Data Transfer [demo]";
this.init();
this.egiTransferModal.open();
if(typeof document !== 'undefined') {
this.egiTransferModal.open();
}
}
close(){
if(this.isOpen) {
@ -125,34 +170,52 @@ export class EGIDataTransferComponent {
}
init(){
this.destinationPath = "";
this.selectedDestination = this.destinationOptions[0].value;
// this.selectedDestination = this.destinationOptions[0].value;
this.selectedSourceUrl = this.sourceUrls[0];
this.message = null;
this.status = "init";
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(){
window.location.href = this.loginURL+"?redirect="+ encodeURIComponent(window.location.href + (window.location.href.indexOf("&egiTransfer=t")!=-1?"":"&egiTransfer=t"));
}
parse(){
this.status = "loading";
this.status = "active";
this.message = null;
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['elements'].forEach(element => {
// if(element.downloadUrl && element.name) {
// this.downloadElements.push(element);
// }
// })
this.downloadElements= res['elements']
// console.log(this.downloadElements)
this.status = "init";
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", {
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.') ;
this.statusMessage = "danger";
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
/* UIkit.notification(this.message, {
status: 'error',
timeout: 3000,
pos: 'bottom-right'
});
});*/
}
));
@ -161,9 +224,11 @@ export class EGIDataTransferComponent {
transfer() {
// console.log(this.selectedDestination)
this.status = "loading";
this.status = "active";
this.message = "";
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 => {
// console.log(res)
let body = {
@ -177,10 +242,9 @@ export class EGIDataTransferComponent {
// console.log(this.selectedDestination)
for (let element of this.downloadElements) {
let file = {
"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?
@ -189,20 +253,28 @@ export class EGIDataTransferComponent {
}
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(
res => {
// console.log(res)
UIkit.notification('Data transfer has began! ', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
// UIkit.notification('Data transfer has began! ', {
// status: 'success',
// timeout: 6000,
// pos: 'bottom-right'
// });
this.jobId = res['jobId'];
this.status = "success";
this.egiTransferModal.okButton = false;
this.getStatus();
this.status = "active";
this.statusMessage = "primary";
// this.egiTransferModal.okButton = false;
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.`;
<div>Transfer of ` + this.downloadElements.length + ` files to `+this.selectedDestination.description+` has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
<ul>
`;
@ -219,27 +291,37 @@ export class EGIDataTransferComponent {
this.message += `
</div>`
// this.getStatus(true)
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
// this.getStatus(true)
}, error => {
this.status = "errorTransfer";
this.message = "Couldn't transfer files";
UIkit.notification("Couldn't transfer files", {
status: 'error',
timeout: 6000,
pos: 'bottom-right'
});
this.status = "failed";
this.message = "Files could not be transfered.";
this.statusMessage = "danger";
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
// 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'
});
this.message = "User cannot be authenticated.";
this.statusMessage = "danger";
this.cdr.detectChanges();
HelperFunctions.scrollToId("transferAlert");
// 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){
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 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 => {
this.status = "errorTransfer";
this.message = "Couldn't get status ";
UIkit.notification("Couldn't get status", {
status: 'error',
timeout: 6000,
pos: 'bottom-right'
});
this.status = "failed";
this.message = "Status of the transfer could not be retrieved.";
this.statusMessage = "danger";
this.statusSub.forEach(sub => {
if(sub instanceof Subscriber) {
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});
this.subscriptions.push(this.http.delete(this.APIURL + "/transfer/" +this.jobId , {headers: headers}).subscribe(
res => {
console.log(res);
this.jobStatus = res;
this.statusMessage = res['jobState'] + (res['reason']?(" :" + res['reason']):"");
this.jobId = null;
@ -314,7 +476,7 @@ export class EGIDataTransferComponent {
}
hasBrowse(){
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 => {
console.log(res);
}
@ -324,7 +486,7 @@ export class EGIDataTransferComponent {
getFolder(folderPath){
//TODO is this necessary?
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 => {
this.folders[folderPath]= res;
this.folders[folderPath]['isOpen'] = true;
@ -339,7 +501,7 @@ export class EGIDataTransferComponent {
}
this.getFolder(folderPath);
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 => {
this.files[folderPath]= res['elements'];
}
@ -348,8 +510,8 @@ export class EGIDataTransferComponent {
}
createFolder(){
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
this.subscriptions.push(this.http.post(this.APIURL + "/storage/folder?dest="+this.selectedDestination.id+"&seUrl="+
encodeURIComponent(this.selectedDestination.url + this.destinationPath + "test1/") , {headers: headers}).subscribe(
this.subscriptions.push(this.http.post(this.APIURL + "/storage/folder?dest="+this.selectedDestination.destination+"&seUrl="+
encodeURIComponent(this.destinationUrl + this.destinationPath + "test1/") , {headers: headers}).subscribe(
res => {
console.log(res);
}
@ -359,7 +521,7 @@ export class EGIDataTransferComponent {
deleteFolder(){
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 => {
console.log(res);
}
@ -373,14 +535,23 @@ export class EGIDataTransferComponent {
pathValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: string } | null => {
if (!this.validatePath()) {
return {'error': 'Path should start and end with "/" e.g /path/'};
return {'error': 'Path should start with "/"'};
}
return null;
}
}
validatePath():boolean {
let exp1 = /^\/([A-z0-9-_+]+\/)*$/g;
let exp1 = /^\/([A-z0-9-_+]+\/?)*$/g;
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 {InputModule} from "../../sharedComponents/input/input.module";
import {AlertModalModule} from "../modal/alertModal.module";
import {FullScreenModalModule} from "../modal/full-screen-modal/full-screen-modal.module";
@NgModule({
imports: [
CommonModule, FormsModule, InputModule, AlertModalModule
CommonModule, FormsModule, InputModule, AlertModalModule, FullScreenModalModule
],
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">
<h2 class="uk-margin-remove">{{title}}</h2>
</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"
[class.uk-disabled]="okButtonDisabled" (click)="ok()">
{{okButtonText}}
</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>
</button>
</div>
@ -58,6 +60,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
@Input() classBody: string = 'uk-container-large';
back: boolean = false;
title: string;
cancelButton: boolean = true;
okButton: boolean = false;
okButtonText = 'OK';
@Input()

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

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