Initial version of data service component
This commit is contained in:
argirok
parent
6259a84df6
commit
2f32fd705b
|
|
@ -0,0 +1,237 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Subscriber} from "rxjs";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {Validators} from "@angular/forms";
|
||||
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'egi-transfer-data',
|
||||
template: `
|
||||
<a (click)="open()" > Transfer data to EGI storage</a>
|
||||
|
||||
|
||||
<!-- This is the modal -->
|
||||
<div id="modal-example" class="uk-modal uk-open " style="display: block" [class.uk-invisible]="!isOpen">
|
||||
<div class="uk-modal-dialog uk-modal-body uk-width-expand">
|
||||
<button class="uk-modal-close-default" type="button" uk-close (click)="close()"></button>
|
||||
<div class="uk-padding">
|
||||
<div *ngIf="!loggedIn" class="">
|
||||
<div class="uk-width-1-1 uk-text-center">
|
||||
<h2 class="uk-modal-title">Title</h2>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
<button *ngIf="!loggedIn" class="uk-button uk-button-default" (click)="checkin()">EGI checkin</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="loggedIn" class="">
|
||||
<div class="uk-width-1-1 uk-text-center">
|
||||
<h2 class="uk-modal-title">Title</h2>
|
||||
</div>
|
||||
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-2 uk-grid-divider">
|
||||
<div class="uk-first-column">
|
||||
<p class="uk-text-meta">Lorem ipsum ....</p>
|
||||
<div input [(value)]="sourceUrl" placeholder="Give a Zenodo DOI url..." type="URL" label="URL" [validators]="validators"></div>
|
||||
<!-- <button *ngIf="!downloadElements" (click)="parse()" class="uk-button uk-button-default uk-margin-top" [class.uk-disabled]="sourceUrl.length == 0">Parse</button>-->
|
||||
</div>
|
||||
<div>
|
||||
<p class="uk-text-meta">Lorem ipsum ....</p>
|
||||
<div input [(value)]="destinationUrl" placeholder="Give a destination path url..." type="URL" label="URL" [validators]="validators"></div>
|
||||
<button (click)="parse()"
|
||||
class="uk-button uk-button-primary uk-margin-top" [class.uk-disabled]="destinationUrl.length == 0 || status == 'success' ||status == 'loading' "> >> Transfer to EGI Storage</button>
|
||||
</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>
|
||||
</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">
|
||||
</div>
|
||||
|
||||
<div 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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
`
|
||||
})
|
||||
export class EGIDataTransfer {
|
||||
subscriptions = [];
|
||||
loggedIn = false;
|
||||
sourceUrl = "https://doi.org/10.5281/zenodo.6507535";
|
||||
destinationUrl = "https://egi.storage.eu/my-path/";
|
||||
downloadElements = null;
|
||||
isOpen = false;
|
||||
APIURL = "https://virtserver.swaggerhub.com/thebe14/eosc-future-data-transfer/1.0.0";
|
||||
status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init" = "init";
|
||||
message;
|
||||
validators = [Validators.required, StringUtils.urlValidator()];
|
||||
constructor(private http: HttpClient) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscriber) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
open(){
|
||||
this.isOpen = true;
|
||||
}
|
||||
close(){
|
||||
this.isOpen = false;
|
||||
this.downloadElements = null;
|
||||
this.destinationUrl = "";
|
||||
this.message = null;
|
||||
this.status = "init";
|
||||
}
|
||||
checkin(){
|
||||
this.loggedIn = true;
|
||||
}
|
||||
parse(){
|
||||
// check get user info
|
||||
// .pipe(catch(error: any) => {
|
||||
// return Observable.throw(new Error(error.status));
|
||||
// }))
|
||||
this.status = "loading";
|
||||
this.subscriptions.push(this.http.get(this.APIURL + "/user/info").subscribe(
|
||||
res => {
|
||||
console.log(res)
|
||||
this.subscriptions.push(this.http.get(this.APIURL + "/parser/zenodo?source=" + this.sourceUrl ).subscribe(
|
||||
res => {
|
||||
console.log(res)
|
||||
this.downloadElements = [];
|
||||
for( let element of res['elements']){
|
||||
//TODO remove
|
||||
element.downloadUrl = "https://zenodo.org/record/6354460/files/preprocessed_data/weights/atlas_EUCP_ICTP_CMIP6_REA_tas_weights.nc?download=1";
|
||||
//TODO can we use element.name instead?
|
||||
element.filename = this.parseFilename(element.downloadUrl);
|
||||
console.log(element.filename)
|
||||
this.downloadElements.push(element)
|
||||
}
|
||||
|
||||
console.log(this.downloadElements)
|
||||
this.transfer();
|
||||
|
||||
}, error => {
|
||||
this.status = "errorParser";
|
||||
this.message = "Couldn't get download URLs from zenodo";
|
||||
UIkit.notification("Couldn't get download URLs from zenodo", {
|
||||
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'
|
||||
});
|
||||
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
transfer() {
|
||||
|
||||
let body = {
|
||||
"files": [],
|
||||
"params": {
|
||||
"priority": 0,
|
||||
"overwrite": true,
|
||||
"retry": 3
|
||||
}
|
||||
};
|
||||
for (let element of this.downloadElements) {
|
||||
|
||||
let file = {
|
||||
"sources": [
|
||||
{
|
||||
"url": element['downloadUrl']
|
||||
}
|
||||
],
|
||||
"destinations": [
|
||||
{
|
||||
"url":this.destinationUrl + element.filename
|
||||
}
|
||||
],
|
||||
"filesize": element['size'],
|
||||
};
|
||||
//TODO priority? checksum?
|
||||
body.files.push(file);
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.subscriptions.push(this.http.post(this.APIURL + "/transfer" ,body ).subscribe(
|
||||
res => {
|
||||
console.log(res)
|
||||
UIkit.notification('Data transfer has began! ', {
|
||||
status: 'success',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
|
||||
this.status = "success"
|
||||
this.message = `
|
||||
<div class="uk-text-large uk-margin-bottom">Data transfer has began!</div>
|
||||
<div>Transfering ` + this.downloadElements.length + ` files:
|
||||
<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> `+ element.filename+ `</li> `;
|
||||
|
||||
}
|
||||
this.message += `
|
||||
</ul>
|
||||
</div>`
|
||||
|
||||
}, error => {
|
||||
this.status = "errorTransfer";
|
||||
this.message = "Couldn't transfer files";
|
||||
UIkit.notification("Couldn't transfer files", {
|
||||
status: 'error',
|
||||
timeout: 6000,
|
||||
pos: 'bottom-right'
|
||||
});
|
||||
|
||||
}
|
||||
));
|
||||
|
||||
}
|
||||
private parseFilename(url){
|
||||
let filename = url.split("/")[url.split("/").length - 1];
|
||||
return filename.split("?")[0];
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue