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

Merge pull request #1326 from GNS3/bugfix/imageProgressBar

Browse Source 
Bugfix/image progress bar
This commit is contained in:
Jeremy Grossmann 2022-06-10 12:08:53 +08:00 committed by GitHub
commit 7d706a39f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1242 additions and 1234 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
}

473
angular.json
View File

@ -1,246 +1,231 @@
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"gns3-web-ui": { "gns3-web-ui": {
"root": "", "root": "",
"sourceRoot": "src", "sourceRoot": "src",
"projectType": "application", "projectType": "application",
"architect": { "architect": {
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"allowedCommonJsDependencies": [ "allowedCommonJsDependencies": [
"rxjs", "rxjs",
"rxjs-compat", "rxjs-compat",
"uuid", "uuid",
"css-tree", "css-tree",
"save-svg-as-png", "save-svg-as-png",
"angular-draggable-droppable", "angular-draggable-droppable",
"dom-set", "dom-set",
"dom-plane", "dom-plane",
"mousetrap", "mousetrap",
"@mattlewis92/dom-autoscroller", "@mattlewis92/dom-autoscroller",
"rxjs/Rx", "rxjs/Rx",
"rxjs/add/operator/map", "rxjs/add/operator/map",
"rxjs-compat/add/operator/map", "rxjs-compat/add/operator/map",
"classnames", "classnames",
"stylenames" "stylenames",
], "source-map-js"
"outputPath": "dist", ],
"index": "src/index.html", "outputPath": "dist",
"main": "src/main.ts", "index": "src/index.html",
"tsConfig": "src/tsconfig.app.json", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json",
"assets": [ "polyfills": "src/polyfills.ts",
"src/assets", "assets": [
"src/favicon.ico", "src/assets",
"src/ReleaseNotes.txt" "src/favicon.ico",
], "src/ReleaseNotes.txt"
"styles": [ ],
"node_modules/bootstrap/dist/css/bootstrap.min.css", "styles": [
"node_modules/notosans-fontface/css/notosans-fontface.min.css", "node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss", "node_modules/notosans-fontface/css/notosans-fontface.min.css",
"src/theme.scss" "src/styles.scss",
], "src/theme.scss"
"scripts": [], ],
"vendorChunk": true, "scripts": [],
"extractLicenses": false, "vendorChunk": true,
"buildOptimizer": true, "extractLicenses": false,
"sourceMap": true, "buildOptimizer": true,
"optimization": false, "sourceMap": true,
"namedChunks": true, "optimization": false,
"aot": true "namedChunks": true,
}, "aot": true
"configurations": { },
"production": { "configurations": {
"budgets": [ "production": {
{ "budgets": [{
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "6kb" "maximumWarning": "6kb"
} }],
], "optimization": true,
"optimization": true, "outputHashing": "all",
"outputHashing": "all", "sourceMap": {
"sourceMap": { "hidden": true,
"hidden": true, "scripts": true,
"scripts": true, "styles": false
"styles": false },
}, "namedChunks": false,
"namedChunks": false, "extractLicenses": true,
"extractLicenses": true, "vendorChunk": false,
"vendorChunk": false, "buildOptimizer": true,
"buildOptimizer": true, "fileReplacements": [{
"fileReplacements": [ "replace": "src/environments/environment.ts",
{ "with": "src/environments/environment.prod.ts"
"replace": "src/environments/environment.ts", }]
"with": "src/environments/environment.prod.ts" },
} "electronProd": {
] "budgets": [{
}, "type": "anyComponentStyle",
"electronProd": { "maximumWarning": "6kb"
"budgets": [ }],
{ "optimization": true,
"type": "anyComponentStyle", "outputHashing": "all",
"maximumWarning": "6kb" "sourceMap": false,
} "namedChunks": false,
], "extractLicenses": true,
"optimization": true, "vendorChunk": false,
"outputHashing": "all", "buildOptimizer": true,
"sourceMap": false, "fileReplacements": [{
"namedChunks": false, "replace": "src/environments/environment.ts",
"extractLicenses": true, "with": "src/environments/environment.electron.prod.ts"
"vendorChunk": false, }]
"buildOptimizer": true, },
"fileReplacements": [ "electronDev": {
{ "budgets": [{
"replace": "src/environments/environment.ts", "type": "anyComponentStyle",
"with": "src/environments/environment.electron.prod.ts" "maximumWarning": "6kb"
} }],
] "fileReplacements": [{
}, "replace": "src/environments/environment.ts",
"electronDev": { "with": "src/environments/environment.electron.ts"
"budgets": [ }]
{ },
"type": "anyComponentStyle", "githubProd": {
"maximumWarning": "6kb" "budgets": [{
} "type": "anyComponentStyle",
], "maximumWarning": "6kb"
"fileReplacements": [ }],
{ "optimization": true,
"replace": "src/environments/environment.ts", "outputHashing": "all",
"with": "src/environments/environment.electron.ts" "sourceMap": false,
} "namedChunks": false,
] "extractLicenses": true,
}, "vendorChunk": false,
"githubProd": { "buildOptimizer": true,
"budgets": [ "fileReplacements": [{
{ "replace": "src/environments/environment.ts",
"type": "anyComponentStyle", "with": "src/environments/environment.github.prod.ts"
"maximumWarning": "6kb" }]
} }
], }
"optimization": true, },
"outputHashing": "all", "serve": {
"sourceMap": false, "builder": "@angular-devkit/build-angular:dev-server",
"namedChunks": false, "options": {
"extractLicenses": true, "browserTarget": "gns3-web-ui:build"
"vendorChunk": false, },
"buildOptimizer": true, "configurations": {
"fileReplacements": [ "production": {
{ "browserTarget": "gns3-web-ui:build:production"
"replace": "src/environments/environment.ts", },
"with": "src/environments/environment.github.prod.ts" "electronProd": {
} "browserTarget": "gns3-web-ui:build:electronProd"
] },
} "electronDev": {
} "browserTarget": "gns3-web-ui:build:electronDev"
}, },
"serve": { "githubProd": {
"builder": "@angular-devkit/build-angular:dev-server", "browserTarget": "gns3-web-ui:build:githubProd"
"options": { }
"browserTarget": "gns3-web-ui:build" }
}, },
"configurations": { "extract-i18n": {
"production": { "builder": "@angular-devkit/build-angular:extract-i18n",
"browserTarget": "gns3-web-ui:build:production" "options": {
}, "browserTarget": "gns3-web-ui:build"
"electronProd": { }
"browserTarget": "gns3-web-ui:build:electronProd" },
}, "test": {
"electronDev": { "builder": "@angular-devkit/build-angular:karma",
"browserTarget": "gns3-web-ui:build:electronDev" "options": {
}, "main": "src/test.ts",
"githubProd": { "karmaConfig": "./karma.conf.js",
"browserTarget": "gns3-web-ui:build:githubProd" "polyfills": "src/polyfills.ts",
} "tsConfig": "src/tsconfig.spec.json",
} "scripts": [],
}, "styles": [
"extract-i18n": { "node_modules/bootstrap/dist/css/bootstrap.min.css",
"builder": "@angular-devkit/build-angular:extract-i18n", "node_modules/notosans-fontface/css/notosans-fontface.min.css",
"options": { "src/styles.scss",
"browserTarget": "gns3-web-ui:build" "src/theme.scss"
} ],
}, "sourceMap": false,
"test": { "assets": [
"builder": "@angular-devkit/build-angular:karma", "src/assets",
"options": { "src/favicon.ico"
"main": "src/test.ts", ]
"karmaConfig": "./karma.conf.js", }
"polyfills": "src/polyfills.ts", },
"tsConfig": "src/tsconfig.spec.json", "lint": {
"scripts": [], "builder": "@angular-devkit/build-angular:tslint",
"styles": [ "options": {
"node_modules/bootstrap/dist/css/bootstrap.min.css", "tsConfig": [
"node_modules/notosans-fontface/css/notosans-fontface.min.css", "src/tsconfig.app.json",
"src/styles.scss", "src/tsconfig.spec.json"
"src/theme.scss" ],
], "exclude": [
"sourceMap": false, "**/node_modules/**",
"assets": [ "**/*.spec.ts"
"src/assets", ]
"src/favicon.ico" }
] }
} },
}, "schematics": {
"lint": { "@schematics/angular:component": {
"builder": "@angular-devkit/build-angular:tslint", "style": "scss"
"options": { }
"tsConfig": [ }
"src/tsconfig.app.json", },
"src/tsconfig.spec.json" "gns3-web-ui-e2e": {
], "root": "e2e",
"exclude": [ "sourceRoot": "e2e",
"**/node_modules/**", "projectType": "application",
"**/*.spec.ts" "architect": {
] "e2e": {
} "builder": "@angular-devkit/build-angular:protractor",
} "options": {
}, "protractorConfig": "./protractor.conf.js",
"schematics": { "devServerTarget": "gns3-web-ui:serve"
"@schematics/angular:component": { }
"style": "scss" },
} "lint": {
} "builder": "@angular-devkit/build-angular:tslint",
}, "options": {
"gns3-web-ui-e2e": { "tsConfig": [
"root": "e2e", "e2e/tsconfig.e2e.json"
"sourceRoot": "e2e", ],
"projectType": "application", "exclude": [
"architect": { "**/node_modules/**"
"e2e": { ]
"builder": "@angular-devkit/build-angular:protractor", }
"options": { }
"protractorConfig": "./protractor.conf.js", }
"devServerTarget": "gns3-web-ui:serve" }
} },
}, "defaultProject": "gns3-web-ui",
"lint": { "schematics": {
"builder": "@angular-devkit/build-angular:tslint", "@schematics/angular:component": {
"options": { "prefix": "app",
"tsConfig": [ "style": "scss"
"e2e/tsconfig.e2e.json" },
], "@schematics/angular:directive": {
"exclude": [ "prefix": "app"
"**/node_modules/**" }
] },
} "cli": {
} "analytics": false
} }
}
},
"defaultProject": "gns3-web-ui",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": false
}
} }

7
package.json
View File

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

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

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

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

@ -10,61 +10,96 @@
</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>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="isInstallAppliance =!isInstallAppliance">Next</button> <button mat-raised-button color="primary" (click)="isInstallAppliance = !isInstallAppliance">Next</button>
</div> </div>
</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"> <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>
<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> <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="{{uploaderImage.queue.length > 0 ? 'col-md-6 txt-align' : 'col-md-2 txt-align'}} ">
<button mat-button (click)="dialogRef.close()"> <button mat-button (click)="dialogRef.close()">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</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" *ngFor="let img of uploaderImage.queue; let i = index">
<div class="row"> <div class="{{img.isError || img.isUploaded ? 'col-md-10' : 'col-md-6'}}">
<div class="col-md-12"> <mat-title [ngClass]="{ 'uploaded-error-text': img.isError }">
<div *ngIf="uploadedFile"> {{ i + 1 }}. {{ img.isError ? 'Image ' : '' }} {{ img?.some?.name }}
<mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100"> {{ img.isError ? ' already exists' : '' }}
</mat-progress-bar> </mat-title>
</div> </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"
>
</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>
</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"> </div>
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
</div>
</div> </div>

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

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

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

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

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

@ -1,11 +1,11 @@
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, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; 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 { Server } from '../../../models/server';
import { ImageManagerService } from '../../../services/image-manager.service'; 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({ @Component({
selector: 'app-add-image-dialog', 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; server: Server;
uploadedFile: boolean = false; isInstallAppliance: boolean = false;
isExistImage: boolean = false; install_appliance: boolean = false;
isInstallAppliance: boolean = false
install_appliance: boolean = false
selectFile: any = []; selectFile: any = [];
uploadFileMessage: ImageData = [] uploaderImage: FileUploader;
uploadProgress:number = 0 uploadProgress: number = 0;
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,
private toasterService: ToasterService,
private uploadServiceService: UploadServiceService
) {}
) { } public ngOnInit() {
this.server = this.data;
public ngOnInit(): void { this.uploaderImage = new FileUploader({});
this.server = this.data 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) { 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) {
this.selectFile.push(imgFile) this.selectFile.push(imgFile);
} }
await this.upload() await this.importImageFile();
} }
// files uploading // 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 = () => {
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.uploadProgress = calls.length
Observable.forkJoin(calls).subscribe(responses => {
this.uploadFileMessage = responses
this.uploadedFile = false;
this.isExistImage = true;
});
}
ngDoCheck(){
setTimeout(() => {
if(this.uploadProgress < 95){
this.uploadProgress = this.uploadProgress + 1
}
}, 100000);
} }
} }

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

@ -123,7 +123,7 @@ export class ImageManagerComponent implements OnInit {
deleteAllFiles() { deleteAllFiles() {
const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, { const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, {
width: '500px', width: '550px',
maxHeight: '650px', maxHeight: '650px',
autoFocus: false, autoFocus: false,
disableClose: true, 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() { cancelUploading() {
this.uploader.clearQueue(); this.uploader.clearQueue();
this.uploadServiceService.processBarCount(100) this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image upload cancelled'); this.toasterService.warning('Image upload cancelled');
// this.uploadServiceService.cancelFileUploading(false) // this.uploadServiceService.cancelFileUploading(false)
// window.location.reload() // 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() { cancelUploading() {
this.uploader.clearQueue(); this.uploader.clearQueue();
this.uploadServiceService.processBarCount(100) this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image Uploading canceled'); this.toasterService.warning('Image Uploading canceled');
this.uploadServiceService.cancelFileUploading(false) 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" 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"
/> />

4
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, 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();
}; };
@ -428,7 +428,7 @@ export class NewTemplateDialogComponent implements OnInit {
cancelUploading() { cancelUploading() {
this.uploaderImage.clearQueue(); this.uploaderImage.clearQueue();
this.uploadServiceService.processBarCount(100) this.uploadServiceService.processBarCount(null)
this.toasterService.warning('Image upload cancelled'); this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false) this.uploadServiceService.cancelFileUploading(false)

1740
yarn.lock
View File

File diff suppressed because it is too large Load Diff