Merge pull request #1368 from GNS3/enhancement/1360

Enhancement/1360

package.json

@@ -17,7 +17,7 @@
     "start": "ng serve",
     "startforelectron": "ng serve --configuration=electronDev",
     "build": "ng build",
-    "buildforproduction": "ng build --source-map=false --build-optimizer --configuration=production --base-href /static/web-ui/",
+    "buildforproduction": "ng build --source-map=false --configuration=production --base-href /static/web-ui/",
     "buildforelectron": "ng build --configuration=electronProd",
     "buildforgithub": "ng build --configuration=githubProd",
     "test": "ng test",

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

@@ -71,3 +71,6 @@
 .selection-group {
   padding-bottom: 20px;
 }
+.non-visible {
+  display: none;
+}

src/app/components/project-map/project-map.component.html

@@ -83,25 +83,18 @@
 
     <!-- GNS3 menu -->
     <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
-      <button mat-menu-item [routerLink]="['/controller', controller.id, 'projects']">
-        <mat-icon>work</mat-icon>
-        <span>Go to projects</span>
-      </button>
       <button mat-menu-item [routerLink]="['/controllers']">
         <mat-icon>developer_board</mat-icon>
-        <span>Go to controllers</span>
+        <span>Controllers</span>
       </button>
+      <button mat-menu-item [routerLink]="['/controller', controller.id, 'projects']">
+        <mat-icon>work</mat-icon>
+        <span>Projects</span>
+      </button>
+      
       <button mat-menu-item routerLink="/controller/{{ controller.id }}/preferences">
         <mat-icon>settings_applications</mat-icon>
-        <span>Go to preferences</span>
-      </button>
-      <button mat-menu-item routerLink="/controller/{{ controller.id }}/systemstatus">
-        <mat-icon>info</mat-icon>
-        <span>Go to system status</span>
-      </button>
-      <button mat-menu-item routerLink="/settings">
-        <mat-icon>settings</mat-icon>
-        <span>Go to settings</span>
+        <span>Template preferences</span>
       </button>
       <button mat-menu-item [routerLink]="['/controller', controller.id, 'image-manager']">
         <mat-icon>collections</mat-icon>

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

@@ -1,67 +1,53 @@
 <header>
   <mat-toolbar color="primary">
-    <button mat-icon-button><mat-icon svgIcon="gns3"></mat-icon></button>
+    <button mat-icon-button *ngIf="!isLoginPage && router.url == '/controllers'">
+      <mat-icon svgIcon="gns3"></mat-icon>
+    </button>
+    <button *ngIf="!isLoginPage && router.url != '/controllers'"  mat-icon-button matTooltip="Open menu" matTooltipClass="custom-tooltip" [matMenuTriggerFor]="mainMenu">
+      <mat-icon svgIcon="gns3"></mat-icon>
+    </button>
 
-    <button mat-button routerLink="/controllers">Controllers</button>
 
     <button *ngIf="!recentlyOpenedProjectId && controllerIdProjectList" mat-button (click)="listProjects()">
       Projects
     </button>
 
-    <button *ngIf="recentlyOpenedProjectId && recentlyOpenedcontrollerId && !isLoginPage" mat-button (click)="backToProject()">
+    <button
+      *ngIf="recentlyOpenedProjectId && recentlyOpenedcontrollerId && !isLoginPage"
+      mat-button
+      (click)="backToProject()"
+    >
       Back to project
     </button>
 
     <span class="fill-space"></span>
 
-    <button mat-button *ngIf="!isLoginPage && router.url !='/controllers'" [matMenuTriggerFor]="menu">
+    <button mat-button *ngIf="!isLoginPage && router.url != '/controllers'" [matMenuTriggerFor]="menu">
       <mat-icon>more_vert</mat-icon>
     </button>
-
+<!-- GNS3 right menu  -->
     <mat-menu #menu="matMenu">
-      <button mat-menu-item
-              [disabled]="!controllerId"
-              [routerLink]="['controller', controllerId, 'systemstatus']">
+      <button mat-menu-item [disabled]="!controllerId" [routerLink]="['controller', controllerId, 'systemstatus']">
         <mat-icon>info</mat-icon>
         <span>System status</span>
       </button>
-      <button mat-menu-item
-              [disabled]="!controllerId"
-              [routerLink]="['controller', controllerId, 'preferences']">
-        <mat-icon>settings_applications</mat-icon>
-        <span>Template preferences</span>
-      </button>
-      <button mat-menu-item
-              [disabled]="!controllerId"
-              [routerLink]="['controller', controllerId, 'image-manager']">
-
-        <mat-icon>collections</mat-icon>
-        <span>Image manager</span>
-      </button>
-      <button mat-menu-item
-      [disabled]="!controllerId"
-      [routerLink]="['controller', controllerId, 'settings']"
-      >
+      <button mat-menu-item [disabled]="!controllerId" [routerLink]="['controller', controllerId, 'settings']">
         <mat-icon>settings</mat-icon>
         <span>Settings</span>
       </button>
-      <button mat-menu-item
-              [disabled]="!controllerId"
-              [routerLink]="['controller', controllerId, 'management', 'users']">
+      <button
+        mat-menu-item
+        [disabled]="!controllerId"
+        [routerLink]="['controller', controllerId, 'management', 'users']"
+      >
         <mat-icon>groups</mat-icon>
         <span>Management</span>
       </button>
-      <button mat-menu-item 
-      [disabled]="!controllerId"
-      [routerLink]="['controller', controllerId, 'help']"
-      >
+      <button mat-menu-item [disabled]="!controllerId" [routerLink]="['controller', controllerId, 'help']">
         <mat-icon>help</mat-icon>
         <span>Help</span>
       </button>
-      <button
-        [disabled]="!controllerId"
-        [routerLink]="['/controller', controllerId, 'loggeduser']"
-        mat-menu-item>
+      <button [disabled]="!controllerId" [routerLink]="['/controller', controllerId, 'loggeduser']" mat-menu-item>
         <mat-icon>person</mat-icon>
         <span>User info</span>
       </button>
@@ -74,6 +60,29 @@
         <span>Logout</span>
       </button>
     </mat-menu>
+    <!-- GNS3 left menu -->
+    <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
+      <button mat-menu-item [routerLink]="['/controllers']">
+        <mat-icon>developer_board</mat-icon>
+        <span>Controllers</span>
+      </button>
+      <button mat-menu-item [routerLink]="['/controller', controllerId, 'projects']">
+        <mat-icon>work</mat-icon>
+        <span>Projects</span>
+      </button>
+      <button mat-menu-item [disabled]="!controllerId" [routerLink]="['controller', controllerId, 'preferences']">
+        <mat-icon>settings_applications</mat-icon>
+        <span>Template preferences</span>
+      </button>
+      <button mat-menu-item [disabled]="!controllerId" [routerLink]="['controller', controllerId, 'image-manager']">
+        <mat-icon>collections</mat-icon>
+        <span>Image manager</span>
+      </button>
+      <button mat-menu-item (click)="addNewTemplate()">
+        <mat-icon>control_point</mat-icon>
+        <span>New template</span>
+      </button>
+    </mat-menu>
   </mat-toolbar>
 </header>
 

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

@@ -1,21 +1,24 @@
+import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ControllerService } from '../../services/controller.service';
+import { ProjectService } from '../../services/project.service';
+import { MockedProjectService } from '../../services/project.service.spec';
 import { ElectronService } from 'ngx-electron';
 import { Subject } from 'rxjs';
 import { ProgressComponent } from '../../common/progress/progress.component';
 import { ProgressService } from '../../common/progress/progress.service';
-import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { ControllerManagementService, ControllerStateEvent } from '../../services/controller-management.service';
+import { ControllerService } from '../../services/controller.service';
+import { ControllerErrorHandler, HttpController } from '../../services/http-controller.service';
+import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { ToasterService } from '../../services/toaster.service';
 import { MockedToasterService } from '../../services/toaster.service.spec';
 import { DefaultLayoutComponent } from './default-layout.component';
-import { HttpController, ControllerErrorHandler } from '../../services/http-controller.service';
-import { HttpClientModule } from '@angular/common/http';
 
 class ElectronServiceMock {
   public isElectronApp: boolean;
@@ -35,13 +38,21 @@ describe('DefaultLayoutComponent', () => {
   let httpController: HttpController;
   let errorHandler: ControllerErrorHandler;
 
-  beforeEach(async() => {
+  beforeEach(async () => {
     electronServiceMock = new ElectronServiceMock();
     controllerManagementService.controllerStatusChanged = new Subject<ControllerStateEvent>();
 
     await TestBed.configureTestingModule({
       declarations: [DefaultLayoutComponent, ProgressComponent],
-      imports: [MatIconModule, MatMenuModule, MatToolbarModule, HttpClientModule, RouterTestingModule, MatProgressSpinnerModule],
+      imports: [
+        MatIconModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatToolbarModule,
+        HttpClientModule,
+        RouterTestingModule,
+        MatProgressSpinnerModule,
+      ],
       providers: [
         {
           provide: ElectronService,
@@ -51,6 +62,8 @@ describe('DefaultLayoutComponent', () => {
           provide: ControllerManagementService,
           useValue: controllerManagementService,
         },
+        { provide: ProjectService, useClass: MockedProjectService },
+
         {
           provide: ToasterService,
           useClass: MockedToasterService,
@@ -62,6 +75,8 @@ describe('DefaultLayoutComponent', () => {
         { provide: ControllerService },
         { provide: HttpController },
         { provide: ControllerErrorHandler },
+        { provide: MatDialogRef, useValue: {}},
+        { provide: MAT_DIALOG_DATA, useValue: {}},
         ProgressService,
       ],
     }).compileComponents();

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

@@ -1,15 +1,18 @@
 import { Component, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { NavigationEnd } from '@angular/router';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { ControllerService } from '../../services/controller.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ProjectService } from '@services/project.service';
 import { ElectronService } from 'ngx-electron';
 import { Subscription } from 'rxjs';
 import { ProgressService } from '../../common/progress/progress.service';
-import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
+import { NewTemplateDialogComponent } from '../../components/project-map/new-template-dialog/new-template-dialog.component';
+import { Controller } from '../../models/controller';
+import { Project } from '../../models/project';
 import { ControllerManagementService } from '../../services/controller-management.service';
+import { ControllerService } from '../../services/controller.service';
+import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { ToasterService } from '../../services/toaster.service';
 import { version } from './../../version';
-import { Controller } from '../../models/controller';
 
 @Component({
   selector: 'app-default-layout',
@@ -29,6 +32,9 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   recentlyOpenedProjectId: string;
   controllerIdProjectList: string;
   controllerId: string | undefined | null;
+  public controller: Controller;
+  public project: Project;
+  private projectMapSubscription: Subscription = new Subscription();
 
   constructor(
     private electronService: ElectronService,
@@ -36,19 +42,21 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     private controllerManagement: ControllerManagementService,
     private toasterService: ToasterService,
     private progressService: ProgressService,
+    private dialog: MatDialog,
     public router: Router,
     private route: ActivatedRoute,
-    private controllerService: ControllerService
+    private controllerService: ControllerService,
+    private projectService: ProjectService
   ) {
     this.router.events.subscribe((data) => {
       if (data instanceof NavigationEnd) {
-        this.controllerId = this.route.children[0].snapshot.paramMap.get("controller_id");
+        this.controllerId = this.route.children[0].snapshot.paramMap.get('controller_id');
+        this.getData();
       }
     });
   }
 
   ngOnInit() {
-
     this.checkIfUserIsLoginPage();
     this.routeSubscription = this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) this.checkIfUserIsLoginPage();
@@ -61,16 +69,18 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.isInstalledSoftwareAvailable = this.electronService.isElectronApp;
 
     // attach to notification stream when any of running local controllers experienced issues
-    this.controllerStatusSubscription = this.controllerManagement.controllerStatusChanged.subscribe((controllerStatus) => {
-      if (controllerStatus.status === 'errored') {
-        console.error(controllerStatus.message);
-        this.toasterService.error(controllerStatus.message);
+    this.controllerStatusSubscription = this.controllerManagement.controllerStatusChanged.subscribe(
+      (controllerStatus) => {
+        if (controllerStatus.status === 'errored') {
+          console.error(controllerStatus.message);
+          this.toasterService.error(controllerStatus.message);
+        }
+        if (controllerStatus.status === 'stderr') {
+          console.error(controllerStatus.message);
+          this.toasterService.error(controllerStatus.message);
+        }
       }
-      if (controllerStatus.status === 'stderr') {
-        console.error(controllerStatus.message);
-        this.toasterService.error(controllerStatus.message);
-      }
-    });
+    );
 
     // stop controllers only when in Electron
     this.shouldStopControllersOnClosing = this.electronService.isElectronApp;
@@ -83,7 +93,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   }
 
   checkIfUserIsLoginPage() {
-    if (this.router.url.includes("login")) {
+    if (this.router.url.includes('login')) {
       this.isLoginPage = true;
     } else {
       this.isLoginPage = false;
@@ -93,7 +103,9 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   logout() {
     this.controllerService.get(+this.controllerId).then((controller: Controller) => {
       controller.authToken = null;
-      this.controllerService.update(controller).then(val => this.router.navigate(['/controller', controller.id, 'login']));
+      this.controllerService
+        .update(controller)
+        .then((val) => this.router.navigate(['/controller', controller.id, 'login']));
     });
   }
 
@@ -123,6 +135,23 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     window.close();
     return false;
   }
+  getData() {
+    this.controllerService.get(+this.controllerId).then((controller: Controller) => {
+      this.controller = controller;
+    });
+  }
+
+  public addNewTemplate() {
+    const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
+      width: '1000px',
+      maxHeight: '700px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.controller = this.controller;
+    instance.project = this.project;
+  }
 
   ngOnDestroy() {
     this.controllerStatusSubscription.unsubscribe();