ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-18 20:47:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

I have resolved image progress bar and undefined event issue

Browse Source
This commit is contained in:
Rajnikant 2022-06-06 13:43:39 +05:30
parent b430ab9a1c
commit ecf729fc56
5 changed files with 101 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"angular.enable-strict-mode-prompt": false
}

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

@ -10,33 +10,40 @@
</div>
</div>
<div mat-dialog-content>
<mat-radio-group name="install_appliances" class="choose-instal-appliance" [value]="install_appliance" (change)="selectInstallApplianceOption($event)">
<mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance">
Yes
</mat-radio-button>
<mat-radio-button value="false" class="instal-appliances-button" [checked]="!install_appliance">
No
</mat-radio-button>
<div mat-dialog-content>
<mat-radio-group
name="install_appliances"
class="choose-instal-appliance"
[value]="install_appliance"
(change)="selectInstallApplianceOption($event)"
>
<mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance">
Yes
</mat-radio-button>
<mat-radio-button value="false" class="instal-appliances-button" [checked]="!install_appliance">
No
</mat-radio-button>
</mat-radio-group>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="isInstallAppliance = !isInstallAppliance">Next</button>
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="isInstallAppliance =!isInstallAppliance">Next</button>
</div>
</div>
<div *ngIf="!isExistImage && isInstallAppliance">
<div class="row" style="display: flex;">
<div class="row" style="display: flex">
<div class="col-md-6">
<h5>Please Select image</h5>
</div>
<div class="col-md-4 txt-align">
<input type="file" accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp" multiple #file class="non-visible"
(change)="uploadImageFile($event)" />
<input
type="file"
accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
multiple
#file
class="non-visible"
(change)="uploadImageFile($event)"
/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
</div>
<div class="col-md-2 txt-align">
@ -46,25 +53,23 @@
</div>
</div>
<div class="row" *ngFor="let img of selectFile; let i = index">
<mat-title> {{i+1}}. {{img?.name}} </mat-title>
</div>
<div class="row">
<div class="col-md-12">
<div *ngIf="uploadedFile">
<mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">
</mat-progress-bar>
</div>
</div>
<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}">{{i+1}}. {{uploadFile?.filename ?? uploadFile?.error?.message}}</p>
<p
*ngFor="let uploadFile of uploadFileMessage; let i = index"
[ngClass]="{ 'uploaded-error-text': uploadFile?.error?.message }"
>
{{ i + 1 }}. {{ uploadFile?.filename ?? uploadFile?.error?.message }}
</p>
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
</div>
</div>

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

@ -1,11 +1,15 @@
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Server } from '../../../models/server';
import { ImageManagerService } from '../../../services/image-manager.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ToasterService } from '@services/toaster.service';
import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ImageData } from '../../../models/images';
import { Server } from '../../../models/server';
import { ImageManagerService } from '../../../services/image-manager.service';
@Component({
selector: 'app-add-image-dialog',
@ -19,58 +23,84 @@ import { ImageData } from '../../../models/images';
]),
],
})
export class AddImageDialogComponent implements OnInit,DoCheck {
export class AddImageDialogComponent implements OnInit, DoCheck {
server: Server;
uploadedFile: boolean = false;
isExistImage: boolean = false;
isInstallAppliance: boolean = false
install_appliance: boolean = false
isInstallAppliance: boolean = false;
install_appliance: boolean = false;
selectFile: any = [];
uploadFileMessage: ImageData = []
uploadProgress:number = 0
uploadFileMessage: ImageData = [];
uploadProgress: number = 0;
cancelRequsts = new Map();
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<AddImageDialogComponent>,
private imageService: ImageManagerService,
) { }
public snackBar: MatSnackBar,
private uploadServiceService: UploadServiceService,
private toasterService: ToasterService
) {}
public ngOnInit(): void {
this.server = this.data
this.server = this.data;
this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
if (isCancel) {
this.cancelUploading();
}
});
}
selectInstallApplianceOption(ev) {
this.install_appliance = ev.value
this.install_appliance = ev.value;
}
async uploadImageFile(event) {
for (let imgFile of event.target.files) {
this.selectFile.push(imgFile)
this.selectFile.push(imgFile);
}
await this.upload()
await this.upload();
}
// files uploading
// files uploading
upload() {
const calls = [];
this.uploadedFile = true;
this.selectFile.forEach(imgElement => {
calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error))))
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
panelClass: 'uplaoding-file-snackabar',
});
this.uploadProgress = calls.length
Observable.forkJoin(calls).subscribe(responses => {
this.uploadFileMessage = responses
this.selectFile.forEach((imgElement) => {
const object = this.imageService
.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement)
.pipe(catchError((error) => of(error)))
.subscribe();
this.cancelRequsts.set(imgElement.name, object);
});
this.uploadProgress = this.cancelRequsts.size;
Observable.forkJoin(this.cancelRequsts.values).subscribe((responses) => {
this.uploadFileMessage = responses;
this.uploadServiceService.processBarCount(100);
this.uploadedFile = false;
this.isExistImage = true;
});
}
ngDoCheck(){
ngDoCheck() {
setTimeout(() => {
if(this.uploadProgress < 95){
this.uploadProgress = this.uploadProgress + 1
if (this.uploadProgress < 95) {
this.uploadProgress = this.uploadProgress + 1;
this.uploadServiceService.processBarCount(this.uploadProgress);
}
}, 100000);
}, 10000);
}
cancelUploading() {
this.cancelRequsts.forEach((obj) => {
obj.unsubscribe();
});
this.dialogRef.close();
this.uploadServiceService.processBarCount(100);
this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false);
}
}

2
src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
View File

@ -370,7 +370,7 @@
type="file"
class="non-visible"
#file2
(change)="importImage($, image.filename)"
(change)="importImage($event, image.filename)"
ng2FileSelect
[uploader]="uploaderImage"
/>

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

@ -185,7 +185,7 @@ export class NewTemplateDialogComponent implements OnInit {
status: number,
headers: ParsedResponseHeaders
) => {
this.toasterService.error('An error has occured');
this.toasterService.error('An error has occured because image already exists');
this.progressService.deactivate();
this.uploaderImage.clearQueue();
};
@ -374,6 +374,7 @@ 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];