diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ee04af80..c907b644 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -277,6 +277,7 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user. import { ImageManagerComponent } from './components/image-manager/image-manager.component'; import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component'; import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component'; +import { UploadingProcessbarComponent } from './common/uploading-processbar/uploading-processbar.component'; @NgModule({ declarations: [ @@ -470,6 +471,7 @@ import { DeleteAllImageFilesDialogComponent } from './components/image-manager/d ImageManagerComponent, AddImageDialogComponent, DeleteAllImageFilesDialogComponent, + UploadingProcessbarComponent, ], imports: [ BrowserModule, diff --git a/src/app/common/uploading-processbar/upload-service.service.spec.ts b/src/app/common/uploading-processbar/upload-service.service.spec.ts new file mode 100644 index 00000000..76686182 --- /dev/null +++ b/src/app/common/uploading-processbar/upload-service.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UploadServiceService } from './upload-service.service'; + +describe('UploadServiceService', () => { + let service: UploadServiceService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UploadServiceService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/common/uploading-processbar/upload-service.service.ts b/src/app/common/uploading-processbar/upload-service.service.ts new file mode 100644 index 00000000..481e8194 --- /dev/null +++ b/src/app/common/uploading-processbar/upload-service.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class UploadServiceService { + + private countSource = new BehaviorSubject(0); + currentCount = this.countSource.asObservable(); + private cancelItem = new BehaviorSubject(false); + currentCancelItemDetails = this.cancelItem.asObservable(); + + constructor() { } + + processBarCount(processCount:number) { + this.countSource.next(processCount) + } + cancelFileUploading(){ + this.cancelItem.next(true) + } + +} diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.html b/src/app/common/uploading-processbar/uploading-processbar.component.html new file mode 100644 index 00000000..0c3d3742 --- /dev/null +++ b/src/app/common/uploading-processbar/uploading-processbar.component.html @@ -0,0 +1,10 @@ +

Image Uploading please wait .... {{uploadProgress}}%

+
+
+ + +
+
+ +
+
diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.scss b/src/app/common/uploading-processbar/uploading-processbar.component.scss new file mode 100644 index 00000000..b05df9a6 --- /dev/null +++ b/src/app/common/uploading-processbar/uploading-processbar.component.scss @@ -0,0 +1,11 @@ + +.mat-snack-bar-container{ + min-width: 450px !important; +} + +.proccessBar-row{ + display: flex; +} +.proccessBar-col{ + margin: auto; +} diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.spec.ts b/src/app/common/uploading-processbar/uploading-processbar.component.spec.ts new file mode 100644 index 00000000..c38f0b4a --- /dev/null +++ b/src/app/common/uploading-processbar/uploading-processbar.component.spec.ts @@ -0,0 +1,34 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatSnackBarModule, MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; +import { UploadServiceService } from './upload-service.service'; + +import { UploadingProcessbarComponent } from './uploading-processbar.component'; + +describe('UploadingProcessbarComponent', () => { + let component: UploadingProcessbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [UploadingProcessbarComponent], + imports:[MatSnackBarModule], + providers: [ + { provide: MAT_SNACK_BAR_DATA, useValue: {} }, + { provide: MatSnackBarRef, useValue: {} }, + { provide: UploadServiceService, useClass: UploadServiceService }, + + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UploadingProcessbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.ts b/src/app/common/uploading-processbar/uploading-processbar.component.ts new file mode 100644 index 00000000..cac5070f --- /dev/null +++ b/src/app/common/uploading-processbar/uploading-processbar.component.ts @@ -0,0 +1,44 @@ +import { Component, Inject, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; +import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'; +import { Subscription } from 'rxjs'; +import { UploadServiceService } from './upload-service.service'; + +@Component({ + selector: 'app-uploading-processbar', + templateUrl: './uploading-processbar.component.html', + styleUrls: ['./uploading-processbar.component.scss'], + encapsulation: ViewEncapsulation.None, + +}) +export class UploadingProcessbarComponent implements OnInit { + uploadProgress: number = 0 + subscription: Subscription; + + constructor( + @Inject(MAT_SNACK_BAR_DATA) public data, + private _snackRef: MatSnackBarRef, + private _US: UploadServiceService + ) { } + + ngOnInit() { + this.subscription = this._US.currentCount.subscribe((count) => { + this.uploadProgress = count; + if (this.uploadProgress === 100) { + this.dismiss() + } + }) + } + + + + dismiss() { + this._snackRef.dismiss(); + } + cancelItem() { + this._US.cancelFileUploading() + } + ngOnDestroy() { + this.subscription.unsubscribe(); + } + +} diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html index 1fef1ff4..9ef0c315 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html @@ -51,7 +51,7 @@
- +
diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts index 456e23d5..a3b60483 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, DoCheck, Inject, OnInit } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Server } from '../../../models/server'; @@ -20,7 +20,7 @@ import { ImageData } from '../../../models/images'; ], }) -export class AddImageDialogComponent implements OnInit { +export class AddImageDialogComponent implements OnInit,DoCheck { server: Server; uploadedFile: boolean = false; isExistImage: boolean = false; @@ -28,7 +28,7 @@ export class AddImageDialogComponent implements OnInit { install_appliance: boolean = false selectFile: any = []; uploadFileMessage: ImageData = [] - + uploadProgress:number = 0 constructor( @Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef, @@ -58,10 +58,19 @@ export class AddImageDialogComponent implements OnInit { this.selectFile.forEach(imgElement => { calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error)))) }); + this.uploadProgress = calls.length Observable.forkJoin(calls).subscribe(responses => { this.uploadFileMessage = responses this.uploadedFile = false; this.isExistImage = true; }); } + ngDoCheck(){ + setTimeout(() => { + if(this.uploadProgress < 95){ + this.uploadProgress = this.uploadProgress + 1 + } + }, 100000); + + } } diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html index e6df8fb1..d4df6b9b 100644 --- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html +++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html @@ -103,9 +103,7 @@ placeholder="Please enter name" /> -
- -
+
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts index 97f55374..c42c6a79 100644 --- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts +++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute, Router } from '@angular/router'; +import { UploadServiceService } from '../../../../common/uploading-processbar/upload-service.service'; +import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component'; import { FileItem, FileUploader, FileUploaderOptions, ParsedResponseHeaders } from 'ng2-file-upload'; import { v4 as uuid } from 'uuid'; import { Compute } from '../../../../models/compute'; @@ -51,7 +54,9 @@ export class AddQemuVmTemplateComponent implements OnInit { private formBuilder: FormBuilder, private templateMocksService: TemplateMocksService, private configurationService: QemuConfigurationService, - private computeService: ComputeService + private computeService: ComputeService, + private snackBar : MatSnackBar, + private uploadServiceService : UploadServiceService ) { this.qemuTemplate = new QemuTemplate(); @@ -91,6 +96,8 @@ export class AddQemuVmTemplateComponent implements OnInit { this.uploader.onProgressItem = (progress: any) => { this.uploadProgress = progress['progress']; + this.uploadServiceService.processBarCount(this.uploadProgress) + }; const server_id = this.route.snapshot.paramMap.get('server_id'); @@ -117,6 +124,14 @@ export class AddQemuVmTemplateComponent implements OnInit { this.consoleTypes = this.configurationService.getConsoleTypes(); }); + this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { + if (isCancel) { + this.cancelUploading() + } + + }) + + } setServerType(serverType: string) { @@ -131,7 +146,7 @@ export class AddQemuVmTemplateComponent implements OnInit { uploadImageFile(event) { - this.uploadedFile = true; + // this.uploadedFile = true; let name = event.target.files[0].name; this.diskForm.controls['fileName'].setValue(name); @@ -142,7 +157,13 @@ export class AddQemuVmTemplateComponent implements OnInit { if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true; ((itemToUpload as any).options.headers =[{name:'Authorization',value:'Bearer ' + this.server.authToken}]) this.uploader.uploadItem(itemToUpload); + this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar',}); + } + cancelUploading() { + this.uploader.clearQueue(); + this.uploadServiceService.processBarCount(100) + this.toasterService.warning('Image Uploading canceled'); } goBack() { @@ -171,4 +192,6 @@ export class AddQemuVmTemplateComponent implements OnInit { this.toasterService.error(`Fill all required fields`); } } + + } diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html index faef1dc5..17e769d1 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html @@ -154,7 +154,7 @@ > refresh
-
+
{{ applianceToInstall.name }} version {{ version.name }} @@ -225,6 +225,7 @@ [uploader]="uploaderImage" /> +