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

[Library | data-transfer-v]: transferData.component: Updated input labels, added uk-grid-small for the two columns, destination url changed to destination system and protocol (https:// or s3://) is applied programmatically.

This commit is contained in:
Konstantina Galouni 2023-03-15 10:53:19 +02:00
parent 3e8dce7947
commit 71b5964f2c
2 changed files with 28 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,11 +25,11 @@
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> <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 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 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="DOI URL" hint="Select..." <div input type="select" [(value)]="selectedSourceUrl" hint="Select..."
[options]="sourceUrls" (valueChange)="this.parse()"></div> [options]="sourceUrls" (valueChange)="this.parse()"></div>
<div *ngIf="status!='active'" 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>
@ -52,13 +52,12 @@
<!-- <br>--> <!-- <br>-->
<!-- --> <!-- -->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the
Destination Storage technology:</p> Destination Storage type:</p>
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..." <div input type="select" [(value)]="selectedDestination" hint="Select..."
[options]="destinationOptions" (valueChange)="folders = {}; sourceUrlValidators()"></div> [options]="destinationOptions" (valueChange)="folders = {}"></div>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Specify the destination system (e.g. hostname:8080):</p>
corresponding storage destination url:</p> <div input [(value)]="destinationUrl"
<div input [(value)]="destinationUrl" placeholder="Give a destination url..."
[validators]="URLValidators" class=""></div> [validators]="URLValidators" class=""></div>
<ng-container <ng-container
@ -75,8 +74,8 @@
</div> </div>
</ng-container> </ng-container>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the corresponding storage destination path:</p> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Specify the destination path (e.g. /folder1/folder2):</p>
<div input [(value)]="destinationPath" placeholder="Give a destination path..." <div input [(value)]="destinationPath"
[validators]="pathValidators" class=""></div> [validators]="pathValidators" class=""></div>
<!-- <div *ngIf="selectedDestination.hasBrowse">--> <!-- <div *ngIf="selectedDestination.hasBrowse">-->
<p *ngIf="selectedDestination.canBrowse" class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a <p *ngIf="selectedDestination.canBrowse" class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a

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

@ -67,19 +67,25 @@ export class EGIDataTransferComponent {
message; message;
doiPrefix = properties.doiURL; doiPrefix = properties.doiURL;
pathValidators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/]; pathValidators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/];
URLValidators = [Validators.required, StringUtils.urlValidator()]; // URLValidators = [Validators.required, StringUtils.urlValidator()];
URLValidators = [Validators.required];
jobId = null; jobId = null;
statusMessage = null; statusMessage = null;
jobStatus; jobStatus;
public s3UrlRegex = 's3:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' + 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,}|s3:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' + '[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,}' '[a-zA-Z0-9]+\.[^\s]{2,}'
constructor(private http: HttpClient, private location: Location, private _router: Router, private cdr: ChangeDetectorRef) { constructor(private http: HttpClient, private location: Location, private _router: Router, private cdr: ChangeDetectorRef) {
} }
ngOnInit() {
this.URLValidators = [Validators.required, Validators.pattern(this.hostnameRegex)];
}
ngAfterViewInit() { ngAfterViewInit() {
if(this.isOpen){ if(this.isOpen){
this.open(); this.open();
@ -115,7 +121,6 @@ export class EGIDataTransferComponent {
(res: Array<any>) => { (res: Array<any>) => {
this.destinationOptions = res.map(dest => {return {"label": dest.destination, "value": dest}}); this.destinationOptions = res.map(dest => {return {"label": dest.destination, "value": dest}});
this.selectedDestination = res[0]; this.selectedDestination = res[0];
this.sourceUrlValidators();
} }
)); ));
@ -138,7 +143,7 @@ export class EGIDataTransferComponent {
this.egiTransferModal.cancelButton = false; this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = true; this.egiTransferModal.okButton = true;
this.egiTransferModal.okButtonText = ">> Transfer"; this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]"; this.egiTransferModal.alertTitle = "EOSC data transfer [demo]";
this.egiTransferModal.stayOpen = true; this.egiTransferModal.stayOpen = true;
this.init(); this.init();
if(typeof document !== 'undefined') { if(typeof document !== 'undefined') {
@ -208,6 +213,7 @@ export class EGIDataTransferComponent {
this.status = "active"; this.status = "active";
this.message = ""; 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.destination, {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)
@ -222,10 +228,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.destinationUrl + this.destinationPath + element.name], "destinations": [(this.selectedDestination.destination == "s3" ? "s3://" : "https://") + this.destinationUrl + this.destinationPath + (this.destinationPath.endsWith("/") ? "" : "/") + element.name],
}; };
//TODO priority? checksum? filesize? //TODO priority? checksum? filesize?
@ -468,32 +473,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 "/" e.g /path'};
} }
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 { validateDestinationUrl():boolean {
if(this.selectedDestination.destination == "s3") { return (this.destinationUrl.length > 0 && new RegExp(this.hostnameRegex).test(this.destinationUrl));
return (this.destinationUrl.length > 0 && new RegExp("("+this.s3UrlRegex+")|("+StringUtils.urlRegex+")").test(this.destinationUrl));
}
return (this.destinationUrl.length > 0 && StringUtils.isValidUrl(this.destinationUrl));
} }
public sourceUrlValidators() { // public sourceUrlValidators() {
this.URLValidators = []; // this.URLValidators = [];
if(this.selectedDestination.destination == 's3') { // this.URLValidators = [Validators.required, Validators.pattern(this.hostnameRegex)];
this.URLValidators = [Validators.required, Validators.pattern("("+this.s3UrlRegex+")|("+StringUtils.urlRegex+")")]; // }
// this.URLValidators = [Validators.required, Validators.pattern(this.s3UrlRegex) || StringUtils.urlValidator];
// this.URLValidators = [Validators.required, Validators.pattern(this.s3UrlRegex)];
} else {
this.URLValidators = [Validators.required, StringUtils.urlValidator()];
}
}
} }