mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-19 04:57:51 +00:00
I have resolved image progress bar and undefined event issue
This commit is contained in:
parent
b430ab9a1c
commit
ecf729fc56
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"angular.enable-strict-mode-prompt": false
|
||||||
|
}
|
@ -10,33 +10,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div mat-dialog-content>
|
<div mat-dialog-content>
|
||||||
<mat-radio-group name="install_appliances" class="choose-instal-appliance" [value]="install_appliance" (change)="selectInstallApplianceOption($event)">
|
<mat-radio-group
|
||||||
<mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance">
|
name="install_appliances"
|
||||||
Yes
|
class="choose-instal-appliance"
|
||||||
</mat-radio-button>
|
[value]="install_appliance"
|
||||||
<mat-radio-button value="false" class="instal-appliances-button" [checked]="!install_appliance">
|
(change)="selectInstallApplianceOption($event)"
|
||||||
No
|
>
|
||||||
</mat-radio-button>
|
<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>
|
</mat-radio-group>
|
||||||
|
</div>
|
||||||
|
<div mat-dialog-actions align="end">
|
||||||
|
<button mat-raised-button color="primary" (click)="isInstallAppliance = !isInstallAppliance">Next</button>
|
||||||
|
</div>
|
||||||
</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 *ngIf="!isExistImage && isInstallAppliance">
|
||||||
<div class="row" style="display: flex;">
|
<div class="row" style="display: flex">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<h5>Please Select image</h5>
|
<h5>Please Select image</h5>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 txt-align">
|
<div class="col-md-4 txt-align">
|
||||||
<input type="file" accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp" multiple #file class="non-visible"
|
<input
|
||||||
(change)="uploadImageFile($event)" />
|
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>
|
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-2 txt-align">
|
<div class="col-md-2 txt-align">
|
||||||
@ -46,25 +53,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngFor="let img of selectFile; let i = index">
|
<div class="row" *ngFor="let img of selectFile; let i = index">
|
||||||
<mat-title> {{i+1}}. {{img?.name}} </mat-title>
|
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="isExistImage">
|
<div *ngIf="isExistImage">
|
||||||
<div mat-dialog-content>
|
<div mat-dialog-content>
|
||||||
<div *ngIf="uploadFileMessage.length > 0">
|
<div *ngIf="uploadFileMessage.length > 0">
|
||||||
<p class="uploaded-text">Uploaded image details</p>
|
<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>
|
||||||
|
<div mat-dialog-actions align="end">
|
||||||
|
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-actions align="end">
|
|
||||||
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
@ -1,11 +1,15 @@
|
|||||||
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
|
|
||||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
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 { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||||
import { Server } from '../../../models/server';
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||||
import { ImageManagerService } from '../../../services/image-manager.service';
|
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 { Observable, of } from 'rxjs';
|
||||||
import { catchError } from 'rxjs/operators';
|
import { catchError } from 'rxjs/operators';
|
||||||
import { ImageData } from '../../../models/images';
|
import { ImageData } from '../../../models/images';
|
||||||
|
import { Server } from '../../../models/server';
|
||||||
|
import { ImageManagerService } from '../../../services/image-manager.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-add-image-dialog',
|
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;
|
server: Server;
|
||||||
uploadedFile: boolean = false;
|
uploadedFile: boolean = false;
|
||||||
isExistImage: boolean = false;
|
isExistImage: boolean = false;
|
||||||
isInstallAppliance: boolean = false
|
isInstallAppliance: boolean = false;
|
||||||
install_appliance: boolean = false
|
install_appliance: boolean = false;
|
||||||
selectFile: any = [];
|
selectFile: any = [];
|
||||||
uploadFileMessage: ImageData = []
|
uploadFileMessage: ImageData = [];
|
||||||
uploadProgress:number = 0
|
uploadProgress: number = 0;
|
||||||
|
|
||||||
|
cancelRequsts = new Map();
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||||
public dialogRef: MatDialogRef<AddImageDialogComponent>,
|
public dialogRef: MatDialogRef<AddImageDialogComponent>,
|
||||||
private imageService: ImageManagerService,
|
private imageService: ImageManagerService,
|
||||||
|
public snackBar: MatSnackBar,
|
||||||
) { }
|
private uploadServiceService: UploadServiceService,
|
||||||
|
private toasterService: ToasterService
|
||||||
|
) {}
|
||||||
|
|
||||||
public ngOnInit(): void {
|
public ngOnInit(): void {
|
||||||
this.server = this.data
|
this.server = this.data;
|
||||||
|
this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
|
||||||
|
if (isCancel) {
|
||||||
|
this.cancelUploading();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
selectInstallApplianceOption(ev) {
|
selectInstallApplianceOption(ev) {
|
||||||
this.install_appliance = ev.value
|
this.install_appliance = ev.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
async uploadImageFile(event) {
|
async uploadImageFile(event) {
|
||||||
for (let imgFile of event.target.files) {
|
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() {
|
upload() {
|
||||||
const calls = [];
|
|
||||||
this.uploadedFile = true;
|
this.uploadedFile = true;
|
||||||
this.selectFile.forEach(imgElement => {
|
this.snackBar.openFromComponent(UploadingProcessbarComponent, {
|
||||||
calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error))))
|
panelClass: 'uplaoding-file-snackabar',
|
||||||
});
|
});
|
||||||
this.uploadProgress = calls.length
|
this.selectFile.forEach((imgElement) => {
|
||||||
Observable.forkJoin(calls).subscribe(responses => {
|
const object = this.imageService
|
||||||
this.uploadFileMessage = responses
|
.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.uploadedFile = false;
|
||||||
this.isExistImage = true;
|
this.isExistImage = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
ngDoCheck(){
|
|
||||||
|
ngDoCheck() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if(this.uploadProgress < 95){
|
if (this.uploadProgress < 95) {
|
||||||
this.uploadProgress = this.uploadProgress + 1
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -370,7 +370,7 @@
|
|||||||
type="file"
|
type="file"
|
||||||
class="non-visible"
|
class="non-visible"
|
||||||
#file2
|
#file2
|
||||||
(change)="importImage($, image.filename)"
|
(change)="importImage($event, image.filename)"
|
||||||
ng2FileSelect
|
ng2FileSelect
|
||||||
[uploader]="uploaderImage"
|
[uploader]="uploaderImage"
|
||||||
/>
|
/>
|
||||||
|
@ -185,7 +185,7 @@ export class NewTemplateDialogComponent implements OnInit {
|
|||||||
status: number,
|
status: number,
|
||||||
headers: ParsedResponseHeaders
|
headers: ParsedResponseHeaders
|
||||||
) => {
|
) => {
|
||||||
this.toasterService.error('An error has occured');
|
this.toasterService.error('An error has occured because image already exists');
|
||||||
this.progressService.deactivate();
|
this.progressService.deactivate();
|
||||||
this.uploaderImage.clearQueue();
|
this.uploaderImage.clearQueue();
|
||||||
};
|
};
|
||||||
@ -374,6 +374,7 @@ export class NewTemplateDialogComponent implements OnInit {
|
|||||||
|
|
||||||
|
|
||||||
importImage(event, imageName) {
|
importImage(event, imageName) {
|
||||||
|
debugger
|
||||||
this.computeChecksumMd5(event.target.files[0], false).then((output) => {
|
this.computeChecksumMd5(event.target.files[0], false).then((output) => {
|
||||||
let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];
|
let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user