This is an automated email from the ASF dual-hosted git repository. dgnatyshyn pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/develop by this push: new affadde [DLAB-1818]: Added uploading limitation, fixed small bugs (#760) affadde is described below commit affadde2b144dce0b6815f145e46bf69ecd78f9d Author: Dmytro Gnatyshyn <42860905+dg1...@users.noreply.github.com> AuthorDate: Tue May 19 18:48:42 2020 +0300 [DLAB-1818]: Added uploading limitation, fixed small bugs (#760) --- .../bucket-browser/bucket-browser.component.ts | 108 +++++++++++++-------- .../bucket-confirmation-dialog.component.html | 13 ++- .../bucket-confirmation-dialog.component.scss | 5 + 3 files changed, 84 insertions(+), 42 deletions(-) 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 07a1fd8..846aeea 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 @@ -90,14 +90,67 @@ export class BucketBrowserComponent implements OnInit { this.folderTreeComponent.showItem(flatItem); } - public async handleFileInput(event) { - if (event.target.files.length > 0) { + public closeUploadWindow() { + this.addedFiles = []; + } + + + public toggleSelectedFile(file, type) { + type === 'file' ? file.isSelected = !file.isSelected : file.isFolderSelected = !file.isFolderSelected; + this.selected = this.folderItems.filter(item => item.isSelected); + this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected); + this.selectedItems = [...this.selected, ...this.selectedFolderForAction]; + this.isActionsOpen = false; + } + + filesPicked(files) { + Array.prototype.forEach.call(files, file => { + this.addedFiles.push(file.webkitRelativePath); + }); + } + + public dissableAll(event) { + this.allDisable = event; + } + + public handleFileInput(event) { + console.log('handleFileInput'); + const fullFilesList = Object['values'](event.target.files); + if (fullFilesList.length > 0) { + console.log('handleFileInputLength'); + const files = fullFilesList.filter(v => v.size < 4294967296); + const toBigFile = fullFilesList.length !== files.length; + const toMany = files.length > 50; + if (files.length > 50) { + files.length = 50; + } + if (toBigFile || toMany) { + this.dialog.open(BucketConfirmationDialogComponent, {data: { + items: {toBig: toBigFile, toMany: toMany}, type: 'uploading-error' + } , width: '550px'}) + .afterClosed().subscribe((res) => { + res && this.uploadingQueue(files); + }); + } else { + this.uploadingQueue(files); + } + } + event.target.value = ''; + setTimeout(() => { + const element = document.querySelector('#upload-list'); + element && element.scrollIntoView({ block: 'end', behavior: 'smooth' }); + }, 0); + } + + private async uploadingQueue(files) { + if (files.length) { let askForAll = true; let skipAll = false; - this.auth.refreshToken().subscribe(); + console.log('uploadingQueue'); + // this.auth.refreshToken().subscribe(); const folderFiles = this.folderItems.filter(v => !v.children).map(v => v.item); - for (const file of Object['values'](event.target.files)) { - const existFile = folderFiles.filter(v => v === file['name'])[0]; + for (const file of files) { + const existFile = folderFiles.filter(v => v === file['name'])[0]; const uploadItem = { name: file['name'], file: file, @@ -120,52 +173,25 @@ export class BucketBrowserComponent implements OnInit { this.addedFiles.push(uploadItem); this.uploadNewFile(uploadItem); } - } + } } - event.target.value = ''; - setTimeout(() => { - const element = document.querySelector('#upload-list'); - element && element.scrollIntoView({ block: 'end', behavior: 'smooth' }); - }, 0); + } async openResolveDialog(existFile) { - const dialog = this.dialog.open(BucketConfirmationDialogComponent, { - data: {items: existFile, type: 'upload-dublicat'} , width: '550px' - }); - return dialog.afterClosed().toPromise().then(result => { - return Promise.resolve(result); + const dialog = this.dialog.open(BucketConfirmationDialogComponent, { + data: {items: existFile, type: 'upload-dublicat'} , width: '550px' }); - } - - public closeUploadWindow() { - this.addedFiles = []; - } - - - public toggleSelectedFile(file, type) { - type === 'file' ? file.isSelected = !file.isSelected : file.isFolderSelected = !file.isFolderSelected; - this.selected = this.folderItems.filter(item => item.isSelected); - this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected); - this.selectedItems = [...this.selected, ...this.selectedFolderForAction]; - this.isActionsOpen = false; - } - - filesPicked(files) { - Array.prototype.forEach.call(files, file => { - this.addedFiles.push(file.webkitRelativePath); + return dialog.afterClosed().toPromise().then(result => { + return Promise.resolve(result); }); } - public dissableAll(event) { - this.allDisable = event; - } - public onFolderClick(event) { this.searchValue = ''; this.clearSelection(); this.selectedFolder = event.flatNode; - if (this.isSelectionOpened){ + if (this.isSelectionOpened) { this.isSelectionOpened = false; } this.folderItems = event.element ? event.element.children : event.children; @@ -223,14 +249,16 @@ export class BucketBrowserComponent implements OnInit { const uploading = this.addedFiles.filter(v => v.status === 'uploading'); if (waitUploading.length && uploading.length < 10) { file.status = 'uploading'; + file.subscr = file.request.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.bucketName, this.data.endpoint); + console.log('upload response'); file.status = 'uploaded'; delete file.request; this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]); + this.bucketDataService.refreshBucketdata(this.bucketName, this.data.endpoint); } }, error => { file.status = 'failed'; diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html index 495b76c..0e33887 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html @@ -24,6 +24,7 @@ <span *ngIf="data.type === 'delete'">Delete</span> <span *ngIf="data.type === 'upload-dublicat'">Resolve conflicts</span> <span *ngIf="data.type === 'cancel-uploading'">Cancel</span> + <span *ngIf="data.type === 'uploading-error'">Upload limitation</span> </h4> <button type="button" class="close" (click)="dialogRef.close()">×</button> </header> @@ -94,11 +95,19 @@ <div *ngIf="data.type === 'cancel-uploading'"> <p class="upload-message"><span>Cancel uploading file </span> <span class="strong ellipsis upload-item-name">{{data.items.name}}.</span></p> <div class="text-center m-top-20"> - <p class="strong">Do you want to proceed?</p> + <span class="strong">Do you want to proceed?</span> + </div> + </div> + + <div *ngIf="data.type === 'uploading-error'"> + <p class="upload-limit-message" *ngIf="data.items.toMany">Only the first fifty objects will be uploaded.</p> + <p class="upload-limit-message" *ngIf="data.items.toBig">Only file(s) within 4 GB will be uploaded.</p> + <div class="text-center m-top-20"> + <span class="strong">Do you want to proceed?</span> </div> </div> - <div class="text-center m-top-20" *ngIf="data.type === 'delete' || data.type === 'cancel-uploading'"> + <div class="text-center m-top-20" *ngIf="data.type === 'delete' || data.type === 'cancel-uploading' || data.type === 'uploading-error'"> <button mat-raised-button type="button" class="butt action" (click)="dialogRef.close()">No</button> <button mat-raised-button type="button" class="butt butt-success action" (click)="dialogRef.close(true)">Yes</button> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss index e705884..4d7ab0c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss @@ -37,6 +37,11 @@ font-weight: 400; margin: 0; margin-bottom: 10px; + &.upload-limit-message{ + text-align: center; + color: red; + font-size: 14px; + } &.info { font-weight: 500; } --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org