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:05 UTC
[incubator-dlab] 01/01: [DLAB-1738]: Add percent progress bar
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