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 +58 -22
2 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7666b55b6c - Show all commits

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

@ -44,23 +44,49 @@
</div> </div>
<!-- Destination --> <!-- Destination -->
<div class="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> <!-- -->
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..." <div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
[options]="destinationOptions"></div> [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 url:</p>
<div input [(value)]="destinationUrl" placeholder="Give a destination url..."
[validators]="URLValidators" class=""></div>
<ng-container
*ngIf="selectedDestination.auth == 'password' || selectedDestination.auth == 'keys'">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide
authentication if needed:</p>
<div class="uk-grid uk-child-width-1-2">
<div input [(value)]="destinationAuthUser" [placeholder]="'Give ' + (selectedDestination.auth ==
'password'? 'username':'access key') "
class=""></div>
<div input [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.auth ==
'password'? 'password':'secret key') "
class=""></div>
</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> <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..." <div input [(value)]="destinationPath" placeholder="Give a destination path..."
[validators]="validators" class=""></div> [validators]="pathValidators" class=""></div>
<div *ngIf="selectedDestination.hasBrowse"> <!-- <div *ngIf="selectedDestination.hasBrowse">-->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a <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 class="uk-text-primary" (click)="browseFolder('/')">browse</a> to
select a folder.</p> select a folder.</p>
<div *ngIf="folders[selectedDestination.defaultFolder]" class="uk-height-small uk-overflow-auto"> <div *ngIf="folders['/']" class="uk-height-small uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders[selectedDestination.defaultFolder], folderPath: selectedDestination.defaultFolder}"></ng-container> <ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
</div> </div>
</div> <!-- </div>-->
</ng-container>
<ng-container *ngIf="selectedDestination.id == 'ftp'"> <ng-container *ngIf="selectedDestination.id == 'ftp'">
<p>Comming soon!</p> <p>Comming soon!</p>
</ng-container> </ng-container>
@ -117,7 +143,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 +171,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>

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

@ -7,6 +7,7 @@ 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} from "rxjs/operators";
import {StringUtils} from "../string-utils.class";
declare var UIkit; declare var UIkit;
@Component({ @Component({
@ -38,9 +39,12 @@ export class EGIDataTransferComponent {
loginURL = properties.eoscDataTransferLoginUrl; loginURL = properties.eoscDataTransferLoginUrl;
sourceUrls = []; sourceUrls = [];
selectedSourceUrl = null; selectedSourceUrl = null;
destinationUrl = "";
destinationAuthUser = "";
destinationAuthPass = "";
destinationPath = ""; destinationPath = "";
destinationOptions = properties.eoscDataTransferDestinations; destinationOptions = properties.eoscDataTransferDestinations;
selectedDestination = null; selectedDestination:{label :string, id: string, auth: 'token' | 'password' | 'keys'} = null;
folders = {}; folders = {};
files = {}; files = {};
downloadElements = null; downloadElements = null;
@ -51,7 +55,8 @@ export class EGIDataTransferComponent {
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init"; status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" | "canceled" = "init";
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()];
jobId = null; jobId = null;
statusMessage = null; statusMessage = null;
jobStatus; jobStatus;
@ -179,7 +184,7 @@ export class EGIDataTransferComponent {
let file = { let file = {
"sources": [element['downloadUrl']], "sources": [element['downloadUrl']],
"destinations": [this.selectedDestination.url + this.destinationPath + element.name], "destinations": [this.destinationUrl + this.destinationPath + element.name],
}; };
//TODO priority? checksum? filesize? //TODO priority? checksum? filesize?
@ -188,6 +193,10 @@ export class EGIDataTransferComponent {
} }
let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken}); let headers = new HttpHeaders({'Authorization': 'Bearer '+this.accessToken});
if(this.selectedDestination.auth != "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)
@ -201,7 +210,7 @@ export class EGIDataTransferComponent {
this.egiTransferModal.okButton = false; 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.label+` has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" > /*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
<ul> <ul>
`; `;
@ -255,7 +264,7 @@ export class EGIDataTransferComponent {
this.jobStatus = res; this.jobStatus = res;
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.label+` has began.`;
/*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" > /*this.message += ` <div class=" uk-overflow-auto uk-height-xsmall" >
<ul> <ul>
`; `;
@ -313,7 +322,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.id+"&seUrl="+encodeURIComponent(this.destinationUrl + this.destinationPath) , {headers: headers}).subscribe(
res => { res => {
console.log(res); console.log(res);
} }
@ -323,7 +332,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.id+"&seUrl="+encodeURIComponent(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;
@ -338,7 +347,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.id+"&folderUrl="+encodeURIComponent(this.destinationUrl + folderPath) , {headers: headers}).subscribe(
res => { res => {
this.files[folderPath]= res['elements']; this.files[folderPath]= res['elements'];
} }
@ -348,7 +357,7 @@ 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.id+"&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);
} }
@ -358,7 +367,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.id+"&seUrl="+encodeURIComponent(this.destinationUrl + this.destinationPath + "test1/") , {headers: headers}).subscribe(
res => { res => {
console.log(res); console.log(res);
} }