This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1818
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 61ac2ac8d07d7c58867a065b69c40dec0d1b3c1b
Author: Dmytro Gnatyshyn <di1...@ukr.net>
AuthorDate: Tue May 19 18:42:51 2020 +0300
[DLAB-1818]: Added uploading limitation, fixed small bugs
---
.../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
