[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

View File

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

View File

@ -67,19 +67,25 @@ export class EGIDataTransferComponent {
message;
doiPrefix = properties.doiURL;
pathValidators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/];
URLValidators = [Validators.required, StringUtils.urlValidator()];
// URLValidators = [Validators.required, StringUtils.urlValidator()];
URLValidators = [Validators.required];
jobId = null;
statusMessage = null;
jobStatus;
public s3UrlRegex = 's3:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|s3:\/\/(?:www\.|(?!www))[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,}|' +
'[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() {
if(this.isOpen){
this.open();
@ -115,7 +121,6 @@ export class EGIDataTransferComponent {
(res: Array<any>) => {
this.destinationOptions = res.map(dest => {return {"label": dest.destination, "value": dest}});
this.selectedDestination = res[0];
this.sourceUrlValidators();
}
));
@ -138,7 +143,7 @@ export class EGIDataTransferComponent {
this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = true;
this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.egiTransferModal.alertTitle = "EOSC data transfer [demo]";
this.egiTransferModal.stayOpen = true;
this.init();
if(typeof document !== 'undefined') {
@ -208,6 +213,7 @@ export class EGIDataTransferComponent {
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.destination, {headers: headers}).subscribe(
res => {
// console.log(res)
@ -222,10 +228,9 @@ export class EGIDataTransferComponent {
// console.log(this.selectedDestination)
for (let element of this.downloadElements) {
let file = {
"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?
@ -468,32 +473,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 "/" e.g /path'};
}
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 {
if(this.selectedDestination.destination == "s3") {
return (this.destinationUrl.length > 0 && new RegExp("("+this.s3UrlRegex+")|("+StringUtils.urlRegex+")").test(this.destinationUrl));
}
return (this.destinationUrl.length > 0 && StringUtils.isValidUrl(this.destinationUrl));
return (this.destinationUrl.length > 0 && new RegExp(this.hostnameRegex).test(this.destinationUrl));
}
public sourceUrlValidators() {
this.URLValidators = [];
if(this.selectedDestination.destination == 's3') {
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()];
}
}
// public sourceUrlValidators() {
// this.URLValidators = [];
// this.URLValidators = [Validators.required, Validators.pattern(this.hostnameRegex)];
// }
}