ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-19 19:29:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create dynamic progress bar

Browse Source
This commit is contained in:
Rajnikant 2022-06-09 20:42:08 +05:30
parent 726562d615
commit f7696e5453
8 changed files with 122 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/common/uploading-processbar/uploading-processbar.component.ts
View File

@ -23,7 +23,7 @@ export class UploadingProcessbarComponent implements OnInit {
ngOnInit() {
this.subscription = this._US.currentCount.subscribe((count:number) => {
this.uploadProgress = count;
if (this.uploadProgress === 100) {
if (this.uploadProgress === 100 || this.uploadProgress == null ) {
this.dismiss()
}
})

71
src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html
View File

@ -30,45 +30,76 @@
</div>
</div>
<div *ngIf="!isExistImage && isInstallAppliance">
<div *ngIf="isInstallAppliance">
<div class="row" style="display: flex">
<div class="col-md-6">
<h5>Please Select image</h5>
<h5 *ngIf="uploaderImage.queue.length <= 0">Please Select image</h5>
<p *ngIf="uploaderImage.queue.length > 0"class="uploaded-text">Uploaded image details</p>
</div>
<div class="col-md-4 txt-align">
<div class="col-md-4 txt-align" *ngIf="uploaderImage.queue.length <= 0">
<input
type="file"
accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
multiple
#file
class="non-visible"
(change)="uploadImageFile($event)"
ng2FileSelect
[uploader]="uploaderImage"
(onFileSelected)="uploadImageFile($event)"
/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
</div>
<div class="col-md-2 txt-align">
<div class="{{uploaderImage.queue.length > 0 ? 'col-md-6 txt-align' : 'col-md-2 txt-align'}} ">
<button mat-button (click)="dialogRef.close()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<div class="row" *ngFor="let img of selectFile; let i = index">
<mat-title> {{ i + 1 }}. {{ img?.name }} </mat-title>
</div>
</div>
<div *ngIf="isExistImage">
<div mat-dialog-content>
<div *ngIf="uploadFileMessage.length > 0">
<p class="uploaded-text">Uploaded image details</p>
<p
*ngFor="let uploadFile of uploadFileMessage; let i = index"
[ngClass]="{ 'uploaded-error-text': uploadFile?.error?.message }"
<div class="row" *ngFor="let img of uploaderImage.queue; let i = index">
<div class="{{img.isError || img.isUploaded ? 'col-md-10' : 'col-md-6'}}">
<mat-title [ngClass]="{ 'uploaded-error-text': img.isError }">
{{ i + 1 }}. {{ img.isError ? 'Image ' : '' }} {{ img?.some?.name }}
{{ img.isError ? ' already exists' : '' }}
</mat-title>
</div>
<div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-4'}}" *ngIf="!img.isUploaded">
<mat-progress-bar
mode="determinate"
*ngIf="img?.some?.name === uploadProgress.some?.name"
[value]="uploadProgress.progress"
aria-valuemin="0"
aria-valuemax="100"
></mat-progress-bar>
<mat-progress-bar
mode="determinate"
*ngIf="img?.some?.name !== uploadProgress.some?.name && !img.isUploaded"
[value]="0"
aria-valuemin="0"
aria-valuemax="100"
>
{{ i + 1 }}. {{ uploadFile?.filename ?? uploadFile?.error?.message }}
</p>
</mat-progress-bar>
</div>
<div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-2'}}"
*ngIf="img?.some?.name === uploadProgress.some?.name && img.isReady && !img.isUploaded"
>
{{ uploadProgress.progress + ' %' }}
</div>
<div
class="col-md-2"
*ngIf="img?.some?.name !== uploadProgress.some?.name && img.isReady && !uploadProgress.isUploaded"
>
{{ '0 %' }}
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
<div mat-dialog-actions align="end" *ngIf="uploaderImage.queue.length > 0 && !uploadProgress.isUploaded">
<button
mat-raised-button
color="primary"
(click)="uploaderImage.queue.length > 0 ? cancelUploading() : dialogRef.close(false)"
>
Cancel
</button>
</div>
</div>

1
src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss
View File

@ -79,5 +79,6 @@
.instal-appliances-button {
margin: 11px;
}

122
src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
View File

@ -1,12 +1,8 @@
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
import { forkJoin, Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ImageData } from '../../../models/images';
import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
import { Server } from '../../../models/server';
import { ImageManagerService } from '../../../services/image-manager.service';
import { ToasterService } from '../../../services/toaster.service';
@ -23,33 +19,65 @@ import { ToasterService } from '../../../services/toaster.service';
]),
],
})
export class AddImageDialogComponent implements OnInit, DoCheck {
export class AddImageDialogComponent implements OnInit {
server: Server;
uploadedFile: boolean = false;
isExistImage: boolean = false;
isInstallAppliance: boolean = false;
install_appliance: boolean = false;
selectFile: any = [];
uploadFileMessage: ImageData = [];
uploaderImage: FileUploader;
uploadProgress: number = 0;
cancelRequsts: any;
forkObservable: Observable<any>[] = [];
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<AddImageDialogComponent>,
private imageService: ImageManagerService,
public snackBar: MatSnackBar,
private uploadServiceService: UploadServiceService,
private toasterService: ToasterService
private toasterService: ToasterService,
private uploadServiceService: UploadServiceService
) {}
public ngOnInit(): void {
public ngOnInit() {
this.server = this.data;
this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
if (isCancel) {
this.cancelUploading();
}
});
this.uploaderImage = new FileUploader({});
this.uploaderImage.onAfterAddingFile = (file) => {
file.withCredentials = false;
};
this.uploaderImage.onErrorItem = (
item: FileItem,
response: string,
status: number,
headers: ParsedResponseHeaders
) => {
let responseData = {
name: item.file.name,
message: JSON.parse(response),
};
this.toasterService.error(responseData?.message.message);
};
this.uploaderImage.onSuccessItem = (
item: FileItem,
response: string,
status: number,
headers: ParsedResponseHeaders
) => {
let responseData = {
filename: item.file.name,
message: JSON.parse(response),
};
this.toasterService.success('Image ' + responseData?.message.filename + ' imported succesfully' );
};
this.uploaderImage.onProgressItem = (progress: any) => {
this.uploadProgress = progress;
};
}
cancelUploading() {
this.uploaderImage.clearQueue();
this.dialogRef.close();
this.uploadServiceService.processBarCount(null);
this.toasterService.warning('Image file Uploading canceled');
}
selectInstallApplianceOption(ev) {
@ -57,47 +85,27 @@ export class AddImageDialogComponent implements OnInit, DoCheck {
}
async uploadImageFile(event) {
for (let imgFile of event.target.files) {
for (let imgFile of event) {
this.selectFile.push(imgFile);
}
await this.upload();
await this.importImageFile();
}
// files uploading
upload() {
this.uploadedFile = true;
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
panelClass: 'uplaoding-file-snackabar',
importImageFile() {
this.selectFile.forEach((event, i) => {
let fileName = event.name;
let file = event;
let fileReader: FileReader = new FileReader();
fileReader.onloadend = () => {
const url = this.imageService.getImagePath(this.server, this.install_appliance, fileName);
const itemToUpload = this.uploaderImage.queue[i];
itemToUpload.url = url;
if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
(itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }];
this.uploaderImage.uploadItem(itemToUpload);
};
fileReader.readAsText(file);
});
this.selectFile.forEach((imgElement) => {
const object = this.imageService
.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement)
.pipe(catchError((error) => of(error)));
this.forkObservable.push(object);
});
this.uploadProgress = this.forkObservable.length;
this.cancelRequsts = forkJoin(this.forkObservable).subscribe((responses) => {
this.uploadFileMessage = responses;
this.uploadServiceService.processBarCount(100);
this.uploadedFile = false;
this.isExistImage = true;
});
}
ngDoCheck() {
setTimeout(() => {
if (this.uploadProgress < 100 - this.forkObservable.length) {
this.uploadProgress = this.uploadProgress + 1;
this.uploadServiceService.processBarCount(this.uploadProgress);
}
}, this.forkObservable.length * 10000);
}
cancelUploading() {
this.cancelRequsts.unsubscribe();
this.dialogRef.close();
this.uploadServiceService.processBarCount(100);
this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false);
}
}

2
src/app/components/image-manager/image-manager.component.ts
View File

@ -123,7 +123,7 @@ export class ImageManagerComponent implements OnInit {
deleteAllFiles() {
const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, {
width: '500px',
width: '550px',
maxHeight: '650px',
autoFocus: false,
disableClose: true,

2
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
View File

@ -274,7 +274,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
cancelUploading() {
this.uploader.clearQueue();
this.uploadServiceService.processBarCount(100)
this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image upload cancelled');
// this.uploadServiceService.cancelFileUploading(false)
// window.location.reload()

2
src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
View File

@ -162,7 +162,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
cancelUploading() {
this.uploader.clearQueue();
this.uploadServiceService.processBarCount(100)
this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image Uploading canceled');
this.uploadServiceService.cancelFileUploading(false)

3
src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
View File

@ -374,7 +374,6 @@ export class NewTemplateDialogComponent implements OnInit {
importImage(event, imageName) {
debugger
this.computeChecksumMd5(event.target.files[0], false).then((output) => {
let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];
@ -429,7 +428,7 @@ export class NewTemplateDialogComponent implements OnInit {
cancelUploading() {
this.uploaderImage.clearQueue();
this.uploadServiceService.processBarCount(100)
this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false)