You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/05/15 11:52:04 UTC
[incubator-dlab] branch DLAB-1789 created (now 5f38255)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1789
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at 5f38255 [DLAB-1738]: Add percent progress bar
This branch includes the following new commits:
new 5f38255 [DLAB-1738]: Add percent progress bar
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org
[incubator-dlab] 01/01: [DLAB-1738]: Add percent progress bar
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1789
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 5f38255e96adf175a15723b3d3988b704d30f0be
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri May 15 14:51:30 2020 +0300
[DLAB-1738]: Add percent progress bar
---
.../services/applicationServiceFacade.service.ts | 4 +--
.../bucket-browser/bucket-browser.component.html | 5 ++--
.../bucket-browser/bucket-browser.component.ts | 32 +++++++++++++++-------
.../webapp/src/app/resources/resources.module.ts | 2 ++
4 files changed, 29 insertions(+), 14 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
index 1fdd39d..a207f97 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
@@ -263,7 +263,7 @@ export class ApplicationServiceFacade {
public buildUploadFileToBucket(data): Observable<any> {
return this.buildRequest(HTTPMethod.POST,
this.requestRegistry.Item(ApplicationServiceFacade.BUCKET) + '/upload',
- data);
+ data, { reportProgress: true, observe: 'events' });
}
public buildDownloadFileFromBucket(data) {
@@ -271,7 +271,7 @@ export class ApplicationServiceFacade {
this.requestRegistry.Item(ApplicationServiceFacade.BUCKET),
data, { dataType : 'binary',
processData : false,
- responseType : 'arraybuffer' } );
+ responseType : 'arraybuffer', reportProgress: true, observe: 'events' } );
}
public buildDeleteFileFromBucket(data): Observable<any> {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index f920928..db12981 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -235,11 +235,12 @@
<div class="upload-path">
<span class="ellipsis" matTooltip="{{file.path}}" matTooltipPosition="above">{{file.path}}</span>
</div>
- <div class="size">{{file.size}}MB</div>
+ <div class="size">{{file.size | convertFileSize}} </div>
<div class="state">
<button mat-raised-button (click)="uploadNewFile(file)" *ngIf="!file.isUploading && !file.uploaded && !file.errorUploading">Upload</button>
- <mat-progress-bar mode="indeterminate" *ngIf="file.isUploading"></mat-progress-bar>
+<!-- <mat-progress-bar mode="indeterminate" *ngIf="file.isUploading"></mat-progress-bar>-->
<span *ngIf="file.uploaded" class="running">Uploaded</span>
+ <span *ngIf="file.isUploading">{{file.progress || 0}}%</span>
<span *ngIf="file.errorUploading" class="error">Failed</span>
</div>
<div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index 03e0c42..0c04ecd 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -29,6 +29,7 @@ import {FileUtils} from '../../core/util';
import {BucketDataService} from './bucket-data.service';
import {BucketConfirmationDialogComponent} from './bucket-confirmation-dialog/bucket-confirmation-dialog.component';
import {logger} from 'codelyzer/util/logger';
+import {HttpEventType, HttpResponse} from '@angular/common/http';
@Component({
selector: 'dlab-bucket-browser',
@@ -98,7 +99,7 @@ export class BucketBrowserComponent implements OnInit {
const uploadItem = {
name: file['name'],
file: file,
- 'size': (file['size'] / 1048576).toFixed(2),
+ size: file.size,
path: this.path,
isUploading: false,
uploaded: false,
@@ -206,10 +207,16 @@ export class BucketBrowserComponent implements OnInit {
formData.append('endpoint', this.endpoint);
file.isUploading = true;
this.bucketBrowserService.uploadFile(formData)
- .subscribe(() => {
- this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
- file.isUploading = false;
- file.uploaded = true;
+ .subscribe((event: any) => {
+ if (event.type === HttpEventType.UploadProgress) {
+ file.progress = Math.round(99 * event.loaded / event.total);
+ } else if (event instanceof HttpResponse) {
+ this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
+ file.isUploading = false;
+ file.uploaded = true;
+ }
+
+
// this.toastr.success('File successfully uploaded!', 'Success!');
}, error => {
// this.toastr.error(error.message || 'File uploading error!', 'Oops!');
@@ -240,15 +247,20 @@ export class BucketBrowserComponent implements OnInit {
public fileAction(action) {
const selected = this.folderItems.filter(item => item.isSelected);
const folderSelected = this.folderItems.filter(item => item.isFolderSelected);
-
if (action === 'download') {
const path = encodeURIComponent(`${this.pathInsideBucket}${this.selected[0].item}`);
selected[0]['isDownloading'] = true;
this.bucketBrowserService.downloadFile(`/${this.bucketName}/object/${path}/endpoint/${this.endpoint}/download`)
- .subscribe(data => {
- FileUtils.downloadBigFiles(data, selected[0].item);
- selected[0]['isDownloading'] = false;
- this.folderItems.forEach(item => item.isSelected = false);
+ .subscribe(event => {
+ if (event['type'] === HttpEventType.DownloadProgress) {
+ console.log(event['loaded']);
+ }
+ if (event['type'] === HttpEventType.Response) {
+ FileUtils.downloadBigFiles(event['body'], selected[0].item);
+ selected[0]['isDownloading'] = false;
+ this.folderItems.forEach(item => item.isSelected = false);
+ }
+
}, error => {
this.toastr.error(error.message || 'File downloading error!', 'Oops!');
selected[0]['isDownloading'] = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
index b20ca72..fa70162 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
@@ -33,6 +33,7 @@ import {MatTreeModule} from '@angular/material/tree';
import {BucketDataService} from './bucket-browser/bucket-data.service';
import {BucketConfirmationDialogComponent} from './bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component';
import {BucketTreeComponent} from './bucket-browser/buckets-tree/bucket-tree.component';
+import {ConvertFileSizePipeModule} from '../core/pipes/convert-file-size';
@NgModule({
imports: [
@@ -43,6 +44,7 @@ import {BucketTreeComponent} from './bucket-browser/buckets-tree/bucket-tree.com
ExploratoryEnvironmentCreateModule,
MaterialModule,
MatTreeModule,
+ ConvertFileSizePipeModule
],
declarations: [
ResourcesComponent,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org