From 4de4471d736caa7f302f6d97a5c36a4c5a26fcbc Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Tue, 11 Feb 2020 17:16:47 +0100
Subject: [PATCH 01/11] On push strategy for project map components

---
 .../project-map/nodes-menu/nodes-menu.component.ts |  5 +++--
 .../project-map-menu/project-map-menu.component.ts |  6 +++---
 .../topology-summary/topology-summary.component.ts |  5 +++--
 src/main.ts                                        | 14 ++++++++++----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/components/project-map/nodes-menu/nodes-menu.component.ts b/src/app/components/project-map/nodes-menu/nodes-menu.component.ts
index 93ae7f11..0c9a1d2c 100644
--- a/src/app/components/project-map/nodes-menu/nodes-menu.component.ts
+++ b/src/app/components/project-map/nodes-menu/nodes-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, ChangeDetectionStrategy } from "@angular/core";
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { NodeService } from '../../../services/node.service';
@@ -11,7 +11,8 @@ import { ServerService } from '../../../services/server.service';
 @Component({
     selector: 'app-nodes-menu',
     templateUrl: './nodes-menu.component.html',
-    styleUrls: ['./nodes-menu.component.scss']
+    styleUrls: ['./nodes-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NodesMenuComponent {
     @Input('project') project: Project;
diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
index 86fcb6fb..388501fd 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
@@ -14,11 +14,11 @@ import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/scre
 import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
 import { ThemeService } from '../../../services/theme.service';
 
-
 @Component({
     selector: 'app-project-map-menu',
     templateUrl: './project-map-menu.component.html',
-    styleUrls: ['./project-map-menu.component.scss']
+    styleUrls: ['./project-map-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectMapMenuComponent implements OnInit, OnDestroy {
     @Input() project: Project;
diff --git a/src/app/components/topology-summary/topology-summary.component.ts b/src/app/components/topology-summary/topology-summary.component.ts
index d69ca2e6..0afbbe9c 100644
--- a/src/app/components/topology-summary/topology-summary.component.ts
+++ b/src/app/components/topology-summary/topology-summary.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { Project } from '../../models/project';
 import { Server } from '../../models/server';
 import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
@@ -16,7 +16,8 @@ import { ThemeService } from '../../services/theme.service';
 @Component({
     selector: 'app-topology-summary',
     templateUrl: './topology-summary.component.html',
-    styleUrls: ['./topology-summary.component.scss']
+    styleUrls: ['./topology-summary.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Default
 })
 export class TopologySummaryComponent implements OnInit, OnDestroy {
     @Input() server: Server;
diff --git a/src/main.ts b/src/main.ts
index 08e893ab..d5268bc1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,20 @@
 import 'hammerjs';
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, ApplicationRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { enableDebugTools } from '@angular/platform-browser';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .then(moduleRef => {
+    const applicationRef = moduleRef.injector.get(ApplicationRef);
+    const componentRef = applicationRef.components[0];
+    // allows to run `ng.profiler.timeChangeDetection();`
+    enableDebugTools(componentRef);
+  })
+  .catch(err => console.log(err));

From b28f224fdd88b74b85d932e03cafbab598446bf7 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Thu, 13 Feb 2020 11:26:27 +0100
Subject: [PATCH 02/11] Getters in code instead of extended ngClass in HTML
 files

---
 .../project-map-menu.component.html            |  6 +++---
 .../project-map-menu.component.ts              | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.html b/src/app/components/project-map/project-map-menu/project-map-menu.component.html
index c86e770d..3834d991 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.html
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.html
@@ -3,7 +3,7 @@
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('text')">
-    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isTextChosen && isLightThemeEnabled, marked: drawTools.isTextChosen}">create</mat-icon>
+    <mat-icon [ngClass]="getCssClassForIcon('text')">create</mat-icon>
 </button>
 <input
     type="file"
@@ -23,14 +23,14 @@
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('rectangle')">
-    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isRectangleChosen && isLightThemeEnabled, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
+    <mat-icon [ngClass]="getCssClassForIcon('rectangle')">crop_3_2</mat-icon>
 </button>
 <button
     matTooltip="Draw an ellipse"
     mat-icon-button
     class="menu-button"
     (click)="addDrawing('ellipse')">
-    <mat-icon [ngClass]="{unmarkedLight: !drawTools.isEllipseChosen && isLightThemeEnabled, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
+    <mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
 </button>
 <button *ngIf="!isLightThemeEnabled"
     matTooltip="Draw a line" 
diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
index 86fcb6fb..df26b4cf 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@@ -47,6 +47,24 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
         this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
     }
 
+    getCssClassForIcon(type: string) {
+        if (type === 'text') {
+            return {
+                'unmarkedLight': !this.drawTools.isTextChosen && this.isLightThemeEnabled, 
+                'marked': this.drawTools.isTextChosen
+            };
+        } else if (type === 'rectangle') {
+            return {
+                'unmarkedLight': !this.drawTools.isRectangleChosen && this.isLightThemeEnabled, 
+                'marked': this.drawTools.isRectangleChosen
+            };
+        }
+        return {
+            'unmarkedLight': !this.drawTools.isEllipseChosen && this.isLightThemeEnabled, 
+            'marked': this.drawTools.isEllipseChosen
+        };
+    }
+
     public takeScreenshot() {
         const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
             width: '400px',

From a1476384e60e820280d1a3ef141ca59283af0bfa Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Fri, 14 Feb 2020 15:40:06 +0100
Subject: [PATCH 03/11] One subscription instead of many subscriptions

---
 .../project-map/project-map.component.ts      | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 99bd4865..a31ea2ad 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -109,7 +109,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
   @ViewChild(ProjectMapMenuComponent, {static: false}) projectMapMenuComponent: ProjectMapMenuComponent;
 
-  private subscriptions: Subscription[] = [];
+  private projectMapSubscription: Subscription =  new Subscription();
 
   constructor(
     private route: ActivatedRoute,
@@ -210,22 +210,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         );
     });
 
-    this.subscriptions.push(routeSub);
+    this.projectMapSubscription.add(routeSub);
 
-    this.subscriptions.push(
+    this.projectMapSubscription.add(
       this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
         if (this.scrollEnabled) this.centerCanvas();
       })
     );
 
-    this.subscriptions.push(
+    this.projectMapSubscription.add(
       this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
         this.drawings = drawings;
         this.mapChangeDetectorRef.detectChanges();
       })
     );
 
-    this.subscriptions.push(
+    this.projectMapSubscription.add(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
         if (!this.server) return;
         nodes.forEach((node: Node) => {
@@ -237,21 +237,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       })
     );
 
-    this.subscriptions.push(
+    this.projectMapSubscription.add(
       this.linksDataSource.changes.subscribe((links: Link[]) => {
         this.links = links;
         this.mapChangeDetectorRef.detectChanges();
       })
     );
 
-    this.subscriptions.push(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
+    this.projectMapSubscription.add(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
       this.showMessage({
           type: 'error',
           message: message
       });
     }));
 
-    this.subscriptions.push(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
+    this.projectMapSubscription.add(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
         this.showMessage({
             type: 'warning',
             message: message
@@ -323,7 +323,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
         this.progressService.deactivate();
       });
-    this.subscriptions.push(subscription);
+      this.projectMapSubscription.add(subscription);
   }
 
   setUpProjectWS(project: Project) {
@@ -408,14 +408,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.contextMenu.openMenuForListOfElements(drawings, nodes, labels, links, event.pageY, event.pageX);
     });
 
-    this.subscriptions.push(onLinkContextMenu);
-    this.subscriptions.push(onEthernetLinkContextMenu);
-    this.subscriptions.push(onSerialLinkContextMenu);
-    this.subscriptions.push(onNodeContextMenu);
-    this.subscriptions.push(onDrawingContextMenu);
-    this.subscriptions.push(onContextMenu);
-    this.subscriptions.push(onLabelContextMenu);
-    this.subscriptions.push(onInterfaceLabelContextMenu);
+    this.projectMapSubscription.add(onLinkContextMenu);
+    this.projectMapSubscription.add(onEthernetLinkContextMenu);
+    this.projectMapSubscription.add(onSerialLinkContextMenu);
+    this.projectMapSubscription.add(onNodeContextMenu);
+    this.projectMapSubscription.add(onDrawingContextMenu);
+    this.projectMapSubscription.add(onContextMenu);
+    this.projectMapSubscription.add(onLabelContextMenu);
+    this.projectMapSubscription.add(onInterfaceLabelContextMenu);
     this.mapChangeDetectorRef.detectChanges();
   }
 
@@ -829,7 +829,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     if (this.ws) {
       if (this.ws.OPEN) this.ws.close();
     }
-    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+    this.projectMapSubscription.unsubscribe();
   }
 }
 

From 2e851cd6d27dd4ccd527ca3ea5a2bc4c95ee4806 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 17 Feb 2020 11:48:25 +0100
Subject: [PATCH 04/11] Project name as page title

---
 src/app/app.module.ts                                   | 5 +++--
 src/app/components/project-map/project-map.component.ts | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 55735f9c..428039ff 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import * as Raven from 'raven-js';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule, ErrorHandler } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -538,7 +538,8 @@ if (environment.production) {
     NotificationService,
     Gns3vmService,
     ThemeService,
-    GoogleAnalyticsService
+    GoogleAnalyticsService,
+    Title
   ],
   entryComponents: [
     AddServerDialogComponent,
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 99bd4865..7d679810 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -66,6 +66,7 @@ import { ConfirmationBottomSheetComponent } from '../projects/confirmation-botto
 import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
 import { NotificationService } from '../../services/notification.service';
 import { ThemeService } from '../../services/theme.service';
+import { Title } from '@angular/platform-browser';
 
 
 @Component({
@@ -153,7 +154,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private serialLinkWidget: SerialLinkWidget,
     private bottomSheet: MatBottomSheet,
     private notificationService: NotificationService,
-    private themeService: ThemeService
+    private themeService: ThemeService,
+    private title: Title
   ) {}
 
   ngOnInit() {
@@ -178,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
           }),
           mergeMap((project: Project) => {
             this.project = project;
+            this.title.setTitle(this.project.name);
 
             if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
               this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
@@ -819,6 +822,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public ngOnDestroy() {
+    this.title.setTitle('GNS3 Web UI');
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();
     this.linksDataSource.clear();

From 6413c2fdece5f4dd7ef47e2908d5a1551fc2147d Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 17 Feb 2020 15:53:41 +0100
Subject: [PATCH 05/11] Scroll position restoration

---
 src/app/app-routing.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0f7167c2..78411df4 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -149,7 +149,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

From 156096a948df9e4c7ef21c6402e036aa0c76b874 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Thu, 20 Feb 2020 09:58:16 +0100
Subject: [PATCH 06/11] Update qemu-configuration.service.ts

---
 src/app/services/qemu-configuration.service.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/services/qemu-configuration.service.ts b/src/app/services/qemu-configuration.service.ts
index 3e73903d..e30f4a5b 100644
--- a/src/app/services/qemu-configuration.service.ts
+++ b/src/app/services/qemu-configuration.service.ts
@@ -7,7 +7,7 @@ export class QemuConfigurationService {
     }
 
     getDiskInterfaces() {
-        return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'none'];
+        return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'nvme', 'none'];
     }
 
     getNetworkTypes() {
@@ -33,7 +33,12 @@ export class QemuConfigurationService {
         //     ["virtio-net-pci", "Paravirtualized Network I/O"],
         //     ["vmxnet3", "VMWare Paravirtualized Ethernet v3"]];
 
-        let networkTypes = ["e1000", "Intel Gigabit Ethernet",
+        let networkTypes = ["e1000",
+            "e1000-82544gc",
+            "e1000-82545em",
+            "e1000e",
+            "rocker",
+            "Intel Gigabit Ethernet",
             "i82550",
             "i82551",
             "i82557a",

From 2396bef0cc615be2e974bcb7c49395c2fb20121e Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Thu, 20 Feb 2020 12:17:36 +0100
Subject: [PATCH 07/11] Disable click outside of angular material dialog area
 to close the dialog

---
 .../progress-dialog/progress-dialog.service.ts       |  3 ++-
 .../delete-template.component.ts                     |  3 ++-
 .../change-symbol/change-symbol-action.component.ts  |  3 ++-
 .../actions/config-action/config-action.component.ts |  3 ++-
 .../edit-config/edit-config-action.component.ts      |  3 ++-
 .../edit-style-action/edit-style-action.component.ts |  3 ++-
 .../edit-text-action/edit-text-action.component.ts   |  3 ++-
 .../export-config/export-config-action.component.ts  |  3 ++-
 .../import-config/import-config-action.component.ts  |  3 ++-
 .../packet-filters-action.component.ts               |  3 ++-
 .../show-node-action/show-node-action.component.ts   |  3 ++-
 .../start-capture/start-capture-action.component.ts  |  3 ++-
 .../configurator/qemu/configurator-qemu.component.ts |  3 ++-
 .../packet-filters/packet-filters.component.ts       |  3 ++-
 .../project-map-menu/project-map-menu.component.ts   |  3 ++-
 .../components/project-map/project-map.component.ts  | 12 ++++++++----
 .../add-blank-project-dialog.component.ts            |  3 ++-
 .../import-project-dialog.component.ts               |  3 ++-
 src/app/components/projects/projects.component.ts    | 12 ++++++++----
 src/app/components/servers/servers.component.ts      |  3 ++-
 .../snapshot-menu-item.component.ts                  |  3 ++-
 src/app/components/template/template.component.ts    |  3 ++-
 22 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/app/common/progress-dialog/progress-dialog.service.ts b/src/app/common/progress-dialog/progress-dialog.service.ts
index ab7e4462..5f0f12e1 100644
--- a/src/app/common/progress-dialog/progress-dialog.service.ts
+++ b/src/app/common/progress-dialog/progress-dialog.service.ts
@@ -9,7 +9,8 @@ export class ProgressDialogService {
   public open() {
     const ref = this.dialog.open(ProgressDialogComponent, {
       width: '250px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     return ref;
   }
diff --git a/src/app/components/preferences/common/delete-template-component/delete-template.component.ts b/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
index b300866a..098f6967 100644
--- a/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
+++ b/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
@@ -27,7 +27,8 @@ export class DeleteTemplateComponent {
             data: {
                 templateName: templateName
             },
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
         });
       
         dialogRef.afterClosed().subscribe((answer: boolean) => {
diff --git a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
index af4f8d67..46761ed9 100644
--- a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
@@ -20,7 +20,8 @@ export class ChangeSymbolActionComponent implements OnInit {
     const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
         width: '1000px',
         height: '500px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
       });
       let instance = dialogRef.componentInstance;
       instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
index f732f445..28fb67de 100644
--- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
@@ -27,7 +27,8 @@ export class ConfigActionComponent {
   @Input() node: Node;
   private conf = {
     autoFocus: false,
-    width: '800px'
+    width: '800px',
+    disableClose: true
   };
   dialogRef;
 
diff --git a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
index de87c525..59299bd8 100644
--- a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
@@ -20,7 +20,8 @@ export class EditConfigActionComponent {
         const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
             width: '600px',
             height: '500px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
         });
         let instance = dialogRef.componentInstance;
         instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
index 36b30cd7..6f22d7a3 100644
--- a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
@@ -25,7 +25,8 @@ export class EditStyleActionComponent implements OnChanges {
   editStyle() {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
       width: '800px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
index 219c475b..f7314709 100644
--- a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
@@ -29,7 +29,8 @@ export class EditTextActionComponent implements OnInit {
   editText() {
     const dialogRef = this.dialog.open(TextEditorDialogComponent, {
       width: '300px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
index edc77de2..42c502ec 100644
--- a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
@@ -26,7 +26,8 @@ export class ExportConfigActionComponent {
         } else {
             const dialogRef = this.dialog.open(ConfigDialogComponent, {
                 width: '500px',
-                autoFocus: false
+                autoFocus: false,
+                disableClose: true
             });
             let instance = dialogRef.componentInstance;
             dialogRef.afterClosed().subscribe((configType: string) => {
diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
index 830d02ee..3e6fde6f 100644
--- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
@@ -27,7 +27,8 @@ export class ImportConfigActionComponent {
         if (this.node.node_type !== 'vpcs') {
             const dialogRef = this.dialog.open(ConfigDialogComponent, {
                 width: '500px',
-                autoFocus: false
+                autoFocus: false,
+                disableClose: true
             });
             let instance = dialogRef.componentInstance;
             dialogRef.afterClosed().subscribe((configType: string) => {
diff --git a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
index 54dca3e0..b6e6b7c0 100644
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
@@ -20,7 +20,8 @@ export class PacketFiltersActionComponent {
         const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
             width: '900px',
             height: '400px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
         });
         let instance = dialogRef.componentInstance;
         instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
index 3f70d051..3fa76351 100644
--- a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
@@ -17,7 +17,8 @@ export class ShowNodeActionComponent {
   showNode() {
     const dialogRef = this.dialog.open(InfoDialogComponent, {
         width: '600px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.node = this.node;
diff --git a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
index 091b86cb..500ff9c5 100644
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
@@ -19,7 +19,8 @@ export class StartCaptureActionComponent {
   startCapture() {
     const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
         width: '400px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
index 939e2ad0..aa79e646 100644
--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
@@ -35,7 +35,8 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
 
     private conf = {
         autoFocus: false,
-        width: '800px'
+        width: '800px',
+        disableClose: true
     };
     dialogRefQemuImageCreator;
 
diff --git a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
index 19cf6e7f..653f0fad 100644
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
@@ -80,7 +80,8 @@ export class PacketFiltersDialogComponent implements OnInit{
     onHelpClick() {
         const dialogRef = this.dialog.open(HelpDialogComponent, {
             width: '500px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
         });
         let instance = dialogRef.componentInstance;
         instance.title = 'Help for filters';
diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
index 86fcb6fb..ce6050ac 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@@ -50,7 +50,8 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
     public takeScreenshot() {
         const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
             width: '400px',
-            autoFocus: false
+            autoFocus: false,
+            disableClose: true
         });
         dialogRef.afterClosed().subscribe((result: Screenshot) => {
             if (result) this.saveImage(result);
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 99bd4865..4a7f7c51 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -702,7 +702,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   addNewProject() {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -711,7 +712,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   saveProject() {
     const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -721,7 +723,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   editProject() {
     const dialogRef = this.dialog.open(EditProjectDialogComponent, {
       width: '600px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -732,7 +735,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     let uuid: string = '';
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
index c7121539..dd264420 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
@@ -87,7 +87,8 @@ export class AddBlankProjectDialogComponent implements OnInit {
       data: {
         existingProject: existingProject
       },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
 
     dialogRef.afterClosed().subscribe((answer: boolean) => {
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts b/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
index cb996165..ad58bbdd 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
@@ -110,7 +110,8 @@ export class ImportProjectDialogComponent implements OnInit {
       data: {
         existingProject: existingProject
       },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
 
     dialogRef.afterClosed().subscribe((answer: boolean) => {
diff --git a/src/app/components/projects/projects.component.ts b/src/app/components/projects/projects.component.ts
index 0ef4d6db..d95dfc02 100644
--- a/src/app/components/projects/projects.component.ts
+++ b/src/app/components/projects/projects.component.ts
@@ -78,7 +78,8 @@ export class ProjectsComponent implements OnInit {
       const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
         width: '350px',
         height: '120px',
-        autoFocus: false
+        autoFocus: false,
+        disableClose: true
       });
   
       dialogRef.afterClosed().subscribe((answer: boolean) => {
@@ -149,7 +150,8 @@ export class ProjectsComponent implements OnInit {
   duplicate(project: Project) {
     const dialogRef = this.dialog.open(ChooseNameDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -162,7 +164,8 @@ export class ProjectsComponent implements OnInit {
   addBlankProject() {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -172,7 +175,8 @@ export class ProjectsComponent implements OnInit {
     let uuid: string = '';
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/servers/servers.component.ts b/src/app/components/servers/servers.component.ts
index 66723a5c..e7e31397 100644
--- a/src/app/components/servers/servers.component.ts
+++ b/src/app/components/servers/servers.component.ts
@@ -94,7 +94,8 @@ export class ServersComponent implements OnInit, OnDestroy {
   createModal() {
     const dialogRef = this.dialog.open(AddServerDialogComponent, {
       width: '350px',
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
 
     dialogRef.afterClosed().subscribe(server => {
diff --git a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
index a346e751..41084a14 100644
--- a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
+++ b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.ts
@@ -35,7 +35,8 @@ export class SnapshotMenuItemComponent implements OnInit {
         server: this.server,
         project: this.project
       },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
 
     dialogRef.afterClosed().subscribe(snapshot => {
diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts
index 8b833e40..3814b1a2 100644
--- a/src/app/components/template/template.component.ts
+++ b/src/app/components/template/template.component.ts
@@ -27,7 +27,8 @@ export class TemplateComponent implements OnInit {
         server: this.server,
         project: this.project
       },
-      autoFocus: false
+      autoFocus: false,
+      disableClose: true
     });
 
     dialogRef.afterClosed().subscribe((nodeAddedEvent: NodeAddedEvent) => {

From 0f542c3e3b1c12ea61ac37369c25808eb60a6987 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 24 Feb 2020 11:55:23 +0100
Subject: [PATCH 08/11] Dynamic AdButler component

---
 src/app/app.module.ts                         |  3 ++-
 .../components/adbutler/adbutler.component.ts |  7 +++---
 .../notification-box.component.html           |  2 +-
 .../notification-box.component.ts             | 23 +++++++++++++++++--
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 55735f9c..0a8843dc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -580,7 +580,8 @@ if (environment.production) {
     NavigationDialogComponent,
     ScreenshotDialogComponent,
     ConfirmationBottomSheetComponent,
-    ConfigDialogComponent
+    ConfigDialogComponent,
+    AdbutlerComponent
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts
index f0ee27a7..acee2902 100644
--- a/src/app/components/adbutler/adbutler.component.ts
+++ b/src/app/components/adbutler/adbutler.component.ts
@@ -11,13 +11,12 @@ import { ToasterService } from '../../services/toaster.service';
 })
 export class AdbutlerComponent implements OnInit {
   @ViewChild('ad', {static: false}) ad: ElementRef;
-  @Input() theme: string;
-  @Output() onLoad = new EventEmitter();
+  theme: string;
+  onLoad = new EventEmitter();
   htmlCode: string;
 
   constructor(
-    private httpClient: HttpClient,
-    private toasterService: ToasterService
+    private httpClient: HttpClient
   ) {}
 
   ngOnInit() {
diff --git a/src/app/components/notification-box/notification-box.component.html b/src/app/components/notification-box/notification-box.component.html
index c5bcafef..350fe7ce 100644
--- a/src/app/components/notification-box/notification-box.component.html
+++ b/src/app/components/notification-box/notification-box.component.html
@@ -2,7 +2,7 @@
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     <div style="display: flex; height: 102px;">
         <div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
-            <app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
+            <template #dynamicComponentContainer></template>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
         </div>
     </div>
diff --git a/src/app/components/notification-box/notification-box.component.ts b/src/app/components/notification-box/notification-box.component.ts
index a07bd770..416981a7 100644
--- a/src/app/components/notification-box/notification-box.component.ts
+++ b/src/app/components/notification-box/notification-box.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
 import { timer, Observable, Subscription } from 'rxjs';
 import { ThemeService } from '../../services/theme.service';
+import { AdbutlerComponent } from '../adbutler/adbutler.component';
 
 @Component({
     selector: 'app-notification-box',
@@ -8,6 +9,8 @@ import { ThemeService } from '../../services/theme.service';
     styleUrls: ['./notification-box.component.scss']
 })
 export class NotificationBoxComponent implements OnInit, OnDestroy {
+    @ViewChild('dynamicComponentContainer', {read: ViewContainerRef, static: false}) dynamicComponentContainer;
+
     timer: Observable<number>;
     viewTimer: Observable<number>;
     timerSubscription: Subscription;
@@ -26,7 +29,9 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
     isLightThemeEnabled: boolean = false;
 
     constructor(
-        private themeService: ThemeService
+        private themeService: ThemeService,
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private viewContainerRef: ViewContainerRef
     ){}
 
     ngOnInit() {
@@ -34,6 +39,20 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
         this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
     }
 
+    ngAfterViewInit() {
+        this.createDynamicAdComponent();
+    }
+
+    createDynamicAdComponent() : void {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(AdbutlerComponent);
+        const componentRef = this.dynamicComponentContainer.createComponent(factory);
+        componentRef.instance.theme = this.themeService.getActualTheme() === 'light';
+        componentRef.instance.onLoad.subscribe(event => {
+            this.onLoadingAdbutler(event);
+        })
+        componentRef.changeDetectorRef.detectChanges();
+    }
+
     startTimer() {
         this.timer = timer(this.delayTime, 1000);
 

From f40b2c64c21e7bf165e46135f864b208226771d6 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 24 Feb 2020 13:49:31 +0100
Subject: [PATCH 09/11] Update template-list-dialog.component.ts

---
 .../template-list-dialog/template-list-dialog.component.ts  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.ts b/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
index bbc37698..83ef1c4e 100644
--- a/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
+++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
@@ -9,6 +9,7 @@ import { Template } from '../../../models/template';
 import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 import { ToasterService } from '../../../services/toaster.service';
 import { Project } from '../../../models/project';
+import { NonNegativeValidator } from '../../../validators/non-negative-validator';
 
 @Component({
   selector: 'app-template-list-dialog',
@@ -34,13 +35,14 @@ export class TemplateListDialogComponent implements OnInit {
     private templateService: TemplateService,
     private formBuilder: FormBuilder,
     @Inject(MAT_DIALOG_DATA) public data: any,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private nonNegativeValidator: NonNegativeValidator,
   ) {
     this.server = data['server'];
     this.project = data['project'];
     this.configurationForm = this.formBuilder.group({
       name: new FormControl('new node', Validators.required),
-      numberOfNodes: new FormControl(1, Validators.required)
+      numberOfNodes: new FormControl(1, [Validators.required, nonNegativeValidator.get])
     });
     this.positionForm = this.formBuilder.group({
       top: new FormControl(0, Validators.required),

From c73a8ddf1694f35c590a0522c562894b05fb4016 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 24 Feb 2020 15:19:28 +0100
Subject: [PATCH 10/11] Updating add node dialog

---
 .../components/project-map/project-map.component.ts    |  8 ++++----
 .../template-list-dialog.component.html                |  4 ++--
 .../template-list-dialog.component.ts                  | 10 +++++-----
 src/app/services/node.service.ts                       |  7 +++++++
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 99bd4865..0759c990 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -424,10 +424,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       return;
     }
     this.nodeService.createFromTemplate(this.server, this.project, nodeAddedEvent.template, nodeAddedEvent.x, nodeAddedEvent.y, nodeAddedEvent.server).subscribe((node: Node) => {
-      if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
-        node.name = nodeAddedEvent.name;
-        this.nodeService.updateNode(this.server, node).subscribe(()=>{});
-      }
+      // if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
+      //   node.name = nodeAddedEvent.name;
+      //   this.nodeService.updateNode(this.server, node).subscribe(()=>{});
+      // }
       this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
 
         nodes.filter((node) => node.label.style === null).forEach((node) => {
diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.html b/src/app/components/template/template-list-dialog/template-list-dialog.component.html
index aa5b5b31..70c5851d 100644
--- a/src/app/components/template/template-list-dialog/template-list-dialog.component.html
+++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.html
@@ -39,9 +39,9 @@
     <h6>Configuration</h6>
   </div>
   <form [formGroup]="configurationForm">
-    <mat-form-field class="form-field">
+    <!-- <mat-form-field class="form-field">
       <input type="text" matInput formControlName="name" placeholder="Enter name (default is taken from template)" />
-    </mat-form-field>
+    </mat-form-field> -->
     <mat-form-field class="form-field">
       <input type="number" matInput formControlName="numberOfNodes" placeholder="Enter number of nodes (default value is 1)" />
     </mat-form-field>
diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.ts b/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
index 83ef1c4e..3642162b 100644
--- a/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
+++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.ts
@@ -41,7 +41,7 @@ export class TemplateListDialogComponent implements OnInit {
     this.server = data['server'];
     this.project = data['project'];
     this.configurationForm = this.formBuilder.group({
-      name: new FormControl('new node', Validators.required),
+      // name: new FormControl('new node', Validators.required),
       numberOfNodes: new FormControl(1, [Validators.required, nonNegativeValidator.get])
     });
     this.positionForm = this.formBuilder.group({
@@ -70,13 +70,13 @@ export class TemplateListDialogComponent implements OnInit {
 
   chooseTemplate(event) {
     this.selectedTemplate = event.value;
-    this.configurationForm.controls['name'].setValue(this.selectedTemplate.default_name_format);
+    // this.configurationForm.controls['name'].setValue(this.selectedTemplate.default_name_format);
   }
 
   onAddClick(): void {
     if (!this.selectedTemplate || this.filteredTemplates.length === 0) {
       this.toasterService.error('Please firstly choose template.');
-    } else if (!this.positionForm.valid || !this.configurationForm.valid) {
+    } else if (!this.positionForm.valid || !this.configurationForm.valid || !this.selectedTemplate.compute_id) {
       this.toasterService.error('Please fill all required fields.');
     } else {
       let x: number = this.positionForm.get('left').value;
@@ -87,7 +87,7 @@ export class TemplateListDialogComponent implements OnInit {
         let event: NodeAddedEvent = {
           template: this.selectedTemplate,
           server: this.selectedTemplate.compute_id,
-          name: this.configurationForm.get('name').value,
+          // name: this.configurationForm.get('name').value,
           numberOfNodes: this.configurationForm.get('numberOfNodes').value,
           x: x,
           y: y
@@ -101,7 +101,7 @@ export class TemplateListDialogComponent implements OnInit {
 export interface NodeAddedEvent {
   template: Template,
   server: string,
-  name: string,
+  name?: string,
   numberOfNodes: number;
   x: number;
   y: number;
diff --git a/src/app/services/node.service.ts b/src/app/services/node.service.ts
index 2e8467ae..50914980 100644
--- a/src/app/services/node.service.ts
+++ b/src/app/services/node.service.ts
@@ -46,6 +46,13 @@ export class NodeService {
   }
 
   createFromTemplate(server: Server, project: Project, template: Template, x: number, y: number, compute_id: string): Observable<Node> {
+    if (!compute_id) {
+      return this.httpServer.post(server, `/projects/${project.project_id}/templates/${template.template_id}`, {
+        x: Math.round(x),
+        y: Math.round(y),
+        compute_id: 'local'
+      });
+    } 
     return this.httpServer.post(server, `/projects/${project.project_id}/templates/${template.template_id}`, {
       x: Math.round(x),
       y: Math.round(y),

From 7f1d91ff1e945c00ecf503798eacadeb59de7b08 Mon Sep 17 00:00:00 2001
From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com>
Date: Mon, 24 Feb 2020 15:46:21 +0100
Subject: [PATCH 11/11] System status improvements

---
 .../status-chart/status-chart.component.html       | 14 +++++++-------
 .../status-chart/status-chart.component.scss       |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/components/system-status/status-chart/status-chart.component.html b/src/app/components/system-status/status-chart/status-chart.component.html
index 63aa6801..b640bd98 100644
--- a/src/app/components/system-status/status-chart/status-chart.component.html
+++ b/src/app/components/system-status/status-chart/status-chart.component.html
@@ -13,7 +13,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="'CPU usage percent'"
+            [subtitle]="'CPU usage'"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -31,7 +31,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="'Disk usage percent'"
+            [subtitle]="'Disk usage'"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -49,7 +49,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="'Memory usage percent'"
+            [subtitle]="'Memory usage'"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -67,7 +67,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="'SWAP usage percent'"
+            [subtitle]="'SWAP usage'"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -87,7 +87,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="['Load average percent', '(last 1 minute)']"
+            [subtitle]="['Load average', '(last 1 minute)']"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -105,7 +105,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="['Load average percent', '(last 5 minutes)']"
+            [subtitle]="['Load average', '(last 5 minutes)']"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
@@ -123,7 +123,7 @@
             [unitsFontSize]="20"
             [titleColor]="'#C0C0C0'"
             [titleFontSize]="30"
-            [subtitle]="['Load average percent', '(last 15 minutes)']"
+            [subtitle]="['Load average', '(last 15 minutes)']"
             [subtitleColor]="'#C0C0C0'"
             [subtitleFontSize]="15"
         ></circle-progress>
diff --git a/src/app/components/system-status/status-chart/status-chart.component.scss b/src/app/components/system-status/status-chart/status-chart.component.scss
index a639bdc2..06e97692 100644
--- a/src/app/components/system-status/status-chart/status-chart.component.scss
+++ b/src/app/components/system-status/status-chart/status-chart.component.scss
@@ -2,5 +2,5 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
 }