Release v3.0.2

Fix error 404 when editing a project

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "3.0.0b3",
+  "version": "3.0.2",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"

scripts/requirements.txt

@@ -1,6 +1,6 @@
-setuptools==65.5.1
+setuptools==71.1.0
 cx_Freeze==5.1.1
-requests==2.31.0
+requests==2.32.3
 packaging==20.9
 appdirs==1.4.4
 psutil==5.8.0

src/app/app.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
   <router-outlet></router-outlet>
-  <app-adbutler></app-adbutler>
+  <!-- <app-adbutler></app-adbutler> -->
 </div>

src/app/cartography/widgets/interface-status.ts

@@ -90,7 +90,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_started_enter)
           .attr('class', 'status_started')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -122,7 +122,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_stopped_enter)
           .attr('class', 'status_stopped')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -154,7 +154,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_suspended_enter)
           .attr('class', 'status_suspended')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)

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

@@ -39,7 +39,7 @@
     <div class="col-md-4 txt-align" *ngIf="uploaderImage.queue.length <= 0">
       <input
         type="file"
-        accept=".bin,.image,.qcow2,.vmdk"
+        accept=".bin,.image,.iol,.qcow2,.vmdk"
         multiple
         #file
         class="non-visible"

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/preferences/docker/docker-template-details/docker-template-details.component.html

@@ -66,6 +66,15 @@
               placeholder="Start command"
             />
           </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="dockerTemplate.mac_address"
+              placeholder="Base MAC"
+            />
+          </mat-form-field>
           <mat-form-field class="form-field">
             <input
               formControlName="adapter"

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html

@@ -67,7 +67,7 @@
             <div *ngIf="newImageSelected">
               <input
                 type="file"
-                accept=".bin"
+                accept=".bin, .image, .iol"
                 #file
                 class="nonvisible"
                 (change)="uploadImageFile($event)"

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html

@@ -61,7 +61,7 @@
           </mat-form-field>
           <input
             type="file"
-            accept=".bin"
+            accept=".bin, .image, .iol"
             #file
             class="nonvisible"
             (change)="uploadImageFile($event)"

src/app/components/project-map/import-appliance/import-appliance.component.ts

@@ -142,7 +142,7 @@ export class ImportApplianceComponent implements OnInit {
       }
       this.template = template;
 
-      const url = this.getUploadPath(this.controller, template.template_type, name);
+      const url = this.getUploadPath(this.controller, name);
       this.uploader.queue.forEach((elem) => (elem.url = url));
       const itemToUpload = this.uploader.queue[0];
       this.uploader.uploadItem(itemToUpload);
@@ -150,7 +150,7 @@ export class ImportApplianceComponent implements OnInit {
     fileReader.readAsText(file);
   }
 
-  private getUploadPath(controller:Controller , emulator: string, filename: string) {
-    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/${emulator}/images/${filename}`;
+  private getUploadPath(controller:Controller , filename: string) {
+    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/images/upload/${filename}`;
   }
 }

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

@@ -266,7 +266,7 @@ export class NewTemplateDialogComponent implements OnInit {
       if (appliance.iou) emulator = 'iou';
       if (appliance.qemu) emulator = 'qemu';
 
-      const url = this.applianceService.getUploadPath(this.controller, emulator, fileName);
+      const url = this.applianceService.getUploadPath(this.controller, fileName);
       this.uploader.queue.forEach((elem) => (elem.url = url));
 
       const itemToUpload = this.uploader.queue[0];
@@ -341,8 +341,6 @@ export class NewTemplateDialogComponent implements OnInit {
     dialogRef.componentInstance.appliance = object;
   }
 
-
-
   importImage(event, imageName) {
     this.computeChecksumMd5(event.target.files[0], false).then((output) => {
       let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];
@@ -359,22 +357,21 @@ export class NewTemplateDialogComponent implements OnInit {
                     The MD5 sum is ${output} and should be ${imageToInstall.md5sum}. Do you want to accept it at your own risks?`;
         dialogRef.afterClosed().subscribe((answer: boolean) => {
           if (answer) {
-            this.importImageFile(event);
+            this.importImageFile(event, imageName);
             this.openSnackBar()
           } else {
             this.uploaderImage.clearQueue();
           }
         });
       } else {
-        this.importImageFile(event);
+        this.importImageFile(event, imageName);
         this.openSnackBar()
       }
     });
   }
 
-  importImageFile(event) {
+  importImageFile(event, imageName) {
     let name = event.target.files[0].name.split('-')[0];
-    let fileName = event.target.files[0].name;
     let file = event.target.files[0];
     let fileReader: FileReader = new FileReader();
     let emulator;
@@ -384,7 +381,7 @@ export class NewTemplateDialogComponent implements OnInit {
       if (this.applianceToInstall.dynamips) emulator = 'dynamips';
       if (this.applianceToInstall.iou) emulator = 'iou';
 
-      const url = this.applianceService.getUploadPath(this.controller, emulator, fileName);
+      const url = this.applianceService.getUploadPath(this.controller, imageName);
       this.uploaderImage.queue.forEach((elem) => (elem.url = url));
 
       const itemToUpload = this.uploaderImage.queue[0];

src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.ts

@@ -21,8 +21,18 @@ export class ReadmeEditorComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.projectService.getReadmeFile(this.controller, this.project.project_id).subscribe(file => {
-            if (file) this.markdown = file;
+        this.projectService.getReadmeFile(this.controller, this.project.project_id).subscribe({
+            next: (file) => {
+                if (file) {
+                    this.markdown = file;
+                }
+            },
+            error: (err) => {
+                if (err.status === 404) {
+                    // File doesn't exist yet, which is fine
+                    this.markdown = '';
+                }
+            }
         });
     }
 }

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/components/user-management/user-management.component.ts

@@ -11,6 +11,7 @@
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
 import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {Location}  from '@angular/common';
 import {ActivatedRoute, Router} from "@angular/router";
 import {Controller} from "@models/controller";
 import {MatSort} from "@angular/material/sort";
@@ -49,7 +50,8 @@ export class UserManagementComponent implements OnInit {
     private progressService: ProgressService,
     private controllerService: ControllerService,
     public dialog: MatDialog,
-    private toasterService: ToasterService) { }
+    private toasterService: ToasterService,
+    private location: Location) { }
 
   ngOnInit() {
     const controllerId = this.route.parent.snapshot.paramMap.get('controller_id');
@@ -88,6 +90,8 @@ export class UserManagementComponent implements OnInit {
       },
       (error) => {
         this.progressService.setError(error);
+        this.toasterService.error(`Cannot open the user management page`);
+        this.location.back();
       }
     );
   }

src/app/layouts/default-layout/default-layout.component.html

@@ -90,4 +90,4 @@
 
 <app-progress></app-progress>
 
-<footer class="footer mat-app-background">GNS3 Web UI &copy; 2022 - v{{ uiVersion }}</footer>
+<footer class="footer mat-app-background">GNS3 Web-UI &copy;2018-{{ currentYear }} v{{ uiVersion }}</footer>

src/app/layouts/default-layout/default-layout.component.ts

@@ -25,6 +25,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   public uiVersion = version;
   public isLoginPage = false;
   public routeSubscription;
+  public currentYear = new Date().getFullYear();
 
   controllerStatusSubscription: Subscription;
   shouldStopControllersOnClosing = true;

src/app/models/templates/docker-template.ts

@@ -11,6 +11,7 @@ export class DockerTemplate {
   console_resolution: string;
   console_type: string;
   aux_type: string;
+  mac_address: string;
   custom_adapters: CustomAdapter[];
   default_name_format: string;
   environment: string;

src/app/services/appliances.service.ts

@@ -17,8 +17,8 @@ export class ApplianceService {
     return this.httpController.get<Appliance>(controller, url) as Observable<Appliance>;
   }
 
-  getUploadPath(controller:Controller , emulator: string, filename: string) {
-    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/images/upload/${filename}?allow_raw_image=true`;
+  getUploadPath(controller:Controller, filename: string) {
+    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/images/upload/${filename}`;
   }
 
   updateAppliances(controller:Controller ): Observable<Appliance[]> {

src/app/services/compute.service.ts

@@ -14,10 +14,6 @@ export class ComputeService {
     return this.httpController.get<Compute[]>(controller, '/computes') as Observable<Compute[]>;
   }
 
-  getUploadPath(controller:Controller , emulator: string, filename: string) {
-    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/${emulator}/images/${filename}`;
-  }
-
   getStatistics(controller:Controller ): Observable<ComputeStatistics[]> {
     return this.httpController.get(controller, `/statistics`);
   }

src/app/services/image-manager.service.ts

@@ -20,10 +20,6 @@ export class ImageManagerService {
     return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/images/upload/${image_path}?install_appliances=${install_appliance}`;
   }
 
-  getUploadPath(controller:Controller , emulator: string, filename: string) {
-    return `${controller.protocol}//${controller.host}:${controller.port}/${environment.current_version}/images/upload/${filename}`;
-  }
-
   uploadedImage(controller :Controller, install_appliance, image_path, flie){
     return this.httpController.post<Image[]>(controller, `/images/upload/${image_path}?install_appliances=${install_appliance}`,flie) as Observable<Image[]>;
   }

src/app/services/mapsettings.service.ts

@@ -37,6 +37,12 @@ export class MapSettingsService {
     } else {
       localStorage.setItem('openReadme', 'false');
     }
+
+    if (localStorage.getItem('showInterfaceLabels')) {
+      this.showInterfaceLabels = localStorage.getItem('showInterfaceLabels') === 'true' ? true : false;
+    } else {
+      localStorage.setItem('showInterfaceLabels', 'true');
+    }
   }
 
   public getSymbolScaling(): boolean {
@@ -78,6 +84,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) {

src/app/services/template-mocks.service.ts

@@ -242,6 +242,7 @@ export class TemplateMocksService {
       console_resolution: '1024x768',
       console_type: 'telnet',
       aux_type: 'none',
+      mac_address: '',
       custom_adapters: [],
       default_name_format: '{name}-{0}',
       environment: '',

src/index.html

@@ -38,7 +38,7 @@
   <body class="mat-app-background" oncontextmenu="return false;">
     <app-root></app-root>
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D6FZL9923"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0BT7QQV1W1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
@@ -46,7 +46,7 @@
       }
       gtag('js', new Date());
 
-      gtag('config', 'G-5D6FZL9923');
+      gtag('config', 'G-0BT7QQV1W1');
     </script>
   </body>
 </html>