Merge pull request #1326 from GNS3/bugfix/imageProgressBar

Bugfix/image progress bar

.vscode/settings.json

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

angular.json

@@ -26,7 +26,8 @@
                             "rxjs/add/operator/map",
                             "rxjs-compat/add/operator/map",
                             "classnames",
-							"stylenames"
+                            "stylenames",
+                            "source-map-js"
                         ],
                         "outputPath": "dist",
                         "index": "src/index.html",
@@ -55,12 +56,10 @@
                     },
                     "configurations": {
                         "production": {
-							"budgets": [
+                            "budgets": [{
-								{
                                 "type": "anyComponentStyle",
                                 "maximumWarning": "6kb"
-								}
+                            }],
-							],
                             "optimization": true,
                             "outputHashing": "all",
                             "sourceMap": {
@@ -72,20 +71,16 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true,
-							"fileReplacements": [
+                            "fileReplacements": [{
-								{
                                 "replace": "src/environments/environment.ts",
                                 "with": "src/environments/environment.prod.ts"
-								}
+                            }]
-							]
                         },
                         "electronProd": {
-							"budgets": [
+                            "budgets": [{
-								{
                                 "type": "anyComponentStyle",
                                 "maximumWarning": "6kb"
-								}
+                            }],
-							],
                             "optimization": true,
                             "outputHashing": "all",
                             "sourceMap": false,
@@ -93,34 +88,26 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true,
-							"fileReplacements": [
+                            "fileReplacements": [{
-								{
                                 "replace": "src/environments/environment.ts",
                                 "with": "src/environments/environment.electron.prod.ts"
-								}
+                            }]
-							]
                         },
                         "electronDev": {
-							"budgets": [
+                            "budgets": [{
-								{
                                 "type": "anyComponentStyle",
                                 "maximumWarning": "6kb"
-								}
+                            }],
-							],
+                            "fileReplacements": [{
-							"fileReplacements": [
-								{
                                 "replace": "src/environments/environment.ts",
                                 "with": "src/environments/environment.electron.ts"
-								}
+                            }]
-							]
                         },
                         "githubProd": {
-							"budgets": [
+                            "budgets": [{
-								{
                                 "type": "anyComponentStyle",
                                 "maximumWarning": "6kb"
-								}
+                            }],
-							],
                             "optimization": true,
                             "outputHashing": "all",
                             "sourceMap": false,
@@ -128,12 +115,10 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true,
-							"fileReplacements": [
+                            "fileReplacements": [{
-								{
                                 "replace": "src/environments/environment.ts",
                                 "with": "src/environments/environment.github.prod.ts"
-								}
+                            }]
-							]
                         }
                     }
                 },

package.json

@@ -59,6 +59,7 @@
     "@types/react-dom": "^17.0.11",
     "angular-draggable-droppable": "^6.1.0",
     "angular-resizable-element": "^3.4.0",
+    "autoprefixer": "10.4.5",
     "bootstrap": "^5.1.3",
     "command-exists": "^1.2.9",
     "core-js": "^3.22.3",
@@ -103,8 +104,8 @@
     "@types/jasmine": "^4.0.3",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^17.0.31",
-    "codelyzer": "^6.0.2",
+    "codelyzer": "^0.0.28",
-    "electron": "^13.2.2",
+    "electron": "13.6.6",
     "electron-builder": "^23.0.3",
     "file-loader": "^6.2.0",
     "jasmine-core": "^4.1.0",
@@ -126,7 +127,7 @@
     "ts-node": "^10.7.0",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.6.4",
+    "typescript": "4.6.4",
     "webpack": "^5.72.0",
     "yarn-upgrade-all": "^0.7.1"
   },

src/app/common/uploading-processbar/uploading-processbar.component.ts

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

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

@@ -11,7 +11,12 @@
   </div>
 
   <div mat-dialog-content>
-    <mat-radio-group name="install_appliances" class="choose-instal-appliance"  [value]="install_appliance"  (change)="selectInstallApplianceOption($event)">
+    <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>
@@ -25,46 +30,76 @@
   </div>
 </div>
 
-
+<div *ngIf="isInstallAppliance">
-
+  <div class="row" style="display: flex">
-
-<div *ngIf="!isExistImage && 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"
+      <input
-        (change)="uploadImageFile($event)" />
+        type="file"
+        accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
+        multiple
+        #file
+        class="non-visible"
+        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 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="row">
+    <div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-4'}}"  *ngIf="!img.isUploaded">
-    <div class="col-md-12">
+      <mat-progress-bar
-      <div *ngIf="uploadedFile">
+        mode="determinate"
-        <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">
+        *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"
+      >
       </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>
+  <div mat-dialog-actions align="end" *ngIf="uploaderImage.queue.length > 0 && !uploadProgress.isUploaded">
-<div *ngIf="isExistImage">
+    <button
-  <div mat-dialog-content>
+      mat-raised-button
-    <div *ngIf="uploadFileMessage.length > 0">
+      color="primary"
-      <p class="uploaded-text">Uploaded image details</p>
+      (click)="uploaderImage.queue.length > 0 ? cancelUploading() : dialogRef.close(false)"
-      <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>
+      Cancel
-</div>
+    </button>
-<div mat-dialog-actions align="end">
-    <button  mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
   </div>
 </div>

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

@@ -81,3 +81,4 @@
   }
  
   
+  

src/app/components/image-manager/add-image-dialog/add-image-dialog.component.spec.ts

@@ -14,6 +14,7 @@ import { AddImageDialogComponent } from './add-image-dialog.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ToasterService } from 'app/services/toaster.service';
 import { MockedToasterService } from 'app/services/toaster.service.spec';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 export class MockedImageManagerService {
   public getImages(server: Server) {
@@ -37,7 +38,8 @@ describe('AddImageDialogComponent', () => {
         MatToolbarModule,
         MatMenuModule,
         MatCheckboxModule,
-        MatDialogModule
+        MatDialogModule,
+        MatSnackBarModule
       ],
       providers: [
         { provide: ServerService, useValue: mockedServerService },

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

@@ -1,11 +1,11 @@
-import { Component, DoCheck, Inject, OnInit } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
+import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
 import { Server } from '../../../models/server';
 import { ImageManagerService } from '../../../services/image-manager.service';
-import { Observable, of } from 'rxjs';
+import { ToasterService } from '../../../services/toaster.service';
-import { catchError } from 'rxjs/operators';
-import { ImageData } from '../../../models/images';
 
 @Component({
   selector: 'app-add-image-dialog',
@@ -19,58 +19,93 @@ import { ImageData } from '../../../models/images';
     ]),
   ],
 })
-
+export class AddImageDialogComponent implements OnInit {
-export class AddImageDialogComponent implements OnInit,DoCheck {
   server: Server;
-  uploadedFile: boolean = false;
+  isInstallAppliance: boolean = false;
-  isExistImage: boolean = false;
+  install_appliance: boolean = false;
-  isInstallAppliance: boolean = false
-  install_appliance: boolean = false
   selectFile: any = [];
-  uploadFileMessage: ImageData = []
+  uploaderImage: FileUploader;
-  uploadProgress:number = 0
+  uploadProgress: number = 0;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<AddImageDialogComponent>,
     private imageService: ImageManagerService,
-
+    private toasterService: ToasterService,
+    private uploadServiceService: UploadServiceService
   ) {}
 
-  public ngOnInit(): void {
+  public ngOnInit() {
-    this.server = this.data
+    this.server = this.data;
+
+    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) {
-    this.install_appliance = ev.value
+    this.install_appliance = ev.value;
   }
 
   async uploadImageFile(event) {
-    for (let imgFile of event.target.files) {
+    for (let imgFile of event) {
-      this.selectFile.push(imgFile)
+      this.selectFile.push(imgFile);
     }
-    await this.upload()
+    await this.importImageFile();
   }
 
   // files uploading
-  upload() {
+  importImageFile() {
-    const calls = [];
+    this.selectFile.forEach((event, i) => {
-    this.uploadedFile = true;
+      let fileName = event.name;
-    this.selectFile.forEach(imgElement => {
+      let file = event;
-      calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error))))
+      let fileReader: FileReader = new FileReader();
-    });
+      fileReader.onloadend = () => {
-    this.uploadProgress = calls.length
+        const url = this.imageService.getImagePath(this.server, this.install_appliance, fileName);
-    Observable.forkJoin(calls).subscribe(responses => {
+        const itemToUpload = this.uploaderImage.queue[i];
-      this.uploadFileMessage = responses
+        itemToUpload.url = url;
-      this.uploadedFile = false;
+        if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
-      this.isExistImage = true;
+        (itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }];
+        this.uploaderImage.uploadItem(itemToUpload);
+      };
+      fileReader.readAsText(file);
     });
   }
-  ngDoCheck(){
-    setTimeout(() => {
-      if(this.uploadProgress < 95){
-        this.uploadProgress = this.uploadProgress + 1
-      }
-    }, 100000);
-   
-  }
 }

src/app/components/image-manager/image-manager.component.ts

@@ -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,

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

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

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

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

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

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

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

@@ -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();
     };
@@ -428,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)