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 15:36:14 UTC
[incubator-dlab] branch DLAB-1789 updated: [DLAB-1738]: Created
uploading queue, fixed bugs
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
The following commit(s) were added to refs/heads/DLAB-1789 by this push:
new 9b0444b [DLAB-1738]: Created uploading queue, fixed bugs
9b0444b is described below
commit 9b0444ba1c95723190b3982cb2d91e47a93b59dc
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri May 15 18:35:39 2020 +0300
[DLAB-1738]: Created uploading queue, fixed bugs
---
.../convert-file-size/convert-file-size.pipe.ts} | 48 +++++++-------------
.../convert-file-size/index.ts} | 40 ++++-------------
.../src/app/core/services/appRouting.service.ts | 1 -
.../src/app/reporting/reporting.component.ts | 1 -
.../bucket-browser/bucket-browser.component.html | 23 +++++++---
.../bucket-browser/bucket-browser.component.scss | 30 +++----------
.../bucket-browser/bucket-browser.component.ts | 52 +++++++++++++---------
.../folder-tree/folder-tree.component.ts | 5 ++-
.../resources-grid/resources-grid.component.ts | 3 +-
.../src/app/resources/resources.component.ts | 1 -
.../webapp/src/assets/styles/_dialogs.scss | 27 +++++++++++
11 files changed, 109 insertions(+), 122 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/convert-file-size.pipe.ts
similarity index 51%
copy from services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/convert-file-size.pipe.ts
index 0f05bcb..c316c0e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/convert-file-size.pipe.ts
@@ -17,36 +17,20 @@
* under the License.
*/
-import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Injectable()
-export class AppRoutingService {
- constructor(private router: Router) { }
-
- redirectToLoginPage(): void {
- if (this.router.url !== '/login')
- this.router.navigate(['/login']);
- }
-
- redirectToNoAccessPage(): void {
- this.router.navigate(['/403']);
- }
-
- redirectToHomePage(): void {
- console.log('redirect');
- this.router.navigate(['/resources_list']);
- }
-
- redirectToHealthStatusPage(): void {
- this.router.navigate(['/environment_management']);
- }
-
- redirectToAzure(): void {
- window.location.href = `${window.location.origin}/api/user/azure/init`;
- }
-
- redirectToUrl(url: string): void {
- window.location.href = url;
- }
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'convertFileSize' })
+
+export class ConvertFileSizePipe implements PipeTransform {
+ transform(bytes: number): any {
+ const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+ for (let i = 0; i < sizes.length; i++) {
+ if (bytes <= 1024) {
+ return bytes + ' ' + sizes[i];
+ } else {
+ bytes = Math.round(bytes / 1024);
+ }
+ }
+ return bytes;
+ }
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/index.ts
similarity index 51%
copy from services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/index.ts
index 0f05bcb..2080443 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/convert-file-size/index.ts
@@ -17,36 +17,14 @@
* under the License.
*/
-import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConvertFileSizePipe } from './convert-file-size.pipe';
-@Injectable()
-export class AppRoutingService {
- constructor(private router: Router) { }
+@NgModule({
+ imports: [CommonModule],
+ declarations: [ConvertFileSizePipe],
+ exports: [ConvertFileSizePipe]
+})
- redirectToLoginPage(): void {
- if (this.router.url !== '/login')
- this.router.navigate(['/login']);
- }
-
- redirectToNoAccessPage(): void {
- this.router.navigate(['/403']);
- }
-
- redirectToHomePage(): void {
- console.log('redirect');
- this.router.navigate(['/resources_list']);
- }
-
- redirectToHealthStatusPage(): void {
- this.router.navigate(['/environment_management']);
- }
-
- redirectToAzure(): void {
- window.location.href = `${window.location.origin}/api/user/azure/init`;
- }
-
- redirectToUrl(url: string): void {
- window.location.href = url;
- }
-}
+export class ConvertFileSizePipeModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts b/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
index 0f05bcb..1a80759 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/services/appRouting.service.ts
@@ -34,7 +34,6 @@ export class AppRoutingService {
}
redirectToHomePage(): void {
- console.log('redirect');
this.router.navigate(['/resources_list']);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
index 03f7ca9..1692ef1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reporting/reporting.component.ts
@@ -156,7 +156,6 @@ export class ReportingComponent implements OnInit, OnDestroy {
types.push(item['resource_type']);
if (item.shape && types.indexOf(item.shape)) {
- console.log(item);
if (item.shape.indexOf('Master') > -1) {
for (let shape of item.shape.split(/(?=Slave)/g)) {
shape = shape.replace('Master: ', '');
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 db12981..a994bf9 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
@@ -192,10 +192,14 @@
{{file.item}}
</span>
</div>
- <div class="size">{{file.object?.size}}</div>
+ <div class="size">{{file.object?.size | convertFileSize}}</div>
<div class="date" *ngIf="!file.isDownloading">{{file.object?.lastModifiedDate }}</div>
<div class="progress-wrapper" *ngIf="file.isDownloading">
- <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+ <div class="progres">
+ <span class="progress-bar-text">{{file.progress || 0}}% Downloading...</span>
+ <div class="bar" [ngStyle]="{width: file.progress + '%'}">
+ </div>
+ </div>
</div>
</div>
</li>
@@ -237,11 +241,16 @@
</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>-->
- <span *ngIf="file.uploaded" class="running">Uploaded</span>
- <span *ngIf="file.isUploading">{{file.progress || 0}}%</span>
- <span *ngIf="file.errorUploading" class="error">Failed</span>
+<!-- <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>
+ <span *ngIf="file.status === 'uploaded'" class="running">Uploaded</span>
+ <div class="progres" *ngIf="file.status === 'uploading'">
+ <span class="progress-bar-text">{{file.progress || 0}}% Uploading...</span>
+ <div class="bar" [ngStyle]="{width: file.progress + '%'}">
+ </div>
+ </div>
+ <span *ngIf="file.status === 'failed'" class="error">Failed</span>
+ <span *ngIf="file.status === 'waiting'" class="stopped">Waiting for uploading...</span>
</div>
<div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
</li>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index 21f3d04..76b5555 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -27,14 +27,15 @@
.loading-block{
width: 80%;
- margin: 20% auto 0 auto;
+ margin: 0 auto;
display: flex;
- align-content: center;
+ align-items: center;
justify-content: center;
height: 100%;
.uploading{
width: 100%;
text-align: center;
+ padding-bottom: 50px;
p{
margin-bottom: 20px;
}
@@ -342,26 +343,6 @@
.progress-wrapper{
flex:1;
-
- .progres{
- border: 1px solid rgba(0,0,0,.12);
- height: 15px;
- position: relative;
-
- .bar{
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- width: 0;
- background-color: #00bcd4;
-
- &.full{
- width: 100%;
- transition: 5s ease-in-out;
- }
- }
- }
}
.material-icons.close{
@@ -625,12 +606,11 @@ input[type='file'] {
}
.size{
- flex:4;
+ flex:2;
}
.state{
- flex:6;
+ flex:4;
display: flex;
- justify-content: center;
align-items: center;
.mat-raised-button{
width: 60px;
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 0c04ecd..78acb30 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
@@ -150,7 +150,6 @@ export class BucketBrowserComponent implements OnInit {
this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
this.selectedItems = [...this.selected, ...this.selectedFolderForAction];
this.isActionsOpen = false;
-
}
filesPicked(files) {
@@ -176,7 +175,6 @@ export class BucketBrowserComponent implements OnInit {
this.path = event.path;
this.originFolderItems = this.folderItems.map(v => v);
this.pathInsideBucket = this.path.indexOf('/') !== -1 ? this.path.slice(this.path.indexOf('/') + 1) + '/' : '';
- // this.bucketName = this.path.substring(0, this.path.indexOf('/')) || this.path;
this.folderItems.forEach(item => item.isSelected = false);
}
}
@@ -205,25 +203,33 @@ export class BucketBrowserComponent implements OnInit {
formData.append('object', fullPath);
formData.append('bucket', this.bucketName);
formData.append('endpoint', this.endpoint);
- file.isUploading = true;
- this.bucketBrowserService.uploadFile(formData)
- .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;
- }
+ file.status = 'waiting';
+ file.request = this.bucketBrowserService.uploadFile(formData);
+ this.sendFile(file);
+ }
+ public sendFile(file) {
+ const waitUploading = this.addedFiles.filter(v => v.status === 'waiting');
+ const uploading = this.addedFiles.filter(v => v.status === 'uploading');
+ if (waitUploading.length && uploading.length < 11) {
+ file.status = 'uploading';
+ 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);
+ file.status = 'uploaded';
+ delete file.request;
+ this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
+ }
+ }, error => {
+ file.status = 'failed';
+ delete file.request;
+ this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
+ }
+ );
+ }
- // this.toastr.success('File successfully uploaded!', 'Success!');
- }, error => {
- // this.toastr.error(error.message || 'File uploading error!', 'Oops!');
- file.errorUploading = true;
- file.isUploading = false;
- }
- );
}
public refreshBucket() {
@@ -253,11 +259,15 @@ export class BucketBrowserComponent implements OnInit {
this.bucketBrowserService.downloadFile(`/${this.bucketName}/object/${path}/endpoint/${this.endpoint}/download`)
.subscribe(event => {
if (event['type'] === HttpEventType.DownloadProgress) {
- console.log(event['loaded']);
+ selected[0].progress = Math.round(100 * event['loaded'] / selected[0].object.size);
}
if (event['type'] === HttpEventType.Response) {
FileUtils.downloadBigFiles(event['body'], selected[0].item);
- selected[0]['isDownloading'] = false;
+ setTimeout(() => {
+ selected[0]['isDownloading'] = false;
+ selected[0].progress = 0;
+ }, 1000);
+
this.folderItems.forEach(item => item.isSelected = false);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index c600d54..5c4021d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -9,6 +9,7 @@ import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/form
import {ErrorStateMatcher} from '@angular/material/core';
import {PATTERNS} from '../../../core/util';
import {ToastrService} from 'ngx-toastr';
+import {HttpEventType, HttpResponse} from '@angular/common/http';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -256,13 +257,15 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
formData.append('bucket', bucket);
formData.append('endpoint', this.endpoint);
this.bucketBrowserService.uploadFile(formData)
- .subscribe(() => {
+ .subscribe((event) => {
+ if (event instanceof HttpResponse) {
this.bucketDataService.refreshBucketdata(bucket, this.endpoint);
this.toastr.success('Folder successfully created!', 'Success!');
this.resetForm();
this.folderFormControl.updateValueAndValidity();
this.folderFormControl.markAsPristine();
this.folderCreating = false;
+ }
}, error => {
this.toastr.error(error.message || 'Folder creation error!', 'Oops!');
this.folderCreating = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index 2a2c49f..95ca609 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -341,7 +341,7 @@ export class ResourcesGridComponent implements OnInit {
const edgeItem = {name: `${project.project}(${key})`, children: []};
const projectBucket = currEndpoint[this.DICTIONARY[provider.toLowerCase()].bucket_name];
const sharedBucket = currEndpoint[this.DICTIONARY[provider.toLowerCase()].shared_bucket_name];
- if (projectBucket) {
+ if (projectBucket && currEndpoint.status !== 'terminated' && currEndpoint.status !== 'terminating' && currEndpoint.status !== 'failed') {
edgeItem.children.push({name: projectBucket, endpoint: key});
}
if (sharedBucket) {
@@ -351,7 +351,6 @@ export class ResourcesGridComponent implements OnInit {
});
});
this.bucketsList = SortUtils.flatDeep(bucketsList, 1).filter(v => v.children.length);
- console.log(this.bucketsList.filter(v => v.children.length));
}
private getUserPreferences(): void {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
index eedde78..6308b72 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
@@ -119,7 +119,6 @@ export class ResourcesComponent implements OnInit {
this.healthStatus = result;
this.resourcesGrid.healthStatus = this.healthStatus;
this.bucketStatus = this.healthStatus.bucketBrowser;
- console.log(this.bucketStatus);
},
error => this.toastr.error(error.message, 'Oops!'));
}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index b0ee3a0..e7de7fd 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -362,6 +362,33 @@ mat-dialog-container {
display: none !important;
}
+.progres{
+ border: 1px solid rgba(0,0,0,.12);
+ height: 17px;
+ position: relative;
+ width: 100%;
+
+ .bar{
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ background-color: #00bcd4;
+ }
+
+ .progress-bar-text{
+ position: absolute;
+ left: 5px;
+ top: 0;
+ bottom: 0;
+ font-size: 11px;
+ line-height: 13px;
+ color: rgba(0, 0, 0, 0.87);
+ z-index: 10;
+ }
+}
+
@media screen and (max-width: 1280px) {
.modal-fullscreen {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org