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 <di1...@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-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org