From 18a80468d050c7ca7a818b67cc59a22e401d90f8 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 28 Feb 2019 01:26:15 -0800
Subject: [PATCH] Custom adapters separated to new component

---
 src/app/app.module.ts                         |  4 +-
 .../custom-adapters.component.html            | 40 ++++++++++++
 .../custom-adapters.component.scss            |  0
 .../custom-adapters.component.spec.ts         |  0
 .../custom-adapters.component.ts              | 26 ++++++++
 .../qemu-vm-template-details.component.html   | 57 +++++------------
 .../qemu-vm-template-details.component.ts     | 49 ++++++++------
 ...irtual-box-template-details.component.html | 57 +++++------------
 .../virtual-box-template-details.component.ts | 64 +++++++++++--------
 .../vmware-template-details.component.html    | 57 +++++------------
 .../vmware-template-details.component.ts      | 49 ++++++++------
 11 files changed, 210 insertions(+), 193 deletions(-)
 create mode 100644 src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
 create mode 100644 src/app/components/preferences/common/custom-adapters/custom-adapters.component.scss
 create mode 100644 src/app/components/preferences/common/custom-adapters/custom-adapters.component.spec.ts
 create mode 100644 src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7cecaf5f..c5938619 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -165,6 +165,7 @@ import { SearchFilter } from './filters/searchFilter.pipe';
 import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service';
 import { ServerManagementService } from './services/server-management.service';
 import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component';
+import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -267,7 +268,8 @@ if (environment.production) {
     CopyDockerTemplateComponent,
     EmptyTemplatesListComponent,
     SymbolsMenuComponent,
-    SearchFilter
+    SearchFilter,
+    CustomAdaptersComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
new file mode 100644
index 00000000..29b52942
--- /dev/null
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
@@ -0,0 +1,40 @@
+<div class="content" class="configurator">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Custom adapters configuration</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <table class="table" mat-table [dataSource]="adapters">
+                <ng-container matColumnDef="adapter_number">
+                    <th mat-header-cell *matHeaderCellDef> Adapter number </th>
+                    <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="port_name">
+                    <th mat-header-cell *matHeaderCellDef> Port name </th>
+                    <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="adapter_type">
+                    <th mat-header-cell *matHeaderCellDef> Adapter type </th>
+                    <td mat-cell *matCellDef="let element; let i = index;">
+                        <mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
+                            <mat-option *ngFor="let type of networkTypes" [value]="type[0]">
+                                {{type[1]}} ({{type[0]}})
+                            </mat-option>
+                        </mat-select>
+                    </td>
+                </ng-container>
+                
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+        <div class="buttons-bar">
+            <button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
+            <button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
+        </div>
+    </div>
+</div>
diff --git a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.scss b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.spec.ts b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
new file mode 100644
index 00000000..75aeb750
--- /dev/null
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
+
+
+@Component({
+    selector: 'app-custom-adapters',
+    templateUrl: './custom-adapters.component.html',
+    styleUrls: ['./custom-adapters.component.scss', '../../preferences.component.scss']
+})
+export class CustomAdaptersComponent {
+    @Input() networkTypes = [];
+    @Input() displayedColumns: string[] = []; 
+    @Output() closeConfiguratorEmitter = new EventEmitter<boolean>();
+    @Output() saveConfigurationEmitter =  new EventEmitter<CustomAdapter[]>();
+
+    public adapters: CustomAdapter[];
+    public numberOfAdapters: number;
+
+    cancelConfigureCustomAdapters(){
+        this.closeConfiguratorEmitter.emit(false);
+    }
+
+    configureCustomAdapters(){
+        this.saveConfigurationEmitter.emit(this.adapters);
+    }
+}
diff --git a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
index e51ed81c..f548e77c 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
@@ -198,7 +198,7 @@
                     </mat-option>
                 </mat-select>
                 </mat-form-field>
-                <button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
+                <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
                 <mat-checkbox [(ngModel)]="qemuTemplate.legacy_networking">
                     Use the legacy networking mode
                 </mat-checkbox>
@@ -326,44 +326,17 @@
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Custom adapters configuration</h1>
-        </div>
-    </div>
-    <div class="default-content" *ngIf="qemuTemplate">
-        <div class="container mat-elevation-z8">
-            <table class="table" mat-table [dataSource]="adapters">
-                <ng-container matColumnDef="adapter_number">
-                    <th mat-header-cell *matHeaderCellDef> Adapter number </th>
-                    <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="port_name">
-                    <th mat-header-cell *matHeaderCellDef> Port name </th>
-                    <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="adapter_type">
-                    <th mat-header-cell *matHeaderCellDef> Adapter type </th>
-                    <td mat-cell *matCellDef="let element; let i = index;">
-                        <mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
-                            <mat-option *ngFor="let type of networkTypes" [value]="type[0]">
-                                {{type[1]}} ({{type[0]}})
-                            </mat-option>
-                        </mat-select>
-                    </td>
-                </ng-container>
-                
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
-        </div>
-    </div>
-</div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && qemuTemplate" [server]="server" [symbol]="qemuTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-custom-adapters 
+    [hidden]="!(isConfiguratorOpened && qemuTemplate)" 
+    #customAdaptersConfigurator
+    [networkTypes]="networkTypes" 
+    [displayedColumns]="displayedColumns"
+    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
+    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+></app-custom-adapters>
+<app-symbols-menu 
+    *ngIf="isSymbolSelectionOpened && qemuTemplate" 
+    [server]="server" 
+    [symbol]="qemuTemplate.symbol" 
+    (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
index 2586d30d..126a4b79 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChildren, ViewChild, QueryList } from "@angular/core";
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { QemuService } from '../../../../services/qemu.service';
@@ -9,6 +9,7 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import { QemuConfigurationService } from '../../../../services/qemu-configuration.service';
 import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
 
 
 @Component({
@@ -19,9 +20,7 @@ import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'
 export class QemuVmTemplateDetailsComponent implements OnInit {
     server: Server;
     qemuTemplate: QemuTemplate;
-
     isSymbolSelectionOpened: boolean = false;
-
     consoleTypes: string[] = [];
     diskInterfaces: string[] = [];
     networkTypes = [];
@@ -32,11 +31,12 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
     binaries: QemuBinary[] = [];
     activateCpuThrottling: boolean = true;
     isConfiguratorOpened: boolean = false;
-    adapters: CustomAdapter[] = [];
     displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
-
     generalSettingsForm: FormGroup;
 
+    @ViewChild("customAdaptersConfigurator") 
+        customAdaptersConfigurator: CustomAdaptersComponent;
+
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -62,9 +62,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
             this.getConfiguration();
             this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
                 this.qemuTemplate = qemuTemplate;
-                this.qemuTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
-                    this.adapters.push(adapter);
-                });
+                this.fillCustomAdapters();
 
                 this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
                     this.binaries = qemuBinaries;
@@ -99,24 +97,36 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
         this.qemuTemplate.bios_image = event.target.files[0].name;
     }
 
-    cancelConfigureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
+    setCustomAdaptersConfiguratorState(state: boolean) {
+        this.isConfiguratorOpened = state;
+
+        if (state) {
+            this.fillCustomAdapters();
+            this.customAdaptersConfigurator.numberOfAdapters = this.qemuTemplate.adapters;
+            this.customAdaptersConfigurator.adapters = [];
+            this.qemuTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
+                this.customAdaptersConfigurator.adapters.push({
+                    adapter_number: adapter.adapter_number,
+                    adapter_type: adapter.adapter_type
+                });
+            });
+        }
     }
 
-    configureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
-        this.saveCustomAdapters();
+    saveCustomAdapters(adapters: CustomAdapter[]){
+        this.setCustomAdaptersConfiguratorState(false);
+        this.qemuTemplate.custom_adapters = adapters;
     }
 
-    saveCustomAdapters() {
-        let copyOfAdapters = this.adapters;
-        this.adapters = [];
+    fillCustomAdapters() {
+        let copyOfAdapters = this.qemuTemplate.custom_adapters ? this.qemuTemplate.custom_adapters : [];
+        this.qemuTemplate.custom_adapters = [];
 
         for(let i=0; i<this.qemuTemplate.adapters; i++){
             if (copyOfAdapters[i]) {
-                this.adapters.push(copyOfAdapters[i]);
+                this.qemuTemplate.custom_adapters.push(copyOfAdapters[i]);
             } else {
-                this.adapters.push({
+                this.qemuTemplate.custom_adapters.push({
                     adapter_number: i,
                     adapter_type: 'e1000'
                 });
@@ -135,8 +145,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
             if (!this.activateCpuThrottling){
                 this.qemuTemplate.cpu_throttling = 0;
             }
-            this.saveCustomAdapters();
-            this.qemuTemplate.custom_adapters = this.adapters;
+            this.fillCustomAdapters();
     
             this.qemuService.saveTemplate(this.server, this.qemuTemplate).subscribe((savedTemplate: QemuTemplate) => {
                 this.toasterService.success("Changes saved");
diff --git a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
index 99fc0198..e9a46b1a 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
@@ -85,7 +85,7 @@
                         </mat-select>
                     </mat-form-field>
                 </form>
-                <button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
+                <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
                 <mat-checkbox [(ngModel)]="virtualBoxTemplate.use_any_adapter">
                     Allow GNS3 to use any configured VirtualBox adapter
                 </mat-checkbox>
@@ -107,44 +107,17 @@
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Custom adapters configuration</h1>
-        </div>
-    </div>
-    <div class="default-content" *ngIf="virtualBoxTemplate">
-        <div class="container mat-elevation-z8">
-            <table class="table" mat-table [dataSource]="adapters">
-                <ng-container matColumnDef="adapter_number">
-                    <th mat-header-cell *matHeaderCellDef> Adapter number </th>
-                    <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="port_name">
-                    <th mat-header-cell *matHeaderCellDef> Port name </th>
-                    <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="adapter_type">
-                    <th mat-header-cell *matHeaderCellDef> Adapter type </th>
-                    <td mat-cell *matCellDef="let element; let i = index;">
-                        <mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
-                            <mat-option *ngFor="let type of networkTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </td>
-                </ng-container>
-                
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
-        </div>
-    </div>
-</div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && virtualBoxTemplate" [server]="server" [symbol]="virtualBoxTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-custom-adapters 
+    [hidden]="!(isConfiguratorOpened && virtualBoxTemplate)" 
+    #customAdaptersConfigurator
+    [networkTypes]="networkTypes" 
+    [displayedColumns]="displayedColumns"
+    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
+    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+></app-custom-adapters>
+<app-symbols-menu 
+    *ngIf="isSymbolSelectionOpened && virtualBoxTemplate" 
+    [server]="server" 
+    [symbol]="virtualBoxTemplate.symbol" 
+    (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
index 686d46f5..4e588e8b 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -8,6 +8,7 @@ import { VirtualBoxService } from '../../../../services/virtual-box.service';
 import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import { VirtualBoxConfigurationService } from '../../../../services/virtual-box-configuration.service';
+import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
 
 
 @Component({
@@ -18,20 +19,19 @@ import { VirtualBoxConfigurationService } from '../../../../services/virtual-box
 export class VirtualBoxTemplateDetailsComponent implements OnInit {
     server: Server;
     virtualBoxTemplate: VirtualBoxTemplate;
-
     isSymbolSelectionOpened: boolean = false;
-
     consoleTypes: string[] = [];
     onCloseOptions = [];
     categories = [];
     networkTypes = [];
-    adapters: CustomAdapter[] = [];
     displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
     isConfiguratorOpened: boolean = false;
-
     generalSettingsForm: FormGroup;
     networkForm: FormGroup
 
+    @ViewChild("customAdaptersConfigurator") 
+        customAdaptersConfigurator: CustomAdaptersComponent;
+
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -64,10 +64,7 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
             this.getConfiguration();
             this.virtualBoxService.getTemplate(this.server, template_id).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
                 this.virtualBoxTemplate = virtualBoxTemplate;
-
-                this.virtualBoxTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
-                    this.adapters.push(adapter);
-                });
+                this.fillCustomAdapters();
             });
         });
     }
@@ -79,20 +76,36 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
         this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
     }
 
-    configureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
-        this.saveCustomAdapters();
+    setCustomAdaptersConfiguratorState(state: boolean) {
+        this.isConfiguratorOpened = state;
+
+        if (state) {
+            this.fillCustomAdapters();
+            this.customAdaptersConfigurator.numberOfAdapters = this.virtualBoxTemplate.adapters;
+            this.customAdaptersConfigurator.adapters = [];
+            this.virtualBoxTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
+                this.customAdaptersConfigurator.adapters.push({
+                    adapter_number: adapter.adapter_number,
+                    adapter_type: adapter.adapter_type
+                });
+            });
+        }
     }
 
-    saveCustomAdapters() {
-        let copyOfAdapters = this.adapters;
-        this.adapters = [];
+    saveCustomAdapters(adapters: CustomAdapter[]){
+        this.setCustomAdaptersConfiguratorState(false);
+        this.virtualBoxTemplate.custom_adapters = adapters;
+    }
+
+    fillCustomAdapters() {
+        let copyOfAdapters = this.virtualBoxTemplate.custom_adapters ? this.virtualBoxTemplate.custom_adapters : [];
+        this.virtualBoxTemplate.custom_adapters = [];
 
         for(let i=0; i<this.virtualBoxTemplate.adapters; i++){
             if (copyOfAdapters[i]) {
-                this.adapters.push(copyOfAdapters[i]);
+                this.virtualBoxTemplate.custom_adapters.push(copyOfAdapters[i]);
             } else {
-                this.adapters.push({
+                this.virtualBoxTemplate.custom_adapters.push({
                     adapter_number: i,
                     adapter_type: 'e1000'
                 });
@@ -100,21 +113,20 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
         }
     }
 
-    cancelConfigureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
-    }
-
     goBack() {
         this.router.navigate(['/server', this.server.id, 'preferences', 'virtualbox', 'templates']);
     }
 
     onSave() {
-        this.saveCustomAdapters();
-        this.virtualBoxTemplate.custom_adapters = this.adapters;
+        if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
+            this.toasterService.error(`Fill all required fields`);
+        } else {
+            this.fillCustomAdapters();
 
-        this.virtualBoxService.saveTemplate(this.server, this.virtualBoxTemplate).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
-            this.toasterService.success("Changes saved");
-        });
+            this.virtualBoxService.saveTemplate(this.server, this.virtualBoxTemplate).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
     }
 
     chooseSymbol() {
diff --git a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.html b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.html
index 77a3be34..44a6de61 100644
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.html
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.html
@@ -107,7 +107,7 @@
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <button mat-button class="configButton" (click)="configureCustomAdapters()">Configure custom adapters</button><br/>
+                <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
                 <mat-checkbox [(ngModel)]="vmwareTemplate.use_any_adapter">
                     Allow GNS3 to override non custom VMware adapter
                 </mat-checkbox>
@@ -129,44 +129,17 @@
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isConfiguratorOpened">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Custom adapters configuration</h1>
-        </div>
-    </div>
-    <div class="default-content" *ngIf="vmwareTemplate">
-        <div class="container mat-elevation-z8">
-            <table class="table" mat-table [dataSource]="adapters">
-                <ng-container matColumnDef="adapter_number">
-                    <th mat-header-cell *matHeaderCellDef> Adapter number </th>
-                    <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="port_name">
-                    <th mat-header-cell *matHeaderCellDef> Port name </th>
-                    <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="adapter_type">
-                    <th mat-header-cell *matHeaderCellDef> Adapter type </th>
-                    <td mat-cell *matCellDef="let element; let i = index;">
-                        <mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
-                            <mat-option *ngFor="let type of networkTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </td>
-                </ng-container>
-                
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="configureCustomAdapters()">Apply</button><br/>
-        </div>
-    </div>
-</div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && vmwareTemplate" [server]="server" [symbol]="vmwareTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-custom-adapters 
+    [hidden]="!(isConfiguratorOpened && vmwareTemplate)" 
+    #customAdaptersConfigurator
+    [networkTypes]="networkTypes" 
+    [displayedColumns]="displayedColumns"
+    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
+    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+></app-custom-adapters>
+<app-symbols-menu 
+    *ngIf="isSymbolSelectionOpened && vmwareTemplate" 
+    [server]="server" 
+    [symbol]="vmwareTemplate.symbol" 
+    (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
index a8422bbb..a7e8c600 100644
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -8,6 +8,7 @@ import { VmwareTemplate } from '../../../../models/templates/vmware-template';
 import { VmwareService } from '../../../../services/vmware.service';
 import { VmwareConfigurationService } from '../../../../services/vmware-configuration.service';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
+import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
 
 
 @Component({
@@ -19,17 +20,17 @@ export class VmwareTemplateDetailsComponent implements OnInit {
     server: Server;
     vmwareTemplate: VmwareTemplate;
     generalSettingsForm: FormGroup;
-
-    adapters: CustomAdapter[] = [];
     displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
     isConfiguratorOpened: boolean = false;
     isSymbolSelectionOpened: boolean = false;
-
     consoleTypes: string[] = [];
     categories = [];
     onCloseOptions = [];
     networkTypes = [];
 
+    @ViewChild("customAdaptersConfigurator") 
+        customAdaptersConfigurator: CustomAdaptersComponent;
+
     constructor(
         private route: ActivatedRoute,
         private serverService: ServerService,
@@ -55,10 +56,7 @@ export class VmwareTemplateDetailsComponent implements OnInit {
             this.getConfiguration();
             this.vmwareService.getTemplate(this.server, template_id).subscribe((vmwareTemplate: VmwareTemplate) => {
                 this.vmwareTemplate = vmwareTemplate;
-
-                this.vmwareTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
-                    this.adapters.push(adapter);
-                });
+                this.fillCustomAdapters();
             });
         });
     }
@@ -78,8 +76,7 @@ export class VmwareTemplateDetailsComponent implements OnInit {
         if (this.generalSettingsForm.invalid) {
             this.toasterService.error(`Fill all required fields`);
         } else {
-            this.saveCustomAdapters();
-            this.vmwareTemplate.custom_adapters = this.adapters;
+            this.fillCustomAdapters();
 
             this.vmwareService.saveTemplate(this.server, this.vmwareTemplate).subscribe((vmwareTemplate: VmwareTemplate) => {
                 this.toasterService.success("Changes saved");
@@ -87,24 +84,36 @@ export class VmwareTemplateDetailsComponent implements OnInit {
         }
     }
 
-    cancelConfigureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
+    setCustomAdaptersConfiguratorState(state: boolean) {
+        this.isConfiguratorOpened = state;
+
+        if (state) {
+            this.fillCustomAdapters();
+            this.customAdaptersConfigurator.numberOfAdapters = this.vmwareTemplate.adapters;
+            this.customAdaptersConfigurator.adapters = [];
+            this.vmwareTemplate.custom_adapters.forEach((adapter: CustomAdapter) => {
+                this.customAdaptersConfigurator.adapters.push({
+                    adapter_number: adapter.adapter_number,
+                    adapter_type: adapter.adapter_type
+                });
+            });
+        }
     }
 
-    configureCustomAdapters(){
-        this.isConfiguratorOpened = !this.isConfiguratorOpened;
-        this.saveCustomAdapters();
+    saveCustomAdapters(adapters: CustomAdapter[]){
+        this.setCustomAdaptersConfiguratorState(false);
+        this.vmwareTemplate.custom_adapters = adapters;
     }
 
-    saveCustomAdapters() {
-        let copyOfAdapters = this.adapters;
-        this.adapters = [];
+    fillCustomAdapters() {
+        let copyOfAdapters = this.vmwareTemplate.custom_adapters ? this.vmwareTemplate.custom_adapters : [];
+        this.vmwareTemplate.custom_adapters = [];
 
         for(let i=0; i<this.vmwareTemplate.adapters; i++){
             if (copyOfAdapters[i]) {
-                this.adapters.push(copyOfAdapters[i]);
+                this.vmwareTemplate.custom_adapters.push(copyOfAdapters[i]);
             } else {
-                this.adapters.push({
+                this.vmwareTemplate.custom_adapters.push({
                     adapter_number: i,
                     adapter_type: 'e1000'
                 });