data-transfer-v2 #6
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
|
||||
<!-- This is the modal -->
|
||||
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'success'
|
||||
||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)"
|
||||
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'succeeded'
|
||||
||status == 'active' || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
|
||||
(alertOutput)="transfer()" >
|
||||
<div *ngIf="!accessToken" class="">
|
||||
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<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..."
|
||||
[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">
|
||||
<ul>
|
||||
|
|
@ -45,16 +45,16 @@
|
|||
<!-- Destination -->
|
||||
<div *ngIf="destinationOptions" class="destination">
|
||||
<!-- -->
|
||||
Testing:<br>
|
||||
https://dcache-demo.desy.de:2443
|
||||
<br>
|
||||
/Demonstrators/EOSC-Future/EGI/
|
||||
<br>
|
||||
<!-- 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">Please select the
|
||||
Destination Storage technology:</p>
|
||||
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
|
||||
[options]="destinationOptions"></div>
|
||||
[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>
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<div input [(value)]="destinationAuthUser" [placeholder]="'Give ' + (selectedDestination.authType ==
|
||||
'password'? 'username':'access key') "
|
||||
class=""></div>
|
||||
<div input [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
|
||||
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
|
||||
'password'? 'password':'secret key') "
|
||||
class=""></div>
|
||||
</div>
|
||||
|
|
@ -79,8 +79,9 @@
|
|||
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
|
||||
[validators]="pathValidators" 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('/')">browse</a> to
|
||||
<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-small uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
|
||||
|
|
@ -93,29 +94,33 @@
|
|||
|
||||
</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" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
|
||||
<div [innerHTML]="message"></div>
|
||||
<!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
|
||||
<!-- Try again!-->
|
||||
<!-- </a>-->
|
||||
<div *ngIf="status == 'active'" 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="status != 'active'" 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()"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
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";
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
|
|
@ -34,6 +35,7 @@ declare var UIkit;
|
|||
})
|
||||
export class EGIDataTransferComponent {
|
||||
subscriptions = [];
|
||||
statusSub: Subscription = null;
|
||||
accessToken = null;
|
||||
@Input() dois;
|
||||
loginURL = properties.eoscDataTransferLoginUrl;
|
||||
|
|
@ -53,7 +55,15 @@ export class EGIDataTransferComponent {
|
|||
// @Input() selectedDestinationId = "dcache";
|
||||
@ViewChild('egiTransferModal') egiTransferModal;
|
||||
APIURL = properties.eoscDataTransferAPI;
|
||||
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
|
||||
// status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
|
||||
status: "unused" | "active" | "succeeded" | "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init";
|
||||
|
||||
// unused("unused"),
|
||||
// active("active"),
|
||||
// succeeded("succeeded"),
|
||||
// failed("failed"),
|
||||
// canceled("canceled");
|
||||
|
||||
message;
|
||||
doiPrefix = properties.doiURL;
|
||||
pathValidators = [Validators.required, this.pathValidator() /*StringUtils.urlValidator()*/];
|
||||
|
|
@ -61,7 +71,7 @@ export class EGIDataTransferComponent {
|
|||
jobId = null;
|
||||
statusMessage = null;
|
||||
jobStatus;
|
||||
constructor(private http: HttpClient, private location: Location, private _router: Router) {
|
||||
constructor(private http: HttpClient, private location: Location, private _router: Router, private cdr: ChangeDetectorRef) {
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -77,6 +87,9 @@ export class EGIDataTransferComponent {
|
|||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
if(this.statusSub && this.statusSub instanceof Subscriber) {
|
||||
this.statusSub.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
open(){
|
||||
|
|
@ -143,25 +156,32 @@ export class EGIDataTransferComponent {
|
|||
this.message = null;
|
||||
this.status = "init";
|
||||
this.jobId = null;
|
||||
this.statusMessage = null;
|
||||
// this.statusMessage = null;
|
||||
this.statusMessage = "primary";
|
||||
}
|
||||
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 = [];
|
||||
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 = 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.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";
|
||||
/* UIkit.notification(this.message, {
|
||||
status: 'error',
|
||||
timeout: 3000,
|
||||
|
|
@ -175,7 +195,8 @@ 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.destination, {headers: headers}).subscribe(
|
||||
res => {
|
||||
|
|
@ -210,14 +231,18 @@ export class EGIDataTransferComponent {
|
|||
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 `+this.selectedDestination.description+` has began.`;
|
||||
|
|
@ -237,27 +262,33 @@ 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";
|
||||
// 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";
|
||||
// UIkit.notification("User can't be authenticated!", {
|
||||
// status: 'error',
|
||||
// timeout: 6000,
|
||||
// pos: 'bottom-right'
|
||||
// });
|
||||
|
||||
}
|
||||
));
|
||||
|
|
@ -269,49 +300,82 @@ export class EGIDataTransferComponent {
|
|||
|
||||
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 ` + 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>`;
|
||||
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.subscriptions.push(source.pipe(repeat(3)).subscribe(
|
||||
this.statusSub = source2.subscribe(
|
||||
(res: any) => {
|
||||
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.statusMessage = "primary";
|
||||
this.statusMessage = res['jobState'] + (res['reason'] ? (" :" + res['reason']) : "");
|
||||
if(this.status == "succeeded") {
|
||||
this.message = "Transfer successfully completed!";
|
||||
this.statusMessage = "success";
|
||||
this.statusSub.unsubscribe();
|
||||
// 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();
|
||||
// UIkit.notification('Transfer failed', {
|
||||
// status: 'danger',
|
||||
// timeout: 6000,
|
||||
// pos: 'bottom-right'
|
||||
// });
|
||||
} else if(this.status != "active") {
|
||||
this.message = "Transfer completed with status: <b>"+this.status+"</b>.";
|
||||
this.statusMessage = "warning";
|
||||
this.statusSub.unsubscribe();
|
||||
// UIkit.notification('Transfer completed with status: '+this.status, {
|
||||
// status: 'warning',
|
||||
// timeout: 6000,
|
||||
// pos: 'bottom-right'
|
||||
// });
|
||||
}
|
||||
}
|
||||
}, 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.unsubscribe();
|
||||
// UIkit.notification("Couldn't get status", {
|
||||
// status: 'error',
|
||||
// timeout: 6000,
|
||||
// pos: 'bottom-right'
|
||||
// });
|
||||
|
||||
}
|
||||
));
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -321,7 +385,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;
|
||||
|
|
@ -401,4 +464,8 @@ export class EGIDataTransferComponent {
|
|||
return (this.destinationPath.length > 0 && this.destinationPath.match(exp1) != null)
|
||||
|
||||
}
|
||||
|
||||
validateDestinationUrl():boolean {
|
||||
return (this.destinationUrl.length > 0 && StringUtils.isValidUrl(this.destinationUrl));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue