I added a common process bar when IOS and IOU image file uplading

This commit is contained in:
Rajnikant 2022-05-24 09:40:46 +05:30
parent 36482c7a96
commit 667c8fc7f0
2 changed files with 55 additions and 4 deletions

View File

@ -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');
}
}

View File

@ -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() {