Release v2.2.53

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.52",
+  "version": "2.2.53",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "[email protected]"

src/app/components/preferences/common/ports/ports.component.ts

@@ -30,6 +30,7 @@ export class PortsComponent implements OnInit {
   }
 
   onAdd() {
+    this.newPort.name = "Ethernet" + this.newPort.port_number;
     this.ethernetPorts.push(this.newPort);
 
     this.newPort = {

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

@@ -170,7 +170,7 @@ <h1 mat-dialog-title>Add new template</h1>
           </mat-select>
         </div>
         <div>
-          Install required files
+          Install the required files
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -441,7 +441,7 @@ <h1 mat-dialog-title>Add new template</h1>
           </mat-radio-group>
         </div>
         <div>
-          Install required files
+          Install the required images
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -453,10 +453,16 @@ <h1 mat-dialog-title>Add new template</h1>
           <mat-list>
             <mat-list-item *ngFor="let image of applianceToInstall.images">
               <div class="list-item">
-                <div>
+                <span>
                   {{ image.filename }}
-                </div>
+                </span>
                 <div>
+                  <span *ngIf="checkImageFromVersion(image.filename)">
+                    <mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon>
+                  </span>
+                  <span *ngIf="!checkImageFromVersion(image.filename)">
+                    <mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon>
+                  </span>
                   <input
                     type="file"
                     class="non-visible"
@@ -499,7 +505,7 @@ <h1 mat-dialog-title>Add new template</h1>
           </mat-radio-group>
         </div>
         <div>
-          Install required files
+          Install the required images
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -511,9 +517,15 @@ <h1 mat-dialog-title>Add new template</h1>
           <mat-list>
             <mat-list-item *ngFor="let image of applianceToInstall.images">
               <div class="list-item">
-                <div>
+                <span>
                   {{ image.filename }}
-                </div>
+                </span>
+                <span *ngIf="checkImageFromVersion(image.filename)">
+                  <mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon>
+                </span>
+                <span *ngIf="!checkImageFromVersion(image.filename)">
+                  <mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon>
+                </span>
                 <div>
                   <input
                     type="file"

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

@@ -143,7 +143,7 @@ export class NewTemplateDialogComponent implements OnInit {
       this.qemuBinaries = binaries;
     });
 
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
     this.uploader.onAfterAddingFile = (file) => {
       file.withCredentials = false;
     };
@@ -162,7 +162,7 @@ export class NewTemplateDialogComponent implements OnInit {
       this.getAppliance(item.url);
     };
 
-    this.uploaderImage = new FileUploader({});
+    this.uploaderImage = new FileUploader({url: ''});
     this.uploaderImage.onAfterAddingFile = (file) => {
       file.withCredentials = false;
     };

src/app/components/projects/models/projectNameValidator.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class ProjectNameValidator {
   get(projectName) {
-    var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\":<>\?]/);
+    var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\"<>\?]/);
 
     if (!pattern.test(projectName.value)) {
       return null;

src/app/services/mapsettings.service.ts

@@ -31,6 +31,11 @@ export class MapSettingsService {
     } else {
       localStorage.setItem('symbolScaling', 'true');
     }
+    if (localStorage.getItem('showInterfaceLabels')) {
+      this.showInterfaceLabels = localStorage.getItem('showInterfaceLabels') === 'true' ? true : false;
+    } else {
+      localStorage.setItem('showInterfaceLabels', 'true');
+    }
   }
 
   public getSymbolScaling(): boolean {
@@ -72,6 +77,12 @@ export class MapSettingsService {
 
   toggleShowInterfaceLabels(value: boolean) {
     this.showInterfaceLabels = value;
+    localStorage.removeItem('showInterfaceLabels');
+    if (value) {
+      localStorage.setItem('showInterfaceLabels', 'true');
+    } else {
+      localStorage.setItem('showInterfaceLabels', 'false');
+    }
   }
 
   toggleIntegrateInterfaceLabels(value: boolean) {