From 667c8fc7f0c73d164681da054290cdac286e4764 Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Tue, 24 May 2022 09:40:46 +0530 Subject: [PATCH 1/3] I added a common process bar when IOS and IOU image file uplading --- .../add-ios-template.component.ts | 27 +++++++++++++++- .../add-iou-template.component.ts | 32 +++++++++++++++++-- 2 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts index ccf03b0e..4213a9b9 100644 --- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts +++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-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 'app/common/uploading-processbar/upload-service.service'; +import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; import { v4 as uuid } from 'uuid'; import { Compute } from '../../../../models/compute'; @@ -46,6 +49,7 @@ export class AddIosTemplateComponent implements OnInit { ciscoUrl: string = 'https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp'; uploader: FileUploader; isLocalComputerChosen: boolean = true; + uploadProgress:number = 0; constructor( private route: ActivatedRoute, @@ -56,7 +60,9 @@ export class AddIosTemplateComponent implements OnInit { private router: Router, private templateMocksService: TemplateMocksService, private iosConfigurationService: IosConfigurationService, - private computeService: ComputeService + private computeService: ComputeService, + private uploadServiceService: UploadServiceService, + private snackBar : MatSnackBar ) { this.iosTemplate = new IosTemplate(); @@ -92,6 +98,16 @@ export class AddIosTemplateComponent implements OnInit { this.getImages(); this.toasterService.success('Image uploaded'); }; + this.uploader.onProgressItem = (progress: any) => { + this.uploadProgress = progress['progress']; + this.uploadServiceService.processBarCount(this.uploadProgress) + }; + this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { + if (isCancel) { + this.cancelUploading() + } + + }) const server_id = this.route.snapshot.paramMap.get('server_id'); this.serverService.get(parseInt(server_id, 10)).then((server: Server) => { @@ -137,6 +153,9 @@ export class AddIosTemplateComponent implements OnInit { const itemToUpload = this.uploader.queue[0]; 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', + }); } @@ -250,4 +269,10 @@ export class AddIosTemplateComponent implements OnInit { onChassisChosen() { this.networkAdaptersForTemplate = []; } + + cancelUploading() { + this.uploader.clearQueue(); + this.uploadServiceService.processBarCount(100) + this.toasterService.warning('Image imported canceled'); + } } diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts index 4cf1f244..ab32caba 100644 --- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts +++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-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 'app/common/uploading-processbar/upload-service.service'; +import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; import { v4 as uuid } from 'uuid'; import { Compute } from '../../../../models/compute'; @@ -31,7 +34,7 @@ export class AddIouTemplateComponent implements OnInit { templateNameForm: FormGroup; imageForm: FormGroup; isLocalComputerChosen: boolean = true; - + uploadProgress:number = 0 constructor( private route: ActivatedRoute, private serverService: ServerService, @@ -40,7 +43,9 @@ export class AddIouTemplateComponent implements OnInit { private router: Router, private formBuilder: FormBuilder, private templateMocksService: TemplateMocksService, - private computeService: ComputeService + private computeService: ComputeService, + private uploadServiceService : UploadServiceService, + private snackBar : MatSnackBar ) { this.iouTemplate = new IouTemplate(); @@ -61,6 +66,11 @@ export class AddIouTemplateComponent implements OnInit { this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { this.toasterService.error('An error occured: ' + response); }; + this.uploader.onProgressItem = (progress: any) => { + this.uploadProgress = progress['progress']; + this.uploadServiceService.processBarCount(this.uploadProgress) + }; + this.uploader.onSuccessItem = ( item: FileItem, response: string, @@ -70,7 +80,7 @@ export class AddIouTemplateComponent implements OnInit { this.getImages(); this.toasterService.success('Image uploaded'); }; - + const server_id = this.route.snapshot.paramMap.get('server_id'); this.serverService.get(parseInt(server_id, 10)).then((server: Server) => { this.server = server; @@ -79,6 +89,13 @@ export class AddIouTemplateComponent implements OnInit { this.iouTemplate = iouTemplate; }); }); + this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { + if (isCancel) { + this.cancelUploading() + } + + }) + } getImages() { @@ -107,9 +124,18 @@ export class AddIouTemplateComponent implements OnInit { const itemToUpload = this.uploader.queue[0]; 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 imported canceled'); + } + goBack() { From ea1e280e661cbb74a30fdbe69c4d023612211d8b Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Tue, 24 May 2022 15:25:06 +0530 Subject: [PATCH 2/3] I resoleved loader error and message --- .../upload-service.service.ts | 4 ++-- .../uploading-processbar.component.ts | 2 +- .../add-ios-template.component.ts | 9 ++++++--- .../add-iou-template.component.ts | 19 +++++++++++++------ .../add-qemu-vm-template.component.ts | 2 ++ .../new-template-dialog.component.ts | 4 +++- 6 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/app/common/uploading-processbar/upload-service.service.ts b/src/app/common/uploading-processbar/upload-service.service.ts index 481e8194..8a2bb38b 100644 --- a/src/app/common/uploading-processbar/upload-service.service.ts +++ b/src/app/common/uploading-processbar/upload-service.service.ts @@ -16,8 +16,8 @@ export class UploadServiceService { processBarCount(processCount:number) { this.countSource.next(processCount) } - cancelFileUploading(){ - this.cancelItem.next(true) + cancelFileUploading(isCancel){ + this.cancelItem.next(isCancel) } } diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.ts b/src/app/common/uploading-processbar/uploading-processbar.component.ts index cac5070f..913f3eb5 100644 --- a/src/app/common/uploading-processbar/uploading-processbar.component.ts +++ b/src/app/common/uploading-processbar/uploading-processbar.component.ts @@ -35,7 +35,7 @@ export class UploadingProcessbarComponent implements OnInit { this._snackRef.dismiss(); } cancelItem() { - this._US.cancelFileUploading() + this._US.cancelFileUploading(true) } ngOnDestroy() { this.subscription.unsubscribe(); diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts index 4213a9b9..cdac0bc7 100644 --- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts +++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts @@ -1,3 +1,4 @@ +import { Location } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { MatSnackBar } from '@angular/material/snack-bar'; @@ -62,7 +63,7 @@ export class AddIosTemplateComponent implements OnInit { private iosConfigurationService: IosConfigurationService, private computeService: ComputeService, private uploadServiceService: UploadServiceService, - private snackBar : MatSnackBar + private snackBar : MatSnackBar, ) { this.iosTemplate = new IosTemplate(); @@ -156,7 +157,6 @@ export class AddIosTemplateComponent implements OnInit { this.snackBar.openFromComponent(UploadingProcessbarComponent, { panelClass: 'uplaoding-file-snackabar', }); - } addTemplate() { @@ -273,6 +273,9 @@ export class AddIosTemplateComponent implements OnInit { cancelUploading() { this.uploader.clearQueue(); this.uploadServiceService.processBarCount(100) - this.toasterService.warning('Image imported canceled'); + this.toasterService.warning('Image upload cancelled'); + this.uploadServiceService.cancelFileUploading(false) + window.location.reload() + } } diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts index ab32caba..835156ef 100644 --- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts +++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts @@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service'; import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { Subscription } from 'rxjs'; import { v4 as uuid } from 'uuid'; import { Compute } from '../../../../models/compute'; import { IouImage } from '../../../../models/iou/iou-image'; @@ -34,7 +35,9 @@ export class AddIouTemplateComponent implements OnInit { templateNameForm: FormGroup; imageForm: FormGroup; isLocalComputerChosen: boolean = true; - uploadProgress:number = 0 + uploadProgress: number = 0 + subscription: Subscription; + constructor( private route: ActivatedRoute, private serverService: ServerService, @@ -44,8 +47,8 @@ export class AddIouTemplateComponent implements OnInit { private formBuilder: FormBuilder, private templateMocksService: TemplateMocksService, private computeService: ComputeService, - private uploadServiceService : UploadServiceService, - private snackBar : MatSnackBar + private uploadServiceService: UploadServiceService, + private snackBar: MatSnackBar ) { this.iouTemplate = new IouTemplate(); @@ -65,6 +68,7 @@ export class AddIouTemplateComponent implements OnInit { }; this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { this.toasterService.error('An error occured: ' + response); + this.setDiskImage('existingImage') }; this.uploader.onProgressItem = (progress: any) => { this.uploadProgress = progress['progress']; @@ -80,7 +84,7 @@ export class AddIouTemplateComponent implements OnInit { this.getImages(); this.toasterService.success('Image uploaded'); }; - + const server_id = this.route.snapshot.paramMap.get('server_id'); this.serverService.get(parseInt(server_id, 10)).then((server: Server) => { this.server = server; @@ -95,7 +99,7 @@ export class AddIouTemplateComponent implements OnInit { } }) - + } getImages() { @@ -133,7 +137,10 @@ export class AddIouTemplateComponent implements OnInit { cancelUploading() { this.uploader.clearQueue(); this.uploadServiceService.processBarCount(100) - this.toasterService.warning('Image imported canceled'); + this.toasterService.warning('Image upload cancelled'); + this.uploadServiceService.cancelFileUploading(false) + window.location.reload() + } 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 c42c6a79..df81758c 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 @@ -164,6 +164,8 @@ export class AddQemuVmTemplateComponent implements OnInit { this.uploader.clearQueue(); this.uploadServiceService.processBarCount(100) this.toasterService.warning('Image Uploading canceled'); + this.uploadServiceService.cancelFileUploading(false) + } goBack() { diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts index 35d0d631..4ffca2a3 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts @@ -429,7 +429,9 @@ export class NewTemplateDialogComponent implements OnInit { cancelUploading() { this.uploaderImage.clearQueue(); this.uploadServiceService.processBarCount(100) - this.toasterService.warning('Image imported canceled'); + this.toasterService.warning('Image upload cancelled'); + this.uploadServiceService.cancelFileUploading(false) + } checkImageFromVersion(image: string): boolean { From 0ae25095a8080b4939634c4779ab901c3e7a7d3b Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Tue, 24 May 2022 19:54:26 +0530 Subject: [PATCH 3/3] Resolve loader error --- .../upload-service.service.ts | 6 +++--- .../uploading-processbar.component.ts | 2 +- .../add-ios-template.component.ts | 15 ++++++++++----- .../add-iou-template.component.ts | 16 +++++++++------- 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/app/common/uploading-processbar/upload-service.service.ts b/src/app/common/uploading-processbar/upload-service.service.ts index 8a2bb38b..71efc849 100644 --- a/src/app/common/uploading-processbar/upload-service.service.ts +++ b/src/app/common/uploading-processbar/upload-service.service.ts @@ -1,14 +1,14 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; +import { BehaviorSubject, Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class UploadServiceService { - private countSource = new BehaviorSubject(0); + private countSource = new Subject(); currentCount = this.countSource.asObservable(); - private cancelItem = new BehaviorSubject(false); + private cancelItem = new Subject(); currentCancelItemDetails = this.cancelItem.asObservable(); constructor() { } diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.ts b/src/app/common/uploading-processbar/uploading-processbar.component.ts index 913f3eb5..a77c85d7 100644 --- a/src/app/common/uploading-processbar/uploading-processbar.component.ts +++ b/src/app/common/uploading-processbar/uploading-processbar.component.ts @@ -21,7 +21,7 @@ export class UploadingProcessbarComponent implements OnInit { ) { } ngOnInit() { - this.subscription = this._US.currentCount.subscribe((count) => { + this.subscription = this._US.currentCount.subscribe((count:number) => { this.uploadProgress = count; if (this.uploadProgress === 100) { this.dismiss() diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts index cdac0bc7..17d7d25d 100644 --- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts +++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts @@ -1,11 +1,12 @@ import { Location } from '@angular/common'; -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, 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 'app/common/uploading-processbar/upload-service.service'; import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component'; import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { Subscription } from 'rxjs'; import { v4 as uuid } from 'uuid'; import { Compute } from '../../../../models/compute'; import { IosImage } from '../../../../models/images/ios-image'; @@ -23,7 +24,7 @@ import { ToasterService } from '../../../../services/toaster.service'; templateUrl: './add-ios-template.component.html', styleUrls: ['./add-ios-template.component.scss', '../../preferences.component.scss'], }) -export class AddIosTemplateComponent implements OnInit { +export class AddIosTemplateComponent implements OnInit, OnDestroy { server: Server; iosTemplate: IosTemplate; isEtherSwitchRouter: boolean = false; @@ -51,6 +52,7 @@ export class AddIosTemplateComponent implements OnInit { uploader: FileUploader; isLocalComputerChosen: boolean = true; uploadProgress:number = 0; + subscription: Subscription; constructor( private route: ActivatedRoute, @@ -103,7 +105,7 @@ export class AddIosTemplateComponent implements OnInit { this.uploadProgress = progress['progress']; this.uploadServiceService.processBarCount(this.uploadProgress) }; - this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { + this.subscription = this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { if (isCancel) { this.cancelUploading() } @@ -274,8 +276,11 @@ export class AddIosTemplateComponent implements OnInit { this.uploader.clearQueue(); this.uploadServiceService.processBarCount(100) this.toasterService.warning('Image upload cancelled'); - this.uploadServiceService.cancelFileUploading(false) - window.location.reload() + // this.uploadServiceService.cancelFileUploading(false) + // window.location.reload() } + ngOnDestroy() { + this.subscription.unsubscribe(); + } } diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts index 835156ef..55cb18be 100644 --- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts +++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, 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'; @@ -22,7 +22,7 @@ import { ToasterService } from '../../../../services/toaster.service'; templateUrl: './add-iou-template.component.html', styleUrls: ['./add-iou-template.component.scss', '../../preferences.component.scss'], }) -export class AddIouTemplateComponent implements OnInit { +export class AddIouTemplateComponent implements OnInit, OnDestroy { server: Server; iouTemplate: IouTemplate; isRemoteComputerChosen: boolean = false; @@ -68,7 +68,6 @@ export class AddIouTemplateComponent implements OnInit { }; this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { this.toasterService.error('An error occured: ' + response); - this.setDiskImage('existingImage') }; this.uploader.onProgressItem = (progress: any) => { this.uploadProgress = progress['progress']; @@ -93,7 +92,7 @@ export class AddIouTemplateComponent implements OnInit { this.iouTemplate = iouTemplate; }); }); - this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { + this.subscription = this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => { if (isCancel) { this.cancelUploading() } @@ -138,9 +137,8 @@ export class AddIouTemplateComponent implements OnInit { this.uploader.clearQueue(); this.uploadServiceService.processBarCount(100) this.toasterService.warning('Image upload cancelled'); - this.uploadServiceService.cancelFileUploading(false) - window.location.reload() - + // this.uploadServiceService.cancelFileUploading(false) + // window.location.reload() } @@ -174,4 +172,8 @@ export class AddIouTemplateComponent implements OnInit { this.toasterService.error(`Fill all required fields`); } } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } }