diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts
index 7e2a1898..217ef4e7 100644
--- a/e2e/app.e2e-spec.ts
+++ b/e2e/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('GNS3 Web UI Application', () => {
   it('should have correct page title', async () => {
     // arrange
     await page.navigateTo();
-    
+
     // act
     let text = await page.getTitleText();
 
diff --git a/e2e/helpers/common.po.ts b/e2e/helpers/common.po.ts
index 3dae8252..5d06c069 100644
--- a/e2e/helpers/common.po.ts
+++ b/e2e/helpers/common.po.ts
@@ -2,21 +2,21 @@ import { browser, by, element } from 'protractor';
 import { ServersPage } from './server.po';
 
 export class TestHelper {
-    sleep(value: number) {
-        browser.sleep(value);
-    }
+  sleep(value: number) {
+    browser.sleep(value);
+  }
 
-    waitForLoading() {
-        browser.waitForAngular();
-    }
+  waitForLoading() {
+    browser.waitForAngular();
+  }
 
-    async asyncForEach(array, callback) {
-        for (let index = 0; index < array.length; index++) {
-            await callback(array[index], index, array);
-        }
+  async asyncForEach(array, callback) {
+    for (let index = 0; index < array.length; index++) {
+      await callback(array[index], index, array);
     }
+  }
 
-    getCurrentUrl() {
-        return browser.getCurrentUrl();
-    }
+  getCurrentUrl() {
+    return browser.getCurrentUrl();
+  }
 }
diff --git a/e2e/helpers/project-map.po.ts b/e2e/helpers/project-map.po.ts
index 7ce8c823..d2df6967 100644
--- a/e2e/helpers/project-map.po.ts
+++ b/e2e/helpers/project-map.po.ts
@@ -1,50 +1,50 @@
-import { TestHelper } from "./common.po"
-import { browser, by } from "protractor";
+import { TestHelper } from './common.po';
+import { browser, by } from 'protractor';
 
 export class ProjectMapPage {
-    helper = new TestHelper();
+  helper = new TestHelper();
 
-    async openAddProjectDialog() {
-        let addButton = await browser.driver.findElement(by.css('button.addNode'));
-        await addButton.click();
+  async openAddProjectDialog() {
+    let addButton = await browser.driver.findElement(by.css('button.addNode'));
+    await addButton.click();
+  }
+
+  async addNode() {
+    let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+    await inputs[0].sendKeys('VPCS');
+    this.helper.sleep(1000);
+
+    let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+    await selects[1].click();
+    this.helper.sleep(1000);
+
+    let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+    await options[1].click(); //first option should be chosen
+    this.helper.sleep(1000);
+
+    // new select appears after refreshing data
+    selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+    if (selects[2]) {
+      await selects[2].click();
+      this.helper.sleep(1000);
+
+      options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+      await options[0].click();
+      this.helper.sleep(1000);
     }
 
-    async addNode() {
-        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
-        await inputs[0].sendKeys('VPCS');
-        this.helper.sleep(1000);
+    let addButton = await browser.driver.findElement(by.css('button.addButton'));
+    await addButton.click();
+    this.helper.sleep(1000);
+  }
 
-        let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
-        await selects[1].click();
-        this.helper.sleep(1000);
+  async verifyIfNodeWithLabelExists(labelToFind: string) {
+    this.helper.sleep(5000);
+    let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
+    let selectedNode;
+    let textFromNodeLabel = await nodeLabel.getText();
+    if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
 
-        let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
-        await options[1].click(); //first option should be chosen
-        this.helper.sleep(1000);
-
-        // new select appears after refreshing data
-        selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
-        if (selects[2]) {
-            await selects[2].click();
-            this.helper.sleep(1000);
-    
-            options = await browser.driver.findElements(by.css('mat-option.mat-option'));
-            await options[0].click();
-            this.helper.sleep(1000);
-        }
-
-        let addButton = await browser.driver.findElement(by.css('button.addButton'));
-        await addButton.click();
-        this.helper.sleep(1000);
-    }
-
-    async verifyIfNodeWithLabelExists(labelToFind: string) {
-        this.helper.sleep(5000);
-        let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
-        let selectedNode;
-        let textFromNodeLabel = await nodeLabel.getText();
-        if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
-
-        return selectedNode ? true : false;
-    }
+    return selectedNode ? true : false;
+  }
 }
diff --git a/e2e/helpers/project.po.ts b/e2e/helpers/project.po.ts
index 76b60ec2..0afcc74e 100644
--- a/e2e/helpers/project.po.ts
+++ b/e2e/helpers/project.po.ts
@@ -1,20 +1,20 @@
-import { TestHelper } from "./common.po"
-import { browser, by } from "protractor";
+import { TestHelper } from './common.po';
+import { browser, by } from 'protractor';
 
 export class ProjectsPage {
-    helper = new TestHelper();
+  helper = new TestHelper();
 
-    async openAddProjectDialog() {
-        let addButton = await browser.driver.findElement(by.css('button.add-button'));
-        await addButton.click();
-    }
+  async openAddProjectDialog() {
+    let addButton = await browser.driver.findElement(by.css('button.add-button'));
+    await addButton.click();
+  }
 
-    async createProject() {
-        let today = new Date();
-        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
-        await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
-        this.helper.sleep(2000);
-        let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
-        await dialogButton.click();
-    }
+  async createProject() {
+    let today = new Date();
+    let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+    await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
+    this.helper.sleep(2000);
+    let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
+    await dialogButton.click();
+  }
 }
diff --git a/e2e/helpers/server.po.ts b/e2e/helpers/server.po.ts
index ece2422b..eec3956c 100644
--- a/e2e/helpers/server.po.ts
+++ b/e2e/helpers/server.po.ts
@@ -2,40 +2,40 @@ import { browser, by, element } from 'protractor';
 import { TestHelper } from './common.po';
 
 export class ServersPage {
-    helper = new TestHelper;
+  helper = new TestHelper();
 
-    maximizeWindow() {
-        browser.driver.manage().window().maximize();
-    }
+  maximizeWindow() {
+    browser.driver.manage().window().maximize();
+  }
 
-    navigateToServersPage() {
-        return browser.get('/servers');
-    }
+  navigateToServersPage() {
+    return browser.get('/servers');
+  }
 
-    getAddServerNotificationText() {
-        return browser.driver.findElement(by.className('mat-card-content')).getText();
-    }
+  getAddServerNotificationText() {
+    return browser.driver.findElement(by.className('mat-card-content')).getText();
+  }
 
-    async clickAddServer() {
-        let serversTable = await this.checkServersTable();
-        if (serversTable.length === 0) {
-            let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
-            await buttons[3].click();   
-        }
+  async clickAddServer() {
+    let serversTable = await this.checkServersTable();
+    if (serversTable.length === 0) {
+      let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
+      await buttons[3].click();
     }
+  }
 
-    checkServersTable() {
-        return browser.driver.findElements(by.css('mat-cell'));
-    }
+  checkServersTable() {
+    return browser.driver.findElements(by.css('mat-cell'));
+  }
 
-    async navigateToServerProjects() {
-        this.helper.sleep(2000);
-        let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
-        let serverLink;
-        await this.helper.asyncForEach(hyperlinks, async element => {
-            let text = await element.getText();
-            if (text === '127.0.0.1') serverLink = element;
-        });
-        await serverLink.click();
-    }
+  async navigateToServerProjects() {
+    this.helper.sleep(2000);
+    let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
+    let serverLink;
+    await this.helper.asyncForEach(hyperlinks, async (element) => {
+      let text = await element.getText();
+      if (text === '127.0.0.1') serverLink = element;
+    });
+    await serverLink.click();
+  }
 }
diff --git a/e2e/project-map.e2e-spec.ts b/e2e/project-map.e2e-spec.ts
index f5379d9d..d489b1d5 100644
--- a/e2e/project-map.e2e-spec.ts
+++ b/e2e/project-map.e2e-spec.ts
@@ -5,37 +5,37 @@ import { ProjectsPage } from './helpers/project.po';
 import { ProjectMapPage } from './helpers/project-map.po';
 
 describe('Project map page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let projectMapPage: ProjectMapPage;
-    let helper: TestHelper;
+  let serversPage: ServersPage;
+  let projectsPage: ProjectsPage;
+  let projectMapPage: ProjectMapPage;
+  let helper: TestHelper;
 
-    beforeEach(async () => {
-        serversPage = new ServersPage();
-        projectsPage = new ProjectsPage();
-        projectMapPage = new ProjectMapPage();
-        helper = new TestHelper();
+  beforeEach(async () => {
+    serversPage = new ServersPage();
+    projectsPage = new ProjectsPage();
+    projectMapPage = new ProjectMapPage();
+    helper = new TestHelper();
 
-        serversPage.maximizeWindow();
-        await serversPage.navigateToServersPage();
-        await serversPage.clickAddServer();
-        await serversPage.navigateToServerProjects();
-        await projectsPage.openAddProjectDialog();
-        helper.sleep(2000);
-        await projectsPage.createProject();
-        helper.sleep(2000);
-    });
+    serversPage.maximizeWindow();
+    await serversPage.navigateToServersPage();
+    await serversPage.clickAddServer();
+    await serversPage.navigateToServerProjects();
+    await projectsPage.openAddProjectDialog();
+    helper.sleep(2000);
+    await projectsPage.createProject();
+    helper.sleep(2000);
+  });
 
-    it('user should have possibility to add nodes to map', async () => {
-        // arrange
-        projectMapPage.openAddProjectDialog();
-        helper.sleep(2000);
+  it('user should have possibility to add nodes to map', async () => {
+    // arrange
+    projectMapPage.openAddProjectDialog();
+    helper.sleep(2000);
 
-        //act
-        projectMapPage.addNode();
-        helper.sleep(2000);
+    //act
+    projectMapPage.addNode();
+    helper.sleep(2000);
 
-        //assert
-        expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
-    });
+    //assert
+    expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
+  });
 });
diff --git a/e2e/projects.e2e-spec.ts b/e2e/projects.e2e-spec.ts
index 977c3656..0333b065 100644
--- a/e2e/projects.e2e-spec.ts
+++ b/e2e/projects.e2e-spec.ts
@@ -4,31 +4,31 @@ import { element } from 'protractor';
 import { ProjectsPage } from './helpers/project.po';
 
 describe('Projects page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let helper: TestHelper;
+  let serversPage: ServersPage;
+  let projectsPage: ProjectsPage;
+  let helper: TestHelper;
 
-    beforeEach(() => {
-        serversPage = new ServersPage();
-        projectsPage = new ProjectsPage();
-        helper = new TestHelper();
-    });
+  beforeEach(() => {
+    serversPage = new ServersPage();
+    projectsPage = new ProjectsPage();
+    helper = new TestHelper();
+  });
 
-    it('user should have possibility to create new project', async () => {
-        // arrange
-        serversPage.maximizeWindow();
-        await serversPage.navigateToServersPage();
-        await serversPage.clickAddServer();
-        await serversPage.navigateToServerProjects();
-        helper.sleep(2000);
+  it('user should have possibility to create new project', async () => {
+    // arrange
+    serversPage.maximizeWindow();
+    await serversPage.navigateToServersPage();
+    await serversPage.clickAddServer();
+    await serversPage.navigateToServerProjects();
+    helper.sleep(2000);
 
-        //act
-        await projectsPage.openAddProjectDialog();
-        helper.sleep(2000);
-        await projectsPage.createProject();
-        helper.sleep(2000);
+    //act
+    await projectsPage.openAddProjectDialog();
+    helper.sleep(2000);
+    await projectsPage.createProject();
+    helper.sleep(2000);
 
-        //assert
-        expect(helper.getCurrentUrl()).toMatch('server/1/project/');
-    });
+    //assert
+    expect(helper.getCurrentUrl()).toMatch('server/1/project/');
+  });
 });
diff --git a/e2e/servers.e2e-spec.ts b/e2e/servers.e2e-spec.ts
index 1d177f4b..be7f65c9 100644
--- a/e2e/servers.e2e-spec.ts
+++ b/e2e/servers.e2e-spec.ts
@@ -3,42 +3,42 @@ import { TestHelper } from './helpers/common.po';
 import { element } from 'protractor';
 
 describe('Servers page', () => {
-    let page: ServersPage;
-    let helper: TestHelper;
+  let page: ServersPage;
+  let helper: TestHelper;
 
-    beforeEach(() => {
-        page = new ServersPage();
-        helper = new TestHelper();
+  beforeEach(() => {
+    page = new ServersPage();
+    helper = new TestHelper();
+  });
+
+  xit('user should have possibility to add server', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToServersPage();
+
+    // act
+    let text = await page.getAddServerNotificationText();
+
+    // assert
+    expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
+  });
+
+  it('user should see added server in the list', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToServersPage();
+    await page.clickAddServer();
+    helper.sleep(1000);
+
+    // act
+    let firstRowOfServersTable = await page.checkServersTable();
+    let serverData = [];
+    await helper.asyncForEach(firstRowOfServersTable, async (element) => {
+      serverData.push(await element.getText());
     });
 
-    xit('user should have possibility to add server', async () => {
-        // arrange
-        page.maximizeWindow();
-        await page.navigateToServersPage();
-
-        // act
-        let text = await page.getAddServerNotificationText();
-
-        // assert
-        expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
-    });
-
-    it('user should see added server in the list', async () => {
-        // arrange
-        page.maximizeWindow();
-        await page.navigateToServersPage();
-        await page.clickAddServer();
-        helper.sleep(1000);
-
-        // act
-        let firstRowOfServersTable = await page.checkServersTable();
-        let serverData = [];
-        await helper.asyncForEach(firstRowOfServersTable, async element => {
-            serverData.push(await element.getText());
-        });
-
-        // assert
-        expect(serverData).toContain('127.0.0.1');
-        expect(serverData).toContain('3080');
-    });
+    // assert
+    expect(serverData).toContain('127.0.0.1');
+    expect(serverData).toContain('3080');
+  });
 });
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e1552e7c..46959a94 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -74,10 +74,10 @@ const routes: Routes = [
       { path: '', redirectTo: 'servers', pathMatch: 'full' },
       { path: 'servers', component: ServersComponent },
       { path: 'bundled', component: BundledServerFinderComponent },
-      { 
-        path: 'server/:server_id/projects', 
+      {
+        path: 'server/:server_id/projects',
         component: ProjectsComponent,
-        resolve: { server : ServerResolve }
+        resolve: { server: ServerResolve },
       },
       { path: 'help', component: HelpComponent },
       { path: 'help/reportissue', component: ReportIssueComponent },
@@ -86,54 +86,87 @@ const routes: Routes = [
       { path: 'installed-software', component: InstalledSoftwareComponent },
       { path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
 
-      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent},
-      { 
-        path: 'server/:server_id/project/:project_id/snapshots', 
+      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent },
+      {
+        path: 'server/:server_id/project/:project_id/snapshots',
         component: ListOfSnapshotsComponent,
-        resolve: { server : ServerResolve }
+        resolve: { server: ServerResolve },
       },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
       { path: 'server/:server_id/preferences/gns3vm', component: Gns3vmComponent },
       // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
-      { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent},
+      { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent },
 
       { path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate', component: EthernetHubsAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id', component: EthernetHubsTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate',
+        component: EthernetHubsAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id',
+        component: EthernetHubsTemplateDetailsComponent,
+      },
 
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches', component: EthernetSwitchesTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate', component: EthernetSwitchesAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id', component: EthernetSwitchesTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches',
+        component: EthernetSwitchesTemplatesComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate',
+        component: EthernetSwitchesAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id',
+        component: EthernetSwitchesTemplateDetailsComponent,
+      },
 
       { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate',
+        component: CloudNodesAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id',
+        component: CloudNodesTemplateDetailsComponent,
+      },
 
       //{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy', component: CopyIosTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy',
+        component: CopyIosTemplateComponent,
+      },
 
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
-      { path: 'server/:server_id/preferences/qemu/templates/:template_id/copy', component: CopyQemuVmTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/qemu/templates/:template_id/copy',
+        component: CopyQemuVmTemplateComponent,
+      },
       { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
 
       // { path: 'server/:server_id/preferences/vpcs', component: VpcsPreferencesComponent },
       { path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent },
-      { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent},
+      { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent },
 
       // { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
       { path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent },
-      { path: 'server/:server_id/preferences/virtualbox/templates/:template_id', component: VirtualBoxTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/virtualbox/templates/:template_id',
+        component: VirtualBoxTemplateDetailsComponent,
+      },
       { path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent },
 
       // { path: 'server/:server_id/preferences/vmware', component: VmwarePreferencesComponent },
       { path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent },
-      { path: 'server/:server_id/preferences/vmware/templates/:template_id', component: VmwareTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/vmware/templates/:template_id',
+        component: VmwareTemplateDetailsComponent,
+      },
       { path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent },
 
       // { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
@@ -142,37 +175,49 @@ const routes: Routes = [
       // { path: 'server/:server_id/preferences/traceng/addtemplate', component: AddTracengTemplateComponent },
 
       { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
-      { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/docker/templates/:template_id/copy', component: CopyDockerTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/docker/templates/:template_id',
+        component: DockerTemplateDetailsComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/docker/templates/:template_id/copy',
+        component: CopyDockerTemplateComponent,
+      },
       { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent },
 
       { path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent },
       { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent },
-      { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent }
-    ]
+      { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent },
+    ],
   },
-  { 
-    path: 'server/:server_id/project/:project_id', 
+  {
+    path: 'server/:server_id/project/:project_id',
     component: ProjectMapComponent,
-    canDeactivate: [ConsoleGuard]
+    canDeactivate: [ConsoleGuard],
   },
-  { 
-    path: 'server/:server_id/project/:project_id/nodes/:node_id', 
-    component: WebConsoleFullWindowComponent
+  {
+    path: 'server/:server_id/project/:project_id/nodes/:node_id',
+    component: WebConsoleFullWindowComponent,
   },
-  { 
-    path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id', 
-    component: WebConsoleFullWindowComponent
+  {
+    path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id',
+    component: WebConsoleFullWindowComponent,
   },
   {
     path: '**',
-    component: PageNotFoundComponent
-  }
+    component: PageNotFoundComponent,
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', enableTracing: false, scrollPositionRestoration: 'enabled'})],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes, {
+      anchorScrolling: 'enabled',
+      enableTracing: false,
+      scrollPositionRestoration: 'enabled',
+    }),
+  ],
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 69475d67..db17fd83 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{dark: darkThemeEnabled, light: !darkThemeEnabled}">
-    <router-outlet></router-outlet>
-    <app-adbutler></app-adbutler>
+<div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
+  <router-outlet></router-outlet>
+  <app-adbutler></app-adbutler>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index bad2bc18..193c4c31 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,11 +1,11 @@
 mat-menu-panel {
-    min-height: 0px;
+  min-height: 0px;
 }
 
 .dark {
-    background: #263238!important;
+  background: #263238 !important;
 }
 
 .light {
-    background: white!important;
+  background: white !important;
 }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 1eb4a588..00903884 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -22,7 +22,7 @@ describe('AppComponent', () => {
       declarations: [AppComponent],
       imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
       providers: [SettingsService, PersistenceService, ProgressService],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     electronService = TestBed.get(ElectronService);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cd6c901f..8d89c006 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,12 +6,12 @@ import { SettingsService } from './services/settings.service';
 import { ThemeService } from './services/theme.service';
 import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { ProgressService } from './common/progress/progress.service';
-import { OverlayContainer} from '@angular/cdk/overlay';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
   public darkThemeEnabled: boolean = false;
@@ -38,7 +38,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.electronService.isElectronApp) {
-      this.settingsService.subscribe(settings => {
+      this.settingsService.subscribe((settings) => {
         this.electronService.ipcRenderer.send('settings.changed', settings);
       });
     }
@@ -59,14 +59,14 @@ export class AppComponent implements OnInit {
     this.componentCssClass = theme;
   }
 
-  checkEvent(routerEvent) : void {
+  checkEvent(routerEvent): void {
     if (routerEvent instanceof NavigationStart) {
       this.progressService.activate();
-    }
- 
-    else if (routerEvent instanceof NavigationEnd ||
-             routerEvent instanceof NavigationCancel ||
-             routerEvent instanceof NavigationError) {
+    } else if (
+      routerEvent instanceof NavigationEnd ||
+      routerEvent instanceof NavigationCancel ||
+      routerEvent instanceof NavigationError
+    ) {
       this.progressService.deactivate();
     }
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 670201b2..a05a1878 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -470,7 +470,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     TemplateNameDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
     EditNetworkConfigurationDialogComponent,
-    ReportIssueComponent
+    ReportIssueComponent,
   ],
   imports: [
     AngularReactBrowserModule,
@@ -492,7 +492,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     NgxChildProcessModule,
     MATERIAL_IMPORTS,
     NgCircleProgressModule.forRoot(),
-    OverlayModule
+    OverlayModule,
   ],
   providers: [
     SettingsService,
@@ -567,7 +567,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     ConsoleGuard,
     Title,
     ApplianceService,
-    UpdatesService
+    UpdatesService,
   ],
   entryComponents: [
     AddServerDialogComponent,
@@ -615,10 +615,10 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     ChangeHostnameDialogComponent,
     ApplianceInfoDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent
+    EditNetworkConfigurationDialogComponent,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {
-  constructor(protected _googleAnalyticsService: GoogleAnalyticsService) { }
+  constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {}
 }
diff --git a/src/app/cartography/angular-map.imports.ts b/src/app/cartography/angular-map.imports.ts
index e2a53e9f..06856ccf 100644
--- a/src/app/cartography/angular-map.imports.ts
+++ b/src/app/cartography/angular-map.imports.ts
@@ -23,5 +23,5 @@ export const ANGULAR_MAP_DECLARATIONS = [
   TextComponent,
   DraggableComponent,
   SelectionComponent,
-  InterfaceLabelComponent
+  InterfaceLabelComponent,
 ];
diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts
index 3ebad213..46c44721 100644
--- a/src/app/cartography/cartography.module.ts
+++ b/src/app/cartography/cartography.module.ts
@@ -37,7 +37,7 @@ import {
   MapNodesDataSource,
   MapLinksDataSource,
   MapDrawingsDataSource,
-  MapSymbolsDataSource
+  MapSymbolsDataSource,
 } from './datasources/map-datasource';
 import { LinksEventSource } from './events/links-event-source';
 import { D3MapComponent } from './components/d3-map/d3-map.component';
@@ -75,7 +75,7 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     SelectionSelectComponent,
     DraggableSelectionComponent,
     MovingCanvasDirective,
-    ZoomingCanvasDirective
+    ZoomingCanvasDirective,
   ],
   providers: [
     CssFixer,
@@ -122,8 +122,8 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     StylesToFontConverter,
     EthernetLinkWidget,
     SerialLinkWidget,
-    ...D3_MAP_IMPORTS
+    ...D3_MAP_IMPORTS,
   ],
-  exports: [D3MapComponent, ExperimentalMapComponent]
+  exports: [D3MapComponent, ExperimentalMapComponent],
 })
 export class CartographyModule {}
diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html
index b409cd50..e166c697 100644
--- a/src/app/cartography/components/d3-map/d3-map.component.html
+++ b/src/app/cartography/components/d3-map/d3-map.component.html
@@ -1,14 +1,38 @@
 <svg id="map" #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
   <defs>
-    <pattern attr.x="{{drawingGridX}}" attr.y="{{drawingGridY}}" id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">
-      <path attr.d="M {{project.drawing_grid_size}} 0 L 0 0 0 {{project.drawing_grid_size}}" fill="none" stroke="silver" attr.stroke-width="{{gridVisibility}}"/>
+    <pattern
+      attr.x="{{ drawingGridX }}"
+      attr.y="{{ drawingGridY }}"
+      id="gridDrawing"
+      attr.width="{{ project.drawing_grid_size }}"
+      attr.height="{{ project.drawing_grid_size }}"
+      patternUnits="userSpaceOnUse"
+    >
+      <path
+        attr.d="M {{ project.drawing_grid_size }} 0 L 0 0 0 {{ project.drawing_grid_size }}"
+        fill="none"
+        stroke="silver"
+        attr.stroke-width="{{ gridVisibility }}"
+      />
     </pattern>
   </defs>
 
   <defs>
-    <pattern attr.x="{{nodeGridX}}" attr.y="{{nodeGridY}}" id="gridNode" attr.width="{{project.grid_size}}" attr.height="{{project.grid_size}}" patternUnits="userSpaceOnUse">
-      <path attr.d="M {{project.grid_size}} 0 L 0 0 0 {{project.grid_size}}" fill="none" stroke="DarkSlateGray" attr.stroke-width="{{gridVisibility}}"/>
+    <pattern
+      attr.x="{{ nodeGridX }}"
+      attr.y="{{ nodeGridY }}"
+      id="gridNode"
+      attr.width="{{ project.grid_size }}"
+      attr.height="{{ project.grid_size }}"
+      patternUnits="userSpaceOnUse"
+    >
+      <path
+        attr.d="M {{ project.grid_size }} 0 L 0 0 0 {{ project.grid_size }}"
+        fill="none"
+        stroke="DarkSlateGray"
+        attr.stroke-width="{{ gridVisibility }}"
+      />
     </pattern>
   </defs>
 
diff --git a/src/app/cartography/components/d3-map/d3-map.component.spec.ts b/src/app/cartography/components/d3-map/d3-map.component.spec.ts
index 110f85cc..1cafcb0e 100644
--- a/src/app/cartography/components/d3-map/d3-map.component.spec.ts
+++ b/src/app/cartography/components/d3-map/d3-map.component.spec.ts
@@ -8,7 +8,7 @@ describe('D3MapComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [D3MapComponent]
+      declarations: [D3MapComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts
index 44960512..46368f45 100644
--- a/src/app/cartography/components/d3-map/d3-map.component.ts
+++ b/src/app/cartography/components/d3-map/d3-map.component.ts
@@ -9,7 +9,7 @@ import {
   SimpleChange,
   EventEmitter,
   Output,
-  ViewChild
+  ViewChild,
 } from '@angular/core';
 import { Selection, select } from 'd3-selection';
 
@@ -38,7 +38,7 @@ import { MapSettingsService } from '../../../services/mapsettings.service';
 @Component({
   selector: 'app-d3-map',
   templateUrl: './d3-map.component.html',
-  styleUrls: ['./d3-map.component.scss']
+  styleUrls: ['./d3-map.component.scss'],
 })
 export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nodes: Node[] = [];
@@ -60,7 +60,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   private subscriptions: Subscription[] = [];
   private drawLinkTool: boolean;
   protected settings = {
-    show_interface_labels: true
+    show_interface_labels: true,
   };
   public gridVisibility: number = 0;
 
@@ -148,9 +148,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
       }
     });
 
-    this.subscriptions.push(
-      this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
-    );
+    this.subscriptions.push(this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw()));
 
     this.subscriptions.push(
       this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
@@ -172,7 +170,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     );
 
     this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0;
-    this.mapSettingsService.isScrollDisabled.subscribe(val => this.resize(val));
+    this.mapSettingsService.isScrollDisabled.subscribe((val) => this.resize(val));
   }
 
   ngOnDestroy() {
@@ -190,10 +188,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   public createGraph(domElement: HTMLElement) {
     const rootElement = select(domElement);
     this.svg = rootElement.select<SVGSVGElement>('svg');
-    this.graphLayout.connect(
-      this.svg,
-      this.context
-    );
+    this.graphLayout.connect(this.svg, this.context);
     this.graphLayout.draw(this.svg, this.context);
     this.mapChangeDetectorRef.hasBeenDrawn = true;
   }
@@ -227,11 +222,23 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   updateGrid() {
-    if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.grid_size) * this.project.grid_size));
-    if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.grid_size) * this.project.grid_size));
+    if (this.project.grid_size && this.project.grid_size > 0)
+      this.nodeGridX =
+        this.project.scene_width / 2 -
+        Math.floor(this.project.scene_width / 2 / this.project.grid_size) * this.project.grid_size;
+    if (this.project.grid_size && this.project.grid_size > 0)
+      this.nodeGridY =
+        this.project.scene_height / 2 -
+        Math.floor(this.project.scene_height / 2 / this.project.grid_size) * this.project.grid_size;
 
-    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
-    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
+    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
+      this.drawingGridX =
+        this.project.scene_width / 2 -
+        Math.floor(this.project.scene_width / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
+    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
+      this.drawingGridY =
+        this.project.scene_height / 2 -
+        Math.floor(this.project.scene_height / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
   }
 
   @HostListener('window:resize', ['$event'])
diff --git a/src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts b/src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
index 2bb40d57..492da989 100644
--- a/src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
+++ b/src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
@@ -67,8 +67,8 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: nodesStartEventEmitter,
         drag: nodesDragEventEmitter,
-        end: nodesEndEventEmitter
-      }
+        end: nodesEndEventEmitter,
+      },
     };
 
     const drawingsWidgetStub = {
@@ -76,11 +76,11 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: drawingsStartEventEmitter,
         drag: drawingsDragEventEmitter,
-        end: drawingsEndEventEmitter
-      }
+        end: drawingsEndEventEmitter,
+      },
     };
     const linksWidgetStub = {
-      redrawLink: () => {}
+      redrawLink: () => {},
     };
 
     const labelWidgetStub = {
@@ -88,27 +88,27 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: labelStartEventEmitter,
         drag: labelDragEventEmitter,
-        end: labelEndEventEmitter
-      }
+        end: labelEndEventEmitter,
+      },
     };
 
     const interfaceLabelWidgetStub = {
       draggable: {
         start: interfaceLabelStartEventEmitter,
         drag: interfaceLabelDragEventEmitter,
-        end: interfaceLabelEndEventEmitter
-      }
+        end: interfaceLabelEndEventEmitter,
+      },
     };
 
     const nodesEventSourceStub = {
       dragged: { emit: () => {} },
-      labelDragged: { emit: () => {} }
+      labelDragged: { emit: () => {} },
     };
     const drawingsEventSourceStub = {
-      dragged: { emit: () => {} }
+      dragged: { emit: () => {} },
     };
     const linksEventSourceStub = {
-      interfaceDragged: { emit: () => {} }
+      interfaceDragged: { emit: () => {} },
     };
 
     TestBed.configureTestingModule({
@@ -123,9 +123,9 @@ describe('DraggableSelectionComponent', () => {
         { provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
         { provide: GraphDataManager, useValue: mockedGraphDataManager },
         { provide: LinksEventSource, useValue: linksEventSourceStub },
-        { provide: MapSettingsService, useClass: MapSettingsService }
+        { provide: MapSettingsService, useClass: MapSettingsService },
       ],
-      declarations: [DraggableSelectionComponent]
+      declarations: [DraggableSelectionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/draggable-selection/draggable-selection.component.ts b/src/app/cartography/components/draggable-selection/draggable-selection.component.ts
index ffb73210..3bcf8c74 100644
--- a/src/app/cartography/components/draggable-selection/draggable-selection.component.ts
+++ b/src/app/cartography/components/draggable-selection/draggable-selection.component.ts
@@ -22,7 +22,7 @@ import { MapSettingsService } from '../../../services/mapsettings.service';
 @Component({
   selector: 'app-draggable-selection',
   templateUrl: './draggable-selection.component.html',
-  styleUrls: ['./draggable-selection.component.scss']
+  styleUrls: ['./draggable-selection.component.scss'],
 })
 export class DraggableSelectionComponent implements OnInit, OnDestroy {
   private start: Subscription;
@@ -62,25 +62,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     ).subscribe((evt: DraggableStart<any>) => {
       const selected = this.selectionManager.getSelected();
       if (evt.datum instanceof MapNode) {
-        if (selected.filter(item => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
+        if (selected.filter((item) => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapDrawing) {
-        if (selected.filter(item => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
+        if (selected.filter((item) => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapLabel) {
-        if (selected.filter(item => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
+        if (selected.filter((item) => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapLinkNode) {
-        if (selected.filter(item => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
+        if (selected.filter((item) => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
@@ -95,7 +95,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       if (!this.isMapLocked) {
         const selected = this.selectionManager.getSelected();
         // update nodes
-        let mapNodes = selected.filter(item => item instanceof MapNode);
+        let mapNodes = selected.filter((item) => item instanceof MapNode);
         const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
         const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
         selectedNodes.forEach((node: MapNode) => {
@@ -107,18 +107,18 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
           const links = this.graphDataManager
             .getLinks()
             .filter(
-              link =>
+              (link) =>
                 (link.target !== undefined && link.target.id === node.id) ||
                 (link.source !== undefined && link.source.id === node.id)
             );
 
-          links.forEach(link => {
+          links.forEach((link) => {
             this.linksWidget.redrawLink(svg, link);
           });
         });
 
         // update drawings
-        let mapDrawings = selected.filter(item => item instanceof MapDrawing);
+        let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
         const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
         selectedDrawings.forEach((drawing: MapDrawing) => {
           drawing.x += evt.dx;
@@ -127,32 +127,36 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
         });
 
         // update labels
-        let mapLabels = selected.filter(item => item instanceof MapLabel);
-        const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLabels = selected.filter((item) => item instanceof MapLabel);
+        const selectedLabels = mapLabels.filter(
+          (item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLabels.forEach((label: MapLabel) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
 
-          const node = this.graphDataManager.getNodes().filter(node => node.id === label.nodeId)[0];
+          const node = this.graphDataManager.getNodes().filter((node) => node.id === label.nodeId)[0];
           node.label.x += evt.dx;
           node.label.y += evt.dy;
           this.labelWidget.redrawLabel(svg, label);
         });
 
         // update interface labels
-        let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
-        const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
+        const selectedLinkNodes = mapLinkNodes.filter(
+          (item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLinkNodes.forEach((interfaceLabel: MapLinkNode) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === interfaceLabel.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
 
           const link = this.graphDataManager
             .getLinks()
-            .filter(link => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
+            .filter((link) => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
           if (link.nodes[0].id === interfaceLabel.id) {
             link.nodes[0].label.x += evt.dx;
             link.nodes[0].label.y += evt.dy;
@@ -176,23 +180,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       if (!this.isMapLocked) {
         const selected = this.selectionManager.getSelected();
 
-        let mapNodes = selected.filter(item => item instanceof MapNode);
+        let mapNodes = selected.filter((item) => item instanceof MapNode);
         const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
         const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
         selectedNodes.forEach((item: MapNode) => {
           this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
         });
 
-        let mapDrawings = selected.filter(item => item instanceof MapDrawing);
+        let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
         const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
         selectedDrawings.forEach((item: MapDrawing) => {
           this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
         });
 
-        let mapLabels = selected.filter(item => item instanceof MapLabel);
-        const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLabels = selected.filter((item) => item instanceof MapLabel);
+        const selectedLabels = mapLabels.filter(
+          (item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLabels.forEach((label: MapLabel) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
@@ -200,10 +206,12 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
           this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
         });
 
-        let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
-        const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0)
+        let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
+        const selectedLinkNodes = mapLinkNodes.filter(
+          (item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLinkNodes.forEach((label: MapLinkNode) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
diff --git a/src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts b/src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts
index f8854882..8b67bff4 100644
--- a/src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts
+++ b/src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts
@@ -14,9 +14,9 @@ describe('DrawingAddingComponent', () => {
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsEventSource, useValue: drawingsEventSource },
-        { provide: Context, useClass: Context }
+        { provide: Context, useClass: Context },
       ],
-      declarations: [DrawingAddingComponent]
+      declarations: [DrawingAddingComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts
index cc380967..48880ec9 100644
--- a/src/app/cartography/components/drawing-adding/drawing-adding.component.ts
+++ b/src/app/cartography/components/drawing-adding/drawing-adding.component.ts
@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-drawing-adding',
   templateUrl: './drawing-adding.component.html',
-  styleUrls: ['./drawing-adding.component.scss']
+  styleUrls: ['./drawing-adding.component.scss'],
 })
 export class DrawingAddingComponent implements OnInit, OnDestroy {
   @Input('svg') svg: SVGSVGElement;
@@ -18,15 +18,19 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
   constructor(private drawingsEventSource: DrawingsEventSource, private context: Context) {}
 
   ngOnInit() {
-    this.drawingSelected = this.drawingsEventSource.selected.subscribe(evt => {
+    this.drawingSelected = this.drawingsEventSource.selected.subscribe((evt) => {
       evt === '' ? this.deactivate() : this.activate();
     });
   }
 
   activate() {
     let listener = (event: MouseEvent) => {
-      let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k;
-      let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k;
+      let x =
+        (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x)) /
+        this.context.transformation.k;
+      let y =
+        (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y)) /
+        this.context.transformation.k;
 
       this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
       this.deactivate();
diff --git a/src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts b/src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts
index 9b530960..8801f747 100644
--- a/src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts
+++ b/src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts
@@ -36,9 +36,9 @@ describe('DrawingResizingComponent', () => {
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsWidget, useValue: drawingsWidgetMock },
-        { provide: DrawingsEventSource, useValue: drawingsEventSource }
+        { provide: DrawingsEventSource, useValue: drawingsEventSource },
       ],
-      declarations: [DrawingResizingComponent]
+      declarations: [DrawingResizingComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts b/src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts
index 05c654c1..de912d6c 100644
--- a/src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts
+++ b/src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts
@@ -8,10 +8,8 @@ import { ResizingEnd } from '../../events/resizing';
 
 @Component({
   selector: 'app-drawing-resizing',
-  template: `
-    <ng-content></ng-content>
-  `,
-  styleUrls: ['./drawing-resizing.component.scss']
+  template: ` <ng-content></ng-content> `,
+  styleUrls: ['./drawing-resizing.component.scss'],
 })
 export class DrawingResizingComponent implements OnInit, OnDestroy {
   resizingFinished: Subscription;
diff --git a/src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts b/src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts
index 5712ef99..ff6afe29 100644
--- a/src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts
@@ -8,7 +8,7 @@ describe('DraggableComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DraggableComponent]
+      declarations: [DraggableComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/draggable/draggable.component.ts b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts
index d1207a80..43125bbf 100644
--- a/src/app/cartography/components/experimental-map/draggable/draggable.component.ts
+++ b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts
@@ -8,10 +8,8 @@ export class DraggableDraggedEvent {
 
 @Component({
   selector: '[app-draggable]',
-  template: `
-    <ng-content></ng-content>
-  `,
-  styleUrls: ['./draggable.component.scss']
+  template: ` <ng-content></ng-content> `,
+  styleUrls: ['./draggable.component.scss'],
 })
 export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input('app-draggable') item: Point;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts
index 4578bb54..eb7027c0 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts
@@ -8,7 +8,7 @@ describe('DrawingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DrawingComponent]
+      declarations: [DrawingComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawing.component.ts b/src/app/cartography/components/experimental-map/drawing/drawing.component.ts
index dfd9cc9f..727bf748 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawing.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawing.component.ts
@@ -12,7 +12,7 @@ import { DrawingsEventSource } from '../../../events/drawings-event-source';
 @Component({
   selector: '[app-drawing]',
   templateUrl: './drawing.component.html',
-  styleUrls: ['./drawing.component.scss']
+  styleUrls: ['./drawing.component.scss'],
 })
 export class DrawingComponent implements OnInit {
   @Input('app-drawing') drawing: MapDrawing;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts
index 6fe0e0d8..3d1cc6f9 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts
@@ -8,7 +8,7 @@ describe('EllipseComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [EllipseComponent]
+      declarations: [EllipseComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts b/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts
index f1437436..f3019e6b 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts
@@ -5,7 +5,7 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
 @Component({
   selector: '[app-ellipse]',
   templateUrl: './ellipse.component.html',
-  styleUrls: ['./ellipse.component.scss']
+  styleUrls: ['./ellipse.component.scss'],
 })
 export class EllipseComponent implements OnInit {
   @Input('app-ellipse') ellipse: EllipseElement;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts
index 6ee6952c..0ea04f1d 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts
@@ -8,7 +8,7 @@ describe('ImageComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ImageComponent]
+      declarations: [ImageComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts b/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts
index 5ddd968c..25a96833 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts
@@ -4,7 +4,7 @@ import { ImageElement } from '../../../../../models/drawings/image-element';
 @Component({
   selector: '[app-image]',
   templateUrl: './image.component.html',
-  styleUrls: ['./image.component.scss']
+  styleUrls: ['./image.component.scss'],
 })
 export class ImageComponent implements OnInit {
   @Input('app-image') image: ImageElement;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts
index 3f83bf9e..5318150e 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts
@@ -8,7 +8,7 @@ describe('LineComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LineComponent]
+      declarations: [LineComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts b/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts
index ae6018b1..8c75758a 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts
@@ -5,7 +5,7 @@ import { LineElement } from '../../../../../models/drawings/line-element';
 @Component({
   selector: '[app-line]',
   templateUrl: './line.component.html',
-  styleUrls: ['./line.component.scss']
+  styleUrls: ['./line.component.scss'],
 })
 export class LineComponent implements OnInit {
   @Input('app-line') line: LineElement;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts
index 949ca269..b739bbdc 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts
@@ -8,7 +8,7 @@ describe('RectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [RectComponent]
+      declarations: [RectComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts
index 4caa423f..def416c5 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts
@@ -5,7 +5,7 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
 @Component({
   selector: '[app-rect]',
   templateUrl: './rect.component.html',
-  styleUrls: ['./rect.component.scss']
+  styleUrls: ['./rect.component.scss'],
 })
 export class RectComponent implements OnInit {
   @Input('app-rect') rect: RectElement;
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts
index 87012b5c..7d8e11ac 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts
@@ -8,7 +8,7 @@ describe('TextComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TextComponent]
+      declarations: [TextComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
index c1f97e1c..5afc6fba 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
@@ -6,7 +6,7 @@ import { FontFixer } from '../../../../../helpers/font-fixer';
 @Component({
   selector: '[app-text]',
   templateUrl: './text.component.html',
-  styleUrls: ['./text.component.scss']
+  styleUrls: ['./text.component.scss'],
 })
 export class TextComponent implements OnInit, DoCheck {
   static MARGIN = 4;
diff --git a/src/app/cartography/components/experimental-map/experimental-map.component.ts b/src/app/cartography/components/experimental-map/experimental-map.component.ts
index d5b0708e..22c0201b 100644
--- a/src/app/cartography/components/experimental-map/experimental-map.component.ts
+++ b/src/app/cartography/components/experimental-map/experimental-map.component.ts
@@ -9,7 +9,7 @@ import {
   SimpleChange,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  ViewChild
+  ViewChild,
 } from '@angular/core';
 
 import { GraphLayout } from '../../widgets/graph-layout';
@@ -29,7 +29,7 @@ import { LayersManager } from '../../managers/layers-manager';
   selector: 'app-experimental-map',
   templateUrl: './experimental-map.component.html',
   styleUrls: ['./experimental-map.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nodes: Node[] = [];
@@ -48,7 +48,7 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   private changesDetected: Subscription;
 
   protected settings = {
-    show_interface_labels: true
+    show_interface_labels: true,
   };
 
   constructor(
diff --git a/src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts b/src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts
index 93c68e13..d2d7cd5a 100644
--- a/src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts
@@ -8,7 +8,7 @@ describe('InterfaceLabelComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [InterfaceLabelComponent]
+      declarations: [InterfaceLabelComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts b/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
index 0a2c8921..9c1e2a0b 100644
--- a/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
+++ b/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
@@ -5,7 +5,7 @@ import { CssFixer } from '../../../helpers/css-fixer';
 @Component({
   selector: '[app-interface-label]',
   templateUrl: './interface-label.component.html',
-  styleUrls: ['./interface-label.component.scss']
+  styleUrls: ['./interface-label.component.scss'],
 })
 export class InterfaceLabelComponent implements OnInit {
   @Input('app-interface-label') ignore: any;
@@ -17,7 +17,7 @@ export class InterfaceLabelComponent implements OnInit {
     y: 0,
     text: '',
     style: '',
-    rotation: 0
+    rotation: 0,
   };
 
   borderSize = 5;
diff --git a/src/app/cartography/components/experimental-map/link/link.component.spec.ts b/src/app/cartography/components/experimental-map/link/link.component.spec.ts
index 127cafff..50849f8b 100644
--- a/src/app/cartography/components/experimental-map/link/link.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/link/link.component.spec.ts
@@ -8,7 +8,7 @@ describe('LinkComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LinkComponent]
+      declarations: [LinkComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/link/link.component.ts b/src/app/cartography/components/experimental-map/link/link.component.ts
index f89139dc..c6a86d97 100644
--- a/src/app/cartography/components/experimental-map/link/link.component.ts
+++ b/src/app/cartography/components/experimental-map/link/link.component.ts
@@ -6,7 +6,7 @@ import {
   ElementRef,
   EventEmitter,
   ChangeDetectorRef,
-  OnDestroy
+  OnDestroy,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LinkStrategy } from './strategies/link-strategy';
@@ -19,7 +19,7 @@ import { MapLink } from '../../../models/map/map-link';
 @Component({
   selector: '[app-link]',
   templateUrl: './link.component.html',
-  styleUrls: ['./link.component.scss']
+  styleUrls: ['./link.component.scss'],
 })
 export class LinkComponent implements OnInit, OnDestroy {
   @Input('app-link') link: MapLink;
diff --git a/src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts b/src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts
index a3df16a1..554d17f0 100644
--- a/src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts
+++ b/src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts
@@ -6,7 +6,7 @@ export class EthernetLinkStrategy implements LinkStrategy {
   public d(link: MapLink): string {
     const points = [
       [link.source.x + link.source.width / 2, link.source.y + link.source.height / 2],
-      [link.target.x + link.target.width / 2, link.target.y + link.target.height / 2]
+      [link.target.x + link.target.width / 2, link.target.y + link.target.height / 2],
     ];
 
     const line_generator = path();
diff --git a/src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts b/src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts
index 4f0a04fe..63cb4b12 100644
--- a/src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts
+++ b/src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts
@@ -6,11 +6,11 @@ export class SerialLinkStrategy implements LinkStrategy {
   private linkToPoints(link: MapLink) {
     const source = {
       x: link.source.x + link.source.width / 2,
-      y: link.source.y + link.source.height / 2
+      y: link.source.y + link.source.height / 2,
     };
     const target = {
       x: link.target.x + link.target.width / 2,
-      y: link.target.y + link.target.height / 2
+      y: link.target.y + link.target.height / 2,
     };
 
     const dx = target.x - source.x;
@@ -22,12 +22,12 @@ export class SerialLinkStrategy implements LinkStrategy {
 
     const angle_source: [number, number] = [
       source.x + dx / 2.0 + 15 * vect_rot[0],
-      source.y + dy / 2.0 + 15 * vect_rot[1]
+      source.y + dy / 2.0 + 15 * vect_rot[1],
     ];
 
     const angle_target: [number, number] = [
       target.x - dx / 2.0 - 15 * vect_rot[0],
-      target.y - dy / 2.0 - 15 * vect_rot[1]
+      target.y - dy / 2.0 - 15 * vect_rot[1],
     ];
 
     return [[source.x, source.y], angle_source, angle_target, [target.x, target.y]];
diff --git a/src/app/cartography/components/experimental-map/node/node.component.spec.ts b/src/app/cartography/components/experimental-map/node/node.component.spec.ts
index 76c09dc4..82d887f9 100644
--- a/src/app/cartography/components/experimental-map/node/node.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/node/node.component.spec.ts
@@ -8,7 +8,7 @@ describe('NodeComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NodeComponent]
+      declarations: [NodeComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/node/node.component.ts b/src/app/cartography/components/experimental-map/node/node.component.ts
index 896ec653..fdd1d842 100644
--- a/src/app/cartography/components/experimental-map/node/node.component.ts
+++ b/src/app/cartography/components/experimental-map/node/node.component.ts
@@ -10,7 +10,7 @@ import {
   EventEmitter,
   OnDestroy,
   OnChanges,
-  AfterViewInit
+  AfterViewInit,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
@@ -25,7 +25,7 @@ import { DraggedDataEvent } from '../../../events/event-source';
   selector: '[app-node]',
   templateUrl: './node.component.html',
   styleUrls: ['./node.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   static NODE_LABEL_MARGIN = 3;
diff --git a/src/app/cartography/components/experimental-map/selection/selection.component.spec.ts b/src/app/cartography/components/experimental-map/selection/selection.component.spec.ts
index 9cf81f57..174d5211 100644
--- a/src/app/cartography/components/experimental-map/selection/selection.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/selection/selection.component.spec.ts
@@ -8,7 +8,7 @@ describe('SelectionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [SelectionComponent]
+      declarations: [SelectionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/selection/selection.component.ts b/src/app/cartography/components/experimental-map/selection/selection.component.ts
index cc51bc47..c8fb8959 100644
--- a/src/app/cartography/components/experimental-map/selection/selection.component.ts
+++ b/src/app/cartography/components/experimental-map/selection/selection.component.ts
@@ -5,7 +5,7 @@ import { Rectangle } from '../../../models/rectangle';
 @Component({
   selector: '[app-selection]',
   templateUrl: './selection.component.html',
-  styleUrls: ['./selection.component.scss']
+  styleUrls: ['./selection.component.scss'],
 })
 export class SelectionComponent implements OnInit, AfterViewInit {
   @Input('app-selection') svg: SVGSVGElement;
diff --git a/src/app/cartography/components/experimental-map/status/status.component.spec.ts b/src/app/cartography/components/experimental-map/status/status.component.spec.ts
index d4f8f4a9..69e3562e 100644
--- a/src/app/cartography/components/experimental-map/status/status.component.spec.ts
+++ b/src/app/cartography/components/experimental-map/status/status.component.spec.ts
@@ -8,7 +8,7 @@ describe('StatusComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [StatusComponent]
+      declarations: [StatusComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/experimental-map/status/status.component.ts b/src/app/cartography/components/experimental-map/status/status.component.ts
index af2d9dab..cb7a5547 100644
--- a/src/app/cartography/components/experimental-map/status/status.component.ts
+++ b/src/app/cartography/components/experimental-map/status/status.component.ts
@@ -3,7 +3,7 @@ import { Component, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
 @Component({
   selector: '[app-status]',
   templateUrl: './status.component.html',
-  styleUrls: ['./status.component.scss']
+  styleUrls: ['./status.component.scss'],
 })
 export class StatusComponent {
   static STOPPED_STATUS_RECT_WIDTH = 10;
@@ -12,7 +12,7 @@ export class StatusComponent {
     status: '',
     path: null,
     direction: null,
-    d: null
+    d: null,
   };
 
   constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}
diff --git a/src/app/cartography/components/selection-control/selection-control.component.ts b/src/app/cartography/components/selection-control/selection-control.component.ts
index 52ed1c6a..aa9f14d4 100644
--- a/src/app/cartography/components/selection-control/selection-control.component.ts
+++ b/src/app/cartography/components/selection-control/selection-control.component.ts
@@ -9,7 +9,7 @@ import { Rectangle } from '../../models/rectangle';
 @Component({
   selector: 'app-selection-control',
   templateUrl: './selection-control.component.html',
-  styleUrls: ['./selection-control.component.scss']
+  styleUrls: ['./selection-control.component.scss'],
 })
 export class SelectionControlComponent implements OnInit, OnDestroy {
   private onSelection: Subscription;
@@ -23,21 +23,21 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.onSelection = this.selectionEventSource.selected.subscribe((rectangle: Rectangle) => {
-      const selectedNodes = this.graphDataManager.getNodes().filter(node => {
+      const selectedNodes = this.graphDataManager.getNodes().filter((node) => {
         return this.inRectangleHelper.inRectangle(rectangle, node.x, node.y);
       });
 
-      const selectedLinks = this.graphDataManager.getLinks().filter(link => {
+      const selectedLinks = this.graphDataManager.getLinks().filter((link) => {
         return this.inRectangleHelper.inRectangle(rectangle, link.x, link.y);
       });
 
-      const selectedDrawings = this.graphDataManager.getDrawings().filter(drawing => {
+      const selectedDrawings = this.graphDataManager.getDrawings().filter((drawing) => {
         return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y);
       });
 
       const selectedLabels = this.graphDataManager
         .getNodes()
-        .filter(node => {
+        .filter((node) => {
           if (node.label === undefined) {
             return false;
           }
@@ -45,11 +45,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           const labelY = node.y + node.label.y;
           return this.inRectangleHelper.inRectangle(rectangle, labelX, labelY);
         })
-        .map(node => node.label);
+        .map((node) => node.label);
 
       const selectedInterfacesLabelsSources = this.graphDataManager
         .getLinks()
-        .filter(link => {
+        .filter((link) => {
           if (link.source === undefined || link.nodes.length != 2 || link.nodes[0].label === undefined) {
             return false;
           }
@@ -57,11 +57,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           const interfaceLabelY = link.source.y + link.nodes[0].label.y;
           return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
         })
-        .map(link => link.nodes[0]);
+        .map((link) => link.nodes[0]);
 
       const selectedInterfacesLabelsTargets = this.graphDataManager
         .getLinks()
-        .filter(link => {
+        .filter((link) => {
           if (link.target === undefined || link.nodes.length != 2 || link.nodes[1].label === undefined) {
             return false;
           }
@@ -69,7 +69,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           const interfaceLabelY = link.target.y + link.nodes[1].label.y;
           return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
         })
-        .map(link => link.nodes[1]);
+        .map((link) => link.nodes[1]);
 
       const selectedInterfaces = [...selectedInterfacesLabelsSources, ...selectedInterfacesLabelsTargets];
 
@@ -78,7 +78,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
         ...selectedLinks,
         ...selectedDrawings,
         ...selectedLabels,
-        ...selectedInterfaces
+        ...selectedInterfaces,
       ];
 
       this.selectionManager.setSelected(selected);
diff --git a/src/app/cartography/components/selection-select/selection-select.component.spec.ts b/src/app/cartography/components/selection-select/selection-select.component.spec.ts
index 4117b6cb..e7c45496 100644
--- a/src/app/cartography/components/selection-select/selection-select.component.spec.ts
+++ b/src/app/cartography/components/selection-select/selection-select.component.spec.ts
@@ -8,7 +8,7 @@ describe('SelectionSelectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [SelectionSelectComponent]
+      declarations: [SelectionSelectComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/selection-select/selection-select.component.ts b/src/app/cartography/components/selection-select/selection-select.component.ts
index a1ca43e7..38e2775c 100644
--- a/src/app/cartography/components/selection-select/selection-select.component.ts
+++ b/src/app/cartography/components/selection-select/selection-select.component.ts
@@ -6,16 +6,13 @@ import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
 @Component({
   selector: 'app-selection-select',
   templateUrl: './selection-select.component.html',
-  styleUrls: ['./selection-select.component.scss']
+  styleUrls: ['./selection-select.component.scss'],
 })
 export class SelectionSelectComponent implements OnInit, OnDestroy {
   private onSelected: Subscription;
   private onUnselected: Subscription;
 
-  constructor(
-    private selectionManager: SelectionManager, 
-    private mapChangeDetectorRef: MapChangeDetectorRef
-  ) {}
+  constructor(private selectionManager: SelectionManager, private mapChangeDetectorRef: MapChangeDetectorRef) {}
 
   ngOnInit() {
     this.onSelected = this.selectionManager.selected.subscribe(() => {
diff --git a/src/app/cartography/components/text-editor/text-editor.component.spec.ts b/src/app/cartography/components/text-editor/text-editor.component.spec.ts
index 15836896..ef059460 100644
--- a/src/app/cartography/components/text-editor/text-editor.component.spec.ts
+++ b/src/app/cartography/components/text-editor/text-editor.component.spec.ts
@@ -31,9 +31,9 @@ describe('TextEditorComponent', () => {
         { provide: NodesDataSource, useClass: NodesDataSource },
         { provide: LinksDataSource, useClass: LinksDataSource },
         { provide: SelectionManager, useClass: SelectionManager },
-        { provide: FontFixer, useClass: FontFixer }
+        { provide: FontFixer, useClass: FontFixer },
       ],
-      declarations: [TextEditorComponent]
+      declarations: [TextEditorComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/cartography/components/text-editor/text-editor.component.ts b/src/app/cartography/components/text-editor/text-editor.component.ts
index e98cea56..237fc3f8 100644
--- a/src/app/cartography/components/text-editor/text-editor.component.ts
+++ b/src/app/cartography/components/text-editor/text-editor.component.ts
@@ -1,4 +1,14 @@
-import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2, NgZone } from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  ElementRef,
+  OnInit,
+  Input,
+  EventEmitter,
+  OnDestroy,
+  Renderer2,
+  NgZone,
+} from '@angular/core';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
 import { ToolsService } from '../../../services/tools.service';
@@ -24,7 +34,7 @@ import { Font } from '../../models/font';
 @Component({
   selector: 'app-text-editor',
   templateUrl: './text-editor.component.html',
-  styleUrls: ['./text-editor.component.scss']
+  styleUrls: ['./text-editor.component.scss'],
 })
 export class TextEditorComponent implements OnInit, OnDestroy {
   @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
@@ -73,7 +83,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       this.leftPosition = event.pageX.toString() + 'px';
       this.topPosition = event.pageY.toString() + 'px';
       this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-      this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+      this.renderer.setStyle(
+        this.temporaryTextElement.nativeElement,
+        'transform',
+        `scale(${this.mapScaleService.getScale()})`
+      );
       this.temporaryTextElement.nativeElement.focus();
 
       let textListener = () => {
@@ -113,7 +127,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
         this.selectionManager.setSelected([]);
 
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'transform',
+          `scale(${this.mapScaleService.getScale()})`
+        );
         this.editedLink = elem;
 
         select(textElements[index]).attr('visibility', 'hidden');
@@ -121,34 +139,52 @@ export class TextEditorComponent implements OnInit, OnDestroy {
 
         this.editedNode = this.nodesDataSource.get(elem.nodeId);
         this.editedLink = elem;
-        let x = ((elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-        let y = ((elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        let x =
+          (elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().x +
+          this.context.transformation.x;
+        let y =
+          (elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().y +
+          this.context.transformation.y;
         this.leftPosition = x.toString() + 'px';
         this.topPosition = y.toString() + 'px';
         this.temporaryTextElement.nativeElement.innerText = elem.label.text;
 
         let styleProperties: StyleProperty[] = [];
-        for (let property of elem.label.style.split(";")){
+        for (let property of elem.label.style.split(';')) {
           styleProperties.push({
-            property: property.split(": ")[0],
-            value: property.split(": ")[1]
+            property: property.split(': ')[0],
+            value: property.split(': ')[1],
           });
         }
         let font: Font = {
-          font_family: styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter',
-          font_size: styleProperties.find(p => p.property === 'font-size') ? Number(styleProperties.find(p => p.property === 'font-size').value) : 10.0,
-          font_weight: styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal'
+          font_family: styleProperties.find((p) => p.property === 'font-family')
+            ? styleProperties.find((p) => p.property === 'font-family').value
+            : 'TypeWriter',
+          font_size: styleProperties.find((p) => p.property === 'font-size')
+            ? Number(styleProperties.find((p) => p.property === 'font-size').value)
+            : 10.0,
+          font_weight: styleProperties.find((p) => p.property === 'font-weight')
+            ? styleProperties.find((p) => p.property === 'font-weight').value
+            : 'normal',
         };
         font = this.fontFixer.fix(font);
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000');
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'color',
+          styleProperties.find((p) => p.property === 'fill')
+            ? styleProperties.find((p) => p.property === 'fill').value
+            : '#000000'
+        );
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', font.font_family);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${font.font_size}pt`);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', font.font_weight);
-        
+
         let listener = () => {
           let innerText = this.temporaryTextElement.nativeElement.innerText;
           let link: Link = this.linksDataSource.get(this.editedLink.linkId);
-          link.nodes.find(n => n.node_id === this.editedNode.node_id).label.text = innerText;
+          link.nodes.find((n) => n.node_id === this.editedNode.node_id).label.text = innerText;
 
           this.linkService.updateLink(this.server, link).subscribe((link: Link) => {
             rootElement
@@ -177,7 +213,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       .selectAll<SVGTextElement, TextElement>('text.text_element')
       .on('dblclick', (elem, index, textElements) => {
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'transform',
+          `scale(${this.mapScaleService.getScale()})`
+        );
         this.editedElement = elem;
 
         select(textElements[index]).attr('visibility', 'hidden');
@@ -185,8 +225,14 @@ export class TextEditorComponent implements OnInit, OnDestroy {
 
         this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
         var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
-        var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-        var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        var x =
+          Number(transformData[1].split(/,/)[0]) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().x +
+          this.context.transformation.x;
+        var y =
+          Number(transformData[1].split(/,/)[1]) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().y +
+          this.context.transformation.y;
         this.leftPosition = x.toString() + 'px';
         this.topPosition = y.toString() + 'px';
         this.temporaryTextElement.nativeElement.innerText = elem.text;
diff --git a/src/app/cartography/converters/map/link-to-map-link-converter.ts b/src/app/cartography/converters/map/link-to-map-link-converter.ts
index b9afd052..d22c646d 100644
--- a/src/app/cartography/converters/map/link-to-map-link-converter.ts
+++ b/src/app/cartography/converters/map/link-to-map-link-converter.ts
@@ -17,7 +17,9 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     mapLink.capturing = link.capturing;
     mapLink.filters = link.filters;
     mapLink.linkType = link.link_type;
-    mapLink.nodes = link.nodes.map(linkNode => this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id }));
+    mapLink.nodes = link.nodes.map((linkNode) =>
+      this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id })
+    );
     mapLink.projectId = link.project_id;
     mapLink.suspend = link.suspend;
     return mapLink;
diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
index cc1cb9b4..661b344a 100644
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
@@ -15,27 +15,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     let elem = ``;
 
     if (mapDrawing.element instanceof RectElement) {
-      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${
-        mapDrawing.element.height
-      }\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
-        mapDrawing.element.stroke_width
-      }\" />`;
+      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
     } else if (mapDrawing.element instanceof EllipseElement) {
-      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${
-        mapDrawing.element.cx
-      }\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
-        mapDrawing.element.stroke
-      }\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
+      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
     } else if (mapDrawing.element instanceof LineElement) {
-      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${
-        mapDrawing.element.x1
-      }\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
+      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
     } else if (mapDrawing.element instanceof TextElement) {
-      elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${
-        mapDrawing.element.font_family
-      }\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${
-        mapDrawing.element.text
-      }</text>`;
+      elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
     } else return '';
 
     return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;
diff --git a/src/app/cartography/converters/map/map-link-to-link-converter.ts b/src/app/cartography/converters/map/map-link-to-link-converter.ts
index 857ac394..ba56d14e 100644
--- a/src/app/cartography/converters/map/map-link-to-link-converter.ts
+++ b/src/app/cartography/converters/map/map-link-to-link-converter.ts
@@ -17,7 +17,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
     link.capturing = mapLink.capturing;
     link.filters = mapLink.filters;
     link.link_type = mapLink.linkType;
-    link.nodes = mapLink.nodes.map(mapLinkNode => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
+    link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
     link.project_id = mapLink.projectId;
     link.suspend = mapLink.suspend;
     return link;
diff --git a/src/app/cartography/converters/map/map-node-to-node-converter.ts b/src/app/cartography/converters/map/map-node-to-node-converter.ts
index ae8be713..3a207c55 100644
--- a/src/app/cartography/converters/map/map-node-to-node-converter.ts
+++ b/src/app/cartography/converters/map/map-node-to-node-converter.ts
@@ -27,7 +27,7 @@ export class MapNodeToNodeConverter implements Converter<MapNode, Node> {
     node.node_type = mapNode.nodeType;
     node.port_name_format = mapNode.portNameFormat;
     node.port_segment_size = mapNode.portSegmentSize;
-    node.ports = mapNode.ports ? mapNode.ports.map(mapPort => this.mapPortToPort.convert(mapPort)) : [];
+    node.ports = mapNode.ports ? mapNode.ports.map((mapPort) => this.mapPortToPort.convert(mapPort)) : [];
     node.project_id = mapNode.projectId;
     node.status = mapNode.status;
     node.symbol = mapNode.symbol;
diff --git a/src/app/cartography/converters/map/node-to-map-node-converter.ts b/src/app/cartography/converters/map/node-to-map-node-converter.ts
index 4608082b..b56ce698 100644
--- a/src/app/cartography/converters/map/node-to-map-node-converter.ts
+++ b/src/app/cartography/converters/map/node-to-map-node-converter.ts
@@ -29,14 +29,16 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.consoleType = node.console_type;
     mapNode.firstPortName = node.first_port_name;
     mapNode.height = node.height;
-    mapNode.label = this.labelToMapLabel ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id }) : undefined;
+    mapNode.label = this.labelToMapLabel
+      ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id })
+      : undefined;
     mapNode.locked = node.locked;
     mapNode.name = node.name;
     mapNode.nodeDirectory = node.node_directory;
     mapNode.nodeType = node.node_type;
     mapNode.portNameFormat = node.port_name_format;
     mapNode.portSegmentSize = node.port_segment_size;
-    mapNode.ports = node.ports ? node.ports.map(port => this.portToMapPort.convert(port)) : [];
+    mapNode.ports = node.ports ? node.ports.map((port) => this.portToMapPort.convert(port)) : [];
     mapNode.projectId = node.project_id;
     mapNode.status = node.status;
     mapNode.symbol = node.symbol;
diff --git a/src/app/cartography/converters/styles-to-font-converter.spec.ts b/src/app/cartography/converters/styles-to-font-converter.spec.ts
index 8726a6b1..2283dc98 100644
--- a/src/app/cartography/converters/styles-to-font-converter.spec.ts
+++ b/src/app/cartography/converters/styles-to-font-converter.spec.ts
@@ -14,7 +14,7 @@ describe('StylesToFontConverter', () => {
     const expectedFont: Font = {
       font_family: 'TypeWriter',
       font_size: 10,
-      font_weight: 'bold'
+      font_weight: 'bold',
     };
 
     expect(converter.convert(styles)).toEqual(expectedFont);
diff --git a/src/app/cartography/converters/styles-to-font-converter.ts b/src/app/cartography/converters/styles-to-font-converter.ts
index 9fa1e5e6..26cb132c 100644
--- a/src/app/cartography/converters/styles-to-font-converter.ts
+++ b/src/app/cartography/converters/styles-to-font-converter.ts
@@ -10,30 +10,30 @@ export class StylesToFontConverter implements Converter<string, Font> {
     const font: Font = {
       font_family: undefined,
       font_size: undefined,
-      font_weight: undefined
+      font_weight: undefined,
     };
 
     const ast = csstree.parse(styles, {
-      context: 'declarationList'
+      context: 'declarationList',
     });
 
-    ast.children.forEach(child => {
+    ast.children.forEach((child) => {
       if (child.property === 'font-size' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Dimension') {
             font.font_size = parseInt(value.value);
           }
         });
       }
       if (child.property === 'font-family' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Identifier') {
             font.font_family = value.name;
           }
         });
       }
       if (child.property === 'font-weight' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Identifier') {
             font.font_weight = value.name;
           }
diff --git a/src/app/cartography/d3-map.imports.ts b/src/app/cartography/d3-map.imports.ts
index ee956b81..4f4ab643 100644
--- a/src/app/cartography/d3-map.imports.ts
+++ b/src/app/cartography/d3-map.imports.ts
@@ -37,5 +37,5 @@ export const D3_MAP_IMPORTS = [
   LineDrawingWidget,
   RectDrawingWidget,
   TextDrawingWidget,
-  DrawingWidget
+  DrawingWidget,
 ];
diff --git a/src/app/cartography/datasources/datasource.ts b/src/app/cartography/datasources/datasource.ts
index ce5aaf06..e4f1275c 100644
--- a/src/app/cartography/datasources/datasource.ts
+++ b/src/app/cartography/datasources/datasource.ts
@@ -20,7 +20,7 @@ export abstract class DataSource<T> {
   }
 
   public set(data: T[]) {
-    data.forEach(item => {
+    data.forEach((item) => {
       const index = this.findIndex(item);
       if (index >= 0) {
         const updated = Object.assign(this.data[index], item);
@@ -31,9 +31,9 @@ export abstract class DataSource<T> {
     });
 
     const toRemove = this.data.filter(
-      item => data.filter(i => this.getItemKey(i) === this.getItemKey(item)).length === 0
+      (item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0
     );
-    toRemove.forEach(item => this.remove(item));
+    toRemove.forEach((item) => this.remove(item));
 
     this.dataChange.next(this.data);
   }
diff --git a/src/app/cartography/directives/moving-canvas.directive.spec.ts b/src/app/cartography/directives/moving-canvas.directive.spec.ts
index 1813c8c4..db5333cf 100644
--- a/src/app/cartography/directives/moving-canvas.directive.spec.ts
+++ b/src/app/cartography/directives/moving-canvas.directive.spec.ts
@@ -6,164 +6,188 @@ import { MovingCanvasDirective } from './moving-canvas.directive';
 import { Component } from '@angular/core';
 
 @Component({
-    template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+  template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas>
+    <g class="canvas" transform="translate(0, 0) scale(1)"></g>
+  </svg>`,
 })
 class DummyComponent {
-    constructor(){}
+  constructor() {}
 }
 
 describe('MovingCanvasDirective', () => {
-    let component: DummyComponent;
-    let fixture: ComponentFixture<DummyComponent>;
-    let movingEventSource = new MovingEventSource();
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+  let movingEventSource = new MovingEventSource();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule],
-        providers: [
-            { provide: MovingEventSource, useValue: movingEventSource },
-            { provide: Context, useClass: Context }
-        ],
-        declarations: [DummyComponent, MovingCanvasDirective]
-        }).compileComponents();
-    }));
-    
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DummyComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      providers: [
+        { provide: MovingEventSource, useValue: movingEventSource },
+        { provide: Context, useClass: Context },
+      ],
+      declarations: [DummyComponent, MovingCanvasDirective],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should move canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+  it('should move canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
 
-    it('should not move canvas if moving mode is not activated', fakeAsync(() => {
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
-    }));
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
 
-    it('should not move canvas after mouseup event', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should not move canvas if moving mode is not activated', fakeAsync(() => {
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-        
-        canvas.dispatchEvent(new MouseEvent('mouseup', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000
-        } as MouseEventInit));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
 
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+    expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
+  }));
 
-    it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should not move canvas after mouseup event', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-        
-        movingEventSource.movingModeState.emit(false);
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000
-        } as MouseEventInit));
-        tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
 
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+
+    canvas.dispatchEvent(
+      new MouseEvent('mouseup', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
+
+  it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
+
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+
+    movingEventSource.movingModeState.emit(false);
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
 });
diff --git a/src/app/cartography/directives/moving-canvas.directive.ts b/src/app/cartography/directives/moving-canvas.directive.ts
index 4fe6c197..79fdfbd0 100644
--- a/src/app/cartography/directives/moving-canvas.directive.ts
+++ b/src/app/cartography/directives/moving-canvas.directive.ts
@@ -1,65 +1,73 @@
-import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core'
+import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
 import { select } from 'd3-selection';
 
 @Directive({
-    selector: '[movingCanvas]',
+  selector: '[movingCanvas]',
 })
 export class MovingCanvasDirective implements OnInit, OnDestroy {
-    private mouseupListener: Function;
-    private mousemoveListener: Function;
-    private movingModeState: Subscription;
-    private activated: boolean = false;
-    
-    constructor(
-        private element: ElementRef,
-        private movingEventSource: MovingEventSource,
-        private context: Context
-    ) {}
+  private mouseupListener: Function;
+  private mousemoveListener: Function;
+  private movingModeState: Subscription;
+  private activated: boolean = false;
 
-    ngOnInit() {
-        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
-            this.activated = event;
-            if (!event) this.removelisteners();
+  constructor(private element: ElementRef, private movingEventSource: MovingEventSource, private context: Context) {}
+
+  ngOnInit() {
+    this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+      this.activated = event;
+      if (!event) this.removelisteners();
+    });
+  }
+
+  ngOnDestroy() {
+    this.movingModeState.unsubscribe();
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    if (this.activated) {
+      this.mousemoveListener = (event: MouseEvent) => {
+        const view = select(this.element.nativeElement);
+        const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+
+        canvas.attr('transform', () => {
+          this.context.transformation.x = this.context.transformation.x + event.movementX;
+          this.context.transformation.y = this.context.transformation.y + event.movementY;
+
+          const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+          const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+          const kTrans = this.context.transformation.k;
+
+          return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
         });
-    }
+      };
 
-    ngOnDestroy() {
-        this.movingModeState.unsubscribe();
-    }
+      this.mouseupListener = (event: MouseEvent) => {
+        this.removelisteners();
+      };
 
-    @HostListener('mousedown', ['$event'])
-    onMouseDown(event: MouseEvent) {
-        if (this.activated) {
-            this.mousemoveListener = (event: MouseEvent) => {
-                const view = select(this.element.nativeElement);
-                const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
-                
-                canvas.attr('transform', () => {
-                    this.context.transformation.x = this.context.transformation.x + event.movementX;
-                    this.context.transformation.y = this.context.transformation.y + event.movementY;
-    
-                    const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-                    const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
-                    const kTrans = this.context.transformation.k;
-    
-                    return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
-                });
-            };
-    
-            this.mouseupListener = (event: MouseEvent) => {
-                this.removelisteners();
-            };
-    
-            this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
-            this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
-        }
+      this.element.nativeElement.addEventListener(
+        'mouseup',
+        this.mouseupListener as EventListenerOrEventListenerObject
+      );
+      this.element.nativeElement.addEventListener(
+        'mousemove',
+        this.mousemoveListener as EventListenerOrEventListenerObject
+      );
     }
+  }
 
-    removelisteners() {
-        this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
-        this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
-    }
+  removelisteners() {
+    this.element.nativeElement.removeEventListener(
+      'mouseup',
+      this.mouseupListener as EventListenerOrEventListenerObject
+    );
+    this.element.nativeElement.removeEventListener(
+      'mousemove',
+      this.mousemoveListener as EventListenerOrEventListenerObject
+    );
+  }
 }
diff --git a/src/app/cartography/directives/zooming-canvas.directive.spec.ts b/src/app/cartography/directives/zooming-canvas.directive.spec.ts
index 8e84de01..9b4e077a 100644
--- a/src/app/cartography/directives/zooming-canvas.directive.spec.ts
+++ b/src/app/cartography/directives/zooming-canvas.directive.spec.ts
@@ -7,133 +7,145 @@ import { ZoomingCanvasDirective } from './zooming-canvas.directive';
 import { MapScaleService } from '../../services/mapScale.service';
 
 @Component({
-    template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+  template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas>
+    <g class="canvas" transform="translate(0, 0) scale(1)"></g>
+  </svg>`,
 })
 class DummyComponent {
-    constructor(){}
+  constructor() {}
 }
 
 describe('ZoomingCanvasDirective', () => {
-    let component: DummyComponent;
-    let fixture: ComponentFixture<DummyComponent>;
-    let movingEventSource = new MovingEventSource();
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+  let movingEventSource = new MovingEventSource();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule],
-        providers: [
-            { provide: MovingEventSource, useValue: movingEventSource },
-            { provide: Context, useClass: Context },
-            { provide: MapScaleService, useClass: MapScaleService }
-        ],
-        declarations: [DummyComponent, ZoomingCanvasDirective]
-        }).compileComponents();
-    }));
-    
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DummyComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      providers: [
+        { provide: MovingEventSource, useValue: movingEventSource },
+        { provide: Context, useClass: Context },
+        { provide: MapScaleService, useClass: MapScaleService },
+      ],
+      declarations: [DummyComponent, ZoomingCanvasDirective],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+  }));
+
+  it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = 100;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
+  }));
+
+  it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+
+    movingEventSource.movingModeState.emit(false);
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+  }));
+
+  it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
+  }));
+
+  it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+    const event = new WheelEvent('wheel', {
+      bubbles: true,
+      relatedTarget: canvas,
+      deltaMode: deltaMode,
+      deltaY: zoom,
     });
+    spyOn(event, 'preventDefault');
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+    canvas.dispatchEvent(event);
+    tick();
 
-    it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-    }));
-
-    it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = 100;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
-    }));
-
-    it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-        
-        movingEventSource.movingModeState.emit(false);
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-    }));
-
-    it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
-    }));
-
-    it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-        const event = new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        });
-        spyOn(event, 'preventDefault');
-
-        canvas.dispatchEvent(event);
-        tick();
-    
-        expect(event.preventDefault).toHaveBeenCalled();
-    }));
+    expect(event.preventDefault).toHaveBeenCalled();
+  }));
 });
diff --git a/src/app/cartography/directives/zooming-canvas.directive.ts b/src/app/cartography/directives/zooming-canvas.directive.ts
index c2b25288..bc1b6b61 100644
--- a/src/app/cartography/directives/zooming-canvas.directive.ts
+++ b/src/app/cartography/directives/zooming-canvas.directive.ts
@@ -1,4 +1,4 @@
-import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
+import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
@@ -6,56 +6,58 @@ import { select } from 'd3-selection';
 import { MapScaleService } from '../../services/mapScale.service';
 
 @Directive({
-    selector: '[zoomingCanvas]',
+  selector: '[zoomingCanvas]',
 })
 export class ZoomingCanvasDirective implements OnInit, OnDestroy {
-    private wheelListener: Function;
-    private movingModeState: Subscription;
-    
-    constructor(
-        private element: ElementRef,
-        private movingEventSource: MovingEventSource,
-        private context: Context,
-        private mapsScaleService: MapScaleService
-    ) {}
+  private wheelListener: Function;
+  private movingModeState: Subscription;
 
-    ngOnInit() {
-        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
-            event ? this.addListener() : this.removeListener();
-        });
-    }
+  constructor(
+    private element: ElementRef,
+    private movingEventSource: MovingEventSource,
+    private context: Context,
+    private mapsScaleService: MapScaleService
+  ) {}
 
-    ngOnDestroy() {
-        this.movingModeState.unsubscribe();
-    }
+  ngOnInit() {
+    this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+      event ? this.addListener() : this.removeListener();
+    });
+  }
 
-    addListener() {
-        this.wheelListener = (event: WheelEvent) => {
-            event.stopPropagation();
-            event.preventDefault();
+  ngOnDestroy() {
+    this.movingModeState.unsubscribe();
+  }
 
-            let zoom = event.deltaY;
-            zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
+  addListener() {
+    this.wheelListener = (event: WheelEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
 
-            const view = select(this.element.nativeElement);
-            const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
-            
-            canvas.attr('transform', () => {
-                this.context.transformation.k = this.context.transformation.k - zoom/10;
+      let zoom = event.deltaY;
+      zoom = event.deltaMode === 0 ? zoom / 100 : zoom / 3;
 
-                const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-                const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
-                const kTrans = this.context.transformation.k;
-                this.mapsScaleService.setScale(kTrans);
+      const view = select(this.element.nativeElement);
+      const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
 
-                return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
-            });
-        };
+      canvas.attr('transform', () => {
+        this.context.transformation.k = this.context.transformation.k - zoom / 10;
 
-        this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false});
-    }
+        const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+        const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        const kTrans = this.context.transformation.k;
+        this.mapsScaleService.setScale(kTrans);
 
-    removeListener() {
-        this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
-    }
+        return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+      });
+    };
+
+    this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {
+      passive: false,
+    });
+  }
+
+  removeListener() {
+    this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
+  }
 }
diff --git a/src/app/cartography/events/drawings-event-source.ts b/src/app/cartography/events/drawings-event-source.ts
index fa4d09f5..35173a19 100644
--- a/src/app/cartography/events/drawings-event-source.ts
+++ b/src/app/cartography/events/drawings-event-source.ts
@@ -4,7 +4,7 @@ import {
   ResizedDataEvent,
   TextAddedDataEvent,
   TextEditedDataEvent,
-  AddedDataEvent
+  AddedDataEvent,
 } from './event-source';
 import { MapDrawing } from '../models/map/map-drawing';
 
diff --git a/src/app/cartography/events/moving-event-source.ts b/src/app/cartography/events/moving-event-source.ts
index afa0d1a1..1dc96de8 100644
--- a/src/app/cartography/events/moving-event-source.ts
+++ b/src/app/cartography/events/moving-event-source.ts
@@ -1,6 +1,6 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable, EventEmitter } from '@angular/core';
 
 @Injectable()
 export class MovingEventSource {
-    public movingModeState = new EventEmitter<boolean>();
+  public movingModeState = new EventEmitter<boolean>();
 }
diff --git a/src/app/cartography/helpers/css-fixer.ts b/src/app/cartography/helpers/css-fixer.ts
index 69e7e327..6b021b61 100644
--- a/src/app/cartography/helpers/css-fixer.ts
+++ b/src/app/cartography/helpers/css-fixer.ts
@@ -6,13 +6,13 @@ import { Injectable } from '@angular/core';
 export class CssFixer {
   public fix(styles: string): string {
     const ast = csstree.parse(styles, {
-      context: 'declarationList'
+      context: 'declarationList',
     });
 
     // fixes font-size when unit (pt|px) is not defined
-    ast.children.forEach(child => {
+    ast.children.forEach((child) => {
       if (child.property === 'font-size' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Number') {
             const fontSize = value.value.toString();
             if (!(fontSize.indexOf('pt') >= 0 || fontSize.indexOf('px') >= 0)) {
diff --git a/src/app/cartography/helpers/default-drawings-factory.ts b/src/app/cartography/helpers/default-drawings-factory.ts
index 036679b4..d87af1e9 100644
--- a/src/app/cartography/helpers/default-drawings-factory.ts
+++ b/src/app/cartography/helpers/default-drawings-factory.ts
@@ -21,7 +21,7 @@ export class DefaultDrawingsFactory {
       text: this.textElementFactory,
       ellipse: this.ellipseElementFactory,
       rectangle: this.rectangleElementFactory,
-      line: this.lineElementFactory
+      line: this.lineElementFactory,
     };
   }
 
diff --git a/src/app/cartography/helpers/font-bbox-calculator.ts b/src/app/cartography/helpers/font-bbox-calculator.ts
index 69a6dee7..d06468d1 100644
--- a/src/app/cartography/helpers/font-bbox-calculator.ts
+++ b/src/app/cartography/helpers/font-bbox-calculator.ts
@@ -14,7 +14,7 @@ export class FontBBoxCalculator {
 
     return {
       width: bbox.width,
-      height: bbox.height
+      height: bbox.height,
     };
   }
 }
diff --git a/src/app/cartography/helpers/font-fixer.spec.ts b/src/app/cartography/helpers/font-fixer.spec.ts
index 273b8756..67064c12 100644
--- a/src/app/cartography/helpers/font-fixer.spec.ts
+++ b/src/app/cartography/helpers/font-fixer.spec.ts
@@ -12,13 +12,13 @@ describe('FontFixer', () => {
     const font: Font = {
       font_family: 'TypeWriter',
       font_size: 10,
-      font_weight: 'bold'
+      font_weight: 'bold',
     };
 
     expect(fixer.fix(font)).toEqual({
       font_family: 'Noto Sans',
       font_size: 11,
-      font_weight: 'bold'
+      font_weight: 'bold',
     });
   });
 
@@ -26,13 +26,13 @@ describe('FontFixer', () => {
     const font: Font = {
       font_family: 'OtherFont',
       font_size: 11,
-      font_weight: 'bold'
+      font_weight: 'bold',
     };
 
     expect(fixer.fix(font)).toEqual({
       font_family: 'OtherFont',
       font_size: 11,
-      font_weight: 'bold'
+      font_weight: 'bold',
     });
   });
 
diff --git a/src/app/cartography/helpers/font-fixer.ts b/src/app/cartography/helpers/font-fixer.ts
index 760dcdce..75a4bbc0 100644
--- a/src/app/cartography/helpers/font-fixer.ts
+++ b/src/app/cartography/helpers/font-fixer.ts
@@ -22,16 +22,16 @@ export class FontFixer {
 
   public fixStyles(styles: string) {
     const ast = csstree.parse(styles, {
-      context: 'declarationList'
+      context: 'declarationList',
     });
 
     let fontFamilyPointer = null;
     let fontSizePointer = null;
     let isByIdentifier = true;
 
-    ast.children.forEach(child => {
+    ast.children.forEach((child) => {
       if (child.property === 'font-family' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Identifier') {
             fontFamilyPointer = value;
           }
@@ -42,7 +42,7 @@ export class FontFixer {
         });
       }
       if (child.property === 'font-size' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Dimension') {
             fontSizePointer = value;
           }
@@ -62,7 +62,7 @@ export class FontFixer {
 
       const fixedFont = this.fix({
         font_family: fontFamilyValue.split('"').join(''),
-        font_size: parseInt(fontSizeValue, 10)
+        font_size: parseInt(fontSizeValue, 10),
       } as Font);
 
       if (isByIdentifier) {
diff --git a/src/app/cartography/helpers/multi-link-calculator-helper.ts b/src/app/cartography/helpers/multi-link-calculator-helper.ts
index 11c5c99e..93d96069 100644
--- a/src/app/cartography/helpers/multi-link-calculator-helper.ts
+++ b/src/app/cartography/helpers/multi-link-calculator-helper.ts
@@ -25,7 +25,7 @@ export class MultiLinkCalculatorHelper {
     }
     return {
       dx: x2_x0,
-      dy: y2_y0
+      dy: y2_y0,
     };
   }
 
diff --git a/src/app/cartography/helpers/qt-dasharray-fixer.ts b/src/app/cartography/helpers/qt-dasharray-fixer.ts
index 54f1ced6..1f13a71f 100644
--- a/src/app/cartography/helpers/qt-dasharray-fixer.ts
+++ b/src/app/cartography/helpers/qt-dasharray-fixer.ts
@@ -11,7 +11,7 @@ export class QtDasharrayFixer {
     '25, 25': '10, 2',
     '5, 25': '4, 2',
     '5, 25, 25': '5, 5, 1, 5',
-    '25, 25, 5, 25, 5': '5, 2, 5, 2, 5'
+    '25, 25, 5, 25, 5': '5, 2, 5, 2, 5',
   };
 
   public fix(dasharray: string): string {
diff --git a/src/app/cartography/helpers/svg-to-drawing-converter.ts b/src/app/cartography/helpers/svg-to-drawing-converter.ts
index 27b70568..77eea3a7 100644
--- a/src/app/cartography/helpers/svg-to-drawing-converter.ts
+++ b/src/app/cartography/helpers/svg-to-drawing-converter.ts
@@ -19,7 +19,7 @@ export class SvgToDrawingConverter {
       image: new ImageConverter(),
       rect: new RectConverter(),
       line: new LineConverter(),
-      ellipse: new EllipseConverter()
+      ellipse: new EllipseConverter(),
     };
   }
 
diff --git a/src/app/cartography/managers/graph-data-manager.ts b/src/app/cartography/managers/graph-data-manager.ts
index 0de68ed5..5f682600 100644
--- a/src/app/cartography/managers/graph-data-manager.ts
+++ b/src/app/cartography/managers/graph-data-manager.ts
@@ -14,7 +14,7 @@ import {
   MapNodesDataSource,
   MapLinksDataSource,
   MapDrawingsDataSource,
-  MapSymbolsDataSource
+  MapSymbolsDataSource,
 } from '../datasources/map-datasource';
 import { MultiLinkCalculatorHelper } from '../helpers/multi-link-calculator-helper';
 
@@ -35,7 +35,7 @@ export class GraphDataManager {
 
   public setNodes(nodes: Node[]) {
     if (nodes) {
-      const mapNodes = nodes.map(n => this.nodeToMapNode.convert(n));
+      const mapNodes = nodes.map((n) => this.nodeToMapNode.convert(n));
       this.mapNodesDataSource.set(mapNodes);
 
       this.assignDataToLinks();
@@ -45,7 +45,7 @@ export class GraphDataManager {
 
   public setLinks(links: Link[]) {
     if (links) {
-      const mapLinks = links.map(l => this.linkToMapLink.convert(l));
+      const mapLinks = links.map((l) => this.linkToMapLink.convert(l));
       this.mapLinksDataSource.set(mapLinks);
 
       this.assignDataToLinks();
@@ -55,16 +55,16 @@ export class GraphDataManager {
 
   public setDrawings(drawings: Drawing[]) {
     if (drawings) {
-      const mapDrawings = drawings.map(d => this.drawingToMapDrawing.convert(d));
+      const mapDrawings = drawings.map((d) => this.drawingToMapDrawing.convert(d));
       this.mapDrawingsDataSource.set(mapDrawings);
-  
+
       this.onDataUpdate();
     }
   }
 
   public setSymbols(symbols: Symbol[]) {
     if (symbols) {
-      const mapSymbols = symbols.map(s => this.symbolToMapSymbol.convert(s));
+      const mapSymbols = symbols.map((s) => this.symbolToMapSymbol.convert(s));
       this.mapSymbolsDataSource.set(mapSymbols);
     }
   }
diff --git a/src/app/cartography/managers/selection-manager.ts b/src/app/cartography/managers/selection-manager.ts
index a25e18a3..5be598f8 100644
--- a/src/app/cartography/managers/selection-manager.ts
+++ b/src/app/cartography/managers/selection-manager.ts
@@ -13,16 +13,16 @@ export class SelectionManager {
     const dictItems = this.convertToKeyDict(items);
 
     const selected = Object.keys(dictItems)
-      .filter(key => {
+      .filter((key) => {
         return !this.isSelectedByKey(key);
       })
-      .map(key => dictItems[key]);
+      .map((key) => dictItems[key]);
 
     const unselected = Object.keys(this.selection)
-      .filter(key => {
+      .filter((key) => {
         return !(key in dictItems);
       })
-      .map(key => this.selection[key]);
+      .map((key) => this.selection[key]);
 
     this.selection = dictItems;
 
@@ -36,7 +36,7 @@ export class SelectionManager {
   }
 
   public getSelected(): Indexed[] {
-    return Object.keys(this.selection).map(key => this.selection[key]);
+    return Object.keys(this.selection).map((key) => this.selection[key]);
   }
 
   public isSelected(item): boolean {
@@ -55,7 +55,7 @@ export class SelectionManager {
 
   private convertToKeyDict(items: Indexed[]) {
     const dict = {};
-    items.forEach(item => {
+    items.forEach((item) => {
       dict[this.getKey(item)] = item;
     });
     return dict;
diff --git a/src/app/cartography/testing.ts b/src/app/cartography/testing.ts
index a8bfefe6..8a410c9e 100644
--- a/src/app/cartography/testing.ts
+++ b/src/app/cartography/testing.ts
@@ -9,17 +9,12 @@ export class TestSVGCanvas {
   }
 
   public create() {
-    this.svg = select('body')
-      .append<SVGSVGElement>('svg')
-      .attr('width', 1000)
-      .attr('height', 1000);
+    this.svg = select('body').append<SVGSVGElement>('svg').attr('width', 1000).attr('height', 1000);
 
     this.canvas = this.svg.append<SVGGElement>('g').attr('class', 'canvas');
   }
 
   public destroy() {
-    select('body')
-      .selectAll('svg')
-      .remove();
+    select('body').selectAll('svg').remove();
   }
 }
diff --git a/src/app/cartography/tools/moving-tool.spec.ts b/src/app/cartography/tools/moving-tool.spec.ts
index fa74340c..06ee6607 100644
--- a/src/app/cartography/tools/moving-tool.spec.ts
+++ b/src/app/cartography/tools/moving-tool.spec.ts
@@ -16,11 +16,7 @@ describe('MovingTool', () => {
     tool = new MovingTool(context);
     svg = new TestSVGCanvas();
 
-    node = svg.canvas
-      .append<SVGGElement>('g')
-      .attr('class', 'node')
-      .attr('x', 10)
-      .attr('y', 20);
+    node = svg.canvas.append<SVGGElement>('g').attr('class', 'node').attr('x', 10).attr('y', 20);
 
     tool.setEnabled(true);
     tool.draw(svg.svg, context);
@@ -39,7 +35,7 @@ describe('MovingTool', () => {
           relatedTarget: svg.svg.node(),
           screenY: 1024,
           screenX: 1024,
-          view: window
+          view: window,
         })
       );
 
@@ -70,7 +66,7 @@ describe('MovingTool', () => {
           relatedTarget: svg.svg.node(),
           screenY: 1024,
           screenX: 1024,
-          view: window
+          view: window,
         })
       );
 
@@ -101,7 +97,7 @@ describe('MovingTool', () => {
           relatedTarget: svg.svg.node(),
           screenY: 1024,
           screenX: 1024,
-          view: window
+          view: window,
         })
       );
 
diff --git a/src/app/cartography/tools/moving-tool.ts b/src/app/cartography/tools/moving-tool.ts
index 6590fe85..62b27867 100644
--- a/src/app/cartography/tools/moving-tool.ts
+++ b/src/app/cartography/tools/moving-tool.ts
@@ -42,7 +42,7 @@ export class MovingTool {
   private activate(selection: SVGSelection) {
     const self = this;
 
-    const onZoom = function(this: SVGSVGElement) {
+    const onZoom = function (this: SVGSVGElement) {
       const canvas = selection.select<SVGGElement>('g.canvas');
       const e: D3ZoomEvent<SVGSVGElement, any> = event;
       canvas.attr('transform', () => {
diff --git a/src/app/cartography/tools/selection-tool.ts b/src/app/cartography/tools/selection-tool.ts
index 40c037a9..9d1e24dd 100644
--- a/src/app/cartography/tools/selection-tool.ts
+++ b/src/app/cartography/tools/selection-tool.ts
@@ -17,14 +17,9 @@ export class SelectionTool {
   private path;
   private enabled = false;
 
-  public constructor(
-    private context: Context, 
-    private selectionEventSource: SelectionEventSource
-  ) {}
+  public constructor(private context: Context, private selectionEventSource: SelectionEventSource) {}
 
-  public disableContextMenu(){
-
-  }
+  public disableContextMenu() {}
 
   public setEnabled(enabled) {
     this.enabled = enabled;
@@ -34,7 +29,7 @@ export class SelectionTool {
   private activate(selection) {
     const self = this;
 
-    selection.on('mousedown', function() {
+    selection.on('mousedown', function () {
       // prevent deselection on right click
       if (event.button == 2) {
         selection.on('contextmenu', () => {
@@ -55,11 +50,11 @@ export class SelectionTool {
       selection.selectAll(SelectionTool.SELECTABLE_CLASS).classed('selected', false);
 
       subject
-        .on('mousemove.selection', function() {
+        .on('mousemove.selection', function () {
           const end = self.transformation(mouse(parent));
           self.moveSelection(start, end);
         })
-        .on('mouseup.selection', function() {
+        .on('mouseup.selection', function () {
           const end = self.transformation(mouse(parent));
           self.endSelection(start, end);
           subject.on('mousemove.selection', null).on('mouseup.selection', null);
@@ -100,9 +95,12 @@ export class SelectionTool {
   }
 
   private moveSelection(start, move) {
-    let x = start[0]/this.context.transformation.k;
-    let y = start[1]/this.context.transformation.k;
-    this.path.attr('d', this.rect(x, y, move[0]/this.context.transformation.k - x, move[1]/this.context.transformation.k - y));
+    let x = start[0] / this.context.transformation.k;
+    let y = start[1] / this.context.transformation.k;
+    this.path.attr(
+      'd',
+      this.rect(x, y, move[0] / this.context.transformation.k - x, move[1] / this.context.transformation.k - y)
+    );
     this.selectedEvent(start, move);
   }
 
@@ -127,7 +125,7 @@ export class SelectionTool {
     const transformation_point = this.context.getZeroZeroTransformationPoint();
     return [
       point[0] - transformation_point.x - this.context.transformation.x,
-      point[1] - transformation_point.y - this.context.transformation.y
+      point[1] - transformation_point.y - this.context.transformation.y,
     ];
   }
 }
diff --git a/src/app/cartography/widgets/drawing-line.ts b/src/app/cartography/widgets/drawing-line.ts
index 5f7f85bd..bb694524 100644
--- a/src/app/cartography/widgets/drawing-line.ts
+++ b/src/app/cartography/widgets/drawing-line.ts
@@ -23,7 +23,7 @@ export class DrawingLineWidget {
     this.drawingLine.start = new Point(x, y);
     this.drawingLine.end = new Point(x, y);
 
-    const over = function(this, d, i) {
+    const over = function (this, d, i) {
       const node = self.selection.select<SVGGElement>('g.canvas').node();
       const coordinates = mouse(node);
       self.drawingLine.end.x = coordinates[0];
@@ -60,7 +60,10 @@ export class DrawingLineWidget {
 
     if (this.drawing) {
       link_data = [
-        [[this.drawingLine.start.x, this.drawingLine.start.y], [this.drawingLine.end.x, this.drawingLine.end.y]]
+        [
+          [this.drawingLine.start.x, this.drawingLine.start.y],
+          [this.drawingLine.end.x, this.drawingLine.end.y],
+        ],
       ];
     }
 
@@ -72,11 +75,7 @@ export class DrawingLineWidget {
 
     const enter = tool.enter().append<SVGPathElement>('path');
 
-    tool
-      .merge(enter)
-      .attr('d', value_line)
-      .attr('stroke', '#000')
-      .attr('stroke-width', '2');
+    tool.merge(enter).attr('d', value_line).attr('stroke', '#000').attr('stroke-width', '2');
 
     tool.exit().remove();
   }
diff --git a/src/app/cartography/widgets/drawing.ts b/src/app/cartography/widgets/drawing.ts
index 2f55b8dc..4e82080d 100644
--- a/src/app/cartography/widgets/drawing.ts
+++ b/src/app/cartography/widgets/drawing.ts
@@ -33,52 +33,49 @@ export class DrawingWidget implements Widget {
       this.imageDrawingWidget,
       this.rectDrawingWidget,
       this.lineDrawingWidget,
-      this.ellipseDrawingWidget
+      this.ellipseDrawingWidget,
     ];
   }
 
   public draw(view: SVGSelection) {
     const drawing_body = view.selectAll<SVGGElement, MapDrawing>('g.drawing_body').data((l: MapDrawing) => [l]);
 
-    const drawing_body_enter = drawing_body
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'drawing_body');
+    const drawing_body_enter = drawing_body.enter().append<SVGGElement>('g').attr('class', 'drawing_body');
 
     const drawing_body_merge = drawing_body.merge(drawing_body_enter).attr('transform', (d: MapDrawing) => {
       return `translate(${d.x},${d.y}) rotate(${d.rotation})`;
     });
 
-    this.drawingWidgets.forEach(widget => {
+    this.drawingWidgets.forEach((widget) => {
       widget.draw(drawing_body_merge);
     });
 
     drawing_body_merge.select('.layer_label_wrapper').remove();
     if (this.mapSettingsService.isLayerNumberVisible) {
       drawing_body_merge
-        .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
+        .filter((n) => n.element instanceof RectElement || n.element instanceof EllipseElement)
         .append<SVGRectElement>('rect')
         .attr('class', 'layer_label_wrapper')
         .attr('width', '26')
         .attr('height', '26')
-        .attr('x', n => n.element ? n.element.width/2 - 13 : 0)
-        .attr('y', n => n.element ? n.element.height/2 - 13 : 0)
+        .attr('x', (n) => (n.element ? n.element.width / 2 - 13 : 0))
+        .attr('y', (n) => (n.element ? n.element.height / 2 - 13 : 0))
         .attr('fill', 'red');
     }
 
     drawing_body_merge.select('.layer_label').remove();
     if (this.mapSettingsService.isLayerNumberVisible) {
       drawing_body_merge
-        .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
+        .filter((n) => n.element instanceof RectElement || n.element instanceof EllipseElement)
         .append<SVGTextElement>('text')
         .attr('class', 'layer_label')
         .text((elem) => elem.z)
-        .attr('x', function(n) {
-          if(n.z >= 100 ) return n.element ? n.element.width/2 - 13 : 0
-          else if(n.z >= 10 ) return n.element ? n.element.width/2 - 9 : 0
-          else return n.element.width/2 - 5
+        .attr('x', function (n) {
+          if (n.z >= 100) return n.element ? n.element.width / 2 - 13 : 0;
+          else if (n.z >= 10) return n.element ? n.element.width / 2 - 9 : 0;
+          else return n.element.width / 2 - 5;
         })
-        .attr('y', n => n.element ? n.element.height/2 + 5 : 0)
+        .attr('y', (n) => (n.element ? n.element.height / 2 + 5 : 0))
         .attr('style', () => {
           const styles: string[] = [];
           styles.push(`font-family: "Noto Sans"`);
@@ -93,10 +90,10 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.top')
       .attr('stroke', 'transparent')
       .attr('stroke-width', '8px')
-      .attr('x1', drawing =>
+      .attr('x1', (drawing) =>
         drawing.element instanceof EllipseElement ? drawing.element.cx - drawing.element.width / 10 : '0'
       )
-      .attr('x2', drawing =>
+      .attr('x2', (drawing) =>
         drawing.element instanceof EllipseElement
           ? drawing.element.cx + drawing.element.width / 10
           : drawing.element.width
@@ -110,16 +107,16 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.bottom')
       .attr('stroke', 'transparent')
       .attr('stroke-width', '8px')
-      .attr('x1', drawing =>
+      .attr('x1', (drawing) =>
         drawing.element instanceof EllipseElement ? drawing.element.cx - drawing.element.width / 10 : '0'
       )
-      .attr('x2', drawing =>
+      .attr('x2', (drawing) =>
         drawing.element instanceof EllipseElement
           ? drawing.element.cx + drawing.element.width / 10
           : drawing.element.width
       )
-      .attr('y1', drawing => drawing.element.height)
-      .attr('y2', drawing => drawing.element.height)
+      .attr('y1', (drawing) => drawing.element.height)
+      .attr('y2', (drawing) => drawing.element.height)
       .attr('draggable', 'true')
       .attr('cursor', 'ns-resize');
 
@@ -129,10 +126,10 @@ export class DrawingWidget implements Widget {
       .attr('stroke-width', '8px')
       .attr('x1', '0')
       .attr('x2', '0')
-      .attr('y1', drawing =>
+      .attr('y1', (drawing) =>
         drawing.element instanceof EllipseElement ? drawing.element.cy - drawing.element.height / 10 : '0'
       )
-      .attr('y2', drawing =>
+      .attr('y2', (drawing) =>
         drawing.element instanceof EllipseElement
           ? drawing.element.cy + drawing.element.height / 10
           : drawing.element.height
@@ -144,12 +141,12 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.left')
       .attr('stroke', 'transparent')
       .attr('stroke-width', '8px')
-      .attr('x1', drawing => drawing.element.width)
-      .attr('x2', drawing => drawing.element.width)
-      .attr('y1', drawing =>
+      .attr('x1', (drawing) => drawing.element.width)
+      .attr('x2', (drawing) => drawing.element.width)
+      .attr('y1', (drawing) =>
         drawing.element instanceof EllipseElement ? drawing.element.cy - drawing.element.height / 10 : '0'
       )
-      .attr('y2', drawing =>
+      .attr('y2', (drawing) =>
         drawing.element instanceof EllipseElement
           ? drawing.element.cy + drawing.element.height / 10
           : drawing.element.height
@@ -162,8 +159,8 @@ export class DrawingWidget implements Widget {
       .attr('draggable', 'true')
       .attr('fill', 'transparent')
       .attr('stroke', 'transparent')
-      .attr('cx', drawing => (drawing.element as LineElement).x1)
-      .attr('cy', drawing => (drawing.element as LineElement).y1)
+      .attr('cx', (drawing) => (drawing.element as LineElement).x1)
+      .attr('cy', (drawing) => (drawing.element as LineElement).y1)
       .attr('r', 10)
       .attr('cursor', 'move');
 
@@ -172,8 +169,8 @@ export class DrawingWidget implements Widget {
       .attr('draggable', 'true')
       .attr('fill', 'transparent')
       .attr('stroke', 'transparent')
-      .attr('cx', drawing => (drawing.element as LineElement).x2)
-      .attr('cy', drawing => (drawing.element as LineElement).y2)
+      .attr('cx', (drawing) => (drawing.element as LineElement).x2)
+      .attr('cy', (drawing) => (drawing.element as LineElement).y2)
       .attr('r', 10)
       .attr('cursor', 'move');
 
diff --git a/src/app/cartography/widgets/drawings.ts b/src/app/cartography/widgets/drawings.ts
index 734c0bfd..6bd108d3 100644
--- a/src/app/cartography/widgets/drawings.ts
+++ b/src/app/cartography/widgets/drawings.ts
@@ -111,15 +111,18 @@ export class DrawingsWidget implements Widget {
             }
           }
         } else {
-          dy = y - (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y));
-          y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y);
+          dy =
+            y -
+            (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
+          y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
 
           if (datum.element.height + dy < 0) {
             isReflectedVertical = false;
             y = topEdge;
             datum.element.height = Math.abs(datum.element.height + evt.dy);
           } else {
-            datum.y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y);
+            datum.y =
+              evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
             datum.element.height += dy;
             if (datum.element instanceof EllipseElement) {
               (datum.element as EllipseElement).cy =
@@ -143,7 +146,7 @@ export class DrawingsWidget implements Widget {
 
     let top = drag()
       .on('start', (datum: MapDrawing) => {
-        y = event.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y);
+        y = event.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
         bottomEdge = y + datum.element.height;
         document.body.style.cursor = 'ns-resize';
       })
@@ -151,15 +154,18 @@ export class DrawingsWidget implements Widget {
         const evt = event;
 
         if (!isReflectedVertical) {
-          dy = y - (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y));
-          y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y);
+          dy =
+            y -
+            (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
+          y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
 
           if (datum.element.height + dy < 0) {
             y = bottomEdge;
             isReflectedVertical = true;
             datum.element.height = Math.abs(datum.element.height + evt.dy);
           } else {
-            datum.y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y  + this.context.transformation.y);
+            datum.y =
+              evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
             datum.element.height += dy;
             if (datum.element instanceof EllipseElement) {
               (datum.element as EllipseElement).cy =
@@ -207,7 +213,7 @@ export class DrawingsWidget implements Widget {
     let isReflectedHorizontal: boolean = false;
     let right = drag()
       .on('start', (datum: MapDrawing) => {
-        x = event.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
+        x = event.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
         leftEdge = x + datum.element.width;
         document.body.style.cursor = 'ew-resize';
       })
@@ -215,15 +221,18 @@ export class DrawingsWidget implements Widget {
         const evt = event;
 
         if (!isReflectedHorizontal) {
-          dx = x - (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x));
-          x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
+          dx =
+            x -
+            (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
+          x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
 
           if (datum.element.width + dx < 0) {
             x = leftEdge;
             isReflectedHorizontal = true;
             datum.element.width = Math.abs(datum.element.width + evt.dx);
           } else {
-            datum.x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
+            datum.x =
+              evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
             datum.element.width += dx;
             if (datum.element instanceof EllipseElement) {
               (datum.element as EllipseElement).cx =
@@ -290,15 +299,18 @@ export class DrawingsWidget implements Widget {
             datum.element.width = datum.element.width + evt.dx < 0 ? 1 : (datum.element.width += evt.dx);
           }
         } else {
-          dx = x - (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x));
-          x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
+          dx =
+            x -
+            (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
+          x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
 
           if (datum.element.width + dx < 0) {
             x = rightEdge;
             isReflectedHorizontal = false;
             datum.element.width = Math.abs(datum.element.width + evt.dx);
           } else {
-            datum.x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x  + this.context.transformation.x);
+            datum.x =
+              evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
             datum.element.width += dx;
             if (datum.element instanceof EllipseElement) {
               (datum.element as EllipseElement).cx =
diff --git a/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts b/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts
index 82a2918f..42d0ad42 100644
--- a/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts
@@ -33,10 +33,7 @@ describe('EllipseDrawingWidget', () => {
     drawing.element = ellipse;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
diff --git a/src/app/cartography/widgets/drawings/ellipse-drawing.ts b/src/app/cartography/widgets/drawings/ellipse-drawing.ts
index 8fce84d2..005fe033 100644
--- a/src/app/cartography/widgets/drawings/ellipse-drawing.ts
+++ b/src/app/cartography/widgets/drawings/ellipse-drawing.ts
@@ -17,25 +17,13 @@ export class EllipseDrawingWidget implements DrawingShapeWidget {
         return d.element && d.element instanceof EllipseElement ? [d.element] : [];
       });
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'top');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'top');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'bottom');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'bottom');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'right');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'right');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'left');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'left');
 
     const drawing_enter = drawing
       .enter()
@@ -45,15 +33,15 @@ export class EllipseDrawingWidget implements DrawingShapeWidget {
     const merge = drawing.merge(drawing_enter);
 
     merge
-      .attr('fill', ellipse => ellipse.fill)
-      .attr('fill-opacity', ellipse => ellipse.fill_opacity)
-      .attr('stroke', ellipse => ellipse.stroke)
-      .attr('stroke-width', ellipse => ellipse.stroke_width)
-      .attr('stroke-dasharray', ellipse => this.qtDasharrayFixer.fix(ellipse.stroke_dasharray))
-      .attr('cx', ellipse => ellipse.cx)
-      .attr('cy', ellipse => ellipse.cy)
-      .attr('rx', ellipse => ellipse.rx)
-      .attr('ry', ellipse => ellipse.ry);
+      .attr('fill', (ellipse) => ellipse.fill)
+      .attr('fill-opacity', (ellipse) => ellipse.fill_opacity)
+      .attr('stroke', (ellipse) => ellipse.stroke)
+      .attr('stroke-width', (ellipse) => ellipse.stroke_width)
+      .attr('stroke-dasharray', (ellipse) => this.qtDasharrayFixer.fix(ellipse.stroke_dasharray))
+      .attr('cx', (ellipse) => ellipse.cx)
+      .attr('cy', (ellipse) => ellipse.cy)
+      .attr('rx', (ellipse) => ellipse.rx)
+      .attr('ry', (ellipse) => ellipse.ry);
 
     drawing.exit().remove();
   }
diff --git a/src/app/cartography/widgets/drawings/image-drawing.spec.ts b/src/app/cartography/widgets/drawings/image-drawing.spec.ts
index 119d0d25..16b8e524 100644
--- a/src/app/cartography/widgets/drawings/image-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/image-drawing.spec.ts
@@ -26,10 +26,7 @@ describe('ImageDrawingWidget', () => {
     drawing.element = image;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
diff --git a/src/app/cartography/widgets/drawings/image-drawing.ts b/src/app/cartography/widgets/drawings/image-drawing.ts
index 0cf94b72..25e44700 100644
--- a/src/app/cartography/widgets/drawings/image-drawing.ts
+++ b/src/app/cartography/widgets/drawings/image-drawing.ts
@@ -12,17 +12,14 @@ export class ImageDrawingWidget implements DrawingShapeWidget {
       return d.element && d.element instanceof ImageElement ? [d.element] : [];
     });
 
-    const drawing_enter = drawing
-      .enter()
-      .append<SVGImageElement>('image')
-      .attr('class', 'image_element noselect');
+    const drawing_enter = drawing.enter().append<SVGImageElement>('image').attr('class', 'image_element noselect');
 
     const merge = drawing.merge(drawing_enter);
 
     merge
       .attr('xlink:href', (image: ImageElement) => image.data)
-      .attr('width', image => image.width)
-      .attr('height', image => image.height);
+      .attr('width', (image) => image.width)
+      .attr('height', (image) => image.height);
 
     drawing.exit().remove();
   }
diff --git a/src/app/cartography/widgets/drawings/line-drawing.spec.ts b/src/app/cartography/widgets/drawings/line-drawing.spec.ts
index 32f673a6..c0b9e6a7 100644
--- a/src/app/cartography/widgets/drawings/line-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/line-drawing.spec.ts
@@ -31,10 +31,7 @@ describe('LineDrawingWidget', () => {
     drawing.element = line;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
diff --git a/src/app/cartography/widgets/drawings/line-drawing.ts b/src/app/cartography/widgets/drawings/line-drawing.ts
index c642d9c8..f56ad918 100644
--- a/src/app/cartography/widgets/drawings/line-drawing.ts
+++ b/src/app/cartography/widgets/drawings/line-drawing.ts
@@ -15,31 +15,22 @@ export class LineDrawingWidget implements DrawingShapeWidget {
       return d.element && d.element instanceof LineElement ? [d.element] : [];
     });
 
-    drawing
-      .enter()
-      .append<SVGCircleElement>('circle')
-      .attr('class', 'right');
+    drawing.enter().append<SVGCircleElement>('circle').attr('class', 'right');
 
-    drawing
-      .enter()
-      .append<SVGCircleElement>('circle')
-      .attr('class', 'left');
+    drawing.enter().append<SVGCircleElement>('circle').attr('class', 'left');
 
-    const drawing_enter = drawing
-      .enter()
-      .append<SVGLineElement>('line')
-      .attr('class', 'line_element noselect');
+    const drawing_enter = drawing.enter().append<SVGLineElement>('line').attr('class', 'line_element noselect');
 
     const merge = drawing.merge(drawing_enter);
 
     merge
-      .attr('stroke', line => line.stroke)
-      .attr('stroke-width', line => line.stroke_width)
-      .attr('stroke-dasharray', line => this.qtDasharrayFixer.fix(line.stroke_dasharray))
-      .attr('x1', line => line.x1)
-      .attr('x2', line => line.x2)
-      .attr('y1', line => line.y1)
-      .attr('y2', line => line.y2);
+      .attr('stroke', (line) => line.stroke)
+      .attr('stroke-width', (line) => line.stroke_width)
+      .attr('stroke-dasharray', (line) => this.qtDasharrayFixer.fix(line.stroke_dasharray))
+      .attr('x1', (line) => line.x1)
+      .attr('x2', (line) => line.x2)
+      .attr('y1', (line) => line.y1)
+      .attr('y2', (line) => line.y2);
 
     drawing.exit().remove();
   }
diff --git a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
index 2e14ad1b..eaf3a043 100644
--- a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
@@ -31,10 +31,7 @@ describe('RectDrawingWidget', () => {
     drawing.element = rect;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
diff --git a/src/app/cartography/widgets/drawings/rect-drawing.ts b/src/app/cartography/widgets/drawings/rect-drawing.ts
index 1661d1c1..1153cfb0 100644
--- a/src/app/cartography/widgets/drawings/rect-drawing.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.ts
@@ -15,41 +15,26 @@ export class RectDrawingWidget implements DrawingShapeWidget {
       return d.element && d.element instanceof RectElement ? [d.element] : [];
     });
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'top');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'top');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'bottom');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'bottom');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'right');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'right');
 
-    drawing
-      .enter()
-      .append<SVGAElement>('line')
-      .attr('class', 'left');
+    drawing.enter().append<SVGAElement>('line').attr('class', 'left');
 
-    const drawing_enter = drawing
-      .enter()
-      .append<SVGRectElement>('rect')
-      .attr('class', 'rect_element noselect');
+    const drawing_enter = drawing.enter().append<SVGRectElement>('rect').attr('class', 'rect_element noselect');
 
     const merge = drawing.merge(drawing_enter);
 
     merge
-      .attr('fill', rect => rect.fill)
-      .attr('fill-opacity', rect => rect.fill_opacity)
-      .attr('stroke', rect => rect.stroke)
-      .attr('stroke-width', rect => rect.stroke_width)
-      .attr('stroke-dasharray', rect => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
-      .attr('width', rect => rect.width)
-      .attr('height', rect => rect.height);
+      .attr('fill', (rect) => rect.fill)
+      .attr('fill-opacity', (rect) => rect.fill_opacity)
+      .attr('stroke', (rect) => rect.stroke)
+      .attr('stroke-width', (rect) => rect.stroke_width)
+      .attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
+      .attr('width', (rect) => rect.width)
+      .attr('height', (rect) => rect.height);
 
     drawing.exit().remove();
   }
diff --git a/src/app/cartography/widgets/drawings/text-drawing.spec.ts b/src/app/cartography/widgets/drawings/text-drawing.spec.ts
index 3425b36d..57f907c1 100644
--- a/src/app/cartography/widgets/drawings/text-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/text-drawing.spec.ts
@@ -32,10 +32,7 @@ describe('TextDrawingWidget', () => {
     drawing.element = text;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
@@ -55,10 +52,7 @@ describe('TextDrawingWidget', () => {
     drawing.element = text;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
@@ -81,10 +75,7 @@ describe('TextDrawingWidget', () => {
     drawing.element = text;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
-    const drawings_enter = drawings
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('drawing', true);
+    const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
     const drawings_merge = drawings.merge(drawings_enter);
 
     widget.draw(drawings_merge);
diff --git a/src/app/cartography/widgets/drawings/text-drawing.ts b/src/app/cartography/widgets/drawings/text-drawing.ts
index 09bac88c..f72902eb 100644
--- a/src/app/cartography/widgets/drawings/text-drawing.ts
+++ b/src/app/cartography/widgets/drawings/text-drawing.ts
@@ -18,10 +18,7 @@ export class TextDrawingWidget implements DrawingShapeWidget {
       return d.element && d.element instanceof TextElement ? [d.element] : [];
     });
 
-    const drawing_enter = drawing
-      .enter()
-      .append<SVGTextElement>('text')
-      .attr('class', 'text_element noselect');
+    const drawing_enter = drawing.enter().append<SVGTextElement>('text').attr('class', 'text_element noselect');
 
     const merge = drawing.merge(drawing_enter);
     merge
@@ -40,8 +37,8 @@ export class TextDrawingWidget implements DrawingShapeWidget {
         }
         return styles.join('; ');
       })
-      .attr('fill', text => text.fill)
-      .attr('text-decoration', text => text.text_decoration);
+      .attr('fill', (text) => text.fill)
+      .attr('text-decoration', (text) => text.text_decoration);
 
     const lines = merge.selectAll<SVGTSpanElement, string>('tspan').data((text: TextElement) => {
       return text.text.split(/\r?\n/);
@@ -52,14 +49,14 @@ export class TextDrawingWidget implements DrawingShapeWidget {
     const lines_merge = lines.merge(lines_enter);
 
     lines_merge
-      .text(line => line)
+      .text((line) => line)
       .attr('xml:space', 'preserve')
       .attr('x', 0)
       .attr('dy', (line, i) => (i === 0 ? '0em' : '1.4em'));
 
     lines.exit().remove();
 
-    merge.attr('transform', function(this: SVGTextElement) {
+    merge.attr('transform', function (this: SVGTextElement) {
       // SVG calculates y pos by the /bottom/ of the first tspan, hence we need to make some
       // approx and make it matching to GUI
       const tspan = select(this).selectAll<SVGTSpanElement, string>('tspan');
diff --git a/src/app/cartography/widgets/graph-layout.ts b/src/app/cartography/widgets/graph-layout.ts
index ab100626..eeb86e55 100644
--- a/src/app/cartography/widgets/graph-layout.ts
+++ b/src/app/cartography/widgets/graph-layout.ts
@@ -33,10 +33,7 @@ export class GraphLayout implements Widget {
   }
 
   connect(view: SVGSelection, context: Context) {
-    this.drawingLineTool.connect(
-      view,
-      context
-    );
+    this.drawingLineTool.connect(view, context);
   }
 
   draw(view: SVGSelection, context: Context) {
@@ -44,10 +41,7 @@ export class GraphLayout implements Widget {
 
     const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([context]);
 
-    const canvasEnter = canvas
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'canvas');
+    const canvasEnter = canvas.enter().append<SVGGElement>('g').attr('class', 'canvas');
 
     canvas.merge(canvasEnter).attr('transform', (ctx: Context) => {
       const xTrans = ctx.getZeroZeroTransformationPoint().x + ctx.transformation.x;
diff --git a/src/app/cartography/widgets/interface-label.spec.ts b/src/app/cartography/widgets/interface-label.spec.ts
index 180f25aa..453b5aac 100644
--- a/src/app/cartography/widgets/interface-label.spec.ts
+++ b/src/app/cartography/widgets/interface-label.spec.ts
@@ -58,10 +58,7 @@ describe('InterfaceLabelsWidget', () => {
 
     const linksSelection = svg.canvas.selectAll<SVGGElement, MapLink>('g.link').data(links);
 
-    linksEnter = linksSelection
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'link');
+    linksEnter = linksSelection.enter().append<SVGGElement>('g').attr('class', 'link');
 
     linksSelection.exit().remove();
 
diff --git a/src/app/cartography/widgets/interface-label.ts b/src/app/cartography/widgets/interface-label.ts
index 7adcb0e2..d72d155e 100644
--- a/src/app/cartography/widgets/interface-label.ts
+++ b/src/app/cartography/widgets/interface-label.ts
@@ -36,7 +36,10 @@ export class InterfaceLabelWidget {
 
     const link_node_position = selection
       .selectAll<SVGGElement, MapLinkNode>('g.link_node_position')
-      .data((link: MapLink) => [[link.source, link.nodes[0]], [link.target, link.nodes[1]]]);
+      .data((link: MapLink) => [
+        [link.source, link.nodes[0]],
+        [link.target, link.nodes[1]],
+      ]);
 
     const enter_link_node_position = link_node_position
       .enter()
@@ -58,10 +61,7 @@ export class InterfaceLabelWidget {
         return [];
       });
 
-    const enter = labels
-      .enter()
-      .append<SVGGElement>('g')
-      .classed('interface_label_container', true);
+    const enter = labels.enter().append<SVGGElement>('g').classed('interface_label_container', true);
 
     // create surrounding rect
     enter.append<SVGRectElement>('rect').attr('class', 'interface_label_selection');
@@ -72,12 +72,10 @@ export class InterfaceLabelWidget {
       .attr('class', 'interface_label noselect')
       .attr('interface_label_id', (i: MapLinkNode) => `${i.id}`);
 
-    const merge = labels
-      .merge(enter)
-      .on('contextmenu', (n: MapLinkNode, i: number) => {
-        event.preventDefault();
-        self.onContextMenu.emit(new InterfaceLabelContextMenu(event, n));
-      });
+    const merge = labels.merge(enter).on('contextmenu', (n: MapLinkNode, i: number) => {
+      event.preventDefault();
+      self.onContextMenu.emit(new InterfaceLabelContextMenu(event, n));
+    });
 
     // update label
     merge
@@ -102,7 +100,7 @@ export class InterfaceLabelWidget {
       .attr('stroke-dasharray', '3,3')
       .attr('stroke-width', '0.5')
       .attr('fill', 'none')
-      .each(function(this: SVGRectElement, l: MapLinkNode) {
+      .each(function (this: SVGRectElement, l: MapLinkNode) {
         const current = select(this);
         const textLabel = merge.select<SVGTextElement>(`text[interface_label_id="${l.id}"]`);
         const bbox = textLabel.node().getBBox();
diff --git a/src/app/cartography/widgets/interface-status.ts b/src/app/cartography/widgets/interface-status.ts
index 7bd3e47c..6298a47a 100644
--- a/src/app/cartography/widgets/interface-status.ts
+++ b/src/app/cartography/widgets/interface-status.ts
@@ -10,11 +10,9 @@ import { MapSettingsService } from '../../services/mapsettings.service';
 
 @Injectable()
 export class InterfaceStatusWidget implements Widget {
-  private mapSettingsService: MapSettingsService
+  private mapSettingsService: MapSettingsService;
 
-  constructor(
-    private _mapSettingsService: MapSettingsService
-  ) {
+  constructor(private _mapSettingsService: MapSettingsService) {
     this.mapSettingsService = _mapSettingsService;
   }
 
@@ -22,22 +20,24 @@ export class InterfaceStatusWidget implements Widget {
     const self = this;
     let mapLinks: MapLink[] = [];
 
-    view.each(function(this: SVGGElement, l: MapLink) {
+    view.each(function (this: SVGGElement, l: MapLink) {
       mapLinks.push(l);
     });
-    mapLinks.forEach(mapLink => {
-      mapLinks.forEach(n => {
-        if (n.nodes[0].linkId !== mapLink.nodes[0].linkId){
-          if ((mapLink.nodes[0].nodeId === n.nodes[0].nodeId && mapLink.nodes[1].nodeId === n.nodes[1].nodeId) || 
-            (mapLink.nodes[0].nodeId === n.nodes[1].nodeId && mapLink.nodes[1].nodeId === n.nodes[0].nodeId) || 
-            (mapLink.nodes[1].nodeId === n.nodes[0].nodeId && mapLink.nodes[0].nodeId === n.nodes[1].nodeId)) {
+    mapLinks.forEach((mapLink) => {
+      mapLinks.forEach((n) => {
+        if (n.nodes[0].linkId !== mapLink.nodes[0].linkId) {
+          if (
+            (mapLink.nodes[0].nodeId === n.nodes[0].nodeId && mapLink.nodes[1].nodeId === n.nodes[1].nodeId) ||
+            (mapLink.nodes[0].nodeId === n.nodes[1].nodeId && mapLink.nodes[1].nodeId === n.nodes[0].nodeId) ||
+            (mapLink.nodes[1].nodeId === n.nodes[0].nodeId && mapLink.nodes[0].nodeId === n.nodes[1].nodeId)
+          ) {
             mapLink.isMultiplied = true;
           }
         }
       });
     });
 
-    view.each(function(this: SVGGElement, l: MapLink) {
+    view.each(function (this: SVGGElement, l: MapLink) {
       const link_group = select<SVGGElement, MapLink>(this);
       const link_path = link_group.select<SVGPathElement>('path');
 
@@ -48,37 +48,42 @@ export class InterfaceStatusWidget implements Widget {
 
         if (link_path.node().getTotalLength() > 2 * 45 + 130) {
           if (l.source && l.target) {
-            let sourcePort = l.nodes.find(node => node.nodeId === l.source.id).label.text;
-            let destinationPort = l.nodes.find(node => node.nodeId === l.target.id).label.text;
+            let sourcePort = l.nodes.find((node) => node.nodeId === l.source.id).label.text;
+            let destinationPort = l.nodes.find((node) => node.nodeId === l.target.id).label.text;
             statuses = [
-              new LinkStatus(start_point.x, start_point.y, (l.capturing && l.suspend) ? 'suspended' : l.source.status, sourcePort),
-              new LinkStatus(end_point.x, end_point.y, (l.capturing && l.suspend) ? 'suspended' : l.target.status, destinationPort)
+              new LinkStatus(
+                start_point.x,
+                start_point.y,
+                l.capturing && l.suspend ? 'suspended' : l.source.status,
+                sourcePort
+              ),
+              new LinkStatus(
+                end_point.x,
+                end_point.y,
+                l.capturing && l.suspend ? 'suspended' : l.target.status,
+                destinationPort
+              ),
             ];
           }
         }
       }
 
-      link_group
-        .selectAll<SVGCircleElement, LinkStatus>('circle.status_started').remove();
-      link_group
-        .selectAll<SVGCircleElement, LinkStatus>('circle.status_stopped').remove();
-      link_group
-        .selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended').remove();
+      link_group.selectAll<SVGCircleElement, LinkStatus>('circle.status_started').remove();
+      link_group.selectAll<SVGCircleElement, LinkStatus>('circle.status_stopped').remove();
+      link_group.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended').remove();
 
-      link_group
-        .selectAll<SVGRectElement, LinkStatus>('rect.status_started').remove();
-      link_group
-        .selectAll<SVGTextElement, LinkStatus>('text.status_started_label').remove();
-      link_group
-        .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped').remove();
-      link_group
-        .selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label').remove();
-      link_group
-        .selectAll<SVGRectElement, LinkStatus>('rect.status_suspended').remove();
-      link_group
-        .selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label').remove();
+      link_group.selectAll<SVGRectElement, LinkStatus>('rect.status_started').remove();
+      link_group.selectAll<SVGTextElement, LinkStatus>('text.status_started_label').remove();
+      link_group.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped').remove();
+      link_group.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label').remove();
+      link_group.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended').remove();
+      link_group.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label').remove();
 
-      if (self.mapSettingsService.showInterfaceLabels && self.mapSettingsService.integrateLinkLabelsToLinks && !l.isMultiplied) {
+      if (
+        self.mapSettingsService.showInterfaceLabels &&
+        self.mapSettingsService.integrateLinkLabelsToLinks &&
+        !l.isMultiplied
+      ) {
         const status_started = link_group
           .selectAll<SVGRectElement, LinkStatus>('rect.status_started')
           .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
@@ -87,7 +92,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_started_enter)
           .attr('class', 'status_started')
           .attr('width', (ls: LinkStatus) => {
-            return (ls.port.length * 8) + 10;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -110,7 +115,7 @@ export class InterfaceStatusWidget implements Widget {
           .attr('y', (ls: LinkStatus) => ls.y + 5)
           .attr('fill', `black`);
         status_started_label.exit().remove();
-        
+
         const status_stopped = link_group
           .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
           .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
@@ -119,7 +124,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_stopped_enter)
           .attr('class', 'status_stopped')
           .attr('width', (ls: LinkStatus) => {
-            return (ls.port.length * 8) + 10;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -151,7 +156,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_suspended_enter)
           .attr('class', 'status_suspended')
           .attr('width', (ls: LinkStatus) => {
-            return (ls.port.length * 8) + 10;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
diff --git a/src/app/cartography/widgets/label.ts b/src/app/cartography/widgets/label.ts
index ca9794ef..90d6865f 100644
--- a/src/app/cartography/widgets/label.ts
+++ b/src/app/cartography/widgets/label.ts
@@ -43,12 +43,10 @@ export class LabelWidget implements Widget {
       .attr('class', 'label_container')
       .attr('label_id', (label: MapLabel) => label.id);
 
-    const merge = label_view
-      .merge(label_enter)
-      .on('contextmenu', (n: MapLabel, i: number) => {
-        event.preventDefault();
-        self.onContextMenu.emit(new LabelContextMenu(event, n));
-      });
+    const merge = label_view.merge(label_enter).on('contextmenu', (n: MapLabel, i: number) => {
+      event.preventDefault();
+      self.onContextMenu.emit(new LabelContextMenu(event, n));
+    });
 
     this.drawLabel(merge);
 
@@ -60,20 +58,16 @@ export class LabelWidget implements Widget {
   }
 
   private drawLabel(view: SVGSelection) {
-    const label_body = view.selectAll<SVGGElement, MapLabel>('g.label_body').data(label => [label]);
+    const label_body = view.selectAll<SVGGElement, MapLabel>('g.label_body').data((label) => [label]);
 
-    const label_body_enter = label_body
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'label_body');
+    const label_body_enter = label_body.enter().append<SVGGElement>('g').attr('class', 'label_body');
 
     // add label of node
     label_body_enter.append<SVGTextElement>('text').attr('class', 'label');
 
     label_body_enter.append<SVGRectElement>('rect').attr('class', 'label_selection');
 
-    const label_body_merge = label_body
-      .merge(label_body_enter);
+    const label_body_merge = label_body.merge(label_body_enter);
 
     label_body_merge
       .select<SVGTextElement>('text.label')
@@ -93,13 +87,13 @@ export class LabelWidget implements Widget {
     label_body_merge
       .select<SVGRectElement>('rect.label_selection')
       .attr('visibility', (l: MapLabel) => {
-        return (this.selectionManager.isSelected(l) ? 'visible' : 'hidden')
+        return this.selectionManager.isSelected(l) ? 'visible' : 'hidden';
       })
       .attr('stroke', 'black')
       .attr('stroke-dasharray', '3,3')
       .attr('stroke-width', '0.5')
       .attr('fill', 'none')
-      .each(function(this: SVGRectElement, label: MapLabel) {
+      .each(function (this: SVGRectElement, label: MapLabel) {
         const current = select(this);
         const textLabel = label_body_merge.select<SVGTextElement>(`text[label_id="${label.id}"]`);
         const bbox = textLabel.node().getBBox();
diff --git a/src/app/cartography/widgets/layers.ts b/src/app/cartography/widgets/layers.ts
index f706db96..5ab26601 100644
--- a/src/app/cartography/widgets/layers.ts
+++ b/src/app/cartography/widgets/layers.ts
@@ -21,10 +21,7 @@ export class LayersWidget implements Widget {
       return layer.index.toString();
     });
 
-    const layers_enter = layers_selection
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'layer');
+    const layers_enter = layers_selection.enter().append<SVGGElement>('g').attr('class', 'layer');
 
     // add container for links
     layers_enter.append<SVGGElement>('g').attr('class', 'links');
diff --git a/src/app/cartography/widgets/link.ts b/src/app/cartography/widgets/link.ts
index 6deee822..08e93abd 100644
--- a/src/app/cartography/widgets/link.ts
+++ b/src/app/cartography/widgets/link.ts
@@ -26,53 +26,71 @@ export class LinkWidget implements Widget {
   ) {}
 
   public draw(view: SVGSelection) {
-    const link_body = view.selectAll<SVGGElement, MapLink>('g.link_body').data(l => [l]);
+    const link_body = view.selectAll<SVGGElement, MapLink>('g.link_body').data((l) => [l]);
 
-    const link_body_enter = link_body
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'link_body');
+    const link_body_enter = link_body.enter().append<SVGGElement>('g').attr('class', 'link_body');
 
-    const link_body_merge = link_body.merge(link_body_enter).attr('transform', link => {
+    const link_body_merge = link_body.merge(link_body_enter).attr('transform', (link) => {
       const translation = this.multiLinkCalculatorHelper.linkTranslation(link.distance, link.source, link.target);
       return `translate (${translation.dx}, ${translation.dy})`;
     });
 
     link_body.select('.capture-icon').remove();
     link_body
-      .filter(l => { return l.capturing && !l.suspend && !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .filter((l) => {
+        return (
+          l.capturing &&
+          !l.suspend &&
+          !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+        );
+      })
       .append<SVGGElement>('g')
       .on('contextmenu', (datum: MapLink) => {
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, datum));
       })
       .attr('class', 'capture-icon')
-      .attr('transform', link => { 
-        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      .attr('transform', (link) => {
+        return `translate (${(link.source.x + link.target.x) / 2 + 24}, ${
+          (link.source.y + link.target.y) / 2 + 24
+        }) scale(0.5)`;
       })
       .attr('viewBox', '0 0 20 20')
-        .append<SVGImageElement>('image')
-        .attr("xlink:href", "assets/resources/images/inspect.svg");
+      .append<SVGImageElement>('image')
+      .attr('xlink:href', 'assets/resources/images/inspect.svg');
 
     link_body.select('.filter-capture-icon').remove();
     link_body
-      .filter(l => { return l.capturing && !l.suspend && (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .filter((l) => {
+        return (
+          l.capturing &&
+          !l.suspend &&
+          (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+        );
+      })
       .append<SVGGElement>('g')
       .on('contextmenu', (datum: MapLink) => {
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, datum));
       })
       .attr('class', 'filter-capture-icon')
-      .attr('transform', link => { 
-        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      .attr('transform', (link) => {
+        return `translate (${(link.source.x + link.target.x) / 2 + 24}, ${
+          (link.source.y + link.target.y) / 2 + 24
+        }) scale(0.5)`;
       })
       .attr('viewBox', '0 0 20 20')
-        .append<SVGImageElement>('image')
-        .attr("xlink:href", "assets/resources/images/filter-capture.svg");
+      .append<SVGImageElement>('image')
+      .attr('xlink:href', 'assets/resources/images/filter-capture.svg');
 
     link_body.select('.filter-icon').remove();
     link_body
-      .filter(l => { return !l.capturing && (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .filter((l) => {
+        return (
+          !l.capturing &&
+          (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+        );
+      })
       .append<SVGGElement>('g')
       .on('contextmenu', (datum: MapLink) => {
         const evt = event;
@@ -81,30 +99,40 @@ export class LinkWidget implements Widget {
       .attr('class', 'filter-icon')
       .attr('width', '48px')
       .attr('height', '48px')
-      .attr('transform', link => { 
-        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      .attr('transform', (link) => {
+        return `translate (${(link.source.x + link.target.x) / 2 + 24}, ${
+          (link.source.y + link.target.y) / 2 + 24
+        }) scale(0.5)`;
       })
       .attr('viewBox', '0 0 20 20')
-        .append<SVGImageElement>('image')
-        .attr('width', '48px')
-        .attr('height', '48px')
-        .attr("xlink:href", "assets/resources/images/filter.svg");
+      .append<SVGImageElement>('image')
+      .attr('width', '48px')
+      .attr('height', '48px')
+      .attr('xlink:href', 'assets/resources/images/filter.svg');
 
     link_body.select('.pause-icon').remove();
     link_body
-      .filter(l => { return l.capturing && l.suspend && !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)})
+      .filter((l) => {
+        return (
+          l.capturing &&
+          l.suspend &&
+          !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+        );
+      })
       .append<SVGGElement>('g')
       .on('contextmenu', (datum: MapLink) => {
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, datum));
       })
       .attr('class', 'pause-icon')
-      .attr('transform', link => { 
-        return `translate (${(link.source.x + link.target.x)/2 + 24}, ${(link.source.y + link.target.y)/2 + 24}) scale(0.5)`
+      .attr('transform', (link) => {
+        return `translate (${(link.source.x + link.target.x) / 2 + 24}, ${
+          (link.source.y + link.target.y) / 2 + 24
+        }) scale(0.5)`;
       })
       .attr('viewBox', '0 0 20 20')
-        .append<SVGImageElement>('image')
-        .attr("xlink:href", "assets/resources/images/pause.svg");    
+      .append<SVGImageElement>('image')
+      .attr('xlink:href', 'assets/resources/images/pause.svg');
 
     this.serialLinkWidget.draw(link_body_merge);
     this.ethernetLinkWidget.draw(link_body_merge);
diff --git a/src/app/cartography/widgets/links.spec.ts b/src/app/cartography/widgets/links.spec.ts
index 1b8c3e72..9c408529 100644
--- a/src/app/cartography/widgets/links.spec.ts
+++ b/src/app/cartography/widgets/links.spec.ts
@@ -46,10 +46,7 @@ describe('LinksWidget', () => {
 
     const layersSelection = svg.canvas.selectAll<SVGGElement, Layer>('g.layer').data(layers);
 
-    layersEnter = layersSelection
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'layer');
+    layersEnter = layersSelection.enter().append<SVGGElement>('g').attr('class', 'layer');
 
     layersSelection.exit().remove();
   });
diff --git a/src/app/cartography/widgets/links/ethernet-link.ts b/src/app/cartography/widgets/links/ethernet-link.ts
index d453b149..e841da5f 100644
--- a/src/app/cartography/widgets/links/ethernet-link.ts
+++ b/src/app/cartography/widgets/links/ethernet-link.ts
@@ -9,11 +9,12 @@ class EthernetLinkPath {
   constructor(public source: [number, number], public target: [number, number]) {}
 }
 
-@Injectable() export class EthernetLinkWidget implements Widget {
+@Injectable()
+export class EthernetLinkWidget implements Widget {
   public onContextMenu = new EventEmitter<LinkContextMenu>();
 
   constructor() {}
-  
+
   private linktoEthernetLink(link: MapLink) {
     return new EthernetLinkPath(
       [link.source.x + link.source.width / 2, link.source.y + link.source.height / 2],
@@ -22,7 +23,7 @@ class EthernetLinkPath {
   }
 
   public draw(view: SVGSelection) {
-    const link = view.selectAll<SVGPathElement, EthernetLinkPath>('path.ethernet_link').data(l => {
+    const link = view.selectAll<SVGPathElement, EthernetLinkPath>('path.ethernet_link').data((l) => {
       if (l.linkType === 'ethernet') {
         return [this.linktoEthernetLink(l)];
       }
@@ -34,7 +35,7 @@ class EthernetLinkPath {
       .append<SVGPathElement>('path')
       .attr('class', 'ethernet_link')
       .on('contextmenu', (datum) => {
-        let link: MapLink = datum as unknown as MapLink;
+        let link: MapLink = (datum as unknown) as MapLink;
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, link));
       });
@@ -43,14 +44,14 @@ class EthernetLinkPath {
       .attr('stroke', '#000')
       .attr('stroke-width', '2')
       .on('contextmenu', (datum) => {
-        let link: MapLink = datum as unknown as MapLink;
+        let link: MapLink = (datum as unknown) as MapLink;
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, link));
       });
 
     const link_merge = link.merge(link_enter);
 
-    link_merge.attr('d', ethernet => {
+    link_merge.attr('d', (ethernet) => {
       const line_generator = path();
       line_generator.moveTo(ethernet.source[0], ethernet.source[1]);
       line_generator.lineTo(ethernet.target[0], ethernet.target[1]);
diff --git a/src/app/cartography/widgets/links/serial-link.ts b/src/app/cartography/widgets/links/serial-link.ts
index cd6d26c9..d87fd035 100644
--- a/src/app/cartography/widgets/links/serial-link.ts
+++ b/src/app/cartography/widgets/links/serial-link.ts
@@ -15,19 +15,20 @@ class SerialLinkPath {
   ) {}
 }
 
-@Injectable() export class SerialLinkWidget implements Widget {
+@Injectable()
+export class SerialLinkWidget implements Widget {
   public onContextMenu = new EventEmitter<LinkContextMenu>();
 
   constructor() {}
-  
+
   private linkToSerialLink(link: MapLink) {
     const source = {
       x: link.source.x + link.source.width / 2,
-      y: link.source.y + link.source.height / 2
+      y: link.source.y + link.source.height / 2,
     };
     const target = {
       x: link.target.x + link.target.width / 2,
-      y: link.target.y + link.target.height / 2
+      y: link.target.y + link.target.height / 2,
     };
 
     const dx = target.x - source.x;
@@ -39,19 +40,19 @@ class SerialLinkPath {
 
     const angle_source: [number, number] = [
       source.x + dx / 2.0 + 15 * vect_rot[0],
-      source.y + dy / 2.0 + 15 * vect_rot[1]
+      source.y + dy / 2.0 + 15 * vect_rot[1],
     ];
 
     const angle_target: [number, number] = [
       target.x - dx / 2.0 - 15 * vect_rot[0],
-      target.y - dy / 2.0 - 15 * vect_rot[1]
+      target.y - dy / 2.0 - 15 * vect_rot[1],
     ];
 
     return new SerialLinkPath([source.x, source.y], angle_source, angle_target, [target.x, target.y]);
   }
 
   public draw(view: SVGSelection) {
-    const link = view.selectAll<SVGPathElement, SerialLinkPath>('path.serial_link').data(l => {
+    const link = view.selectAll<SVGPathElement, SerialLinkPath>('path.serial_link').data((l) => {
       if (l.linkType === 'serial') {
         return [this.linkToSerialLink(l)];
       }
@@ -63,19 +64,16 @@ class SerialLinkPath {
       .append<SVGPathElement>('path')
       .attr('class', 'serial_link')
       .on('contextmenu', (datum) => {
-        let link: MapLink = datum as unknown as MapLink;
+        let link: MapLink = (datum as unknown) as MapLink;
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, link));
       });
 
-    link_enter
-      .attr('stroke', '#B22222')
-      .attr('fill', 'none')
-      .attr('stroke-width', '2');
+    link_enter.attr('stroke', '#B22222').attr('fill', 'none').attr('stroke-width', '2');
 
     const link_merge = link.merge(link_enter);
 
-    link_merge.attr('d', serial => {
+    link_merge.attr('d', (serial) => {
       const line_generator = path();
       line_generator.moveTo(serial.source[0], serial.source[1]);
       line_generator.lineTo(serial.source_angle[0], serial.source_angle[1]);
diff --git a/src/app/cartography/widgets/node.spec.ts b/src/app/cartography/widgets/node.spec.ts
index 2f09f543..e10cb21d 100644
--- a/src/app/cartography/widgets/node.spec.ts
+++ b/src/app/cartography/widgets/node.spec.ts
@@ -42,7 +42,7 @@ describe('NodesWidget', () => {
           relatedTarget: drewNode,
           screenY: 1024,
           screenX: 1024,
-          view: window
+          view: window,
         })
       );
 
diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts
index 52aee990..aff5a477 100644
--- a/src/app/cartography/widgets/node.ts
+++ b/src/app/cartography/widgets/node.ts
@@ -29,12 +29,9 @@ export class NodeWidget implements Widget {
   public draw(view: SVGSelection) {
     const self = this;
 
-    const node_body = view.selectAll<SVGGElement, MapNode>('g.node_body').data(n => [n]);
+    const node_body = view.selectAll<SVGGElement, MapNode>('g.node_body').data((n) => [n]);
 
-    const node_body_enter = node_body
-      .enter()
-      .append<SVGGElement>('g')
-      .attr('class', 'node_body');
+    const node_body_enter = node_body.enter().append<SVGGElement>('g').attr('class', 'node_body');
 
     node_body_enter.append<SVGImageElement>('image');
 
@@ -52,8 +49,8 @@ export class NodeWidget implements Widget {
         .attr('class', 'layer_label_wrapper')
         .attr('width', '26')
         .attr('height', '26')
-        .attr('x', (n: MapNode) => n.width/2 - 13)
-        .attr('y', (n: MapNode) => n.height/2 - 13)
+        .attr('x', (n: MapNode) => n.width / 2 - 13)
+        .attr('y', (n: MapNode) => n.height / 2 - 13)
         .attr('fill', 'red');
     }
 
@@ -62,13 +59,15 @@ export class NodeWidget implements Widget {
       node_body_merge
         .append<SVGTextElement>('text')
         .attr('class', 'layer_label')
-        .text((n: MapNode) => { return n.z})
-        .attr('x', function(n: MapNode) {
-          if(n.z >= 100 ) return n.width/2 - 13
-          else if(n.z >= 10 ) return n.width/2 - 9
-          else return n.width/2 - 5
+        .text((n: MapNode) => {
+          return n.z;
         })
-        .attr('y', (n: MapNode) => n.height/2 + 5)
+        .attr('x', function (n: MapNode) {
+          if (n.z >= 100) return n.width / 2 - 13;
+          else if (n.z >= 10) return n.width / 2 - 9;
+          else return n.width / 2 - 5;
+        })
+        .attr('y', (n: MapNode) => n.height / 2 + 5)
         .attr('style', () => {
           const styles: string[] = [];
           styles.push(`font-family: "Noto Sans"`);
@@ -82,11 +81,11 @@ export class NodeWidget implements Widget {
     // update image of node
     node_body_merge
       .select<SVGImageElement>('image')
-      .on('contextmenu', function(n: MapNode, i: number) {
+      .on('contextmenu', function (n: MapNode, i: number) {
         event.preventDefault();
         self.onContextMenu.emit(new NodeContextMenu(event, n));
       })
-      .on('dblclick', function(n: MapNode, i: number) {
+      .on('dblclick', function (n: MapNode, i: number) {
         event.preventDefault();
         self.onContextConsoleMenu.emit(new NodeContextMenu(event, n));
       })
@@ -100,20 +99,20 @@ export class NodeWidget implements Widget {
         return n.height;
       })
       .attr('x', (n: MapNode) => {
-        return 0
+        return 0;
       })
       .attr('y', (n: MapNode) => {
-        return 0
+        return 0;
       })
-      .on('mouseover', function(this, n: MapNode) {
+      .on('mouseover', function (this, n: MapNode) {
         select(this).attr('class', 'over');
       })
-      .on('mouseout', function(this, n: MapNode) {
+      .on('mouseout', function (this, n: MapNode) {
         select(this).attr('class', '');
       });
 
     node_body_merge.attr('transform', (n: MapNode) => {
-      if (!n.width) return `translate(${n.x - 30},${n.y - 30})`
+      if (!n.width) return `translate(${n.x - 30},${n.y - 30})`;
       return `translate(${n.x},${n.y})`;
     });
 
diff --git a/src/app/common/error-handlers/sentry-error-handler.ts b/src/app/common/error-handlers/sentry-error-handler.ts
index 4644a117..1b2410a2 100644
--- a/src/app/common/error-handlers/sentry-error-handler.ts
+++ b/src/app/common/error-handlers/sentry-error-handler.ts
@@ -1,15 +1,15 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule, ErrorHandler, Injectable, Injector, Inject } from "@angular/core";
-import { HttpErrorResponse } from "@angular/common/http";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, ErrorHandler, Injectable, Injector, Inject } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
 
-import { environment } from "../../../environments/environment";
-import { AppComponent } from "../../app.component";
+import { environment } from '../../../environments/environment';
+import { AppComponent } from '../../app.component';
 
-import * as Sentry from "@sentry/browser";
+import * as Sentry from '@sentry/browser';
 import { BrowserOptions, init } from '@sentry/browser';
 
 const config = {
-    dsn: "https://d8be3a98530f49eb90968ff396db326c@o19455.ingest.sentry.io/842726"
+  dsn: 'https://d8be3a98530f49eb90968ff396db326c@o19455.ingest.sentry.io/842726',
 };
 init(config as BrowserOptions);
 
@@ -25,7 +25,7 @@ export class SentryErrorHandler implements ErrorHandler {
     }
 
     // We can handle messages and Error objects directly.
-    if (typeof error === "string" || error instanceof Error) {
+    if (typeof error === 'string' || error instanceof Error) {
       return error;
     }
 
@@ -42,7 +42,7 @@ export class SentryErrorHandler implements ErrorHandler {
       }
 
       // ...or the request body itself, which we can use as a message instead.
-      if (typeof error.error === "string") {
+      if (typeof error.error === 'string') {
         return `Server returned code ${error.status} with body "${error.error}"`;
       }
 
@@ -55,7 +55,7 @@ export class SentryErrorHandler implements ErrorHandler {
   }
 
   handleError(error) {
-    let extractedError = this.extractError(error) || "Handled unknown error";
+    let extractedError = this.extractError(error) || 'Handled unknown error';
 
     // Capture handled exception and send it to Sentry.
     const eventId = Sentry.captureException(extractedError);
diff --git a/src/app/common/error-handlers/toaster-error-handler.spec.ts b/src/app/common/error-handlers/toaster-error-handler.spec.ts
index 9876b5d2..3e4d40ee 100644
--- a/src/app/common/error-handlers/toaster-error-handler.spec.ts
+++ b/src/app/common/error-handlers/toaster-error-handler.spec.ts
@@ -24,8 +24,8 @@ describe('ToasterErrorHandler', () => {
         { provide: ToasterService, useClass: MockedToasterService },
         { provide: SettingsService, useClass: MockedSettingsService },
         SentryErrorHandler,
-        ToasterErrorHandler
-      ]
+        ToasterErrorHandler,
+      ],
     });
 
     handler = new MockedToasterErrorHandler(TestBed.get(Injector));
diff --git a/src/app/common/error-handlers/toaster-error-handler.ts b/src/app/common/error-handlers/toaster-error-handler.ts
index 2cba24e2..7f3ccae8 100644
--- a/src/app/common/error-handlers/toaster-error-handler.ts
+++ b/src/app/common/error-handlers/toaster-error-handler.ts
@@ -1,16 +1,20 @@
 import { ToasterService } from '../../services/toaster.service';
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { SentryErrorHandler } from './sentry-error-handler';
 
 @Injectable()
 export class ToasterErrorHandler extends SentryErrorHandler {
   handleError(err: any): void {
-    if (err.error && err.error.status && !(err.error.status === 400 || err.error.status === 403 || err.error.status === 404 || err.error.status === 409)) {
+    if (
+      err.error &&
+      err.error.status &&
+      !(err.error.status === 400 || err.error.status === 403 || err.error.status === 404 || err.error.status === 409)
+    ) {
       super.handleError(err);
     }
 
     if (!err) return;
-    
+
     const toasterService = this.injector.get(ToasterService);
     if (err.error && err.error.message) {
       toasterService.error(err.error.message);
diff --git a/src/app/common/progress-dialog/progress-dialog.component.spec.ts b/src/app/common/progress-dialog/progress-dialog.component.spec.ts
index c1694de4..081b5f53 100644
--- a/src/app/common/progress-dialog/progress-dialog.component.spec.ts
+++ b/src/app/common/progress-dialog/progress-dialog.component.spec.ts
@@ -8,7 +8,7 @@ describe('ProgressDialogComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProgressDialogComponent]
+      declarations: [ProgressDialogComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/common/progress-dialog/progress-dialog.component.ts b/src/app/common/progress-dialog/progress-dialog.component.ts
index 099907c7..4852d92d 100644
--- a/src/app/common/progress-dialog/progress-dialog.component.ts
+++ b/src/app/common/progress-dialog/progress-dialog.component.ts
@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'app-progress-dialog',
   templateUrl: './progress-dialog.component.html',
-  styleUrls: ['./progress-dialog.component.scss']
+  styleUrls: ['./progress-dialog.component.scss'],
 })
 export class ProgressDialogComponent implements OnInit {
   public static CANCELLED: 'canceled';
diff --git a/src/app/common/progress-dialog/progress-dialog.service.spec.ts b/src/app/common/progress-dialog/progress-dialog.service.spec.ts
index 20348669..d530a49e 100644
--- a/src/app/common/progress-dialog/progress-dialog.service.spec.ts
+++ b/src/app/common/progress-dialog/progress-dialog.service.spec.ts
@@ -5,7 +5,7 @@ import { ProgressDialogService } from './progress-dialog.service';
 describe('ProgressDialogService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProgressDialogService]
+      providers: [ProgressDialogService],
     });
   });
 
diff --git a/src/app/common/progress-dialog/progress-dialog.service.ts b/src/app/common/progress-dialog/progress-dialog.service.ts
index 925f5217..1454cc14 100644
--- a/src/app/common/progress-dialog/progress-dialog.service.ts
+++ b/src/app/common/progress-dialog/progress-dialog.service.ts
@@ -10,7 +10,7 @@ export class ProgressDialogService {
     const ref = this.dialog.open(ProgressDialogComponent, {
       width: '250px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     return ref;
   }
diff --git a/src/app/common/progress/progress.component.html b/src/app/common/progress/progress.component.html
index 9f5aede6..c2e641e6 100644
--- a/src/app/common/progress/progress.component.html
+++ b/src/app/common/progress/progress.component.html
@@ -4,8 +4,12 @@
     <div class="error-icon"><mat-icon>error_outline</mat-icon></div>
     <div>Error occurred: {{ error.message }}</div>
     <div>
-      <button mat-button (click)="refresh()" matTooltip="Refresh page" matTooltipClass="custom-tooltip"><mat-icon>refresh</mat-icon></button>
-      <button mat-button routerLink="/" matTooltip="Go to home" matTooltipClass="custom-tooltip"><mat-icon>home</mat-icon></button>
+      <button mat-button (click)="refresh()" matTooltip="Refresh page" matTooltipClass="custom-tooltip">
+        <mat-icon>refresh</mat-icon>
+      </button>
+      <button mat-button routerLink="/" matTooltip="Go to home" matTooltipClass="custom-tooltip">
+        <mat-icon>home</mat-icon>
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/app/common/progress/progress.component.spec.ts b/src/app/common/progress/progress.component.spec.ts
index b56fe900..7649964c 100644
--- a/src/app/common/progress/progress.component.spec.ts
+++ b/src/app/common/progress/progress.component.spec.ts
@@ -28,7 +28,7 @@ describe('ProgressComponent', () => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, MatProgressSpinnerModule, MatIconModule],
       providers: [ProgressService, { provide: Router, useValue: router }],
-      declarations: [ProgressComponent]
+      declarations: [ProgressComponent],
     }).compileComponents();
 
     progressService = TestBed.get(ProgressService);
@@ -59,7 +59,7 @@ describe('ProgressComponent', () => {
   });
 
   it('should set error state when error defined', () => {
-    const error = {error: 'test'};
+    const error = { error: 'test' };
     progressService.setError(error);
     expect(component.error).toEqual(error.error);
   });
@@ -75,7 +75,7 @@ describe('ProgressComponent', () => {
     expect(progressService.clear).toHaveBeenCalled();
   });
 
-  it("should reload page after clicking refresh", () => {
+  it('should reload page after clicking refresh', () => {
     spyOn(router, 'navigateByUrl');
 
     component.refresh();
diff --git a/src/app/common/progress/progress.component.ts b/src/app/common/progress/progress.component.ts
index b9ce8f91..d6fada6e 100644
--- a/src/app/common/progress/progress.component.ts
+++ b/src/app/common/progress/progress.component.ts
@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-progress',
   templateUrl: './progress.component.html',
-  styleUrls: ['./progress.component.scss']
+  styleUrls: ['./progress.component.scss'],
 })
 export class ProgressComponent implements OnInit, OnDestroy {
   visible = false;
@@ -16,7 +16,7 @@ export class ProgressComponent implements OnInit, OnDestroy {
   constructor(private progressService: ProgressService, private router: Router) {}
 
   ngOnInit() {
-    this.progressService.state.subscribe(state => {
+    this.progressService.state.subscribe((state) => {
       this.visible = state.visible;
 
       // only set error state once; ignore next "correct" states
diff --git a/src/app/common/progress/progress.service.spec.ts b/src/app/common/progress/progress.service.spec.ts
index 23a76f08..52a714a9 100644
--- a/src/app/common/progress/progress.service.spec.ts
+++ b/src/app/common/progress/progress.service.spec.ts
@@ -7,7 +7,7 @@ describe('ProgressService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProgressService]
+      providers: [ProgressService],
     });
 
     progressService = TestBed.get(ProgressService);
@@ -30,7 +30,7 @@ describe('ProgressService', () => {
   });
 
   it('should propagate event on error', () => {
-    const error = {error: 'Error'};
+    const error = { error: 'Error' };
     progressService.setError(error);
     expect(progressService.state.next).toHaveBeenCalledWith(new State(false, error.error));
   });
diff --git a/src/app/components/adbutler/adbutler.component.html b/src/app/components/adbutler/adbutler.component.html
index 709874a7..7a714376 100644
--- a/src/app/components/adbutler/adbutler.component.html
+++ b/src/app/components/adbutler/adbutler.component.html
@@ -1,11 +1,11 @@
-<div class="ad" [ngClass]="{hidden: !isVisible, lightTheme: isLightThemeEnabled}">
-    <div class="adInnerContainer">
-        <span class="adBody">
-            <a [href]="adUrl" target="_blank">{{ adBody }}</a>
-        </span>
-        <button>
-            <a target="_blank" [href]="adUrl">{{ buttonLabel }}</a>
-        </button>
-    </div>
-    <mat-icon (click)="hide()" class="close-button">close</mat-icon>
+<div class="ad" [ngClass]="{ hidden: !isVisible, lightTheme: isLightThemeEnabled }">
+  <div class="adInnerContainer">
+    <span class="adBody">
+      <a [href]="adUrl" target="_blank">{{ adBody }}</a>
+    </span>
+    <button>
+      <a target="_blank" [href]="adUrl">{{ buttonLabel }}</a>
+    </button>
+  </div>
+  <mat-icon (click)="hide()" class="close-button">close</mat-icon>
 </div>
diff --git a/src/app/components/adbutler/adbutler.component.scss b/src/app/components/adbutler/adbutler.component.scss
index cc71b0b8..932aa606 100644
--- a/src/app/components/adbutler/adbutler.component.scss
+++ b/src/app/components/adbutler/adbutler.component.scss
@@ -12,27 +12,27 @@
 }
 
 .adInnerContainer {
-    margin: auto;
-    text-align: center;
+  margin: auto;
+  text-align: center;
 }
 
 .adBody {
-    padding-right: 16px;
+  padding-right: 16px;
 }
 
 .close-button {
-   position: absolute;
-   top: 15px;
-   right: 15px;
-   color: #000 !important;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: #000 !important;
 }
 
 .lightTheme {
-    background-color: #ddf9ff;
+  background-color: #ddf9ff;
 }
 
 .hidden {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 button {
diff --git a/src/app/components/adbutler/adbutler.component.spec.ts b/src/app/components/adbutler/adbutler.component.spec.ts
index 1aa8070f..2e66cd83 100644
--- a/src/app/components/adbutler/adbutler.component.spec.ts
+++ b/src/app/components/adbutler/adbutler.component.spec.ts
@@ -8,9 +8,8 @@ xdescribe('AdbutlerComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdbutlerComponent ]
-    })
-    .compileComponents();
+      declarations: [AdbutlerComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts
index f1bc7058..e2e7797d 100644
--- a/src/app/components/adbutler/adbutler.component.ts
+++ b/src/app/components/adbutler/adbutler.component.ts
@@ -6,62 +6,61 @@ import { AdButlerResponse } from '../../models/adbutler';
 const adButlerResponseBodyRegex: RegExp = /<a href="(.*)">(.*)<\/a><br\/>(.*)<br\/>\s*<button><a .*>(.*)<\/a>\s*<\/button>/i;
 
 @Component({
-    selector: 'app-adbutler',
-    templateUrl: './adbutler.component.html',
-    styleUrls: ['./adbutler.component.scss']
+  selector: 'app-adbutler',
+  templateUrl: './adbutler.component.html',
+  styleUrls: ['./adbutler.component.scss'],
 })
-
 export class AdbutlerComponent implements OnInit {
-    isVisible: boolean = false;
-    isLightThemeEnabled: boolean = false;
+  isVisible: boolean = false;
+  isLightThemeEnabled: boolean = false;
 
-    // Default ad props in case adbutler request fails
-    adUrl: string = 'https://try.solarwinds.com/gns3-free-toolset-giveaway?CMP=LEC-HAD-GNS3-SW_NA_X_NP_X_X_EN_STSGA_SW-ST-20200901_ST_OF1_TRY-NWSLTR';
-    adBody: string = 'Network Config Generator makes it easy configure network devices, including VLANs without opening the CLI'
-    buttonLabel: string = 'Check it out!'
+  // Default ad props in case adbutler request fails
+  adUrl: string =
+    'https://try.solarwinds.com/gns3-free-toolset-giveaway?CMP=LEC-HAD-GNS3-SW_NA_X_NP_X_X_EN_STSGA_SW-ST-20200901_ST_OF1_TRY-NWSLTR';
+  adBody: string =
+    'Network Config Generator makes it easy configure network devices, including VLANs without opening the CLI';
+  buttonLabel: string = 'Check it out!';
 
-    constructor(
-        private httpClient: HttpClient,
-        private themeService: ThemeService
-    ) {}
+  constructor(private httpClient: HttpClient, private themeService: ThemeService) {}
 
-    hide() {
-        this.isVisible = false;
-    }
+  hide() {
+    this.isVisible = false;
+  }
 
-    ngOnInit() {
-        this.httpClient
-            .get<AdButlerResponse>('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;')
-            .subscribe(response => {
-                if (response?.placements?.placement_1?.body) {
-                    try {
-                        // Use a regexp to parse the AdButler response. Preferably we would use the AdButler API
-                        // directly to get the data we need through a JSON response, but making an API request
-                        // involves storing credentials, which would be unwise to store in this repo. Best thing
-                        // would to have gns3.com proxy the JSON ad data to this web ui app.
-                        const htmlWithoutNewlines = response.placements.placement_1.body.replace(/(\r\n|\n|\r)/gm, '');
-                        const parsedAdResponseParts = adButlerResponseBodyRegex.exec(htmlWithoutNewlines);
+  ngOnInit() {
+    this.httpClient
+      .get<AdButlerResponse>('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;')
+      .subscribe(
+        (response) => {
+          if (response?.placements?.placement_1?.body) {
+            try {
+              // Use a regexp to parse the AdButler response. Preferably we would use the AdButler API
+              // directly to get the data we need through a JSON response, but making an API request
+              // involves storing credentials, which would be unwise to store in this repo. Best thing
+              // would to have gns3.com proxy the JSON ad data to this web ui app.
+              const htmlWithoutNewlines = response.placements.placement_1.body.replace(/(\r\n|\n|\r)/gm, '');
+              const parsedAdResponseParts = adButlerResponseBodyRegex.exec(htmlWithoutNewlines);
 
-                        // Ad title (2nd capture group) currently not used
-                        this.adUrl = parsedAdResponseParts[1].trim();
-                        this.adBody = parsedAdResponseParts[3].trim();
-                        this.buttonLabel = parsedAdResponseParts[4].trim();
-                    } catch (e) {}
-                }
+              // Ad title (2nd capture group) currently not used
+              this.adUrl = parsedAdResponseParts[1].trim();
+              this.adBody = parsedAdResponseParts[3].trim();
+              this.buttonLabel = parsedAdResponseParts[4].trim();
+            } catch (e) {}
+          }
 
-                this.isVisible = true;
-            },
-            error => {}
-        );
+          this.isVisible = true;
+        },
+        (error) => {}
+      );
 
-        this.themeService.getActualTheme() === 'light'
-            ? this.isLightThemeEnabled = true
-            : this.isLightThemeEnabled = false;
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
 
-        this.themeService.themeChanged.subscribe(() => {
-            this.themeService.getActualTheme() === 'light'
-                ? this.isLightThemeEnabled = true
-                : this.isLightThemeEnabled = false;
-        });
-    }
+    this.themeService.themeChanged.subscribe(() => {
+      this.themeService.getActualTheme() === 'light'
+        ? (this.isLightThemeEnabled = true)
+        : (this.isLightThemeEnabled = false);
+    });
+  }
 }
diff --git a/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts b/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts
index 872561ca..e9d89868 100644
--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.spec.ts
@@ -9,7 +9,6 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ProgressService } from '../../common/progress/progress.service';
 import { MockedProgressService } from '../project-map/project-map.component.spec';
 
-
 describe('BundledServerFinderComponent', () => {
   let component: BundledServerFinderComponent;
   let fixture: ComponentFixture<BundledServerFinderComponent>;
@@ -19,7 +18,7 @@ describe('BundledServerFinderComponent', () => {
 
   beforeEach(async(() => {
     router = {
-      navigate: jasmine.createSpy('navigate')
+      navigate: jasmine.createSpy('navigate'),
     };
 
     const server = new Server();
@@ -32,10 +31,10 @@ describe('BundledServerFinderComponent', () => {
       providers: [
         { provide: Router, useValue: router },
         { provide: ServerService, useValue: serverService },
-        { provide: ProgressService, useValue: progressService }
+        { provide: ProgressService, useValue: progressService },
       ],
       declarations: [BundledServerFinderComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BundledServerFinderComponent);
diff --git a/src/app/components/bundled-server-finder/bundled-server-finder.component.ts b/src/app/components/bundled-server-finder/bundled-server-finder.component.ts
index 25b86953..fe479e64 100644
--- a/src/app/components/bundled-server-finder/bundled-server-finder.component.ts
+++ b/src/app/components/bundled-server-finder/bundled-server-finder.component.ts
@@ -9,30 +9,25 @@ import { ProgressService } from '../../common/progress/progress.service';
 @Component({
   selector: 'app-bundled-server-finder',
   templateUrl: './bundled-server-finder.component.html',
-  styleUrls: ['./bundled-server-finder.component.scss']
+  styleUrls: ['./bundled-server-finder.component.scss'],
 })
 export class BundledServerFinderComponent implements OnInit {
   constructor(
     private router: Router,
     private serverService: ServerService,
     private progressService: ProgressService,
-    @Inject(DOCUMENT) private document) {}
+    @Inject(DOCUMENT) private document
+  ) {}
 
   ngOnInit() {
     this.progressService.activate();
-    setTimeout(() => 
-    {
+    setTimeout(() => {
       let port = parseInt(this.document.location.port, 10) ? parseInt(this.document.location.port, 10) : 80;
 
-      this.serverService.getLocalServer(
-        this.document.location.hostname,
-        port
-        )
-      .then((server: Server) => {
+      this.serverService.getLocalServer(this.document.location.hostname, port).then((server: Server) => {
         this.progressService.deactivate();
         this.router.navigate(['/server', server.id, 'projects']);
       });
-    },
-    100);
+    }, 100);
   }
 }
diff --git a/src/app/components/dialogs/information-dialog.component.ts b/src/app/components/dialogs/information-dialog.component.ts
index 9d58b7e9..891a3b5e 100644
--- a/src/app/components/dialogs/information-dialog.component.ts
+++ b/src/app/components/dialogs/information-dialog.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'app-information-dialog',
   templateUrl: 'information-dialog.component.html',
-  styleUrls: ['information-dialog.component.scss']
+  styleUrls: ['information-dialog.component.scss'],
 })
 export class InformationDialogComponent implements OnInit {
   public confirmationMessage: string;
diff --git a/src/app/components/direct-link/direct-link.component.ts b/src/app/components/direct-link/direct-link.component.ts
index b85eac28..ac68859b 100644
--- a/src/app/components/direct-link/direct-link.component.ts
+++ b/src/app/components/direct-link/direct-link.component.ts
@@ -1,4 +1,13 @@
-import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ElementRef,
+  ViewChild,
+  ViewEncapsulation,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { ServerService } from '../../services/server.service';
 import { ServerDatabase } from '../../services/server.database';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -9,7 +18,7 @@ import { ToasterService } from '../../services/toaster.service';
   selector: 'app-direct-link',
   templateUrl: './direct-link.component.html',
   styleUrls: ['./direct-link.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
 export class DirectLinkComponent implements OnInit {
   constructor(
@@ -36,20 +45,20 @@ export class DirectLinkComponent implements OnInit {
     const projectId = this.route.snapshot.paramMap.get('project_id');
 
     const servers = await this.serverService.findAll();
-    const server = servers.filter(server => server.host === serverIp && server.port === serverPort)[0];
+    const server = servers.filter((server) => server.host === serverIp && server.port === serverPort)[0];
 
     if (server) {
-        this.router.navigate(['/server', server.id, 'project', projectId]);
-    } else { 
-        let serverToAdd: Server = new Server();
-        serverToAdd.host = serverIp;
-        serverToAdd.port = serverPort;
-        serverToAdd.location = 'bundled';
-        serverToAdd.name = serverIp;
+      this.router.navigate(['/server', server.id, 'project', projectId]);
+    } else {
+      let serverToAdd: Server = new Server();
+      serverToAdd.host = serverIp;
+      serverToAdd.port = serverPort;
+      serverToAdd.location = 'bundled';
+      serverToAdd.name = serverIp;
 
-        this.serverService.create(serverToAdd).then((addedServer: Server) => {
-            this.router.navigate(['/server', addedServer.id, 'project', projectId]);
-        });
+      this.serverService.create(serverToAdd).then((addedServer: Server) => {
+        this.router.navigate(['/server', addedServer.id, 'project', projectId]);
+      });
     }
   }
 }
diff --git a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts
index 4be0fd99..49e3b171 100644
--- a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts
+++ b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts
@@ -34,9 +34,9 @@ describe('DrawingAddedComponent', () => {
         { provide: DrawingsDataSource, useValue: mockedDrawingsDataSource },
         { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource },
         { provide: DefaultDrawingsFactory, useValue: mockedDrawingsFactory },
-        { provide: MapDrawingToSvgConverter, useClass: MapDrawingToSvgConverter }
+        { provide: MapDrawingToSvgConverter, useClass: MapDrawingToSvgConverter },
       ],
-      declarations: [DrawingAddedComponent]
+      declarations: [DrawingAddedComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts
index 3ab46f8c..36e470be 100644
--- a/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts
+++ b/src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts
@@ -13,7 +13,7 @@ import { AddedDataEvent } from '../../../cartography/events/event-source';
 @Component({
   selector: 'app-drawing-added',
   templateUrl: './drawing-added.component.html',
-  styleUrls: ['./drawing-added.component.scss']
+  styleUrls: ['./drawing-added.component.scss'],
 })
 export class DrawingAddedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -31,7 +31,7 @@ export class DrawingAddedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.pointToAddSelected = this.drawingsEventSource.pointToAddSelected.subscribe(evt => this.onDrawingSaved(evt));
+    this.pointToAddSelected = this.drawingsEventSource.pointToAddSelected.subscribe((evt) => this.onDrawingSaved(evt));
   }
 
   ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
diff --git a/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.spec.ts b/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.spec.ts
index cd6e6684..30b6f348 100644
--- a/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.spec.ts
+++ b/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.spec.ts
@@ -21,9 +21,9 @@ describe('DrawingDraggedComponent', () => {
       providers: [
         { provide: DrawingService, useValue: mockedDrawingService },
         { provide: DrawingsDataSource, useValue: mockedDrawingsDataSource },
-        { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource }
+        { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource },
       ],
-      declarations: [DrawingDraggedComponent]
+      declarations: [DrawingDraggedComponent],
     }).compileComponents();
   }));
 
@@ -44,7 +44,7 @@ describe('DrawingDraggedComponent', () => {
   it('should call drawing service when drawing is dragged', () => {
     const mapDrawingElement: DrawingElement = {
       width: 100,
-      height: 100
+      height: 100,
     };
     const mapDrawing: MapDrawing = {
       id: 'sampleId',
@@ -55,7 +55,7 @@ describe('DrawingDraggedComponent', () => {
       x: 0,
       y: 0,
       z: 0,
-      element: mapDrawingElement
+      element: mapDrawingElement,
     };
     const drawingDraggedDataEvent = new DraggedDataEvent<MapDrawing>(mapDrawing, 0, 0);
     spyOn(mockedDrawingService, 'updatePosition').and.returnValue(Observable.of());
diff --git a/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts b/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts
index 85cf6de8..e4b83622 100644
--- a/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts
+++ b/src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts
@@ -12,7 +12,7 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-drawing-dragged',
   templateUrl: './drawing-dragged.component.html',
-  styleUrls: ['./drawing-dragged.component.scss']
+  styleUrls: ['./drawing-dragged.component.scss'],
 })
 export class DrawingDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -26,7 +26,7 @@ export class DrawingDraggedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.drawingDragged = this.drawingsEventSource.dragged.subscribe(evt => this.onDrawingDragged(evt));
+    this.drawingDragged = this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt));
   }
 
   onDrawingDragged(draggedEvent: DraggedDataEvent<MapDrawing>) {
diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts
index 0af53fda..e5d552e4 100644
--- a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts
+++ b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts
@@ -24,9 +24,9 @@ describe('DrawingResizedComponent', () => {
         { provide: DrawingService, useValue: mockedDrawingService },
         { provide: DrawingsDataSource, useValue: mockedDrawingsDataSource },
         { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource },
-        { provide: MapDrawingToSvgConverter, useValue: mockedMapDrawingToSvgConverter }
+        { provide: MapDrawingToSvgConverter, useValue: mockedMapDrawingToSvgConverter },
       ],
-      declarations: [DrawingResizedComponent]
+      declarations: [DrawingResizedComponent],
     }).compileComponents();
   }));
 
@@ -47,7 +47,7 @@ describe('DrawingResizedComponent', () => {
   it('should call drawing service when drawing is resized', () => {
     const mapDrawingElement: DrawingElement = {
       width: 100,
-      height: 100
+      height: 100,
     };
     const mapDrawing: MapDrawing = {
       id: 'sampleId',
@@ -58,7 +58,7 @@ describe('DrawingResizedComponent', () => {
       x: 0,
       y: 0,
       z: 0,
-      element: mapDrawingElement
+      element: mapDrawingElement,
     };
     const drawingResizedDataEvent = new ResizedDataEvent<MapDrawing>(mapDrawing, 0, 0, 100, 100);
     spyOn(mockedDrawingService, 'updateSizeAndPosition').and.returnValue(Observable.of());
diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts
index 1a374ffe..ee3d82e3 100644
--- a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts
+++ b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts
@@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-drawing-resized',
   templateUrl: './drawing-resized.component.html',
-  styleUrls: ['./drawing-resized.component.scss']
+  styleUrls: ['./drawing-resized.component.scss'],
 })
 export class DrawingResizedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -26,7 +26,7 @@ export class DrawingResizedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.drawingResized = this.drawingsEventSource.resized.subscribe(evt => this.onDrawingResized(evt));
+    this.drawingResized = this.drawingsEventSource.resized.subscribe((evt) => this.onDrawingResized(evt));
   }
 
   onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
diff --git a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts
index 9a727c13..ec7c7c60 100644
--- a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts
+++ b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts
@@ -23,9 +23,9 @@ describe('InterfaceLabelDraggedComponent', () => {
       providers: [
         { provide: LinkService, useValue: mockedLinkService },
         { provide: LinksDataSource, useValue: mockedLinksDataSource },
-        { provide: LinksEventSource, useValue: mockedLinksEventSource }
+        { provide: LinksEventSource, useValue: mockedLinksEventSource },
       ],
-      declarations: [InterfaceLabelDraggedComponent]
+      declarations: [InterfaceLabelDraggedComponent],
     }).compileComponents();
   }));
 
@@ -50,7 +50,7 @@ describe('InterfaceLabelDraggedComponent', () => {
       linkId: 'sampleLinkId',
       adapterNumber: 0,
       portNumber: 0,
-      label: {} as MapLabel
+      label: {} as MapLabel,
     };
     const interfaceLabelDraggedDataEvent = new DraggedDataEvent<MapLinkNode>(mapLinkNode, 0, 0);
 
@@ -60,14 +60,14 @@ describe('InterfaceLabelDraggedComponent', () => {
         node_id: '1',
         adapter_number: 0,
         port_number: 0,
-        label: {} as Label
+        label: {} as Label,
       },
       {
         node_id: '2',
         adapter_number: 0,
         port_number: 0,
-        label: {} as Label
-      }
+        label: {} as Label,
+      },
     ];
     mockedLinksDataSource = TestBed.get(LinksDataSource);
 
diff --git a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts
index 4575c53e..acfbb958 100644
--- a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts
+++ b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts
@@ -11,7 +11,7 @@ import { LinksEventSource } from '../../../cartography/events/links-event-source
 @Component({
   selector: 'app-interface-label-dragged',
   templateUrl: './interface-label-dragged.component.html',
-  styleUrls: ['./interface-label-dragged.component.scss']
+  styleUrls: ['./interface-label-dragged.component.scss'],
 })
 export class InterfaceLabelDraggedComponent {
   @Input() server: Server;
@@ -24,7 +24,9 @@ export class InterfaceLabelDraggedComponent {
   ) {}
 
   ngOnInit() {
-    this.interfaceDragged = this.linksEventSource.interfaceDragged.subscribe(evt => this.onInterfaceLabelDragged(evt));
+    this.interfaceDragged = this.linksEventSource.interfaceDragged.subscribe((evt) =>
+      this.onInterfaceLabelDragged(evt)
+    );
   }
 
   onInterfaceLabelDragged(draggedEvent: DraggedDataEvent<MapLinkNode>) {
diff --git a/src/app/components/drawings-listeners/link-created/link-created.component.spec.ts b/src/app/components/drawings-listeners/link-created/link-created.component.spec.ts
index 06547cb8..5cd8b39b 100644
--- a/src/app/components/drawings-listeners/link-created/link-created.component.spec.ts
+++ b/src/app/components/drawings-listeners/link-created/link-created.component.spec.ts
@@ -38,9 +38,9 @@ describe('LinkCreatedComponent', () => {
         { provide: LinksDataSource, useClass: LinksDataSource },
         { provide: LinksEventSource, useValue: mockedLinksEventSource },
         { provide: MapNodeToNodeConverter, useValue: mockedMapNodeToNodeConverter },
-        { provide: MapPortToPortConverter, useClass: MapPortToPortConverter }
+        { provide: MapPortToPortConverter, useClass: MapPortToPortConverter },
       ],
-      declarations: [LinkCreatedComponent]
+      declarations: [LinkCreatedComponent],
     }).compileComponents();
   }));
 
@@ -86,14 +86,14 @@ describe('LinkCreatedComponent', () => {
       width: 0,
       x: 0,
       y: 0,
-      z: 0
+      z: 0,
     };
     const mapPort: MapPort = {
       adapterNumber: 1,
       linkType: 'sampleLinkType',
       name: 'sampleName',
       portNumber: 1,
-      shortName: 'sampleShortName'
+      shortName: 'sampleShortName',
     };
     const linkCreatedDataEvent = new MapLinkCreated(mapNode, mapPort, mapNode, mapPort);
     spyOn(mockedLinkService, 'createLink').and.returnValue(Observable.of({}));
diff --git a/src/app/components/drawings-listeners/link-created/link-created.component.ts b/src/app/components/drawings-listeners/link-created/link-created.component.ts
index 442c73e6..1ee23809 100644
--- a/src/app/components/drawings-listeners/link-created/link-created.component.ts
+++ b/src/app/components/drawings-listeners/link-created/link-created.component.ts
@@ -14,7 +14,7 @@ import { LinksEventSource } from '../../../cartography/events/links-event-source
 @Component({
   selector: 'app-link-created',
   templateUrl: './link-created.component.html',
-  styleUrls: ['./link-created.component.scss']
+  styleUrls: ['./link-created.component.scss'],
 })
 export class LinkCreatedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -31,7 +31,7 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.linkCreated = this.linksEventSource.created.subscribe(evt => this.onLinkCreated(evt));
+    this.linkCreated = this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt));
   }
 
   onLinkCreated(linkCreated: MapLinkCreated) {
@@ -39,7 +39,7 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
     const yLength = Math.abs(linkCreated.sourceNode.y - linkCreated.targetNode.y);
     const zLength = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
     //from law of sines
-    const sinY = yLength/zLength;
+    const sinY = yLength / zLength;
 
     const x = (45 / zLength) * xLength;
     const y = (45 / zLength) * yLength;
@@ -49,26 +49,35 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
     let xLabelTargetNode = 0;
     let yLabelTargetNode = 0;
 
-    if ((linkCreated.sourceNode.x <= linkCreated.targetNode.x) && (linkCreated.sourceNode.y <= linkCreated.targetNode.y)) {
-      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5;
-      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5;
-      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
-      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
-    } else if ((linkCreated.sourceNode.x > linkCreated.targetNode.x) && (linkCreated.sourceNode.y < linkCreated.targetNode.y)) {
-      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
-      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5 - Math.round(20 * sinY);
-      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
-      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) - 5;
-    } else if ((linkCreated.sourceNode.x < linkCreated.targetNode.x) && (linkCreated.sourceNode.y > linkCreated.targetNode.y)) {
-      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5 - Math.round(20 * sinY);
-      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) - 5 - Math.round(20 * sinY);
-      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5;
-      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
-    } else if ((linkCreated.sourceNode.x >= linkCreated.targetNode.x) && (linkCreated.sourceNode.y >= linkCreated.targetNode.y)) {
-      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
-      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
-      xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
-      yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
+    if (linkCreated.sourceNode.x <= linkCreated.targetNode.x && linkCreated.sourceNode.y <= linkCreated.targetNode.y) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width / 2) + Math.round(x) + 5;
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height / 2) + Math.round(y) + 5;
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width / 2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height / 2) - Math.round(y) + 5 - Math.round(20 * sinY);
+    } else if (
+      linkCreated.sourceNode.x > linkCreated.targetNode.x &&
+      linkCreated.sourceNode.y < linkCreated.targetNode.y
+    ) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width / 2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height / 2) + Math.round(y) + 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width / 2) + Math.round(x) + 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height / 2) - Math.round(y) - 5;
+    } else if (
+      linkCreated.sourceNode.x < linkCreated.targetNode.x &&
+      linkCreated.sourceNode.y > linkCreated.targetNode.y
+    ) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width / 2) + Math.round(x) + 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height / 2) - Math.round(y) - 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width / 2) - Math.round(x) - 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height / 2) + Math.round(y) + 5;
+    } else if (
+      linkCreated.sourceNode.x >= linkCreated.targetNode.x &&
+      linkCreated.sourceNode.y >= linkCreated.targetNode.y
+    ) {
+      xLabelSourceNode = Math.floor(linkCreated.sourceNode.width / 2) - Math.round(x) - 5 - Math.round(20 * sinY);
+      yLabelSourceNode = Math.floor(linkCreated.sourceNode.height / 2) - Math.round(y) + 5 - Math.round(20 * sinY);
+      xLabelTargetNode = Math.floor(linkCreated.targetNode.width / 2) + Math.round(x) + 5;
+      yLabelTargetNode = Math.floor(linkCreated.targetNode.height / 2) + Math.round(y) + 5;
     }
 
     const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode);
@@ -76,11 +85,23 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
     const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode);
     const targetPort = this.mapPortToPort.convert(linkCreated.targetPort);
 
-    this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort, xLabelSourceNode, yLabelSourceNode, xLabelTargetNode, yLabelTargetNode).subscribe(() => {
-      this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
-        this.linksDataSource.set(links);
+    this.linkService
+      .createLink(
+        this.server,
+        sourceNode,
+        sourcePort,
+        targetNode,
+        targetPort,
+        xLabelSourceNode,
+        yLabelSourceNode,
+        xLabelTargetNode,
+        yLabelTargetNode
+      )
+      .subscribe(() => {
+        this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
+          this.linksDataSource.set(links);
+        });
       });
-    });
   }
 
   ngOnDestroy() {
diff --git a/src/app/components/drawings-listeners/node-dragged/node-dragged.component.spec.ts b/src/app/components/drawings-listeners/node-dragged/node-dragged.component.spec.ts
index 82b67ff5..c9aa160c 100644
--- a/src/app/components/drawings-listeners/node-dragged/node-dragged.component.spec.ts
+++ b/src/app/components/drawings-listeners/node-dragged/node-dragged.component.spec.ts
@@ -21,9 +21,9 @@ describe('NodeDraggedComponent', () => {
       providers: [
         { provide: NodesDataSource, useValue: mockedNodesDataSource },
         { provide: NodeService, useValue: mockedNodeService },
-        { provide: NodesEventSource, useValue: mockedNodesEventSource }
+        { provide: NodesEventSource, useValue: mockedNodesEventSource },
       ],
-      declarations: [NodeDraggedComponent]
+      declarations: [NodeDraggedComponent],
     }).compileComponents();
   }));
 
@@ -66,7 +66,7 @@ describe('NodeDraggedComponent', () => {
       width: 0,
       x: 0,
       y: 0,
-      z: 0
+      z: 0,
     };
     const draggedDataEvent = new DraggedDataEvent<MapNode>(mapNode, 0, 0);
     spyOn(mockedNodeService, 'updatePosition').and.returnValue(Observable.of());
diff --git a/src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts b/src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts
index bb97c2b9..0be2badd 100644
--- a/src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts
+++ b/src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts
@@ -12,11 +12,11 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-node-dragged',
   templateUrl: './node-dragged.component.html',
-  styleUrls: ['./node-dragged.component.scss']
+  styleUrls: ['./node-dragged.component.scss'],
 })
 export class NodeDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
-  @Input() project: Project
+  @Input() project: Project;
   private nodeDragged: Subscription;
 
   constructor(
@@ -26,7 +26,7 @@ export class NodeDraggedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.nodeDragged = this.nodesEventSource.dragged.subscribe(evt => this.onNodeDragged(evt));
+    this.nodeDragged = this.nodesEventSource.dragged.subscribe((evt) => this.onNodeDragged(evt));
   }
 
   onNodeDragged(draggedEvent: DraggedDataEvent<MapNode>) {
diff --git a/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.spec.ts b/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.spec.ts
index 08751c03..4c97eace 100644
--- a/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.spec.ts
+++ b/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.spec.ts
@@ -30,9 +30,9 @@ describe('NodeLabelDraggedComponent', () => {
         { provide: NodesDataSource, useValue: mockedNodesDataSource },
         { provide: NodeService, useValue: mockedNodeService },
         { provide: NodesEventSource, useValue: mockedNodesEventSource },
-        { provide: MapLabelToLabelConverter, useValue: mapLabelToLabelConverter }
+        { provide: MapLabelToLabelConverter, useValue: mapLabelToLabelConverter },
       ],
-      declarations: [NodeLabelDraggedComponent]
+      declarations: [NodeLabelDraggedComponent],
     }).compileComponents();
   }));
 
@@ -60,7 +60,7 @@ describe('NodeLabelDraggedComponent', () => {
       y: 0,
       originalX: 0,
       originalY: 0,
-      nodeId: 'node id'
+      nodeId: 'node id',
     };
     const nodeDraggedDataEvent = new DraggedDataEvent<MapLabel>(mapLabel, 0, 0);
     spyOn(mockedNodeService, 'updateLabel').and.returnValue(Observable.of());
diff --git a/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts b/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts
index d3b7ffa3..7405cf15 100644
--- a/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts
+++ b/src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts
@@ -12,7 +12,7 @@ import { MapLabel } from '../../../cartography/models/map/map-label';
 @Component({
   selector: 'app-node-label-dragged',
   templateUrl: './node-label-dragged.component.html',
-  styleUrls: ['./node-label-dragged.component.scss']
+  styleUrls: ['./node-label-dragged.component.scss'],
 })
 export class NodeLabelDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -26,7 +26,7 @@ export class NodeLabelDraggedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.nodeLabelDragged = this.nodesEventSource.labelDragged.subscribe(evt => this.onNodeLabelDragged(evt));
+    this.nodeLabelDragged = this.nodesEventSource.labelDragged.subscribe((evt) => this.onNodeLabelDragged(evt));
   }
 
   onNodeLabelDragged(draggedEvent: DraggedDataEvent<MapLabel>) {
diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts b/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts
index 8eab7805..784a25aa 100644
--- a/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts
+++ b/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts
@@ -36,9 +36,9 @@ describe('TextAddedComponent', () => {
         { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource },
         { provide: DefaultDrawingsFactory, useValue: mockedDrawingsFactory },
         { provide: MapDrawingToSvgConverter, useClass: MapDrawingToSvgConverter },
-        { provide: Context, useClass: Context }
+        { provide: Context, useClass: Context },
       ],
-      declarations: [TextAddedComponent]
+      declarations: [TextAddedComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.ts b/src/app/components/drawings-listeners/text-added/text-added.component.ts
index 2071c4f1..ac79d2e5 100644
--- a/src/app/components/drawings-listeners/text-added/text-added.component.ts
+++ b/src/app/components/drawings-listeners/text-added/text-added.component.ts
@@ -15,7 +15,7 @@ import { Context } from '../../../cartography/models/context';
 @Component({
   selector: 'app-text-added',
   templateUrl: './text-added.component.html',
-  styleUrls: ['./text-added.component.scss']
+  styleUrls: ['./text-added.component.scss'],
 })
 export class TextAddedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -33,7 +33,7 @@ export class TextAddedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.textAdded = this.drawingsEventSource.textAdded.subscribe(evt => this.onTextAdded(evt));
+    this.textAdded = this.drawingsEventSource.textAdded.subscribe((evt) => this.onTextAdded(evt));
   }
 
   onTextAdded(evt: TextAddedDataEvent) {
@@ -45,8 +45,10 @@ export class TextAddedComponent implements OnInit, OnDestroy {
       .add(
         this.server,
         this.project.project_id,
-        (evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k,
-        (evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k,
+        (evt.x - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x)) /
+          this.context.transformation.k,
+        (evt.y - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y)) /
+          this.context.transformation.k,
         svgText
       )
       .subscribe((serverDrawing: Drawing) => {
diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts b/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts
index aae1cd55..2efd7abd 100644
--- a/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts
+++ b/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts
@@ -22,9 +22,9 @@ describe('TextEditedComponent', () => {
         { provide: DrawingService, useValue: mockedDrawingService },
         { provide: DrawingsDataSource, useValue: mockedDrawingsDataSource },
         { provide: DrawingsEventSource, useValue: mockedDrawingsEventSource },
-        { provide: MapDrawingToSvgConverter, useClass: MapDrawingToSvgConverter }
+        { provide: MapDrawingToSvgConverter, useClass: MapDrawingToSvgConverter },
       ],
-      declarations: [TextEditedComponent]
+      declarations: [TextEditedComponent],
     }).compileComponents();
   }));
 
@@ -52,7 +52,7 @@ describe('TextEditedComponent', () => {
       font_family: 'font',
       font_size: 100,
       font_weight: 'bold',
-      text_decoration: 'sample decoration'
+      text_decoration: 'sample decoration',
     };
     const textEditedDataEvent = new TextEditedDataEvent('id', 'edited text', textElement);
     spyOn(mockedDrawingService, 'updateText').and.returnValue(Observable.of());
diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.ts b/src/app/components/drawings-listeners/text-edited/text-edited.component.ts
index 438306d8..a2d5b484 100644
--- a/src/app/components/drawings-listeners/text-edited/text-edited.component.ts
+++ b/src/app/components/drawings-listeners/text-edited/text-edited.component.ts
@@ -13,7 +13,7 @@ import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/ma
 @Component({
   selector: 'app-text-edited',
   templateUrl: './text-edited.component.html',
-  styleUrls: ['./text-edited.component.scss']
+  styleUrls: ['./text-edited.component.scss'],
 })
 export class TextEditedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -27,7 +27,7 @@ export class TextEditedComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.textEdited = this.drawingsEventSource.textEdited.subscribe(evt => this.onTextEdited(evt));
+    this.textEdited = this.drawingsEventSource.textEdited.subscribe((evt) => this.onTextEdited(evt));
   }
 
   onTextEdited(evt: TextEditedDataEvent) {
diff --git a/src/app/components/help/help.component.html b/src/app/components/help/help.component.html
index 44dd9364..124fe11e 100644
--- a/src/app/components/help/help.component.html
+++ b/src/app/components/help/help.component.html
@@ -1,43 +1,39 @@
 <div class="content">
-    <div class="default-header"><h1>Help</h1></div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <mat-accordion>
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <mat-panel-title> Useful shortcuts </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <mat-list>
-                        <mat-list-item> ctrl + + to zoom in </mat-list-item>
-                        <mat-list-item> ctrl + - to zoom out </mat-list-item>
-                        <mat-list-item> ctrl + 0 to reset zoom </mat-list-item>
-                        <mat-list-item> ctrl + h to hide toolbar </mat-list-item>
-                        <mat-list-item> ctrl + a to select all items on map </mat-list-item>
-                        <mat-list-item> ctrl + shift + a to deselect all items on map </mat-list-item>
-                        <mat-list-item> ctrl + shift + s to go to preferences </mat-list-item>
-                    </mat-list>
-                </mat-expansion-panel>
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <mat-panel-title> Third party components </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <div [innerHTML]="thirdpartylicenses"></div>
-                </mat-expansion-panel>
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <mat-panel-title> Release notes </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <div [innerHTML]="releasenotes"></div>
-                </mat-expansion-panel>
-            </mat-accordion>
-        </div>
-        <button mat-button class="full-width">
-            <a href="https://docs.gns3.com/docs/">
-                Go to documentation
-            </a>
-        </button>
-        <button mat-button routerLink="/help/reportissue" class="full-width">
-            Report an issue
-        </button>
+  <div class="default-header"><h1>Help</h1></div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-accordion>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title> Useful shortcuts </mat-panel-title>
+          </mat-expansion-panel-header>
+          <mat-list>
+            <mat-list-item> ctrl + + to zoom in </mat-list-item>
+            <mat-list-item> ctrl + - to zoom out </mat-list-item>
+            <mat-list-item> ctrl + 0 to reset zoom </mat-list-item>
+            <mat-list-item> ctrl + h to hide toolbar </mat-list-item>
+            <mat-list-item> ctrl + a to select all items on map </mat-list-item>
+            <mat-list-item> ctrl + shift + a to deselect all items on map </mat-list-item>
+            <mat-list-item> ctrl + shift + s to go to preferences </mat-list-item>
+          </mat-list>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title> Third party components </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div [innerHTML]="thirdpartylicenses"></div>
+        </mat-expansion-panel>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title> Release notes </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div [innerHTML]="releasenotes"></div>
+        </mat-expansion-panel>
+      </mat-accordion>
     </div>
+    <button mat-button class="full-width">
+      <a href="https://docs.gns3.com/docs/"> Go to documentation </a>
+    </button>
+    <button mat-button routerLink="/help/reportissue" class="full-width">Report an issue</button>
+  </div>
 </div>
diff --git a/src/app/components/help/help.component.scss b/src/app/components/help/help.component.scss
index c2f6270d..d6a023a9 100644
--- a/src/app/components/help/help.component.scss
+++ b/src/app/components/help/help.component.scss
@@ -1,4 +1,4 @@
 .full-width {
-    width: 50%;
-    margin-top: 20px;
+  width: 50%;
+  margin-top: 20px;
 }
diff --git a/src/app/components/help/help.component.ts b/src/app/components/help/help.component.ts
index 512a9d21..ceee8fea 100644
--- a/src/app/components/help/help.component.ts
+++ b/src/app/components/help/help.component.ts
@@ -2,32 +2,30 @@ import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
-selector: 'app-help',
-templateUrl: './help.component.html',
-styleUrls: ['./help.component.scss']
+  selector: 'app-help',
+  templateUrl: './help.component.html',
+  styleUrls: ['./help.component.scss'],
 })
 export class HelpComponent implements OnInit {
-    thirdpartylicenses = '';
-    releasenotes = '';
+  thirdpartylicenses = '';
+  releasenotes = '';
 
-    constructor(
-        private httpClient: HttpClient
-    ) {}
+  constructor(private httpClient: HttpClient) {}
 
-    ngOnInit() {
-        this.httpClient.get(window.location.href + '/3rdpartylicenses.txt', {responseType: 'text'})
-            .subscribe(data => {
-                this.thirdpartylicenses = data.replace(new RegExp('\n', 'g'), "<br />")
-            },
-            error => {
-                if (error.status === 404) {
-                    this.thirdpartylicenses = 'File not found';
-                } 
-            });
+  ngOnInit() {
+    this.httpClient.get(window.location.href + '/3rdpartylicenses.txt', { responseType: 'text' }).subscribe(
+      (data) => {
+        this.thirdpartylicenses = data.replace(new RegExp('\n', 'g'), '<br />');
+      },
+      (error) => {
+        if (error.status === 404) {
+          this.thirdpartylicenses = 'File not found';
+        }
+      }
+    );
 
-        this.httpClient.get('ReleaseNotes.txt', {responseType: 'text'})
-            .subscribe(data => {
-                this.releasenotes = data.replace(new RegExp('\n', 'g'), "<br />")
-            });
-    }
+    this.httpClient.get('ReleaseNotes.txt', { responseType: 'text' }).subscribe((data) => {
+      this.releasenotes = data.replace(new RegExp('\n', 'g'), '<br />');
+    });
+  }
 }
diff --git a/src/app/components/installed-software/install-software/install-software.component.html b/src/app/components/installed-software/install-software/install-software.component.html
index dba60bbf..d6140ef6 100644
--- a/src/app/components/installed-software/install-software/install-software.component.html
+++ b/src/app/components/installed-software/install-software/install-software.component.html
@@ -1,3 +1,3 @@
 <button mat-button color="primary" (click)="install()" [disabled]="disabled">
   <ng-container *ngIf="readyToInstall">{{ buttonText }}</ng-container>
-</button>
\ No newline at end of file
+</button>
diff --git a/src/app/components/installed-software/install-software/install-software.component.spec.ts b/src/app/components/installed-software/install-software/install-software.component.spec.ts
index 33f9e4df..48dc892f 100644
--- a/src/app/components/installed-software/install-software/install-software.component.spec.ts
+++ b/src/app/components/installed-software/install-software/install-software.component.spec.ts
@@ -8,9 +8,8 @@ describe('InstallSoftwareComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ InstallSoftwareComponent ]
-    })
-    .compileComponents();
+      declarations: [InstallSoftwareComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/installed-software/install-software/install-software.component.ts b/src/app/components/installed-software/install-software/install-software.component.ts
index 88733ada..ce9da63c 100644
--- a/src/app/components/installed-software/install-software/install-software.component.ts
+++ b/src/app/components/installed-software/install-software/install-software.component.ts
@@ -4,7 +4,7 @@ import { ElectronService } from 'ngx-electron';
 @Component({
   selector: 'app-install-software',
   templateUrl: './install-software.component.html',
-  styleUrls: ['./install-software.component.scss']
+  styleUrls: ['./install-software.component.scss'],
 })
 export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
   @Input('software')
@@ -12,14 +12,12 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
 
   @Output()
   installedChanged = new EventEmitter();
-  
+
   public disabled = false;
   public readyToInstall = true;
   public buttonText: string;
 
-  constructor(
-    private electronService: ElectronService
-  ) { }
+  constructor(private electronService: ElectronService) {}
 
   ngOnInit() {
     this.electronService.ipcRenderer.on(this.responseChannel, (event, data) => {
@@ -38,7 +36,7 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
 
   install() {
     this.disabled = true;
-    this.buttonText = "Installing";
+    this.buttonText = 'Installing';
     this.electronService.ipcRenderer.send('installed-software-install', this.software);
   }
 
@@ -50,10 +48,9 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
     this.disabled = this.software.installed;
 
     if (this.software.installed) {
-      this.buttonText = "Installed";
-    }
-    else {
-      this.buttonText = "Install";
+      this.buttonText = 'Installed';
+    } else {
+      this.buttonText = 'Install';
     }
   }
 }
diff --git a/src/app/components/installed-software/installed-software.component.html b/src/app/components/installed-software/installed-software.component.html
index f81d01e4..1cd1f121 100644
--- a/src/app/components/installed-software/installed-software.component.html
+++ b/src/app/components/installed-software/installed-software.component.html
@@ -1,36 +1,37 @@
 <div class="content">
-    <div class="default-header">
-      <h1>Installed software</h1>
-    </div>
-    <div class="default-content">
-      <div class="container mat-elevation-z8">
-        <mat-table #table [dataSource]="dataSource">
-  
-          <ng-container matColumnDef="name">
-            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-            <mat-cell *matCellDef="let row;">
-              <ng-container *ngIf="row.type !== 'adbutler'">
-                {{ row.name }}
-              </ng-container>
+  <div class="default-header">
+    <h1>Installed software</h1>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-table #table [dataSource]="dataSource">
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+          <mat-cell *matCellDef="let row">
+            <ng-container *ngIf="row.type !== 'adbutler'">
+              {{ row.name }}
+            </ng-container>
 
-              <ng-container *ngIf="row.type === 'adbutler'">
-                  <app-adbutler theme="dark"></app-adbutler>
-              </ng-container>
-            </mat-cell>
-          </ng-container>
-  
-          <ng-container matColumnDef="actions">
-            <mat-header-cell *matHeaderCellDef></mat-header-cell>
-            <mat-cell *matCellDef="let row;" style="text-align: right">
-              <app-install-software [software]="row" (installedChanged)="onInstalled($event)" *ngIf="row.type !== 'adbutler'"></app-install-software>
-            </mat-cell>
-          </ng-container>
-  
-          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-        </mat-table>
-      </div>
-  
+            <ng-container *ngIf="row.type === 'adbutler'">
+              <app-adbutler theme="dark"></app-adbutler>
+            </ng-container>
+          </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef></mat-header-cell>
+          <mat-cell *matCellDef="let row" style="text-align: right">
+            <app-install-software
+              [software]="row"
+              (installedChanged)="onInstalled($event)"
+              *ngIf="row.type !== 'adbutler'"
+            ></app-install-software>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      </mat-table>
     </div>
   </div>
-  
\ No newline at end of file
+</div>
diff --git a/src/app/components/installed-software/installed-software.component.spec.ts b/src/app/components/installed-software/installed-software.component.spec.ts
index c52bc58a..736df6da 100644
--- a/src/app/components/installed-software/installed-software.component.spec.ts
+++ b/src/app/components/installed-software/installed-software.component.spec.ts
@@ -8,9 +8,8 @@ describe('InstalledSoftwareComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ InstalledSoftwareComponent ]
-    })
-    .compileComponents();
+      declarations: [InstalledSoftwareComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/installed-software/installed-software.component.ts b/src/app/components/installed-software/installed-software.component.ts
index 8ebdb4b0..27915788 100644
--- a/src/app/components/installed-software/installed-software.component.ts
+++ b/src/app/components/installed-software/installed-software.component.ts
@@ -6,7 +6,7 @@ import { Observable, of, BehaviorSubject } from 'rxjs';
 @Component({
   selector: 'app-installed-software',
   templateUrl: './installed-software.component.html',
-  styleUrls: ['./installed-software.component.scss']
+  styleUrls: ['./installed-software.component.scss'],
 })
 export class InstalledSoftwareComponent implements OnInit {
   dataSource: InstalledSoftwareDataSource;
@@ -15,7 +15,7 @@ export class InstalledSoftwareComponent implements OnInit {
   constructor(
     private installedSoftwareService: InstalledSoftwareService,
     private changeDetectorRef: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.dataSource = new InstalledSoftwareDataSource(this.installedSoftwareService);
@@ -32,7 +32,7 @@ export class InstalledSoftwareComponent implements OnInit {
   }
 }
 
-export class InstalledSoftwareDataSource extends DataSource<any> {
+export class InstalledSoftwareDataSource extends DataSource<any> {
   installed = new BehaviorSubject([]);
 
   constructor(private installedSoftwareService: InstalledSoftwareService) {
@@ -49,9 +49,8 @@ export class InstalledSoftwareDataSource extends DataSource<any> {
   refresh() {
     let installedSoftware = this.installedSoftwareService.list();
     installedSoftware.push({
-      type: 'adbutler'
+      type: 'adbutler',
     });
     this.installed.next(installedSoftware);
   }
-
 }
diff --git a/src/app/components/page-not-found/page-not-found.component.html b/src/app/components/page-not-found/page-not-found.component.html
index 0c777606..d4b33a2d 100644
--- a/src/app/components/page-not-found/page-not-found.component.html
+++ b/src/app/components/page-not-found/page-not-found.component.html
@@ -1,6 +1,7 @@
 <div class="content">
-    <div class="default-header">
-        <br/><h1>404 Page not found</h1>
-        <button mat-button routerLink="/servers">Navigate to homepage</button>
-    </div>
+  <div class="default-header">
+    <br />
+    <h1>404 Page not found</h1>
+    <button mat-button routerLink="/servers">Navigate to homepage</button>
+  </div>
 </div>
diff --git a/src/app/components/page-not-found/page-not-found.component.scss b/src/app/components/page-not-found/page-not-found.component.scss
index b3dfebed..cc26754b 100644
--- a/src/app/components/page-not-found/page-not-found.component.scss
+++ b/src/app/components/page-not-found/page-not-found.component.scss
@@ -1,3 +1,3 @@
 div {
-    text-align: center
+  text-align: center;
 }
diff --git a/src/app/components/page-not-found/page-not-found.component.ts b/src/app/components/page-not-found/page-not-found.component.ts
index ec0871c7..db812fa7 100644
--- a/src/app/components/page-not-found/page-not-found.component.ts
+++ b/src/app/components/page-not-found/page-not-found.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-page-not-found',
-    templateUrl: './page-not-found.component.html',
-    styleUrls: ['./page-not-found.component.scss']
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss'],
 })
 export class PageNotFoundComponent {
-    constructor(){}
+  constructor() {}
 }
diff --git a/src/app/components/preferences/built-in/built-in-preferences.component.html b/src/app/components/preferences/built-in/built-in-preferences.component.html
index 06e03fd3..04a5bb21 100644
--- a/src/app/components/preferences/built-in/built-in-preferences.component.html
+++ b/src/app/components/preferences/built-in/built-in-preferences.component.html
@@ -1,23 +1,23 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Built-in preferences</h1>
-            <button class="top-button" class="cancel-button" routerLink="/server/{{serverId}}/preferences" mat-button>Back</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Built-in preferences</h1>
+      <button class="top-button" class="cancel-button" routerLink="/server/{{ serverId }}/preferences" mat-button>
+        Back
+      </button>
     </div>
-    <div class="default-content">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
-                    Ethernet hubs
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
-                    Ethernet switches
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
-                    Cloud nodes
-                </mat-list-item>
-            </mat-nav-list>
-        </div>
+  </div>
+  <div class="default-content">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/builtin/ethernet-hubs">
+          Ethernet hubs
+        </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/builtin/ethernet-switches">
+          Ethernet switches
+        </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/builtin/cloud-nodes"> Cloud nodes </mat-list-item>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/built-in/built-in-preferences.component.spec.ts b/src/app/components/preferences/built-in/built-in-preferences.component.spec.ts
index 13db5332..8e8e78bf 100644
--- a/src/app/components/preferences/built-in/built-in-preferences.component.spec.ts
+++ b/src/app/components/preferences/built-in/built-in-preferences.component.spec.ts
@@ -12,36 +12,43 @@ import { MockedActivatedRoute } from '../preferences.component.spec';
 import { BuiltInPreferencesComponent } from './built-in-preferences.component';
 
 describe('BuiltInPreferencesComponent', () => {
-    let component: BuiltInPreferencesComponent;
-    let fixture: ComponentFixture<BuiltInPreferencesComponent>;
-    let activatedRoute = new MockedActivatedRoute().get();
-  
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-        providers: [
-            {
-                provide: ActivatedRoute,  useValue: activatedRoute
-            }
-        ],
-        declarations: [
-            BuiltInPreferencesComponent
-        ],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).compileComponents();
-    }));
-  
-    beforeEach(() => {
-      fixture = TestBed.createComponent(BuiltInPreferencesComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
-    });
-  
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  let component: BuiltInPreferencesComponent;
+  let fixture: ComponentFixture<BuiltInPreferencesComponent>;
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    it('should set correct server id', () => {
-        expect(component.serverId).toBe('1');
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+      ],
+      declarations: [BuiltInPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuiltInPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set correct server id', () => {
+    expect(component.serverId).toBe('1');
+  });
 });
diff --git a/src/app/components/preferences/built-in/built-in-preferences.component.ts b/src/app/components/preferences/built-in/built-in-preferences.component.ts
index c4701b8c..7749d54f 100644
--- a/src/app/components/preferences/built-in/built-in-preferences.component.ts
+++ b/src/app/components/preferences/built-in/built-in-preferences.component.ts
@@ -1,20 +1,17 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-
 @Component({
-    selector: 'app-built-in-preferences',
-    templateUrl: './built-in-preferences.component.html',
-    styleUrls: ['./built-in-preferences.component.scss', '../preferences.component.scss']
+  selector: 'app-built-in-preferences',
+  templateUrl: './built-in-preferences.component.html',
+  styleUrls: ['./built-in-preferences.component.scss', '../preferences.component.scss'],
 })
 export class BuiltInPreferencesComponent implements OnInit {
-    public serverId: string = "";
+  public serverId: string = '';
 
-    constructor(
-        private route: ActivatedRoute
-    ) {}
+  constructor(private route: ActivatedRoute) {}
 
-    ngOnInit() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-    }
+  ngOnInit() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+  }
 }
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
index 2b0518f9..89cf0f0c 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html
@@ -1,25 +1,33 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New cloud node template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New cloud node template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <mat-radio-group class="radio-group">
-                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the cloud node locally</mat-radio-button>
-                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the cloud node on the GNS3 VM</mat-radio-button>
-            </mat-radio-group>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <mat-radio-group class="radio-group">
+        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+          >Run the cloud node locally</mat-radio-button
+        >
+        <mat-radio-button
+          [disabled]="!isGns3VmAvailable"
+          class="radio-button"
+          value="2"
+          (click)="setServerType('gns3 vm')"
+          >Run the cloud node on the GNS3 VM</mat-radio-button
+        >
+      </mat-radio-group>
 
-            <form [formGroup]="formGroup">
-                <mat-form-field class="form-field">
-                    <input formControlName="templateName" matInput type="text" placeholder="Template name">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+      <form [formGroup]="formGroup">
+        <mat-form-field class="form-field">
+          <input formControlName="templateName" matInput type="text" placeholder="Template name" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.spec.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.spec.ts
index b756b06a..e9713ccb 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.spec.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.spec.ts
@@ -21,82 +21,82 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ComputeService } from '../../../../../services/compute.service';
-import {MockedComputeService} from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec'
+import { MockedComputeService } from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec';
 
 export class MockedBuiltInTemplatesService {
-    public addTemplate(server: Server, cloudTemplate: CloudTemplate) {
-        return of(cloudTemplate);    
-    }
+  public addTemplate(server: Server, cloudTemplate: CloudTemplate) {
+    return of(cloudTemplate);
+  }
 }
 
 describe('CloudNodesAddTemplateComponent', () => {
-    let component: CloudNodesAddTemplateComponent;
-    let fixture: ComponentFixture<CloudNodesAddTemplateComponent>;
+  let component: CloudNodesAddTemplateComponent;
+  let fixture: ComponentFixture<CloudNodesAddTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let mockedComputeService = new MockedComputeService();
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/builtin/cloud-nodes', component: CloudNodesAddTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: ComputeService, useValue: mockedComputeService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                CloudNodesAddTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let mockedComputeService = new MockedComputeService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CloudNodesAddTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/builtin/cloud-nodes', component: CloudNodesAddTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: ComputeService, useValue: mockedComputeService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [CloudNodesAddTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CloudNodesAddTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as CloudTemplate));
-        component.templateName = "sample name";
-        component.server = {id: 1} as Server;
-        component.formGroup.controls['templateName'].setValue('template name');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as CloudTemplate));
+    component.templateName = 'sample name';
+    component.server = { id: 1 } as Server;
+    component.formGroup.controls['templateName'].setValue('template name');
 
-        expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as CloudTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.templateName = "";
-        component.server = {id: 1} as Server;
+    expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as CloudTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.templateName = '';
+    component.server = { id: 1 } as Server;
 
-        expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
index 05a4592a..913338bc 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -11,78 +11,77 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { ComputeService } from '../../../../../services/compute.service';
 import { Compute } from '../../../../../models/compute';
 
-
 @Component({
-    selector: 'app-cloud-nodes-add-template',
-    templateUrl: './cloud-nodes-add-template.component.html',
-    styleUrls: ['./cloud-nodes-add-template.component.scss', '../../../preferences.component.scss']
+  selector: 'app-cloud-nodes-add-template',
+  templateUrl: './cloud-nodes-add-template.component.html',
+  styleUrls: ['./cloud-nodes-add-template.component.scss', '../../../preferences.component.scss'],
 })
 export class CloudNodesAddTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    formGroup: FormGroup;
+  server: Server;
+  templateName: string = '';
+  formGroup: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private router: Router,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder,
-        private computeService: ComputeService
-    ) {
-        this.formGroup = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private router: Router,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private formBuilder: FormBuilder,
+    private computeService: ComputeService
+  ) {
+    this.formGroup = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+  }
 
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
-    }
-
-    addTemplate() {
-        if (!this.formGroup.invalid) {
-            let cloudTemplate: CloudTemplate;
-
-            this.templateMocksService.getCloudNodeTemplate().subscribe((template: CloudTemplate) => {
-                cloudTemplate = template;
-            });
-
-            cloudTemplate.template_id = uuid();
-            cloudTemplate.name = this.formGroup.get('templateName').value;
-            cloudTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  addTemplate() {
+    if (!this.formGroup.invalid) {
+      let cloudTemplate: CloudTemplate;
+
+      this.templateMocksService.getCloudNodeTemplate().subscribe((template: CloudTemplate) => {
+        cloudTemplate = template;
+      });
+
+      cloudTemplate.template_id = uuid();
+      cloudTemplate.name = this.formGroup.get('templateName').value;
+      cloudTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
+      this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
index 41c50b26..7dbf5e78 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html
@@ -1,173 +1,146 @@
-<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Cloud configuration</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Cloud configuration</h1>
     </div>
-    <div class="default-content" *ngIf="cloudNodeTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.name" 
-                        placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.default_name_format" 
-                        placeholder="Default name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.symbol" 
-                        placeholder="Symbol">
-                </mat-form-field>
-                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="form-field">
-                    <mat-select 
-                        placeholder="Category" 
-                        [(ngModel)]="cloudNodeTemplate.category">
-                        <mat-option *ngFor="let category of categories" [value]="category[1]">
-                            {{category[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="select">
-                    <mat-select 
-                        placeholder="Console type" 
-                        [(ngModel)]="cloudNodeTemplate.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.remote_console_host" 
-                        placeholder="Console host">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.remote_console_port" 
-                        placeholder="Console port">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="cloudNodeTemplate.remote_console_http_path" 
-                        placeholder="Console HTTP path">
-                </mat-form-field>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Ethernet interfaces
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <div class="form-field" *ngFor="let port of portsMappingEthernet">
-                    <div class="form-field">{{port.name}}</div><br/><br/>
-                </div>
-                <mat-form-field class="select">
-                    <mat-select 
-                        placeholder="Ethernet interface" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="ethernetInterface">
-                            <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
-                                {{type}}
-                            </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        TAP interfaces
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <div class="form-field" *ngFor="let port of portsMappingTap">
-                    <div class="form-field">{{port.name}}</div><br/><br/>
-                </div>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="tapInterface" 
-                        placeholder="TAP interface">
-                </mat-form-field>
-                <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        UDP tunnels
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
-                    <ng-container matColumnDef="name">
-                        <th mat-header-cell *matHeaderCellDef> Name </th>
-                        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-                    </ng-container>
-    
-                    <ng-container matColumnDef="rport">
-                        <th mat-header-cell *matHeaderCellDef> Local port </th>
-                        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
-                    </ng-container>
-    
-                    <ng-container matColumnDef="rhost">
-                        <th mat-header-cell *matHeaderCellDef> Type </th>
-                        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
-                    </ng-container>
+  </div>
+  <div class="default-content" *ngIf="cloudNodeTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="cloudNodeTemplate.name" placeholder="Template name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="cloudNodeTemplate.default_name_format"
+            placeholder="Default name format"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="cloudNodeTemplate.symbol" placeholder="Symbol" />
+        </mat-form-field>
+        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Category" [(ngModel)]="cloudNodeTemplate.category">
+            <mat-option *ngFor="let category of categories" [value]="category[1]">
+              {{ category[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="select">
+          <mat-select placeholder="Console type" [(ngModel)]="cloudNodeTemplate.console_type">
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="cloudNodeTemplate.remote_console_host" placeholder="Console host" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="cloudNodeTemplate.remote_console_port" placeholder="Console port" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="cloudNodeTemplate.remote_console_http_path"
+            placeholder="Console HTTP path"
+          />
+        </mat-form-field>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Ethernet interfaces </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="form-field" *ngFor="let port of portsMappingEthernet">
+          <div class="form-field">{{ port.name }}</div>
+          <br /><br />
+        </div>
+        <mat-form-field class="select">
+          <mat-select
+            placeholder="Ethernet interface"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="ethernetInterface"
+          >
+            <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> TAP interfaces </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="form-field" *ngFor="let port of portsMappingTap">
+          <div class="form-field">{{ port.name }}</div>
+          <br /><br />
+        </div>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="tapInterface" placeholder="TAP interface" />
+        </mat-form-field>
+        <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> UDP tunnels </mat-panel-title>
+        </mat-expansion-panel-header>
+        <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>Name</th>
+            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+          </ng-container>
 
-                    <ng-container matColumnDef="lport">
-                        <th mat-header-cell *matHeaderCellDef> Remote port </th>
-                        <td mat-cell *matCellDef="let element"> {{element.lport}} </td>
-                    </ng-container>
-                    
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table>
-                <br *ngIf="dataSourceUdp.length"/>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="newPort.name" 
-                        placeholder="Name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="number" 
-                        [(ngModel)]="newPort.lport" 
-                        placeholder="Local port">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="newPort.rhost" 
-                        placeholder="Remote host">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="number" 
-                        [(ngModel)]="newPort.rport" 
-                        placeholder="Remote port">
-                </mat-form-field>
-                <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
-        </div>
+          <ng-container matColumnDef="rport">
+            <th mat-header-cell *matHeaderCellDef>Local port</th>
+            <td mat-cell *matCellDef="let element">{{ element.rport }}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="rhost">
+            <th mat-header-cell *matHeaderCellDef>Type</th>
+            <td mat-cell *matCellDef="let element">{{ element.rhost }}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="lport">
+            <th mat-header-cell *matHeaderCellDef>Remote port</th>
+            <td mat-cell *matCellDef="let element">{{ element.lport }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+        <br *ngIf="dataSourceUdp.length" />
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="newPort.name" placeholder="Name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="newPort.lport" placeholder="Local port" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="newPort.rhost" placeholder="Remote host" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="newPort.rport" placeholder="Remote port" />
+        </mat-form-field>
+        <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button><br />
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && cloudNodeTemplate" [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && cloudNodeTemplate"
+  [server]="server"
+  [symbol]="cloudNodeTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.spec.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.spec.ts
index 8e41e319..f11e70bb 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.spec.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.spec.ts
@@ -23,59 +23,69 @@ import { BuiltInTemplatesService } from '../../../../../services/built-in-templa
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({ports_mapping: []} as CloudTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({ ports_mapping: [] } as CloudTemplate);
+  }
 
-    public saveTemplate(server: Server, cloudTemplate: CloudTemplate) {
-        return of(cloudTemplate);    
-    }
+  public saveTemplate(server: Server, cloudTemplate: CloudTemplate) {
+    return of(cloudTemplate);
+  }
 }
 
 describe('CloudNodesTemplateDetailsComponent', () => {
-    let component: CloudNodesTemplateDetailsComponent;
-    let fixture: ComponentFixture<CloudNodesTemplateDetailsComponent>;
+  let component: CloudNodesTemplateDetailsComponent;
+  let fixture: ComponentFixture<CloudNodesTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService }
-          ],
-          declarations: [
-                CloudNodesTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CloudNodesTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService },
+      ],
+      declarations: [CloudNodesTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CloudNodesTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as CloudTemplate));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.cloudNodeTemplate = {ports_mapping: []} as CloudTemplate;
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as CloudTemplate));
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
-    });
+    component.cloudNodeTemplate = { ports_mapping: [] } as CloudTemplate;
+    component.onSave();
+
+    expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
index 7705c46b..c4ec22d3 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
@@ -8,124 +8,124 @@ import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 
-
 @Component({
-    selector: 'app-cloud-nodes-template-details',
-    templateUrl: './cloud-nodes-template-details.component.html',
-    styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss']
+  selector: 'app-cloud-nodes-template-details',
+  templateUrl: './cloud-nodes-template-details.component.html',
+  styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss'],
 })
 export class CloudNodesTemplateDetailsComponent implements OnInit {
-    server: Server;
-    cloudNodeTemplate: CloudTemplate;
+  server: Server;
+  cloudNodeTemplate: CloudTemplate;
 
-    isSymbolSelectionOpened: boolean = false;
+  isSymbolSelectionOpened: boolean = false;
 
-    categories = [];
-    consoleTypes: string[] = [];
+  categories = [];
+  consoleTypes: string[] = [];
 
-    tapInterface: string = '';
-    ethernetInterface: string = '';
-    ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
-    portsMappingEthernet: PortsMappingEntity[] = [];
-    portsMappingTap: PortsMappingEntity[] = [];
-    portsMappingUdp: PortsMappingEntity[] = [];
-    newPort: PortsMappingEntity;
-    displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport'];
-    dataSourceUdp: PortsMappingEntity[] = [];
+  tapInterface: string = '';
+  ethernetInterface: string = '';
+  ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
+  portsMappingEthernet: PortsMappingEntity[] = [];
+  portsMappingTap: PortsMappingEntity[] = [];
+  portsMappingUdp: PortsMappingEntity[] = [];
+  newPort: PortsMappingEntity;
+  displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport'];
+  dataSourceUdp: PortsMappingEntity[] = [];
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private toasterService: ToasterService,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
-        private router: Router
-    ) {
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
-    }
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private toasterService: ToasterService,
+    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+    private router: Router
+  ) {
+    this.newPort = {
+      name: '',
+      port_number: 0,
+    };
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
 
-            this.getConfiguration();
-            this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((cloudNodeTemplate: CloudTemplate) => {
-                this.cloudNodeTemplate = cloudNodeTemplate;
+      this.getConfiguration();
+      this.builtInTemplatesService
+        .getTemplate(this.server, template_id)
+        .subscribe((cloudNodeTemplate: CloudTemplate) => {
+          this.cloudNodeTemplate = cloudNodeTemplate;
 
-                this.portsMappingEthernet = this.cloudNodeTemplate.ports_mapping
-                    .filter((elem) => elem.type === 'ethernet');
+          this.portsMappingEthernet = this.cloudNodeTemplate.ports_mapping.filter((elem) => elem.type === 'ethernet');
 
-                this.portsMappingTap = this.cloudNodeTemplate.ports_mapping
-                    .filter((elem) => elem.type === 'tap');
-                
-                this.portsMappingUdp = this.cloudNodeTemplate.ports_mapping
-                    .filter((elem) => elem.type === 'udp');
-                
-                this.dataSourceUdp = this.portsMappingUdp;
-            });
+          this.portsMappingTap = this.cloudNodeTemplate.ports_mapping.filter((elem) => elem.type === 'tap');
+
+          this.portsMappingUdp = this.cloudNodeTemplate.ports_mapping.filter((elem) => elem.type === 'udp');
+
+          this.dataSourceUdp = this.portsMappingUdp;
         });
-    }
+    });
+  }
 
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
-    }
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+  }
 
-    getConfiguration() {
-        this.categories = this.builtInTemplatesConfigurationService.getCategoriesForCloudNodes();
-        this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
-    }
+  getConfiguration() {
+    this.categories = this.builtInTemplatesConfigurationService.getCategoriesForCloudNodes();
+    this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
+  }
 
-    onAddEthernetInterface() {
-        if (this.ethernetInterface) {
-            this.portsMappingEthernet.push({
-                interface: this.ethernetInterface,
-                name: this.ethernetInterface,
-                port_number: 0,
-                type: "ethernet"
-            });
-        }
+  onAddEthernetInterface() {
+    if (this.ethernetInterface) {
+      this.portsMappingEthernet.push({
+        interface: this.ethernetInterface,
+        name: this.ethernetInterface,
+        port_number: 0,
+        type: 'ethernet',
+      });
     }
+  }
 
-    onAddTapInterface() {
-        if (this.tapInterface) {
-            this.portsMappingTap.push({
-                interface: this.tapInterface,
-                name: this.tapInterface,
-                port_number: 0,
-                type: "tap"
-            });
-        }
+  onAddTapInterface() {
+    if (this.tapInterface) {
+      this.portsMappingTap.push({
+        interface: this.tapInterface,
+        name: this.tapInterface,
+        port_number: 0,
+        type: 'tap',
+      });
     }
+  }
 
-    onAddUdpInterface() {
-        this.portsMappingUdp.push(this.newPort);
-        this.dataSourceUdp = [...this.portsMappingUdp];
-        
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
-    }
+  onAddUdpInterface() {
+    this.portsMappingUdp.push(this.newPort);
+    this.dataSourceUdp = [...this.portsMappingUdp];
 
-    onSave() {
-        this.cloudNodeTemplate.ports_mapping = [...this.portsMappingEthernet, ...this.portsMappingTap];
+    this.newPort = {
+      name: '',
+      port_number: 0,
+    };
+  }
 
-        this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
-            this.toasterService.success("Changes saved");
-        });
-    }
+  onSave() {
+    this.cloudNodeTemplate.ports_mapping = [...this.portsMappingEthernet, ...this.portsMappingTap];
 
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
+    this.builtInTemplatesService
+      .saveTemplate(this.server, this.cloudNodeTemplate)
+      .subscribe((cloudNodeTemplate: CloudTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
+  }
 
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.cloudNodeTemplate.symbol = chosenSymbol;
-    }
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
+
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.cloudNodeTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
index 1fa88847..22cfab26 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Cloud nodes templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/cloud-nodes/addtemplate" mat-raised-button color="primary">Add cloud node template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Cloud nodes templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin/cloud-nodes/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add cloud node template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="cloudNodesTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of cloudNodesTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="cloudNodesTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of cloudNodesTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.spec.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.spec.ts
index b70defc0..956e44ae 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.spec.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { CloudNodesTemplatesComponent } from './cloud-nodes-templates.component'
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplates(server: Server) {
-        return of([{} as CloudTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as CloudTemplate]);
+  }
 }
 
 describe('CloudNodesTemplatesComponent', () => {
-    let component: CloudNodesTemplatesComponent;
-    let fixture: ComponentFixture<CloudNodesTemplatesComponent>;
+  let component: CloudNodesTemplatesComponent;
+  let fixture: ComponentFixture<CloudNodesTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService }
-          ],
-          declarations: [
-              CloudNodesTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CloudNodesTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+      ],
+      declarations: [CloudNodesTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CloudNodesTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
index 7efc602c..35c9ea78 100644
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -6,42 +6,41 @@ import { BuiltInTemplatesService } from '../../../../../services/built-in-templa
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
-
 @Component({
-    selector: 'app-cloud-nodes-templates',
-    templateUrl: './cloud-nodes-templates.component.html',
-    styleUrls: ['./cloud-nodes-templates.component.scss', '../../../preferences.component.scss']
+  selector: 'app-cloud-nodes-templates',
+  templateUrl: './cloud-nodes-templates.component.html',
+  styleUrls: ['./cloud-nodes-templates.component.scss', '../../../preferences.component.scss'],
 })
 export class CloudNodesTemplatesComponent implements OnInit {
-    server: Server;
-    cloudNodesTemplates: CloudTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  cloudNodesTemplates: CloudTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.builtInTemplatesService.getTemplates(this.server).subscribe((cloudNodesTemplates: CloudTemplate[]) => {
-            this.cloudNodesTemplates = cloudNodesTemplates.filter((elem) => elem.template_type === "cloud" && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.builtInTemplatesService.getTemplates(this.server).subscribe((cloudNodesTemplates: CloudTemplate[]) => {
+      this.cloudNodesTemplates = cloudNodesTemplates.filter((elem) => elem.template_type === 'cloud' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: CloudTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: CloudTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
index 599d2221..0e90b602 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html
@@ -1,28 +1,36 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New Ethernet hub template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New Ethernet hub template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <mat-radio-group class="radio-group">
-                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the Ethernet Hub locally</mat-radio-button>
-                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the Ethernet Hub on the GNS3 VM</mat-radio-button>
-            </mat-radio-group>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <mat-radio-group class="radio-group">
+        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+          >Run the Ethernet Hub locally</mat-radio-button
+        >
+        <mat-radio-button
+          [disabled]="!isGns3VmAvailable"
+          class="radio-button"
+          value="2"
+          (click)="setServerType('gns3 vm')"
+          >Run the Ethernet Hub on the GNS3 VM</mat-radio-button
+        >
+      </mat-radio-group>
 
-            <form [formGroup]="formGroup">
-                <mat-form-field class="form-field">
-                    <input formControlName="templateName" matInput type="text" placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input formControlName="numberOfPorts" matInput type="number" placeholder="Number of ports">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+      <form [formGroup]="formGroup">
+        <mat-form-field class="form-field">
+          <input formControlName="templateName" matInput type="text" placeholder="Template name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input formControlName="numberOfPorts" matInput type="number" placeholder="Number of ports" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.spec.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.spec.ts
index 9cc2d8ff..d3e74b84 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.spec.ts
@@ -21,97 +21,98 @@ import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hu
 import { EthernetHubsAddTemplateComponent } from './ethernet-hubs-add-template.component';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { ComputeService } from '../../../../../services/compute.service';
-import {MockedComputeService} from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec';
+import { MockedComputeService } from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec';
 
 export class MockedBuiltInTemplatesService {
-    public addTemplate(server: Server, ethernetHubTemplate: EthernetHubTemplate) {
-        return of(ethernetHubTemplate);    
-    }
+  public addTemplate(server: Server, ethernetHubTemplate: EthernetHubTemplate) {
+    return of(ethernetHubTemplate);
+  }
 }
 
 describe('EthernetHubsAddTemplateComponent', () => {
-    let component: EthernetHubsAddTemplateComponent;
-    let fixture: ComponentFixture<EthernetHubsAddTemplateComponent>;
+  let component: EthernetHubsAddTemplateComponent;
+  let fixture: ComponentFixture<EthernetHubsAddTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let mockedComputeService = new MockedComputeService();
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/builtin/ethernet-hubs', component: EthernetHubsAddTemplateComponent}])
-            ],
-            providers: [
-                {
-                    provide: ActivatedRoute,  useValue: activatedRoute
-                },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-                { provide: ToasterService, useValue: mockedToasterService},
-                { provide: ComputeService, useValue: mockedComputeService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                EthernetHubsAddTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let mockedComputeService = new MockedComputeService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetHubsAddTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/builtin/ethernet-hubs', component: EthernetHubsAddTemplateComponent },
+        ]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: ComputeService, useValue: mockedComputeService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [EthernetHubsAddTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetHubsAddTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        component.templateName = "sample name";
-        component.server = {id: 1} as Server;
-        component.formGroup.controls['templateName'].setValue('template name');
-        component.formGroup.controls['numberOfPorts'].setValue('1');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    component.templateName = 'sample name';
+    component.server = { id: 1 } as Server;
+    component.formGroup.controls['templateName'].setValue('template name');
+    component.formGroup.controls['numberOfPorts'].setValue('1');
 
-        expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.templateName = "";
-        component.server = {id: 1} as Server;
+    expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.templateName = '';
+    component.server = { id: 1 } as Server;
 
-        expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when number of ports is missing', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.templateName = "sample name";
-        component.server = {id: 1} as Server;
+    expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when number of ports is missing', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.templateName = 'sample name';
+    component.server = { id: 1 } as Server;
 
-        expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
index e9a2885a..6c9fd3d0 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -11,86 +11,85 @@ import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'
 import { ComputeService } from '../../../../../services/compute.service';
 import { Compute } from '../../../../../models/compute';
 
-
 @Component({
-    selector: 'app-ethernet-hubs-add-template',
-    templateUrl: './ethernet-hubs-add-template.component.html',
-    styleUrls: ['./ethernet-hubs-add-template.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-hubs-add-template',
+  templateUrl: './ethernet-hubs-add-template.component.html',
+  styleUrls: ['./ethernet-hubs-add-template.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetHubsAddTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    formGroup: FormGroup;
+  server: Server;
+  templateName: string = '';
+  formGroup: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private router: Router,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder,
-        private computeService: ComputeService
-    ) {
-        this.formGroup = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            numberOfPorts: new FormControl(8, Validators.required)
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private router: Router,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private formBuilder: FormBuilder,
+    private computeService: ComputeService
+  ) {
+    this.formGroup = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      numberOfPorts: new FormControl(8, Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
+    }
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+  }
+
+  addTemplate() {
+    if (!this.formGroup.invalid) {
+      let ethernetHubTemplate: EthernetHubTemplate;
+
+      this.templateMocksService.getEthernetHubTemplate().subscribe((template: EthernetHubTemplate) => {
+        ethernetHubTemplate = template;
+      });
+
+      ethernetHubTemplate.template_id = uuid();
+      ethernetHubTemplate.name = this.formGroup.get('templateName').value;
+      ethernetHubTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
+      for (let i = 0; i < this.formGroup.get('numberOfPorts').value; i++) {
+        ethernetHubTemplate.ports_mapping.push({
+          name: `Ethernet${i}`,
+          port_number: i,
         });
+      }
+
+      this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe(() => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
-    }
-
-    addTemplate() {
-        if (!this.formGroup.invalid) {
-            let ethernetHubTemplate: EthernetHubTemplate;
-
-            this.templateMocksService.getEthernetHubTemplate().subscribe((template: EthernetHubTemplate) => {
-                ethernetHubTemplate = template;
-            });
-
-            ethernetHubTemplate.template_id = uuid();
-            ethernetHubTemplate.name = this.formGroup.get('templateName').value;
-            ethernetHubTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            for(let i=0; i<this.formGroup.get('numberOfPorts').value; i++){
-                ethernetHubTemplate.ports_mapping.push({
-                    name: `Ethernet${i}`,
-                    port_number: i
-                });
-            }
-
-            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe(() => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
-    }
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
index 1a75e798..b33932f2 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html
@@ -1,57 +1,71 @@
-<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Ethernet hub settings</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Ethernet hub settings</h1>
     </div>
-    <div class="default-content" *ngIf="ethernetHubTemplate">
-        <mat-card>
-            <form [formGroup]="inputForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="ethernetHubTemplate.name" 
-                        formControlName="templateName"
-                        placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="ethernetHubTemplate.default_name_format" 
-                        formControlName="defaultName"
-                        placeholder="Default name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="ethernetHubTemplate.symbol" 
-                        formControlName="symbol"
-                        placeholder="Symbol">
-                </mat-form-field>
-                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="form-field">
-                    <mat-select 
-                        placeholder="Category" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="ethernetHubTemplate.category">
-                        <mat-option *ngFor="let category of categories" [value]="category[1]">
-                            {{category[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="number" 
-                        [(ngModel)]="numberOfPorts" 
-                        [ngModelOptions]="{standalone: true}"
-                        placeholder="Number of ports">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="ethernetHubTemplate">
+    <mat-card>
+      <form [formGroup]="inputForm">
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="ethernetHubTemplate.name"
+            formControlName="templateName"
+            placeholder="Template name"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="ethernetHubTemplate.default_name_format"
+            formControlName="defaultName"
+            placeholder="Default name format"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="ethernetHubTemplate.symbol"
+            formControlName="symbol"
+            placeholder="Symbol"
+          />
+        </mat-form-field>
+        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+        <mat-form-field class="form-field">
+          <mat-select
+            placeholder="Category"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="ethernetHubTemplate.category"
+          >
+            <mat-option *ngFor="let category of categories" [value]="category[1]">
+              {{ category[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="number"
+            [(ngModel)]="numberOfPorts"
+            [ngModelOptions]="{ standalone: true }"
+            placeholder="Number of ports"
+          />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button><br />
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetHubTemplate" [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && ethernetHubTemplate"
+  [server]="server"
+  [symbol]="ethernetHubTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.spec.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.spec.ts
index 558001a6..dc6a1ae1 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.spec.ts
@@ -23,102 +23,112 @@ import { EthernetHubsTemplateDetailsComponent } from './ethernet-hubs-template-d
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({ports_mapping: []} as EthernetHubTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({ ports_mapping: [] } as EthernetHubTemplate);
+  }
 
-    public saveTemplate(server: Server, cloudTemplate: EthernetHubTemplate) {
-        return of(cloudTemplate);    
-    }
+  public saveTemplate(server: Server, cloudTemplate: EthernetHubTemplate) {
+    return of(cloudTemplate);
+  }
 }
 
 describe('EthernetHubsTemplateDetailsComponent', () => {
-    let component: EthernetHubsTemplateDetailsComponent;
-    let fixture: ComponentFixture<EthernetHubsTemplateDetailsComponent>;
+  let component: EthernetHubsTemplateDetailsComponent;
+  let fixture: ComponentFixture<EthernetHubsTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-              { provide: ToasterService, useValue: mockedToasterService},
-              { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService }
-          ],
-          declarations: [
-                EthernetHubsTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetHubsTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService },
+      ],
+      declarations: [EthernetHubsTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetHubsTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        component.numberOfPorts = 2;
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetHubTemplate = {ports_mapping: []} as EthernetHubTemplate;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    component.numberOfPorts = 2;
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetHubTemplate = { ports_mapping: [] } as EthernetHubTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when template name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        component.numberOfPorts = 2;
-        component.inputForm.controls['templateName'].setValue('');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetHubTemplate = {ports_mapping: []} as EthernetHubTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when template name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    component.numberOfPorts = 2;
+    component.inputForm.controls['templateName'].setValue('');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetHubTemplate = { ports_mapping: [] } as EthernetHubTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when default name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        component.numberOfPorts = 2;
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetHubTemplate = {ports_mapping: []} as EthernetHubTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when default name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    component.numberOfPorts = 2;
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetHubTemplate = { ports_mapping: [] } as EthernetHubTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should call save template when symbol path is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
-        component.numberOfPorts = 2;
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('');
-        component.ethernetHubTemplate = {ports_mapping: []} as EthernetHubTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should call save template when symbol path is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetHubTemplate));
+    component.numberOfPorts = 2;
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('');
+    component.ethernetHubTemplate = { ports_mapping: [] } as EthernetHubTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
index cf30ac85..8e07ebca 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
@@ -8,79 +8,82 @@ import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hu
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 
-
 @Component({
-    selector: 'app-ethernet-hubs-template-details',
-    templateUrl: './ethernet-hubs-template-details.component.html',
-    styleUrls: ['./ethernet-hubs-template-details.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-hubs-template-details',
+  templateUrl: './ethernet-hubs-template-details.component.html',
+  styleUrls: ['./ethernet-hubs-template-details.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetHubsTemplateDetailsComponent implements OnInit {
-    server: Server;
-    ethernetHubTemplate: EthernetHubTemplate;
-    numberOfPorts: number;
-    inputForm: FormGroup;
-    isSymbolSelectionOpened: boolean = false;
+  server: Server;
+  ethernetHubTemplate: EthernetHubTemplate;
+  numberOfPorts: number;
+  inputForm: FormGroup;
+  isSymbolSelectionOpened: boolean = false;
 
-    categories = [];
+  categories = [];
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
-        private router: Router
-    ) {
-        this.inputForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+    private router: Router
+  ) {
+    this.inputForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetHubs();
+      this.builtInTemplatesService
+        .getTemplate(this.server, template_id)
+        .subscribe((ethernetHubTemplate: EthernetHubTemplate) => {
+          this.ethernetHubTemplate = ethernetHubTemplate;
+          this.numberOfPorts = this.ethernetHubTemplate.ports_mapping.length;
+        });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+  }
+
+  onSave() {
+    if (this.inputForm.invalid || !this.numberOfPorts) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.ethernetHubTemplate.ports_mapping = [];
+      for (let i = 0; i < this.numberOfPorts; i++) {
+        this.ethernetHubTemplate.ports_mapping.push({
+          name: `Ethernet${i}`,
+          port_number: i,
+        });
+      }
+
+      this.builtInTemplatesService
+        .saveTemplate(this.server, this.ethernetHubTemplate)
+        .subscribe((ethernetHubTemplate: EthernetHubTemplate) => {
+          this.toasterService.success('Changes saved');
         });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-            this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetHubs();
-            this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetHubTemplate: EthernetHubTemplate) => {
-                this.ethernetHubTemplate = ethernetHubTemplate;
-                this.numberOfPorts =  this.ethernetHubTemplate.ports_mapping.length;
-            });
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
-    }
-
-    onSave() {
-        if (this.inputForm.invalid || ! this.numberOfPorts) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.ethernetHubTemplate.ports_mapping = [];
-            for(let i=0; i<this.numberOfPorts; i++){
-                this.ethernetHubTemplate.ports_mapping.push({
-                    name: `Ethernet${i}`,
-                    port_number: i
-                });
-            }
-
-            this.builtInTemplatesService.saveTemplate(this.server, this.ethernetHubTemplate).subscribe((ethernetHubTemplate: EthernetHubTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.ethernetHubTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.ethernetHubTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
index d7f87d39..f83b36a4 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Ethernet hubs templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-hubs/addtemplate" mat-raised-button color="primary">Add Ethernet hub template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Ethernet hubs templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin/ethernet-hubs/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add Ethernet hub template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="ethernetHubsTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of ethernetHubsTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="ethernetHubsTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of ethernetHubsTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.spec.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.spec.ts
index 7deb83f9..b663bf18 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hu
 import { EthernetHubsTemplatesComponent } from './ethernet-hubs-templates.component';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplates(server: Server) {
-        return of([{} as EthernetHubTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as EthernetHubTemplate]);
+  }
 }
 
 describe('EthernetHubsTemplatesComponent', () => {
-    let component: EthernetHubsTemplatesComponent;
-    let fixture: ComponentFixture<EthernetHubsTemplatesComponent>;
+  let component: EthernetHubsTemplatesComponent;
+  let fixture: ComponentFixture<EthernetHubsTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService }
-          ],
-          declarations: [
-              EthernetHubsTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetHubsTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+      ],
+      declarations: [EthernetHubsTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetHubsTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
index 02dfd070..c3cf7f0d 100644
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -6,42 +6,43 @@ import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hu
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
-
 @Component({
-    selector: 'app-ethernet-hubs-templates',
-    templateUrl: './ethernet-hubs-templates.component.html',
-    styleUrls: ['./ethernet-hubs-templates.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-hubs-templates',
+  templateUrl: './ethernet-hubs-templates.component.html',
+  styleUrls: ['./ethernet-hubs-templates.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetHubsTemplatesComponent implements OnInit {
-    server: Server;
-    ethernetHubsTemplates: EthernetHubTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  ethernetHubsTemplates: EthernetHubTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetHubsTemplates: EthernetHubTemplate[]) => {
-            this.ethernetHubsTemplates = ethernetHubsTemplates.filter((elem) => elem.template_type === "ethernet_hub" && !elem.builtin);
-        });
-    }
-    
-    deleteTemplate(template: EthernetHubTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  getTemplates() {
+    this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetHubsTemplates: EthernetHubTemplate[]) => {
+      this.ethernetHubsTemplates = ethernetHubsTemplates.filter(
+        (elem) => elem.template_type === 'ethernet_hub' && !elem.builtin
+      );
+    });
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  deleteTemplate(template: EthernetHubTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
+
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
index 1620b6f2..ca42cf47 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html
@@ -1,28 +1,36 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New Ethernet switch template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New Ethernet switch template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <mat-radio-group class="radio-group">
-                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the Ethernet switch locally</mat-radio-button>
-                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the Ethernet switch on the GNS3 VM</mat-radio-button>
-            </mat-radio-group>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <mat-radio-group class="radio-group">
+        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+          >Run the Ethernet switch locally</mat-radio-button
+        >
+        <mat-radio-button
+          [disabled]="!isGns3VmAvailable"
+          class="radio-button"
+          value="2"
+          (click)="setServerType('gns3 vm')"
+          >Run the Ethernet switch on the GNS3 VM</mat-radio-button
+        >
+      </mat-radio-group>
 
-            <form [formGroup]="formGroup">
-                <mat-form-field class="form-field">
-                    <input formControlName="templateName" matInput type="text" placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input formControlName="numberOfPorts" matInput type="number" placeholder="Number of ports">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+      <form [formGroup]="formGroup">
+        <mat-form-field class="form-field">
+          <input formControlName="templateName" matInput type="text" placeholder="Template name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input formControlName="numberOfPorts" matInput type="number" placeholder="Number of ports" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.spec.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.spec.ts
index c11f2fe7..30677e16 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.spec.ts
@@ -21,97 +21,98 @@ import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet
 import { EthernetSwitchesAddTemplateComponent } from './ethernet-switches-add-template.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ComputeService } from '../../../../../services/compute.service';
-import {MockedComputeService} from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec';
+import { MockedComputeService } from '../../../../preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec';
 
 export class MockedBuiltInTemplatesService {
-    public addTemplate(server: Server, ethernetHubTemplate: EthernetSwitchTemplate) {
-        return of(ethernetHubTemplate);    
-    }
+  public addTemplate(server: Server, ethernetHubTemplate: EthernetSwitchTemplate) {
+    return of(ethernetHubTemplate);
+  }
 }
 
 describe('EthernetSwitchesAddTemplateComponent', () => {
-    let component: EthernetSwitchesAddTemplateComponent;
-    let fixture: ComponentFixture<EthernetSwitchesAddTemplateComponent>;
+  let component: EthernetSwitchesAddTemplateComponent;
+  let fixture: ComponentFixture<EthernetSwitchesAddTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let mockedComputeService = new MockedComputeService();
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/builtin/ethernet-switches', component: EthernetSwitchesAddTemplateComponent}])
-            ],
-            providers: [
-                {
-                    provide: ActivatedRoute,  useValue: activatedRoute
-                },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-                { provide: ToasterService, useValue: mockedToasterService},
-                { provide: ComputeService, useValue: mockedComputeService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                EthernetSwitchesAddTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let mockedComputeService = new MockedComputeService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetSwitchesAddTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/builtin/ethernet-switches', component: EthernetSwitchesAddTemplateComponent },
+        ]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: ComputeService, useValue: mockedComputeService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [EthernetSwitchesAddTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetSwitchesAddTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        component.templateName = "sample name";
-        component.server = {id: 1} as Server;
-        component.formGroup.controls['templateName'].setValue('template name');
-        component.formGroup.controls['numberOfPorts'].setValue('1');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    component.templateName = 'sample name';
+    component.server = { id: 1 } as Server;
+    component.formGroup.controls['templateName'].setValue('template name');
+    component.formGroup.controls['numberOfPorts'].setValue('1');
 
-        expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.formGroup.controls['numberOfPorts'].setValue('1');
-        component.server = {id: 1} as Server;
+    expect(mockedBuiltInTemplatesService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.formGroup.controls['numberOfPorts'].setValue('1');
+    component.server = { id: 1 } as Server;
 
-        expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    xit('should not call add template when number of ports is missing', () => {
-        spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.formGroup.controls['templateName'].setValue('template name');
-        component.server = {id: 1} as Server;
+    expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  xit('should not call add template when number of ports is missing', () => {
+    spyOn(mockedBuiltInTemplatesService, 'addTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.formGroup.controls['templateName'].setValue('template name');
+    component.server = { id: 1 } as Server;
 
-        expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedBuiltInTemplatesService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
index 9ea693c3..97f31a00 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -11,89 +11,90 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { ComputeService } from '../../../../../services/compute.service';
 import { Compute } from '../../../../../models/compute';
 
-
 @Component({
-    selector: 'app-ethernet-switches-add-template',
-    templateUrl: './ethernet-switches-add-template.component.html',
-    styleUrls: ['./ethernet-switches-add-template.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-switches-add-template',
+  templateUrl: './ethernet-switches-add-template.component.html',
+  styleUrls: ['./ethernet-switches-add-template.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetSwitchesAddTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    formGroup: FormGroup;
+  server: Server;
+  templateName: string = '';
+  formGroup: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private router: Router,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder,
-        private computeService: ComputeService
-    ) {
-        this.formGroup = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            numberOfPorts: new FormControl(8, Validators.required)
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private router: Router,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private formBuilder: FormBuilder,
+    private computeService: ComputeService
+  ) {
+    this.formGroup = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      numberOfPorts: new FormControl(8, Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
+    }
+  }
+
+  addTemplate() {
+    if (!this.formGroup.invalid) {
+      let ethernetSwitchTemplate: EthernetSwitchTemplate;
+
+      this.templateMocksService.getEthernetSwitchTemplate().subscribe((template: EthernetSwitchTemplate) => {
+        ethernetSwitchTemplate = template;
+      });
+
+      ethernetSwitchTemplate.template_id = uuid();
+      ethernetSwitchTemplate.name = this.formGroup.get('templateName').value;
+      ethernetSwitchTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
+      for (let i = 0; i < this.formGroup.get('numberOfPorts').value; i++) {
+        ethernetSwitchTemplate.ports_mapping.push({
+          ethertype: '',
+          name: `Ethernet${i}`,
+          port_number: i,
+          type: 'access',
+          vlan: 1,
         });
-    }
+      }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
+      this.builtInTemplatesService
+        .addTemplate(this.server, ethernetSwitchTemplate)
+        .subscribe((ethernetSwitchTemplate) => {
+          this.goBack();
         });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    addTemplate() {
-        if (!this.formGroup.invalid) {
-            let ethernetSwitchTemplate: EthernetSwitchTemplate;
-
-            this.templateMocksService.getEthernetSwitchTemplate().subscribe((template: EthernetSwitchTemplate) => {
-                ethernetSwitchTemplate = template;
-            });
-
-            ethernetSwitchTemplate.template_id = uuid();
-            ethernetSwitchTemplate.name = this.formGroup.get('templateName').value;
-            ethernetSwitchTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            for(let i=0; i<this.formGroup.get('numberOfPorts').value; i++){
-                ethernetSwitchTemplate.ports_mapping.push({
-                    ethertype: '',
-                    name: `Ethernet${i}`,
-                    port_number: i,
-                    type: 'access',
-                    vlan: 1
-                });
-            }
-
-            this.builtInTemplatesService.addTemplate(this.server, ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
-    }
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
index 8089383b..1de6293c 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html
@@ -1,75 +1,84 @@
-<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Ethernet switch configuration</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Ethernet switch configuration</h1>
     </div>
-    <div class="default-content" *ngIf="ethernetSwitchTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="ethernetSwitchTemplate.name" 
-                            formControlName="templateName"
-                            placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
-                            formControlName="defaultName"
-                            placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="ethernetSwitchTemplate.symbol" 
-                            formControlName="symbol"
-                            placeholder="Symbol">
-                    </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <mat-select 
-                            placeholder="Category" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="ethernetSwitchTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select 
-                            placeholder="Console type" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="ethernetSwitchTemplate.console_type">
-                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </form>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Port settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-            <app-ports #ports [ethernetPorts]="ethernetSwitchTemplate.ports_mapping"></app-ports>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="ethernetSwitchTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="ethernetSwitchTemplate.name"
+              formControlName="templateName"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="ethernetSwitchTemplate.default_name_format"
+              formControlName="defaultName"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="ethernetSwitchTemplate.symbol"
+              formControlName="symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <mat-select
+              placeholder="Category"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="ethernetSwitchTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              placeholder="Console type"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="ethernetSwitchTemplate.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Port settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-ports #ports [ethernetPorts]="ethernetSwitchTemplate.ports_mapping"></app-ports>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate" [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate"
+  [server]="server"
+  [symbol]="ethernetSwitchTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.spec.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.spec.ts
index 3c8162c7..ccc17bb0 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.spec.ts
@@ -24,99 +24,109 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 import { PortsComponent } from '../../../common/ports/ports.component';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({ports_mapping: []} as EthernetSwitchTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({ ports_mapping: [] } as EthernetSwitchTemplate);
+  }
 
-    public saveTemplate(server: Server, cloudTemplate: EthernetSwitchTemplate) {
-        return of(cloudTemplate);    
-    }
+  public saveTemplate(server: Server, cloudTemplate: EthernetSwitchTemplate) {
+    return of(cloudTemplate);
+  }
 }
 
 describe('EthernetSwitchesTemplateDetailsComponent', () => {
-    let component: EthernetSwitchesTemplateDetailsComponent;
-    let fixture: ComponentFixture<EthernetSwitchesTemplateDetailsComponent>;
+  let component: EthernetSwitchesTemplateDetailsComponent;
+  let fixture: ComponentFixture<EthernetSwitchesTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
-              { provide: ToasterService, useValue: mockedToasterService},
-              { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService }
-          ],
-          declarations: [
-                EthernetSwitchesTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetSwitchesTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: BuiltInTemplatesConfigurationService, useClass: BuiltInTemplatesConfigurationService },
+      ],
+      declarations: [EthernetSwitchesTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetSwitchesTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        component.portsComponent = {ethernetPorts: []} as PortsComponent;
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetSwitchTemplate = {ports_mapping: []} as EthernetSwitchTemplate;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    component.portsComponent = { ethernetPorts: [] } as PortsComponent;
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetSwitchTemplate = { ports_mapping: [] } as EthernetSwitchTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when template name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        component.inputForm.controls['templateName'].setValue('');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetSwitchTemplate = {ports_mapping: []} as EthernetSwitchTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when template name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    component.inputForm.controls['templateName'].setValue('');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetSwitchTemplate = { ports_mapping: [] } as EthernetSwitchTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when default name is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('');
-        component.inputForm.controls['symbol'].setValue('symbol');
-        component.ethernetSwitchTemplate = {ports_mapping: []} as EthernetSwitchTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when default name is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('');
+    component.inputForm.controls['symbol'].setValue('symbol');
+    component.ethernetSwitchTemplate = { ports_mapping: [] } as EthernetSwitchTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when symbol path is empty', () => {
-        spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['symbol'].setValue('');
-        component.ethernetSwitchTemplate = {ports_mapping: []} as EthernetSwitchTemplate;
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when symbol path is empty', () => {
+    spyOn(mockedBuiltInTemplatesService, 'saveTemplate').and.returnValue(of({} as EthernetSwitchTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['symbol'].setValue('');
+    component.ethernetSwitchTemplate = { ports_mapping: [] } as EthernetSwitchTemplate;
 
-        expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedBuiltInTemplatesService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
index 290da59f..65555a32 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } 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';
@@ -9,76 +9,79 @@ import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 import { PortsComponent } from '../../../common/ports/ports.component';
 
-
 @Component({
-    selector: 'app-ethernet-switches-template-details',
-    templateUrl: './ethernet-switches-template-details.component.html',
-    styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-switches-template-details',
+  templateUrl: './ethernet-switches-template-details.component.html',
+  styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
-    @ViewChild(PortsComponent) portsComponent: PortsComponent;
-    server: Server;
-    ethernetSwitchTemplate: EthernetSwitchTemplate;
-    inputForm: FormGroup;
-    isSymbolSelectionOpened: boolean = false;
-    categories = [];
-    consoleTypes: string[] = [];
+  @ViewChild(PortsComponent) portsComponent: PortsComponent;
+  server: Server;
+  ethernetSwitchTemplate: EthernetSwitchTemplate;
+  inputForm: FormGroup;
+  isSymbolSelectionOpened: boolean = false;
+  categories = [];
+  consoleTypes: string[] = [];
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
-        private router: Router
-    ){
-        this.inputForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+    private router: Router
+  ) {
+    this.inputForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.builtInTemplatesService
+        .getTemplate(this.server, template_id)
+        .subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
+          this.ethernetSwitchTemplate = ethernetSwitchTemplate;
+        });
+    });
+  }
+
+  getConfiguration() {
+    this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetSwitches();
+    this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForEthernetSwitches();
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+  }
+
+  onSave() {
+    if (this.inputForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.ethernetSwitchTemplate.ports_mapping = this.portsComponent.ethernetPorts;
+      this.builtInTemplatesService
+        .saveTemplate(this.server, this.ethernetSwitchTemplate)
+        .subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
+          this.toasterService.success('Changes saved');
         });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-            this.getConfiguration();
-            this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
-                this.ethernetSwitchTemplate = ethernetSwitchTemplate;
-            });
-        });
-    }
-
-    getConfiguration() {
-        this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetSwitches();
-        this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForEthernetSwitches();
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
-    }
-
-    onSave() {
-        if (this.inputForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.ethernetSwitchTemplate.ports_mapping = this.portsComponent.ethernetPorts;
-            this.builtInTemplatesService.saveTemplate(this.server, this.ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.ethernetSwitchTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.ethernetSwitchTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
index 9b59ddc5..73017e63 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Ethernet switches templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-switches/addtemplate" mat-raised-button color="primary">Add Ethernet switch template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Ethernet switches templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/builtin/ethernet-switches/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add Ethernet switch template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of ethernetSwitchesTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of ethernetSwitchesTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.spec.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.spec.ts
index f6a088ad..c05d3ab9 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.spec.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { EthernetSwitchesTemplatesComponent } from './ethernet-switches-template
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
 
 export class MockedBuiltInTemplatesService {
-    public getTemplates(server: Server) {
-        return of([{} as EthernetSwitchTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as EthernetSwitchTemplate]);
+  }
 }
 
 describe('EthernetSwitchesTemplatesComponent', () => {
-    let component: EthernetSwitchesTemplatesComponent;
-    let fixture: ComponentFixture<EthernetSwitchesTemplatesComponent>;
+  let component: EthernetSwitchesTemplatesComponent;
+  let fixture: ComponentFixture<EthernetSwitchesTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService }
-          ],
-          declarations: [
-              EthernetSwitchesTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedBuiltInTemplatesService = new MockedBuiltInTemplatesService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EthernetSwitchesTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: BuiltInTemplatesService, useValue: mockedBuiltInTemplatesService },
+      ],
+      declarations: [EthernetSwitchesTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EthernetSwitchesTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
index b29092b3..cf8fe249 100644
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
@@ -6,42 +6,45 @@ import { BuiltInTemplatesService } from '../../../../../services/built-in-templa
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
 
-
 @Component({
-    selector: 'app-ethernet-switches-templates',
-    templateUrl: './ethernet-switches-templates.component.html',
-    styleUrls: ['./ethernet-switches-templates.component.scss', '../../../preferences.component.scss']
+  selector: 'app-ethernet-switches-templates',
+  templateUrl: './ethernet-switches-templates.component.html',
+  styleUrls: ['./ethernet-switches-templates.component.scss', '../../../preferences.component.scss'],
 })
 export class EthernetSwitchesTemplatesComponent implements OnInit {
-    server: Server;
-    ethernetSwitchesTemplates: EthernetSwitchTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  ethernetSwitchesTemplates: EthernetSwitchTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private builtInTemplatesService: BuiltInTemplatesService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private builtInTemplatesService: BuiltInTemplatesService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetSwitchesTemplates: EthernetSwitchTemplate[]) => {
-            this.ethernetSwitchesTemplates = ethernetSwitchesTemplates.filter((elem) => elem.template_type === "ethernet_switch" && !elem.builtin);
-        });
-    }
-    
-    deleteTemplate(template: EthernetSwitchTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  getTemplates() {
+    this.builtInTemplatesService
+      .getTemplates(this.server)
+      .subscribe((ethernetSwitchesTemplates: EthernetSwitchTemplate[]) => {
+        this.ethernetSwitchesTemplates = ethernetSwitchesTemplates.filter(
+          (elem) => elem.template_type === 'ethernet_switch' && !elem.builtin
+        );
+      });
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  deleteTemplate(template: EthernetSwitchTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
+
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
index 1a782d13..7fecbe05 100644
--- a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
+++ b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
@@ -1,35 +1,35 @@
 <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="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="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)]="element.adapter_type">
-                <mat-option *ngFor="let type of networkTypes" [value]="type">
-                    {{type}}
-                </mat-option>
-            </mat-select>
-        </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)]="element.adapter_type">
+        <mat-option *ngFor="let type of networkTypes" [value]="type">
+          {{ type }}
+        </mat-option>
+      </mat-select>
+    </td>
+  </ng-container>
 
-    <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
-        <td mat-cell *matCellDef="let element">
-            <button mat-icon-button matTooltip="Delete adapter" matTooltipClass="custom-tooltip" (click)="delete(element)">
-                <mat-icon aria-label="Delete adapter">delete</mat-icon>
-            </button>
-        </td>
-    </ng-container>
-    
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef>Actions</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button matTooltip="Delete adapter" matTooltipClass="custom-tooltip" (click)="delete(element)">
+        <mat-icon aria-label="Delete adapter">delete</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
 <button mat-button class="form-field" (click)="onAdd()">Add</button>
diff --git a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts
index f9ad5452..a1d2aa25 100644
--- a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts
+++ b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts
@@ -1,28 +1,27 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 
-
 @Component({
-    selector: 'app-custom-adapters-table',
-    templateUrl: './custom-adapters-table.component.html',
-    styleUrls: ['../../preferences.component.scss']
+  selector: 'app-custom-adapters-table',
+  templateUrl: './custom-adapters-table.component.html',
+  styleUrls: ['../../preferences.component.scss'],
 })
 export class CustomAdaptersTableComponent {
-    @Input() networkTypes = [];
-    @Input() displayedColumns: string[] = []; 
-    @Input() adapters: CustomAdapter[] = [];
+  @Input() networkTypes = [];
+  @Input() displayedColumns: string[] = [];
+  @Input() adapters: CustomAdapter[] = [];
 
-    public numberOfAdapters: number;
+  public numberOfAdapters: number;
 
-    onAdd() {
-        let adapter: CustomAdapter = {
-            adapter_number: this.adapters.length,
-            adapter_type: this.networkTypes[0]
-        }
-        this.adapters = this.adapters.concat([adapter]);
-    }
+  onAdd() {
+    let adapter: CustomAdapter = {
+      adapter_number: this.adapters.length,
+      adapter_type: this.networkTypes[0],
+    };
+    this.adapters = this.adapters.concat([adapter]);
+  }
 
-    delete(adapter: CustomAdapter) {
-        this.adapters = this.adapters.filter(elem => elem!== adapter);
-    }
+  delete(adapter: CustomAdapter) {
+    this.adapters = this.adapters.filter((elem) => elem !== adapter);
+  }
 }
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
index 53e1855b..be5e47c5 100644
--- a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
@@ -1,21 +1,21 @@
 <div class="content" class="configurator">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Custom adapters configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Custom adapters configuration</h1>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <app-custom-adapters-table 
-                #customAdapters
-                [networkTypes]="networkTypes" 
-                [displayedColumns]="displayedColumns"
-                [adapters]="adapters"
-            ></app-custom-adapters-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 class="default-content">
+    <div class="container mat-elevation-z8">
+      <app-custom-adapters-table
+        #customAdapters
+        [networkTypes]="networkTypes"
+        [displayedColumns]="displayedColumns"
+        [adapters]="adapters"
+      ></app-custom-adapters-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.spec.ts b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.spec.ts
index 85edc7ee..f81b9248 100644
--- 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
@@ -11,43 +11,49 @@ import { CustomAdaptersComponent } from './custom-adapters.component';
 import { CustomAdaptersTableComponent } from '../custom-adapters-table/custom-adapters-table.component';
 
 describe('Custom adapters component', () => {
-    let component: CustomAdaptersComponent;
-    let fixture: ComponentFixture<CustomAdaptersComponent>;
+  let component: CustomAdaptersComponent;
+  let fixture: ComponentFixture<CustomAdaptersComponent>;
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-        imports:  [MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
-        declarations: [
-            CustomAdaptersComponent
-        ],
-        schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
-    
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CustomAdaptersComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-    
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [CustomAdaptersComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should emit event when apply clicked', () => {
-        spyOn(component.saveConfigurationEmitter, 'emit');
-        component.customAdapters = {adapters: []} as CustomAdaptersTableComponent;
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomAdaptersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-        component.configureCustomAdapters();
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        expect(component.saveConfigurationEmitter.emit).toHaveBeenCalled();
-    });
+  it('should emit event when apply clicked', () => {
+    spyOn(component.saveConfigurationEmitter, 'emit');
+    component.customAdapters = { adapters: [] } as CustomAdaptersTableComponent;
 
-    it('should emit event when cancel clicked', () => {
-        spyOn(component.closeConfiguratorEmitter, 'emit');
+    component.configureCustomAdapters();
 
-        component.cancelConfigureCustomAdapters();
+    expect(component.saveConfigurationEmitter.emit).toHaveBeenCalled();
+  });
 
-        expect(component.closeConfiguratorEmitter.emit).toHaveBeenCalled();
-    });
+  it('should emit event when cancel clicked', () => {
+    spyOn(component.closeConfiguratorEmitter, 'emit');
+
+    component.cancelConfigureCustomAdapters();
+
+    expect(component.closeConfiguratorEmitter.emit).toHaveBeenCalled();
+  });
 });
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
index 9eac1689..59b1045d 100644
--- a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
@@ -2,42 +2,41 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import { CustomAdaptersTableComponent } from '../custom-adapters-table/custom-adapters-table.component';
 
-
 @Component({
-    selector: 'app-custom-adapters',
-    templateUrl: './custom-adapters.component.html',
-    styleUrls: ['./custom-adapters.component.scss', '../../preferences.component.scss']
+  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[]>();
+  @Input() networkTypes = [];
+  @Input() displayedColumns: string[] = [];
+  @Output() closeConfiguratorEmitter = new EventEmitter<boolean>();
+  @Output() saveConfigurationEmitter = new EventEmitter<CustomAdapter[]>();
 
-    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;
+  @ViewChild('customAdapters') customAdapters: CustomAdaptersTableComponent;
 
-    public adapters: CustomAdapter[];
-    public numberOfAdapters: number;
+  public adapters: CustomAdapter[];
+  public numberOfAdapters: number;
 
-    constructor() {
-        console.log(this.networkTypes);
-    }
+  constructor() {
+    console.log(this.networkTypes);
+  }
 
-    cancelConfigureCustomAdapters(){
-        this.closeConfiguratorEmitter.emit(false);
-    }
+  cancelConfigureCustomAdapters() {
+    this.closeConfiguratorEmitter.emit(false);
+  }
 
-    configureCustomAdapters(){
-        this.adapters = [];
-        console.log(this.customAdapters);
-        
-        this.customAdapters.adapters.forEach(n => {
-            this.adapters.push({
-                adapter_number: n.adapter_number,
-                adapter_type: n.adapter_type
-            })
-        });
+  configureCustomAdapters() {
+    this.adapters = [];
+    console.log(this.customAdapters);
 
-        this.saveConfigurationEmitter.emit(this.adapters);
-    }
+    this.customAdapters.adapters.forEach((n) => {
+      this.adapters.push({
+        adapter_number: n.adapter_number,
+        adapter_type: n.adapter_type,
+      });
+    });
+
+    this.saveConfigurationEmitter.emit(this.adapters);
+  }
 }
diff --git a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.html b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.html
index 398d83de..9406945f 100644
--- a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.html
+++ b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.html
@@ -1,15 +1,13 @@
 <div class="dialogcontainer">
-    <h1 mat-dialog-title>Delete template</h1>
-    <div mat-dialog-content>Are you sure you want to delete template {{templateName}}?</div>
+  <h1 mat-dialog-title>Delete template</h1>
+  <div mat-dialog-content>Are you sure you want to delete template {{ templateName }}?</div>
 
-    <div class="spacer"></div>
+  <div class="spacer"></div>
 
-    <div mat-dialog-actions>
-      <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">
-        No
-      </button>
-      <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
-        Yes
-      </button>
-    </div>
+  <div mat-dialog-actions>
+    <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+    <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
+      Yes
+    </button>
+  </div>
 </div>
diff --git a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.scss b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.scss
index 9f3d3c71..fe8a2a82 100644
--- a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.scss
+++ b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.scss
@@ -1,9 +1,9 @@
 .dialogcontainer {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .spacer {
-    flex-grow: 1;
+  flex-grow: 1;
 }
diff --git a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts
index 011d2b67..3beacce1 100644
--- a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts
+++ b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts
@@ -1,29 +1,28 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-delete-confirmation-dialog',
-    templateUrl: './delete-confirmation-dialog.component.html',
-    styleUrls: ['./delete-confirmation-dialog.component.scss']
+  selector: 'app-delete-confirmation-dialog',
+  templateUrl: './delete-confirmation-dialog.component.html',
+  styleUrls: ['./delete-confirmation-dialog.component.scss'],
 })
 export class DeleteConfirmationDialogComponent implements OnInit {
-    templateName: string = '';
+  templateName: string = '';
 
-    constructor(
-        public dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: any
-    ) {
-        this.templateName = data['templateName'];
-    }
+  constructor(
+    public dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.templateName = data['templateName'];
+  }
 
-    ngOnInit() {}
+  ngOnInit() {}
 
-    onNoClick(): void {
-        this.dialogRef.close(false);
-    }
-    
-    onYesClick(): void {
-        this.dialogRef.close(true);
-    }
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
 }
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 20965394..ae5d3198 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
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { TemplateService } from '../../../../services/template.service';
 import { MatDialog } from '@angular/material/dialog';
 import { DeleteConfirmationDialogComponent } from '../delete-confirmation-dialog/delete-confirmation-dialog.component';
@@ -6,38 +6,38 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { Server } from '../../../../models/server';
 
 @Component({
-    selector: 'app-delete-template',
-    templateUrl: './delete-template.component.html',
-    styleUrls: ['./delete-template.component.scss']
+  selector: 'app-delete-template',
+  templateUrl: './delete-template.component.html',
+  styleUrls: ['./delete-template.component.scss'],
 })
 export class DeleteTemplateComponent {
-    @Input() server: Server;
-    @Output() deleteEvent = new EventEmitter<string>();
- 
-    constructor(
-        private templateService: TemplateService,
-        private dialog: MatDialog,
-        private toasterService: ToasterService
-    ) {}
+  @Input() server: Server;
+  @Output() deleteEvent = new EventEmitter<string>();
 
-    deleteItem(templateName, templateId) {
-        const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
-            width: '300px',
-            height: '250px',
-            data: {
-                templateName: templateName
-            },
-            autoFocus: false,
-            disableClose: true
+  constructor(
+    private templateService: TemplateService,
+    private dialog: MatDialog,
+    private toasterService: ToasterService
+  ) {}
+
+  deleteItem(templateName, templateId) {
+    const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {
+      width: '300px',
+      height: '250px',
+      data: {
+        templateName: templateName,
+      },
+      autoFocus: false,
+      disableClose: true,
+    });
+
+    dialogRef.afterClosed().subscribe((answer: boolean) => {
+      if (answer) {
+        this.templateService.deleteTemplate(this.server, templateId).subscribe((answer) => {
+          this.deleteEvent.emit(templateId);
+          this.toasterService.success(`Template ${templateName} deleted.`);
         });
-      
-        dialogRef.afterClosed().subscribe((answer: boolean) => {
-            if (answer) {
-                this.templateService.deleteTemplate(this.server, templateId).subscribe((answer) => {
-                    this.deleteEvent.emit(templateId);
-                    this.toasterService.success(`Template ${templateName} deleted.`);
-                });
-            }
-        });
-    }
+      }
+    });
+  }
 }
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
index 3d523072..28073ce9 100644
--- a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html
@@ -1,7 +1,7 @@
 <div class="default-content">
-    <mat-card class="matCard">
-        <h6 class="header">
-            {{emptyTemplatesListMessage}}
-        </h6>
-    </mat-card>
+  <mat-card class="matCard">
+    <h6 class="header">
+      {{ emptyTemplatesListMessage }}
+    </h6>
+  </mat-card>
 </div>
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
index f867b0c4..f28eabf5 100644
--- a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss
@@ -1,4 +1,4 @@
 .header {
-    text-align: center;
-    color: darkgray;
+  text-align: center;
+  color: darkgray;
 }
diff --git a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
index c8bec4d1..7a321184 100644
--- a/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
+++ b/src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts
@@ -1,18 +1,17 @@
-import { Component, Input } from "@angular/core";
-
+import { Component, Input } from '@angular/core';
 
 @Component({
-    selector: 'app-empty-templates-list',
-    templateUrl: './empty-templates-list.component.html',
-    styleUrls: ['./empty-templates-list.component.scss']
+  selector: 'app-empty-templates-list',
+  templateUrl: './empty-templates-list.component.html',
+  styleUrls: ['./empty-templates-list.component.scss'],
 })
 export class EmptyTemplatesListComponent {
-    @Input() textMessage: string;
-    emptyTemplatesListMessage: string = 'Empty templates list';
+  @Input() textMessage: string;
+  emptyTemplatesListMessage: string = 'Empty templates list';
 
-    constructor(){
-        if (this.textMessage) {
-            this.emptyTemplatesListMessage = this.textMessage;
-        }
+  constructor() {
+    if (this.textMessage) {
+      this.emptyTemplatesListMessage = this.textMessage;
     }
+  }
 }
diff --git a/src/app/components/preferences/common/ports/ports.component.html b/src/app/components/preferences/common/ports/ports.component.html
index e7b0a8ba..8caa33d3 100644
--- a/src/app/components/preferences/common/ports/ports.component.html
+++ b/src/app/components/preferences/common/ports/ports.component.html
@@ -1,66 +1,55 @@
 <table class="table" mat-table [dataSource]="ethernetPorts">
-    <ng-container matColumnDef="port_number">
-        <th mat-header-cell *matHeaderCellDef> Port number </th>
-        <td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
-    </ng-container>
+  <ng-container matColumnDef="port_number">
+    <th mat-header-cell *matHeaderCellDef>Port number</th>
+    <td mat-cell *matCellDef="let element">{{ element.port_number }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="vlan">
-        <th mat-header-cell *matHeaderCellDef> VLAN </th>
-        <td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
-    </ng-container>
+  <ng-container matColumnDef="vlan">
+    <th mat-header-cell *matHeaderCellDef>VLAN</th>
+    <td mat-cell *matCellDef="let element">{{ element.vlan }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
-        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
-    </ng-container>
+  <ng-container matColumnDef="type">
+    <th mat-header-cell *matHeaderCellDef>Type</th>
+    <td mat-cell *matCellDef="let element">{{ element.type }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="ethertype">
-        <th mat-header-cell *matHeaderCellDef> EtherType </th>
-        <td mat-cell *matCellDef="let element"> {{element.ethertype}} </td>
-    </ng-container>
+  <ng-container matColumnDef="ethertype">
+    <th mat-header-cell *matHeaderCellDef>EtherType</th>
+    <td mat-cell *matCellDef="let element">{{ element.ethertype }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
-        <td mat-cell *matCellDef="let element">
-            <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
-                <mat-icon aria-label="Delete port">delete</mat-icon>
-            </button>
-        </td>
-    </ng-container>
-    
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table><br/>
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef>Actions</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
+        <mat-icon aria-label="Delete port">delete</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
+<br />
 <mat-form-field class="form-field">
-    <input 
-        matInput type="number" 
-        [(ngModel)]="newPort.port_number" 
-        placeholder="Port">
+  <input matInput type="number" [(ngModel)]="newPort.port_number" placeholder="Port" />
 </mat-form-field>
 <mat-form-field class="form-field">
-    <input 
-        matInput type="number" 
-        [(ngModel)]="newPort.vlan" 
-        placeholder="VLAN">
+  <input matInput type="number" [(ngModel)]="newPort.vlan" placeholder="VLAN" />
 </mat-form-field>
 <mat-form-field class="select">
-    <mat-select 
-        placeholder="Type" 
-        [ngModelOptions]="{standalone: true}" 
-        [(ngModel)]="newPort.type">
-        <mat-option *ngFor="let type of portTypes" [value]="type">
-            {{type}}
-        </mat-option>
-    </mat-select>
+  <mat-select placeholder="Type" [ngModelOptions]="{ standalone: true }" [(ngModel)]="newPort.type">
+    <mat-option *ngFor="let type of portTypes" [value]="type">
+      {{ type }}
+    </mat-option>
+  </mat-select>
 </mat-form-field>
 <mat-form-field class="select">
-    <mat-select 
-        placeholder="EtherType" 
-        [ngModelOptions]="{standalone: true}" 
-        [(ngModel)]="newPort.ethertype">
-            <mat-option *ngFor="let type of etherTypes" [value]="type">
-                {{type}}
-            </mat-option>
-    </mat-select>
+  <mat-select placeholder="EtherType" [ngModelOptions]="{ standalone: true }" [(ngModel)]="newPort.ethertype">
+    <mat-option *ngFor="let type of etherTypes" [value]="type">
+      {{ type }}
+    </mat-option>
+  </mat-select>
 </mat-form-field>
 <button mat-button class="form-field" (click)="onAdd()">Add</button>
diff --git a/src/app/components/preferences/common/ports/ports.component.ts b/src/app/components/preferences/common/ports/ports.component.ts
index efc2d393..41bd0713 100644
--- a/src/app/components/preferences/common/ports/ports.component.ts
+++ b/src/app/components/preferences/common/ports/ports.component.ts
@@ -1,48 +1,45 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { PortsMappingEntity } from '../../../../models/ethernetHub/ports-mapping-enity';
 import { BuiltInTemplatesConfigurationService } from '../../../../services/built-in-templates-configuration.service';
 
-
 @Component({
-    selector: 'app-ports',
-    templateUrl: './ports.component.html',
-    styleUrls: ['../../preferences.component.scss']
+  selector: 'app-ports',
+  templateUrl: './ports.component.html',
+  styleUrls: ['../../preferences.component.scss'],
 })
 export class PortsComponent implements OnInit {
-    @Input() ethernetPorts: PortsMappingEntity[] = [];
-    newPort: PortsMappingEntity = {
-        name: '',
-        port_number: 0,
+  @Input() ethernetPorts: PortsMappingEntity[] = [];
+  newPort: PortsMappingEntity = {
+    name: '',
+    port_number: 0,
+  };
+
+  portTypes: string[] = [];
+  etherTypes: string[] = [];
+  displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype', 'action'];
+
+  constructor(private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService) {}
+
+  ngOnInit() {
+    this.getConfiguration();
+  }
+
+  getConfiguration() {
+    this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
+    this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
+  }
+
+  onAdd() {
+    this.ethernetPorts.push(this.newPort);
+
+    this.newPort = {
+      name: '',
+      port_number: 0,
     };
+  }
 
-    portTypes: string[] = [];
-    etherTypes: string[] = [];
-    displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype', 'action'];
-
-    constructor(
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
-    ) {}
-
-    ngOnInit() {
-        this.getConfiguration();
-    }
-
-    getConfiguration() {
-        this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
-        this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
-    }
-
-    onAdd() {
-        this.ethernetPorts.push(this.newPort);
-        
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
-    }
-
-    delete(port: PortsMappingEntity) {
-        this.ethernetPorts = this.ethernetPorts.filter(n => n !== port);
-    }
+  delete(port: PortsMappingEntity) {
+    this.ethernetPorts = this.ethernetPorts.filter((n) => n !== port);
+  }
 }
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
index 4bd37758..b727fa15 100644
--- a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
+++ b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.html
@@ -1,12 +1,12 @@
 <div class="content" class="configurator">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-button>Cancel</button>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Symbol selection</h1>
+      <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-button>Cancel</button>
+      <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
     </div>
+  </div>
+  <div class="default-content">
+    <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+  </div>
 </div>
diff --git a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts
index 0b01fc92..815dc7f7 100644
--- a/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts
+++ b/src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts
@@ -1,28 +1,27 @@
-import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Server } from '../../../../models/server';
 
-
 @Component({
-    selector: 'app-symbols-menu',
-    templateUrl: './symbols-menu.component.html',
-    styleUrls: ['./symbols-menu.component.scss', '../../preferences.component.scss']
+  selector: 'app-symbols-menu',
+  templateUrl: './symbols-menu.component.html',
+  styleUrls: ['./symbols-menu.component.scss', '../../preferences.component.scss'],
 })
 export class SymbolsMenuComponent {
-    @Input() server: Server;
-    @Input() symbol: string;
-    @Output() symbolChangedEmitter = new EventEmitter<string>();
-    
-    chosenSymbol: string = '';
+  @Input() server: Server;
+  @Input() symbol: string;
+  @Output() symbolChangedEmitter = new EventEmitter<string>();
 
-    symbolChanged(chosenSymbol: string) {
-        this.chosenSymbol = chosenSymbol;
-    }
+  chosenSymbol: string = '';
 
-    chooseSymbol() {
-        this.symbolChangedEmitter.emit(this.chosenSymbol);
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.chosenSymbol = chosenSymbol;
+  }
 
-    cancelChooseSymbol() {
-        this.symbolChangedEmitter.emit(this.symbol);
-    }
+  chooseSymbol() {
+    this.symbolChangedEmitter.emit(this.chosenSymbol);
+  }
+
+  cancelChooseSymbol() {
+    this.symbolChangedEmitter.emit(this.symbol);
+  }
 }
diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html
index 2b2e0cec..c9c11bd4 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.html
+++ b/src/app/components/preferences/common/symbols/symbols.component.html
@@ -1,32 +1,39 @@
 <div class="menu">
-    <mat-radio-group aria-label="Select an option" class="radio-selection">
-        <mat-radio-button value="1" (click)="setFilter('all')" checked>All symbols</mat-radio-button>
-        <mat-radio-button value="2" (click)="setFilter('builtin')">Built-in symbols</mat-radio-button>
-        <mat-radio-button value="3" (click)="setFilter('custom')">Custom symbols</mat-radio-button>
-    </mat-radio-group>
-    <input
-        type="file"
-        accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
-        class="non-visible"
-        #file
-        (change)="uploadSymbolFile($event)"/>
-    <button mat-button (click)="file.click()">
-        <mat-icon>add</mat-icon>
-        Add symbol
-    </button>
+  <mat-radio-group aria-label="Select an option" class="radio-selection">
+    <mat-radio-button value="1" (click)="setFilter('all')" checked>All symbols</mat-radio-button>
+    <mat-radio-button value="2" (click)="setFilter('builtin')">Built-in symbols</mat-radio-button>
+    <mat-radio-button value="3" (click)="setFilter('custom')">Custom symbols</mat-radio-button>
+  </mat-radio-group>
+  <input
+    type="file"
+    accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
+    class="non-visible"
+    #file
+    (change)="uploadSymbolFile($event)"
+  />
+  <button mat-button (click)="file.click()">
+    <mat-icon>add</mat-icon>
+    Add symbol
+  </button>
 </div>
 <form>
-    <mat-form-field class="example-full-width">
-        <input matInput
-            placeholder="Search by filename"
-            [(ngModel)]="searchText"
-            [ngModelOptions]="{standalone: true}">
-    </mat-form-field>
+  <mat-form-field class="example-full-width">
+    <input matInput placeholder="Search by filename" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" />
+  </mat-form-field>
 </form>
 <div class="wrapper">
-    <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
-        <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
-            <img lazyimg [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
-        </button>
-    </div>
+  <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
+    <button
+      [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }"
+      class="button"
+      (click)="setSelected(symbol.symbol_id)"
+    >
+      <img
+        lazyimg
+        [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }"
+        class="image"
+        [src]="getImageSourceForTemplate(symbol.symbol_id)"
+      />
+    </button>
+  </div>
 </div>
diff --git a/src/app/components/preferences/common/symbols/symbols.component.scss b/src/app/components/preferences/common/symbols/symbols.component.scss
index b149705f..608fc79d 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.scss
+++ b/src/app/components/preferences/common/symbols/symbols.component.scss
@@ -1,60 +1,60 @@
 .buttonWrapper {
-    width: 85px;
-    height: 85px;
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    margin-right: auto;
-    outline: none;
+  width: 85px;
+  height: 85px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  outline: none;
 }
 
 .menu {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .button {
-    background: border-box;
-    border-width: 0px;
-    outline: none;
+  background: border-box;
+  border-width: 0px;
+  outline: none;
 }
 
 .buttonSelected {
-    border-width: 3px;
-    background: #0097a7!important;
+  border-width: 3px;
+  background: #0097a7 !important;
 }
 
 .image {
-    width: 65px;
-    height: 65px;   
-    filter: invert(0);
-    --webkit-filter: invert(0)!important;
+  width: 65px;
+  height: 65px;
+  filter: invert(0);
+  --webkit-filter: invert(0) !important;
 }
 
 .imageSelected {
-    margin-left: 0px;
+  margin-left: 0px;
 }
 
 .wrapper {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: repeat(7, 1fr);
-    grid-row-gap: 3em;
-    grid-column-gap: 1em;
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(7, 1fr);
+  grid-row-gap: 3em;
+  grid-column-gap: 1em;
 }
 
 .radio-selection {
-    width: 90%;
+  width: 90%;
 }
 
 .mat-radio-button ~ .mat-radio-button {
-    margin-left: 16px;
+  margin-left: 16px;
 }
 
 .non-visible {
-    display: none;
+  display: none;
 }
 
 .example-full-width {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/preferences/common/symbols/symbols.component.spec.ts b/src/app/components/preferences/common/symbols/symbols.component.spec.ts
index 90e24452..284fac22 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.spec.ts
+++ b/src/app/components/preferences/common/symbols/symbols.component.spec.ts
@@ -14,52 +14,59 @@ import { HttpClientModule } from '@angular/common/http';
 import { SearchFilter } from '../../../../filters/searchFilter.pipe';
 
 export class MockedSymbolService {
-    public list() {
-      return of([]);
-    }
+  public list() {
+    return of([]);
+  }
 
-    public raw() {
-      return of('<svg></svg>')
-    }
+  public raw() {
+    return of('<svg></svg>');
+  }
 }
 
 describe('Symbols component', () => {
-    let component: SymbolsComponent;
-    let fixture: ComponentFixture<SymbolsComponent>;
-    let mockedSymbolsService = new MockedSymbolService;
+  let component: SymbolsComponent;
+  let fixture: ComponentFixture<SymbolsComponent>;
+  let mockedSymbolsService = new MockedSymbolService();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports:  [HttpClientModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: SymbolService,  useValue: mockedSymbolsService
-              }
-          ],
-          declarations: [
-              SymbolsComponent,
-              SearchFilter
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-      }));
-    
-      beforeEach(() => {
-        fixture = TestBed.createComponent(SymbolsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-      });
-    
-      it('should create', () => {
-          expect(component).toBeTruthy();
-      });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: SymbolService,
+          useValue: mockedSymbolsService,
+        },
+      ],
+      declarations: [SymbolsComponent, SearchFilter],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-      it('should emit event when symbol selected', () => {
-            spyOn(component.symbolChanged, 'emit');
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SymbolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-            component.setSelected('id');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-            expect(component.symbolChanged.emit).toHaveBeenCalled();
-            expect(component.isSelected).toBe('id');
-      });
+  it('should emit event when symbol selected', () => {
+    spyOn(component.symbolChanged, 'emit');
+
+    component.setSelected('id');
+
+    expect(component.symbolChanged.emit).toHaveBeenCalled();
+    expect(component.isSelected).toBe('id');
+  });
 });
diff --git a/src/app/components/preferences/common/symbols/symbols.component.ts b/src/app/components/preferences/common/symbols/symbols.component.ts
index 98728b33..e1ea0277 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.ts
+++ b/src/app/components/preferences/common/symbols/symbols.component.ts
@@ -1,83 +1,82 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { SymbolService } from '../../../../services/symbol.service';
 import { Server } from '../../../../models/server';
 import { Symbol } from '../../../../models/symbol';
 
-
 @Component({
-    selector: 'app-symbols',
-    templateUrl: './symbols.component.html',
-    styleUrls: ['./symbols.component.scss']
+  selector: 'app-symbols',
+  templateUrl: './symbols.component.html',
+  styleUrls: ['./symbols.component.scss'],
 })
 export class SymbolsComponent implements OnInit {
-    @Input() server: Server;
-    @Input() symbol: string;
-    @Output() symbolChanged = new EventEmitter<string>();
-    
-    symbols: Symbol[] = [];
-    filteredSymbols: Symbol[] = [];
-    isSelected: string = '';
-    searchText: string = '';
+  @Input() server: Server;
+  @Input() symbol: string;
+  @Output() symbolChanged = new EventEmitter<string>();
 
-    constructor(
-        private symbolService: SymbolService
-    ) {}
+  symbols: Symbol[] = [];
+  filteredSymbols: Symbol[] = [];
+  isSelected: string = '';
+  searchText: string = '';
 
-    ngOnInit() {
-        this.isSelected = this.symbol;
+  constructor(private symbolService: SymbolService) {}
+
+  ngOnInit() {
+    this.isSelected = this.symbol;
+    this.loadSymbols();
+  }
+
+  setFilter(filter: string) {
+    if (filter === 'all') {
+      this.filteredSymbols = this.symbols;
+    } else if (filter === 'builtin') {
+      this.filteredSymbols = this.symbols.filter((elem) => elem.builtin);
+    } else {
+      this.filteredSymbols = this.symbols.filter((elem) => !elem.builtin);
+    }
+  }
+
+  setSelected(symbol_id: string) {
+    this.isSelected = symbol_id;
+    this.symbolChanged.emit(this.isSelected);
+  }
+
+  loadSymbols() {
+    this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
+      this.symbols = symbols;
+      this.filteredSymbols = symbols;
+    });
+  }
+
+  public uploadSymbolFile(event) {
+    this.readSymbolFile(event.target);
+  }
+
+  private readSymbolFile(symbolInput) {
+    let file: File = symbolInput.files[0];
+    let fileName = symbolInput.files[0].name;
+    let fileReader: FileReader = new FileReader();
+    let imageToUpload = new Image();
+
+    fileReader.onloadend = () => {
+      let image = fileReader.result;
+      let svg = this.createSvgFileForImage(image, imageToUpload);
+      this.symbolService.add(this.server, fileName, svg).subscribe(() => {
         this.loadSymbols();
-    }
+      });
+    };
 
-    setFilter(filter: string) {
-        if (filter === 'all') {
-            this.filteredSymbols = this.symbols;
-        } else if (filter === 'builtin') {
-            this.filteredSymbols = this.symbols.filter(elem => elem.builtin);
-        } else {
-            this.filteredSymbols = this.symbols.filter(elem => !elem.builtin);
-        }
-    }
+    imageToUpload.onload = () => {
+      fileReader.readAsDataURL(file);
+    };
+    imageToUpload.src = window.URL.createObjectURL(file);
+  }
 
-    setSelected(symbol_id: string) {
-        this.isSelected = symbol_id;
-        this.symbolChanged.emit(this.isSelected);
-    }
+  private createSvgFileForImage(image: string | ArrayBuffer, imageToUpload: HTMLImageElement) {
+    return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
+                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`;
+  }
 
-    loadSymbols() {
-        this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
-            this.symbols = symbols;
-            this.filteredSymbols = symbols;
-        });
-    }
-
-    public uploadSymbolFile(event) {
-        this.readSymbolFile(event.target);
-    }
-
-    private readSymbolFile(symbolInput) {
-        let file: File = symbolInput.files[0];
-        let fileName = symbolInput.files[0].name;
-        let fileReader: FileReader = new FileReader();
-        let imageToUpload = new Image();
-    
-        fileReader.onloadend = () => {
-            let image = fileReader.result;
-            let svg = this.createSvgFileForImage(image, imageToUpload);
-            this.symbolService.add(this.server, fileName, svg).subscribe(() => {
-                this.loadSymbols();
-            });
-        }
-            
-        imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
-        imageToUpload.src = window.URL.createObjectURL(file);
-    }
-
-    private createSvgFileForImage(image: string|ArrayBuffer, imageToUpload: HTMLImageElement) {
-        return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
-                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`
-    }
-
-    getImageSourceForTemplate(symbol: string) {
-        return `${this.server.protocol}//${this.server.host}:${this.server.port}/v2/symbols/${symbol}/raw`;
-    }
+  getImageSourceForTemplate(symbol: string) {
+    return `${this.server.protocol}//${this.server.host}:${this.server.port}/v2/symbols/${symbol}/raw`;
+  }
 }
diff --git a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
index 4c319918..5778607a 100644
--- a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
+++ b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html
@@ -1,59 +1,47 @@
 <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
-    <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="rport">
-        <th mat-header-cell *matHeaderCellDef> Local port </th>
-        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
-    </ng-container>
+  <ng-container matColumnDef="rport">
+    <th mat-header-cell *matHeaderCellDef>Local port</th>
+    <td mat-cell *matCellDef="let element">{{ element.rport }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="rhost">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
-        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
-    </ng-container>
+  <ng-container matColumnDef="rhost">
+    <th mat-header-cell *matHeaderCellDef>Type</th>
+    <td mat-cell *matCellDef="let element">{{ element.rhost }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="lport">
-        <th mat-header-cell *matHeaderCellDef> Remote port </th>
-        <td mat-cell *matCellDef="let element"> {{element.lport}} </td>
-    </ng-container>
+  <ng-container matColumnDef="lport">
+    <th mat-header-cell *matHeaderCellDef>Remote port</th>
+    <td mat-cell *matCellDef="let element">{{ element.lport }}</td>
+  </ng-container>
 
-    <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
-        <td mat-cell *matCellDef="let element">
-            <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
-                <mat-icon aria-label="Delete port">delete</mat-icon>
-            </button>
-        </td>
-    </ng-container>
-    
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <ng-container matColumnDef="action">
+    <th mat-header-cell *matHeaderCellDef>Actions</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
+        <mat-icon aria-label="Delete port">delete</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
-<br *ngIf="dataSourceUdp.length"/>
+<br *ngIf="dataSourceUdp.length" />
 <mat-form-field class="form-field">
-    <input 
-        matInput type="text" 
-        [(ngModel)]="newPort.name" 
-        placeholder="Name">
+  <input matInput type="text" [(ngModel)]="newPort.name" placeholder="Name" />
 </mat-form-field>
 <mat-form-field class="form-field">
-    <input 
-        matInput type="number" 
-        [(ngModel)]="newPort.lport" 
-        placeholder="Local port">
+  <input matInput type="number" [(ngModel)]="newPort.lport" placeholder="Local port" />
 </mat-form-field>
 <mat-form-field class="form-field">
-    <input 
-        matInput type="text" 
-        [(ngModel)]="newPort.rhost" 
-        placeholder="Remote host">
+  <input matInput type="text" [(ngModel)]="newPort.rhost" placeholder="Remote host" />
 </mat-form-field>
 <mat-form-field class="form-field">
-    <input 
-        matInput type="number" 
-        [(ngModel)]="newPort.rport" 
-        placeholder="Remote port">
+  <input matInput type="number" [(ngModel)]="newPort.rport" placeholder="Remote port" />
 </mat-form-field>
 <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
diff --git a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.ts b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.ts
index 6052b28c..b7b313b7 100644
--- a/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.ts
+++ b/src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.ts
@@ -1,47 +1,44 @@
-import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { PortsMappingEntity } from '../../../../models/ethernetHub/ports-mapping-enity';
 import { BuiltInTemplatesConfigurationService } from '../../../../services/built-in-templates-configuration.service';
 
-
 @Component({
-    selector: 'app-udp-tunnels',
-    templateUrl: './udp-tunnels.component.html',
-    styleUrls: ['../../preferences.component.scss']
+  selector: 'app-udp-tunnels',
+  templateUrl: './udp-tunnels.component.html',
+  styleUrls: ['../../preferences.component.scss'],
 })
 export class UdpTunnelsComponent implements OnInit {
-    @Input() dataSourceUdp: PortsMappingEntity[] = [];
-    displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport', 'action'];
-    newPort: PortsMappingEntity = {
-        name: '',
-        port_number: 0,
+  @Input() dataSourceUdp: PortsMappingEntity[] = [];
+  displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport', 'action'];
+  newPort: PortsMappingEntity = {
+    name: '',
+    port_number: 0,
+  };
+  portTypes: string[] = [];
+  etherTypes: string[] = [];
+
+  constructor(private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService) {}
+
+  ngOnInit() {
+    this.getConfiguration();
+  }
+
+  getConfiguration() {
+    this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
+    this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
+  }
+
+  onAddUdpInterface() {
+    this.dataSourceUdp = this.dataSourceUdp.concat([this.newPort]);
+
+    this.newPort = {
+      name: '',
+      port_number: 0,
     };
-    portTypes: string[] = [];
-    etherTypes: string[] = [];
+  }
 
-    constructor(
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
-    ) {}
-
-    ngOnInit() {
-        this.getConfiguration();
-    }
-
-    getConfiguration() {
-        this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
-        this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
-    }
-
-    onAddUdpInterface() {
-        this.dataSourceUdp = this.dataSourceUdp.concat([this.newPort]);
-
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
-    }
-
-    delete(port: PortsMappingEntity) {
-        this.dataSourceUdp = this.dataSourceUdp.filter(n => n !== port);
-    }
+  delete(port: PortsMappingEntity) {
+    this.dataSourceUdp = this.dataSourceUdp.filter((n) => n !== port);
+  }
 }
diff --git a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
index b4cd79c2..6742275e 100644
--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.html
@@ -1,105 +1,109 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New Docker container template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New Docker container template</h1>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <mat-vertical-stepper [linear]="true">
-                <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
-                    <mat-radio-group class="radio-group">
-                        <!-- <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this Docker container on a remote computer</mat-radio-button> -->
-                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this Docker container locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this Docker container on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </mat-step>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-vertical-stepper [linear]="true">
+        <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
+          <mat-radio-group class="radio-group">
+            <!-- <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this Docker container on a remote computer</mat-radio-button> -->
+            <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+              >Run this Docker container locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Run this Docker container on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </mat-step>
 
-                <mat-step label="Docker Virtual Machine" [completed]="selectedImage || virtualMachineForm.get('filename').value">
-                    <form [formGroup]="virtualMachineForm">
-                        <mat-radio-group class="radio-group">
-                            <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked>Existing image</mat-radio-button>
-                            <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')">New image</mat-radio-button>
-                        </mat-radio-group>
-                        <mat-select
-                            *ngIf="!newImageSelected"
-                            placeholder="Image list"
-                            [ngModelOptions]="{standalone: true}"
-                            [(ngModel)]="selectedImage">
-                            <mat-option *ngFor="let image of dockerImages" [value]="image">
-                                {{image.image}}
-                            </mat-option>
-                        </mat-select>
-                        <div *ngIf="newImageSelected">
-                            <mat-form-field class="form-field">
-                                <input
-                                    matInput
-                                    class="filename"
-                                    type="text"
-                                    formControlName="filename"
-                                    placeholder="Image name"/>
-                            </mat-form-field>
-                        </div>
-                    </form>
-                </mat-step>
+        <mat-step
+          label="Docker Virtual Machine"
+          [completed]="selectedImage || virtualMachineForm.get('filename').value"
+        >
+          <form [formGroup]="virtualMachineForm">
+            <mat-radio-group class="radio-group">
+              <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked
+                >Existing image</mat-radio-button
+              >
+              <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')"
+                >New image</mat-radio-button
+              >
+            </mat-radio-group>
+            <mat-select
+              *ngIf="!newImageSelected"
+              placeholder="Image list"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="selectedImage"
+            >
+              <mat-option *ngFor="let image of dockerImages" [value]="image">
+                {{ image.image }}
+              </mat-option>
+            </mat-select>
+            <div *ngIf="newImageSelected">
+              <mat-form-field class="form-field">
+                <input matInput class="filename" type="text" formControlName="filename" placeholder="Image name" />
+              </mat-form-field>
+            </div>
+          </form>
+        </mat-step>
 
-                <mat-step label="Container name" [completed]="containerNameForm.get('templateName').value">
-                    <form [formGroup]="containerNameForm">
-                        <mat-form-field class="form-field">
-                            <input
-                                matInput
-                                class="templatename"
-                                type="text"
-                                formControlName="templateName"
-                                placeholder="Container name"/>
-                        </mat-form-field>
-                    </form>
-                </mat-step>
+        <mat-step label="Container name" [completed]="containerNameForm.get('templateName').value">
+          <form [formGroup]="containerNameForm">
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                class="templatename"
+                type="text"
+                formControlName="templateName"
+                placeholder="Container name"
+              />
+            </mat-form-field>
+          </form>
+        </mat-step>
 
-                <mat-step label="Network adapters" [completed]="networkAdaptersForm.get('adapters').value">
-                    <form [formGroup]="networkAdaptersForm">
-                        <mat-form-field class="form-field">
-                            <input
-                                matInput
-                                class="networkadapter"
-                                type="number"
-                                formControlName="adapters"
-                                placeholder="Adapters"/>
-                        </mat-form-field>
-                    </form>
-                </mat-step>
+        <mat-step label="Network adapters" [completed]="networkAdaptersForm.get('adapters').value">
+          <form [formGroup]="networkAdaptersForm">
+            <mat-form-field class="form-field">
+              <input matInput class="networkadapter" type="number" formControlName="adapters" placeholder="Adapters" />
+            </mat-form-field>
+          </form>
+        </mat-step>
 
-                <mat-step label="Start command" [completed]="dockerTemplate.start_command">
-                    <mat-form-field class="form-field">
-                        <input
-                            matInput
-                            type="text"
-                            [(ngModel)]="dockerTemplate.start_command"
-                            placeholder="Start command"/>
-                    </mat-form-field>
-                </mat-step>
+        <mat-step label="Start command" [completed]="dockerTemplate.start_command">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="dockerTemplate.start_command" placeholder="Start command" />
+          </mat-form-field>
+        </mat-step>
 
-                <mat-step label="Console type" [completed]="dockerTemplate.console_type">
-                    <mat-select
-                        placeholder="Console type"
-                        [ngModelOptions]="{standalone: true}"
-                        [(ngModel)]="dockerTemplate.console_type">
-                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-step>
+        <mat-step label="Console type" [completed]="dockerTemplate.console_type">
+          <mat-select
+            placeholder="Console type"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="dockerTemplate.console_type"
+          >
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-step>
 
-                <mat-step label="Environment">
-                    <mat-form-field class="form-field">
-                        <textarea matInput type="text" [(ngModel)]="dockerTemplate.environment"></textarea>
-                    </mat-form-field>
-                </mat-step>
-            </mat-vertical-stepper>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button class="add-button" color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+        <mat-step label="Environment">
+          <mat-form-field class="form-field">
+            <textarea matInput type="text" [(ngModel)]="dockerTemplate.environment"></textarea>
+          </mat-form-field>
+        </mat-step>
+      </mat-vertical-stepper>
     </div>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button class="add-button" color="primary" (click)="addTemplate()">Add template</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts
index 1f206fce..e6a29c6f 100644
--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts
@@ -33,182 +33,171 @@ import { StepperOrientation, STEPPER_GLOBAL_OPTIONS, STEP_STATE, CdkStep } from
 import { By } from '@angular/platform-browser';
 
 export class MockedDockerService {
-    public addTemplate(server: Server, dockerTemplate: DockerTemplate) {
-        return of(dockerTemplate);
-    }
+  public addTemplate(server: Server, dockerTemplate: DockerTemplate) {
+    return of(dockerTemplate);
+  }
 }
 
 //Tests disabled due to instability
 xdescribe('AddDockerTemplateComponent', () => {
-    let component: AddDockerTemplateComponent;
-    let fixture: ComponentFixture<AddDockerTemplateComponent>;
+  let component: AddDockerTemplateComponent;
+  let fixture: ComponentFixture<AddDockerTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedDockerService = new MockedDockerService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                MatStepperModule,
-                MatAutocompleteModule,
-                MatCommonModule,
-                MatRadioModule, 
-                FormsModule, 
-                MatTableModule, 
-                MatAutocompleteModule, 
-                MatFormFieldModule, 
-                MatInputModule, 
-                ReactiveFormsModule, 
-                MatSelectModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/docker/templates', component: AddDockerTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: DockerService, useValue: mockedDockerService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService },
-                { provide: DockerConfigurationService, useClass: DockerConfigurationService },
-                { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true },
-            ],
-            declarations: [
-                AddDockerTemplateComponent
-            ]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedDockerService = new MockedDockerService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddDockerTemplateComponent);
-        component = fixture.componentInstance;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatStepperModule,
+        MatAutocompleteModule,
+        MatCommonModule,
+        MatRadioModule,
+        FormsModule,
+        MatTableModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/docker/templates', component: AddDockerTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: DockerService, useValue: mockedDockerService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+        { provide: DockerConfigurationService, useClass: DockerConfigurationService },
+        { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true },
+      ],
+      declarations: [AddDockerTemplateComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDockerTemplateComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('should open first step at start', async(() => {
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      let stepperComponent = fixture.debugElement.query(By.css('mat-vertical-stepper')).componentInstance;
+
+      expect(stepperComponent.selectedIndex).toBe(0);
     });
+  }));
 
-    afterEach(() => {
-        fixture.destroy();
+  it('should display correct label at start', async(() => {
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+
+      expect(selectedLabel.textContent).toMatch('Server type');
     });
+  }));
 
-    it('should open first step at start', async(() => {
+  it('should not call add template when required fields are empty', async(() => {
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      let addButton = fixture.debugElement.nativeElement.querySelector('.add-button');
+      spyOn(mockedDockerService, 'addTemplate').and.returnValue(of({} as DockerTemplate));
+
+      addButton.click();
+
+      expect(component.virtualMachineForm.invalid).toBe(true);
+      expect(component.containerNameForm.invalid).toBe(true);
+      expect(component.networkAdaptersForm.invalid).toBe(true);
+
+      expect(mockedDockerService.addTemplate).not.toHaveBeenCalled();
+    });
+  }));
+
+  it('should call add template when required fields are filled', async(() => {
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      let stepperComponent = fixture.debugElement.query(By.css('mat-vertical-stepper')).componentInstance;
+      stepperComponent.selectedIndex = 1;
+      component.newImageSelected = true;
+
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+
+        expect(selectedLabel.textContent).toMatch('Docker Virtual Machine');
+
+        let filenameInput = fixture.debugElement.nativeElement.querySelector('.filename');
+        filenameInput.value = 'sample filename';
+        filenameInput.dispatchEvent(new Event('input'));
         fixture.detectChanges();
         fixture.whenStable().then(() => {
-            let stepperComponent = fixture.debugElement
-                .query(By.css('mat-vertical-stepper')).componentInstance;
+          expect(component.dockerTemplate.image).toBe('sample filename');
 
-            expect(stepperComponent.selectedIndex).toBe(0);
-        });   
-    }));
+          expect(component.virtualMachineForm.invalid).toBe(false);
+          expect(component.containerNameForm.invalid).toBe(true);
 
-    it('should display correct label at start', async(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            let selectedLabel = fixture.nativeElement
-                .querySelector('[aria-selected="true"]');
+          stepperComponent.selectedIndex = 2;
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
 
-            expect(selectedLabel.textContent).toMatch('Server type');
-        });  
-    }));
-
-    it('should not call add template when required fields are empty', async(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            let addButton = fixture.debugElement.nativeElement
-                .querySelector('.add-button');
-            spyOn(mockedDockerService, 'addTemplate').and.returnValue(of({} as DockerTemplate));
-            
-            addButton.click();
-
-            expect(component.virtualMachineForm.invalid).toBe(true);
-            expect(component.containerNameForm.invalid).toBe(true);
-            expect(component.networkAdaptersForm.invalid).toBe(true);
-                                    
-            expect(mockedDockerService.addTemplate).not.toHaveBeenCalled();
-        });  
-    }));
-
-    it('should call add template when required fields are filled', async(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            let stepperComponent = fixture.debugElement
-                .query(By.css('mat-vertical-stepper')).componentInstance;
-            stepperComponent.selectedIndex = 1;
-            component.newImageSelected = true;
+            expect(selectedLabel.textContent).toMatch('Container name');
 
+            let templatenameInput = fixture.debugElement.nativeElement.querySelector('.templatename');
+            templatenameInput.value = 'sample templatename';
+            templatenameInput.dispatchEvent(new Event('input'));
             fixture.detectChanges();
             fixture.whenStable().then(() => {
-                let selectedLabel = fixture.nativeElement
-                    .querySelector('[aria-selected="true"]');
+              expect(component.dockerTemplate.name).toBe('sample templatename');
 
-                expect(selectedLabel.textContent).toMatch('Docker Virtual Machine');
+              expect(component.virtualMachineForm.invalid).toBe(false);
+              expect(component.containerNameForm.invalid).toBe(false);
 
-                let filenameInput = fixture.debugElement.nativeElement
-                    .querySelector('.filename');
-                filenameInput.value = 'sample filename';
-                filenameInput.dispatchEvent(new Event('input'));
+              stepperComponent.selectedIndex = 3;
+              fixture.detectChanges();
+              fixture.whenStable().then(() => {
+                selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]');
+
+                expect(selectedLabel.textContent).toMatch('Network adapters');
+
+                let networkadapterInput = fixture.debugElement.nativeElement.querySelector('.networkadapter');
+                networkadapterInput.value = 2;
+                networkadapterInput.dispatchEvent(new Event('input'));
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
-                    expect(component.dockerTemplate.image).toBe('sample filename');
+                  expect(component.dockerTemplate.adapters).toBe(2);
 
-                    expect(component.virtualMachineForm.invalid).toBe(false);
-                    expect(component.containerNameForm.invalid).toBe(true);                   
+                  expect(component.virtualMachineForm.invalid).toBe(false);
+                  expect(component.containerNameForm.invalid).toBe(false);
+                  expect(component.networkAdaptersForm.invalid).toBe(false);
 
-                    stepperComponent.selectedIndex = 2;
-                    fixture.detectChanges();
-                    fixture.whenStable().then(() => {
-                        selectedLabel = fixture.nativeElement
-                            .querySelector('[aria-selected="true"]');
+                  let addButton = fixture.debugElement.nativeElement.querySelector('.add-button');
+                  spyOn(mockedDockerService, 'addTemplate').and.returnValue(of({} as DockerTemplate));
 
-                        expect(selectedLabel.textContent).toMatch('Container name');
+                  addButton.click();
 
-                        let templatenameInput = fixture.debugElement.nativeElement
-                            .querySelector('.templatename');
-                        templatenameInput.value = 'sample templatename';
-                        templatenameInput.dispatchEvent(new Event('input'));
-                        fixture.detectChanges();
-                        fixture.whenStable().then(() => {
-                            expect(component.dockerTemplate.name).toBe('sample templatename');
-
-                            expect(component.virtualMachineForm.invalid).toBe(false);
-                            expect(component.containerNameForm.invalid).toBe(false);
-
-                            stepperComponent.selectedIndex = 3;
-                            fixture.detectChanges();
-                            fixture.whenStable().then(() => {
-                                selectedLabel = fixture.nativeElement
-                                    .querySelector('[aria-selected="true"]');
-
-                                expect(selectedLabel.textContent).toMatch('Network adapters');
-
-                                let networkadapterInput = fixture.debugElement.nativeElement
-                                    .querySelector('.networkadapter');
-                                networkadapterInput.value = 2;
-                                networkadapterInput.dispatchEvent(new Event('input'));
-                                fixture.detectChanges();
-                                fixture.whenStable().then(() => {
-                                    expect(component.dockerTemplate.adapters).toBe(2);
-
-                                    expect(component.virtualMachineForm.invalid).toBe(false);
-                                    expect(component.containerNameForm.invalid).toBe(false);
-                                    expect(component.networkAdaptersForm.invalid).toBe(false);
-
-                                    let addButton = fixture.debugElement.nativeElement
-                                        .querySelector('.add-button');
-                                    spyOn(mockedDockerService, 'addTemplate').and.returnValue(of({} as DockerTemplate));
-                                    
-                                    addButton.click();
-
-                                    expect(mockedDockerService.addTemplate).toHaveBeenCalled();
-                                });
-                            });
-                        });
-                    });
+                  expect(mockedDockerService.addTemplate).toHaveBeenCalled();
                 });
+              });
             });
-        }); 
-    }));
+          });
+        });
+      });
+    });
+  }));
 });
diff --git a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts
index daad9e05..0d555d2b 100644
--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -13,113 +13,116 @@ import { DockerImage } from '../../../../models/docker/docker-image';
 import { ComputeService } from '../../../../services/compute.service';
 import { Compute } from '../../../../models/compute';
 
-
 @Component({
-    selector: 'app-add-docker-template',
-    templateUrl: './add-docker-template.component.html',
-    styleUrls: ['./add-docker-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-docker-template',
+  templateUrl: './add-docker-template.component.html',
+  styleUrls: ['./add-docker-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddDockerTemplateComponent implements OnInit {
-    server: Server;
-    dockerTemplate: DockerTemplate;
-    consoleTypes: string[] = [];
-    isRemoteComputerChosen: boolean = false;
-    dockerImages: DockerImage[] = [];
-    selectedImage: DockerImage;
-    newImageSelected: boolean = false;
+  server: Server;
+  dockerTemplate: DockerTemplate;
+  consoleTypes: string[] = [];
+  isRemoteComputerChosen: boolean = false;
+  dockerImages: DockerImage[] = [];
+  selectedImage: DockerImage;
+  newImageSelected: boolean = false;
 
-    virtualMachineForm: FormGroup;
-    containerNameForm: FormGroup;
-    networkAdaptersForm: FormGroup;
+  virtualMachineForm: FormGroup;
+  containerNameForm: FormGroup;
+  networkAdaptersForm: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private dockerService: DockerService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder,
-        private templateMocksService: TemplateMocksService,
-        private configurationService: DockerConfigurationService,
-        private computeService: ComputeService
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private dockerService: DockerService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private templateMocksService: TemplateMocksService,
+    private configurationService: DockerConfigurationService,
+    private computeService: ComputeService
+  ) {
+    this.dockerTemplate = new DockerTemplate();
+
+    this.virtualMachineForm = this.formBuilder.group({
+      filename: new FormControl(null, Validators.required),
+    });
+
+    this.containerNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, Validators.required),
+    });
+
+    this.networkAdaptersForm = this.formBuilder.group({
+      adapters: new FormControl('1', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.consoleTypes = this.configurationService.getConsoleTypes();
+
+      this.templateMocksService.getDockerTemplate().subscribe((dockerTemplate: DockerTemplate) => {
+        this.dockerTemplate = dockerTemplate;
+      });
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+
+      this.dockerService.getImages(server).subscribe((images) => {
+        this.dockerImages = images;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
+    }
+  }
+
+  setDiskImage(value: string) {
+    this.newImageSelected = value === 'newImage';
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
+  }
+
+  addTemplate() {
+    if (
+      (!this.virtualMachineForm.invalid || (!this.newImageSelected && this.selectedImage)) &&
+      !this.containerNameForm.invalid &&
+      !this.networkAdaptersForm.invalid
     ) {
-        this.dockerTemplate = new DockerTemplate();
+      this.dockerTemplate.template_id = uuid();
 
-        this.virtualMachineForm = this.formBuilder.group({
-            filename: new FormControl(null, Validators.required)
-        });
+      if (this.newImageSelected) {
+        this.dockerTemplate.image = this.virtualMachineForm.get('filename').value;
+      } else {
+        this.dockerTemplate.image = this.selectedImage.image;
+      }
 
-        this.containerNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, Validators.required)
-        });
+      this.dockerTemplate.name = this.containerNameForm.get('templateName').value;
+      this.dockerTemplate.adapters = +this.networkAdaptersForm.get('adapters').value;
+      this.dockerTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
-        this.networkAdaptersForm = this.formBuilder.group({
-            adapters: new FormControl('1', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.consoleTypes = this.configurationService.getConsoleTypes();
-
-            this.templateMocksService.getDockerTemplate().subscribe((dockerTemplate: DockerTemplate) => {
-                this.dockerTemplate = dockerTemplate;
-            })
-
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-
-            this.dockerService.getImages(server).subscribe((images) => {
-                this.dockerImages = images;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    setDiskImage(value: string) {
-        this.newImageSelected = value === "newImage";
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
-    }
-
-    addTemplate() {
-        if ((!this.virtualMachineForm.invalid || (!this.newImageSelected && this.selectedImage)) && !this.containerNameForm.invalid && !this.networkAdaptersForm.invalid) {
-            this.dockerTemplate.template_id = uuid();
-
-            if (this.newImageSelected) {
-                this.dockerTemplate.image = this.virtualMachineForm.get('filename').value;
-            } else {
-                this.dockerTemplate.image = this.selectedImage.image;
-            }
-
-            this.dockerTemplate.name = this.containerNameForm.get('templateName').value;
-            this.dockerTemplate.adapters = +this.networkAdaptersForm.get('adapters').value;
-            this.dockerTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            this.dockerService.addTemplate(this.server, this.dockerTemplate).subscribe((template: DockerTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+      this.dockerService.addTemplate(this.server, this.dockerTemplate).subscribe((template: DockerTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html b/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html
index 6cea160e..3b2f0f93 100644
--- a/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html
+++ b/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.html
@@ -1,24 +1,20 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Copy Docker container template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Copy Docker container template</h1>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <form [formGroup]="templateNameForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="templateName" 
-                        placeholder="Name"
-                        formControlName="templateName"/>
-                </mat-form-field>
-            </form>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <form [formGroup]="templateNameForm">
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="templateName" placeholder="Name" formControlName="templateName" />
+        </mat-form-field>
+      </form>
     </div>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts b/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts
index e2e32b84..104bd4e8 100644
--- a/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts
+++ b/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -8,59 +8,57 @@ import { DockerTemplate } from '../../../../models/templates/docker-template';
 import { DockerService } from '../../../../services/docker.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-copy-docker-template',
-    templateUrl: './copy-docker-template.component.html',
-    styleUrls: ['./copy-docker-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-copy-docker-template',
+  templateUrl: './copy-docker-template.component.html',
+  styleUrls: ['./copy-docker-template.component.scss', '../../preferences.component.scss'],
 })
 export class CopyDockerTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    dockerTemplate: DockerTemplate;
-    templateNameForm: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private dockerService: DockerService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.dockerService.getTemplate(this.server, template_id).subscribe((dockerTemplate: DockerTemplate) => {
-                this.dockerTemplate = dockerTemplate;
-                this.templateName = `Copy of ${this.dockerTemplate.name}`;
-            })
-
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid) {
-            this.dockerTemplate.template_id = uuid();
-            this.dockerTemplate.name = this.templateName;
-
-            this.dockerService.addTemplate(this.server, this.dockerTemplate).subscribe((template: DockerTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  server: Server;
+  templateName: string = '';
+  dockerTemplate: DockerTemplate;
+  templateNameForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private dockerService: DockerService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.dockerService.getTemplate(this.server, template_id).subscribe((dockerTemplate: DockerTemplate) => {
+        this.dockerTemplate = dockerTemplate;
+        this.templateName = `Copy of ${this.dockerTemplate.name}`;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.templateNameForm.invalid) {
+      this.dockerTemplate.template_id = uuid();
+      this.dockerTemplate.name = this.templateName;
+
+      this.dockerService.addTemplate(this.server, this.dockerTemplate).subscribe((template: DockerTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.html b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.html
index d603fb36..e36dccf0 100644
--- a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.html
+++ b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.html
@@ -1,96 +1,149 @@
-<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Docker image configuration</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Docker image configuration</h1>
     </div>
-    <div class="default-content" *ngIf="dockerTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input formControlName="templateName" matInput type="text" [(ngModel)]="dockerTemplate.name" placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input formControlName="defaultName" matInput type="text" [(ngModel)]="dockerTemplate.default_name_format" placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}"  placeholder="Category" [(ngModel)]="dockerTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input formControlName="symbol" matInput type="text" [(ngModel)]="dockerTemplate.symbol" placeholder="Symbol">
-                    </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="dockerTemplate.start_command" placeholder="Start command">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input formControlName="adapter" matInput type="number" [(ngModel)]="dockerTemplate.adapters" placeholder="Adapters">
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="dockerTemplate.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="dockerTemplate.console_auto_start">
-                        Auto start console
-                    </mat-checkbox>
-                    <mat-form-field class="select">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="VNC console resolution" [(ngModel)]="dockerTemplate.console_resolution">
-                            <mat-option *ngFor="let resolution of consoleResolutions" [value]="resolution">
-                                {{resolution}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="number" [(ngModel)]="dockerTemplate.console_http_port" placeholder="HTTP port in the container">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="dockerTemplate.console_http_path" placeholder="HTTP path">
-                    </mat-form-field>
-                </form>
-                <h6>Environment</h6>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="dockerTemplate.environment"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Advanced
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <h6>Extra hosts</h6>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="dockerTemplate.extra_hosts"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="dockerTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="dockerTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              formControlName="templateName"
+              matInput
+              type="text"
+              [(ngModel)]="dockerTemplate.name"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              formControlName="defaultName"
+              matInput
+              type="text"
+              [(ngModel)]="dockerTemplate.default_name_format"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Category"
+              [(ngModel)]="dockerTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              formControlName="symbol"
+              matInput
+              type="text"
+              [(ngModel)]="dockerTemplate.symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="dockerTemplate.start_command"
+              placeholder="Start command"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              formControlName="adapter"
+              matInput
+              type="number"
+              [(ngModel)]="dockerTemplate.adapters"
+              placeholder="Adapters"
+            />
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Console type"
+              [(ngModel)]="dockerTemplate.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="dockerTemplate.console_auto_start">
+            Auto start console
+          </mat-checkbox>
+          <mat-form-field class="select">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="VNC console resolution"
+              [(ngModel)]="dockerTemplate.console_resolution"
+            >
+              <mat-option *ngFor="let resolution of consoleResolutions" [value]="resolution">
+                {{ resolution }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="number"
+              [(ngModel)]="dockerTemplate.console_http_port"
+              placeholder="HTTP port in the container"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="text"
+              [(ngModel)]="dockerTemplate.console_http_path"
+              placeholder="HTTP path"
+            />
+          </mat-form-field>
+        </form>
+        <h6>Environment</h6>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="dockerTemplate.environment"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Advanced </mat-panel-title>
+        </mat-expansion-panel-header>
+        <h6>Extra hosts</h6>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="dockerTemplate.extra_hosts"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="dockerTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && dockerTemplate" [server]="server" [symbol]="dockerTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && dockerTemplate"
+  [server]="server"
+  [symbol]="dockerTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.spec.ts b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.spec.ts
index 4b55dc92..7223c5b3 100644
--- a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.spec.ts
+++ b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.spec.ts
@@ -22,62 +22,71 @@ import { DockerService } from '../../../../services/docker.service';
 import { DockerConfigurationService } from '../../../../services/docker-configuration.service';
 
 export class MockedDockerService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as DockerTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as DockerTemplate);
+  }
 
-    public saveTemplate(server: Server, dockerTemplate: DockerTemplate) {
-        return of(dockerTemplate);    
-    }
+  public saveTemplate(server: Server, dockerTemplate: DockerTemplate) {
+    return of(dockerTemplate);
+  }
 }
 
 describe('DockerTemplateDetailsComponent', () => {
-    let component: DockerTemplateDetailsComponent;
-    let fixture: ComponentFixture<DockerTemplateDetailsComponent>;
+  let component: DockerTemplateDetailsComponent;
+  let fixture: ComponentFixture<DockerTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedDockerService = new MockedDockerService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: DockerService, useValue: mockedDockerService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: DockerConfigurationService, useClass: DockerConfigurationService }
-          ],
-          declarations: [
-              DockerTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedDockerService = new MockedDockerService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DockerTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: DockerService, useValue: mockedDockerService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: DockerConfigurationService, useClass: DockerConfigurationService },
+      ],
+      declarations: [DockerTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DockerTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedDockerService, 'saveTemplate').and.returnValue(of({} as DockerTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['adapter'].setValue(1);
-        component.generalSettingsForm.controls['symbol'].setValue('symbol path');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedDockerService, 'saveTemplate').and.returnValue(of({} as DockerTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['adapter'].setValue(1);
+    component.generalSettingsForm.controls['symbol'].setValue('symbol path');
 
-        expect(mockedDockerService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedDockerService.saveTemplate).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts
index 18ffaa61..a16b2746 100644
--- a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts
+++ b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -9,81 +9,80 @@ import { DockerService } from '../../../../services/docker.service';
 import { DockerConfigurationService } from '../../../../services/docker-configuration.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-docker-template-details',
-    templateUrl: './docker-template-details.component.html',
-    styleUrls: ['./docker-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-docker-template-details',
+  templateUrl: './docker-template-details.component.html',
+  styleUrls: ['./docker-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class DockerTemplateDetailsComponent implements OnInit {
-    server: Server;
-    dockerTemplate: DockerTemplate;
+  server: Server;
+  dockerTemplate: DockerTemplate;
 
-    isSymbolSelectionOpened: boolean = false;
+  isSymbolSelectionOpened: boolean = false;
 
-    consoleTypes: string[] = [];
-    consoleResolutions: string[] = [];
-    categories = [];
-    adapters: CustomAdapter[] = [];
-    displayedColumns: string[] = ['adapter_number', 'port_name'];
+  consoleTypes: string[] = [];
+  consoleResolutions: string[] = [];
+  categories = [];
+  adapters: CustomAdapter[] = [];
+  displayedColumns: string[] = ['adapter_number', 'port_name'];
 
-    generalSettingsForm: FormGroup;
+  generalSettingsForm: FormGroup;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private dockerService: DockerService,
-        private toasterService: ToasterService,
-        private configurationService: DockerConfigurationService,
-        private formBuilder: FormBuilder,
-        private router: Router
-    ){
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            adapter: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
-        });
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private dockerService: DockerService,
+    private toasterService: ToasterService,
+    private configurationService: DockerConfigurationService,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      adapter: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.dockerService.getTemplate(this.server, template_id).subscribe((dockerTemplate: DockerTemplate) => {
+        this.dockerTemplate = dockerTemplate;
+      });
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.configurationService.getConsoleTypes();
+    this.categories = this.configurationService.getCategories();
+    this.consoleResolutions = this.configurationService.getConsoleResolutions();
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
+  }
+
+  onSave() {
+    if (this.generalSettingsForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.dockerService.saveTemplate(this.server, this.dockerTemplate).subscribe((savedTemplate: DockerTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
     }
+  }
 
-    ngOnInit(){
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            
-            this.getConfiguration();
-            this.dockerService.getTemplate(this.server, template_id).subscribe((dockerTemplate: DockerTemplate) => {
-                this.dockerTemplate = dockerTemplate;
-            });
-        });
-    }
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-    getConfiguration(){
-        this.consoleTypes = this.configurationService.getConsoleTypes();
-        this.categories = this.configurationService.getCategories();
-        this.consoleResolutions = this.configurationService.getConsoleResolutions();
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates']);
-    }
-
-    onSave(){
-        if (this.generalSettingsForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.dockerService.saveTemplate(this.server, this.dockerTemplate).subscribe((savedTemplate: DockerTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.dockerTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.dockerTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/docker/docker-templates/docker-templates.component.html b/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
index b732ad1e..72227b93 100644
--- a/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
+++ b/src/app/components/preferences/docker/docker-templates/docker-templates.component.html
@@ -1,35 +1,49 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Docker container templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/docker/addtemplate" mat-raised-button color="primary">Add Docker container template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Docker container templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/docker/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add Docker container template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="dockerTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of dockerTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                        <button mat-menu-item (click)="copyTemplate(template)">
-                            <mat-icon>content_copy</mat-icon><span>Copy</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="dockerTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of dockerTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+            <button mat-menu-item (click)="copyTemplate(template)">
+              <mat-icon>content_copy</mat-icon><span>Copy</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/docker/docker-templates/docker-templates.component.spec.ts b/src/app/components/preferences/docker/docker-templates/docker-templates.component.spec.ts
index 245aaf08..fb42de08 100644
--- a/src/app/components/preferences/docker/docker-templates/docker-templates.component.spec.ts
+++ b/src/app/components/preferences/docker/docker-templates/docker-templates.component.spec.ts
@@ -18,41 +18,47 @@ import { DockerTemplatesComponent } from './docker-templates.component';
 import { DockerService } from '../../../../services/docker.service';
 
 export class MockedDockerService {
-    public getTemplates(server: Server) {
-        return of([{} as DockerTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as DockerTemplate]);
+  }
 }
 
 describe('DockerTemplatesComponent', () => {
-    let component: DockerTemplatesComponent;
-    let fixture: ComponentFixture<DockerTemplatesComponent>;
+  let component: DockerTemplatesComponent;
+  let fixture: ComponentFixture<DockerTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedDockerService = new MockedDockerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              { provide: ActivatedRoute,  useValue: activatedRoute },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: DockerService, useValue: mockedDockerService }
-          ],
-          declarations: [
-              DockerTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedDockerService = new MockedDockerService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DockerTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: DockerService, useValue: mockedDockerService },
+      ],
+      declarations: [DockerTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DockerTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts b/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts
index 1fe7f1c6..45fa8351 100644
--- a/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts
+++ b/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -6,47 +6,54 @@ import { DeleteTemplateComponent } from '../../common/delete-template-component/
 import { DockerTemplate } from '../../../../models/templates/docker-template';
 import { DockerService } from '../../../../services/docker.service';
 
-
 @Component({
-    selector: 'app-docker-templates',
-    templateUrl: './docker-templates.component.html',
-    styleUrls: ['./docker-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-docker-templates',
+  templateUrl: './docker-templates.component.html',
+  styleUrls: ['./docker-templates.component.scss', '../../preferences.component.scss'],
 })
 export class DockerTemplatesComponent implements OnInit {
-    server: Server;
-    dockerTemplates: DockerTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  dockerTemplates: DockerTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private dockerService: DockerService,
-        private router: Router 
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private dockerService: DockerService,
+    private router: Router
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.dockerService.getTemplates(this.server).subscribe((dockerTemplates: DockerTemplate[]) => {
-            this.dockerTemplates = dockerTemplates.filter((elem) => elem.template_type === 'docker' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.dockerService.getTemplates(this.server).subscribe((dockerTemplates: DockerTemplate[]) => {
+      this.dockerTemplates = dockerTemplates.filter((elem) => elem.template_type === 'docker' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: DockerTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: DockerTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 
-    copyTemplate(template: DockerTemplate) {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'docker', 'templates', template.template_id, 'copy']);
-    }
+  copyTemplate(template: DockerTemplate) {
+    this.router.navigate([
+      '/server',
+      this.server.id,
+      'preferences',
+      'docker',
+      'templates',
+      template.template_id,
+      'copy',
+    ]);
+  }
 }
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
index 6a4b913a..1b41b969 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
@@ -1,99 +1,109 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New IOS router template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New IOS router template</h1>
     </div>
-    <div class="default-content" *ngIf="iosTemplate">
-        <div class="container mat-elevation-z8">
-            <mat-vertical-stepper [linear]="true">
-                <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this IOS router locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this IOS router on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </mat-step>
+  </div>
+  <div class="default-content" *ngIf="iosTemplate">
+    <div class="container mat-elevation-z8">
+      <mat-vertical-stepper [linear]="true">
+        <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
+          <mat-radio-group class="radio-group">
+            <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+              >Run this IOS router locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Run this IOS router on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </mat-step>
 
-                <mat-step label="IOS image" [completed]="iosImageForm.get('imageName').value">
-                    <input
-                        type="file"
-                        accept=".bin, .image"
-                        class="non-visible"
-                        #file
-                        (change)="addImage($event)"
-                        ng2FileSelect
-                        [uploader]="uploader"/>
-                    <button mat-raised-button color="primary" (click)="file.click()">Click to add image</button> or create from existing one
-                    <form [formGroup]="iosImageForm">
-                        <mat-form-field class="form-field">
-                            <mat-select
-                                placeholder="Image"
-                                (selectionChange)="onImageChosen($event)"
-                                formControlName="imageName">
-                                <mat-option *ngFor="let image of iosImages" [value]="image.filename">
-                                    {{image.filename}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </form>
-                </mat-step>
+        <mat-step label="IOS image" [completed]="iosImageForm.get('imageName').value">
+          <input
+            type="file"
+            accept=".bin, .image"
+            class="non-visible"
+            #file
+            (change)="addImage($event)"
+            ng2FileSelect
+            [uploader]="uploader"
+          />
+          <button mat-raised-button color="primary" (click)="file.click()">Click to add image</button> or create from
+          existing one
+          <form [formGroup]="iosImageForm">
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Image" (selectionChange)="onImageChosen($event)" formControlName="imageName">
+                <mat-option *ngFor="let image of iosImages" [value]="image.filename">
+                  {{ image.filename }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </form>
+        </mat-step>
 
-                <mat-step 
-                    label="Name and platform" 
-                    [completed]="iosNameForm.get('templateName').value && iosNameForm.get('platform').value && iosNameForm.get('chassis').value">
-                    <form [formGroup]="iosNameForm">
-                        <mat-form-field class="form-field">
-                            <input
-                                matInput type="text"
-                                formControlName="templateName"
-                                placeholder="Name"/>
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <mat-select
-                                placeholder="Platform"
-                                (selectionChange)="onPlatformChosen($event)"
-                                formControlName="platform">
-                                <mat-option *ngFor="let platform of platforms" [value]="platform">
-                                    {{platform}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="form-field" *ngIf="chassis[iosNameForm.get('platform').value]">
-                            <mat-select
-                                placeholder="Chassis"
-                                (selectionChange)="onChassisChosen($event)"
-                                formControlName="chassis">
-                                <mat-option *ngFor="let chassis of chassis[iosNameForm.get('platform').value]" [value]="chassis">
-                                    {{chassis}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </form>
-                    <mat-checkbox
-                        *ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]"
-                        [(ngModel)]="isEtherSwitchRouter">
-                        This is an EtherSwitch router
-                    </mat-checkbox>
-                </mat-step>
+        <mat-step
+          label="Name and platform"
+          [completed]="
+            iosNameForm.get('templateName').value &&
+            iosNameForm.get('platform').value &&
+            iosNameForm.get('chassis').value
+          "
+        >
+          <form [formGroup]="iosNameForm">
+            <mat-form-field class="form-field">
+              <input matInput type="text" formControlName="templateName" placeholder="Name" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select
+                placeholder="Platform"
+                (selectionChange)="onPlatformChosen($event)"
+                formControlName="platform"
+              >
+                <mat-option *ngFor="let platform of platforms" [value]="platform">
+                  {{ platform }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="form-field" *ngIf="chassis[iosNameForm.get('platform').value]">
+              <mat-select placeholder="Chassis" (selectionChange)="onChassisChosen($event)" formControlName="chassis">
+                <mat-option *ngFor="let chassis of chassis[iosNameForm.get('platform').value]" [value]="chassis">
+                  {{ chassis }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </form>
+          <mat-checkbox
+            *ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]"
+            [(ngModel)]="isEtherSwitchRouter"
+          >
+            This is an EtherSwitch router
+          </mat-checkbox>
+        </mat-step>
 
-                <mat-step label="Memory" [completed]="iosMemoryForm.get('memory').value">
-                    <form [formGroup]="iosMemoryForm">
-                        <mat-form-field class="form-field">
-                            <input
-                                matInput type="number"
-                                formControlName="memory"
-                                value="defaultRam[iosNameForm.get('platform').value]"
-                                placeholder="Default RAM"/>
-                            <span matSuffix>MB</span>
-                        </mat-form-field>
-                        <mat-label>
-                            <a href="{{ciscoUrl}}">Check for minimum and maximum RAM requirement</a>
-                        </mat-label>
-                    </form>
-                </mat-step>
+        <mat-step label="Memory" [completed]="iosMemoryForm.get('memory').value">
+          <form [formGroup]="iosMemoryForm">
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="number"
+                formControlName="memory"
+                value="defaultRam[iosNameForm.get('platform').value]"
+                placeholder="Default RAM"
+              />
+              <span matSuffix>MB</span>
+            </mat-form-field>
+            <mat-label>
+              <a href="{{ ciscoUrl }}">Check for minimum and maximum RAM requirement</a>
+            </mat-label>
+          </form>
+        </mat-step>
 
-                <mat-step label="Network adapters">
-                    <!-- <div *ngIf="chassis[iosNameForm.get('platform').value]">
+        <mat-step label="Network adapters">
+          <!-- <div *ngIf="chassis[iosNameForm.get('platform').value]">
                         <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
                             <mat-select
                                 placeholder="Slot {{index}}"
@@ -106,50 +116,61 @@
                             </mat-select>
                         </div>
                     </div> -->
-                    <div *ngIf="selectedPlatform">
-                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
-                            <mat-select
-                                placeholder="Slot {{index}}"
-                                [(ngModel)]="networkAdaptersForTemplate[index]"
-                                [ngModelOptions]="{standalone: true}"
-                                *ngIf="networkAdaptersForPlatform[iosNameForm.get('platform').value] && networkAdaptersForPlatform[iosNameForm.get('platform').value][index]">
-                                <mat-option *ngFor="let option of networkAdaptersForPlatform[iosNameForm.get('platform').value][index]" [value]="option">
-                                    {{option}}
-                                </mat-option>
-                            </mat-select>
-                        </div>
-                    </div>
-                </mat-step>
+          <div *ngIf="selectedPlatform">
+            <div *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]">
+              <mat-select
+                placeholder="Slot {{ index }}"
+                [(ngModel)]="networkAdaptersForTemplate[index]"
+                [ngModelOptions]="{ standalone: true }"
+                *ngIf="
+                  networkAdaptersForPlatform[iosNameForm.get('platform').value] &&
+                  networkAdaptersForPlatform[iosNameForm.get('platform').value][index]
+                "
+              >
+                <mat-option
+                  *ngFor="let option of networkAdaptersForPlatform[iosNameForm.get('platform').value][index]"
+                  [value]="option"
+                >
+                  {{ option }}
+                </mat-option>
+              </mat-select>
+            </div>
+          </div>
+        </mat-step>
 
-                <mat-step label="WIC modules">
-                    <div *ngIf="iosNameForm.get('platform').value">
-                        <div *ngFor="let index of [0,1,2,3]">
-                            <mat-select
-                                placeholder="WIC {{index}}"
-                                [(ngModel)]="networkModulesForTemplate[index]"
-                                [ngModelOptions]="{standalone: true}"
-                                *ngIf="networkModules[iosNameForm.get('platform').value] && networkModules[iosNameForm.get('platform').value][index]">
-                                <mat-option *ngFor="let option of networkModules[iosNameForm.get('platform').value][index]" [value]="option">
-                                    {{option}}
-                                </mat-option>
-                            </mat-select>
-                        </div>
-                    </div>
-                </mat-step>
+        <mat-step label="WIC modules">
+          <div *ngIf="iosNameForm.get('platform').value">
+            <div *ngFor="let index of [0, 1, 2, 3]">
+              <mat-select
+                placeholder="WIC {{ index }}"
+                [(ngModel)]="networkModulesForTemplate[index]"
+                [ngModelOptions]="{ standalone: true }"
+                *ngIf="
+                  networkModules[iosNameForm.get('platform').value] &&
+                  networkModules[iosNameForm.get('platform').value][index]
+                "
+              >
+                <mat-option
+                  *ngFor="let option of networkModules[iosNameForm.get('platform').value][index]"
+                  [value]="option"
+                >
+                  {{ option }}
+                </mat-option>
+              </mat-select>
+            </div>
+          </div>
+        </mat-step>
 
-                <mat-step label="Idle-PC">
-                    <mat-form-field class="form-field">
-                        <input
-                            matInput type="text"
-                            [(ngModel)]="iosTemplate.idlepc"
-                            placeholder="Idle-PC"/>
-                    </mat-form-field>
-                </mat-step>
-            </mat-vertical-stepper>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+        <mat-step label="Idle-PC">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC" />
+          </mat-form-field>
+        </mat-step>
+      </mat-vertical-stepper>
     </div>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss
index 0f602793..f4d855b4 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss
@@ -1,3 +1,3 @@
 .non-visible {
-    display: none;
+  display: none;
 }
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.spec.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.spec.ts
index 45df3039..41d14fd8 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.spec.ts
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.spec.ts
@@ -29,116 +29,116 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IosConfigurationService } from '../../../../services/ios-configuration.service';
 
 export class MockedIosService {
-    public addTemplate(server: Server, iosTemplate: IosTemplate) {
-        return of(iosTemplate);
-    }
+  public addTemplate(server: Server, iosTemplate: IosTemplate) {
+    return of(iosTemplate);
+  }
 }
 
 //Tests disabled due to instability
 xdescribe('AddIosTemplateComponent', () => {
-    let component: AddIosTemplateComponent;
-    let fixture: ComponentFixture<AddIosTemplateComponent>;
+  let component: AddIosTemplateComponent;
+  let fixture: ComponentFixture<AddIosTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIosService = new MockedIosService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                MatStepperModule, 
-                FormsModule, 
-                MatTableModule, 
-                MatAutocompleteModule, 
-                MatFormFieldModule, 
-                MatInputModule, 
-                ReactiveFormsModule, 
-                MatSelectModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/dynamips/templates', component: AddIosTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: IosService, useValue: mockedIosService },
-                { provide: ToasterService, useValue: mockedToasterService},
-                { provide: TemplateMocksService, useClass: TemplateMocksService },
-                { provide: IosConfigurationService, useClass: IosConfigurationService }
-            ],
-            declarations: [
-                AddIosTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIosService = new MockedIosService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddIosTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatStepperModule,
+        FormsModule,
+        MatTableModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/dynamips/templates', component: AddIosTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IosService, useValue: mockedIosService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+        { provide: IosConfigurationService, useClass: IosConfigurationService },
+      ],
+      declarations: [AddIosTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddIosTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
-        component.iosImageForm.controls['imageName'].setValue('image name');
-        component.iosNameForm.controls['templateName'].setValue('template name');
-        component.iosNameForm.controls['platform'].setValue('platform');
-        component.iosNameForm.controls['chassis'].setValue('chassis');
-        component.iosMemoryForm.controls['memory'].setValue(0);
-        component.server = {id: 1} as Server;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
+    component.iosImageForm.controls['imageName'].setValue('image name');
+    component.iosNameForm.controls['templateName'].setValue('template name');
+    component.iosNameForm.controls['platform'].setValue('platform');
+    component.iosNameForm.controls['chassis'].setValue('chassis');
+    component.iosMemoryForm.controls['memory'].setValue(0);
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIosService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is not defined', () => {
-        spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
-        component.iosImageForm.controls['imageName'].setValue('image name');
-        component.iosNameForm.controls['templateName'].setValue('');
-        component.iosNameForm.controls['platform'].setValue('platform');
-        component.iosNameForm.controls['chassis'].setValue('chassis');
-        component.iosMemoryForm.controls['memory'].setValue(0);
-        component.server = {id: 1} as Server;
+    expect(mockedIosService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is not defined', () => {
+    spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
+    component.iosImageForm.controls['imageName'].setValue('image name');
+    component.iosNameForm.controls['templateName'].setValue('');
+    component.iosNameForm.controls['platform'].setValue('platform');
+    component.iosNameForm.controls['chassis'].setValue('chassis');
+    component.iosMemoryForm.controls['memory'].setValue(0);
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when image name is not defined', () => {
-        spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
-        component.iosNameForm.controls['templateName'].setValue('template name');
-        component.iosNameForm.controls['platform'].setValue('platform');
-        component.iosNameForm.controls['chassis'].setValue('chassis');
-        component.iosMemoryForm.controls['memory'].setValue(0);
-        component.server = {id: 1} as Server;
+    expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when image name is not defined', () => {
+    spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
+    component.iosNameForm.controls['templateName'].setValue('template name');
+    component.iosNameForm.controls['platform'].setValue('platform');
+    component.iosNameForm.controls['chassis'].setValue('chassis');
+    component.iosMemoryForm.controls['memory'].setValue(0);
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when memory is not defined', () => {
-        spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
-        component.iosImageForm.controls['imageName'].setValue('image name');
-        component.iosNameForm.controls['templateName'].setValue('template name');
-        component.iosNameForm.controls['platform'].setValue('platform');
-        component.iosNameForm.controls['chassis'].setValue('chassis');
-        component.server = {id: 1} as Server;
+    expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when memory is not defined', () => {
+    spyOn(mockedIosService, 'addTemplate').and.returnValue(of({} as IosTemplate));
+    component.iosImageForm.controls['imageName'].setValue('image name');
+    component.iosNameForm.controls['templateName'].setValue('template name');
+    component.iosNameForm.controls['platform'].setValue('platform');
+    component.iosNameForm.controls['chassis'].setValue('chassis');
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedIosService.addTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
index 5447f498..fef62882 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -16,241 +16,251 @@ import { ComputeService } from '../../../../services/compute.service';
 import { Compute } from '../../../../models/compute';
 
 @Component({
-    selector: 'app-add-ios-template',
-    templateUrl: './add-ios-template.component.html',
-    styleUrls: ['./add-ios-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-ios-template',
+  templateUrl: './add-ios-template.component.html',
+  styleUrls: ['./add-ios-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddIosTemplateComponent implements OnInit {
-    server: Server;
-    iosTemplate: IosTemplate;
-    isEtherSwitchRouter: boolean = false;
+  server: Server;
+  iosTemplate: IosTemplate;
+  isEtherSwitchRouter: boolean = false;
 
-    iosImageForm: FormGroup;
-    iosNameForm: FormGroup;
-    iosMemoryForm: FormGroup;
-    selectedPlatform: string;
+  iosImageForm: FormGroup;
+  iosNameForm: FormGroup;
+  iosMemoryForm: FormGroup;
+  selectedPlatform: string;
 
-    networkAdaptersForTemplate: string[] = [];
-    networkModulesForTemplate: string[] = [];
+  networkAdaptersForTemplate: string[] = [];
+  networkModulesForTemplate: string[] = [];
 
-    iosImages: IosImage[] = [];
-    platforms: string[] = [];
-    platformsWithEtherSwitchRouterOption = {};
-    platformsWithChassis = {};
-    chassis = {};
-    defaultRam = {};
-    defaultNvram = {};
-    networkAdapters = {};
-    networkAdaptersForPlatform = {};
-    networkModules = {};
+  iosImages: IosImage[] = [];
+  platforms: string[] = [];
+  platformsWithEtherSwitchRouterOption = {};
+  platformsWithChassis = {};
+  chassis = {};
+  defaultRam = {};
+  defaultNvram = {};
+  networkAdapters = {};
+  networkAdaptersForPlatform = {};
+  networkModules = {};
 
-    ciscoUrl: string = "https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp";
-    uploader: FileUploader;
+  ciscoUrl: string = 'https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp';
+  uploader: FileUploader;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iosService: IosService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private templateMocksService: TemplateMocksService,
-        private iosConfigurationService: IosConfigurationService,
-        private computeService: ComputeService
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iosService: IosService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private templateMocksService: TemplateMocksService,
+    private iosConfigurationService: IosConfigurationService,
+    private computeService: ComputeService
+  ) {
+    this.iosTemplate = new IosTemplate();
+
+    this.iosImageForm = this.formBuilder.group({
+      imageName: new FormControl(null, [Validators.required]),
+    });
+
+    this.iosNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, [Validators.required]),
+      platform: new FormControl(null, [Validators.required]),
+      chassis: new FormControl(null, [Validators.required]),
+    });
+
+    this.iosMemoryForm = this.formBuilder.group({
+      memory: new FormControl(null, [Validators.required]),
+    });
+  }
+
+  ngOnInit() {
+    this.uploader = new FileUploader({});
+    this.uploader.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+    this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+      this.toasterService.error('An error occured: ' + response);
+    };
+    this.uploader.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.getImages();
+      this.toasterService.success('Image uploaded');
+    };
+
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getImages();
+
+      this.templateMocksService.getIosTemplate().subscribe((iosTemplate: IosTemplate) => {
+        this.iosTemplate = iosTemplate;
+
+        this.networkModules = this.iosConfigurationService.getNetworkModules();
+        this.networkAdaptersForPlatform = this.iosConfigurationService.getNetworkAdaptersForPlatform();
+        this.networkAdapters = this.iosConfigurationService.getNetworkAdapters();
+        this.platforms = this.iosConfigurationService.getAvailablePlatforms();
+        this.platformsWithEtherSwitchRouterOption = this.iosConfigurationService.getPlatformsWithEtherSwitchRouterOption();
+        this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
+        this.chassis = this.iosConfigurationService.getChassis();
+        this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
+      });
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
+    }
+  }
+
+  getImages() {
+    this.iosService.getImages(this.server).subscribe((images: IosImage[]) => {
+      this.iosImages = images;
+    });
+  }
+
+  addImage(event): void {
+    let name = event.target.files[0].name.split('-')[0];
+    this.iosNameForm.controls['templateName'].setValue(name);
+    let fileName = event.target.files[0].name;
+
+    const url = this.iosService.getImagePath(this.server, fileName);
+    this.uploader.queue.forEach((elem) => (elem.url = url));
+
+    const itemToUpload = this.uploader.queue[0];
+    (itemToUpload as any).options.disableMultipart = true;
+
+    this.uploader.uploadItem(itemToUpload);
+  }
+
+  addTemplate() {
+    if (
+      !this.iosImageForm.invalid &&
+      !this.iosMemoryForm.invalid &&
+      this.iosNameForm.get('templateName').value &&
+      this.iosNameForm.get('platform').value
     ) {
-        this.iosTemplate = new IosTemplate();
+      this.iosTemplate.template_id = uuid();
+      this.iosTemplate.image = this.iosImageForm.get('imageName').value;
+      this.iosTemplate.name = this.iosNameForm.get('templateName').value;
+      this.iosTemplate.platform = this.iosNameForm.get('platform').value;
 
-        this.iosImageForm = this.formBuilder.group({
-            imageName: new FormControl(null, [Validators.required])
-        });
+      if (this.chassis[this.iosNameForm.get('platform').value])
+        this.iosTemplate.chassis = this.iosNameForm.get('chassis').value;
+      this.iosTemplate.ram = this.iosMemoryForm.get('memory').value;
 
-        this.iosNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, [Validators.required]),
-            platform: new FormControl(null, [Validators.required]),
-            chassis: new FormControl(null, [Validators.required])
-        });
+      if (this.isEtherSwitchRouter) {
+        this.iosTemplate.symbol = ':/symbols/multilayer_switch.svg';
+        this.iosTemplate.category = 'switch';
+      }
 
-        this.iosMemoryForm = this.formBuilder.group({
-            memory: new FormControl(null, [Validators.required])
-        });
+      if (this.networkAdaptersForTemplate.length > 0) this.completeAdaptersData();
+      if (this.networkModulesForTemplate.length > 0) this.completeModulesData();
+
+      this.iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
+      this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 
-    ngOnInit() {
-        this.uploader = new FileUploader({});
-        this.uploader.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error occured: ' + response);
-        };
-        this.uploader.onSuccessItem = (
-            item: FileItem,
-            response: string,
-            status: number,
-            headers: ParsedResponseHeaders
-        ) => {
-            this.getImages();
-            this.toasterService.success('Image uploaded');
-        };
-
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.getImages();
-
-            this.templateMocksService.getIosTemplate().subscribe((iosTemplate: IosTemplate) => {
-                this.iosTemplate = iosTemplate;
-
-                this.networkModules = this.iosConfigurationService.getNetworkModules();
-                this.networkAdaptersForPlatform = this.iosConfigurationService.getNetworkAdaptersForPlatform();
-                this.networkAdapters = this.iosConfigurationService.getNetworkAdapters();
-                this.platforms = this.iosConfigurationService.getAvailablePlatforms();
-                this.platformsWithEtherSwitchRouterOption = this.iosConfigurationService.getPlatformsWithEtherSwitchRouterOption();
-                this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
-                this.chassis = this.iosConfigurationService.getChassis();
-                this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
-            });
-
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
+  completeAdaptersData() {
+    if (this.chassis[this.iosTemplate.platform]) {
+      if (Object.keys(this.networkAdapters[this.iosTemplate.chassis])) {
+        for (let i = 0; i < Object.keys(this.networkAdapters[this.iosTemplate.chassis]).length; i++) {
+          if (!this.networkAdaptersForTemplate[i]) this.networkAdaptersForTemplate[i] = '';
         }
-    }
-
-    getImages() {
-        this.iosService.getImages(this.server).subscribe((images: IosImage[]) => {
-            this.iosImages = images;
-        });
-    }
-
-    addImage(event): void {
-        let name = event.target.files[0].name.split('-')[0];
-        this.iosNameForm.controls['templateName'].setValue(name);
-        let fileName = event.target.files[0].name;
-
-        const url = this.iosService.getImagePath(this.server, fileName);
-        this.uploader.queue.forEach(elem => (elem.url = url));
-
-        const itemToUpload = this.uploader.queue[0];
-        (itemToUpload as any).options.disableMultipart = true;
-
-        this.uploader.uploadItem(itemToUpload);
-    }
-
-    addTemplate() {
-        if (!this.iosImageForm.invalid && !this.iosMemoryForm.invalid && this.iosNameForm.get('templateName').value && this.iosNameForm.get('platform').value) {
-            this.iosTemplate.template_id = uuid();
-            this.iosTemplate.image = this.iosImageForm.get("imageName").value;
-            this.iosTemplate.name = this.iosNameForm.get('templateName').value;
-            this.iosTemplate.platform = this.iosNameForm.get('platform').value;
-
-            if (this.chassis[this.iosNameForm.get('platform').value]) this.iosTemplate.chassis = this.iosNameForm.get('chassis').value;
-            this.iosTemplate.ram = this.iosMemoryForm.get('memory').value;
-
-            if (this.isEtherSwitchRouter) {
-                this.iosTemplate.symbol = ":/symbols/multilayer_switch.svg";
-                this.iosTemplate.category = "switch";
-            }
-
-            if (this.networkAdaptersForTemplate.length>0) this.completeAdaptersData();
-            if (this.networkModulesForTemplate.length>0) this.completeModulesData();
-
-            this.iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
+      }
+    } else {
+      if (this.networkAdaptersForPlatform[this.iosNameForm.get('platform').value]) {
+        for (
+          let i = 0;
+          i < Object.keys(this.networkAdaptersForPlatform[this.iosNameForm.get('platform').value]).length;
+          i++
+        ) {
+          if (!this.networkAdaptersForTemplate[i]) this.networkAdaptersForTemplate[i] = '';
         }
+      }
     }
 
-    completeAdaptersData() {
-        if (this.chassis[this.iosTemplate.platform]) {
-            if(Object.keys(this.networkAdapters[this.iosTemplate.chassis])){
-                for(let i=0; i<Object.keys(this.networkAdapters[this.iosTemplate.chassis]).length; i++){
-                    if(!this.networkAdaptersForTemplate[i]) this.networkAdaptersForTemplate[i] = '';
-                }
-            }
-        } else {
-            if(this.networkAdaptersForPlatform[this.iosNameForm.get('platform').value]){
-                for(let i=0; i<Object.keys(this.networkAdaptersForPlatform[this.iosNameForm.get('platform').value]).length; i++){
-                    if(!this.networkAdaptersForTemplate[i]) this.networkAdaptersForTemplate[i] = '';
-                }
-            }
-        }
+    if (this.networkAdaptersForTemplate[0]) this.iosTemplate.slot0 = this.networkAdaptersForTemplate[0];
+    if (this.networkAdaptersForTemplate[1]) this.iosTemplate.slot1 = this.networkAdaptersForTemplate[1];
+    if (this.networkAdaptersForTemplate[2]) this.iosTemplate.slot2 = this.networkAdaptersForTemplate[2];
+    if (this.networkAdaptersForTemplate[3]) this.iosTemplate.slot3 = this.networkAdaptersForTemplate[3];
+    if (this.networkAdaptersForTemplate[4]) this.iosTemplate.slot4 = this.networkAdaptersForTemplate[4];
+    if (this.networkAdaptersForTemplate[5]) this.iosTemplate.slot5 = this.networkAdaptersForTemplate[5];
+    if (this.networkAdaptersForTemplate[6]) this.iosTemplate.slot6 = this.networkAdaptersForTemplate[6];
+    if (this.networkAdaptersForTemplate[7]) this.iosTemplate.slot7 = this.networkAdaptersForTemplate[7];
+  }
 
-        if (this.networkAdaptersForTemplate[0]) this.iosTemplate.slot0 = this.networkAdaptersForTemplate[0];
-        if (this.networkAdaptersForTemplate[1]) this.iosTemplate.slot1 = this.networkAdaptersForTemplate[1];
-        if (this.networkAdaptersForTemplate[2]) this.iosTemplate.slot2 = this.networkAdaptersForTemplate[2];
-        if (this.networkAdaptersForTemplate[3]) this.iosTemplate.slot3 = this.networkAdaptersForTemplate[3];
-        if (this.networkAdaptersForTemplate[4]) this.iosTemplate.slot4 = this.networkAdaptersForTemplate[4];
-        if (this.networkAdaptersForTemplate[5]) this.iosTemplate.slot5 = this.networkAdaptersForTemplate[5];
-        if (this.networkAdaptersForTemplate[6]) this.iosTemplate.slot6 = this.networkAdaptersForTemplate[6];
-        if (this.networkAdaptersForTemplate[7]) this.iosTemplate.slot7 = this.networkAdaptersForTemplate[7];
+  completeModulesData() {
+    if (Object.keys(this.networkModules[this.iosTemplate.platform])) {
+      for (let i = 0; i < Object.keys(this.networkModules[this.iosTemplate.platform]).length; i++) {
+        if (!this.networkModulesForTemplate[i]) this.networkModulesForTemplate[i] = '';
+      }
     }
 
-    completeModulesData() {
-        if (Object.keys(this.networkModules[this.iosTemplate.platform])){
-            for(let i=0; i<Object.keys(this.networkModules[this.iosTemplate.platform]).length; i++){
-                if(!this.networkModulesForTemplate[i]) this.networkModulesForTemplate[i] = '';
-            }
-        }
-        
-        if (this.networkModulesForTemplate[0]) this.iosTemplate.wic0 = this.networkModulesForTemplate[0];
-        if (this.networkModulesForTemplate[1]) this.iosTemplate.wic1 = this.networkModulesForTemplate[1];
-        if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2];
+    if (this.networkModulesForTemplate[0]) this.iosTemplate.wic0 = this.networkModulesForTemplate[0];
+    if (this.networkModulesForTemplate[1]) this.iosTemplate.wic1 = this.networkModulesForTemplate[1];
+    if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2];
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
+  }
+
+  onImageChosen() {
+    let name: string = this.iosImageForm.get('imageName').value.split('-')[0];
+    this.iosNameForm.controls['templateName'].setValue(name);
+
+    if (name === 'c3620' || name === 'c3640' || name === 'c3660') {
+      this.iosNameForm.controls['platform'].setValue('c3600');
+      this.selectedPlatform = 'c3600';
+    } else {
+      this.iosNameForm.controls['platform'].setValue(name);
+      this.selectedPlatform = name;
     }
 
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
+    if (name === 'c1700') {
+      this.iosNameForm.controls['chassis'].setValue('1720');
+    } else if (name === 'c2600') {
+      this.iosNameForm.controls['chassis'].setValue('2610');
+    } else {
+      this.iosNameForm.controls['chassis'].setValue('');
     }
 
-    onImageChosen() {
-        let name: string = this.iosImageForm.get("imageName").value.split('-')[0];
-        this.iosNameForm.controls['templateName'].setValue(name);
+    this.iosMemoryForm.controls['memory'].setValue(this.defaultRam[name]);
+  }
 
-        if (name === 'c3620' || name === 'c3640' || name === 'c3660') {
-            this.iosNameForm.controls['platform'].setValue('c3600');
-            this.selectedPlatform = 'c3600';
-        } else {
-            this.iosNameForm.controls['platform'].setValue(name);
-            this.selectedPlatform = name;
-        }
+  onPlatformChosen() {
+    this.iosTemplate.chassis = '';
+    this.networkAdaptersForTemplate = [];
+    this.networkModulesForTemplate = [];
+  }
 
-        if (name === 'c1700') {
-            this.iosNameForm.controls['chassis'].setValue('1720');
-        } else if (name === 'c2600') {
-            this.iosNameForm.controls['chassis'].setValue('2610');
-        } else {
-            this.iosNameForm.controls['chassis'].setValue('');
-        }
-
-        this.iosMemoryForm.controls['memory'].setValue(this.defaultRam[name]);
-    }
-
-    onPlatformChosen() {
-        this.iosTemplate.chassis = '';
-        this.networkAdaptersForTemplate = [];
-        this.networkModulesForTemplate = [];
-    }
-
-    onChassisChosen() {
-        this.networkAdaptersForTemplate = [];
-    }
+  onChassisChosen() {
+    this.networkAdaptersForTemplate = [];
+  }
 }
diff --git a/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html b/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html
index eca014b7..3aa2a953 100644
--- a/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html
+++ b/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html
@@ -1,24 +1,20 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Copy IOS router template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Copy IOS router template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <form [formGroup]="formGroup">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="templateName" 
-                        placeholder="Name"
-                        formControlName="templateName"/>
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <form [formGroup]="formGroup">
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="templateName" placeholder="Name" formControlName="templateName" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts b/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
index f400eb41..86d268e3 100644
--- a/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -8,59 +8,57 @@ import { IosTemplate } from '../../../../models/templates/ios-template';
 import { IosService } from '../../../../services/ios.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-copy-ios-template',
-    templateUrl: './copy-ios-template.component.html',
-    styleUrls: ['./copy-ios-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-copy-ios-template',
+  templateUrl: './copy-ios-template.component.html',
+  styleUrls: ['./copy-ios-template.component.scss', '../../preferences.component.scss'],
 })
 export class CopyIosTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    iosTemplate: IosTemplate;
-    formGroup: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iosService: IosService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.formGroup = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
-                this.iosTemplate = iosTemplate;
-                this.templateName = `Copy of ${this.iosTemplate.name}`;
-            })
-
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.formGroup.invalid) {
-            this.iosTemplate.template_id = uuid();
-            this.iosTemplate.name = this.templateName;
-
-            this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  server: Server;
+  templateName: string = '';
+  iosTemplate: IosTemplate;
+  formGroup: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iosService: IosService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.formGroup = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
+        this.iosTemplate = iosTemplate;
+        this.templateName = `Copy of ${this.iosTemplate.name}`;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.formGroup.invalid) {
+      this.iosTemplate.template_id = uuid();
+      this.iosTemplate.name = this.templateName;
+
+      this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html
index 2864366e..e1a11bb7 100644
--- a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html
@@ -1,12 +1,12 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Dynamips preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="dynamipsPath" placeholder="Path to Dynamips"/>
-        </mat-form-field>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Dynamips preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <mat-form-field class="form-field">
+      <input matInput type="text" [(ngModel)]="dynamipsPath" placeholder="Path to Dynamips" />
+    </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss
index 93342be4..9800a50e 100644
--- a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss
@@ -1,8 +1,8 @@
 .top-button {
-    height: 36px;
-    margin-top: 22px
+  height: 36px;
+  margin-top: 22px;
 }
 
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts
index 1a191bf6..4db227d5 100644
--- a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts
@@ -19,46 +19,54 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { DynamipsPreferencesComponent } from './dynamips-preferences.component';
 
 describe('DynamipsPreferencesComponent', () => {
-    let component: DynamipsPreferencesComponent;
-    let fixture: ComponentFixture<DynamipsPreferencesComponent>;
+  let component: DynamipsPreferencesComponent;
+  let fixture: ComponentFixture<DynamipsPreferencesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    let mockedServerSettingsService = new MockedServerSettingsService();
-    let mockedToasterService = new MockedToasterService();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [HttpClientModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: ServerSettingsService, useValue: mockedServerSettingsService },
-              { provide: ToasterService, useValue: mockedToasterService }
-          ],
-          declarations: [
-              DynamipsPreferencesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let activatedRoute = new MockedActivatedRoute().get();
+  let mockedServerSettingsService = new MockedServerSettingsService();
+  let mockedToasterService = new MockedToasterService();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DynamipsPreferencesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: ServerSettingsService, useValue: mockedServerSettingsService },
+        { provide: ToasterService, useValue: mockedToasterService },
+      ],
+      declarations: [DynamipsPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamipsPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should clear path when restore defaults called', () => {
-        component.dynamipsPath = 'Non empty';
-        component.restoreDefaults();
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        expect(component.dynamipsPath).toBe('');
-    });
+  it('should clear path when restore defaults called', () => {
+    component.dynamipsPath = 'Non empty';
+    component.restoreDefaults();
+
+    expect(component.dynamipsPath).toBe('');
+  });
 });
diff --git a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts
index b6c92fdb..0644283a 100644
--- a/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts
+++ b/src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts
@@ -1,33 +1,32 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ServerSettingsService } from '../../../../services/server-settings.service';
 import { ActivatedRoute } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { ServerService } from '../../../../services/server.service';
 
-
 @Component({
-    selector: 'app-dynamips-preferences',
-    templateUrl: './dynamips-preferences.component.html',
-    styleUrls: ['./dynamips-preferences.component.scss']
+  selector: 'app-dynamips-preferences',
+  templateUrl: './dynamips-preferences.component.html',
+  styleUrls: ['./dynamips-preferences.component.scss'],
 })
 export class DynamipsPreferencesComponent implements OnInit {
-    server: Server;
-    dynamipsPath: string;
+  server: Server;
+  dynamipsPath: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private serverSettingsService: ServerSettingsService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private serverSettingsService: ServerSettingsService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
 
-    restoreDefaults() {
-        this.dynamipsPath = '';
-    }
+  restoreDefaults() {
+    this.dynamipsPath = '';
+  }
 }
diff --git a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
index b4470c3f..8c3f8c83 100644
--- a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
+++ b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
@@ -1,200 +1,288 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Dynamips IOS Router configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Dynamips IOS Router configuration</h1>
     </div>
-    <div class="default-content" *ngIf="iosTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="templateName" [(ngModel)]="iosTemplate.name" placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="defaultName" [(ngModel)]="iosTemplate.default_name_format" placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-label>Platform - {{iosTemplate.platform}}</mat-label><br/><br/>
-                    <mat-label>Chassis - {{iosTemplate.chassis}}</mat-label><br/><br/>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="symbol" [(ngModel)]="iosTemplate.symbol" placeholder="Symbol">
-                    </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iosTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="path" [(ngModel)]="iosTemplate.image" placeholder="IOS image path">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="initialConfig" [(ngModel)]="iosTemplate.startup_config" placeholder="Initial startup-config">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.private_config" placeholder="Initial private-config">
-                    </mat-form-field>
-                </form>
-                <mat-form-field class="select">
-                    <mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
-                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-checkbox [(ngModel)]="iosTemplate.console_auto_start">
-                    Auto start console
-                </mat-checkbox>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Memories and disks
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="memoryForm">
-                    <mat-form-field class="form-field">
-                        <input matInput type="number" formControlName="ram" [(ngModel)]="iosTemplate.ram" placeholder="RAM size">
-                        <span matSuffix>MB</span>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="number" formControlName="nvram" [(ngModel)]="iosTemplate.nvram" placeholder="NVRAM size">
-                        <span matSuffix>MB</span>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="number" formControlName="iomemory" [(ngModel)]="iosTemplate.iomem" placeholder="I/O memory">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="number" formControlName="disk0" [(ngModel)]="iosTemplate.disk0" placeholder="PCMCIA disk0">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="number" formControlName="disk1" [(ngModel)]="iosTemplate.disk1" placeholder="PCMCIA disk1">
-                    </mat-form-field>
-                </form>
-                <mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
-                    Automatically delete NVRAM and disk files
-                </mat-checkbox>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Slots
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <h6>Adapters</h6>
-                <div *ngIf="iosTemplate.chassis && chassis[iosTemplate.platform]">
-                    <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
-                        <mat-select 
-                            placeholder="Slot {{index}}" 
-                            [(ngModel)]="networkAdaptersForTemplate[index]"
-                            [ngModelOptions]="{standalone: true}"
-                            *ngIf="networkAdapters[iosTemplate.chassis][index]">
-                            <mat-option *ngFor="let option of networkAdapters[iosTemplate.chassis][index]" [value]="option">
-                                {{option}}
-                            </mat-option>
-                        </mat-select> 
-                    </div>
-                </div>
-                <div *ngIf="iosTemplate.platform && !chassis[iosTemplate.platform]">
-                    <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
-                        <mat-select 
-                            placeholder="Slot {{index}}" 
-                            [(ngModel)]="networkAdaptersForTemplate[index]"
-                            [ngModelOptions]="{standalone: true}"
-                            *ngIf="networkAdaptersForPlatform[iosTemplate.platform][index]">
-                            <mat-option *ngFor="let option of networkAdaptersForPlatform[iosTemplate.platform][index]" [value]="option">
-                                {{option}}
-                            </mat-option>
-                        </mat-select> 
-                    </div>
-                </div><br/><br/>
-                <h6>WICs</h6>
-                <div *ngIf="iosTemplate.wic0 || iosTemplate.wic0===''">
-                    <mat-select 
-                        placeholder="WIC 0" 
-                        [(ngModel)]="iosTemplate.wic0"
-                        [ngModelOptions]="{standalone: true}">
-                        <mat-option *ngFor="let option of networkModules[iosTemplate.platform][0]" [value]="option">
-                            {{option}}
-                        </mat-option>
-                    </mat-select> 
-                </div>
-                <div *ngIf="iosTemplate.wic1  || iosTemplate.wic1===''">
-                    <mat-select 
-                        placeholder="WIC 1" 
-                        [(ngModel)]="iosTemplate.wic1"
-                        [ngModelOptions]="{standalone: true}">
-                        <mat-option *ngFor="let option of networkModules[iosTemplate.platform][1]" [value]="option">
-                            {{option}}
-                        </mat-option>
-                    </mat-select> 
-                </div>
-                <div *ngIf="iosTemplate.wic2  || iosTemplate.wic2===''">
-                    <mat-select 
-                        placeholder="WIC 2" 
-                        [(ngModel)]="iosTemplate.wic2"
-                        [ngModelOptions]="{standalone: true}">
-                        <mat-option *ngFor="let option of networkModules[iosTemplate.platform][2]" [value]="option">
-                            {{option}}
-                        </mat-option>
-                    </mat-select> 
-                </div>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Advanced
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="advancedForm">
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="systemId" type="text" [(ngModel)]="iosTemplate.system_id" placeholder="System ID">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.mac_addr" placeholder="Base MAC">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="idlemax" type="number" [(ngModel)]="iosTemplate.idlemax" placeholder="Idlemax">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="idlesleep" type="number" [(ngModel)]="iosTemplate.idlesleep" placeholder="Idlesleep">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="execarea" type="number" [(ngModel)]="iosTemplate.exec_area" placeholder="Exec area">
-                    </mat-form-field>
-                </form>
-                <mat-checkbox [(ngModel)]="iosTemplate.mmap">
-                    Enable mmap support
-                </mat-checkbox><br/><br/>
-                <mat-checkbox [(ngModel)]="iosTemplate.sparsemem">
-                    Enable sparse memory supoport
-                </mat-checkbox>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
+  </div>
+  <div class="default-content" *ngIf="iosTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="templateName"
+              [(ngModel)]="iosTemplate.name"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="defaultName"
+              [(ngModel)]="iosTemplate.default_name_format"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-label>Platform - {{ iosTemplate.platform }}</mat-label
+          ><br /><br />
+          <mat-label>Chassis - {{ iosTemplate.chassis }}</mat-label
+          ><br /><br />
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="symbol"
+              [(ngModel)]="iosTemplate.symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Category"
+              [(ngModel)]="iosTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="path"
+              [(ngModel)]="iosTemplate.image"
+              placeholder="IOS image path"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="initialConfig"
+              [(ngModel)]="iosTemplate.startup_config"
+              placeholder="Initial startup-config"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="text"
+              [(ngModel)]="iosTemplate.private_config"
+              placeholder="Initial private-config"
+            />
+          </mat-form-field>
+        </form>
+        <mat-form-field class="select">
+          <mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox [(ngModel)]="iosTemplate.console_auto_start"> Auto start console </mat-checkbox>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Memories and disks </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="memoryForm">
+          <mat-form-field class="form-field">
+            <input matInput type="number" formControlName="ram" [(ngModel)]="iosTemplate.ram" placeholder="RAM size" />
+            <span matSuffix>MB</span>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              formControlName="nvram"
+              [(ngModel)]="iosTemplate.nvram"
+              placeholder="NVRAM size"
+            />
+            <span matSuffix>MB</span>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              formControlName="iomemory"
+              [(ngModel)]="iosTemplate.iomem"
+              placeholder="I/O memory"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              formControlName="disk0"
+              [(ngModel)]="iosTemplate.disk0"
+              placeholder="PCMCIA disk0"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              formControlName="disk1"
+              [(ngModel)]="iosTemplate.disk1"
+              placeholder="PCMCIA disk1"
+            />
+          </mat-form-field>
+        </form>
+        <mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
+          Automatically delete NVRAM and disk files
+        </mat-checkbox>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Slots </mat-panel-title>
+        </mat-expansion-panel-header>
+        <h6>Adapters</h6>
+        <div *ngIf="iosTemplate.chassis && chassis[iosTemplate.platform]">
+          <div *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]">
+            <mat-select
+              placeholder="Slot {{ index }}"
+              [(ngModel)]="networkAdaptersForTemplate[index]"
+              [ngModelOptions]="{ standalone: true }"
+              *ngIf="networkAdapters[iosTemplate.chassis][index]"
+            >
+              <mat-option *ngFor="let option of networkAdapters[iosTemplate.chassis][index]" [value]="option">
+                {{ option }}
+              </mat-option>
+            </mat-select>
+          </div>
         </div>
+        <div *ngIf="iosTemplate.platform && !chassis[iosTemplate.platform]">
+          <div *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]">
+            <mat-select
+              placeholder="Slot {{ index }}"
+              [(ngModel)]="networkAdaptersForTemplate[index]"
+              [ngModelOptions]="{ standalone: true }"
+              *ngIf="networkAdaptersForPlatform[iosTemplate.platform][index]"
+            >
+              <mat-option
+                *ngFor="let option of networkAdaptersForPlatform[iosTemplate.platform][index]"
+                [value]="option"
+              >
+                {{ option }}
+              </mat-option>
+            </mat-select>
+          </div>
+        </div>
+        <br /><br />
+        <h6>WICs</h6>
+        <div *ngIf="iosTemplate.wic0 || iosTemplate.wic0 === ''">
+          <mat-select placeholder="WIC 0" [(ngModel)]="iosTemplate.wic0" [ngModelOptions]="{ standalone: true }">
+            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][0]" [value]="option">
+              {{ option }}
+            </mat-option>
+          </mat-select>
+        </div>
+        <div *ngIf="iosTemplate.wic1 || iosTemplate.wic1 === ''">
+          <mat-select placeholder="WIC 1" [(ngModel)]="iosTemplate.wic1" [ngModelOptions]="{ standalone: true }">
+            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][1]" [value]="option">
+              {{ option }}
+            </mat-option>
+          </mat-select>
+        </div>
+        <div *ngIf="iosTemplate.wic2 || iosTemplate.wic2 === ''">
+          <mat-select placeholder="WIC 2" [(ngModel)]="iosTemplate.wic2" [ngModelOptions]="{ standalone: true }">
+            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][2]" [value]="option">
+              {{ option }}
+            </mat-option>
+          </mat-select>
+        </div>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Advanced </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="advancedForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="systemId"
+              type="text"
+              [(ngModel)]="iosTemplate.system_id"
+              placeholder="System ID"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="text"
+              [(ngModel)]="iosTemplate.mac_addr"
+              placeholder="Base MAC"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="text"
+              [(ngModel)]="iosTemplate.idlepc"
+              placeholder="Idle-PC"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="idlemax"
+              type="number"
+              [(ngModel)]="iosTemplate.idlemax"
+              placeholder="Idlemax"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="idlesleep"
+              type="number"
+              [(ngModel)]="iosTemplate.idlesleep"
+              placeholder="Idlesleep"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="execarea"
+              type="number"
+              [(ngModel)]="iosTemplate.exec_area"
+              placeholder="Exec area"
+            />
+          </mat-form-field>
+        </form>
+        <mat-checkbox [(ngModel)]="iosTemplate.mmap"> Enable mmap support </mat-checkbox><br /><br />
+        <mat-checkbox [(ngModel)]="iosTemplate.sparsemem"> Enable sparse memory supoport </mat-checkbox>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && iosTemplate" [server]="server" [symbol]="iosTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && iosTemplate"
+  [server]="server"
+  [symbol]="iosTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.spec.ts b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.spec.ts
index 0670d519..b87bb74e 100644
--- a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.spec.ts
+++ b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.spec.ts
@@ -22,72 +22,81 @@ import { IosService } from '../../../../services/ios.service';
 import { IosConfigurationService } from '../../../../services/ios-configuration.service';
 
 export class MockedIosService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as IosTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as IosTemplate);
+  }
 
-    public saveTemplate(server: Server, iosTemplate: IosTemplate) {
-        return of(iosTemplate);    
-    }
+  public saveTemplate(server: Server, iosTemplate: IosTemplate) {
+    return of(iosTemplate);
+  }
 }
 
 describe('IosTemplateDetailsComponent', () => {
-    let component: IosTemplateDetailsComponent;
-    let fixture: ComponentFixture<IosTemplateDetailsComponent>;
+  let component: IosTemplateDetailsComponent;
+  let fixture: ComponentFixture<IosTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIosService = new MockedIosService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: IosService, useValue: mockedIosService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: IosConfigurationService, useClass: IosConfigurationService }
-          ],
-          declarations: [
-              IosTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIosService = new MockedIosService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IosTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IosService, useValue: mockedIosService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: IosConfigurationService, useClass: IosConfigurationService },
+      ],
+      declarations: [IosTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IosTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedIosService, 'saveTemplate').and.returnValue(of({} as IosTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.generalSettingsForm.controls['path'].setValue('path');
-        component.generalSettingsForm.controls['initialConfig'].setValue('txt');
-        component.memoryForm.controls['ram'].setValue('0');
-        component.memoryForm.controls['nvram'].setValue('0');
-        component.memoryForm.controls['iomemory'].setValue('0');
-        component.memoryForm.controls['disk0'].setValue('0');
-        component.memoryForm.controls['disk1'].setValue('0');
-        component.advancedForm.controls['systemId'].setValue('0');
-        component.advancedForm.controls['idlemax'].setValue('0');
-        component.advancedForm.controls['idlesleep'].setValue('0');
-        component.advancedForm.controls['execarea'].setValue('0');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedIosService, 'saveTemplate').and.returnValue(of({} as IosTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.generalSettingsForm.controls['path'].setValue('path');
+    component.generalSettingsForm.controls['initialConfig'].setValue('txt');
+    component.memoryForm.controls['ram'].setValue('0');
+    component.memoryForm.controls['nvram'].setValue('0');
+    component.memoryForm.controls['iomemory'].setValue('0');
+    component.memoryForm.controls['disk0'].setValue('0');
+    component.memoryForm.controls['disk1'].setValue('0');
+    component.advancedForm.controls['systemId'].setValue('0');
+    component.advancedForm.controls['idlemax'].setValue('0');
+    component.advancedForm.controls['idlesleep'].setValue('0');
+    component.advancedForm.controls['execarea'].setValue('0');
 
-        expect(mockedIosService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedIosService.saveTemplate).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
index 22be26da..80fc5e7e 100644
--- a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
+++ b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -8,138 +8,137 @@ import { IosTemplate } from '../../../../models/templates/ios-template';
 import { IosService } from '../../../../services/ios.service';
 import { IosConfigurationService } from '../../../../services/ios-configuration.service';
 
-
 @Component({
-    selector: 'app-ios-template-details',
-    templateUrl: './ios-template-details.component.html',
-    styleUrls: ['./ios-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-ios-template-details',
+  templateUrl: './ios-template-details.component.html',
+  styleUrls: ['./ios-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class IosTemplateDetailsComponent implements OnInit {
-    server: Server;
-    iosTemplate: IosTemplate;
+  server: Server;
+  iosTemplate: IosTemplate;
 
-    isSymbolSelectionOpened: boolean = false;
+  isSymbolSelectionOpened: boolean = false;
 
-    networkAdaptersForTemplate: string[] = [];
-    platforms: string[] = [];
-    consoleTypes: string[] = [];
-    platformsWithEtherSwitchRouterOption = {};
-    platformsWithChassis = {};
-    chassis = {};
-    defaultRam = {};
-    defaultNvram = {};
-    networkAdapters = {};
-    networkAdaptersForPlatform = {};
-    networkModules = {};
+  networkAdaptersForTemplate: string[] = [];
+  platforms: string[] = [];
+  consoleTypes: string[] = [];
+  platformsWithEtherSwitchRouterOption = {};
+  platformsWithChassis = {};
+  chassis = {};
+  defaultRam = {};
+  defaultNvram = {};
+  networkAdapters = {};
+  networkAdaptersForPlatform = {};
+  networkModules = {};
 
-    generalSettingsForm: FormGroup;
-    memoryForm: FormGroup;
-    advancedForm: FormGroup;
+  generalSettingsForm: FormGroup;
+  memoryForm: FormGroup;
+  advancedForm: FormGroup;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iosService: IosService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private iosConfigurationService: IosConfigurationService,
-        private router: Router
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required),
-            path: new FormControl('', Validators.required),
-            initialConfig: new FormControl('', Validators.required) 
-        });
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iosService: IosService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private iosConfigurationService: IosConfigurationService,
+    private router: Router
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+      path: new FormControl('', Validators.required),
+      initialConfig: new FormControl('', Validators.required),
+    });
 
-        this.memoryForm = this.formBuilder.group({
-            ram: new FormControl('', Validators.required),
-            nvram: new FormControl('', Validators.required),
-            iomemory: new FormControl('', Validators.required),
-            disk0: new FormControl('', Validators.required),
-            disk1: new FormControl('', Validators.required),
-        });
+    this.memoryForm = this.formBuilder.group({
+      ram: new FormControl('', Validators.required),
+      nvram: new FormControl('', Validators.required),
+      iomemory: new FormControl('', Validators.required),
+      disk0: new FormControl('', Validators.required),
+      disk1: new FormControl('', Validators.required),
+    });
 
-        this.advancedForm = this.formBuilder.group({
-            systemId: new FormControl('', Validators.required),
-            idlemax: new FormControl('', Validators.required),
-            idlesleep: new FormControl('', Validators.required),
-            execarea: new FormControl('', Validators.required),
-        });
+    this.advancedForm = this.formBuilder.group({
+      systemId: new FormControl('', Validators.required),
+      idlemax: new FormControl('', Validators.required),
+      idlesleep: new FormControl('', Validators.required),
+      execarea: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
+        this.iosTemplate = iosTemplate;
+
+        this.fillAdaptersData();
+      });
+    });
+  }
+
+  getConfiguration() {
+    this.networkModules = this.iosConfigurationService.getNetworkModules();
+    this.networkAdaptersForPlatform = this.iosConfigurationService.getNetworkAdaptersForPlatform();
+    this.networkAdapters = this.iosConfigurationService.getNetworkAdapters();
+    this.platforms = this.iosConfigurationService.getAvailablePlatforms();
+    this.platformsWithEtherSwitchRouterOption = this.iosConfigurationService.getPlatformsWithEtherSwitchRouterOption();
+    this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
+    this.chassis = this.iosConfigurationService.getChassis();
+    this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
+    this.consoleTypes = this.iosConfigurationService.getConsoleTypes();
+  }
+
+  fillAdaptersData() {
+    if (this.iosTemplate.slot0) this.networkAdaptersForTemplate[0] = this.iosTemplate.slot0;
+    if (this.iosTemplate.slot1) this.networkAdaptersForTemplate[1] = this.iosTemplate.slot1;
+    if (this.iosTemplate.slot2) this.networkAdaptersForTemplate[2] = this.iosTemplate.slot2;
+    if (this.iosTemplate.slot3) this.networkAdaptersForTemplate[3] = this.iosTemplate.slot3;
+    if (this.iosTemplate.slot4) this.networkAdaptersForTemplate[4] = this.iosTemplate.slot4;
+    if (this.iosTemplate.slot5) this.networkAdaptersForTemplate[5] = this.iosTemplate.slot5;
+    if (this.iosTemplate.slot6) this.networkAdaptersForTemplate[6] = this.iosTemplate.slot6;
+    if (this.iosTemplate.slot7) this.networkAdaptersForTemplate[7] = this.iosTemplate.slot7;
+  }
+
+  completeAdaptersData() {
+    if (this.networkAdaptersForTemplate[0]) this.iosTemplate.slot0 = this.networkAdaptersForTemplate[0];
+    if (this.networkAdaptersForTemplate[1]) this.iosTemplate.slot1 = this.networkAdaptersForTemplate[1];
+    if (this.networkAdaptersForTemplate[2]) this.iosTemplate.slot2 = this.networkAdaptersForTemplate[2];
+    if (this.networkAdaptersForTemplate[3]) this.iosTemplate.slot3 = this.networkAdaptersForTemplate[3];
+    if (this.networkAdaptersForTemplate[4]) this.iosTemplate.slot4 = this.networkAdaptersForTemplate[4];
+    if (this.networkAdaptersForTemplate[5]) this.iosTemplate.slot5 = this.networkAdaptersForTemplate[5];
+    if (this.networkAdaptersForTemplate[6]) this.iosTemplate.slot6 = this.networkAdaptersForTemplate[6];
+    if (this.networkAdaptersForTemplate[7]) this.iosTemplate.slot7 = this.networkAdaptersForTemplate[7];
+  }
+
+  onSave() {
+    if (this.generalSettingsForm.invalid || this.memoryForm.invalid || this.advancedForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.completeAdaptersData();
+
+      this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
+  }
 
-            this.getConfiguration();
-            this.iosService.getTemplate(this.server, template_id).subscribe((iosTemplate: IosTemplate) => {
-                this.iosTemplate = iosTemplate;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-                this.fillAdaptersData();
-            });
-        });
-    }
-
-    getConfiguration() {
-        this.networkModules = this.iosConfigurationService.getNetworkModules();
-        this.networkAdaptersForPlatform = this.iosConfigurationService.getNetworkAdaptersForPlatform();
-        this.networkAdapters = this.iosConfigurationService.getNetworkAdapters();
-        this.platforms = this.iosConfigurationService.getAvailablePlatforms();
-        this.platformsWithEtherSwitchRouterOption = this.iosConfigurationService.getPlatformsWithEtherSwitchRouterOption();
-        this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
-        this.chassis = this.iosConfigurationService.getChassis();
-        this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
-        this.consoleTypes = this.iosConfigurationService.getConsoleTypes();
-    }
-
-    fillAdaptersData() {
-        if (this.iosTemplate.slot0) this.networkAdaptersForTemplate[0] = this.iosTemplate.slot0;
-        if (this.iosTemplate.slot1) this.networkAdaptersForTemplate[1] = this.iosTemplate.slot1;
-        if (this.iosTemplate.slot2) this.networkAdaptersForTemplate[2] = this.iosTemplate.slot2;
-        if (this.iosTemplate.slot3) this.networkAdaptersForTemplate[3] = this.iosTemplate.slot3;
-        if (this.iosTemplate.slot4) this.networkAdaptersForTemplate[4] = this.iosTemplate.slot4;
-        if (this.iosTemplate.slot5) this.networkAdaptersForTemplate[5] = this.iosTemplate.slot5;
-        if (this.iosTemplate.slot6) this.networkAdaptersForTemplate[6] = this.iosTemplate.slot6;
-        if (this.iosTemplate.slot7) this.networkAdaptersForTemplate[7] = this.iosTemplate.slot7;
-    }
-
-    completeAdaptersData() {
-        if (this.networkAdaptersForTemplate[0]) this.iosTemplate.slot0 = this.networkAdaptersForTemplate[0];
-        if (this.networkAdaptersForTemplate[1]) this.iosTemplate.slot1 = this.networkAdaptersForTemplate[1];
-        if (this.networkAdaptersForTemplate[2]) this.iosTemplate.slot2 = this.networkAdaptersForTemplate[2];
-        if (this.networkAdaptersForTemplate[3]) this.iosTemplate.slot3 = this.networkAdaptersForTemplate[3];
-        if (this.networkAdaptersForTemplate[4]) this.iosTemplate.slot4 = this.networkAdaptersForTemplate[4];
-        if (this.networkAdaptersForTemplate[5]) this.iosTemplate.slot5 = this.networkAdaptersForTemplate[5];
-        if (this.networkAdaptersForTemplate[6]) this.iosTemplate.slot6 = this.networkAdaptersForTemplate[6];
-        if (this.networkAdaptersForTemplate[7]) this.iosTemplate.slot7 = this.networkAdaptersForTemplate[7];
-    }
-
-    onSave() {
-        if (this.generalSettingsForm.invalid || this.memoryForm.invalid || this.advancedForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.completeAdaptersData();
-        
-            this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.iosTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.iosTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
index 9a573ad3..d522abb8 100644
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html
@@ -1,35 +1,49 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">IOS router templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/templates/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">IOS router templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/dynamips/templates/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add IOS router template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="iosTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of iosTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                        <button mat-menu-item (click)="copyTemplate(template)">
-                            <mat-icon>content_copy</mat-icon><span>Copy</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="iosTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of iosTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+            <button mat-menu-item (click)="copyTemplate(template)">
+              <mat-icon>content_copy</mat-icon><span>Copy</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts
index 18b42cb1..bbeabbfc 100644
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { IosTemplatesComponent } from './ios-templates.component';
 import { IosService } from '../../../../services/ios.service';
 
 export class MockedIosService {
-    public getTemplates(server: Server) {
-        return of([{} as IosTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as IosTemplate]);
+  }
 }
 
 describe('IosTemplatesComponent', () => {
-    let component: IosTemplatesComponent;
-    let fixture: ComponentFixture<IosTemplatesComponent>;
+  let component: IosTemplatesComponent;
+  let fixture: ComponentFixture<IosTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIosService = new MockedIosService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: IosService, useValue: mockedIosService }
-          ],
-          declarations: [
-              IosTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIosService = new MockedIosService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IosTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IosService, useValue: mockedIosService },
+      ],
+      declarations: [IosTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IosTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
index d8536d8f..28d8b717 100644
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -7,47 +7,54 @@ import { IosTemplate } from '../../../../models/templates/ios-template';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 
-
 @Component({
-    selector: 'app-ios-templates',
-    templateUrl: './ios-templates.component.html',
-    styleUrls: ['./ios-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-ios-templates',
+  templateUrl: './ios-templates.component.html',
+  styleUrls: ['./ios-templates.component.scss', '../../preferences.component.scss'],
 })
 export class IosTemplatesComponent implements OnInit {
-    server: Server;
-    iosTemplates: IosTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  iosTemplates: IosTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iosService: IosService,
-        private router: Router
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iosService: IosService,
+    private router: Router
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
-            this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips' && !elem.builtin);
-        });
-    }
-    
-    deleteTemplate(template: VpcsTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  getTemplates() {
+    this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
+      this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips' && !elem.builtin);
+    });
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  deleteTemplate(template: VpcsTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    copyTemplate(template: IosTemplate) {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates', template.template_id, 'copy']);
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
+
+  copyTemplate(template: IosTemplate) {
+    this.router.navigate([
+      '/server',
+      this.server.id,
+      'preferences',
+      'dynamips',
+      'templates',
+      template.template_id,
+      'copy',
+    ]);
+  }
 }
diff --git a/src/app/components/preferences/general/general-preferences.component.html b/src/app/components/preferences/general/general-preferences.component.html
index 86867d4d..a521a9ac 100644
--- a/src/app/components/preferences/general/general-preferences.component.html
+++ b/src/app/components/preferences/general/general-preferences.component.html
@@ -1,10 +1,10 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">General preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8"></div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">General preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8"></div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/general/general-preferences.component.spec.ts b/src/app/components/preferences/general/general-preferences.component.spec.ts
index 7b678c20..06eb5f4a 100644
--- a/src/app/components/preferences/general/general-preferences.component.spec.ts
+++ b/src/app/components/preferences/general/general-preferences.component.spec.ts
@@ -12,36 +12,43 @@ import { GeneralPreferencesComponent } from './general-preferences.component';
 import { MockedActivatedRoute } from '../preferences.component.spec';
 
 describe('GeneralPreferencesComponent', () => {
-    let component: GeneralPreferencesComponent;
-    let fixture: ComponentFixture<GeneralPreferencesComponent>;
-    let activatedRoute = new MockedActivatedRoute().get();
-  
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-        providers: [
-            {
-                provide: ActivatedRoute,  useValue: activatedRoute
-            }
-        ],
-        declarations: [
-            GeneralPreferencesComponent
-        ],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).compileComponents();
-    }));
-  
-    beforeEach(() => {
-      fixture = TestBed.createComponent(GeneralPreferencesComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
-    });
-  
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  let component: GeneralPreferencesComponent;
+  let fixture: ComponentFixture<GeneralPreferencesComponent>;
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    it('should set correct server id', () => {
-        expect(component.serverId).toBe('1');
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+      ],
+      declarations: [GeneralPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeneralPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set correct server id', () => {
+    expect(component.serverId).toBe('1');
+  });
 });
diff --git a/src/app/components/preferences/general/general-preferences.component.ts b/src/app/components/preferences/general/general-preferences.component.ts
index 0863e2fe..e9f24013 100644
--- a/src/app/components/preferences/general/general-preferences.component.ts
+++ b/src/app/components/preferences/general/general-preferences.component.ts
@@ -1,20 +1,17 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-
 @Component({
-    selector: 'app-general-preferences',
-    templateUrl: './general-preferences.component.html',
-    styleUrls: ['./general-preferences.component.scss']
+  selector: 'app-general-preferences',
+  templateUrl: './general-preferences.component.html',
+  styleUrls: ['./general-preferences.component.scss'],
 })
 export class GeneralPreferencesComponent implements OnInit {
-    public serverId: string = "";
+  public serverId: string = '';
 
-    constructor(
-        private route: ActivatedRoute
-    ) {}
+  constructor(private route: ActivatedRoute) {}
 
-    ngOnInit() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-    }
+  ngOnInit() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+  }
 }
diff --git a/src/app/components/preferences/gns3vm/gns3vm.component.html b/src/app/components/preferences/gns3vm/gns3vm.component.html
index 3e249db6..8f14cd4f 100644
--- a/src/app/components/preferences/gns3vm/gns3vm.component.html
+++ b/src/app/components/preferences/gns3vm/gns3vm.component.html
@@ -1,52 +1,66 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">GNS3 VM preferences</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">GNS3 VM preferences</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard" *ngIf="gns3vm">
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.enable">
-                Enable the GNS3 VM
-            </mat-checkbox>
-            <mat-form-field class="select">
-                <mat-select (selectionChange)="changeVmEngine($event)" [ngModelOptions]="{standalone: true}" placeholder="Virtualization engine" [(ngModel)]="gns3vm.engine">
-                    <mat-option *ngFor="let engine of vmEngines" [value]="engine.engine_id">
-                        {{engine.name}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field class="select">
-                <mat-select [ngModelOptions]="{standalone: true}" placeholder="VM name" [(ngModel)]="gns3vm.vmname">
-                    <mat-option *ngFor="let vm of vms" [value]="vm.vmname">
-                        {{vm.vmname}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-checkbox *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.headless">
-                Run the VM in headless mode
-            </mat-checkbox>
-            <form *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
-                <mat-form-field *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" class="form-field">
-                    <input matInput type="number" [ngModelOptions]="{standalone: true}" [(ngModel)]="port" placeholder="Port">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="ram" type="number" placeholder="RAM">
-                    <span matSuffix>MB</span>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="vcpus" type="number" placeholder="vCPUs">
-                </mat-form-field>
-            </form>
-            <mat-radio-group *ngIf="gns3vm.engine !== 'remote'" [(ngModel)]="gns3vm.when_exit"  aria-label="Actions when closing GNS3" class="radio-selection">
-                <mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
-                <mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
-                <mat-radio-button value="stop" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
-            </mat-radio-group>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="save()">Save</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard" *ngIf="gns3vm">
+      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="gns3vm.enable">
+        Enable the GNS3 VM
+      </mat-checkbox>
+      <mat-form-field class="select">
+        <mat-select
+          (selectionChange)="changeVmEngine($event)"
+          [ngModelOptions]="{ standalone: true }"
+          placeholder="Virtualization engine"
+          [(ngModel)]="gns3vm.engine"
+        >
+          <mat-option *ngFor="let engine of vmEngines" [value]="engine.engine_id">
+            {{ engine.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="select">
+        <mat-select [ngModelOptions]="{ standalone: true }" placeholder="VM name" [(ngModel)]="gns3vm.vmname">
+          <mat-option *ngFor="let vm of vms" [value]="vm.vmname">
+            {{ vm.vmname }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-checkbox
+        *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="gns3vm.headless"
+      >
+        Run the VM in headless mode
+      </mat-checkbox>
+      <form *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
+        <mat-form-field *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" class="form-field">
+          <input matInput type="number" [ngModelOptions]="{ standalone: true }" [(ngModel)]="port" placeholder="Port" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput formControlName="ram" type="number" placeholder="RAM" />
+          <span matSuffix>MB</span>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput formControlName="vcpus" type="number" placeholder="vCPUs" />
+        </mat-form-field>
+      </form>
+      <mat-radio-group
+        *ngIf="gns3vm.engine !== 'remote'"
+        [(ngModel)]="gns3vm.when_exit"
+        aria-label="Actions when closing GNS3"
+        class="radio-selection"
+      >
+        <mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
+        <mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
+        <mat-radio-button value="stop" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
+      </mat-radio-group>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="save()">Save</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/gns3vm/gns3vm.component.scss b/src/app/components/preferences/gns3vm/gns3vm.component.scss
index 98ba27a0..d1ec18bf 100644
--- a/src/app/components/preferences/gns3vm/gns3vm.component.scss
+++ b/src/app/components/preferences/gns3vm/gns3vm.component.scss
@@ -1,12 +1,12 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .select {
-    width: 100%;
+  width: 100%;
 }
 
 .radio-selection {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/app/components/preferences/gns3vm/gns3vm.component.ts b/src/app/components/preferences/gns3vm/gns3vm.component.ts
index b49ba281..06d983e1 100644
--- a/src/app/components/preferences/gns3vm/gns3vm.component.ts
+++ b/src/app/components/preferences/gns3vm/gns3vm.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Gns3vmService } from '../../../services/gns3vm.service';
 import { Gns3vm } from '../../../models/gns3vm/gns3vm';
@@ -9,82 +9,81 @@ import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
 import { ToasterService } from '../../../services/toaster.service';
 import { VM } from '../../../models/gns3vm/vm';
 
-
 @Component({
-    selector: 'app-gns3vm',
-    templateUrl: './gns3vm.component.html',
-    styleUrls: ['./gns3vm.component.scss']
+  selector: 'app-gns3vm',
+  templateUrl: './gns3vm.component.html',
+  styleUrls: ['./gns3vm.component.scss'],
 })
 export class Gns3vmComponent implements OnInit {
-    public server: Server;
-    public gns3vm: Gns3vm;
-    public vmEngines: Gns3vmEngine[];
-    public vms: VM[] = [];
-    public vmForm: FormGroup;
-    public port: number;
+  public server: Server;
+  public gns3vm: Gns3vm;
+  public vmEngines: Gns3vmEngine[];
+  public vms: VM[] = [];
+  public vmForm: FormGroup;
+  public port: number;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private gns3vmService: Gns3vmService,
-        private router: Router,
-        private formBuilder: FormBuilder,
-        private toasterService: ToasterService
-    ) {
-        this.vmForm = this.formBuilder.group({
-            ram: new FormControl(null, [Validators.required]),
-            vcpus: new FormControl(null, [Validators.required])
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private gns3vmService: Gns3vmService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private toasterService: ToasterService
+  ) {
+    this.vmForm = this.formBuilder.group({
+      ram: new FormControl(null, [Validators.required]),
+      vcpus: new FormControl(null, [Validators.required]),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.gns3vmService.getGns3vm(this.server).subscribe((vm: Gns3vm) => {
+        this.gns3vm = vm;
+        this.vmForm.controls['ram'].setValue(this.gns3vm.ram);
+        this.vmForm.controls['vcpus'].setValue(this.gns3vm.vcpus);
+        if (this.gns3vm.port) this.port = this.gns3vm.port;
+        this.gns3vmService.getGns3vmEngines(this.server).subscribe((vmEngines: Gns3vmEngine[]) => {
+          this.vmEngines = vmEngines;
         });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.gns3vmService.getGns3vm(this.server).subscribe((vm: Gns3vm) => {
-                this.gns3vm = vm;
-                this.vmForm.controls['ram'].setValue(this.gns3vm.ram);
-                this.vmForm.controls['vcpus'].setValue(this.gns3vm.vcpus);
-                if (this.gns3vm.port) this.port = this.gns3vm.port;
-                this.gns3vmService.getGns3vmEngines(this.server).subscribe((vmEngines: Gns3vmEngine[]) => {
-                    this.vmEngines = vmEngines;
-                });
-                this.gns3vmService.getVms(this.server, this.gns3vm.engine).subscribe((vms: VM[]) => {
-                    this.vms = vms;
-                });
-            });
+        this.gns3vmService.getVms(this.server, this.gns3vm.engine).subscribe((vms: VM[]) => {
+          this.vms = vms;
         });
-    }
+      });
+    });
+  }
 
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences']);
-    }
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences']);
+  }
 
-    setCloseAction(action: string) {
-        this.gns3vm.when_exit = action;
-    }
+  setCloseAction(action: string) {
+    this.gns3vm.when_exit = action;
+  }
 
-    changeVmEngine(event) {
-        this.gns3vmService.getVms(this.server, event.value).subscribe(
-            (vms: VM[]) => {
-                this.vms = vms;
-            },
-            error => {}
-        );
-    }
+  changeVmEngine(event) {
+    this.gns3vmService.getVms(this.server, event.value).subscribe(
+      (vms: VM[]) => {
+        this.vms = vms;
+      },
+      (error) => {}
+    );
+  }
 
-    save() {
-        if ((this.vmForm.valid && this.gns3vm.vmname) || (this.gns3vm.engine==='remote' && this.gns3vm.vmname)) {
-            this.gns3vm.ram = this.vmForm.get('ram').value;
-            this.gns3vm.vcpus= this.vmForm.get('vcpus').value;
-            if (this.port) this.gns3vm.port = this.port;
+  save() {
+    if ((this.vmForm.valid && this.gns3vm.vmname) || (this.gns3vm.engine === 'remote' && this.gns3vm.vmname)) {
+      this.gns3vm.ram = this.vmForm.get('ram').value;
+      this.gns3vm.vcpus = this.vmForm.get('vcpus').value;
+      if (this.port) this.gns3vm.port = this.port;
 
-            this.gns3vmService.updateGns3vm(this.server, this.gns3vm).subscribe(() => {
-                this.toasterService.success('GNS3 VM updated.');
-            });
-            this.goBack();
-        } else {
-            this.toasterService.error('Fill all required fields with correct values.');
-        }
+      this.gns3vmService.updateGns3vm(this.server, this.gns3vm).subscribe(() => {
+        this.toasterService.success('GNS3 VM updated.');
+      });
+      this.goBack();
+    } else {
+      this.toasterService.error('Fill all required fields with correct values.');
     }
+  }
 }
diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
index 021bdd78..28c73807 100644
--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
@@ -1,78 +1,85 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New IOU device template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New IOU device template</h1>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <mat-vertical-stepper [linear]="true">
-                <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this IOU device locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this IOU device on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </mat-step>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-vertical-stepper [linear]="true">
+        <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
+          <mat-radio-group class="radio-group">
+            <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+              >Run this IOU device locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Run this IOU device on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </mat-step>
 
-                <mat-step label="Name" [completed]="templateNameForm.get('templateName').value">
-                    <form [formGroup]="templateNameForm">
-                        <mat-form-field class="form-field">
-                            <input matInput placeholder="Name" type="text" formControlName="templateName"/>
-                        </mat-form-field>
-                    </form>
-                </mat-step>
+        <mat-step label="Name" [completed]="templateNameForm.get('templateName').value">
+          <form [formGroup]="templateNameForm">
+            <mat-form-field class="form-field">
+              <input matInput placeholder="Name" type="text" formControlName="templateName" />
+            </mat-form-field>
+          </form>
+        </mat-step>
 
-                <mat-step label="Image">
-                    <form [formGroup]="imageForm">
-                        <mat-radio-group class="radio-group">
-                            <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked>Existing image</mat-radio-button>
-                            <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')">New image</mat-radio-button>
-                        </mat-radio-group>
-                        <mat-form-field class="form-field">
-                            <mat-select
-                                placeholder="Type"
-                                [(ngModel)]="selectedType"
-                                [ngModelOptions]="{standalone: true}">
-                                <mat-option *ngFor="let type of types" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="form-field" *ngIf="!newImageSelected">
-                            <mat-select
-                                placeholder="IOU image"
-                                [(ngModel)]="iouTemplate.path"
-                                [ngModelOptions]="{standalone: true}">
-                                <mat-option *ngFor="let image of iouImages" [value]="image.path">
-                                    {{image.path}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <div *ngIf="newImageSelected">
-                            <input
-                                type="file"
-                                accept=".bin"
-                                #file
-                                class="nonvisible"
-                                (change)="uploadImageFile($event)"
-                                ng2FileSelect
-                                [uploader]="uploader"/>
-                            <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    formControlName="imageName"
-                                    placeholder="IOU image"/>
-                            </mat-form-field>
-                        </div>
-                    </form>
-                </mat-step>
-            </mat-vertical-stepper>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+        <mat-step label="Image">
+          <form [formGroup]="imageForm">
+            <mat-radio-group class="radio-group">
+              <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked
+                >Existing image</mat-radio-button
+              >
+              <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')"
+                >New image</mat-radio-button
+              >
+            </mat-radio-group>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Type" [(ngModel)]="selectedType" [ngModelOptions]="{ standalone: true }">
+                <mat-option *ngFor="let type of types" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="form-field" *ngIf="!newImageSelected">
+              <mat-select
+                placeholder="IOU image"
+                [(ngModel)]="iouTemplate.path"
+                [ngModelOptions]="{ standalone: true }"
+              >
+                <mat-option *ngFor="let image of iouImages" [value]="image.path">
+                  {{ image.path }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div *ngIf="newImageSelected">
+              <input
+                type="file"
+                accept=".bin"
+                #file
+                class="nonvisible"
+                (change)="uploadImageFile($event)"
+                ng2FileSelect
+                [uploader]="uploader"
+              />
+              <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+              <mat-form-field class="file-name-form-field">
+                <input matInput type="text" formControlName="imageName" placeholder="IOU image" />
+              </mat-form-field>
+            </div>
+          </form>
+        </mat-step>
+      </mat-vertical-stepper>
     </div>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.spec.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.spec.ts
index a2e52326..7d65bcde 100644
--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.spec.ts
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.spec.ts
@@ -29,96 +29,96 @@ import { IouService } from '../../../../services/iou.service';
 import { IouConfigurationService } from '../../../../services/iou-configuration.service';
 
 export class MockedIouService {
-    public addTemplate(server: Server, iouTemplate: IouTemplate) {
-        return of(iouTemplate);
-    }
+  public addTemplate(server: Server, iouTemplate: IouTemplate) {
+    return of(iouTemplate);
+  }
 }
 
 //Tests disabled due to instability
 xdescribe('AddIouTemplateComponent', () => {
-    let component: AddIouTemplateComponent;
-    let fixture: ComponentFixture<AddIouTemplateComponent>;
+  let component: AddIouTemplateComponent;
+  let fixture: ComponentFixture<AddIouTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIouService = new MockedIouService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                MatStepperModule, 
-                FormsModule, 
-                MatTableModule, 
-                MatAutocompleteModule, 
-                MatFormFieldModule, 
-                MatInputModule, 
-                ReactiveFormsModule, 
-                MatSelectModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/iou/templates', component: AddIouTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: IouService, useValue: mockedIouService },
-                { provide: ToasterService, useValue: mockedToasterService},
-                { provide: TemplateMocksService, useClass: TemplateMocksService },
-                { provide: IouConfigurationService, useClass: IouConfigurationService }
-            ],
-            declarations: [
-                AddIouTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIouService = new MockedIouService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddIouTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatStepperModule,
+        FormsModule,
+        MatTableModule,
+        MatAutocompleteModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/iou/templates', component: AddIouTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IouService, useValue: mockedIouService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+        { provide: IouConfigurationService, useClass: IouConfigurationService },
+      ],
+      declarations: [AddIouTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddIouTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
-        component.templateNameForm.controls['templateName'].setValue('sample name');
-        component.imageForm.controls['imageName'].setValue('sample name');
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
+    component.templateNameForm.controls['templateName'].setValue('sample name');
+    component.imageForm.controls['imageName'].setValue('sample name');
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIouService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
-        component.imageForm.controls['imageName'].setValue('sample name');
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
+    expect(mockedIouService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
+    component.imageForm.controls['imageName'].setValue('sample name');
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIouService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when image is not entered', () => {
-        spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
-        component.templateNameForm.controls['templateName'].setValue('sample name');
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
+    expect(mockedIouService.addTemplate).not.toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when image is not entered', () => {
+    spyOn(mockedIouService, 'addTemplate').and.returnValue(of({} as IouTemplate));
+    component.templateNameForm.controls['templateName'].setValue('sample name');
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-        expect(mockedIouService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedIouService.addTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
index 0927724d..14478b0a 100644
--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -13,140 +13,142 @@ import { Compute } from '../../../../models/compute';
 import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
 import { IouImage } from '../../../../models/iou/iou-image';
 
-
 @Component({
-    selector: 'app-add-iou-template',
-    templateUrl: './add-iou-template.component.html',
-    styleUrls: ['./add-iou-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-iou-template',
+  templateUrl: './add-iou-template.component.html',
+  styleUrls: ['./add-iou-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddIouTemplateComponent implements OnInit {
-    server: Server;
-    iouTemplate: IouTemplate;
-    isRemoteComputerChosen: boolean = false;
-    newImageSelected: boolean = false;
-    types: string[] = ['L2 image', 'L3 image'];
-    selectedType: string;
-    iouImages: IouImage[] = [];
-    uploader: FileUploader;
+  server: Server;
+  iouTemplate: IouTemplate;
+  isRemoteComputerChosen: boolean = false;
+  newImageSelected: boolean = false;
+  types: string[] = ['L2 image', 'L3 image'];
+  selectedType: string;
+  iouImages: IouImage[] = [];
+  uploader: FileUploader;
 
-    templateNameForm: FormGroup;
-    imageForm: FormGroup;
+  templateNameForm: FormGroup;
+  imageForm: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iouService: IouService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder,
-        private templateMocksService: TemplateMocksService,
-        private computeService: ComputeService
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iouService: IouService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private templateMocksService: TemplateMocksService,
+    private computeService: ComputeService
+  ) {
+    this.iouTemplate = new IouTemplate();
+
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, Validators.required),
+    });
+
+    this.imageForm = this.formBuilder.group({
+      imageName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.uploader = new FileUploader({});
+    this.uploader.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+    this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+      this.toasterService.error('An error occured: ' + response);
+    };
+    this.uploader.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.getImages();
+      this.toasterService.success('Image uploaded');
+    };
+
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getImages();
+
+      this.templateMocksService.getIouTemplate().subscribe((iouTemplate: IouTemplate) => {
+        this.iouTemplate = iouTemplate;
+      });
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  getImages() {
+    this.iouService.getImages(this.server).subscribe((images: IouImage[]) => {
+      this.iouImages = images;
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
+    }
+  }
+
+  setDiskImage(value: string) {
+    this.newImageSelected = value === 'newImage';
+  }
+
+  uploadImageFile(event): void {
+    let name = event.target.files[0].name;
+    this.imageForm.controls['imageName'].setValue(name);
+
+    const url = this.iouService.getImagePath(this.server, name);
+    this.uploader.queue.forEach((elem) => (elem.url = url));
+
+    const itemToUpload = this.uploader.queue[0];
+    (itemToUpload as any).options.disableMultipart = true;
+
+    this.uploader.uploadItem(itemToUpload);
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
+  }
+
+  addTemplate() {
+    if (
+      !this.templateNameForm.invalid &&
+      ((this.newImageSelected && !this.imageForm.invalid) || (!this.newImageSelected && this.iouTemplate.path))
     ) {
-        this.iouTemplate = new IouTemplate();
+      this.iouTemplate.template_id = uuid();
+      this.iouTemplate.name = this.templateNameForm.get('templateName').value;
+      if (this.newImageSelected) this.iouTemplate.path = this.imageForm.get('imageName').value;
+      this.iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, Validators.required)
-        });
+      if (this.selectedType === 'L2 image') {
+        this.iouTemplate.ethernet_adapters = 4;
+        this.iouTemplate.serial_adapters = 0;
+      } else if (this.selectedType === 'L3 image') {
+        this.iouTemplate.ethernet_adapters = 2;
+        this.iouTemplate.serial_adapters = 2;
+      }
 
-        this.imageForm = this.formBuilder.group({
-            imageName: new FormControl('', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        this.uploader = new FileUploader({});
-        this.uploader.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error occured: ' + response);
-        };
-        this.uploader.onSuccessItem = (
-            item: FileItem,
-            response: string,
-            status: number,
-            headers: ParsedResponseHeaders
-        ) => {
-            this.getImages();
-            this.toasterService.success('Image uploaded');
-        };
-        
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getImages();
-
-            this.templateMocksService.getIouTemplate().subscribe((iouTemplate: IouTemplate) => {
-                this.iouTemplate = iouTemplate;
-            })
-
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    getImages() {
-        this.iouService.getImages(this.server).subscribe((images: IouImage[]) => {
-            this.iouImages = images;
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    setDiskImage(value: string) {
-        this.newImageSelected = value === "newImage";
-    }
-
-    uploadImageFile(event): void {
-        let name = event.target.files[0].name;
-        this.imageForm.controls['imageName'].setValue(name);
-
-        const url = this.iouService.getImagePath(this.server, name);
-        this.uploader.queue.forEach(elem => (elem.url = url));
-
-        const itemToUpload = this.uploader.queue[0];
-        (itemToUpload as any).options.disableMultipart = true;
-
-        this.uploader.uploadItem(itemToUpload);
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid && ((this.newImageSelected && !this.imageForm.invalid) || (!this.newImageSelected && this.iouTemplate.path))) {
-            this.iouTemplate.template_id = uuid();
-            this.iouTemplate.name = this.templateNameForm.get("templateName").value;
-            if (this.newImageSelected) this.iouTemplate.path = this.imageForm.get("imageName").value;
-            this.iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-            
-            if (this.selectedType === 'L2 image') {
-                this.iouTemplate.ethernet_adapters = 4;
-                this.iouTemplate.serial_adapters = 0;
-            } else if (this.selectedType === 'L3 image') {
-                this.iouTemplate.ethernet_adapters = 2;
-                this.iouTemplate.serial_adapters = 2;
-            }
-
-            this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+      this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html b/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html
index 2c9a0908..b9ca4669 100644
--- a/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html
+++ b/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html
@@ -1,24 +1,20 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Copy IOU device template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Copy IOU device template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <form [formGroup]="templateNameForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="templateName" 
-                        placeholder="Name"
-                        formControlName="templateName"/>
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <form [formGroup]="templateNameForm">
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="templateName" placeholder="Name" formControlName="templateName" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts b/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
index a430d34a..b65640d6 100644
--- a/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
+++ b/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -8,59 +8,57 @@ import { IouTemplate } from '../../../../models/templates/iou-template';
 import { IouService } from '../../../../services/iou.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-copy-iou-template',
-    templateUrl: './copy-iou-template.component.html',
-    styleUrls: ['./copy-iou-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-copy-iou-template',
+  templateUrl: './copy-iou-template.component.html',
+  styleUrls: ['./copy-iou-template.component.scss', '../../preferences.component.scss'],
 })
 export class CopyIouTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    iouTemplate: IouTemplate;
-    templateNameForm: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private qemuService: IouService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.qemuService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
-                this.iouTemplate = iouTemplate;
-                this.templateName = `Copy of ${this.iouTemplate.name}`;
-            })
-
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid) {
-            this.iouTemplate.template_id = uuid();
-            this.iouTemplate.name = this.templateName;
-
-            this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  server: Server;
+  templateName: string = '';
+  iouTemplate: IouTemplate;
+  templateNameForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private qemuService: IouService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.qemuService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
+        this.iouTemplate = iouTemplate;
+        this.templateName = `Copy of ${this.iouTemplate.name}`;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.templateNameForm.invalid) {
+      this.iouTemplate.template_id = uuid();
+      this.iouTemplate.name = this.templateName;
+
+      this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
index f72a597a..6d8cc52b 100644
--- a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
+++ b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
@@ -1,113 +1,156 @@
-<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="form-field">
-            <h1 class="col">IOU device configuration</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="form-field">
+      <h1 class="col">IOU device configuration</h1>
     </div>
-    <div class="default-content" *ngIf="iouTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="templateName" type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="defaultName" type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                            <input matInput formControlName="symbol" type="text" [(ngModel)]="iouTemplate.symbol" placeholder="Symbol">
-                        </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iouTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <input
-                        type="file"
-                        accept=".bin"
-                        #file
-                        class="nonvisible"
-                        (change)="uploadImageFile($event)"
-                        ngDefaultControl/>
-                    <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
-                    <mat-form-field class="file-name-form-field">
-                        <input
-                            matInput
-                            formControlName="path"
-                            type="text"
-                            [(ngModel)]="iouTemplate.path"
-                            placeholder="IOU image path"/>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="initialConfig" type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="iouTemplate.private_config" placeholder="Private config">
-                    </mat-form-field>
-                </form>
-                <mat-form-field class="select">
-                    <mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
-                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-checkbox [(ngModel)]="iouTemplate.console_auto_start">
-                    Auto start console
-                </mat-checkbox><br/>
-                <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
-                    Enable layer 1 keepalive messages (non-functional)
-                </mat-checkbox><br/>
-                <mat-checkbox [(ngModel)]="defaultSettings">
-                    Use default IOU values for memories
-                </mat-checkbox>
-                <mat-form-field class="form-field" *ngIf="!defaultSettings">
-                    <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size">
-                    <span matSuffix>MB</span>
-                </mat-form-field>
-                <mat-form-field class="form-field" *ngIf="!defaultSettings">
-                    <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size">
-                    <span matSuffix>MB</span>
-                </mat-form-field>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Network
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="networkForm">
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="ethernetAdapters" type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="serialAdapters" type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters">
-                    </mat-form-field>
-                </form>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="iouTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="templateName"
+              type="text"
+              [(ngModel)]="iouTemplate.name"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="defaultName"
+              type="text"
+              [(ngModel)]="iouTemplate.default_name_format"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="symbol"
+              type="text"
+              [(ngModel)]="iouTemplate.symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Category"
+              [(ngModel)]="iouTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <input
+            type="file"
+            accept=".bin"
+            #file
+            class="nonvisible"
+            (change)="uploadImageFile($event)"
+            ngDefaultControl
+          />
+          <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+          <mat-form-field class="file-name-form-field">
+            <input
+              matInput
+              formControlName="path"
+              type="text"
+              [(ngModel)]="iouTemplate.path"
+              placeholder="IOU image path"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="initialConfig"
+              type="text"
+              [(ngModel)]="iouTemplate.startup_config"
+              placeholder="Startup config"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="iouTemplate.private_config"
+              placeholder="Private config"
+            />
+          </mat-form-field>
+        </form>
+        <mat-form-field class="select">
+          <mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox [(ngModel)]="iouTemplate.console_auto_start"> Auto start console </mat-checkbox><br />
+        <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
+          Enable layer 1 keepalive messages (non-functional) </mat-checkbox
+        ><br />
+        <mat-checkbox [(ngModel)]="defaultSettings"> Use default IOU values for memories </mat-checkbox>
+        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+          <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size" />
+          <span matSuffix>MB</span>
+        </mat-form-field>
+        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+          <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size" />
+          <span matSuffix>MB</span>
+        </mat-form-field>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Network </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="networkForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="ethernetAdapters"
+              type="number"
+              [(ngModel)]="iouTemplate.ethernet_adapters"
+              placeholder="Ethernet adapters"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="serialAdapters"
+              type="number"
+              [(ngModel)]="iouTemplate.serial_adapters"
+              placeholder="Serial adapters"
+            />
+          </mat-form-field>
+        </form>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && iouTemplate" [server]="server" [symbol]="iouTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && iouTemplate"
+  [server]="server"
+  [symbol]="iouTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.spec.ts b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.spec.ts
index 29d7983b..e5acaf1c 100644
--- a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.spec.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.spec.ts
@@ -22,63 +22,71 @@ import { IouService } from '../../../../services/iou.service';
 import { IouConfigurationService } from '../../../../services/iou-configuration.service';
 
 export class MockedIouService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as IouTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as IouTemplate);
+  }
 
-    public saveTemplate(server: Server, iouTemplate: IouTemplate) {
-        return of(iouTemplate);    
-    }
+  public saveTemplate(server: Server, iouTemplate: IouTemplate) {
+    return of(iouTemplate);
+  }
 }
 
 describe('IouTemplateDetailsComponent', () => {
-    let component: IouTemplateDetailsComponent;
-    let fixture: ComponentFixture<IouTemplateDetailsComponent>;
+  let component: IouTemplateDetailsComponent;
+  let fixture: ComponentFixture<IouTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIouService = new MockedIouService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              { provide: ActivatedRoute,  useValue: activatedRoute },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: IouService, useValue: mockedIouService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: IouConfigurationService, useClass: IouConfigurationService }
-          ],
-          declarations: [
-              IouTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIouService = new MockedIouService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IouTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IouService, useValue: mockedIouService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: IouConfigurationService, useClass: IouConfigurationService },
+      ],
+      declarations: [IouTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IouTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedIouService, 'saveTemplate').and.returnValue(of({} as IouTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.generalSettingsForm.controls['path'].setValue('path');
-        component.generalSettingsForm.controls['initialConfig'].setValue('txt');
-        component.networkForm.controls['ethernetAdapters'].setValue('1');
-        component.networkForm.controls['serialAdapters'].setValue('1');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedIouService, 'saveTemplate').and.returnValue(of({} as IouTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.generalSettingsForm.controls['path'].setValue('path');
+    component.generalSettingsForm.controls['initialConfig'].setValue('txt');
+    component.networkForm.controls['ethernetAdapters'].setValue('1');
+    component.networkForm.controls['serialAdapters'].setValue('1');
 
-        expect(mockedIouService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedIouService.saveTemplate).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
index 3427591b..bc9ff34c 100644
--- a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -8,91 +8,90 @@ import { IouService } from '../../../../services/iou.service';
 import { IouConfigurationService } from '../../../../services/iou-configuration.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-iou-template-details',
-    templateUrl: './iou-template-details.component.html',
-    styleUrls: ['./iou-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-iou-template-details',
+  templateUrl: './iou-template-details.component.html',
+  styleUrls: ['./iou-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class IouTemplateDetailsComponent implements OnInit {
-    server: Server;
-    iouTemplate: IouTemplate;
+  server: Server;
+  iouTemplate: IouTemplate;
 
-    isSymbolSelectionOpened: boolean = false;
-    defaultSettings: boolean = true;
+  isSymbolSelectionOpened: boolean = false;
+  defaultSettings: boolean = true;
 
-    consoleTypes: string[] = [];
-    consoleResolutions: string[] = [];
-    categories = [];
+  consoleTypes: string[] = [];
+  consoleResolutions: string[] = [];
+  categories = [];
 
-    generalSettingsForm: FormGroup;
-    networkForm: FormGroup;
+  generalSettingsForm: FormGroup;
+  networkForm: FormGroup;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iouService: IouService,
-        private toasterService: ToasterService,
-        private configurationService: IouConfigurationService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ){
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required),
-            path: new FormControl('', Validators.required),
-            initialConfig: new FormControl('', Validators.required) 
-        });
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iouService: IouService,
+    private toasterService: ToasterService,
+    private configurationService: IouConfigurationService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+      path: new FormControl('', Validators.required),
+      initialConfig: new FormControl('', Validators.required),
+    });
 
-        this.networkForm = this.formBuilder.group({
-            ethernetAdapters: new FormControl('', Validators.required),
-            serialAdapters: new FormControl('', Validators.required)
-        });
+    this.networkForm = this.formBuilder.group({
+      ethernetAdapters: new FormControl('', Validators.required),
+      serialAdapters: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.iouService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
+        this.iouTemplate = iouTemplate;
+      });
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.configurationService.getConsoleTypes();
+    this.categories = this.configurationService.getCategories();
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
+  }
+
+  onSave() {
+    if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe(() => {
+        this.toasterService.success('Changes saved');
+      });
     }
+  }
 
-    ngOnInit(){
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            
-            this.getConfiguration();
-            this.iouService.getTemplate(this.server, template_id).subscribe((iouTemplate: IouTemplate) => {
-                this.iouTemplate = iouTemplate;
-            });
-        });
-    }
+  uploadImageFile(event) {
+    this.iouTemplate.path = event.target.files[0].name;
+  }
 
-    getConfiguration(){
-        this.consoleTypes = this.configurationService.getConsoleTypes();
-        this.categories = this.configurationService.getCategories();
-    }
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
-    }
-
-    onSave(){
-        if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe(() => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    uploadImageFile(event) {
-        this.iouTemplate.path = event.target.files[0].name;
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.iouTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.iouTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
index 617cc70c..72d55104 100644
--- a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
+++ b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html
@@ -1,35 +1,49 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">IOU device templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">IOU device templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/iou/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add IOU device template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!iouTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="iouTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of iouTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                        <button mat-menu-item (click)="copyTemplate(template)">
-                            <mat-icon>content_copy</mat-icon><span>Copy</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!iouTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="iouTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of iouTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+            <button mat-menu-item (click)="copyTemplate(template)">
+              <mat-icon>content_copy</mat-icon><span>Copy</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.spec.ts b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.spec.ts
index 1541fb77..0ef88418 100644
--- a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.spec.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.spec.ts
@@ -18,41 +18,47 @@ import { IouTemplatesComponent } from './iou-templates.component';
 import { IouService } from '../../../../services/iou.service';
 
 export class MockedIouService {
-    public getTemplates(server: Server) {
-        return of([{} as IouTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as IouTemplate]);
+  }
 }
 
 describe('IouTemplatesComponent', () => {
-    let component: IouTemplatesComponent;
-    let fixture: ComponentFixture<IouTemplatesComponent>;
+  let component: IouTemplatesComponent;
+  let fixture: ComponentFixture<IouTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedIouService = new MockedIouService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              { provide: ActivatedRoute,  useValue: activatedRoute },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: IouService, useValue: mockedIouService }
-          ],
-          declarations: [
-              IouTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedIouService = new MockedIouService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IouTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: IouService, useValue: mockedIouService },
+      ],
+      declarations: [IouTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IouTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
index 4abb3203..668ecea9 100644
--- a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
@@ -1,52 +1,51 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 import { IouTemplate } from '../../../../models/templates/iou-template';
 import { IouService } from '../../../../services/iou.service';
- 
 
 @Component({
-    selector: 'app-iou-templates',
-    templateUrl: './iou-templates.component.html',
-    styleUrls: ['./iou-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-iou-templates',
+  templateUrl: './iou-templates.component.html',
+  styleUrls: ['./iou-templates.component.scss', '../../preferences.component.scss'],
 })
 export class IouTemplatesComponent implements OnInit {
-    server: Server;
-    iouTemplates: IouTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  iouTemplates: IouTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private iouService: IouService,
-        private router: Router
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private iouService: IouService,
+    private router: Router
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.iouService.getTemplates(this.server).subscribe((iouTemplates: IouTemplate[]) => {
-            this.iouTemplates = iouTemplates.filter((elem) => elem.template_type === 'iou' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.iouService.getTemplates(this.server).subscribe((iouTemplates: IouTemplate[]) => {
+      this.iouTemplates = iouTemplates.filter((elem) => elem.template_type === 'iou' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: IouTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: IouTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 
-    copyTemplate(template: IouTemplate) {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates', template.template_id, 'copy']);
-    }
+  copyTemplate(template: IouTemplate) {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates', template.template_id, 'copy']);
+  }
 }
diff --git a/src/app/components/preferences/preferences.component.html b/src/app/components/preferences/preferences.component.html
index f3000cf1..8ca23a4b 100644
--- a/src/app/components/preferences/preferences.component.html
+++ b/src/app/components/preferences/preferences.component.html
@@ -1,43 +1,25 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Preferences</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Preferences</h1>
     </div>
-    <div class="default-content">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/gns3vm">
-                    GNS3 VM
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin">
-                    Built-in
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/dynamips/templates">
-                    Dynamips
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/iou/templates">
-                    IOS on Unix
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/vpcs/templates">
-                    VPCS
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/qemu/templates">
-                    QEMU
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/virtualbox/templates">
-                    VirtualBox
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/vmware/templates">
-                    VMware
-                </mat-list-item>
-                <mat-list-item routerLink="/server/{{serverId}}/preferences/docker/templates">
-                    Docker
-                </mat-list-item>
-                <!-- <mat-list-item routerLink="/server/{{serverId}}/preferences/traceng/templates">
+  </div>
+  <div class="default-content">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/gns3vm"> GNS3 VM </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/builtin"> Built-in </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/dynamips/templates"> Dynamips </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/iou/templates"> IOS on Unix </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/vpcs/templates"> VPCS </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/qemu/templates"> QEMU </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/virtualbox/templates"> VirtualBox </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/vmware/templates"> VMware </mat-list-item>
+        <mat-list-item routerLink="/server/{{ serverId }}/preferences/docker/templates"> Docker </mat-list-item>
+        <!-- <mat-list-item routerLink="/server/{{serverId}}/preferences/traceng/templates">
                     TraceNG
                 </mat-list-item> -->
-            </mat-nav-list>
-        </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/preferences.component.scss b/src/app/components/preferences/preferences.component.scss
index 1b12e960..4f0f84a4 100644
--- a/src/app/components/preferences/preferences.component.scss
+++ b/src/app/components/preferences/preferences.component.scss
@@ -1,99 +1,99 @@
 .listcontainer {
-    padding-left: 0px!important;
-    padding-right: 0px!important;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
 }
 
 .top-button {
-    height: 36px;
-    margin-top: 22px
+  height: 36px;
+  margin-top: 22px;
 }
 
 .choose-symbol-button {
-    height: 36px;
-    margin-top: 22px;
+  height: 36px;
+  margin-top: 22px;
 }
 
 .cancel-button {
-    height: 36px;
-    margin-top: 22px;
-    margin-right: 10px;
+  height: 36px;
+  margin-top: 22px;
+  margin-right: 10px;
 }
 
 .form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .select {
-    width: 100%;
+  width: 100%;
 }
 
 .shadowed {
-    display: none;
-    transition: 0.25s;
+  display: none;
+  transition: 0.25s;
 }
 
 .nonvisible {
-    display: none;
+  display: none;
 }
 
 .configButton {
-    width: 100%;
+  width: 100%;
 }
 
 .configHideButton {
-    margin-left: 80%;
-    width: 20%;
-    margin-bottom: 10px;
+  margin-left: 80%;
+  width: 20%;
+  margin-bottom: 10px;
 }
 
 .symbolSelectionButton {
-    width: 100%;
+  width: 100%;
 }
 
 .list-item {
-    display: flex;
+  display: flex;
 }
 
 .template-name {
-    width: 95%;
+  width: 95%;
 }
 
 .delete-button {
-    width: 10%;
-    outline: none;
+  width: 10%;
+  outline: none;
 }
 
 .menu-button {
-    width: 5%;
-    outline: none!important;
+  width: 5%;
+  outline: none !important;
 }
 
 th {
-    border: 0px!important;
+  border: 0px !important;
 }
 
 th.mat-header-cell {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
 td.mat-cell {
-    padding-top: 15px;
+  padding-top: 15px;
 }
 
 .radio-button {
-    width: 50%;
-    padding-top: 20px;
+  width: 50%;
+  padding-top: 20px;
 }
 
 .radio-group {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .file-button {
-    width: 18%;
+  width: 18%;
 }
 
 .file-name-form-field {
-    padding-left: 2%;
-    width: 80%;
+  padding-left: 2%;
+  width: 80%;
 }
diff --git a/src/app/components/preferences/preferences.component.spec.ts b/src/app/components/preferences/preferences.component.spec.ts
index 9d88d062..38b7170b 100644
--- a/src/app/components/preferences/preferences.component.spec.ts
+++ b/src/app/components/preferences/preferences.component.spec.ts
@@ -12,56 +12,63 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 
 export class MockedActivatedRoute {
-    get() {
-        return {
-            params: of({ id: 3 }),
-            snapshot: {
-                parent: {
-                    params: {
-                        id: 1
-                    }
-                },
-                paramMap: {
-                    get(name: string): string {
-                        return '1';
-                    }
-                }
-            },
-        };
-    }
+  get() {
+    return {
+      params: of({ id: 3 }),
+      snapshot: {
+        parent: {
+          params: {
+            id: 1,
+          },
+        },
+        paramMap: {
+          get(name: string): string {
+            return '1';
+          },
+        },
+      },
+    };
+  }
 }
 
 describe('PreferencesComponent', () => {
-    let component: PreferencesComponent;
-    let fixture: ComponentFixture<PreferencesComponent>;
-    let activatedRoute = new MockedActivatedRoute().get();
-  
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-        providers: [
-            {
-                provide: ActivatedRoute,  useValue: activatedRoute
-            }
-        ],
-        declarations: [
-            PreferencesComponent
-        ],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).compileComponents();
-    }));
-  
-    beforeEach(() => {
-      fixture = TestBed.createComponent(PreferencesComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
-    });
-  
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  let component: PreferencesComponent;
+  let fixture: ComponentFixture<PreferencesComponent>;
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    it('should save correct server id', () => {
-        expect(component.serverId).toBe('1');
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+      ],
+      declarations: [PreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should save correct server id', () => {
+    expect(component.serverId).toBe('1');
+  });
 });
diff --git a/src/app/components/preferences/preferences.component.ts b/src/app/components/preferences/preferences.component.ts
index 78ecb2f8..42de52ba 100644
--- a/src/app/components/preferences/preferences.component.ts
+++ b/src/app/components/preferences/preferences.component.ts
@@ -1,20 +1,17 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-
 @Component({
-    selector: 'app-preferences',
-    templateUrl: './preferences.component.html',
-    styleUrls: ['./preferences.component.scss']
+  selector: 'app-preferences',
+  templateUrl: './preferences.component.html',
+  styleUrls: ['./preferences.component.scss'],
 })
 export class PreferencesComponent implements OnInit {
-    public serverId: string = "";
+  public serverId: string = '';
 
-    constructor(
-        private route: ActivatedRoute
-    ) {}
+  constructor(private route: ActivatedRoute) {}
 
-    ngOnInit() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-    }
+  ngOnInit() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+  }
 }
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
index fa33755f..3620769c 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
@@ -1,108 +1,123 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New QEMU VM template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New QEMU VM template</h1>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <mat-vertical-stepper [linear]="true">
-                <mat-step label="Server type" [completed]="isGns3VmChosen  || isLocalComputerChosen">
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this QEMU VM locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this QEMU VM on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </mat-step>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-vertical-stepper [linear]="true">
+        <mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
+          <mat-radio-group class="radio-group">
+            <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+              >Run this QEMU VM locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Run this QEMU VM on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </mat-step>
 
-                <mat-step label="QEMU VM Name" [completed]="nameForm.get('templateName').value">
-                    <form [formGroup]="nameForm">
-                        <mat-form-field class="form-field">
-                            <input
-                                matInput type="text"
-                                formControlName="templateName"
-                                placeholder="Please choose a descriptive name for your new QEMU virtual machine"
-                                ngDefaultContro/>
-                        </mat-form-field><br/>
-                    </form>
-                </mat-step>
+        <mat-step label="QEMU VM Name" [completed]="nameForm.get('templateName').value">
+          <form [formGroup]="nameForm">
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="text"
+                formControlName="templateName"
+                placeholder="Please choose a descriptive name for your new QEMU virtual machine"
+                ngDefaultContro
+              /> </mat-form-field
+            ><br />
+          </form>
+        </mat-step>
 
-                <mat-step label="QEMU binary and memory" [completed]="memoryForm.get('ramMemory').value && selectedBinary">
-                    <form [formGroup]="memoryForm">
-                        <mat-form-field class="form-field">
-                            <mat-select
-                                placeholder="Qemu binary"
-                                [(ngModel)]="selectedBinary"
-                                [ngModelOptions]="{standalone: true}">
-                                <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
-                                    {{binary.path}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field><br/>
-                        <mat-form-field class="form-field">
-                            <input
-                            matInput type="number"
-                            placeholder="RAM"
-                            formControlName="ramMemory"
-                            ngDefaultControl/>
-                            <span matSuffix>MB</span>
-                        </mat-form-field>
-                    </form>
-                </mat-step>
+        <mat-step label="QEMU binary and memory" [completed]="memoryForm.get('ramMemory').value && selectedBinary">
+          <form [formGroup]="memoryForm">
+            <mat-form-field class="form-field">
+              <mat-select
+                placeholder="Qemu binary"
+                [(ngModel)]="selectedBinary"
+                [ngModelOptions]="{ standalone: true }"
+              >
+                <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
+                  {{ binary.path }}
+                </mat-option>
+              </mat-select> </mat-form-field
+            ><br />
+            <mat-form-field class="form-field">
+              <input matInput type="number" placeholder="RAM" formControlName="ramMemory" ngDefaultControl />
+              <span matSuffix>MB</span>
+            </mat-form-field>
+          </form>
+        </mat-step>
 
-                <mat-step label="Console type" [completed]="qemuTemplate.console_type">
-                    <mat-form-field class="form-field">
-                        <mat-select
-                            placeholder="Console type"
-                            [(ngModel)]="qemuTemplate.console_type"
-                            [ngModelOptions]="{standalone: true}" >
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </mat-step>
+        <mat-step label="Console type" [completed]="qemuTemplate.console_type">
+          <mat-form-field class="form-field">
+            <mat-select
+              placeholder="Console type"
+              [(ngModel)]="qemuTemplate.console_type"
+              [ngModelOptions]="{ standalone: true }"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </mat-step>
 
-                <mat-step label="Disk image">
-                    <form [formGroup]="diskForm">
-                        <mat-radio-group class="radio-group">
-                            <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked>Existing image</mat-radio-button>
-                            <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')">New image</mat-radio-button>
-                        </mat-radio-group><br/><br/>
-                        <mat-select
-                            *ngIf="!newImageSelected"
-                            placeholder="Disk image (hda)"
-                            [ngModelOptions]="{standalone: true}"
-                            [(ngModel)]="selectedImage">
-                            <mat-option *ngFor="let image of qemuImages" [value]="image">
-                                {{image.filename}}
-                            </mat-option>
-                        </mat-select>
-                        <div *ngIf="newImageSelected">
-                            <input
-                                type="file"
-                                accept=".qcow2"
-                                #file
-                                class="nonvisible"
-                                (change)="uploadImageFile($event)"
-                                ng2FileSelect
-                                [uploader]="uploader"/>
-                            <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    [(ngModel)]="chosenImage"
-                                    formControlName="fileName"
-                                    placeholder="Please enter name"/>
-                            </mat-form-field>
-                        </div>
-                    </form>
-                </mat-step>
-            </mat-vertical-stepper>
-        </div>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+        <mat-step label="Disk image">
+          <form [formGroup]="diskForm">
+            <mat-radio-group class="radio-group">
+              <mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked
+                >Existing image</mat-radio-button
+              >
+              <mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')"
+                >New image</mat-radio-button
+              > </mat-radio-group
+            ><br /><br />
+            <mat-select
+              *ngIf="!newImageSelected"
+              placeholder="Disk image (hda)"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="selectedImage"
+            >
+              <mat-option *ngFor="let image of qemuImages" [value]="image">
+                {{ image.filename }}
+              </mat-option>
+            </mat-select>
+            <div *ngIf="newImageSelected">
+              <input
+                type="file"
+                accept=".qcow2"
+                #file
+                class="nonvisible"
+                (change)="uploadImageFile($event)"
+                ng2FileSelect
+                [uploader]="uploader"
+              />
+              <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
+              <mat-form-field class="file-name-form-field">
+                <input
+                  matInput
+                  type="text"
+                  [(ngModel)]="chosenImage"
+                  formControlName="fileName"
+                  placeholder="Please enter name"
+                />
+              </mat-form-field>
+            </div>
+          </form>
+        </mat-step>
+      </mat-vertical-stepper>
     </div>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.spec.ts b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.spec.ts
index c075c4bb..7e2f0205 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.spec.ts
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.spec.ts
@@ -28,129 +28,129 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { QemuConfigurationService } from '../../../../services/qemu-configuration.service';
 
 export class MockedQemuService {
-    public addTemplate(server: Server, qemuTemplate: QemuTemplate) {
-        return of(qemuTemplate);    
-    }
+  public addTemplate(server: Server, qemuTemplate: QemuTemplate) {
+    return of(qemuTemplate);
+  }
 
-    public getBinaries(server: Server) {
-        return of([]);    
-    }
+  public getBinaries(server: Server) {
+    return of([]);
+  }
 
-    public getImages(server: Server) {
-        return of([]);    
-    }
+  public getImages(server: Server) {
+    return of([]);
+  }
 }
 
 //Tests disabled due to instability
 xdescribe('AddQemuVmTemplateComponent', () => {
-    let component: AddQemuVmTemplateComponent;
-    let fixture: ComponentFixture<AddQemuVmTemplateComponent>;
+  let component: AddQemuVmTemplateComponent;
+  let fixture: ComponentFixture<AddQemuVmTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedQemuService = new MockedQemuService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    let router = {
-        navigate: jasmine.createSpy('navigate')
+  let mockedServerService = new MockedServerService();
+  let mockedQemuService = new MockedQemuService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
+  let router = {
+    navigate: jasmine.createSpy('navigate'),
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatStepperModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatAutocompleteModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/qemu/templates', component: AddQemuVmTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: Router, useValue: router },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: QemuService, useValue: mockedQemuService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+        { provide: QemuConfigurationService, useClass: QemuConfigurationService },
+      ],
+      declarations: [AddQemuVmTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddQemuVmTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call add template', () => {
+    spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+    component.nameForm.controls['templateName'].setValue('template name');
+    component.memoryForm.controls['binary'].setValue('binary');
+    component.memoryForm.controls['ramMemory'].setValue(0);
+    component.diskForm.controls['fileName'].setValue('file name');
+    component.chosenImage = 'path';
+    component.selectedBinary = {
+      path: 'path',
+      version: 'version',
     };
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [
-                MatStepperModule, 
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatSelectModule, 
-                MatAutocompleteModule, 
-                MatIconModule, 
-                MatFormFieldModule, 
-                MatInputModule,
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/qemu/templates', component: AddQemuVmTemplateComponent}])
-            ],
-            providers: [
-              { provide: ActivatedRoute,  useValue: activatedRoute },
-              { provide: Router, useValue: router },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: QemuService, useValue: mockedQemuService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: TemplateMocksService, useClass: TemplateMocksService },
-              { provide: QemuConfigurationService, useClass: QemuConfigurationService }
-          ],
-          declarations: [
-              AddQemuVmTemplateComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddQemuVmTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+    component.addTemplate();
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+    expect(mockedQemuService.addTemplate).toHaveBeenCalled();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
-        component.nameForm.controls['templateName'].setValue('template name');
-        component.memoryForm.controls['binary'].setValue('binary');
-        component.memoryForm.controls['ramMemory'].setValue(0);
-        component.diskForm.controls['fileName'].setValue('file name');
-        component.chosenImage = 'path';
-        component.selectedBinary = {
-            path: 'path',
-            version: 'version'
-        };
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+    component.nameForm.controls['templateName'].setValue('');
+    component.memoryForm.controls['binary'].setValue('binary');
+    component.memoryForm.controls['ramMemory'].setValue(0);
+    component.diskForm.controls['fileName'].setValue('file name');
+    component.chosenImage = 'path';
+    component.selectedBinary = {
+      path: 'path',
+      version: 'version',
+    };
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-        component.addTemplate();
+    component.addTemplate();
 
-        expect(mockedQemuService.addTemplate).toHaveBeenCalled();
-    });
+    expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
+  });
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
-        component.nameForm.controls['templateName'].setValue('');
-        component.memoryForm.controls['binary'].setValue('binary');
-        component.memoryForm.controls['ramMemory'].setValue(0);
-        component.diskForm.controls['fileName'].setValue('file name');
-        component.chosenImage = 'path';
-        component.selectedBinary = {
-            path: 'path',
-            version: 'version'
-        };
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
+  it('should not call add template when ram is not set', () => {
+    spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
+    component.nameForm.controls['templateName'].setValue('template name');
+    component.memoryForm.controls['binary'].setValue('binary');
+    component.diskForm.controls['fileName'].setValue('file name');
+    component.chosenImage = 'path';
+    component.selectedBinary = {
+      path: 'path',
+      version: 'version',
+    };
+    component.newImageSelected = true;
+    component.server = { id: 1 } as Server;
 
-        component.addTemplate();
+    component.addTemplate();
 
-        expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
-    });
-
-    it('should not call add template when ram is not set', () => {
-        spyOn(mockedQemuService, 'addTemplate').and.returnValue(of({} as QemuTemplate));
-        component.nameForm.controls['templateName'].setValue('template name');
-        component.memoryForm.controls['binary'].setValue('binary');
-        component.diskForm.controls['fileName'].setValue('file name');
-        component.chosenImage = 'path';
-        component.selectedBinary = {
-            path: 'path',
-            version: 'version'
-        };
-        component.newImageSelected = true;
-        component.server = {id: 1} as Server;
-
-        component.addTemplate();
-
-        expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
-    });
+    expect(mockedQemuService.addTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
index 9d1f8583..784af3b1 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -15,153 +15,152 @@ import { ComputeService } from '../../../../services/compute.service';
 import { Compute } from '../../../../models/compute';
 import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
 
-
 @Component({
-    selector: 'app-add-qemu-virtual-machine-template',
-    templateUrl: './add-qemu-vm-template.component.html',
-    styleUrls: ['./add-qemu-vm-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-qemu-virtual-machine-template',
+  templateUrl: './add-qemu-vm-template.component.html',
+  styleUrls: ['./add-qemu-vm-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddQemuVmTemplateComponent implements OnInit {
-    server: Server;
-    qemuBinaries: QemuBinary[] = [];
-    selectedBinary: QemuBinary;
-    ramMemory: number;
-    consoleTypes: string[] = [];
-    newImageSelected: boolean = false;;
-    qemuImages: QemuImage[] = [];
-    selectedImage: QemuImage;
-    chosenImage: string = '';
-    qemuTemplate: QemuTemplate;
-    uploader: FileUploader;
+  server: Server;
+  qemuBinaries: QemuBinary[] = [];
+  selectedBinary: QemuBinary;
+  ramMemory: number;
+  consoleTypes: string[] = [];
+  newImageSelected: boolean = false;
+  qemuImages: QemuImage[] = [];
+  selectedImage: QemuImage;
+  chosenImage: string = '';
+  qemuTemplate: QemuTemplate;
+  uploader: FileUploader;
 
-    nameForm: FormGroup;
-    memoryForm: FormGroup;
-    diskForm: FormGroup;
+  nameForm: FormGroup;
+  memoryForm: FormGroup;
+  diskForm: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private qemuService: QemuService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder,
-        private templateMocksService: TemplateMocksService,
-        private configurationService: QemuConfigurationService,
-        private computeService: ComputeService
-    ) {
-        this.qemuTemplate = new QemuTemplate();
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
 
-        this.nameForm = this.formBuilder.group({
-            templateName: new FormControl(null, Validators.required)
-        });
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private qemuService: QemuService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private templateMocksService: TemplateMocksService,
+    private configurationService: QemuConfigurationService,
+    private computeService: ComputeService
+  ) {
+    this.qemuTemplate = new QemuTemplate();
 
-        this.memoryForm = this.formBuilder.group({
-            ramMemory: new FormControl('256', Validators.required)
-        });
+    this.nameForm = this.formBuilder.group({
+      templateName: new FormControl(null, Validators.required),
+    });
 
-        this.diskForm = this.formBuilder.group({
-            fileName: new FormControl('', Validators.required)
-        });
+    this.memoryForm = this.formBuilder.group({
+      ramMemory: new FormControl('256', Validators.required),
+    });
+
+    this.diskForm = this.formBuilder.group({
+      fileName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.uploader = new FileUploader({});
+    this.uploader.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+    this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+      this.toasterService.error('An error occured: ' + response);
+    };
+    this.uploader.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.qemuService.getImages(this.server).subscribe((qemuImages: QemuImage[]) => {
+        this.qemuImages = qemuImages;
+      });
+      this.toasterService.success('Image uploaded');
+    };
+
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.templateMocksService.getQemuTemplate().subscribe((qemuTemplate: QemuTemplate) => {
+        this.qemuTemplate = qemuTemplate;
+      });
+
+      this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
+        this.qemuBinaries = qemuBinaries;
+        if (this.qemuBinaries[0]) this.selectedBinary = this.qemuBinaries[0];
+      });
+
+      this.qemuService.getImages(server).subscribe((qemuImages: QemuImage[]) => {
+        this.qemuImages = qemuImages;
+      });
+
+      this.consoleTypes = this.configurationService.getConsoleTypes();
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
     }
+  }
 
-    ngOnInit() {
-        this.uploader = new FileUploader({});
-        this.uploader.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error occured: ' + response);
-        };
-        this.uploader.onSuccessItem = (
-            item: FileItem,
-            response: string,
-            status: number,
-            headers: ParsedResponseHeaders
-        ) => {
-            this.qemuService.getImages(this.server).subscribe((qemuImages: QemuImage[]) => {
-                this.qemuImages = qemuImages;
-            });
-            this.toasterService.success('Image uploaded');
-        };
-        
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  setDiskImage(value: string) {
+    this.newImageSelected = value === 'newImage';
+  }
 
-            this.templateMocksService.getQemuTemplate().subscribe((qemuTemplate: QemuTemplate) => {
-                this.qemuTemplate = qemuTemplate;
-            })
+  uploadImageFile(event) {
+    let name = event.target.files[0].name;
+    this.diskForm.controls['fileName'].setValue(name);
 
-            this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
-                this.qemuBinaries = qemuBinaries;
-                if (this.qemuBinaries[0]) this.selectedBinary = this.qemuBinaries[0];
-            });
+    const url = this.qemuService.getImagePath(this.server, name);
+    this.uploader.queue.forEach((elem) => (elem.url = url));
 
-            this.qemuService.getImages(server).subscribe((qemuImages: QemuImage[]) => {
-                this.qemuImages = qemuImages;
-            });
+    const itemToUpload = this.uploader.queue[0];
+    if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
 
-            this.consoleTypes = this.configurationService.getConsoleTypes();
+    this.uploader.uploadItem(itemToUpload);
+  }
 
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    setDiskImage(value: string) {
-        this.newImageSelected = value === "newImage";
-    }
-
-    uploadImageFile(event) {
-        let name = event.target.files[0].name;
-        this.diskForm.controls['fileName'].setValue(name);
-
-        const url = this.qemuService.getImagePath(this.server, name);
-        this.uploader.queue.forEach(elem => (elem.url = url));
-
-        const itemToUpload = this.uploader.queue[0];
-        if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
-
-        this.uploader.uploadItem(itemToUpload);
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.nameForm.invalid && !this.memoryForm.invalid && (this.selectedImage || this.chosenImage)) {
-            this.qemuTemplate.ram = +this.memoryForm.get("ramMemory").value;
-            this.qemuTemplate.qemu_path = this.selectedBinary.path;
-            if (this.newImageSelected) {
-                this.qemuTemplate.hda_disk_image =  this.diskForm.get("fileName").value;
-            } else {
-                this.qemuTemplate.hda_disk_image = this.selectedImage.path;
-            }
-            this.qemuTemplate.template_id = uuid();
-            this.qemuTemplate.name = this.nameForm.get("templateName").value;
-            this.qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.nameForm.invalid && !this.memoryForm.invalid && (this.selectedImage || this.chosenImage)) {
+      this.qemuTemplate.ram = +this.memoryForm.get('ramMemory').value;
+      this.qemuTemplate.qemu_path = this.selectedBinary.path;
+      if (this.newImageSelected) {
+        this.qemuTemplate.hda_disk_image = this.diskForm.get('fileName').value;
+      } else {
+        this.qemuTemplate.hda_disk_image = this.selectedImage.path;
+      }
+      this.qemuTemplate.template_id = uuid();
+      this.qemuTemplate.name = this.nameForm.get('templateName').value;
+      this.qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+
+      this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html b/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html
index c1c8866d..6661ecaa 100644
--- a/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html
+++ b/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.html
@@ -1,24 +1,20 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Copy QEMU VM template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Copy QEMU VM template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <form [formGroup]="nameForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="templateName" 
-                        placeholder="Name"
-                        formControlName="templateName"/>
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <form [formGroup]="nameForm">
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="templateName" placeholder="Name" formControlName="templateName" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts b/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts
index 2327f843..e8ede9b0 100644
--- a/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -9,60 +9,58 @@ import { QemuTemplate } from '../../../../models/templates/qemu-template';
 import { v4 as uuid } from 'uuid';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-copy-qemu-virtual-machine-template',
-    templateUrl: './copy-qemu-vm-template.component.html',
-    styleUrls: ['./copy-qemu-vm-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-copy-qemu-virtual-machine-template',
+  templateUrl: './copy-qemu-vm-template.component.html',
+  styleUrls: ['./copy-qemu-vm-template.component.scss', '../../preferences.component.scss'],
 })
 export class CopyQemuVmTemplateComponent implements OnInit {
-    server: Server;
-    qemuBinaries: QemuBinary[] = [];
-    templateName: string = '';
-    qemuTemplate: QemuTemplate;
-    nameForm: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private qemuService: QemuService,
-        private toasterService: ToasterService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.nameForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required)
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
-                this.qemuTemplate = qemuTemplate;
-                this.templateName = `Copy of ${this.qemuTemplate.name}`;
-            })
-
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.nameForm.invalid) {
-            this.qemuTemplate.template_id = uuid();
-            this.qemuTemplate.name = this.templateName;
-
-            this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  server: Server;
+  qemuBinaries: QemuBinary[] = [];
+  templateName: string = '';
+  qemuTemplate: QemuTemplate;
+  nameForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private qemuService: QemuService,
+    private toasterService: ToasterService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.nameForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
+        this.qemuTemplate = qemuTemplate;
+        this.templateName = `Copy of ${this.qemuTemplate.name}`;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.nameForm.invalid) {
+      this.qemuTemplate.template_id = uuid();
+      this.qemuTemplate.name = this.templateName;
+
+      this.qemuService.addTemplate(this.server, this.qemuTemplate).subscribe((template: QemuTemplate) => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.html b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.html
index 8c9f27ec..cfc27c66 100644
--- a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.html
+++ b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.html
@@ -1,29 +1,37 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">QEMU preferences</h1>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/templates" mat-raised-button color="primary">QEMU VM templates</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">QEMU preferences</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/qemu/templates"
+        mat-raised-button
+        color="primary"
+      >
+        QEMU VM templates
+      </button>
+    </div>
+  </div>
+  <div class="default-content">
+    <div class="container mat-elevation-z8">
+      <mat-nav-list *ngIf="settings">
+        <mat-list-item>
+          <mat-checkbox [(ngModel)]="settings.enable_hardware_acceleration">
+            Enable Hardware Acceleration (KVM/HAXM)
+          </mat-checkbox>
+        </mat-list-item>
+        <mat-list-item *ngIf="settings.enable_hardware_acceleration">
+          <mat-checkbox [(ngModel)]="settings.require_hardware_acceleration">
+            Require Hardware Acceleration (KVM/HAXM)
+          </mat-checkbox>
+        </mat-list-item>
+      </mat-nav-list>
     </div>
-    <div class="default-content">
-        <div class="container mat-elevation-z8">
-            <mat-nav-list *ngIf="settings">
-                <mat-list-item>
-                    <mat-checkbox [(ngModel)]="settings.enable_hardware_acceleration">
-                        Enable Hardware Acceleration (KVM/HAXM)
-                    </mat-checkbox>
-                </mat-list-item>
-                <mat-list-item *ngIf="settings.enable_hardware_acceleration">
-                    <mat-checkbox [(ngModel)]="settings.require_hardware_acceleration">
-                        Require Hardware Acceleration (KVM/HAXM)
-                    </mat-checkbox>
-                </mat-list-item>
-            </mat-nav-list>
-        </div>
 
-        <div class="buttons-bar">
-            <button mat-button color="accent" (click)="restoreDefaults()">Restore defaults</button>
-            <button mat-raised-button color="primary" (click)="apply()">Apply</button>
-        </div>
+    <div class="buttons-bar">
+      <button mat-button color="accent" (click)="restoreDefaults()">Restore defaults</button>
+      <button mat-raised-button color="primary" (click)="apply()">Apply</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.scss b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.scss
index 98f47574..36636d07 100644
--- a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.scss
+++ b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.scss
@@ -1,4 +1,4 @@
 .top-button {
-    height: 36px;
-    margin-top: 22px
+  height: 36px;
+  margin-top: 22px;
 }
diff --git a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.spec.ts b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.spec.ts
index ea43ad2a..873b34e7 100644
--- a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.spec.ts
+++ b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.spec.ts
@@ -20,47 +20,55 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { of } from 'rxjs';
 
 describe('QemuPreferencesComponent', () => {
-    let component: QemuPreferencesComponent;
-    let fixture: ComponentFixture<QemuPreferencesComponent>;
+  let component: QemuPreferencesComponent;
+  let fixture: ComponentFixture<QemuPreferencesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    let mockedServerSettingsService = new MockedServerSettingsService();
-    let mockedToasterService = new MockedToasterService();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [HttpClientModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: ServerSettingsService, useValue: mockedServerSettingsService },
-              { provide: ToasterService, useValue: mockedToasterService }
-          ],
-          declarations: [
-              QemuPreferencesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let activatedRoute = new MockedActivatedRoute().get();
+  let mockedServerSettingsService = new MockedServerSettingsService();
+  let mockedToasterService = new MockedToasterService();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(QemuPreferencesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: ServerSettingsService, useValue: mockedServerSettingsService },
+        { provide: ToasterService, useValue: mockedToasterService },
+      ],
+      declarations: [QemuPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QemuPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call update settings when restore defaults chosen', () => {
-        spyOn(mockedServerSettingsService, 'updateSettingsForQemu').and.returnValue(of([]));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.restoreDefaults();
+  it('should call update settings when restore defaults chosen', () => {
+    spyOn(mockedServerSettingsService, 'updateSettingsForQemu').and.returnValue(of([]));
 
-        expect(mockedServerSettingsService.updateSettingsForQemu).toHaveBeenCalled();
-    });
+    component.restoreDefaults();
+
+    expect(mockedServerSettingsService.updateSettingsForQemu).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts
index 68580110..de7c9f83 100644
--- a/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts
+++ b/src/app/components/preferences/qemu/qemu-preferences/qemu-preferences.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ServerSettingsService } from '../../../../services/server-settings.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
@@ -7,55 +7,56 @@ import { ServerService } from '../../../../services/server.service';
 import { ToasterService } from '../../../../services/toaster.service';
 import { QemuSettings } from '../../../../models/settings/qemu-settings';
 
-
 @Component({
-    selector: 'app-qemu-preferences',
-    templateUrl: './qemu-preferences.component.html',
-    styleUrls: ['./qemu-preferences.component.scss']
+  selector: 'app-qemu-preferences',
+  templateUrl: './qemu-preferences.component.html',
+  styleUrls: ['./qemu-preferences.component.scss'],
 })
 export class QemuPreferencesComponent implements OnInit {
-    server: Server;
-    settings: QemuSettings;
+  server: Server;
+  settings: QemuSettings;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private serverSettingsService: ServerSettingsService,
-        private toasterService: ToasterService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private serverSettingsService: ServerSettingsService,
+    private toasterService: ToasterService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
 
-            this.serverSettingsService.getSettingsForQemu(this.server).subscribe((settings: QemuSettings) => {
-                this.settings = settings;
-            });
-        });
+      this.serverSettingsService.getSettingsForQemu(this.server).subscribe((settings: QemuSettings) => {
+        this.settings = settings;
+      });
+    });
+  }
+
+  apply() {
+    if (!this.settings.enable_hardware_acceleration) {
+      this.settings.require_hardware_acceleration = false;
     }
 
-    apply(){
-        if(!this.settings.enable_hardware_acceleration){
-            this.settings.require_hardware_acceleration = false;
-        }
+    this.serverSettingsService
+      .updateSettingsForQemu(this.server, this.settings)
+      .subscribe((qemuSettings: QemuSettings) => {
+        this.toasterService.success(`Changes applied`);
+      });
+  }
 
-        this.serverSettingsService.updateSettingsForQemu(this.server, this.settings)
-        .subscribe((qemuSettings: QemuSettings) => {
-            this.toasterService.success(`Changes applied`);
-        });
-    }
+  restoreDefaults() {
+    let defaultSettings: QemuSettings = {
+      enable_hardware_acceleration: true,
+      require_hardware_acceleration: true,
+    };
 
-    restoreDefaults(){
-        let defaultSettings : QemuSettings = {
-            enable_hardware_acceleration: true,
-            require_hardware_acceleration: true
-        };
-
-        this.serverSettingsService.updateSettingsForQemu(this.server, defaultSettings)
-        .subscribe((qemuSettings: QemuSettings) => {
-            this.settings = qemuSettings;
-            this.toasterService.success(`Restored to default settings`);
-        });
-    }
+    this.serverSettingsService
+      .updateSettingsForQemu(this.server, defaultSettings)
+      .subscribe((qemuSettings: QemuSettings) => {
+        this.settings = qemuSettings;
+        this.toasterService.success(`Restored to default settings`);
+      });
+  }
 }
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 23c88609..a53f2b4e 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
@@ -1,343 +1,305 @@
-<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened}">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">QEMU VM configuration</h1>
-        </div>
+<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">QEMU VM configuration</h1>
     </div>
-    <div class="default-content" *ngIf="qemuTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="templateName" [(ngModel)]="qemuTemplate.name" placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="defaultName" [(ngModel)]="qemuTemplate.default_name_format" placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput type="text" formControlName="symbol" [(ngModel)]="qemuTemplate.symbol" placeholder="Symbol">
-                    </mat-form-field>
-                </form>
-                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="Category" [(ngModel)]="qemuTemplate.category">
-                        <mat-option *ngFor="let category of categories" [value]="category[1]">
-                            {{category[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="qemuTemplate.ram" placeholder="RAM">
-                    <span matSuffix>MB</span>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="qemuTemplate.cpus" placeholder="vCPUs">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="Qemu binary" [(ngModel)]="qemuTemplate.qemu_path">
-                        <mat-option *ngFor="let binary of binaries" [value]="binary.path">
-                            {{binary.path}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="Boot priority" [(ngModel)]="qemuTemplate.boot_priority">
-                        <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
-                            {{priority[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="On close" [(ngModel)]="qemuTemplate.on_close">
-                        <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                            {{option[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="select">
-                    <mat-select placeholder="Console type" [(ngModel)]="qemuTemplate.console_type">
-                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-checkbox [(ngModel)]="qemuTemplate.console_auto_start">
-                    Auto start console
-                </mat-checkbox>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        HDD
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        HDA (Primary Master)
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-form-field class="form-field">
-                            <input matInput [(ngModel)]="qemuTemplate.hda_disk_image" placeholder="Disk image">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hda_disk_interface">
-                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                {{interface}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        HDB (Primary Slave)
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-form-field class="form-field">
-                            <input matInput [(ngModel)]="qemuTemplate.hdb_disk_image" placeholder="Disk image">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdb_disk_interface">
-                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                {{interface}}
-                            </mat-option>
-                        </mat-select>
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        HDC (Secondary Master)
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-form-field class="form-field">
-                            <input matInput [(ngModel)]="qemuTemplate.hdc_disk_image" placeholder="Disk image">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdc_disk_interface">
-                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                {{interface}}
-                            </mat-option>
-                        </mat-select>
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        HDD (Secondary Slave)
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-form-field class="form-field">
-                            <input matInput [(ngModel)]="qemuTemplate.hdd_disk_image" placeholder="Disk image">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdd_disk_interface">
-                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                {{interface}}
-                            </mat-option>
-                        </mat-select>
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        CD/DVD
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <div>
-                    <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
-                    <input
-                        type="file"
-                        #filecdrom
-                        class="nonvisible"
-                        (change)="uploadCdromImageFile($event)"/>
-                    <mat-form-field class="file-name-form-field">
-                        <input
-                            matInput
-                            type="text"
-                            [(ngModel)]="qemuTemplate.cdrom_image"
-                            placeholder="Image"/>
-                    </mat-form-field>
-                </div>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Network
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="qemuTemplate.adapters" placeholder="Adapters">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="text" [(ngModel)]="qemuTemplate.first_port_name" placeholder="First port name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="text" [(ngModel)]="qemuTemplate.port_name_format" placeholder="Name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="qemuTemplate.port_segment_size" placeholder="Segment size">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="text" [(ngModel)]="qemuTemplate.mac_address" placeholder="Base MAC">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                <mat-select placeholder="Type" [(ngModel)]="qemuTemplate.adapter_type">
-                    <mat-option *ngFor="let type of networkTypes" [value]="type[0]">
-                        {{type[1]}} ({{type[0]}})
-                    </mat-option>
-                </mat-select>
-                </mat-form-field>
-                <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>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Advanced
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        Linux boot specific settings
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <div>
-                            <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">Browse</button>
-                            <input
-                                type="file"
-                                #fileinitrd
-                                class="nonvisible"
-                                (change)="uploadInitrdFile($event)"/>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    [(ngModel)]="qemuTemplate.initrd"
-                                    placeholder="Initial RAM disk (initrd)"/>
-                            </mat-form-field>
-                        </div>
-                        <div>
-                            <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">Browse</button>
-                            <input
-                                type="file"
-                                #filekernelimage
-                                class="nonvisible"
-                                (change)="uploadKernelImageFile($event)"/>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    [(ngModel)]="qemuTemplate.kernel_image"
-                                    placeholder="Kernel image"/>
-                            </mat-form-field>
-                        </div>
-                        <mat-form-field class="form-field">
-                            <input matInput type="text" [(ngModel)]="qemuTemplate.kernel_command_line" placeholder="Kernel command line">
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        Bios
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <div>
-                            <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">Browse</button>
-                            <input
-                                type="file"
-                                #filebios
-                                class="nonvisible"
-                                (change)="uploadBiosFile($event)"/>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    [(ngModel)]="qemuTemplate.bios_image"
-                                    placeholder="Bios image"/>
-                            </mat-form-field>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        Optimization
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-checkbox [(ngModel)]="activateCpuThrottling">
-                            Activate CPU throttling
-                        </mat-checkbox>
-                        <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
-                            <input matInput type="number" [(ngModel)]="qemuTemplate.cpu_throttling" placeholder="Perecentage of CPU allowed">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                        <mat-select placeholder="Process priority" [(ngModel)]="qemuTemplate.process_priority">
-                            <mat-option *ngFor="let priority of priorities" [value]="priority">
-                                {{priority}}
-                            </mat-option>
-                        </mat-select>
-                        </mat-form-field>
-                    </mat-card-content>
-                </mat-card>
-                <mat-card>
-                    <mat-card-title></mat-card-title>
-                    <mat-card-subtitle>
-                        Additional settings
-                    </mat-card-subtitle>
-                    <mat-card-content>
-                        <mat-form-field class="form-field">
-                            <input matInput type="text" [(ngModel)]="qemuTemplate.options" placeholder="Options">
-                        </mat-form-field>
-                        <mat-checkbox [(ngModel)]="qemuTemplate.linked_clone">
-                            Use as a linked base VM
-                        </mat-checkbox>
-                    </mat-card-content>
-                </mat-card>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="qemuTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
+  </div>
+  <div class="default-content" *ngIf="qemuTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="templateName"
+              [(ngModel)]="qemuTemplate.name"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="defaultName"
+              [(ngModel)]="qemuTemplate.default_name_format"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              formControlName="symbol"
+              [(ngModel)]="qemuTemplate.symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+        </form>
+        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Category" [(ngModel)]="qemuTemplate.category">
+            <mat-option *ngFor="let category of categories" [value]="category[1]">
+              {{ category[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="qemuTemplate.ram" placeholder="RAM" />
+          <span matSuffix>MB</span>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="qemuTemplate.cpus" placeholder="vCPUs" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Qemu binary" [(ngModel)]="qemuTemplate.qemu_path">
+            <mat-option *ngFor="let binary of binaries" [value]="binary.path">
+              {{ binary.path }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Boot priority" [(ngModel)]="qemuTemplate.boot_priority">
+            <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
+              {{ priority[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="On close" [(ngModel)]="qemuTemplate.on_close">
+            <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+              {{ option[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="select">
+          <mat-select placeholder="Console type" [(ngModel)]="qemuTemplate.console_type">
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox [(ngModel)]="qemuTemplate.console_auto_start"> Auto start console </mat-checkbox>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> HDD </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> HDA (Primary Master) </mat-card-subtitle>
+          <mat-card-content>
+            <mat-form-field class="form-field">
+              <input matInput [(ngModel)]="qemuTemplate.hda_disk_image" placeholder="Disk image" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hda_disk_interface">
+                <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                  {{ interface }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> HDB (Primary Slave) </mat-card-subtitle>
+          <mat-card-content>
+            <mat-form-field class="form-field">
+              <input matInput [(ngModel)]="qemuTemplate.hdb_disk_image" placeholder="Disk image" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdb_disk_interface">
+                <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                  {{ interface }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> HDC (Secondary Master) </mat-card-subtitle>
+          <mat-card-content>
+            <mat-form-field class="form-field">
+              <input matInput [(ngModel)]="qemuTemplate.hdc_disk_image" placeholder="Disk image" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdc_disk_interface">
+                <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                  {{ interface }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> HDD (Secondary Slave) </mat-card-subtitle>
+          <mat-card-content>
+            <mat-form-field class="form-field">
+              <input matInput [(ngModel)]="qemuTemplate.hdd_disk_image" placeholder="Disk image" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdd_disk_interface">
+                <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                  {{ interface }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> CD/DVD </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
+          <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
+          <input type="file" #filecdrom class="nonvisible" (change)="uploadCdromImageFile($event)" />
+          <mat-form-field class="file-name-form-field">
+            <input matInput type="text" [(ngModel)]="qemuTemplate.cdrom_image" placeholder="Image" />
+          </mat-form-field>
         </div>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Network </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="qemuTemplate.adapters" placeholder="Adapters" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="qemuTemplate.first_port_name" placeholder="First port name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="qemuTemplate.port_name_format" placeholder="Name format" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="qemuTemplate.port_segment_size" placeholder="Segment size" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="qemuTemplate.mac_address" placeholder="Base MAC" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Type" [(ngModel)]="qemuTemplate.adapter_type">
+            <mat-option *ngFor="let type of networkTypes" [value]="type[0]"> {{ type[1] }} ({{ type[0] }}) </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <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>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Advanced </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> Linux boot specific settings </mat-card-subtitle>
+          <mat-card-content>
+            <div>
+              <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">Browse</button>
+              <input type="file" #fileinitrd class="nonvisible" (change)="uploadInitrdFile($event)" />
+              <mat-form-field class="file-name-form-field">
+                <input matInput type="text" [(ngModel)]="qemuTemplate.initrd" placeholder="Initial RAM disk (initrd)" />
+              </mat-form-field>
+            </div>
+            <div>
+              <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">
+                Browse
+              </button>
+              <input type="file" #filekernelimage class="nonvisible" (change)="uploadKernelImageFile($event)" />
+              <mat-form-field class="file-name-form-field">
+                <input matInput type="text" [(ngModel)]="qemuTemplate.kernel_image" placeholder="Kernel image" />
+              </mat-form-field>
+            </div>
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="text"
+                [(ngModel)]="qemuTemplate.kernel_command_line"
+                placeholder="Kernel command line"
+              />
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> Bios </mat-card-subtitle>
+          <mat-card-content>
+            <div>
+              <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">Browse</button>
+              <input type="file" #filebios class="nonvisible" (change)="uploadBiosFile($event)" />
+              <mat-form-field class="file-name-form-field">
+                <input matInput type="text" [(ngModel)]="qemuTemplate.bios_image" placeholder="Bios image" />
+              </mat-form-field>
+            </div>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> Optimization </mat-card-subtitle>
+          <mat-card-content>
+            <mat-checkbox [(ngModel)]="activateCpuThrottling"> Activate CPU throttling </mat-checkbox>
+            <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
+              <input
+                matInput
+                type="number"
+                [(ngModel)]="qemuTemplate.cpu_throttling"
+                placeholder="Perecentage of CPU allowed"
+              />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Process priority" [(ngModel)]="qemuTemplate.process_priority">
+                <mat-option *ngFor="let priority of priorities" [value]="priority">
+                  {{ priority }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+        <mat-card>
+          <mat-card-title></mat-card-title>
+          <mat-card-subtitle> Additional settings </mat-card-subtitle>
+          <mat-card-content>
+            <mat-form-field class="form-field">
+              <input matInput type="text" [(ngModel)]="qemuTemplate.options" placeholder="Options" />
+            </mat-form-field>
+            <mat-checkbox [(ngModel)]="qemuTemplate.linked_clone"> Use as a linked base VM </mat-checkbox>
+          </mat-card-content>
+        </mat-card>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="qemuTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-custom-adapters 
-    [hidden]="!(isConfiguratorOpened && qemuTemplate)" 
-    #customAdaptersConfigurator
-    [networkTypes]="networkTypes" 
-    [displayedColumns]="displayedColumns"
-    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
-    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+<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
+  *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.spec.ts b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts
index af687554..f68defa5 100644
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts
@@ -23,118 +23,126 @@ import { QemuService } from '../../../../services/qemu.service';
 import { QemuConfigurationService } from '../../../../services/qemu-configuration.service';
 
 export class MockedQemuService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as QemuTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as QemuTemplate);
+  }
 
-    public saveTemplate(server: Server, qemuTemplate: QemuTemplate) {
-        return of(qemuTemplate);    
-    }
+  public saveTemplate(server: Server, qemuTemplate: QemuTemplate) {
+    return of(qemuTemplate);
+  }
 
-    public getBinaries(server: Server) {
-        return of([]);    
-    }
+  public getBinaries(server: Server) {
+    return of([]);
+  }
 
-    public getImages(server: Server) {
-        return of([]);    
-    }
+  public getImages(server: Server) {
+    return of([]);
+  }
 }
 
 describe('QemuVmTemplateDetailsComponent', () => {
-    let component: QemuVmTemplateDetailsComponent;
-    let fixture: ComponentFixture<QemuVmTemplateDetailsComponent>;
+  let component: QemuVmTemplateDetailsComponent;
+  let fixture: ComponentFixture<QemuVmTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedQemuService = new MockedQemuService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              { provide: ActivatedRoute,  useValue: activatedRoute },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: QemuService, useValue: mockedQemuService },
-              { provide: ToasterService, useValue: mockedToasterService},
-              { provide: QemuConfigurationService, useClass: QemuConfigurationService },
-              { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true }
-          ],
-          declarations: [
-              QemuVmTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedQemuService = new MockedQemuService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(QemuVmTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: QemuService, useValue: mockedQemuService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: QemuConfigurationService, useClass: QemuConfigurationService },
+        { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true },
+      ],
+      declarations: [QemuVmTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QemuVmTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.qemuTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as QemuTemplate;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.qemuTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as QemuTemplate;
 
-        expect(mockedQemuService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when template name is empty', () => {
-        spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.qemuTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as QemuTemplate;
+    expect(mockedQemuService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when template name is empty', () => {
+    spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.qemuTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as QemuTemplate;
 
-        expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
+    expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-    it('should not call save template when default name is empty', () => {
-        spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.qemuTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as QemuTemplate;
+  it('should not call save template when default name is empty', () => {
+    spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.qemuTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as QemuTemplate;
 
-        component.onSave();
+    component.onSave();
 
-        expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
-    });
+    expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-    it('should call save template when symbol is empty', () => {
-        spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('');
-        component.qemuTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as QemuTemplate;
+  it('should call save template when symbol is empty', () => {
+    spyOn(mockedQemuService, 'saveTemplate').and.returnValue(of({} as QemuTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('');
+    component.qemuTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as QemuTemplate;
 
-        component.onSave();
+    component.onSave();
 
-        expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
-    });
+    expect(mockedQemuService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
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 7fc7d285..3f8e693e 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, ViewChildren, ViewChild, QueryList } 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';
@@ -11,154 +11,153 @@ import { QemuConfigurationService } from '../../../../services/qemu-configuratio
 import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
 
-
 @Component({
-    selector: 'app-qemu-virtual-machine-template-details',
-    templateUrl: './qemu-vm-template-details.component.html',
-    styleUrls: ['./qemu-vm-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-qemu-virtual-machine-template-details',
+  templateUrl: './qemu-vm-template-details.component.html',
+  styleUrls: ['./qemu-vm-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class QemuVmTemplateDetailsComponent implements OnInit {
-    server: Server;
-    qemuTemplate: QemuTemplate;
-    isSymbolSelectionOpened: boolean = false;
-    consoleTypes: string[] = [];
-    diskInterfaces: string[] = [];
-    networkTypes = [];
-    bootPriorities = [];
-    onCloseOptions = [];
-    categories = [];
-    priorities: string[] = [];
-    binaries: QemuBinary[] = [];
-    activateCpuThrottling: boolean = true;
-    isConfiguratorOpened: boolean = false;
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    generalSettingsForm: FormGroup;
+  server: Server;
+  qemuTemplate: QemuTemplate;
+  isSymbolSelectionOpened: boolean = false;
+  consoleTypes: string[] = [];
+  diskInterfaces: string[] = [];
+  networkTypes = [];
+  bootPriorities = [];
+  onCloseOptions = [];
+  categories = [];
+  priorities: string[] = [];
+  binaries: QemuBinary[] = [];
+  activateCpuThrottling: boolean = true;
+  isConfiguratorOpened: boolean = false;
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  generalSettingsForm: FormGroup;
 
-    @ViewChild("customAdaptersConfigurator") 
-        customAdaptersConfigurator: CustomAdaptersComponent;
+  @ViewChild('customAdaptersConfigurator')
+  customAdaptersConfigurator: CustomAdaptersComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private qemuService: QemuService,
-        private toasterService: ToasterService,
-        private configurationService: QemuConfigurationService,
-        private formBuilder: FormBuilder,
-        private router: Router
-    ){
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private qemuService: QemuService,
+    private toasterService: ToasterService,
+    private configurationService: QemuConfigurationService,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
+        this.qemuTemplate = qemuTemplate;
+        this.fillCustomAdapters();
+
+        this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
+          this.binaries = qemuBinaries;
         });
-    }
+      });
+    });
+  }
 
-    ngOnInit(){
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            
-            this.getConfiguration();
-            this.qemuService.getTemplate(this.server, template_id).subscribe((qemuTemplate: QemuTemplate) => {
-                this.qemuTemplate = qemuTemplate;
-                this.fillCustomAdapters();
+  getConfiguration() {
+    this.consoleTypes = this.configurationService.getConsoleTypes();
+    this.diskInterfaces = this.configurationService.getDiskInterfaces();
+    this.networkTypes = this.configurationService.getNetworkTypes();
+    this.bootPriorities = this.configurationService.getBootPriorities();
+    this.onCloseOptions = this.configurationService.getOnCloseOptions();
+    this.categories = this.configurationService.getCategories();
+    this.priorities = this.configurationService.getPriorities();
+  }
 
-                this.qemuService.getBinaries(server).subscribe((qemuBinaries: QemuBinary[]) => {
-                    this.binaries = qemuBinaries;
-                });
-            });
+  uploadCdromImageFile(event) {
+    this.qemuTemplate.cdrom_image = event.target.files[0].name;
+  }
+
+  uploadInitrdFile(event) {
+    this.qemuTemplate.initrd = event.target.files[0].name;
+  }
+
+  uploadKernelImageFile(event) {
+    this.qemuTemplate.kernel_image = event.target.files[0].name;
+  }
+
+  uploadBiosFile(event) {
+    this.qemuTemplate.bios_image = event.target.files[0].name;
+  }
+
+  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,
         });
+      });
     }
+  }
 
-    getConfiguration(){
-        this.consoleTypes = this.configurationService.getConsoleTypes();
-        this.diskInterfaces = this.configurationService.getDiskInterfaces();
-        this.networkTypes = this.configurationService.getNetworkTypes();
-        this.bootPriorities = this.configurationService.getBootPriorities();
-        this.onCloseOptions = this.configurationService.getOnCloseOptions();
-        this.categories = this.configurationService.getCategories();
-        this.priorities = this.configurationService.getPriorities();
+  saveCustomAdapters(adapters: CustomAdapter[]) {
+    this.setCustomAdaptersConfiguratorState(false);
+    this.qemuTemplate.custom_adapters = 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.qemuTemplate.custom_adapters.push(copyOfAdapters[i]);
+      } else {
+        this.qemuTemplate.custom_adapters.push({
+          adapter_number: i,
+          adapter_type: 'e1000',
+        });
+      }
     }
+  }
 
-    uploadCdromImageFile(event){
-        this.qemuTemplate.cdrom_image = event.target.files[0].name;
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
+  }
+
+  onSave() {
+    if (this.generalSettingsForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      if (!this.activateCpuThrottling) {
+        this.qemuTemplate.cpu_throttling = 0;
+      }
+      this.fillCustomAdapters();
+
+      this.qemuService.saveTemplate(this.server, this.qemuTemplate).subscribe((savedTemplate: QemuTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
     }
+  }
 
-    uploadInitrdFile(event){
-        this.qemuTemplate.initrd = event.target.files[0].name;
-    }
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-    uploadKernelImageFile(event){
-        this.qemuTemplate.kernel_image = event.target.files[0].name;
-    }
-
-    uploadBiosFile(event){
-        this.qemuTemplate.bios_image = event.target.files[0].name;
-    }
-
-    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
-                });
-            });
-        }
-    }
-
-    saveCustomAdapters(adapters: CustomAdapter[]){
-        this.setCustomAdaptersConfiguratorState(false);
-        this.qemuTemplate.custom_adapters = 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.qemuTemplate.custom_adapters.push(copyOfAdapters[i]);
-            } else {
-                this.qemuTemplate.custom_adapters.push({
-                    adapter_number: i,
-                    adapter_type: 'e1000'
-                });
-            }
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates']);
-    }
-
-    onSave(){
-        if (this.generalSettingsForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            if (!this.activateCpuThrottling){
-                this.qemuTemplate.cpu_throttling = 0;
-            }
-            this.fillCustomAdapters();
-    
-            this.qemuService.saveTemplate(this.server, this.qemuTemplate).subscribe((savedTemplate: QemuTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.qemuTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.qemuTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
index cf79bba7..98e610e0 100644
--- a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
+++ b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html
@@ -1,35 +1,49 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">QEMU VM templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/addtemplate" mat-raised-button color="primary">Add QEMU VM template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">QEMU VM templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/qemu/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add QEMU VM template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!qemuTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="qemuTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of qemuTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                        <button mat-menu-item (click)="copyTemplate(template)">
-                            <mat-icon>content_copy</mat-icon><span>Copy</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!qemuTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="qemuTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of qemuTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+            <button mat-menu-item (click)="copyTemplate(template)">
+              <mat-icon>content_copy</mat-icon><span>Copy</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.spec.ts b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.spec.ts
index 0a16c4f2..56f0fb25 100644
--- a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.spec.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { QemuVmTemplatesComponent } from './qemu-vm-templates.component';
 import { QemuService } from '../../../../services/qemu.service';
 
 export class MockedQemuService {
-    public getTemplates(server: Server) {
-        return of([{} as QemuTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as QemuTemplate]);
+  }
 }
 
 describe('QemuTemplatesComponent', () => {
-    let component: QemuVmTemplatesComponent;
-    let fixture: ComponentFixture<QemuVmTemplatesComponent>;
+  let component: QemuVmTemplatesComponent;
+  let fixture: ComponentFixture<QemuVmTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedQemuService = new MockedQemuService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: QemuService, useValue: mockedQemuService }
-          ],
-          declarations: [
-              QemuVmTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedQemuService = new MockedQemuService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(QemuVmTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: QemuService, useValue: mockedQemuService },
+      ],
+      declarations: [QemuVmTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QemuVmTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts
index cadc97e8..3b8234dd 100644
--- a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -6,47 +6,46 @@ import { QemuTemplate } from '../../../../models/templates/qemu-template';
 import { QemuService } from '../../../../services/qemu.service';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 
-
 @Component({
-    selector: 'app-qemu-virtual-machines-templates',
-    templateUrl: './qemu-vm-templates.component.html',
-    styleUrls: ['./qemu-vm-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-qemu-virtual-machines-templates',
+  templateUrl: './qemu-vm-templates.component.html',
+  styleUrls: ['./qemu-vm-templates.component.scss', '../../preferences.component.scss'],
 })
 export class QemuVmTemplatesComponent implements OnInit {
-    server: Server;
-    qemuTemplates: QemuTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  qemuTemplates: QemuTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private qemuService: QemuService,
-        private router: Router
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private qemuService: QemuService,
+    private router: Router
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.qemuService.getTemplates(this.server).subscribe((qemuTemplates: QemuTemplate[]) => {
-            this.qemuTemplates = qemuTemplates.filter((elem) => elem.template_type === 'qemu' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.qemuService.getTemplates(this.server).subscribe((qemuTemplates: QemuTemplate[]) => {
+      this.qemuTemplates = qemuTemplates.filter((elem) => elem.template_type === 'qemu' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: QemuTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: QemuTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 
-    copyTemplate(template: QemuTemplate) {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates', template.template_id, 'copy']);
-    }
+  copyTemplate(template: QemuTemplate) {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'qemu', 'templates', template.template_id, 'copy']);
+  }
 }
diff --git a/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.html b/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.html
index 96359baa..4c7a9b2e 100644
--- a/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.html
+++ b/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.html
@@ -1,23 +1,23 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New VPCS node template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New VPCS node template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <form [formGroup]="templateNameForm">
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="templateName" type="text" placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="ipAddress" type="text" placeholder="IP address">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <form [formGroup]="templateNameForm">
+        <mat-form-field class="form-field">
+          <input matInput formControlName="templateName" type="text" placeholder="Template name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput formControlName="ipAddress" type="text" placeholder="IP address" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.ts b/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.ts
index 70fd2a10..b53d0b91 100644
--- a/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.ts
+++ b/src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -9,59 +9,58 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { TracengService } from '../../../../services/traceng.service';
 import { TracengTemplate } from '../../../../models/templates/traceng-template';
 
-
 @Component({
-    selector: 'app-add-traceng-template',
-    templateUrl: './add-traceng-template.component.html',
-    styleUrls: ['./add-traceng-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-traceng-template',
+  templateUrl: './add-traceng-template.component.html',
+  styleUrls: ['./add-traceng-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddTracengTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    ipAddress: string = '';
-    templateNameForm: FormGroup
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private tracengService: TracengService,
-        private router: Router,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder
-    ) {
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, [Validators.required]),
-            ipAddress: new FormControl(null, [Validators.required])
-        });
-    }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid) {
-            this.templateName = this.templateNameForm.get('templateName').value;
-            this.ipAddress = this.templateNameForm.get('ipAddress').value;
-            let tracengTemplate: TracengTemplate = this.templateMocksService.getTracengTemplate();
-
-            tracengTemplate.template_id = uuid();
-            tracengTemplate.name = this.templateName;
-            tracengTemplate.ip_address = this.ipAddress;
-
-            this.tracengService.addTemplate(this.server, tracengTemplate).subscribe(() => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  server: Server;
+  templateName: string = '';
+  ipAddress: string = '';
+  templateNameForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private tracengService: TracengService,
+    private router: Router,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private formBuilder: FormBuilder
+  ) {
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, [Validators.required]),
+      ipAddress: new FormControl(null, [Validators.required]),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.templateNameForm.invalid) {
+      this.templateName = this.templateNameForm.get('templateName').value;
+      this.ipAddress = this.templateNameForm.get('ipAddress').value;
+      let tracengTemplate: TracengTemplate = this.templateMocksService.getTracengTemplate();
+
+      tracengTemplate.template_id = uuid();
+      tracengTemplate.name = this.templateName;
+      tracengTemplate.ip_address = this.ipAddress;
+
+      this.tracengService.addTemplate(this.server, tracengTemplate).subscribe(() => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.html b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.html
index 4e94dbb2..20b26241 100644
--- a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.html
+++ b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.html
@@ -1,12 +1,12 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">TraceNG preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="tracengExecutable" placeholder="Path to TraceNG executable"/>
-        </mat-form-field>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">TraceNG preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <mat-form-field class="form-field">
+      <input matInput type="text" [(ngModel)]="tracengExecutable" placeholder="Path to TraceNG executable" />
+    </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.scss b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.scss
index 9c2173c2..8aff6f5a 100644
--- a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.scss
+++ b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.scss
@@ -1,3 +1,3 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.ts b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.ts
index a698d8af..d33bb9ea 100644
--- a/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.ts
+++ b/src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.ts
@@ -1,32 +1,28 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { ServerService } from '../../../../services/server.service';
 
-
 @Component({
-    selector: 'app-traceng-preferences',
-    templateUrl: './traceng-preferences.component.html',
-    styleUrls: ['./traceng-preferences.component.scss']
+  selector: 'app-traceng-preferences',
+  templateUrl: './traceng-preferences.component.html',
+  styleUrls: ['./traceng-preferences.component.scss'],
 })
 export class TracengPreferencesComponent implements OnInit {
-    server: Server;
-    tracengExecutable: string;
+  server: Server;
+  tracengExecutable: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService
-    ) {}
+  constructor(private route: ActivatedRoute, private serverService: ServerService) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
 
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
 
-    restoreDefaults(){
-        this.tracengExecutable = '';
-    }
+  restoreDefaults() {
+    this.tracengExecutable = '';
+  }
 }
diff --git a/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.html b/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.html
index 01e1acdc..2bd43929 100644
--- a/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.html
+++ b/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.html
@@ -1,40 +1,51 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">TraceNG device configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">TraceNG device configuration</h1>
     </div>
-    <div class="default-content" *ngIf="tracengTemplate">
-        <mat-card class="matCard">
-            <form [formGroup]="inputForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="tracengTemplate.name" 
-                        formControlName="templateName"
-                        placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="tracengTemplate.default_name_format" 
-                        formControlName="defaultName"
-                        placeholder="Default name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="tracengTemplate.symbol" 
-                        formControlName="symbol"
-                        placeholder="Symbol">
-                </mat-form-field>
-                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="tracengTemplate">
+    <mat-card class="matCard">
+      <form [formGroup]="inputForm">
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="tracengTemplate.name"
+            formControlName="templateName"
+            placeholder="Template name"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="tracengTemplate.default_name_format"
+            formControlName="defaultName"
+            placeholder="Default name format"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="tracengTemplate.symbol"
+            formControlName="symbol"
+            placeholder="Symbol"
+          />
+        </mat-form-field>
+        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && tracengTemplate" [server]="server" [symbol]="tracengTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && tracengTemplate"
+  [server]="server"
+  [symbol]="tracengTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.ts b/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.ts
index 3042bfce..a1b289cd 100644
--- a/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.ts
+++ b/src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -7,65 +7,66 @@ import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'
 import { TracengService } from '../../../../services/traceng.service';
 import { TracengTemplate } from '../../../../models/templates/traceng-template';
 
-
 @Component({
-    selector: 'app-traceng-template-details',
-    templateUrl: './traceng-template-details.component.html',
-    styleUrls: ['./traceng-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-traceng-template-details',
+  templateUrl: './traceng-template-details.component.html',
+  styleUrls: ['./traceng-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class TracengTemplateDetailsComponent implements OnInit {
-    server: Server;
-    tracengTemplate: TracengTemplate;
-    inputForm: FormGroup;
-    isSymbolSelectionOpened: boolean = false;
+  server: Server;
+  tracengTemplate: TracengTemplate;
+  inputForm: FormGroup;
+  isSymbolSelectionOpened: boolean = false;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private tracengService: TracengService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private router: Router
-    ) {
-        this.inputForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private tracengService: TracengService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {
+    this.inputForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.tracengService.getTemplate(this.server, template_id).subscribe((tracengTemplate: TracengTemplate) => {
+        this.tracengTemplate = tracengTemplate;
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
+  }
+
+  onSave() {
+    if (this.inputForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.tracengService
+        .saveTemplate(this.server, this.tracengTemplate)
+        .subscribe((tracengTemplate: TracengTemplate) => {
+          this.toasterService.success('Changes saved');
         });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-            this.tracengService.getTemplate(this.server, template_id).subscribe((tracengTemplate: TracengTemplate) => {
-                this.tracengTemplate = tracengTemplate;
-            });
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
-    }
-
-    onSave() {
-        if (this.inputForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.tracengService.saveTemplate(this.server, this.tracengTemplate).subscribe((tracengTemplate: TracengTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.tracengTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.tracengTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.html b/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.html
index af922d9f..0932bb84 100644
--- a/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.html
+++ b/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">TraceNG node templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/traceng/addtemplate" mat-raised-button color="primary">Add TraceNG template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">TraceNG node templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/traceng/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add TraceNG template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!tracengTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="tracengTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of tracengTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!tracengTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="tracengTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of tracengTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts b/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts
index ad7ef307..f1e5a881 100644
--- a/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts
+++ b/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -7,40 +7,40 @@ import { TracengTemplate } from '../../../../models/templates/traceng-template';
 import { TracengService } from '../../../../services/traceng.service';
 
 @Component({
-    selector: 'app-traceng-templates',
-    templateUrl: './traceng-templates.component.html',
-    styleUrls: ['./traceng-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-traceng-templates',
+  templateUrl: './traceng-templates.component.html',
+  styleUrls: ['./traceng-templates.component.scss', '../../preferences.component.scss'],
 })
 export class TracengTemplatesComponent implements OnInit {
-    server: Server;
-    tracengTemplates: TracengTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  tracengTemplates: TracengTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private tracengService: TracengService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private tracengService: TracengService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.tracengService.getTemplates(this.server).subscribe((tracengTemplates: TracengTemplate[]) => {
-            this.tracengTemplates = tracengTemplates.filter((elem) => elem.template_type === 'traceng' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.tracengService.getTemplates(this.server).subscribe((tracengTemplates: TracengTemplate[]) => {
+      this.tracengTemplates = tracengTemplates.filter((elem) => elem.template_type === 'traceng' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: TracengTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: TracengTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.html b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.html
index ca621a17..9e53678d 100644
--- a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.html
+++ b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.html
@@ -1,30 +1,27 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New VirtualBox VM template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New VirtualBox VM template</h1>
     </div>
-    <div class="default-content" *ngIf="virtualBoxTemplate">
-        <mat-card class="matCard">
-            <form [formGroup]="vmForm">
-                <mat-form-field class="form-field">
-                    <mat-select 
-                        placeholder="VM list" 
-                        [(ngModel)]="selectedVM"
-                        formControlName="vm" >
-                        <mat-option *ngFor="let vm of virtualMachines" [value]="vm">
-                            {{vm.vmname}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </form>
-            <mat-checkbox [(ngModel)]="virtualBoxTemplate.linked_clone">
-                Use as a linked base VM (experimental)
-            </mat-checkbox>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="virtualBoxTemplate">
+    <mat-card class="matCard">
+      <form [formGroup]="vmForm">
+        <mat-form-field class="form-field">
+          <mat-select placeholder="VM list" [(ngModel)]="selectedVM" formControlName="vm">
+            <mat-option *ngFor="let vm of virtualMachines" [value]="vm">
+              {{ vm.vmname }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </form>
+      <mat-checkbox [(ngModel)]="virtualBoxTemplate.linked_clone">
+        Use as a linked base VM (experimental)
+      </mat-checkbox>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.spec.ts b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.spec.ts
index dd55daf8..5703d756 100644
--- a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.spec.ts
+++ b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.spec.ts
@@ -22,104 +22,104 @@ import { MockedActivatedRoute } from '../../preferences.component.spec';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 export class MockedVirtualBoxService {
-    public addTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
-        return of(virtualBoxTemplate);    
-    }
+  public addTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
+    return of(virtualBoxTemplate);
+  }
 
-    public getVirtualMachines(server: Server) {
-        return of([]);
-    }
+  public getVirtualMachines(server: Server) {
+    return of([]);
+  }
 }
 
 describe('AddVirtualBoxTemplateComponent', () => {
-    let component: AddVirtualBoxTemplateComponent;
-    let fixture: ComponentFixture<AddVirtualBoxTemplateComponent>;
+  let component: AddVirtualBoxTemplateComponent;
+  let fixture: ComponentFixture<AddVirtualBoxTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVirtualBoxService = new MockedVirtualBoxService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/virtualbox/templates', component: AddVirtualBoxTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                AddVirtualBoxTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVirtualBoxService = new MockedVirtualBoxService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddVirtualBoxTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/virtualbox/templates', component: AddVirtualBoxTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [AddVirtualBoxTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddVirtualBoxTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
-        let template: VirtualBoxTemplate = {
-            adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power_off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            ram: 0,
-            symbol: ':/symbols/vbox_guest.svg',
-            template_id: '',
-            template_type: 'virtualbox',
-            usage: '',
-            use_any_adapter: false,
-            vmname: ''
-        }
-        component.virtualBoxTemplate = {} as VirtualBoxTemplate;
-        component.selectedVM = template;
-        component.server = {id: 1} as Server;
-        component.vmForm.controls['vm'].setValue('virtual machine');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call save template', () => {
+    spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+    let template: VirtualBoxTemplate = {
+      adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power_off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      ram: 0,
+      symbol: ':/symbols/vbox_guest.svg',
+      template_id: '',
+      template_type: 'virtualbox',
+      usage: '',
+      use_any_adapter: false,
+      vmname: '',
+    };
+    component.virtualBoxTemplate = {} as VirtualBoxTemplate;
+    component.selectedVM = template;
+    component.server = { id: 1 } as Server;
+    component.vmForm.controls['vm'].setValue('virtual machine');
 
-        expect(mockedVirtualBoxService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call save template when virtual machine is not selected', () => {
-        spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
-        component.server = {id: 1} as Server;
+    expect(mockedVirtualBoxService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call save template when virtual machine is not selected', () => {
+    spyOn(mockedVirtualBoxService, 'addTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+    component.server = { id: 1 } as Server;
 
-        expect(mockedVirtualBoxService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedVirtualBoxService.addTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
index aa48d497..5043df7d 100644
--- a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
+++ b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -10,64 +10,63 @@ import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-temp
 import { v4 as uuid } from 'uuid';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-add-virtual-box-template',
-    templateUrl: './add-virtual-box-template.component.html',
-    styleUrls: ['./add-virtual-box-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-virtual-box-template',
+  templateUrl: './add-virtual-box-template.component.html',
+  styleUrls: ['./add-virtual-box-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddVirtualBoxTemplateComponent implements OnInit {
-    server: Server;
-    virtualMachines: VirtualBoxVm[];
-    selectedVM: VirtualBoxVm;
-    virtualBoxTemplate: VirtualBoxTemplate;
-    vmForm: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private virtualBoxService: VirtualBoxService,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.vmForm = this.formBuilder.group({
-            vm: new FormControl('', Validators.required)
+  server: Server;
+  virtualMachines: VirtualBoxVm[];
+  selectedVM: VirtualBoxVm;
+  virtualBoxTemplate: VirtualBoxTemplate;
+  vmForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private virtualBoxService: VirtualBoxService,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.vmForm = this.formBuilder.group({
+      vm: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.virtualBoxService.getVirtualMachines(this.server).subscribe((virtualMachines: VirtualBoxVm[]) => {
+        this.virtualMachines = virtualMachines;
+
+        this.templateMocksService.getVirtualBoxTemplate().subscribe((template: VirtualBoxTemplate) => {
+          this.virtualBoxTemplate = template;
         });
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'virtualbox', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.vmForm.invalid) {
+      this.virtualBoxTemplate.name = this.selectedVM.vmname;
+      this.virtualBoxTemplate.vmname = this.selectedVM.vmname;
+      this.virtualBoxTemplate.ram = this.selectedVM.ram;
+      this.virtualBoxTemplate.template_id = uuid();
+
+      this.virtualBoxService.addTemplate(this.server, this.virtualBoxTemplate).subscribe(() => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.virtualBoxService.getVirtualMachines(this.server).subscribe((virtualMachines: VirtualBoxVm[]) => {
-                this.virtualMachines = virtualMachines;
-
-                this.templateMocksService.getVirtualBoxTemplate().subscribe((template: VirtualBoxTemplate) => {
-                    this.virtualBoxTemplate = template;
-                });
-            })
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'virtualbox', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.vmForm.invalid) {
-            this.virtualBoxTemplate.name = this.selectedVM.vmname;
-            this.virtualBoxTemplate.vmname = this.selectedVM.vmname;
-            this.virtualBoxTemplate.ram = this.selectedVM.ram;
-            this.virtualBoxTemplate.template_id = uuid();
-
-            this.virtualBoxService.addTemplate(this.server, this.virtualBoxTemplate).subscribe(() => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
-    }
+  }
 }
diff --git a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.html b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.html
index a5e28de9..5933408b 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.html
+++ b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.html
@@ -1,12 +1,12 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VirtualBox preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="vboxManagePath" placeholder="Path to VirtualBox manage"/>
-        </mat-form-field>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VirtualBox preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <mat-form-field class="form-field">
+      <input matInput type="text" [(ngModel)]="vboxManagePath" placeholder="Path to VirtualBox manage" />
+    </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.ts b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.ts
index 7fe26828..74992f5f 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.ts
@@ -1,32 +1,28 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { switchMap } from 'rxjs/operators';
 import { ServerService } from '../../../../services/server.service';
 
-
 @Component({
-    selector: 'app-virtual-box-preferences',
-    templateUrl: './virtual-box-preferences.component.html',
-    styleUrls: ['./virtual-box-preferences.component.scss']
+  selector: 'app-virtual-box-preferences',
+  templateUrl: './virtual-box-preferences.component.html',
+  styleUrls: ['./virtual-box-preferences.component.scss'],
 })
 export class VirtualBoxPreferencesComponent implements OnInit {
-    server: Server;
-    vboxManagePath: string;
+  server: Server;
+  vboxManagePath: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService
-    ) {}
+  constructor(private route: ActivatedRoute, private serverService: ServerService) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
 
-    restoreDefaults(){
-        this.vboxManagePath = '';
-    }
+  restoreDefaults() {
+    this.vboxManagePath = '';
+  }
 }
diff --git a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-prefernces.component.spec.ts b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-prefernces.component.spec.ts
index 1529e7de..575b98d1 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-prefernces.component.spec.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-prefernces.component.spec.ts
@@ -14,41 +14,48 @@ import { VirtualBoxPreferencesComponent } from './virtual-box-preferences.compon
 import { MockedActivatedRoute } from '../../preferences.component.spec';
 
 describe('VirtualBoxPreferencesComponent', () => {
-    let component: VirtualBoxPreferencesComponent;
-    let fixture: ComponentFixture<VirtualBoxPreferencesComponent>;
+  let component: VirtualBoxPreferencesComponent;
+  let fixture: ComponentFixture<VirtualBoxPreferencesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService }
-          ],
-          declarations: [
-              VirtualBoxPreferencesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VirtualBoxPreferencesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+      ],
+      declarations: [VirtualBoxPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VirtualBoxPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should clear path to virtual box manage', () => {
-        component.restoreDefaults();
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        expect(component.vboxManagePath).toBe('');
-    });
+  it('should clear path to virtual box manage', () => {
+    component.restoreDefaults();
+
+    expect(component.vboxManagePath).toBe('');
+  });
 });
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 4b19c3d8..7f0f6e19 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
@@ -1,124 +1,182 @@
 <div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VirtualBox VM configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VirtualBox VM configuration</h1>
     </div>
-    <div class="default-content" *ngIf="virtualBoxTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="templateName" type="text" [(ngModel)]="virtualBoxTemplate.name" placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="defaultName" type="text" [(ngModel)]="virtualBoxTemplate.default_name_format" placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="symbol" type="text" [(ngModel)]="virtualBoxTemplate.symbol" placeholder="Symbol">
-                    </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="virtualBoxTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="virtualBoxTemplate.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="virtualBoxTemplate.console_auto_start">
-                        Auto start console
-                    </mat-checkbox>
-                    <mat-form-field class="form-field">
-                        <input matInput formControlName="ram" type="number" [(ngModel)]="virtualBoxTemplate.ram" placeholder="RAM">
-                        <span matSuffix>MB</span>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="virtualBoxTemplate.on_close">
-                            <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                                {{option[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </form>
-                <mat-checkbox [(ngModel)]="virtualBoxTemplate.headless">
-                    Start VM in headless mode
-                </mat-checkbox><br/>
-                <mat-checkbox [(ngModel)]="virtualBoxTemplate.linked_clone">
-                    Use as a linked base VM (experimental)
-                </mat-checkbox>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Network
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="networkForm">
-                    <mat-form-field class="form-field">
-                        <input formControlName="adapters" matInput type="number" [(ngModel)]="virtualBoxTemplate.adapters" placeholder="Adapters">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="virtualBoxTemplate.first_port_name" placeholder="First port name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input formControlName="nameFormat" matInput type="text" [(ngModel)]="virtualBoxTemplate.port_name_format" placeholder="Name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input formControlName="size" matInput type="number" [(ngModel)]="virtualBoxTemplate.port_segment_size" placeholder="Segment size">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <mat-select [ngModelOptions]="{standalone: true}" placeholder="Type" [(ngModel)]="virtualBoxTemplate.adapter_type">
-                            <mat-option *ngFor="let type of networkTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </form>
-                <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>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="virtualBoxTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="virtualBoxTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="templateName"
+              type="text"
+              [(ngModel)]="virtualBoxTemplate.name"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="defaultName"
+              type="text"
+              [(ngModel)]="virtualBoxTemplate.default_name_format"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="symbol"
+              type="text"
+              [(ngModel)]="virtualBoxTemplate.symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Category"
+              [(ngModel)]="virtualBoxTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Console type"
+              [(ngModel)]="virtualBoxTemplate.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="virtualBoxTemplate.console_auto_start">
+            Auto start console
+          </mat-checkbox>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              formControlName="ram"
+              type="number"
+              [(ngModel)]="virtualBoxTemplate.ram"
+              placeholder="RAM"
+            />
+            <span matSuffix>MB</span>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="On close"
+              [(ngModel)]="virtualBoxTemplate.on_close"
+            >
+              <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                {{ option[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+        <mat-checkbox [(ngModel)]="virtualBoxTemplate.headless"> Start VM in headless mode </mat-checkbox><br />
+        <mat-checkbox [(ngModel)]="virtualBoxTemplate.linked_clone">
+          Use as a linked base VM (experimental)
+        </mat-checkbox>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Network </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="networkForm">
+          <mat-form-field class="form-field">
+            <input
+              formControlName="adapters"
+              matInput
+              type="number"
+              [(ngModel)]="virtualBoxTemplate.adapters"
+              placeholder="Adapters"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              [ngModelOptions]="{ standalone: true }"
+              matInput
+              type="text"
+              [(ngModel)]="virtualBoxTemplate.first_port_name"
+              placeholder="First port name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              formControlName="nameFormat"
+              matInput
+              type="text"
+              [(ngModel)]="virtualBoxTemplate.port_name_format"
+              placeholder="Name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              formControlName="size"
+              matInput
+              type="number"
+              [(ngModel)]="virtualBoxTemplate.port_segment_size"
+              placeholder="Segment size"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <mat-select
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Type"
+              [(ngModel)]="virtualBoxTemplate.adapter_type"
+            >
+              <mat-option *ngFor="let type of networkTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+        <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>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="virtualBoxTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-custom-adapters 
-    [hidden]="!(isConfiguratorOpened && virtualBoxTemplate)" 
-    #customAdaptersConfigurator
-    [networkTypes]="networkTypes" 
-    [displayedColumns]="displayedColumns"
-    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
-    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+<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
+  *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.spec.ts b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.spec.ts
index 21c56211..f59747d7 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.spec.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.spec.ts
@@ -23,107 +23,117 @@ import { MockedActivatedRoute } from '../../preferences.component.spec';
 import { VirtualBoxConfigurationService } from '../../../../services/virtual-box-configuration.service';
 
 export class MockedVirtualBoxService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as VirtualBoxTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as VirtualBoxTemplate);
+  }
 
-    public saveTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
-        return of(virtualBoxTemplate);    
-    }
+  public saveTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate) {
+    return of(virtualBoxTemplate);
+  }
 }
 
 describe('VirtualBoxTemplateDetailsComponent', () => {
-    let component: VirtualBoxTemplateDetailsComponent;
-    let fixture: ComponentFixture<VirtualBoxTemplateDetailsComponent>;
+  let component: VirtualBoxTemplateDetailsComponent;
+  let fixture: ComponentFixture<VirtualBoxTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVirtualBoxService = new MockedVirtualBoxService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule , MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: VirtualBoxConfigurationService, useClass: VirtualBoxConfigurationService }
-          ],
-          declarations: [
-              VirtualBoxTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVirtualBoxService = new MockedVirtualBoxService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VirtualBoxTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: VirtualBoxConfigurationService, useClass: VirtualBoxConfigurationService },
+      ],
+      declarations: [VirtualBoxTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VirtualBoxTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.generalSettingsForm.controls['ram'].setValue('256');
-        component.networkForm.controls['adapters'].setValue('1');
-        component.networkForm.controls['nameFormat'].setValue('{}');
-        component.networkForm.controls['size'].setValue('256');
-        component.virtualBoxTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VirtualBoxTemplate;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.generalSettingsForm.controls['ram'].setValue('256');
+    component.networkForm.controls['adapters'].setValue('1');
+    component.networkForm.controls['nameFormat'].setValue('{}');
+    component.networkForm.controls['size'].setValue('256');
+    component.virtualBoxTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VirtualBoxTemplate;
 
-        expect(mockedVirtualBoxService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when general settings are not filled', () => {
-        spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.generalSettingsForm.controls['ram'].setValue('256');
-        component.networkForm.controls['adapters'].setValue('1');
-        component.networkForm.controls['nameFormat'].setValue('{}');
-        component.networkForm.controls['size'].setValue('256');
-        component.virtualBoxTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VirtualBoxTemplate;
+    expect(mockedVirtualBoxService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when general settings are not filled', () => {
+    spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.generalSettingsForm.controls['ram'].setValue('256');
+    component.networkForm.controls['adapters'].setValue('1');
+    component.networkForm.controls['nameFormat'].setValue('{}');
+    component.networkForm.controls['size'].setValue('256');
+    component.virtualBoxTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VirtualBoxTemplate;
 
-        expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when network settings are not filled', () => {
-        spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.generalSettingsForm.controls['ram'].setValue('256');
-        component.networkForm.controls['adapters'].setValue('');
-        component.networkForm.controls['nameFormat'].setValue('{}');
-        component.networkForm.controls['size'].setValue('256');
-        component.virtualBoxTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VirtualBoxTemplate;
+    expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when network settings are not filled', () => {
+    spyOn(mockedVirtualBoxService, 'saveTemplate').and.returnValue(of({} as VirtualBoxTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.generalSettingsForm.controls['ram'].setValue('256');
+    component.networkForm.controls['adapters'].setValue('');
+    component.networkForm.controls['nameFormat'].setValue('{}');
+    component.networkForm.controls['size'].setValue('256');
+    component.virtualBoxTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VirtualBoxTemplate;
 
-        expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedVirtualBoxService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
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 13fe3164..7a1cb5ff 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, ViewChild } 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';
@@ -10,131 +10,134 @@ 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({
-    selector: 'app-virtual-box-template-details',
-    templateUrl: './virtual-box-template-details.component.html',
-    styleUrls: ['./virtual-box-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-virtual-box-template-details',
+  templateUrl: './virtual-box-template-details.component.html',
+  styleUrls: ['./virtual-box-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class VirtualBoxTemplateDetailsComponent implements OnInit {
-    server: Server;
-    virtualBoxTemplate: VirtualBoxTemplate;
-    isSymbolSelectionOpened: boolean = false;
-    consoleTypes: string[] = [];
-    onCloseOptions = [];
-    categories = [];
-    networkTypes = [];
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    isConfiguratorOpened: boolean = false;
-    generalSettingsForm: FormGroup;
-    networkForm: FormGroup
+  server: Server;
+  virtualBoxTemplate: VirtualBoxTemplate;
+  isSymbolSelectionOpened: boolean = false;
+  consoleTypes: string[] = [];
+  onCloseOptions = [];
+  categories = [];
+  networkTypes = [];
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  isConfiguratorOpened: boolean = false;
+  generalSettingsForm: FormGroup;
+  networkForm: FormGroup;
 
-    @ViewChild("customAdaptersConfigurator") 
-        customAdaptersConfigurator: CustomAdaptersComponent;
+  @ViewChild('customAdaptersConfigurator')
+  customAdaptersConfigurator: CustomAdaptersComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private virtualBoxService: VirtualBoxService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private virtualBoxConfigurationService: VirtualBoxConfigurationService,
-        private router: Router
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required),
-            ram: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private virtualBoxService: VirtualBoxService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private virtualBoxConfigurationService: VirtualBoxConfigurationService,
+    private router: Router
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+      ram: new FormControl('', Validators.required),
+    });
+
+    this.networkForm = this.formBuilder.group({
+      adapters: new FormControl('', Validators.required),
+      nameFormat: new FormControl('', Validators.required),
+      size: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.virtualBoxService
+        .getTemplate(this.server, template_id)
+        .subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
+          this.virtualBoxTemplate = virtualBoxTemplate;
+          this.fillCustomAdapters();
         });
+    });
+  }
 
-        this.networkForm = this.formBuilder.group({
-            adapters: new FormControl('', Validators.required),
-            nameFormat: new FormControl('', Validators.required),
-            size: new FormControl('', Validators.required)
+  getConfiguration() {
+    this.consoleTypes = this.virtualBoxConfigurationService.getConsoleTypes();
+    this.onCloseOptions = this.virtualBoxConfigurationService.getOnCloseoptions();
+    this.categories = this.virtualBoxConfigurationService.getCategories();
+    this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
+  }
+
+  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(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.virtualBoxTemplate.custom_adapters.push(copyOfAdapters[i]);
+      } else {
+        this.virtualBoxTemplate.custom_adapters.push({
+          adapter_number: i,
+          adapter_type: 'e1000',
+        });
+      }
+    }
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'virtualbox', 'templates']);
+  }
+
+  onSave() {
+    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');
         });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-            this.getConfiguration();
-            this.virtualBoxService.getTemplate(this.server, template_id).subscribe((virtualBoxTemplate: VirtualBoxTemplate) => {
-                this.virtualBoxTemplate = virtualBoxTemplate;
-                this.fillCustomAdapters();
-            });
-        });
-    }
-
-    getConfiguration(){
-        this.consoleTypes = this.virtualBoxConfigurationService.getConsoleTypes();
-        this.onCloseOptions = this.virtualBoxConfigurationService.getOnCloseoptions();
-        this.categories = this.virtualBoxConfigurationService.getCategories();
-        this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
-    }
-
-    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(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.virtualBoxTemplate.custom_adapters.push(copyOfAdapters[i]);
-            } else {
-                this.virtualBoxTemplate.custom_adapters.push({
-                    adapter_number: i,
-                    adapter_type: 'e1000'
-                });
-            }
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'virtualbox', 'templates']);
-    }
-
-    onSave() {
-        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");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.virtualBoxTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.virtualBoxTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
index bb8f19b7..e7018d18 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
+++ b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VirtualBox VM templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/virtualbox/addtemplate" mat-raised-button color="primary">Add Virtual Box VM template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VirtualBox VM templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/virtualbox/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add Virtual Box VM template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!virtualBoxTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="virtualBoxTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of virtualBoxTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!virtualBoxTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="virtualBoxTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of virtualBoxTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.spec.ts b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.spec.ts
index 6ae23965..93d5dd04 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.spec.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { VirtualBoxService } from '../../../../services/virtual-box.service';
 import { MockedActivatedRoute } from '../../preferences.component.spec';
 
 export class MockedVirtualBoxService {
-    public getTemplates(server: Server) {
-        return of([{} as VirtualBoxTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as VirtualBoxTemplate]);
+  }
 }
 
 describe('VirtualBoxTemplatesComponent', () => {
-    let component: VirtualBoxTemplatesComponent;
-    let fixture: ComponentFixture<VirtualBoxTemplatesComponent>;
+  let component: VirtualBoxTemplatesComponent;
+  let fixture: ComponentFixture<VirtualBoxTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVirtualBoxService = new MockedVirtualBoxService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VirtualBoxService, useValue: mockedVirtualBoxService }
-          ],
-          declarations: [
-              VirtualBoxTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVirtualBoxService = new MockedVirtualBoxService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VirtualBoxTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VirtualBoxService, useValue: mockedVirtualBoxService },
+      ],
+      declarations: [VirtualBoxTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VirtualBoxTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts
index 357f254c..8aea48cb 100644
--- a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -7,42 +7,43 @@ import { VirtualBoxService } from '../../../../services/virtual-box.service';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 
-
 @Component({
-    selector: 'app-virtual-box-templates',
-    templateUrl: './virtual-box-templates.component.html',
-    styleUrls: ['./virtual-box-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-virtual-box-templates',
+  templateUrl: './virtual-box-templates.component.html',
+  styleUrls: ['./virtual-box-templates.component.scss', '../../preferences.component.scss'],
 })
 export class VirtualBoxTemplatesComponent implements OnInit {
-    server: Server;
-    virtualBoxTemplates: VirtualBoxTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  virtualBoxTemplates: VirtualBoxTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private virtualBoxService: VirtualBoxService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private virtualBoxService: VirtualBoxService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates(){
-        this.virtualBoxService.getTemplates(this.server).subscribe((virtualBoxTemplates: VirtualBoxTemplate[]) => {
-            this.virtualBoxTemplates = virtualBoxTemplates.filter((elem) => elem.template_type === 'virtualbox' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.virtualBoxService.getTemplates(this.server).subscribe((virtualBoxTemplates: VirtualBoxTemplate[]) => {
+      this.virtualBoxTemplates = virtualBoxTemplates.filter(
+        (elem) => elem.template_type === 'virtualbox' && !elem.builtin
+      );
+    });
+  }
 
-    deleteTemplate(template: VpcsTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: VpcsTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.html b/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.html
index 6fea2574..40261c2d 100644
--- a/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.html
+++ b/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.html
@@ -1,30 +1,27 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New VMware VM template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New VMware VM template</h1>
     </div>
-    <div class="default-content" *ngIf="vmwareTemplate">
-        <mat-card class="matCard">
-            <form [formGroup]="templateNameForm">
-                <mat-form-field class="form-field">
-                    <mat-select 
-                        placeholder="VM list" 
-                        formControlName="templateName"
-                        [(ngModel)]="selectedVM" >
-                        <mat-option *ngFor="let vm of virtualMachines" [value]="vm">
-                            {{vm.vmname}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field><br/>
-                <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="vmwareTemplate.linked_clone">
-                    Use as a linked base VM (experimental)
-                </mat-checkbox>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="vmwareTemplate">
+    <mat-card class="matCard">
+      <form [formGroup]="templateNameForm">
+        <mat-form-field class="form-field">
+          <mat-select placeholder="VM list" formControlName="templateName" [(ngModel)]="selectedVM">
+            <mat-option *ngFor="let vm of virtualMachines" [value]="vm">
+              {{ vm.vmname }}
+            </mat-option>
+          </mat-select> </mat-form-field
+        ><br />
+        <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.linked_clone">
+          Use as a linked base VM (experimental)
+        </mat-checkbox>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts b/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts
index dd2ccabe..ea3f22f4 100644
--- a/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts
+++ b/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -10,63 +10,62 @@ import { VmwareTemplate } from '../../../../models/templates/vmware-template';
 import { VmwareService } from '../../../../services/vmware.service';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
-
 @Component({
-    selector: 'app-add-vmware-template',
-    templateUrl: './add-vmware-template.component.html',
-    styleUrls: ['./add-vmware-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-vmware-template',
+  templateUrl: './add-vmware-template.component.html',
+  styleUrls: ['./add-vmware-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddVmwareTemplateComponent implements OnInit {
-    server: Server;
-    virtualMachines: VmwareVm[];
-    selectedVM: VmwareVm;
-    vmwareTemplate: VmwareTemplate;
-    templateNameForm: FormGroup;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vmwareService: VmwareService,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private router: Router,
-        private formBuilder: FormBuilder
-    ) {
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, [Validators.required])
+  server: Server;
+  virtualMachines: VmwareVm[];
+  selectedVM: VmwareVm;
+  vmwareTemplate: VmwareTemplate;
+  templateNameForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private vmwareService: VmwareService,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) {
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, [Validators.required]),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.vmwareService.getVirtualMachines(this.server).subscribe((virtualMachines: VmwareVm[]) => {
+        this.virtualMachines = virtualMachines;
+
+        this.templateMocksService.getVmwareTemplate().subscribe((template: VmwareTemplate) => {
+          this.vmwareTemplate = template;
         });
+      });
+    });
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'vmware', 'templates']);
+  }
+
+  addTemplate() {
+    if (!this.templateNameForm.invalid) {
+      this.vmwareTemplate.name = this.selectedVM.vmname;
+      this.vmwareTemplate.vmx_path = this.selectedVM.vmx_path;
+      this.vmwareTemplate.template_id = uuid();
+
+      this.vmwareService.addTemplate(this.server, this.vmwareTemplate).subscribe(() => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
-
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-
-            this.vmwareService.getVirtualMachines(this.server).subscribe((virtualMachines: VmwareVm[]) => {
-                this.virtualMachines = virtualMachines;
-
-                this.templateMocksService.getVmwareTemplate().subscribe((template: VmwareTemplate) => {
-                    this.vmwareTemplate = template;
-                });
-            })
-        });
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'vmware', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid) {
-            this.vmwareTemplate.name = this.selectedVM.vmname;
-            this.vmwareTemplate.vmx_path = this.selectedVM.vmx_path;
-            this.vmwareTemplate.template_id = uuid();
-
-            this.vmwareService.addTemplate(this.server, this.vmwareTemplate).subscribe(() => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
-    }
+  }
 }
diff --git a/src/app/components/preferences/vmware/add-vmware-template/add-vmware.component.template.spec.ts b/src/app/components/preferences/vmware/add-vmware-template/add-vmware.component.template.spec.ts
index 5a3b65c2..d191969d 100644
--- a/src/app/components/preferences/vmware/add-vmware-template/add-vmware.component.template.spec.ts
+++ b/src/app/components/preferences/vmware/add-vmware-template/add-vmware.component.template.spec.ts
@@ -23,84 +23,84 @@ import { VmwareVm } from '../../../../models/vmware/vmware-vm';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 export class MockedVmwareService {
-    public addTemplate(server: Server, vmwareTemplate: VmwareTemplate) {
-        return of(vmwareTemplate);    
-    }
+  public addTemplate(server: Server, vmwareTemplate: VmwareTemplate) {
+    return of(vmwareTemplate);
+  }
 
-    public getVirtualMachines(server: Server) {
-        return of([]);
-    }
+  public getVirtualMachines(server: Server) {
+    return of([]);
+  }
 }
 
 describe('AddVmwareTemplateComponent', () => {
-    let component: AddVmwareTemplateComponent;
-    let fixture: ComponentFixture<AddVmwareTemplateComponent>;
+  let component: AddVmwareTemplateComponent;
+  let fixture: ComponentFixture<AddVmwareTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVmwareService = new MockedVmwareService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/vmware/templates', component: AddVmwareTemplateComponent}])
-            ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: VmwareService, useValue: mockedVmwareService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                AddVmwareTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVmwareService = new MockedVmwareService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddVmwareTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/vmware/templates', component: AddVmwareTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VmwareService, useValue: mockedVmwareService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [AddVmwareTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddVmwareTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedVmwareService, 'addTemplate').and.returnValue(of({} as VmwareTemplate));
-        let template: VmwareVm = {
-            vmname: 'test',
-            vmx_path: ''
-        };
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.vmwareTemplate = {} as VmwareTemplate;
-        component.selectedVM = template;
-        component.server = {id: 1} as Server;
-        component.templateNameForm.controls['templateName'].setValue('template name');
+  it('should call save template', () => {
+    spyOn(mockedVmwareService, 'addTemplate').and.returnValue(of({} as VmwareTemplate));
+    let template: VmwareVm = {
+      vmname: 'test',
+      vmx_path: '',
+    };
 
-        component.addTemplate();
+    component.vmwareTemplate = {} as VmwareTemplate;
+    component.selectedVM = template;
+    component.server = { id: 1 } as Server;
+    component.templateNameForm.controls['templateName'].setValue('template name');
 
-        expect(mockedVmwareService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call save template when virtual machine is not selected', () => {
-        spyOn(mockedVmwareService, 'addTemplate').and.returnValue(of({} as VmwareTemplate));
-        component.server = {id: 1} as Server;
+    expect(mockedVmwareService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call save template when virtual machine is not selected', () => {
+    spyOn(mockedVmwareService, 'addTemplate').and.returnValue(of({} as VmwareTemplate));
+    component.server = { id: 1 } as Server;
 
-        expect(mockedVmwareService.addTemplate).not.toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedVmwareService.addTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.html b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.html
index 2f7bc390..1effcbab 100644
--- a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.html
+++ b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.html
@@ -1,12 +1,12 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VMware preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="vmrunPath" placeholder="Path to vmrun:"/>
-        </mat-form-field>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VMware preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <mat-form-field class="form-field">
+      <input matInput type="text" [(ngModel)]="vmrunPath" placeholder="Path to vmrun:" />
+    </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.scss b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.scss
index 9c2173c2..8aff6f5a 100644
--- a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.scss
+++ b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.scss
@@ -1,3 +1,3 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.spec.ts b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.spec.ts
index 60cb6ab1..49675a36 100644
--- a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.spec.ts
+++ b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.spec.ts
@@ -15,41 +15,48 @@ import { MockedActivatedRoute } from '../../preferences.component.spec';
 import { VmwarePreferencesComponent } from './vmware-preferences.component';
 
 describe('VmwarePreferencesComponent', () => {
-    let component: VmwarePreferencesComponent;
-    let fixture: ComponentFixture<VmwarePreferencesComponent>;
+  let component: VmwarePreferencesComponent;
+  let fixture: ComponentFixture<VmwarePreferencesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService }
-          ],
-          declarations: [
-              VmwarePreferencesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VmwarePreferencesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+      ],
+      declarations: [VmwarePreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VmwarePreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should clear path to executable', () => {
-        component.restoreDefaults();
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        expect(component.vmrunPath).toBe('');
-    });
+  it('should clear path to executable', () => {
+    component.restoreDefaults();
+
+    expect(component.vmrunPath).toBe('');
+  });
 });
diff --git a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.ts b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.ts
index c8da405f..746d242e 100644
--- a/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.ts
+++ b/src/app/components/preferences/vmware/vmware-preferences/vmware-preferences.component.ts
@@ -1,33 +1,29 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { switchMap } from 'rxjs/operators';
 import { ServerService } from '../../../../services/server.service';
 
-
 @Component({
-    selector: 'app-vmware-preferences',
-    templateUrl: './vmware-preferences.component.html',
-    styleUrls: ['./vmware-preferences.component.scss']
+  selector: 'app-vmware-preferences',
+  templateUrl: './vmware-preferences.component.html',
+  styleUrls: ['./vmware-preferences.component.scss'],
 })
 export class VmwarePreferencesComponent implements OnInit {
-    server: Server;
-    vmrunPath: string;
+  server: Server;
+  vmrunPath: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService
-    ) {}
+  constructor(private route: ActivatedRoute, private serverService: ServerService) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
 
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
 
-    restoreDefaults(){
-        this.vmrunPath = '';
-    }
+  restoreDefaults() {
+    this.vmrunPath = '';
+  }
 }
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 44a6de61..a7b1b2d3 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
@@ -1,145 +1,144 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened || isConfiguratorOpened }">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VMware VM configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VMware VM configuration</h1>
     </div>
-    <div class="default-content" *ngIf="vmwareTemplate">
-        <mat-accordion>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        General settings
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="vmwareTemplate.name" 
-                            formControlName="templateName"
-                            placeholder="Template name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="vmwareTemplate.default_name_format" 
-                            formControlName="defaultName"
-                            placeholder="Default name format">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="vmwareTemplate.symbol" 
-                            formControlName="symbol"
-                            placeholder="Symbol">
-                    </mat-form-field>
-                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="form-field">
-                        <mat-select 
-                            placeholder="Category" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="vmwareTemplate.category">
-                            <mat-option *ngFor="let category of categories" [value]="category[1]">
-                                {{category[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select 
-                            placeholder="Console type" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="vmwareTemplate.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-checkbox 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="vmwareTemplate.console_auto_start">
-                        Auto start console
-                    </mat-checkbox>
-                    <mat-form-field class="form-field">
-                        <mat-select 
-                            placeholder="On close" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="vmwareTemplate.on_close">
-                            <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                                {{option[0]}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-checkbox 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="vmwareTemplate.headless">
-                        Start VM in headless mode
-                    </mat-checkbox><br/><br/>
-                    <mat-checkbox 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="vmwareTemplate.linked_clone">
-                        Use as a linked base VM (experimental)
-                    </mat-checkbox>
-                </form>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Network
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="vmwareTemplate.adapters" placeholder="Adapters">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="text" [(ngModel)]="vmwareTemplate.first_port_name" placeholder="First port name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="text" [(ngModel)]="vmwareTemplate.port_name_format" placeholder="Name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input matInput type="number" [(ngModel)]="vmwareTemplate.port_segment_size" placeholder="Segment size">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="Type" [(ngModel)]="vmwareTemplate.adapter_type">
-                        <mat-option *ngFor="let type of networkTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <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>
-            </mat-expansion-panel>
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        Usage
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                <mat-form-field class="form-field">
-                    <textarea matInput type="text" [(ngModel)]="vmwareTemplate.usage"></textarea>
-                </mat-form-field>
-            </mat-expansion-panel>
-        </mat-accordion>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="vmwareTemplate">
+    <mat-accordion>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> General settings </mat-panel-title>
+        </mat-expansion-panel-header>
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="vmwareTemplate.name"
+              formControlName="templateName"
+              placeholder="Template name"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="vmwareTemplate.default_name_format"
+              formControlName="defaultName"
+              placeholder="Default name format"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="vmwareTemplate.symbol"
+              formControlName="symbol"
+              placeholder="Symbol"
+            />
+          </mat-form-field>
+          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+          <mat-form-field class="form-field">
+            <mat-select
+              placeholder="Category"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="vmwareTemplate.category"
+            >
+              <mat-option *ngFor="let category of categories" [value]="category[1]">
+                {{ category[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              placeholder="Console type"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="vmwareTemplate.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.console_auto_start">
+            Auto start console
+          </mat-checkbox>
+          <mat-form-field class="form-field">
+            <mat-select
+              placeholder="On close"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="vmwareTemplate.on_close"
+            >
+              <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                {{ option[0] }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.headless">
+            Start VM in headless mode </mat-checkbox
+          ><br /><br />
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.linked_clone">
+            Use as a linked base VM (experimental)
+          </mat-checkbox>
+        </form>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Network </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="vmwareTemplate.adapters" placeholder="Adapters" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="vmwareTemplate.first_port_name" placeholder="First port name" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="vmwareTemplate.port_name_format" placeholder="Name format" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="number" [(ngModel)]="vmwareTemplate.port_segment_size" placeholder="Segment size" />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Type" [(ngModel)]="vmwareTemplate.adapter_type">
+            <mat-option *ngFor="let type of networkTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <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>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Usage </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-form-field class="form-field">
+          <textarea matInput type="text" [(ngModel)]="vmwareTemplate.usage"></textarea>
+        </mat-form-field>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-custom-adapters 
-    [hidden]="!(isConfiguratorOpened && vmwareTemplate)" 
-    #customAdaptersConfigurator
-    [networkTypes]="networkTypes" 
-    [displayedColumns]="displayedColumns"
-    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
-    (saveConfigurationEmitter)="saveCustomAdapters($event)"
+<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
+  *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.spec.ts b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.spec.ts
index 40d23067..ff0c4c5d 100644
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.spec.ts
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.spec.ts
@@ -23,110 +23,120 @@ import { VmwareService } from '../../../../services/vmware.service';
 import { VmwareConfigurationService } from '../../../../services/vmware-configuration.service';
 
 export class MockedVmwareService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as VmwareTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as VmwareTemplate);
+  }
 
-    public saveTemplate(server: Server, vmwareTemplate: VmwareTemplate) {
-        return of(vmwareTemplate);    
-    }
+  public saveTemplate(server: Server, vmwareTemplate: VmwareTemplate) {
+    return of(vmwareTemplate);
+  }
 }
 
 describe('VmwareTemplateDetailsComponent', () => {
-    let component: VmwareTemplateDetailsComponent;
-    let fixture: ComponentFixture<VmwareTemplateDetailsComponent>;
+  let component: VmwareTemplateDetailsComponent;
+  let fixture: ComponentFixture<VmwareTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVmwareService = new MockedVmwareService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatTableModule , MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VmwareService, useValue: mockedVmwareService },
-              { provide: ToasterService, useValue: mockedToasterService },
-              { provide: VmwareConfigurationService, useClass: VmwareConfigurationService }
-          ],
-          declarations: [
-              VmwareTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVmwareService = new MockedVmwareService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VmwareTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VmwareService, useValue: mockedVmwareService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: VmwareConfigurationService, useClass: VmwareConfigurationService },
+      ],
+      declarations: [VmwareTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VmwareTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.vmwareTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VmwareTemplate;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.vmwareTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VmwareTemplate;
 
-        expect(mockedVmwareService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when template name is empty', () => {
-        spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.vmwareTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VmwareTemplate;
+    expect(mockedVmwareService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when template name is empty', () => {
+    spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.vmwareTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VmwareTemplate;
 
-        expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when default name is empty', () => {
-        spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('');
-        component.generalSettingsForm.controls['symbol'].setValue('symbol');
-        component.vmwareTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VmwareTemplate;
+    expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when default name is empty', () => {
+    spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('');
+    component.generalSettingsForm.controls['symbol'].setValue('symbol');
+    component.vmwareTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VmwareTemplate;
 
-        expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when symbol path is empty', () => {
-        spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
-        component.generalSettingsForm.controls['templateName'].setValue('template name');
-        component.generalSettingsForm.controls['defaultName'].setValue('default name');
-        component.generalSettingsForm.controls['symbol'].setValue('');
-        component.vmwareTemplate = {
-            adapters: 0,
-            custom_adapters: []
-        } as VmwareTemplate;
+    expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when symbol path is empty', () => {
+    spyOn(mockedVmwareService, 'saveTemplate').and.returnValue(of({} as VmwareTemplate));
+    component.generalSettingsForm.controls['templateName'].setValue('template name');
+    component.generalSettingsForm.controls['defaultName'].setValue('default name');
+    component.generalSettingsForm.controls['symbol'].setValue('');
+    component.vmwareTemplate = {
+      adapters: 0,
+      custom_adapters: [],
+    } as VmwareTemplate;
 
-        expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedVmwareService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
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 ff451779..48739131 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, ViewChild } 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';
@@ -10,122 +10,121 @@ import { VmwareConfigurationService } from '../../../../services/vmware-configur
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-adapters.component';
 
-
 @Component({
-    selector: 'app-vmware-template-details',
-    templateUrl: './vmware-template-details.component.html',
-    styleUrls: ['./vmware-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-vmware-template-details',
+  templateUrl: './vmware-template-details.component.html',
+  styleUrls: ['./vmware-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class VmwareTemplateDetailsComponent implements OnInit {
-    server: Server;
-    vmwareTemplate: VmwareTemplate;
-    generalSettingsForm: FormGroup;
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    isConfiguratorOpened: boolean = false;
-    isSymbolSelectionOpened: boolean = false;
-    consoleTypes: string[] = [];
-    categories = [];
-    onCloseOptions = [];
-    networkTypes = [];
+  server: Server;
+  vmwareTemplate: VmwareTemplate;
+  generalSettingsForm: FormGroup;
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  isConfiguratorOpened: boolean = false;
+  isSymbolSelectionOpened: boolean = false;
+  consoleTypes: string[] = [];
+  categories = [];
+  onCloseOptions = [];
+  networkTypes = [];
 
-    @ViewChild("customAdaptersConfigurator") 
-        customAdaptersConfigurator: CustomAdaptersComponent;
+  @ViewChild('customAdaptersConfigurator')
+  customAdaptersConfigurator: CustomAdaptersComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vmwareService: VmwareService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private vmwareConfigurationService: VmwareConfigurationService,
-        private router: Router
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private vmwareService: VmwareService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private vmwareConfigurationService: VmwareConfigurationService,
+    private router: Router
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.vmwareService.getTemplate(this.server, template_id).subscribe((vmwareTemplate: VmwareTemplate) => {
+        this.vmwareTemplate = vmwareTemplate;
+        this.fillCustomAdapters();
+      });
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.vmwareConfigurationService.getConsoleTypes();
+    this.categories = this.vmwareConfigurationService.getCategories();
+    this.onCloseOptions = this.vmwareConfigurationService.getOnCloseoptions();
+    this.networkTypes = this.vmwareConfigurationService.getNetworkTypes();
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'vmware', 'templates']);
+  }
+
+  onSave() {
+    if (this.generalSettingsForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.fillCustomAdapters();
+
+      this.vmwareService.saveTemplate(this.server, this.vmwareTemplate).subscribe((vmwareTemplate: VmwareTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
+    }
+  }
+
+  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,
         });
+      });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  saveCustomAdapters(adapters: CustomAdapter[]) {
+    this.setCustomAdaptersConfiguratorState(false);
+    this.vmwareTemplate.custom_adapters = adapters;
+  }
 
-            this.getConfiguration();
-            this.vmwareService.getTemplate(this.server, template_id).subscribe((vmwareTemplate: VmwareTemplate) => {
-                this.vmwareTemplate = vmwareTemplate;
-                this.fillCustomAdapters();
-            });
+  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.vmwareTemplate.custom_adapters.push(copyOfAdapters[i]);
+      } else {
+        this.vmwareTemplate.custom_adapters.push({
+          adapter_number: i,
+          adapter_type: 'e1000',
         });
+      }
     }
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.vmwareConfigurationService.getConsoleTypes();
-        this.categories = this.vmwareConfigurationService.getCategories();
-        this.onCloseOptions = this.vmwareConfigurationService.getOnCloseoptions();
-        this.networkTypes = this.vmwareConfigurationService.getNetworkTypes();
-    }
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'vmware', 'templates']);
-    }
-
-    onSave() {
-        if (this.generalSettingsForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.fillCustomAdapters();
-
-            this.vmwareService.saveTemplate(this.server, this.vmwareTemplate).subscribe((vmwareTemplate: VmwareTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    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
-                });
-            });
-        }
-    }
-
-    saveCustomAdapters(adapters: CustomAdapter[]){
-        this.setCustomAdaptersConfiguratorState(false);
-        this.vmwareTemplate.custom_adapters = 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.vmwareTemplate.custom_adapters.push(copyOfAdapters[i]);
-            } else {
-                this.vmwareTemplate.custom_adapters.push({
-                    adapter_number: i,
-                    adapter_type: 'e1000'
-                });
-            }
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.vmwareTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.vmwareTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
index 5d39c02c..8442faa2 100644
--- a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
+++ b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VMware VM templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vmware/addtemplate" mat-raised-button color="primary">Add VMware template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VMware VM templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/vmware/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add VMware template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!vmwareTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="vmwareTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of vmwareTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!vmwareTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="vmwareTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of vmwareTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.spec.ts b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.spec.ts
index 4ff8efcc..61b4cd68 100644
--- a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.spec.ts
+++ b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { VmwareTemplatesComponent } from './vmware-templates.component';
 import { VmwareService } from '../../../../services/vmware.service';
 
 export class MockedVmwareService {
-    public getTemplates(server: Server) {
-        return of([{} as VmwareTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as VmwareTemplate]);
+  }
 }
 
 describe('VmwareTemplatesComponent', () => {
-    let component: VmwareTemplatesComponent;
-    let fixture: ComponentFixture<VmwareTemplatesComponent>;
+  let component: VmwareTemplatesComponent;
+  let fixture: ComponentFixture<VmwareTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVmwareService = new MockedVmwareService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VmwareService, useValue: mockedVmwareService }
-          ],
-          declarations: [
-              VmwareTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVmwareService = new MockedVmwareService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VmwareTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VmwareService, useValue: mockedVmwareService },
+      ],
+      declarations: [VmwareTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VmwareTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts
index 5f1a941e..528ae671 100644
--- a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts
+++ b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -6,42 +6,41 @@ import { VmwareTemplate } from '../../../../models/templates/vmware-template';
 import { VmwareService } from '../../../../services/vmware.service';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 
-
 @Component({
-    selector: 'app-vmware-templates',
-    templateUrl: './vmware-templates.component.html',
-    styleUrls: ['./vmware-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-vmware-templates',
+  templateUrl: './vmware-templates.component.html',
+  styleUrls: ['./vmware-templates.component.scss', '../../preferences.component.scss'],
 })
 export class VmwareTemplatesComponent implements OnInit {
-    server: Server;
-    vmwareTemplates: VmwareTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  vmwareTemplates: VmwareTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vmwareService: VmwareService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private vmwareService: VmwareService
+  ) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.vmwareService.getTemplates(this.server).subscribe((vmwareTemplates: VmwareTemplate[]) => {
-            this.vmwareTemplates = vmwareTemplates.filter((elem) => elem.template_type === 'vmware' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.vmwareService.getTemplates(this.server).subscribe((vmwareTemplates: VmwareTemplate[]) => {
+      this.vmwareTemplates = vmwareTemplates.filter((elem) => elem.template_type === 'vmware' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: VmwareTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: VmwareTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.html b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.html
index 17a5f6d1..f650eb76 100644
--- a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.html
+++ b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.html
@@ -1,25 +1,33 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">New VPCS node template</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">New VPCS node template</h1>
     </div>
-    <div class="default-content">
-        <mat-card class="matCard">
-            <mat-radio-group class="radio-group">
-                <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run the VPCS node locally</mat-radio-button>
-                <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run the VPCS node on the GNS3 VM</mat-radio-button>
-            </mat-radio-group>
+  </div>
+  <div class="default-content">
+    <mat-card class="matCard">
+      <mat-radio-group class="radio-group">
+        <mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
+          >Run the VPCS node locally</mat-radio-button
+        >
+        <mat-radio-button
+          [disabled]="!isGns3VmAvailable"
+          class="radio-button"
+          value="2"
+          (click)="setServerType('gns3 vm')"
+          >Run the VPCS node on the GNS3 VM</mat-radio-button
+        >
+      </mat-radio-group>
 
-            <form [formGroup]="templateNameForm">
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="templateName" type="text" placeholder="Template name">
-                </mat-form-field>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
-            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
-        </div>
+      <form [formGroup]="templateNameForm">
+        <mat-form-field class="form-field">
+          <input matInput formControlName="templateName" type="text" placeholder="Template name" />
+        </mat-form-field>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+      <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec.ts b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec.ts
index 86e3bcfc..2e34f8ec 100644
--- a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec.ts
+++ b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.spec.ts
@@ -23,85 +23,85 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ComputeService } from '../../../../services/compute.service';
 
 export class MockedComputeService {
-    getComputes(server: Server) {
-        return of([]);
-    }
+  getComputes(server: Server) {
+    return of([]);
+  }
 }
 
 export class MockedVpcsService {
-    public addTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
-        return of(vpcsTemplate);    
-    }
+  public addTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
+    return of(vpcsTemplate);
+  }
 }
 
 describe('AddVpcsTemplateComponent', () => {
-    let component: AddVpcsTemplateComponent;
-    let fixture: ComponentFixture<AddVpcsTemplateComponent>;
+  let component: AddVpcsTemplateComponent;
+  let fixture: ComponentFixture<AddVpcsTemplateComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVpcsService = new MockedVpcsService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    let mockedComputeService = new MockedComputeService();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule, 
-                ReactiveFormsModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([{path: 'server/1/preferences/vpcs/templates', component: AddVpcsTemplateComponent}])
-                ],
-            providers: [
-                { provide: ActivatedRoute,  useValue: activatedRoute },
-                { provide: ServerService, useValue: mockedServerService },
-                { provide: VpcsService, useValue: mockedVpcsService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: ComputeService, useValue: mockedComputeService },
-                { provide: TemplateMocksService, useClass: TemplateMocksService }
-            ],
-            declarations: [
-                AddVpcsTemplateComponent
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVpcsService = new MockedVpcsService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
+  let mockedComputeService = new MockedComputeService();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddVpcsTemplateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          { path: 'server/1/preferences/vpcs/templates', component: AddVpcsTemplateComponent },
+        ]),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VpcsService, useValue: mockedVpcsService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: ComputeService, useValue: mockedComputeService },
+        { provide: TemplateMocksService, useClass: TemplateMocksService },
+      ],
+      declarations: [AddVpcsTemplateComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddVpcsTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call add template', () => {
-        spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.templateName = "sample name";
-        component.templateNameForm.controls['templateName'].setValue('template name');
-        component.server = {id: 1} as Server;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.addTemplate();
+  it('should call add template', () => {
+    spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.templateName = 'sample name';
+    component.templateNameForm.controls['templateName'].setValue('template name');
+    component.server = { id: 1 } as Server;
 
-        expect(mockedVpcsService.addTemplate).toHaveBeenCalled();
-    });
+    component.addTemplate();
 
-    it('should not call add template when template name is empty', () => {
-        spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
-        spyOn(mockedToasterService, 'error');
-        component.templateName = "";
-        component.server = {id: 1} as Server;
+    expect(mockedVpcsService.addTemplate).toHaveBeenCalled();
+  });
 
-        component.addTemplate();
+  it('should not call add template when template name is empty', () => {
+    spyOn(mockedVpcsService, 'addTemplate').and.returnValue(of({} as VpcsTemplate));
+    spyOn(mockedToasterService, 'error');
+    component.templateName = '';
+    component.server = { id: 1 } as Server;
 
-        expect(mockedVpcsService.addTemplate).not.toHaveBeenCalled();
-        expect(mockedToasterService.error).toHaveBeenCalled();
-    });
+    component.addTemplate();
+
+    expect(mockedVpcsService.addTemplate).not.toHaveBeenCalled();
+    expect(mockedToasterService.error).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts
index 3253ad95..7907fecc 100644
--- a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts
+++ b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -11,80 +11,79 @@ import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
 import { ComputeService } from '../../../../services/compute.service';
 import { Compute } from '../../../../models/compute';
 
-
 @Component({
-    selector: 'app-add-vpcs-template',
-    templateUrl: './add-vpcs-template.component.html',
-    styleUrls: ['./add-vpcs-template.component.scss', '../../preferences.component.scss']
+  selector: 'app-add-vpcs-template',
+  templateUrl: './add-vpcs-template.component.html',
+  styleUrls: ['./add-vpcs-template.component.scss', '../../preferences.component.scss'],
 })
 export class AddVpcsTemplateComponent implements OnInit {
-    server: Server;
-    templateName: string = '';
-    templateNameForm: FormGroup
+  server: Server;
+  templateName: string = '';
+  templateNameForm: FormGroup;
 
-    isGns3VmAvailable: boolean = false;
-    isGns3VmChosen: boolean = false;
-    isLocalComputerChosen: boolean = true;
-    
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vpcsService: VpcsService,
-        private router: Router,
-        private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService,
-        private formBuilder: FormBuilder,
-        private computeService: ComputeService
-    ) {
-        this.templateNameForm = this.formBuilder.group({
-            templateName: new FormControl(null, [Validators.required])
-        });
+  isGns3VmAvailable: boolean = false;
+  isGns3VmChosen: boolean = false;
+  isLocalComputerChosen: boolean = true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private vpcsService: VpcsService,
+    private router: Router,
+    private toasterService: ToasterService,
+    private templateMocksService: TemplateMocksService,
+    private formBuilder: FormBuilder,
+    private computeService: ComputeService
+  ) {
+    this.templateNameForm = this.formBuilder.group({
+      templateName: new FormControl(null, [Validators.required]),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
+        if (computes.filter((compute) => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
+      });
+    });
+  }
+
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'vpcs', 'templates']);
+  }
 
-            this.computeService.getComputes(server).subscribe((computes: Compute[]) => {
-                if (computes.filter(compute => compute.compute_id === 'vm').length > 0) this.isGns3VmAvailable = true;
-            });
-        });
-    }
-
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'vpcs', 'templates']);
-    }
-
-    addTemplate() {
-        if (!this.templateNameForm.invalid) {
-            this.templateName = this.templateNameForm.get('templateName').value;
-            
-            let vpcsTemplate: VpcsTemplate;
-
-            this.templateMocksService.getVpcsTemplate().subscribe((template: VpcsTemplate) => {
-                vpcsTemplate = template;
-            });
-
-            vpcsTemplate.template_id = uuid(),
-            vpcsTemplate.name = this.templateName,
-            vpcsTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-
-            this.vpcsService.addTemplate(this.server, vpcsTemplate).subscribe(() => {
-                this.goBack();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields`);
-        }
+  addTemplate() {
+    if (!this.templateNameForm.invalid) {
+      this.templateName = this.templateNameForm.get('templateName').value;
+
+      let vpcsTemplate: VpcsTemplate;
+
+      this.templateMocksService.getVpcsTemplate().subscribe((template: VpcsTemplate) => {
+        vpcsTemplate = template;
+      });
+
+      (vpcsTemplate.template_id = uuid()),
+        (vpcsTemplate.name = this.templateName),
+        (vpcsTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local');
+
+      this.vpcsService.addTemplate(this.server, vpcsTemplate).subscribe(() => {
+        this.goBack();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields`);
     }
+  }
 }
diff --git a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.html b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.html
index 33c19621..58b89cb9 100644
--- a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.html
+++ b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.html
@@ -1,12 +1,12 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VPCS preferences</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="vpcsExecutable" placeholder="Path to VPCS executable"/>
-        </mat-form-field>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VPCS preferences</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <mat-form-field class="form-field">
+      <input matInput type="text" [(ngModel)]="vpcsExecutable" placeholder="Path to VPCS executable" />
+    </mat-form-field>
+  </div>
 </div>
diff --git a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.scss b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.scss
index 9c2173c2..8aff6f5a 100644
--- a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.scss
+++ b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.scss
@@ -1,3 +1,3 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.spec.ts b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.spec.ts
index a9658f98..50c406a0 100644
--- a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.spec.ts
+++ b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.spec.ts
@@ -1,4 +1,4 @@
-import { VpcsPreferencesComponent } from "./vpcs-preferences.component";
+import { VpcsPreferencesComponent } from './vpcs-preferences.component';
 import { ComponentFixture, async, TestBed } from '@angular/core/testing';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
@@ -15,41 +15,48 @@ import { ServerService } from '../../../../services/server.service';
 import { MockedActivatedRoute } from '../../preferences.component.spec';
 
 describe('VpcsPreferencesComponent', () => {
-    let component: VpcsPreferencesComponent;
-    let fixture: ComponentFixture<VpcsPreferencesComponent>;
+  let component: VpcsPreferencesComponent;
+  let fixture: ComponentFixture<VpcsPreferencesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService }
-          ],
-          declarations: [
-              VpcsPreferencesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VpcsPreferencesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+      ],
+      declarations: [VpcsPreferencesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VpcsPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should clear path to executable', () => {
-        component.restoreDefaults();
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        expect(component.vpcsExecutable).toBe('');
-    });
+  it('should clear path to executable', () => {
+    component.restoreDefaults();
+
+    expect(component.vpcsExecutable).toBe('');
+  });
 });
diff --git a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.ts b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.ts
index 641746b1..9d5fa383 100644
--- a/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component.ts
@@ -1,32 +1,28 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Server } from '../../../../models/server';
 import { ServerService } from '../../../../services/server.service';
 
-
 @Component({
-    selector: 'app-vpcs-preferences',
-    templateUrl: './vpcs-preferences.component.html',
-    styleUrls: ['./vpcs-preferences.component.scss']
+  selector: 'app-vpcs-preferences',
+  templateUrl: './vpcs-preferences.component.html',
+  styleUrls: ['./vpcs-preferences.component.scss'],
 })
 export class VpcsPreferencesComponent implements OnInit {
-    server: Server;
-    vpcsExecutable: string;
+  server: Server;
+  vpcsExecutable: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService
-    ) {}
+  constructor(private route: ActivatedRoute, private serverService: ServerService) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
 
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-        });
-    }
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+    });
+  }
 
-    restoreDefaults(){
-        this.vpcsExecutable = '';
-    }
+  restoreDefaults() {
+    this.vpcsExecutable = '';
+  }
 }
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
index fa2601a3..922e88c2 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
@@ -1,72 +1,79 @@
 <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VPCS device configuration</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VPCS device configuration</h1>
     </div>
-    <div class="default-content" *ngIf="vpcsTemplate">
-        <mat-card class="matCard">
-            <form [formGroup]="inputForm">
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="vpcsTemplate.name" 
-                        formControlName="templateName"
-                        placeholder="Template name">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="vpcsTemplate.default_name_format" 
-                        formControlName="defaultName"
-                        placeholder="Default name format">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="vpcsTemplate.base_script_file" 
-                        formControlName="scriptFile"
-                        placeholder="Base script file">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="text" 
-                        [(ngModel)]="vpcsTemplate.symbol" 
-                        formControlName="symbol"
-                        placeholder="Symbol">
-                </mat-form-field>
-                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="form-field">
-                    <mat-select 
-                        placeholder="Category" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="vpcsTemplate.category">
-                        <mat-option *ngFor="let category of categories" [value]="category[1]">
-                            {{category[0]}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="select">
-                    <mat-select 
-                        placeholder="Console type" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="vpcsTemplate.console_type">
-                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-checkbox 
-                    [ngModelOptions]="{standalone: true}" 
-                    [(ngModel)]="vpcsTemplate.console_auto_start">
-                    Auto start console
-                </mat-checkbox>
-            </form>
-        </mat-card>
-        <div class="buttons-bar">
-            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
-        </div>
+  </div>
+  <div class="default-content" *ngIf="vpcsTemplate">
+    <mat-card class="matCard">
+      <form [formGroup]="inputForm">
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="vpcsTemplate.name"
+            formControlName="templateName"
+            placeholder="Template name"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="vpcsTemplate.default_name_format"
+            formControlName="defaultName"
+            placeholder="Default name format"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input
+            matInput
+            type="text"
+            [(ngModel)]="vpcsTemplate.base_script_file"
+            formControlName="scriptFile"
+            placeholder="Base script file"
+          />
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <input matInput type="text" [(ngModel)]="vpcsTemplate.symbol" formControlName="symbol" placeholder="Symbol" />
+        </mat-form-field>
+        <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
+        <mat-form-field class="form-field">
+          <mat-select
+            placeholder="Category"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="vpcsTemplate.category"
+          >
+            <mat-option *ngFor="let category of categories" [value]="category[1]">
+              {{ category[0] }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="select">
+          <mat-select
+            placeholder="Console type"
+            [ngModelOptions]="{ standalone: true }"
+            [(ngModel)]="vpcsTemplate.console_type"
+          >
+            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+              {{ type }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vpcsTemplate.console_auto_start">
+          Auto start console
+        </mat-checkbox>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
     </div>
+  </div>
 </div>
-<app-symbols-menu *ngIf="isSymbolSelectionOpened && vpcsTemplate" [server]="server" [symbol]="vpcsTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
+<app-symbols-menu
+  *ngIf="isSymbolSelectionOpened && vpcsTemplate"
+  [server]="server"
+  [symbol]="vpcsTemplate.symbol"
+  (symbolChangedEmitter)="symbolChanged($event)"
+></app-symbols-menu>
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.spec.ts b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.spec.ts
index 18d9963c..c68b55a9 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.spec.ts
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.spec.ts
@@ -22,110 +22,119 @@ import { MockedActivatedRoute } from '../../preferences.component.spec';
 import { VpcsConfigurationService } from '../../../../services/vpcs-configuration.service';
 
 export class MockedVpcsService {
-    public getTemplate(server: Server, template_id: string) {
-        return of({} as VpcsTemplate);  
-    }
+  public getTemplate(server: Server, template_id: string) {
+    return of({} as VpcsTemplate);
+  }
 
-    public saveTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
-        return of(vpcsTemplate);    
-    }
+  public saveTemplate(server: Server, vpcsTemplate: VpcsTemplate) {
+    return of(vpcsTemplate);
+  }
 }
 
 describe('VpcsTemplateDetailsComponent', () => {
-    let component: VpcsTemplateDetailsComponent;
-    let fixture: ComponentFixture<VpcsTemplateDetailsComponent>;
+  let component: VpcsTemplateDetailsComponent;
+  let fixture: ComponentFixture<VpcsTemplateDetailsComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVpcsService = new MockedVpcsService;
-    let mockedToasterService = new MockedToasterService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VpcsService, useValue: mockedVpcsService },
-              { provide: ToasterService, useValue: mockedToasterService},
-              { provide: VpcsConfigurationService, useClass: VpcsConfigurationService }
-          ],
-          declarations: [
-              VpcsTemplateDetailsComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVpcsService = new MockedVpcsService();
+  let mockedToasterService = new MockedToasterService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VpcsTemplateDetailsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VpcsService, useValue: mockedVpcsService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: VpcsConfigurationService, useClass: VpcsConfigurationService },
+      ],
+      declarations: [VpcsTemplateDetailsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VpcsTemplateDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should call save template', () => {
-        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['scriptFile'].setValue('script file');
-        component.inputForm.controls['symbol'].setValue('symbol');
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onSave();
+  it('should call save template', () => {
+    spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['scriptFile'].setValue('script file');
+    component.inputForm.controls['symbol'].setValue('symbol');
 
-        expect(mockedVpcsService.saveTemplate).toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when template name is empty', () => {
-        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.inputForm.controls['templateName'].setValue('');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['scriptFile'].setValue('script file');
-        component.inputForm.controls['symbol'].setValue('symbol');
+    expect(mockedVpcsService.saveTemplate).toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when template name is empty', () => {
+    spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.inputForm.controls['templateName'].setValue('');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['scriptFile'].setValue('script file');
+    component.inputForm.controls['symbol'].setValue('symbol');
 
-        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when default name is empty', () => {
-        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('');
-        component.inputForm.controls['scriptFile'].setValue('script file');
-        component.inputForm.controls['symbol'].setValue('symbol');
+    expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when default name is empty', () => {
+    spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('');
+    component.inputForm.controls['scriptFile'].setValue('script file');
+    component.inputForm.controls['symbol'].setValue('symbol');
 
-        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when script file is empty', () => {
-        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['scriptFile'].setValue('');
-        component.inputForm.controls['symbol'].setValue('symbol');
+    expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when script file is empty', () => {
+    spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['scriptFile'].setValue('');
+    component.inputForm.controls['symbol'].setValue('symbol');
 
-        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
 
-    it('should not call save template when symbol path is empty', () => {
-        spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
-        component.inputForm.controls['templateName'].setValue('template name');
-        component.inputForm.controls['defaultName'].setValue('default name');
-        component.inputForm.controls['scriptFile'].setValue('script file');
-        component.inputForm.controls['symbol'].setValue('');
+    expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+  });
 
-        component.onSave();
+  it('should not call save template when symbol path is empty', () => {
+    spyOn(mockedVpcsService, 'saveTemplate').and.returnValue(of({} as VpcsTemplate));
+    component.inputForm.controls['templateName'].setValue('template name');
+    component.inputForm.controls['defaultName'].setValue('default name');
+    component.inputForm.controls['scriptFile'].setValue('script file');
+    component.inputForm.controls['symbol'].setValue('');
 
-        expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
-    });
+    component.onSave();
+
+    expect(mockedVpcsService.saveTemplate).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
index 6b23a04b..033584f2 100644
--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
@@ -8,75 +8,74 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { VpcsConfigurationService } from '../../../../services/vpcs-configuration.service';
 
-
 @Component({
-    selector: 'app-vpcs-template-details',
-    templateUrl: './vpcs-template-details.component.html',
-    styleUrls: ['./vpcs-template-details.component.scss', '../../preferences.component.scss']
+  selector: 'app-vpcs-template-details',
+  templateUrl: './vpcs-template-details.component.html',
+  styleUrls: ['./vpcs-template-details.component.scss', '../../preferences.component.scss'],
 })
 export class VpcsTemplateDetailsComponent implements OnInit {
-    server: Server;
-    vpcsTemplate: VpcsTemplate;
-    inputForm: FormGroup;
-    isSymbolSelectionOpened: boolean = false;
-    consoleTypes: string[] = [];
-    categories = [];
+  server: Server;
+  vpcsTemplate: VpcsTemplate;
+  inputForm: FormGroup;
+  isSymbolSelectionOpened: boolean = false;
+  consoleTypes: string[] = [];
+  categories = [];
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vpcsService: VpcsService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private vpcsConfigurationService: VpcsConfigurationService,
-        private router: Router
-    ) {
-        this.inputForm = this.formBuilder.group({
-            templateName: new FormControl('', Validators.required),
-            defaultName: new FormControl('', Validators.required),
-            scriptFile: new FormControl('', Validators.required),
-            symbol: new FormControl('', Validators.required)
-        });
+  constructor(
+    private route: ActivatedRoute,
+    private serverService: ServerService,
+    private vpcsService: VpcsService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private vpcsConfigurationService: VpcsConfigurationService,
+    private router: Router
+  ) {
+    this.inputForm = this.formBuilder.group({
+      templateName: new FormControl('', Validators.required),
+      defaultName: new FormControl('', Validators.required),
+      scriptFile: new FormControl('', Validators.required),
+      symbol: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    const template_id = this.route.snapshot.paramMap.get('template_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+
+      this.getConfiguration();
+      this.vpcsService.getTemplate(this.server, template_id).subscribe((vpcsTemplate: VpcsTemplate) => {
+        this.vpcsTemplate = vpcsTemplate;
+      });
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
+    this.categories = this.vpcsConfigurationService.getCategories();
+  }
+
+  goBack() {
+    this.router.navigate(['/server', this.server.id, 'preferences', 'vpcs', 'templates']);
+  }
+
+  onSave() {
+    if (this.inputForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemplate: VpcsTemplate) => {
+        this.toasterService.success('Changes saved');
+      });
     }
+  }
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        const template_id = this.route.snapshot.paramMap.get("template_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
+  chooseSymbol() {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+  }
 
-            this.getConfiguration();
-            this.vpcsService.getTemplate(this.server, template_id).subscribe((vpcsTemplate: VpcsTemplate) => {
-                this.vpcsTemplate = vpcsTemplate;
-            });
-        });
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
-        this.categories = this.vpcsConfigurationService.getCategories();
-    }
-
-    goBack() {
-        this.router.navigate(['/server', this.server.id, 'preferences', 'vpcs', 'templates']);
-    }
-
-    onSave() {
-        if (this.inputForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemplate: VpcsTemplate) => {
-                this.toasterService.success("Changes saved");
-            });
-        }
-    }
-
-    chooseSymbol() {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-    }
-
-    symbolChanged(chosenSymbol: string) {
-        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
-        this.vpcsTemplate.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    this.vpcsTemplate.symbol = chosenSymbol;
+  }
 }
diff --git a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
index 1d789d34..3f957137 100644
--- a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
+++ b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
@@ -1,32 +1,46 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">VPCS node templates</h1>
-            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
-            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vpcs/addtemplate" mat-raised-button color="primary">Add VPCS template</button>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">VPCS node templates</h1>
+      <button
+        *ngIf="server"
+        class="top-button"
+        class="cancel-button"
+        routerLink="/server/{{ server.id }}/preferences"
+        mat-button
+      >
+        Back
+      </button>
+      <button
+        *ngIf="server"
+        class="top-button"
+        routerLink="/server/{{ server.id }}/preferences/vpcs/addtemplate"
+        mat-raised-button
+        color="primary"
+      >
+        Add VPCS template
+      </button>
     </div>
-    <app-empty-templates-list *ngIf="!vpcsTemplates.length"></app-empty-templates-list>
-    <div class="default-content" *ngIf="vpcsTemplates.length">
-        <div class="listcontainer mat-elevation-z8">
-            <mat-nav-list *ngIf="server">
-                <div class="list-item" *ngFor='let template of vpcsTemplates'>
-                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
-                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
-                        <mat-icon>more_vert</mat-icon>
-                    </button>
-                    <mat-menu #menu="matMenu">
-                        <button mat-menu-item (click)="deleteTemplate(template)">
-                            <mat-icon>delete</mat-icon><span>Delete</span>
-                        </button>
-                    </mat-menu>
-                </div>
-            </mat-nav-list>
+  </div>
+  <app-empty-templates-list *ngIf="!vpcsTemplates.length"></app-empty-templates-list>
+  <div class="default-content" *ngIf="vpcsTemplates.length">
+    <div class="listcontainer mat-elevation-z8">
+      <mat-nav-list *ngIf="server">
+        <div class="list-item" *ngFor="let template of vpcsTemplates">
+          <mat-list-item class="template-name" routerLink="{{ template.template_id }}">{{
+            template.name
+          }}</mat-list-item>
+          <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="deleteTemplate(template)">
+              <mat-icon>delete</mat-icon><span>Delete</span>
+            </button>
+          </mat-menu>
         </div>
+      </mat-nav-list>
     </div>
+  </div>
 </div>
-<app-delete-template
-    #deleteComponent
-    [server]="server"
-    (deleteEvent)="onDeleteEvent()">
-</app-delete-template>
+<app-delete-template #deleteComponent [server]="server" (deleteEvent)="onDeleteEvent()"> </app-delete-template>
diff --git a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.spec.ts b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.spec.ts
index bcf15acf..40deea8d 100644
--- a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.spec.ts
+++ b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.spec.ts
@@ -18,43 +18,50 @@ import { VpcsTemplatesComponent } from './vpcs-templates.component';
 import { MockedActivatedRoute } from '../../preferences.component.spec';
 
 export class MockedVpcsService {
-    public getTemplates(server: Server) {
-        return of([{} as VpcsTemplate]);
-    }
+  public getTemplates(server: Server) {
+    return of([{} as VpcsTemplate]);
+  }
 }
 
 describe('VpcsTemplatesComponent', () => {
-    let component: VpcsTemplatesComponent;
-    let fixture: ComponentFixture<VpcsTemplatesComponent>;
+  let component: VpcsTemplatesComponent;
+  let fixture: ComponentFixture<VpcsTemplatesComponent>;
 
-    let mockedServerService = new MockedServerService;
-    let mockedVpcsService = new MockedVpcsService;
-    let activatedRoute = new MockedActivatedRoute().get();
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
-          providers: [
-              {
-                  provide: ActivatedRoute,  useValue: activatedRoute
-              },
-              { provide: ServerService, useValue: mockedServerService },
-              { provide: VpcsService, useValue: mockedVpcsService }
-          ],
-          declarations: [
-              VpcsTemplatesComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedServerService = new MockedServerService();
+  let mockedVpcsService = new MockedVpcsService();
+  let activatedRoute = new MockedActivatedRoute().get();
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(VpcsTemplatesComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: activatedRoute,
+        },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: VpcsService, useValue: mockedVpcsService },
+      ],
+      declarations: [VpcsTemplatesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VpcsTemplatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts
index a2e570d8..06eaf652 100644
--- a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
@@ -7,40 +7,36 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
 
 @Component({
-    selector: 'app-vpcs-templates',
-    templateUrl: './vpcs-templates.component.html',
-    styleUrls: ['./vpcs-templates.component.scss', '../../preferences.component.scss']
+  selector: 'app-vpcs-templates',
+  templateUrl: './vpcs-templates.component.html',
+  styleUrls: ['./vpcs-templates.component.scss', '../../preferences.component.scss'],
 })
 export class VpcsTemplatesComponent implements OnInit {
-    server: Server;
-    vpcsTemplates: VpcsTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
+  server: Server;
+  vpcsTemplates: VpcsTemplate[] = [];
+  @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
-    constructor(
-        private route: ActivatedRoute,
-        private serverService: ServerService,
-        private vpcsService: VpcsService
-    ) {}
+  constructor(private route: ActivatedRoute, private serverService: ServerService, private vpcsService: VpcsService) {}
 
-    ngOnInit() {
-        const server_id = this.route.snapshot.paramMap.get("server_id");
-        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
-            this.server = server;
-            this.getTemplates();
-        });
-    }
+  ngOnInit() {
+    const server_id = this.route.snapshot.paramMap.get('server_id');
+    this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+      this.server = server;
+      this.getTemplates();
+    });
+  }
 
-    getTemplates() {
-        this.vpcsService.getTemplates(this.server).subscribe((vpcsTemplates: VpcsTemplate[]) => {
-            this.vpcsTemplates = vpcsTemplates.filter((elem) => elem.template_type === 'vpcs' && !elem.builtin);
-        });
-    }
+  getTemplates() {
+    this.vpcsService.getTemplates(this.server).subscribe((vpcsTemplates: VpcsTemplate[]) => {
+      this.vpcsTemplates = vpcsTemplates.filter((elem) => elem.template_type === 'vpcs' && !elem.builtin);
+    });
+  }
 
-    deleteTemplate(template: VpcsTemplate) {
-        this.deleteComponent.deleteItem(template.name, template.template_id);
-    }
+  deleteTemplate(template: VpcsTemplate) {
+    this.deleteComponent.deleteItem(template.name, template.template_id);
+  }
 
-    onDeleteEvent() {
-        this.getTemplates();
-    }
+  onDeleteEvent() {
+    this.getTemplates();
+  }
 }
diff --git a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.html b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.html
index d668cfe2..8a903956 100644
--- a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.html
+++ b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.html
@@ -1,21 +1,17 @@
-<h1 mat-dialog-title>Change hostname for node {{name}}</h1>
+<h1 mat-dialog-title>Change hostname for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.scss b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.scss
index 9c2173c2..8aff6f5a 100644
--- a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.scss
+++ b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.scss
@@ -1,3 +1,3 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
index 65b42935..b5793e16 100644
--- a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
+++ b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../cartography/models/node';
 import { Server } from '../../../models/server';
@@ -6,48 +6,47 @@ import { NodeService } from '../../../services/node.service';
 import { ToasterService } from '../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-change-hostname-dialog-component',
-    templateUrl: './change-hostname-dialog.component.html',
-    styleUrls: ['./change-hostname-dialog.component.scss']
+  selector: 'app-change-hostname-dialog-component',
+  templateUrl: './change-hostname-dialog.component.html',
+  styleUrls: ['./change-hostname-dialog.component.scss'],
 })
 export class ChangeHostnameDialogComponent implements OnInit {
-    server: Server;
-    node: Node;
-    inputForm: FormGroup;
-    name: string;
+  server: Server;
+  node: Node;
+  inputForm: FormGroup;
+  name: string;
 
-    constructor(
-        public dialogRef: MatDialogRef<ChangeHostnameDialogComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
-    ) {
-        this.inputForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<ChangeHostnameDialogComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder
+  ) {
+    this.inputForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = this.node.name;
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = this.node.name;
+    });
+  }
 
-    onSaveClick() {
-        if (this.inputForm.valid) {
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.inputForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html
index 8f1b40bf..e9cd084c 100644
--- a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html
+++ b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html
@@ -1,12 +1,12 @@
-<h1 mat-dialog-title>Change symbol for node: {{node.name}}</h1>
+<h1 mat-dialog-title>Change symbol for node: {{ node.name }}</h1>
 
 <div class="modal-form-container">
-    <div class="symbolsWrapper">
-        <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
+  <div class="symbolsWrapper">
+    <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+  </div>
 </div>
 
 <div mat-dialog-actions>
-    <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onSelectClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+  <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSelectClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
 </div>
diff --git a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss
index 6deef2c4..17731aff 100644
--- a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss
+++ b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss
@@ -1,18 +1,18 @@
 .symbolsWrapper {
-    height: 350px;
-    overflow-y: scroll;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  height: 350px;
+  overflow-y: scroll;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
- 
+
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
- 
+
 ::-webkit-scrollbar-thumb {
   background-color: darkgrey;
   outline: 1px solid #263238;
diff --git a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts
index e3ebfc93..1f257240 100644
--- a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts
+++ b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts
@@ -7,35 +7,32 @@ import { Symbol } from '../../../models/symbol';
 import { NodeService } from '../../../services/node.service';
 
 @Component({
-    selector: 'app-change-symbol-dialog',
-    templateUrl: './change-symbol-dialog.component.html',
-    styleUrls: ['./change-symbol-dialog.component.scss']
+  selector: 'app-change-symbol-dialog',
+  templateUrl: './change-symbol-dialog.component.html',
+  styleUrls: ['./change-symbol-dialog.component.scss'],
 })
 export class ChangeSymbolDialogComponent implements OnInit {
-    @Input() server: Server;
-    @Input() node: Node;
-    symbol: string;
+  @Input() server: Server;
+  @Input() node: Node;
+  symbol: string;
 
-    constructor(
-        public dialogRef: MatDialogRef<ChangeSymbolDialogComponent>,
-        private nodeService: NodeService
-    ) {}
+  constructor(public dialogRef: MatDialogRef<ChangeSymbolDialogComponent>, private nodeService: NodeService) {}
 
-    ngOnInit() {
-        this.symbol = this.node.symbol;
-    }
+  ngOnInit() {
+    this.symbol = this.node.symbol;
+  }
 
-    symbolChanged(chosenSymbol: string) {
-        this.symbol = chosenSymbol;
-    }
+  symbolChanged(chosenSymbol: string) {
+    this.symbol = chosenSymbol;
+  }
 
-    onCloseClick() {
-        this.dialogRef.close();
-    }
+  onCloseClick() {
+    this.dialogRef.close();
+  }
 
-    onSelectClick() {
-        this.nodeService.updateSymbol(this.server, this.node, this.symbol).subscribe(() => {
-            this.onCloseClick()
-        });
-    }
+  onSelectClick() {
+    this.nodeService.updateSymbol(this.server, this.node, this.symbol).subscribe(() => {
+      this.onCloseClick();
+    });
+  }
 }
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.html b/src/app/components/project-map/console-wrapper/console-wrapper.component.html
index fc68a9c9..35dd3bac 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.html
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.html
@@ -1,59 +1,95 @@
 <div
-    *ngIf="isDraggingEnabled"
-    (document:mousemove)="dragWidget($event)"
-    (document:mouseup)="toggleDragging(false)">   
-</div>
+  *ngIf="isDraggingEnabled"
+  (document:mousemove)="dragWidget($event)"
+  (document:mouseup)="toggleDragging(false)"
+></div>
 <!-- Option with resizing -->
-<div 
-    class="consoleWrapper"
-    [ngClass]="{lightTheme: isLightThemeEnabled}"
-    (mousedown)="toggleDragging(true)"
-    [ngStyle]="style" 
-    mwlResizable
-    [validateResize]="validate"
-    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
-    [enableGhostResize]="true"
-    (resizeStart)="toggleDragging(false)"
-    (resizeEnd)="onResizeEnd($event)">
-<!-- <div 
+<div
+  class="consoleWrapper"
+  [ngClass]="{ lightTheme: isLightThemeEnabled }"
+  (mousedown)="toggleDragging(true)"
+  [ngStyle]="style"
+  mwlResizable
+  [validateResize]="validate"
+  [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
+  [enableGhostResize]="true"
+  (resizeStart)="toggleDragging(false)"
+  (resizeEnd)="onResizeEnd($event)"
+>
+  <!-- <div 
     class="consoleWrapper"
     [ngClass]="{lightTheme: isLightThemeEnabled}"
     (mousedown)="toggleDragging(true)"
     [ngStyle]="style"> -->
 
-    <div class="consoleHeader" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}">
-        <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
-            <mat-tab>
-                <ng-template mat-tab-label>
-                    <div class="col" style="margin-left: 20px;">GNS3 console</div>
-                </ng-template>
-            </mat-tab>
-    
-            <mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">
-                <ng-template mat-tab-label>
-                    <div class="col" style="margin-left: 20px;">{{node.name}}</div>
-                    <button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="removeTab(index)">
-                        <mat-icon>close</mat-icon>
-                    </button>
-                </ng-template>
-            </mat-tab>
-    
-        </mat-tab-group>
+  <div class="consoleHeader" [ngClass]="{ lightThemeConsoleHeader: isLightThemeEnabled }">
+    <mat-tab-group class="tabs" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <div class="col" style="margin-left: 20px">GNS3 console</div>
+        </ng-template>
+      </mat-tab>
 
-        <button *ngIf="!isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(true)">
-            <mat-icon>remove</mat-icon>
-        </button>
-        <button *ngIf="isMinimized" [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="minimize(false)">
-            <mat-icon>web_asset</mat-icon>
-        </button>
-        <button [ngClass]="{lightThemeConsoleHeader: isLightThemeEnabled}" style="color:white" mat-icon-button (click)="close()">
+      <mat-tab *ngFor="let node of nodes; let index = index" [label]="tab">
+        <ng-template mat-tab-label>
+          <div class="col" style="margin-left: 20px">{{ node.name }}</div>
+          <button
+            [ngClass]="{ lightThemeConsoleHeader: isLightThemeEnabled }"
+            style="color: white"
+            mat-icon-button
+            (click)="removeTab(index)"
+          >
             <mat-icon>close</mat-icon>
-        </button>
-    </div>
+          </button>
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
 
-    <app-log-console [hidden]="!(selected.value===0) || isMinimized" [server]="server" [project]="project"></app-log-console>
+    <button
+      *ngIf="!isMinimized"
+      [ngClass]="{ lightThemeConsoleHeader: isLightThemeEnabled }"
+      style="color: white"
+      mat-icon-button
+      (click)="minimize(true)"
+    >
+      <mat-icon>remove</mat-icon>
+    </button>
+    <button
+      *ngIf="isMinimized"
+      [ngClass]="{ lightThemeConsoleHeader: isLightThemeEnabled }"
+      style="color: white"
+      mat-icon-button
+      (click)="minimize(false)"
+    >
+      <mat-icon>web_asset</mat-icon>
+    </button>
+    <button
+      [ngClass]="{ lightThemeConsoleHeader: isLightThemeEnabled }"
+      style="color: white"
+      mat-icon-button
+      (click)="close()"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
 
-    <div (mouseover)="disableScroll($event)" (mouseout)="enableScroll($event)" class="xterm-console" [hidden]="isMinimized" *ngFor="let node of nodes; let index = index">
-        <app-web-console [hidden]="!(selected.value===(index+1))" [server]="server" [node]="nodes[index]"></app-web-console>
-    </div>
+  <app-log-console
+    [hidden]="!(selected.value === 0) || isMinimized"
+    [server]="server"
+    [project]="project"
+  ></app-log-console>
+
+  <div
+    (mouseover)="disableScroll($event)"
+    (mouseout)="enableScroll($event)"
+    class="xterm-console"
+    [hidden]="isMinimized"
+    *ngFor="let node of nodes; let index = index"
+  >
+    <app-web-console
+      [hidden]="!(selected.value === index + 1)"
+      [server]="server"
+      [node]="nodes[index]"
+    ></app-web-console>
+  </div>
 </div>
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss b/src/app/components/project-map/console-wrapper/console-wrapper.component.scss
index 3f64f51f..3ba88248 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.scss
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.scss
@@ -1,131 +1,131 @@
 @media screen and (max-width: 700px) {
-    .consoleWrapper {
-        visibility: hidden;
-    }
+  .consoleWrapper {
+    visibility: hidden;
+  }
 }
 
 .consoleWrapper {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    height: 180px;
-    width: 600px;
-    background: #000000!important;
-    color: white;
-    overflow: hidden;
-    font-size: 12px;
-    border-radius: 8px
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  height: 180px;
+  width: 600px;
+  background: #000000 !important;
+  color: white;
+  overflow: hidden;
+  font-size: 12px;
+  border-radius: 8px;
 }
 
 .lightTheme {
-    background: white!important;
-    color: black;
+  background: white !important;
+  color: black;
 }
 
 .filterButton {
-    background: transparent;
-    color: white;
-    border: none;
-    margin-top: 0px;
-    outline: none;
-    color: #dbd5d5;
-    font-weight: bold;
-    padding: 0px;
+  background: transparent;
+  color: white;
+  border: none;
+  margin-top: 0px;
+  outline: none;
+  color: #dbd5d5;
+  font-weight: bold;
+  padding: 0px;
 }
 
 .consoleFiltering {
-    display: flex;
+  display: flex;
 }
 
 .consoleHeader {
-    width: 100%;
-    font-size: 12px;
-    overflow: hidden;
-    display: flex;
-    padding: 2px;
-    justify-content: space-between;
-    background: #263238!important;
+  width: 100%;
+  font-size: 12px;
+  overflow: hidden;
+  display: flex;
+  padding: 2px;
+  justify-content: space-between;
+  background: #263238 !important;
 }
 
 .lightThemeConsoleHeader {
-    background: white!important;
-    color: black!important;
+  background: white !important;
+  color: black !important;
 }
 
 :host ::ng-deep .mat-tab-label {
-    height: 3rem !important;
-    min-width: 8rem !important;
+  height: 3rem !important;
+  min-width: 8rem !important;
 }
 
 :host ::ng-deep .mat-tab-label.mat-tab-label-active {
-    border-bottom: 2px solid #0097a7;
-    box-sizing: border-box;
-    font-weight: 1200;
+  border-bottom: 2px solid #0097a7;
+  box-sizing: border-box;
+  font-weight: 1200;
 }
 
 :host ::ng-deep .mat-ink-bar {
-    display: none !important;
+  display: none !important;
 }
 
 .tabs {
-    width: 80%;
+  width: 80%;
 }
 
 .console {
-    width: 596px;
-    height: 120px;
-    overflow-y: scroll;
-    padding: 2px;
-    color: #dbd5d5;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  width: 596px;
+  height: 120px;
+  overflow-y: scroll;
+  padding: 2px;
+  color: #dbd5d5;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 .xterm-console {
-    background: black;
+  background: black;
 }
 
 .consoleInput {
-    width: 100%;
-    height: 30px;
-    padding: 2px;
-    display: flex;
+  width: 100%;
+  height: 30px;
+  padding: 2px;
+  display: flex;
 }
 
 .commandLine {
-    background-color: transparent;
-    color: white;
-    border: none;
+  background-color: transparent;
+  color: white;
+  border: none;
 }
 
 .inputIcon {
-    margin-top: 2px;
+  margin-top: 2px;
 }
 
 mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
 }
 
-input:focus{
-    outline: none;
+input:focus {
+  outline: none;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
- 
+
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
- 
+
 ::-webkit-scrollbar-thumb {
   background-color: darkgrey;
   outline: 1px solid #263238;
 }
 
 .closeButton {
-    cursor: pointer;
+  cursor: pointer;
 }
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.spec.ts b/src/app/components/project-map/console-wrapper/console-wrapper.component.spec.ts
index 3092f0e6..e3f3c99c 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.spec.ts
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.spec.ts
@@ -1,22 +1,22 @@
-import { ConsoleWrapperComponent } from "./console-wrapper.component";
+import { ConsoleWrapperComponent } from './console-wrapper.component';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
 import { ThemeService } from '../../../services/theme.service';
 import { MapSettingsService } from '../../../services/mapsettings.service';
 
 describe('ConsoleWrapperComponent', () => {
-    it('should get actual theme', () => {
-        const consoleService = new NodeConsoleService();
+  it('should get actual theme', () => {
+    const consoleService = new NodeConsoleService();
 
-        const themeService = autoSpy(ThemeService);
-        themeService.getActualTheme.and.returnValue('light');
-        
-        const mapSettingsService = autoSpy(MapSettingsService);
-        const component = new ConsoleWrapperComponent(consoleService, themeService, mapSettingsService);
+    const themeService = autoSpy(ThemeService);
+    themeService.getActualTheme.and.returnValue('light');
 
-        component.ngOnInit();
+    const mapSettingsService = autoSpy(MapSettingsService);
+    const component = new ConsoleWrapperComponent(consoleService, themeService, mapSettingsService);
 
-        expect(component.isLightThemeEnabled).toBe(true);
-    });
+    component.ngOnInit();
+
+    expect(component.isLightThemeEnabled).toBe(true);
+  });
 });
 
 export type SpyOf<T> = T & { [k in keyof T]: jasmine.Spy };
@@ -24,10 +24,10 @@ export type SpyOf<T> = T & { [k in keyof T]: jasmine.Spy };
 export function autoSpy<T>(obj: new (...args: any[]) => T): SpyOf<T> {
   const res: SpyOf<T> = {} as any;
 
-      const keys = Object.getOwnPropertyNames(obj.prototype);
-      keys.forEach((key) => {
-        res[key] = jasmine.createSpy(key);
-      });
+  const keys = Object.getOwnPropertyNames(obj.prototype);
+  keys.forEach((key) => {
+    res[key] = jasmine.createSpy(key);
+  });
 
-      return res;
+  return res;
 }
diff --git a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
index e04da1bd..5d5a8ed8 100644
--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
@@ -9,153 +9,153 @@ import { NodeConsoleService } from '../../../services/nodeConsole.service';
 import { Node } from '../../../cartography/models/node';
 import { MapSettingsService } from '../../../services/mapsettings.service';
 
-
 @Component({
-    selector: 'app-console-wrapper',
-    templateUrl: './console-wrapper.component.html',
-    styleUrls: ['./console-wrapper.component.scss']
+  selector: 'app-console-wrapper',
+  templateUrl: './console-wrapper.component.html',
+  styleUrls: ['./console-wrapper.component.scss'],
 })
 export class ConsoleWrapperComponent implements OnInit {
-    @Input() server: Server;
-    @Input() project: Project;
-    @Output() closeConsole =  new EventEmitter<boolean>();
+  @Input() server: Server;
+  @Input() project: Project;
+  @Output() closeConsole = new EventEmitter<boolean>();
 
-    filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
-    selectedFilter: string = 'all';
+  filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
+  selectedFilter: string = 'all';
 
-    public style: object = {};
-    public styleInside: object = { height: `120px` };
-    public isDraggingEnabled: boolean = false;
-    public isLightThemeEnabled: boolean = false;
-    public isMinimized: boolean = false;
+  public style: object = {};
+  public styleInside: object = { height: `120px` };
+  public isDraggingEnabled: boolean = false;
+  public isLightThemeEnabled: boolean = false;
+  public isMinimized: boolean = false;
 
-    public resizedWidth: number = 720;
-    public resizedHeight: number = 480;
+  public resizedWidth: number = 720;
+  public resizedHeight: number = 480;
 
-    constructor(
-        private consoleService: NodeConsoleService,
-        private themeService: ThemeService,
-        private mapSettingsService: MapSettingsService
-    ) {}
+  constructor(
+    private consoleService: NodeConsoleService,
+    private themeService: ThemeService,
+    private mapSettingsService: MapSettingsService
+  ) {}
 
-    nodes: Node[] = [];
-    selected = new FormControl(0);
-    
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
-        this.style = { bottom: '20px', left: '20px', width: '720px', height: '460px'};
+  nodes: Node[] = [];
+  selected = new FormControl(0);
 
-        this.consoleService.nodeConsoleTrigger.subscribe((node) => {
-            this.addTab(node, true);
-        });
+  ngOnInit() {
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
+    this.style = { bottom: '20px', left: '20px', width: '720px', height: '460px' };
 
-        this.consoleService.closeNodeConsoleTrigger.subscribe((node) => {
-            let index = this.nodes.findIndex(n => n.node_id === node.node_id)
-            this.removeTab(index);
-        });
+    this.consoleService.nodeConsoleTrigger.subscribe((node) => {
+      this.addTab(node, true);
+    });
+
+    this.consoleService.closeNodeConsoleTrigger.subscribe((node) => {
+      let index = this.nodes.findIndex((n) => n.node_id === node.node_id);
+      this.removeTab(index);
+    });
+  }
+
+  minimize(value: boolean) {
+    this.isMinimized = value;
+    if (!value) {
+      this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: `${this.resizedHeight}px` };
+    } else {
+      this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: '56px' };
+    }
+  }
+
+  addTab(node: Node, selectAfterAdding: boolean) {
+    this.minimize(false);
+    this.nodes.push(node);
+
+    if (selectAfterAdding) {
+      this.selected.setValue(this.nodes.length);
     }
 
-    minimize(value: boolean) {
-        this.isMinimized = value;
-        if (!value) {
-            this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: `${this.resizedHeight}px`}
-        } else {
-            this.style = { bottom: '20px', left: '20px', width: `${this.resizedWidth}px`, height: '56px'};
-        }
+    this.consoleService.openConsoles++;
+  }
+
+  removeTab(index: number) {
+    this.nodes.splice(index, 1);
+    this.consoleService.openConsoles--;
+  }
+
+  toggleDragging(value: boolean) {
+    this.isDraggingEnabled = value;
+  }
+
+  dragWidget(event) {
+    let x: number = Number(event.movementX);
+    let y: number = Number(event.movementY);
+
+    let width: number = Number(this.style['width'].split('px')[0]);
+    let height: number = Number(this.style['height'].split('px')[0]);
+    let left: number = Number(this.style['left'].split('px')[0]) + x;
+    if (this.style['top']) {
+      let top: number = Number(this.style['top'].split('px')[0]) + y;
+      this.style = {
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+    } else {
+      let bottom: number = Number(this.style['bottom'].split('px')[0]) - y;
+      this.style = {
+        position: 'fixed',
+        left: `${left}px`,
+        bottom: `${bottom}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      };
     }
+  }
 
-    addTab(node: Node, selectAfterAdding: boolean) {
-        this.minimize(false);
-        this.nodes.push(node);
-
-        if (selectAfterAdding) {
-            this.selected.setValue(this.nodes.length);
-        }
-
-        this.consoleService.openConsoles++;
+  validate(event: ResizeEvent): boolean {
+    if (
+      event.rectangle.width &&
+      event.rectangle.height &&
+      (event.rectangle.width < 500 || event.rectangle.height < 100)
+    ) {
+      return false;
     }
+    return true;
+  }
 
-    removeTab(index: number) {
-        this.nodes.splice(index, 1);
-        this.consoleService.openConsoles--;
-    }
+  onResizeEnd(event: ResizeEvent): void {
+    this.style = {
+      position: 'fixed',
+      left: `${event.rectangle.left}px`,
+      top: `${event.rectangle.top}px`,
+      width: `${event.rectangle.width}px`,
+      height: `${event.rectangle.height}px`,
+    };
 
-    toggleDragging(value: boolean) {
-        this.isDraggingEnabled = value;
-    }
+    this.styleInside = {
+      height: `${event.rectangle.height - 60}px`,
+      width: `${event.rectangle.width}px`,
+    };
 
-    dragWidget(event) {
-        let x: number = Number(event.movementX);
-        let y: number = Number(event.movementY);
+    this.consoleService.consoleResized.next({
+      width: event.rectangle.width,
+      height: event.rectangle.height - 53,
+    });
 
-        let width: number = Number(this.style['width'].split('px')[0]);
-        let height: number = Number(this.style['height'].split('px')[0]);
-        let left: number = Number(this.style['left'].split('px')[0]) + x;
-        if (this.style['top']) {
-            let top: number = Number(this.style['top'].split('px')[0]) + y;
-            this.style = {
-                position: 'fixed',
-                left: `${left}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        } else {
-            let bottom: number = Number(this.style['bottom'].split('px')[0]) - y;
-            this.style = {
-                position: 'fixed',
-                left: `${left}px`,
-                bottom: `${bottom}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        }
-    }
+    this.resizedWidth = event.rectangle.width;
+    this.resizedHeight = event.rectangle.height;
+  }
 
-    validate(event: ResizeEvent): boolean {
-        if (
-            event.rectangle.width &&
-            event.rectangle.height &&
-            (event.rectangle.width < 500 ||
-            event.rectangle.height < 100)
-        ) {
-            return false;
-        }
-        return true;
-    }
+  close() {
+    this.closeConsole.emit(false);
+  }
 
-    onResizeEnd(event: ResizeEvent): void {
-        this.style = {
-            position: 'fixed',
-            left: `${event.rectangle.left}px`,
-            top: `${event.rectangle.top}px`,
-            width: `${event.rectangle.width}px`,
-            height: `${event.rectangle.height}px`
-        };
+  enableScroll(e) {
+    this.mapSettingsService.isScrollDisabled.next(false);
+  }
 
-        this.styleInside = {
-            height: `${event.rectangle.height - 60}px`,
-            width: `${event.rectangle.width}px`
-        };
-
-        this.consoleService.consoleResized.next({
-            width: event.rectangle.width,
-            height: event.rectangle.height - 53
-        });
-
-        this.resizedWidth = event.rectangle.width;
-        this.resizedHeight = event.rectangle.height;
-    }
-
-    close() {
-        this.closeConsole.emit(false);
-    }
-
-    enableScroll(e) {
-        this.mapSettingsService.isScrollDisabled.next(false);
-    }
-
-    disableScroll(e) {
-        this.mapSettingsService.isScrollDisabled.next(true);
-    }
+  disableScroll(e) {
+    this.mapSettingsService.isScrollDisabled.next(true);
+  }
 }
diff --git a/src/app/components/project-map/context-console-menu/context-console-menu.component.html b/src/app/components/project-map/context-console-menu/context-console-menu.component.html
index 51d98b61..ed97c083 100644
--- a/src/app/components/project-map/context-console-menu/context-console-menu.component.html
+++ b/src/app/components/project-map/context-console-menu/context-console-menu.component.html
@@ -1,22 +1,20 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
-    <span [matMenuTriggerFor]="contextConsoleMenu"></span>
-    <mat-menu #contextConsoleMenu="matMenu" class="context-menu-items">
-        <span class="title">
-            Choose default behavior for double click on node
-        </span>
-        <button mat-menu-item (click)="openConsole()">
-            <mat-icon>web_asset</mat-icon>
-            <span>Open console</span>
-        </button>
-        <button mat-menu-item (click)="openWebConsole()">
-            <mat-icon>http</mat-icon>
-            <span>Open web console</span>
-        </button>
-        <button mat-menu-item (click)="openWebConsoleInNewTab()">
-            <mat-icon>http</mat-icon>
-            <span>Open web console in new tab</span>
-        </button>
-    </mat-menu>
+  <span [matMenuTriggerFor]="contextConsoleMenu"></span>
+  <mat-menu #contextConsoleMenu="matMenu" class="context-menu-items">
+    <span class="title"> Choose default behavior for double click on node </span>
+    <button mat-menu-item (click)="openConsole()">
+      <mat-icon>web_asset</mat-icon>
+      <span>Open console</span>
+    </button>
+    <button mat-menu-item (click)="openWebConsole()">
+      <mat-icon>http</mat-icon>
+      <span>Open web console</span>
+    </button>
+    <button mat-menu-item (click)="openWebConsoleInNewTab()">
+      <mat-icon>http</mat-icon>
+      <span>Open web console in new tab</span>
+    </button>
+  </mat-menu>
 </div>
 
-<template [hidden]="true" #container></template>
\ No newline at end of file
+<template [hidden]="true" #container></template>
diff --git a/src/app/components/project-map/context-console-menu/context-console-menu.component.scss b/src/app/components/project-map/context-console-menu/context-console-menu.component.scss
index d84da4fb..02ea0151 100644
--- a/src/app/components/project-map/context-console-menu/context-console-menu.component.scss
+++ b/src/app/components/project-map/context-console-menu/context-console-menu.component.scss
@@ -1,12 +1,20 @@
 .context-menu {
-    position: absolute;
-    min-height: 0px;
+  position: absolute;
+  min-height: 0px;
 }
 
-.mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c7-5 context-menu-items mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4 {
-    min-height: 0px!important;
+.mat-menu-panel
+  ng-trigger
+  ng-trigger-transformMenu
+  ng-tns-c7-5
+  context-menu-items
+  mat-menu-after
+  mat-menu-below
+  ng-star-inserted
+  mat-elevation-z4 {
+  min-height: 0px !important;
 }
 
 .title {
-    margin: 10px;
-}
\ No newline at end of file
+  margin: 10px;
+}
diff --git a/src/app/components/project-map/context-console-menu/context-console-menu.component.spec.ts b/src/app/components/project-map/context-console-menu/context-console-menu.component.spec.ts
index a6628824..7b66205c 100644
--- a/src/app/components/project-map/context-console-menu/context-console-menu.component.spec.ts
+++ b/src/app/components/project-map/context-console-menu/context-console-menu.component.spec.ts
@@ -23,43 +23,39 @@ describe('ContextConsoleMenuComponent', () => {
   let toasterService: MockedToasterService = new MockedToasterService();
   let router = {
     url: '',
-    navigate: jasmine.createSpy('navigate')
+    navigate: jasmine.createSpy('navigate'),
   };
   let node = {
-    status: 'started'
+    status: 'started',
   };
   let mapSettingsService = new MapSettingsService();
 
   beforeEach(async(() => {
     const electronMock = {
-      isElectronApp: true
+      isElectronApp: true,
     };
 
     TestBed.configureTestingModule({
       imports: [MatMenuModule, BrowserModule],
       providers: [
-        { provide: ChangeDetectorRef }, 
+        { provide: ChangeDetectorRef },
         { provide: ProjectService, useClass: MockedProjectService },
         { provide: ElectronService, useValue: electronMock },
         { provide: MapSettingsService, useValue: mapSettingsService },
         { provide: NodeConsoleService },
         { provide: ConsoleService },
         { provide: ToasterService, useValue: toasterService },
-        { provide: Router, useValue: router }
+        { provide: Router, useValue: router },
       ],
-      declarations: [
-          ContextConsoleMenuComponent,
-          ConsoleDeviceActionComponent,
-          ConsoleDeviceActionBrowserComponent
-        ],
-      schemas: [NO_ERRORS_SCHEMA]
+      declarations: [ContextConsoleMenuComponent, ConsoleDeviceActionComponent, ConsoleDeviceActionBrowserComponent],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ContextConsoleMenuComponent);
     component = fixture.componentInstance;
-    component.server = {location: 'local'} as Server;
+    component.server = { location: 'local' } as Server;
     fixture.detectChanges();
   });
 
@@ -75,7 +71,7 @@ describe('ContextConsoleMenuComponent', () => {
     let spy = spyOn(component.contextConsoleMenu, 'openMenu');
     localStorage.removeItem('consoleContextMenu');
 
-    component.openMenu(node as unknown as Node, 0, 0);
+    component.openMenu((node as unknown) as Node, 0, 0);
 
     expect(spy.calls.any()).toBeTruthy();
   });
@@ -84,7 +80,7 @@ describe('ContextConsoleMenuComponent', () => {
     let spy = spyOn(component, 'openWebConsole');
     mapSettingsService.setConsoleContextMenuAction('web console');
 
-    component.openMenu(node as unknown as Node, 0, 0);
+    component.openMenu((node as unknown) as Node, 0, 0);
 
     expect(spy.calls.any()).toBeTruthy();
   });
@@ -93,7 +89,7 @@ describe('ContextConsoleMenuComponent', () => {
     let spy = spyOn(component, 'openWebConsoleInNewTab');
     mapSettingsService.setConsoleContextMenuAction('web console in new tab');
 
-    component.openMenu(node as unknown as Node, 0, 0);
+    component.openMenu((node as unknown) as Node, 0, 0);
 
     expect(spy.calls.any()).toBeTruthy();
   });
@@ -102,8 +98,8 @@ describe('ContextConsoleMenuComponent', () => {
     let spy = spyOn(component, 'openConsole');
     mapSettingsService.setConsoleContextMenuAction('console');
 
-    component.openMenu(node as unknown as Node, 0, 0);
+    component.openMenu((node as unknown) as Node, 0, 0);
 
     expect(spy.calls.any()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/src/app/components/project-map/context-console-menu/context-console-menu.component.ts b/src/app/components/project-map/context-console-menu/context-console-menu.component.ts
index fd7539cd..d1b24658 100644
--- a/src/app/components/project-map/context-console-menu/context-console-menu.component.ts
+++ b/src/app/components/project-map/context-console-menu/context-console-menu.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectorRef, Component, ComponentFactory, ComponentRef, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentFactory,
+  ComponentRef,
+  Input,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Node } from '../../../cartography/models/node';
@@ -16,20 +25,20 @@ import { ConsoleDeviceActionBrowserComponent } from '../context-menu/actions/con
 @Component({
   selector: 'app-context-console-menu',
   templateUrl: './context-console-menu.component.html',
-  styleUrls: ['./context-console-menu.component.scss']
+  styleUrls: ['./context-console-menu.component.scss'],
 })
 export class ContextConsoleMenuComponent implements OnInit {
   @Input() project: Project;
   @Input() server: Server;
   @ViewChild(MatMenuTrigger) contextConsoleMenu: MatMenuTrigger;
-  @ViewChild("container", { read: ViewContainerRef }) container;
+  @ViewChild('container', { read: ViewContainerRef }) container;
   componentRef: ComponentRef<ConsoleDeviceActionComponent>;
   componentBrowserRef: ComponentRef<ConsoleDeviceActionBrowserComponent>;
 
   topPosition;
   leftPosition;
   isElectronApp = false;
-  node: Node;;
+  node: Node;
 
   constructor(
     private sanitizer: DomSanitizer,
@@ -57,56 +66,60 @@ export class ContextConsoleMenuComponent implements OnInit {
     this.node = node;
     let action = this.mapSettingsService.getConsoleContextManuAction();
     if (action) {
-        if (action === 'web console') {
-            this.openWebConsole();
-        } else if (action === 'web console in new tab') {
-            this.openWebConsoleInNewTab();
-        } else if (action === 'console') {
-            this.openConsole();
-        }
+      if (action === 'web console') {
+        this.openWebConsole();
+      } else if (action === 'web console in new tab') {
+        this.openWebConsoleInNewTab();
+      } else if (action === 'console') {
+        this.openConsole();
+      }
     } else {
-        this.setPosition(top, left);
-        this.contextConsoleMenu.openMenu();
+      this.setPosition(top, left);
+      this.contextConsoleMenu.openMenu();
     }
   }
 
   openConsole() {
-      this.mapSettingsService.setConsoleContextMenuAction('console');
-      if (this.isElectronApp) {
-        const factory: ComponentFactory<ConsoleDeviceActionComponent> = this.resolver.resolveComponentFactory(ConsoleDeviceActionComponent);
-        this.componentRef = this.container.createComponent(factory);
-        this.componentRef.instance.server = this.server;
-        this.componentRef.instance.nodes = [this.node];
+    this.mapSettingsService.setConsoleContextMenuAction('console');
+    if (this.isElectronApp) {
+      const factory: ComponentFactory<ConsoleDeviceActionComponent> = this.resolver.resolveComponentFactory(
+        ConsoleDeviceActionComponent
+      );
+      this.componentRef = this.container.createComponent(factory);
+      this.componentRef.instance.server = this.server;
+      this.componentRef.instance.nodes = [this.node];
 
-        this.componentRef.instance.console();
-      } else {
-        const factory: ComponentFactory<ConsoleDeviceActionBrowserComponent> = this.resolver.resolveComponentFactory(ConsoleDeviceActionBrowserComponent);
-        this.componentBrowserRef = this.container.createComponent(factory);
-        this.componentBrowserRef.instance.server = this.server;
-        this.componentBrowserRef.instance.node = this.node;
+      this.componentRef.instance.console();
+    } else {
+      const factory: ComponentFactory<ConsoleDeviceActionBrowserComponent> = this.resolver.resolveComponentFactory(
+        ConsoleDeviceActionBrowserComponent
+      );
+      this.componentBrowserRef = this.container.createComponent(factory);
+      this.componentBrowserRef.instance.server = this.server;
+      this.componentBrowserRef.instance.node = this.node;
 
-        this.componentBrowserRef.instance.openConsole();
-      }
+      this.componentBrowserRef.instance.openConsole();
+    }
   }
 
   openWebConsole() {
     this.mapSettingsService.setConsoleContextMenuAction('web console');
     if (this.node.status === 'started') {
-        this.mapSettingsService.logConsoleSubject.next(true);
-        this.consoleService.openConsoleForNode(this.node);
+      this.mapSettingsService.logConsoleSubject.next(true);
+      this.consoleService.openConsoleForNode(this.node);
     } else {
-        this.toasterService.error('To open console please start the node');
+      this.toasterService.error('To open console please start the node');
     }
   }
 
   openWebConsoleInNewTab() {
     this.mapSettingsService.setConsoleContextMenuAction('web console in new tab');
     if (this.node.status === 'started') {
-        let url = this.router.url.split('/');
-        let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${this.node.node_id}`
-        window.open(urlString);
+      let url = this.router.url.split('/');
+      let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${this.node.node_id}`;
+      window.open(urlString);
     } else {
-        this.toasterService.error('To open console please start the node');
+      this.toasterService.error('To open console please start the node');
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.html b/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.html
index 92cd8c3e..c3cd6026 100644
--- a/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.html
+++ b/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="alignHorizontally()">
-    <mat-icon>more_horiz</mat-icon>
-    <span>Align horizontally</span>
+  <mat-icon>more_horiz</mat-icon>
+  <span>Align horizontally</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.ts b/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.ts
index 6f0aeb63..d21027e0 100644
--- a/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.ts
+++ b/src/app/components/project-map/context-menu/actions/align-horizontally/align-horizontally.component.ts
@@ -6,31 +6,28 @@ import { NodeService } from '../../../../../services/node.service';
 
 @Component({
   selector: 'app-align-horizontally-action',
-  templateUrl: './align-horizontally.component.html'
+  templateUrl: './align-horizontally.component.html',
 })
 export class AlignHorizontallyActionComponent implements OnInit {
   @Input() server: Server;
   @Input() nodes: Node[];
 
-  constructor(
-    private nodesDataSource: NodesDataSource,
-    private nodeService: NodeService
-  ) {}
+  constructor(private nodesDataSource: NodesDataSource, private nodeService: NodeService) {}
 
   ngOnInit() {}
 
   alignHorizontally() {
     let averageY: number = 0;
     this.nodes.forEach((node) => {
-        averageY += node.y;
+      averageY += node.y;
     });
-    averageY = averageY/this.nodes.length;
-    
-    this.nodes.forEach((node) => {
-        node.y = averageY;
-        this.nodesDataSource.update(node);
+    averageY = averageY / this.nodes.length;
 
-        this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    this.nodes.forEach((node) => {
+      node.y = averageY;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
     });
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.html b/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.html
index 8ee5e162..33f1806a 100644
--- a/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.html
+++ b/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="alignVertically()">
-    <mat-icon>more_vert</mat-icon>
-    <span>Align vertically</span>
+  <mat-icon>more_vert</mat-icon>
+  <span>Align vertically</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.ts b/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.ts
index 2633f783..8fbcb38f 100644
--- a/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.ts
+++ b/src/app/components/project-map/context-menu/actions/align_vertically/align-vertically.component.ts
@@ -6,31 +6,28 @@ import { NodeService } from '../../../../../services/node.service';
 
 @Component({
   selector: 'app-align-vertically-action',
-  templateUrl: './align-vertically.component.html'
+  templateUrl: './align-vertically.component.html',
 })
 export class AlignVerticallyActionComponent implements OnInit {
   @Input() server: Server;
   @Input() nodes: Node[];
 
-  constructor(
-    private nodesDataSource: NodesDataSource,
-    private nodeService: NodeService
-  ) {}
+  constructor(private nodesDataSource: NodesDataSource, private nodeService: NodeService) {}
 
   ngOnInit() {}
 
   alignVertically() {
     let averageX: number = 0;
     this.nodes.forEach((node) => {
-        averageX += node.x;
+      averageX += node.x;
     });
-    averageX = averageX/this.nodes.length;
-    
-    this.nodes.forEach((node) => {
-        node.x = averageX;
-        this.nodesDataSource.update(node);
+    averageX = averageX / this.nodes.length;
 
-        this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    this.nodes.forEach((node) => {
+      node.x = averageX;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
     });
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html
index 2a3518ab..b9fe3fb2 100644
--- a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="bringToFront()">
-    <mat-icon>vertical_align_top</mat-icon>
-    <span>Bring to front</span>
+  <mat-icon>vertical_align_top</mat-icon>
+  <span>Bring to front</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts
index 8825e8a8..2b82ccd1 100644
--- a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts
@@ -6,7 +6,12 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { CommonModule } from '@angular/common';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
+import {
+  MockedDrawingService,
+  MockedDrawingsDataSource,
+  MockedNodesDataSource,
+  MockedNodeService,
+} from '../../../project-map.component.spec';
 import { DrawingService } from '../../../../../services/drawing.service';
 import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
 import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
@@ -21,19 +26,19 @@ describe('BringToFrontActionComponent', () => {
   let fixture: ComponentFixture<BringToFrontActionComponent>;
   let drawingService = new MockedDrawingService();
   let drawingsDataSource = new MockedDrawingsDataSource();
-  let nodeService  = new MockedNodeService();
+  let nodeService = new MockedNodeService();
   let nodesDataSource = new MockedNodesDataSource();
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
-        providers: [
-            { provide: DrawingService, useValue: drawingService },
-            { provide: DrawingsDataSource, useValue: drawingsDataSource },
-            { provide: NodeService, useValue: nodeService },
-            { provide: NodesDataSource, useValue: nodesDataSource },
-          ],
-        declarations: [BringToFrontActionComponent]
+      imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+      providers: [
+        { provide: DrawingService, useValue: drawingService },
+        { provide: DrawingsDataSource, useValue: drawingsDataSource },
+        { provide: NodeService, useValue: nodeService },
+        { provide: NodesDataSource, useValue: nodesDataSource },
+      ],
+      declarations: [BringToFrontActionComponent],
     }).compileComponents();
   }));
 
@@ -49,7 +54,7 @@ describe('BringToFrontActionComponent', () => {
 
   it('should call node service when bring to front action called', () => {
     spyOn(nodeService, 'update').and.returnValue(of());
-    component.nodes = [{z: 0} as Node];
+    component.nodes = [{ z: 0 } as Node];
     component.drawings = [];
 
     component.bringToFront();
@@ -60,7 +65,7 @@ describe('BringToFrontActionComponent', () => {
   it('should call drawing service when bring to front action called', () => {
     spyOn(drawingService, 'update').and.returnValue(of());
     component.nodes = [];
-    component.drawings = [{z: 0} as Drawing];
+    component.drawings = [{ z: 0 } as Drawing];
 
     component.bringToFront();
 
diff --git a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts
index 37b07b6b..b375c7e9 100644
--- a/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts
@@ -9,7 +9,7 @@ import { DrawingService } from '../../../../../services/drawing.service';
 
 @Component({
   selector: 'app-bring-to-front-action',
-  templateUrl: './bring-to-front-action.component.html'
+  templateUrl: './bring-to-front-action.component.html',
 })
 export class BringToFrontActionComponent implements OnInit {
   @Input() server: Server;
@@ -26,8 +26,8 @@ export class BringToFrontActionComponent implements OnInit {
   ngOnInit() {}
 
   bringToFront() {
-    let maxZValueForNodes = Math.max(...this.nodes.map(n => n.z));
-    let maxZValueForDrawings = Math.max(...this.drawings.map(n => n.z));
+    let maxZValueForNodes = Math.max(...this.nodes.map((n) => n.z));
+    let maxZValueForDrawings = Math.max(...this.drawings.map((n) => n.z));
     let maxZValue = Math.max(maxZValueForNodes, maxZValueForDrawings);
     if (maxZValue < 100) maxZValue++;
 
diff --git a/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.html b/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.html
index 1ffb2bb9..d141de65 100644
--- a/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="changeHostname()">
-    <mat-icon>edit</mat-icon>
-    <span>Change hostname</span>
+  <mat-icon>edit</mat-icon>
+  <span>Change hostname</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts b/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts
index 23e92371..ad3a885a 100644
--- a/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts
@@ -6,7 +6,7 @@ import { ChangeHostnameDialogComponent } from '../../../change-hostname-dialog/c
 
 @Component({
   selector: 'app-change-hostname-action',
-  templateUrl: './change-hostname-action.component.html'
+  templateUrl: './change-hostname-action.component.html',
 })
 export class ChangeHostnameActionComponent implements OnInit {
   @Input() server: Server;
@@ -18,11 +18,11 @@ export class ChangeHostnameActionComponent implements OnInit {
 
   changeHostname() {
     const dialogRef = this.dialog.open(ChangeHostnameDialogComponent, {
-        autoFocus: false,
-        disableClose: true
-      });
-      let instance = dialogRef.componentInstance;
-      instance.server = this.server;
-      instance.node = this.node;
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.node = this.node;
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html
index b17302ad..b3e08925 100644
--- a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="changeSymbol()">
-    <mat-icon>find_replace</mat-icon>
-    <span>Change symbol</span>
+  <mat-icon>find_replace</mat-icon>
+  <span>Change symbol</span>
 </button>
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 207f888e..1bc65b0b 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
@@ -6,7 +6,7 @@ import { ChangeSymbolDialogComponent } from '../../../change-symbol-dialog/chang
 
 @Component({
   selector: 'app-change-symbol-action',
-  templateUrl: './change-symbol-action.component.html'
+  templateUrl: './change-symbol-action.component.html',
 })
 export class ChangeSymbolActionComponent implements OnInit {
   @Input() server: Server;
@@ -18,13 +18,13 @@ export class ChangeSymbolActionComponent implements OnInit {
 
   changeSymbol() {
     const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
-        width: '1000px',
-        height: '500px',
-        autoFocus: false,
-        disableClose: true
-      });
-      let instance = dialogRef.componentInstance;
-      instance.server = this.server;
-      instance.node = this.node;
+      width: '1000px',
+      height: '500px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.node = this.node;
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.html b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.html
index 3290ba3a..fdfba96a 100644
--- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="configureNode()">
-    <mat-icon>settings_applications</mat-icon>
-    <span>Configure</span>
+  <mat-icon>settings_applications</mat-icon>
+  <span>Configure</span>
 </button>
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 a4f73e13..c8866048 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
@@ -17,10 +17,9 @@ import { ConfiguratorDialogDockerComponent } from '../../../node-editors/configu
 import { ConfiguratorDialogNatComponent } from '../../../node-editors/configurator/nat/configurator-nat.component';
 import { ConfiguratorDialogTracengComponent } from '../../../node-editors/configurator/traceng/configurator-traceng.component';
 
-
 @Component({
   selector: 'app-config-node-action',
-  templateUrl: './config-action.component.html'
+  templateUrl: './config-action.component.html',
 })
 export class ConfigActionComponent {
   @Input() server: Server;
@@ -28,7 +27,7 @@ export class ConfigActionComponent {
   private conf = {
     autoFocus: false,
     width: '800px',
-    disableClose: true
+    disableClose: true,
   };
   dialogRef;
 
diff --git a/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.html b/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.html
index 48f51b4f..15f3f924 100644
--- a/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.html
+++ b/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="openConsole()">
-    <mat-icon>web_asset</mat-icon>
-    <span>Console</span>
+  <mat-icon>web_asset</mat-icon>
+  <span>Console</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts b/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts
index c540fbcb..3f41c71a 100644
--- a/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts
+++ b/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts
@@ -4,44 +4,50 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { NodeService } from '../../../../../services/node.service';
 import { Server } from '../../../../../models/server';
 
-
 @Component({
-    selector: 'app-console-device-action-browser',
-    templateUrl: './console-device-action-browser.component.html'
+  selector: 'app-console-device-action-browser',
+  templateUrl: './console-device-action-browser.component.html',
 })
 export class ConsoleDeviceActionBrowserComponent {
-    @Input() server: Server;
-    @Input() node: Node;
+  @Input() server: Server;
+  @Input() node: Node;
 
-    constructor(
-        private toasterService: ToasterService,
-        private nodeService: NodeService
-    ) {}
+  constructor(private toasterService: ToasterService, private nodeService: NodeService) {}
 
-    openConsole() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.startConsole();
-        });
-    }
+  openConsole() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.startConsole();
+    });
+  }
 
-    startConsole() {
-        if (this.node.status !== "started") {
-            this.toasterService.error("This node must be started before a console can be opened");
-        } else {
-            if (this.node.console_host === '0.0.0.0' || this.node.console_host === '0:0:0:0:0:0:0:0' || this.node.console_host === '::') {
-                this.node.console_host = this.server.host;
-            }
+  startConsole() {
+    if (this.node.status !== 'started') {
+      this.toasterService.error('This node must be started before a console can be opened');
+    } else {
+      if (
+        this.node.console_host === '0.0.0.0' ||
+        this.node.console_host === '0:0:0:0:0:0:0:0' ||
+        this.node.console_host === '::'
+      ) {
+        this.node.console_host = this.server.host;
+      }
 
-            if (this.node.console_type === "telnet" || this.node.console_type === "vnc" || this.node.console_type === "spice") {
-                try {
-                    location.assign(`gns3+${this.node.console_type}://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`);
-                } catch (e) {
-                    this.toasterService.error(e);
-                }  
-            } else {
-                this.toasterService.error("Supported console types: telnet, vnc, spice.");
-            }
+      if (
+        this.node.console_type === 'telnet' ||
+        this.node.console_type === 'vnc' ||
+        this.node.console_type === 'spice'
+      ) {
+        try {
+          location.assign(
+            `gns3+${this.node.console_type}://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
+          );
+        } catch (e) {
+          this.toasterService.error(e);
         }
+      } else {
+        this.toasterService.error('Supported console types: telnet, vnc, spice.');
+      }
     }
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.spec.ts
index ba89a64d..10e14f0b 100644
--- a/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.spec.ts
@@ -14,7 +14,6 @@ import { Server } from '../../../../../models/server';
 import { MockedNodeService } from '../../../project-map.component.spec';
 import { NodeService } from '../../../../../services/node.service';
 
-
 describe('ConsoleDeviceActionComponent', () => {
   let component: ConsoleDeviceActionComponent;
   let fixture: ComponentFixture<ConsoleDeviceActionComponent>;
@@ -31,18 +30,18 @@ describe('ConsoleDeviceActionComponent', () => {
       remote: {
         require: (file) => {
           return {
-            openConsole() {}
-          }
-        }
-      }
+            openConsole() {},
+          };
+        },
+      },
     };
 
     mockedSettingsService = new MockedSettingsService();
     mockedServerService = new MockedServerService();
     mockedToaster = new MockedToasterService();
 
-    server = { host: 'localhost', 'port': 222} as Server;
-  })
+    server = { host: 'localhost', port: 222 } as Server;
+  });
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -51,14 +50,11 @@ describe('ConsoleDeviceActionComponent', () => {
         { provide: ServerService, useValue: mockedServerService },
         { provide: SettingsService, useValue: mockedSettingsService },
         { provide: ToasterService, useValue: mockedToaster },
-        { provide: NodeService, useValue: mockedNodeService }
+        { provide: NodeService, useValue: mockedNodeService },
       ],
-      imports: [
-        MatIconModule
-      ],
-      declarations: [ ConsoleDeviceActionComponent ]
-    })
-    .compileComponents();
+      imports: [MatIconModule],
+      declarations: [ConsoleDeviceActionComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -73,18 +69,20 @@ describe('ConsoleDeviceActionComponent', () => {
 
   describe('console to nodes', () => {
     let nodes: Node[];
-    
+
     beforeEach(() => {
-      nodes = [{
-        status: 'started',
-        console_type: 'telnet',
-        console_host: 'host',
-        console: 999,
-        name: 'Node 1',
-        project_id: '1111',
-        node_id: '2222',
-      } as Node];
-      
+      nodes = [
+        {
+          status: 'started',
+          console_type: 'telnet',
+          console_host: 'host',
+          console: 999,
+          name: 'Node 1',
+          project_id: '1111',
+          node_id: '2222',
+        } as Node,
+      ];
+
       component.nodes = nodes;
       component.server = server;
 
@@ -103,7 +101,7 @@ describe('ConsoleDeviceActionComponent', () => {
         name: 'Node 1',
         project_id: '1111',
         node_id: '2222',
-        server_url: 'localhost:222'
+        server_url: 'localhost:222',
       });
     });
 
@@ -121,7 +119,7 @@ describe('ConsoleDeviceActionComponent', () => {
 
     it('should only start running nodes', async () => {
       nodes.push({
-        status: 'stopped'
+        status: 'stopped',
       } as Node);
       await component.console();
       expect(component.openConsole).toHaveBeenCalledTimes(1);
diff --git a/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts b/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts
index b4c0a39b..d6ff36be 100644
--- a/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts
@@ -9,7 +9,7 @@ import { NodeService } from '../../../../../services/node.service';
 
 @Component({
   selector: 'app-console-device-action',
-  templateUrl: './console-device-action.component.html'
+  templateUrl: './console-device-action.component.html',
 })
 export class ConsoleDeviceActionComponent implements OnInit {
   @Input() server: Server;
@@ -21,21 +21,23 @@ export class ConsoleDeviceActionComponent implements OnInit {
     private settingsService: SettingsService,
     private toasterService: ToasterService,
     private nodeService: NodeService
-  ) { }
+  ) {}
 
   ngOnInit() {}
 
   async console() {
-    let consoleCommand = this.settingsService.get<string>('console_command') ? this.settingsService.get<string>('console_command') : this.nodeService.getDefaultCommand();
-    const startedNodes = this.nodes.filter(node => node.status === 'started');
+    let consoleCommand = this.settingsService.get<string>('console_command')
+      ? this.settingsService.get<string>('console_command')
+      : this.nodeService.getDefaultCommand();
+    const startedNodes = this.nodes.filter((node) => node.status === 'started');
 
-    if(startedNodes.length === 0) {
+    if (startedNodes.length === 0) {
       this.toasterService.error('Device needs to be started in order to console to it.');
       return;
     }
 
-    for(var node of this.nodes) {
-      if(node.status !== 'started') {
+    for (var node of this.nodes) {
+      if (node.status !== 'started') {
         continue;
       }
 
@@ -47,7 +49,7 @@ export class ConsoleDeviceActionComponent implements OnInit {
         name: node.name,
         project_id: node.project_id,
         node_id: node.node_id,
-        server_url: this.serverService.getServerUrl(this.server)
+        server_url: this.serverService.getServerUrl(this.server),
       };
       await this.openConsole(consoleRequest);
     }
diff --git a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.html b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.html
index a0819a60..2d9d42fc 100644
--- a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="delete()">
-    <mat-icon>delete</mat-icon>
-    <span>Delete</span>
+  <mat-icon>delete</mat-icon>
+  <span>Delete</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.spec.ts
index 9a27cdcd..7e846ba1 100644
--- a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.spec.ts
@@ -16,72 +16,72 @@ import { LinkService } from '../../../../../services/link.service';
 import { Link } from '../../../../../models/link';
 
 describe('DeleteActionComponent', () => {
-    let component: DeleteActionComponent;
-    let fixture: ComponentFixture<DeleteActionComponent>;
-    let mockedNodeService: MockedNodeService = new MockedNodeService();
-    let mockedDrawingService: MockedDrawingService = new MockedDrawingService();
-    let mockedLinkService: MockedLinkService = new MockedLinkService();
+  let component: DeleteActionComponent;
+  let fixture: ComponentFixture<DeleteActionComponent>;
+  let mockedNodeService: MockedNodeService = new MockedNodeService();
+  let mockedDrawingService: MockedDrawingService = new MockedDrawingService();
+  let mockedLinkService: MockedLinkService = new MockedLinkService();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [MatIconModule, MatMenuModule, NoopAnimationsModule],
-            providers: [
-                { provide: NodesDataSource,  useClass: NodesDataSource },
-                { provide: DrawingsDataSource, useClass: DrawingsDataSource },
-                { provide: LinksDataSource, useClass: LinksDataSource },
-                { provide: NodeService, useValue: mockedNodeService },
-                { provide: DrawingService, useValue: mockedDrawingService },
-                { provide: LinkService, useValue: mockedLinkService }
-            ],
-            declarations: [DeleteActionComponent]
-        }).compileComponents();
-    }));
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatIconModule, MatMenuModule, NoopAnimationsModule],
+      providers: [
+        { provide: NodesDataSource, useClass: NodesDataSource },
+        { provide: DrawingsDataSource, useClass: DrawingsDataSource },
+        { provide: LinksDataSource, useClass: LinksDataSource },
+        { provide: NodeService, useValue: mockedNodeService },
+        { provide: DrawingService, useValue: mockedDrawingService },
+        { provide: LinkService, useValue: mockedLinkService },
+      ],
+      declarations: [DeleteActionComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DeleteActionComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should call delete action in drawing service', () => {
-        let node = { node_id: '1' } as Node;
-        component.nodes = [node];
-        let drawing = { drawing_id: '1' } as Drawing;
-        component.drawings = [drawing];
-        component.links = [];
-        spyOn(mockedDrawingService, 'delete').and.returnValue(of());
+  it('should call delete action in drawing service', () => {
+    let node = { node_id: '1' } as Node;
+    component.nodes = [node];
+    let drawing = { drawing_id: '1' } as Drawing;
+    component.drawings = [drawing];
+    component.links = [];
+    spyOn(mockedDrawingService, 'delete').and.returnValue(of());
 
-        component.delete();
+    component.delete();
 
-        expect(mockedDrawingService.delete).toHaveBeenCalled();
-    });
+    expect(mockedDrawingService.delete).toHaveBeenCalled();
+  });
 
-    it('should call delete action in node service', () => {
-        let node = { node_id: '1' } as Node;
-        component.nodes = [node];
-        let drawing = { drawing_id: '1' } as Drawing;
-        component.drawings = [drawing];
-        component.links = [];
-        spyOn(mockedNodeService, 'delete').and.returnValue(of());
+  it('should call delete action in node service', () => {
+    let node = { node_id: '1' } as Node;
+    component.nodes = [node];
+    let drawing = { drawing_id: '1' } as Drawing;
+    component.drawings = [drawing];
+    component.links = [];
+    spyOn(mockedNodeService, 'delete').and.returnValue(of());
 
-        component.delete();
+    component.delete();
 
-        expect(mockedNodeService.delete).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.delete).toHaveBeenCalled();
+  });
 
-    it('should call delete action in link service', () => {
-        component.nodes = [];
-        component.drawings = [];
-        let link = { link_id: '1', project_id: '1' } as Link;
-        component.links = [link];
-        spyOn(mockedLinkService, 'deleteLink').and.returnValue(of());
+  it('should call delete action in link service', () => {
+    component.nodes = [];
+    component.drawings = [];
+    let link = { link_id: '1', project_id: '1' } as Link;
+    component.links = [link];
+    spyOn(mockedLinkService, 'deleteLink').and.returnValue(of());
 
-        component.delete();
+    component.delete();
 
-        expect(mockedLinkService.deleteLink).toHaveBeenCalled();
-    });
+    expect(mockedLinkService.deleteLink).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.ts b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.ts
index 26629dfc..4ea57b19 100644
--- a/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/delete-action/delete-action.component.ts
@@ -12,7 +12,7 @@ import { LinksDataSource } from '../../../../../cartography/datasources/links-da
 
 @Component({
   selector: 'app-delete-action',
-  templateUrl: './delete-action.component.html'
+  templateUrl: './delete-action.component.html',
 })
 export class DeleteActionComponent implements OnInit {
   @Input() server: Server;
@@ -33,21 +33,21 @@ export class DeleteActionComponent implements OnInit {
 
   delete() {
     this.nodes.forEach((node) => {
-        this.nodesDataSource.remove(node);
+      this.nodesDataSource.remove(node);
 
-        this.nodeService.delete(this.server, node).subscribe((node: Node) => {});
+      this.nodeService.delete(this.server, node).subscribe((node: Node) => {});
     });
 
     this.drawings.forEach((drawing) => {
-        this.drawingsDataSource.remove(drawing);
+      this.drawingsDataSource.remove(drawing);
 
-        this.drawingService.delete(this.server, drawing).subscribe((drawing: Drawing) => {});
+      this.drawingService.delete(this.server, drawing).subscribe((drawing: Drawing) => {});
     });
 
     this.links.forEach((link) => {
-        this.linksDataSource.remove(link);
+      this.linksDataSource.remove(link);
 
-        this.linkService.deleteLink(this.server, link).subscribe(() => {});
+      this.linkService.deleteLink(this.server, link).subscribe(() => {});
     });
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.html b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.html
index a07e95df..2ad95224 100644
--- a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="duplicate()">
-    <mat-icon>filter_none</mat-icon>
-    <span>Duplicate</span>
+  <mat-icon>filter_none</mat-icon>
+  <span>Duplicate</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts
index 4ae321ef..8242b3ca 100644
--- a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.spec.ts
@@ -15,69 +15,69 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { MockedToasterService } from '../../../../../services/toaster.service.spec';
 
 describe('DuplicateActionComponent', () => {
-    let component: DuplicateActionComponent;
-    let fixture: ComponentFixture<DuplicateActionComponent>;
-    let mockedNodeService: MockedNodeService = new MockedNodeService();
-    let mockedDrawingService: MockedDrawingService = new MockedDrawingService();
-    let mockedToasterService = new MockedToasterService;
+  let component: DuplicateActionComponent;
+  let fixture: ComponentFixture<DuplicateActionComponent>;
+  let mockedNodeService: MockedNodeService = new MockedNodeService();
+  let mockedDrawingService: MockedDrawingService = new MockedDrawingService();
+  let mockedToasterService = new MockedToasterService();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [MatIconModule, MatMenuModule, NoopAnimationsModule],
-            providers: [
-                { provide: NodesDataSource,  useClass: NodesDataSource },
-                { provide: DrawingsDataSource, useClass: DrawingsDataSource },
-                { provide: NodeService, useValue: mockedNodeService },
-                { provide: DrawingService, useValue: mockedDrawingService },
-                { provide: ToasterService, useValue: mockedToasterService }
-            ],
-            declarations: [DuplicateActionComponent]
-        }).compileComponents();
-    }));
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatIconModule, MatMenuModule, NoopAnimationsModule],
+      providers: [
+        { provide: NodesDataSource, useClass: NodesDataSource },
+        { provide: DrawingsDataSource, useClass: DrawingsDataSource },
+        { provide: NodeService, useValue: mockedNodeService },
+        { provide: DrawingService, useValue: mockedDrawingService },
+        { provide: ToasterService, useValue: mockedToasterService },
+      ],
+      declarations: [DuplicateActionComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DuplicateActionComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DuplicateActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should call duplicate action in drawing service', () => {
-        let drawing = { drawing_id: '1' } as Drawing;
-        component.drawings = [drawing];
-        component.nodes = [];
-        spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
+  it('should call duplicate action in drawing service', () => {
+    let drawing = { drawing_id: '1' } as Drawing;
+    component.drawings = [drawing];
+    component.nodes = [];
+    spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
 
-        component.duplicate();
+    component.duplicate();
 
-        expect(mockedDrawingService.duplicate).toHaveBeenCalled();
-    });
+    expect(mockedDrawingService.duplicate).toHaveBeenCalled();
+  });
 
-    it('should call duplicate action in node service', () => {
-        let node = { node_id: '1', status: 'stopped'} as Node;
-        component.nodes = [node];
-        component.drawings = [];
-        spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
+  it('should call duplicate action in node service', () => {
+    let node = { node_id: '1', status: 'stopped' } as Node;
+    component.nodes = [node];
+    component.drawings = [];
+    spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
 
-        component.duplicate();
+    component.duplicate();
 
-        expect(mockedNodeService.duplicate).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.duplicate).toHaveBeenCalled();
+  });
 
-    it('should call duplicate action in both services', () => {
-        let drawing = { drawing_id: '1' } as Drawing;
-        component.drawings = [drawing];
-        let node = { node_id: '1', status: 'stopped' } as Node;
-        component.nodes = [node];
-        spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
-        spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
+  it('should call duplicate action in both services', () => {
+    let drawing = { drawing_id: '1' } as Drawing;
+    component.drawings = [drawing];
+    let node = { node_id: '1', status: 'stopped' } as Node;
+    component.nodes = [node];
+    spyOn(mockedDrawingService, 'duplicate').and.returnValue(of());
+    spyOn(mockedNodeService, 'duplicate').and.returnValue(of());
 
-        component.duplicate();
+    component.duplicate();
 
-        expect(mockedDrawingService.duplicate).toHaveBeenCalled();
-        expect(mockedNodeService.duplicate).toHaveBeenCalled();
-    });
+    expect(mockedDrawingService.duplicate).toHaveBeenCalled();
+    expect(mockedNodeService.duplicate).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.ts b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.ts
index ac055ffe..3529f8ea 100644
--- a/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/duplicate-action/duplicate-action.component.ts
@@ -10,44 +10,44 @@ import { DrawingsDataSource } from '../../../../../cartography/datasources/drawi
 import { ToasterService } from '../../../../../services/toaster.service';
 
 @Component({
-selector: 'app-duplicate-action',
-templateUrl: './duplicate-action.component.html'
+  selector: 'app-duplicate-action',
+  templateUrl: './duplicate-action.component.html',
 })
 export class DuplicateActionComponent {
-    @Input() server: Server;
-    @Input() project: Project;
-    @Input() drawings: Drawing[];
-    @Input() nodes: Node[];
-    
-    constructor(
-        private nodeService: NodeService,
-        private nodesDataSource: NodesDataSource,
-        private drawingService: DrawingService,
-        private drawingsDataSource: DrawingsDataSource,
-        private toasterService: ToasterService
-    ) {}
+  @Input() server: Server;
+  @Input() project: Project;
+  @Input() drawings: Drawing[];
+  @Input() nodes: Node[];
 
-    duplicate() {
-        let runningNodes: string = '';
-        for(let node of this.nodes) {
-            if (node.status === 'stopped') {
-                this.nodeService.duplicate(this.server, node).subscribe((node: Node) => {
-                    this.nodesDataSource.add(node);
-                });
-            } else {
-                runningNodes += `${node.name}, `;
-            }
-        }
+  constructor(
+    private nodeService: NodeService,
+    private nodesDataSource: NodesDataSource,
+    private drawingService: DrawingService,
+    private drawingsDataSource: DrawingsDataSource,
+    private toasterService: ToasterService
+  ) {}
 
-        for(let drawing of this.drawings) {
-            this.drawingService.duplicate(this.server, drawing.project_id, drawing).subscribe((drawing: Drawing) => {
-                this.drawingsDataSource.add(drawing);
-            })
-        }
-
-        if (runningNodes.length > 0) {
-            runningNodes = runningNodes.substring(0, runningNodes.length-2);
-            this.toasterService.error(`Cannot duplicate node data for nodes: ${runningNodes}`);
-        }
+  duplicate() {
+    let runningNodes: string = '';
+    for (let node of this.nodes) {
+      if (node.status === 'stopped') {
+        this.nodeService.duplicate(this.server, node).subscribe((node: Node) => {
+          this.nodesDataSource.add(node);
+        });
+      } else {
+        runningNodes += `${node.name}, `;
+      }
     }
+
+    for (let drawing of this.drawings) {
+      this.drawingService.duplicate(this.server, drawing.project_id, drawing).subscribe((drawing: Drawing) => {
+        this.drawingsDataSource.add(drawing);
+      });
+    }
+
+    if (runningNodes.length > 0) {
+      runningNodes = runningNodes.substring(0, runningNodes.length - 2);
+      this.toasterService.error(`Cannot duplicate node data for nodes: ${runningNodes}`);
+    }
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.html b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.html
index d3dc8ef0..e7ef9592 100644
--- a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.html
@@ -1,6 +1,8 @@
-<button mat-menu-item 
-    *ngIf="node.node_type==='vpcs' || node.node_type==='iou' || node.node_type==='dynamips'" 
-    (click)="editConfig()">
-    <mat-icon>settings</mat-icon>
-    <span>Edit config</span>
+<button
+  mat-menu-item
+  *ngIf="node.node_type === 'vpcs' || node.node_type === 'iou' || node.node_type === 'dynamips'"
+  (click)="editConfig()"
+>
+  <mat-icon>settings</mat-icon>
+  <span>Edit config</span>
 </button>
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 6f61809b..58c1e178 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
@@ -6,26 +6,26 @@ import { ConfigEditorDialogComponent } from '../../../node-editors/config-editor
 import { MatDialog } from '@angular/material/dialog';
 
 @Component({
-    selector: 'app-edit-config-action',
-    templateUrl: './edit-config-action.component.html'
+  selector: 'app-edit-config-action',
+  templateUrl: './edit-config-action.component.html',
 })
 export class EditConfigActionComponent {
-    @Input() server: Server;
-    @Input() project: Project;
-    @Input() node: Node;
+  @Input() server: Server;
+  @Input() project: Project;
+  @Input() node: Node;
 
-    constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog) {}
 
-    editConfig() {
-        const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
-            width: '600px',
-            height: '500px',
-            autoFocus: false,
-            disableClose: true
-        });
-        let instance = dialogRef.componentInstance;
-        instance.server = this.server;
-        instance.project = this.project;
-        instance.node = this.node;
-    }
+  editConfig() {
+    const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
+      width: '600px',
+      height: '500px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+    instance.node = this.node;
+  }
 }
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 e08754e4..39c6c03d 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
@@ -8,7 +8,7 @@ import { ImageElement } from '../../../../../cartography/models/drawings/image-e
 
 @Component({
   selector: 'app-edit-style-action',
-  templateUrl: './edit-style-action.component.html'
+  templateUrl: './edit-style-action.component.html',
 })
 export class EditStyleActionComponent implements OnChanges {
   @Input() server: Server;
@@ -26,7 +26,7 @@ export class EditStyleActionComponent implements OnChanges {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
       width: '800px',
       autoFocus: false,
-      disableClose: true
+      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 1efa051e..3375ffbb 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
@@ -11,7 +11,7 @@ import { LinkNode } from '../../../../../models/link-node';
 
 @Component({
   selector: 'app-edit-text-action',
-  templateUrl: './edit-text-action.component.html'
+  templateUrl: './edit-text-action.component.html',
 })
 export class EditTextActionComponent implements OnInit {
   @Input() server: Server;
@@ -30,7 +30,7 @@ export class EditTextActionComponent implements OnInit {
     const dialogRef = this.dialog.open(TextEditorDialogComponent, {
       width: '300px',
       autoFocus: false,
-      disableClose: true
+      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.html b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.html
index 70843579..d5a46de6 100644
--- a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.html
@@ -1,6 +1,8 @@
-<button mat-menu-item 
-    *ngIf="node.node_type==='vpcs' || node.node_type==='dynamips' || node.node_type==='iou'"
-    (click)="exportConfig()">
-    <mat-icon>call_made</mat-icon>
-    <span>Export config</span>
+<button
+  mat-menu-item
+  *ngIf="node.node_type === 'vpcs' || node.node_type === 'dynamips' || node.node_type === 'iou'"
+  (click)="exportConfig()"
+>
+  <mat-icon>call_made</mat-icon>
+  <span>Export config</span>
 </button>
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 f54842f1..1e37b26e 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
@@ -6,55 +6,52 @@ import { MatDialog } from '@angular/material/dialog';
 import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component';
 
 @Component({
-    selector: 'app-export-config-action',
-    templateUrl: './export-config-action.component.html'
+  selector: 'app-export-config-action',
+  templateUrl: './export-config-action.component.html',
 })
 export class ExportConfigActionComponent {
-    @Input() server: Server;
-    @Input() node: Node;
+  @Input() server: Server;
+  @Input() node: Node;
 
-    constructor(
-        private nodeService: NodeService,
-        private dialog: MatDialog
-    ) {}
+  constructor(private nodeService: NodeService, private dialog: MatDialog) {}
 
-    exportConfig() {
-        if (this.node.node_type === 'vpcs') {
-            this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
-                this.downloadByHtmlTag(config);
-            });
-        } else {
-            const dialogRef = this.dialog.open(ConfigDialogComponent, {
-                width: '500px',
-                autoFocus: false,
-                disableClose: true
-            });
-            let instance = dialogRef.componentInstance;
-            dialogRef.afterClosed().subscribe((configType: string) => {
-                if (configType === 'startup-config') {
-                    this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
-                        this.downloadByHtmlTag(config);
-                    });
-                } else if (configType === 'private-config') {
-                    this.nodeService.getPrivateConfiguration(this.server, this.node).subscribe((config: any) => {
-                        this.downloadByHtmlTag(config);
-                    });
-                }
-            });
+  exportConfig() {
+    if (this.node.node_type === 'vpcs') {
+      this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
+        this.downloadByHtmlTag(config);
+      });
+    } else {
+      const dialogRef = this.dialog.open(ConfigDialogComponent, {
+        width: '500px',
+        autoFocus: false,
+        disableClose: true,
+      });
+      let instance = dialogRef.componentInstance;
+      dialogRef.afterClosed().subscribe((configType: string) => {
+        if (configType === 'startup-config') {
+          this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
+            this.downloadByHtmlTag(config);
+          });
+        } else if (configType === 'private-config') {
+          this.nodeService.getPrivateConfiguration(this.server, this.node).subscribe((config: any) => {
+            this.downloadByHtmlTag(config);
+          });
         }
+      });
+    }
+  }
+
+  private downloadByHtmlTag(config: string) {
+    const element = document.createElement('a');
+    const fileType = 'text/plain';
+    element.setAttribute('href', `data:${fileType};charset=utf-8,${encodeURIComponent(config)}`);
+    if (this.node.node_type === 'vpcs') {
+      element.setAttribute('download', `${this.node.name}_startup.vpc`);
+    } else if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
+      element.setAttribute('download', `${this.node.name}_startup.cfg`);
     }
 
-    private downloadByHtmlTag(config: string) {
-        const element = document.createElement('a');
-        const fileType = 'text/plain';
-        element.setAttribute('href', `data:${fileType};charset=utf-8,${encodeURIComponent(config)}`);
-        if (this.node.node_type === 'vpcs') {
-            element.setAttribute('download', `${this.node.name}_startup.vpc`);
-        } else if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
-            element.setAttribute('download', `${this.node.name}_startup.cfg`);
-        }
-
-        var event = new MouseEvent("click");
-        element.dispatchEvent(event);
-    }
+    var event = new MouseEvent('click');
+    element.dispatchEvent(event);
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.html b/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.html
index 229bda01..5a6c0c30 100644
--- a/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="openConsole()">
-    <mat-icon>http</mat-icon>
-    <span>Web console in new tab</span>
+  <mat-icon>http</mat-icon>
+  <span>Web console in new tab</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.ts b/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.ts
index fdcdde6e..9d163f4a 100644
--- a/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.ts
@@ -4,27 +4,23 @@ import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { Router } from '@angular/router';
 
-
 @Component({
   selector: 'app-http-console-new-tab-action',
-  templateUrl: './http-console-new-tab-action.component.html'
+  templateUrl: './http-console-new-tab-action.component.html',
 })
 export class HttpConsoleNewTabActionComponent implements OnInit {
   @Input() server: Server;
   @Input() nodes: Node[];
 
-  constructor(
-    private toasterService: ToasterService,
-    private router: Router
-  ) { }
+  constructor(private toasterService: ToasterService, private router: Router) {}
 
   ngOnInit() {}
 
   openConsole() {
-    this.nodes.forEach(n => {
+    this.nodes.forEach((n) => {
       if (n.status === 'started') {
         let url = this.router.url.split('/');
-        let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${n.node_id}`
+        let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${n.node_id}`;
         window.open(urlString);
       } else {
         this.toasterService.error('To open console please start the node');
diff --git a/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.html b/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.html
index 55f6dcce..e8ca3aad 100644
--- a/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="openConsole()">
-    <mat-icon>http</mat-icon>
-    <span>Web console</span>
+  <mat-icon>http</mat-icon>
+  <span>Web console</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts b/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts
index 33c23941..7ae9a6cd 100644
--- a/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/http-console/http-console-action.component.ts
@@ -5,10 +5,9 @@ import { NodeConsoleService } from '../../../../../services/nodeConsole.service'
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MapSettingsService } from '../../../../../services/mapsettings.service';
 
-
 @Component({
   selector: 'app-http-console-action',
-  templateUrl: './http-console-action.component.html'
+  templateUrl: './http-console-action.component.html',
 })
 export class HttpConsoleActionComponent implements OnInit {
   @Input() server: Server;
@@ -18,12 +17,12 @@ export class HttpConsoleActionComponent implements OnInit {
     private consoleService: NodeConsoleService,
     private toasterService: ToasterService,
     private mapSettingsService: MapSettingsService
-  ) { }
+  ) {}
 
   ngOnInit() {}
 
   openConsole() {
-    this.nodes.forEach(n => {
+    this.nodes.forEach((n) => {
       if (n.status === 'started') {
         this.mapSettingsService.logConsoleSubject.next(true);
         this.consoleService.openConsoleForNode(n);
diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html
index 6325dabc..76bef675 100644
--- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.html
@@ -1,10 +1,5 @@
-<input
-    type="file"
-    accept=".txt, .vpc"
-    class="non-visible"
-    #fileInput
-    (change)="importConfig($event)"/>
+<input type="file" accept=".txt, .vpc" class="non-visible" #fileInput (change)="importConfig($event)" />
 <button mat-menu-item (click)="triggerClick()">
-    <mat-icon>call_received</mat-icon>
-    <span>Import config</span>
+  <mat-icon>call_received</mat-icon>
+  <span>Import config</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss
index 0f602793..f4d855b4 100644
--- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss
+++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.scss
@@ -1,3 +1,3 @@
 .non-visible {
-    display: none;
+  display: none;
 }
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 59866b58..8ef5b9c1 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
@@ -7,59 +7,55 @@ import { MatDialog } from '@angular/material/dialog';
 import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component';
 
 @Component({
-    selector: 'app-import-config-action',
-    templateUrl: './import-config-action.component.html',
-    styleUrls: ['./import-config-action.component.scss']
+  selector: 'app-import-config-action',
+  templateUrl: './import-config-action.component.html',
+  styleUrls: ['./import-config-action.component.scss'],
 })
 export class ImportConfigActionComponent {
-    @Input() server: Server;
-    @Input() node: Node;
-    @ViewChild('fileInput') fileInput: ElementRef;
-    configType: string;
+  @Input() server: Server;
+  @Input() node: Node;
+  @ViewChild('fileInput') fileInput: ElementRef;
+  configType: string;
 
-    constructor(
-        private nodeService: NodeService,
-        private toasterService: ToasterService,
-        private dialog: MatDialog
-    ) {}
+  constructor(private nodeService: NodeService, private toasterService: ToasterService, private dialog: MatDialog) {}
 
-    triggerClick() {
-        if (this.node.node_type !== 'vpcs') {
-            const dialogRef = this.dialog.open(ConfigDialogComponent, {
-                width: '500px',
-                autoFocus: false,
-                disableClose: true
-            });
-            let instance = dialogRef.componentInstance;
-            dialogRef.afterClosed().subscribe((configType: string) => {
-                this.configType = configType;
-                this.fileInput.nativeElement.click();
-            });
-        } else {
-            this.configType = 'startup-config';
-            this.fileInput.nativeElement.click();
-        }
+  triggerClick() {
+    if (this.node.node_type !== 'vpcs') {
+      const dialogRef = this.dialog.open(ConfigDialogComponent, {
+        width: '500px',
+        autoFocus: false,
+        disableClose: true,
+      });
+      let instance = dialogRef.componentInstance;
+      dialogRef.afterClosed().subscribe((configType: string) => {
+        this.configType = configType;
+        this.fileInput.nativeElement.click();
+      });
+    } else {
+      this.configType = 'startup-config';
+      this.fileInput.nativeElement.click();
     }
+  }
 
-    importConfig(event) {
-        let file: File = event.target.files[0];
-        let fileReader: FileReader = new FileReader();
-        fileReader.onload = (e) => {
-            let content: string | ArrayBuffer = fileReader.result;
-            if (typeof content !== 'string'){
-                content = content.toString();
-            }
+  importConfig(event) {
+    let file: File = event.target.files[0];
+    let fileReader: FileReader = new FileReader();
+    fileReader.onload = (e) => {
+      let content: string | ArrayBuffer = fileReader.result;
+      if (typeof content !== 'string') {
+        content = content.toString();
+      }
 
-            if (this.configType === 'startup-config') {
-                this.nodeService.saveConfiguration(this.server, this.node, content).subscribe(() => {
-                    this.toasterService.success(`Configuration for node ${this.node.name} imported.`);
-                });
-            } else if (this.configType === 'private-config') {
-                this.nodeService.savePrivateConfiguration(this.server, this.node, content).subscribe(() => {
-                    this.toasterService.success(`Configuration for node ${this.node.name} imported.`);
-                });
-            }
-        };
-        fileReader.readAsText(file);
-    }
+      if (this.configType === 'startup-config') {
+        this.nodeService.saveConfiguration(this.server, this.node, content).subscribe(() => {
+          this.toasterService.success(`Configuration for node ${this.node.name} imported.`);
+        });
+      } else if (this.configType === 'private-config') {
+        this.nodeService.savePrivateConfiguration(this.server, this.node, content).subscribe(() => {
+          this.toasterService.success(`Configuration for node ${this.node.name} imported.`);
+        });
+      }
+    };
+    fileReader.readAsText(file);
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.html b/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.html
index 451af511..25edc3c3 100644
--- a/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="lock()">
-    <mat-icon>lock</mat-icon>
-    <span>{{command}}</span>
+  <mat-icon>lock</mat-icon>
+  <span>{{ command }}</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.ts b/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.ts
index 8557917e..f1165758 100644
--- a/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/lock-action/lock-action.component.ts
@@ -9,40 +9,44 @@ import { DrawingService } from '../../../../../services/drawing.service';
 
 @Component({
   selector: 'app-lock-action',
-  templateUrl: './lock-action.component.html'
+  templateUrl: './lock-action.component.html',
 })
 export class LockActionComponent implements OnChanges {
-    @Input() server: Server;
-    @Input() nodes: Node[];
-    @Input() drawings: Drawing[];
-    command: string;
+  @Input() server: Server;
+  @Input() nodes: Node[];
+  @Input() drawings: Drawing[];
+  command: string;
 
-    constructor(
-        private nodesDataSource: NodesDataSource,
-        private drawingsDataSource: DrawingsDataSource,
-        private nodeService: NodeService,
-        private drawingService: DrawingService
-    ) {}
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private drawingsDataSource: DrawingsDataSource,
+    private nodeService: NodeService,
+    private drawingService: DrawingService
+  ) {}
 
-    ngOnChanges() {
-        if (this.nodes.length === 1 && this.drawings.length === 0) {
-            this.command = this.nodes[0].locked ? 'Unlock item' : 'Lock item';
-        } else if (this.nodes.length === 0 && this.drawings.length === 1) {
-            this.command = this.drawings[0].locked ? 'Unlock item' : 'Lock item';
-        } else {
-            this.command = 'Lock/unlock items';
-        }
+  ngOnChanges() {
+    if (this.nodes.length === 1 && this.drawings.length === 0) {
+      this.command = this.nodes[0].locked ? 'Unlock item' : 'Lock item';
+    } else if (this.nodes.length === 0 && this.drawings.length === 1) {
+      this.command = this.drawings[0].locked ? 'Unlock item' : 'Lock item';
+    } else {
+      this.command = 'Lock/unlock items';
     }
+  }
 
-    lock() {
-        this.nodes.forEach((node) => {
-            node.locked = !node.locked;
-            this.nodeService.updateNode(this.server, node).subscribe((node) => { this.nodesDataSource.update(node) });
-        });
+  lock() {
+    this.nodes.forEach((node) => {
+      node.locked = !node.locked;
+      this.nodeService.updateNode(this.server, node).subscribe((node) => {
+        this.nodesDataSource.update(node);
+      });
+    });
 
-        this.drawings.forEach((drawing) => {
-            drawing.locked = ! drawing.locked;
-            this.drawingService.update(this.server, drawing).subscribe((drawing) => { this.drawingsDataSource.update(drawing) });
-        });
-    }
+    this.drawings.forEach((drawing) => {
+      drawing.locked = !drawing.locked;
+      this.drawingService.update(this.server, drawing).subscribe((drawing) => {
+        this.drawingsDataSource.update(drawing);
+      });
+    });
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts
index 434844d4..6230adcf 100644
--- a/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts
@@ -8,7 +8,7 @@ describe('MoveLayerDownActionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MoveLayerDownActionComponent]
+      declarations: [MoveLayerDownActionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts b/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts
index 9453629c..e51708a1 100644
--- a/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts
@@ -9,7 +9,7 @@ import { DrawingService } from '../../../../../services/drawing.service';
 
 @Component({
   selector: 'app-move-layer-down-action',
-  templateUrl: './move-layer-down-action.component.html'
+  templateUrl: './move-layer-down-action.component.html',
 })
 export class MoveLayerDownActionComponent implements OnInit {
   @Input() server: Server;
diff --git a/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts
index 26111dd4..c79974a6 100644
--- a/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts
@@ -8,7 +8,7 @@ describe('MoveLayerUpActionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MoveLayerUpActionComponent]
+      declarations: [MoveLayerUpActionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts b/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts
index 587cfc9b..353615e2 100644
--- a/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts
@@ -9,7 +9,7 @@ import { DrawingService } from '../../../../../services/drawing.service';
 
 @Component({
   selector: 'app-move-layer-up-action',
-  templateUrl: './move-layer-up-action.component.html'
+  templateUrl: './move-layer-up-action.component.html',
 })
 export class MoveLayerUpActionComponent implements OnInit {
   @Input() server: Server;
diff --git a/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.html b/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.html
index e3f6f301..a7a10114 100644
--- a/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="open()">
-    <mat-icon>tab</mat-icon>
-    <span>Open file explorer</span>
+  <mat-icon>tab</mat-icon>
+  <span>Open file explorer</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts b/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts
index 563d8a5b..27f33907 100644
--- a/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts
@@ -3,18 +3,15 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { ElectronService } from 'ngx-electron';
 
-
 @Component({
   selector: 'app-open-file-explorer-action',
-  templateUrl: './open-file-explorer-action.component.html'
+  templateUrl: './open-file-explorer-action.component.html',
 })
 export class OpenFileExplorerActionComponent implements OnInit {
   @Input() server: Server;
   @Input() node: Node;
 
-  constructor(
-    private electronService: ElectronService
-  ) {}
+  constructor(private electronService: ElectronService) {}
 
   ngOnInit() {}
 
diff --git a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html
index ea808178..3b3a7f19 100644
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="openPacketFilters()">
-    <mat-icon>filter_list</mat-icon>
-    <span>Packet filters</span>
+  <mat-icon>filter_list</mat-icon>
+  <span>Packet filters</span>
 </button>
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 f7df9c58..b3aab17f 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
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input } from '@angular/core';
 import { Link } from '../../../../../models/link';
 import { Server } from '../../../../../models/server';
 import { Project } from '../../../../../models/project';
@@ -6,26 +6,26 @@ import { MatDialog } from '@angular/material/dialog';
 import { PacketFiltersDialogComponent } from '../../../packet-capturing/packet-filters/packet-filters.component';
 
 @Component({
-    selector: 'app-packet-filters-action',
-    templateUrl: './packet-filters-action.component.html'
+  selector: 'app-packet-filters-action',
+  templateUrl: './packet-filters-action.component.html',
 })
 export class PacketFiltersActionComponent {
-    @Input() server: Server;
-    @Input() project: Project;
-    @Input() link: Link;
+  @Input() server: Server;
+  @Input() project: Project;
+  @Input() link: Link;
 
-    constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog) {}
 
-    openPacketFilters() {
-        const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
-            width: '900px',
-            height: '400px',
-            autoFocus: false,
-            disableClose: true
-        });
-        let instance = dialogRef.componentInstance;
-        instance.server = this.server;
-        instance.project = this.project;
-        instance.link = this.link;
-    }
+  openPacketFilters() {
+    const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
+      width: '900px',
+      height: '400px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+    instance.link = this.link;
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.html b/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.html
index f8884c90..c7f16985 100644
--- a/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="filteredNodes.length > 0" (click)="reloadNodes()">
-    <mat-icon>refresh</mat-icon>
-    <span>Reload</span>
+  <mat-icon>refresh</mat-icon>
+  <span>Reload</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.ts b/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.ts
index 7cee91cc..df5a6a15 100644
--- a/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/reload-node-action/reload-node-action.component.ts
@@ -5,7 +5,7 @@ import { Node } from '../../../../../cartography/models/node';
 
 @Component({
   selector: 'app-reload-node-action',
-  templateUrl: './reload-node-action.component.html'
+  templateUrl: './reload-node-action.component.html',
 })
 export class ReloadNodeActionComponent implements OnInit {
   @Input() server: Server;
@@ -17,15 +17,20 @@ export class ReloadNodeActionComponent implements OnInit {
 
   ngOnInit() {
     this.nodes.forEach((node) => {
-        if (node.node_type === 'vpcs' || node.node_type === 'qemu' || node.node_type === 'virtualbox' || node.node_type === 'vmware') {
-          this.filteredNodes.push(node);
-        }
+      if (
+        node.node_type === 'vpcs' ||
+        node.node_type === 'qemu' ||
+        node.node_type === 'virtualbox' ||
+        node.node_type === 'vmware'
+      ) {
+        this.filteredNodes.push(node);
+      }
     });
   }
 
   reloadNodes() {
     this.filteredNodes.forEach((node) => {
-        this.nodeService.reload(this.server, node).subscribe((n: Node) => {});
+      this.nodeService.reload(this.server, node).subscribe((n: Node) => {});
     });
   }
 }
diff --git a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html
index ffc7be94..f191112f 100644
--- a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="link.suspend" (click)="resumeLink()">
-    <mat-icon>play_arrow</mat-icon>
-    <span>Resume</span>
+  <mat-icon>play_arrow</mat-icon>
+  <span>Resume</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts
index 9cbb48bb..938f36d8 100644
--- a/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/resume-link-action/resume-link-action.component.ts
@@ -5,18 +5,16 @@ import { LinkService } from '../../../../../services/link.service';
 
 @Component({
   selector: 'app-resume-link-action',
-  templateUrl: './resume-link-action.component.html'
+  templateUrl: './resume-link-action.component.html',
 })
 export class ResumeLinkActionComponent {
-    @Input() server: Server;
-    @Input() link: Link;
+  @Input() server: Server;
+  @Input() link: Link;
 
-    constructor(
-        private linkService: LinkService
-    ) {}
+  constructor(private linkService: LinkService) {}
 
-    resumeLink() {
-        this.link.suspend = false;
-        this.linkService.updateLink(this.server, this.link).subscribe(() => {});
-    }
+  resumeLink() {
+    this.link.suspend = false;
+    this.linkService.updateLink(this.server, this.link).subscribe(() => {});
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html
index b92a0071..0f2ec136 100644
--- a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item (click)="showNode()">
-    <mat-icon>info</mat-icon>
-    <span>Show node information</span>
+  <mat-icon>info</mat-icon>
+  <span>Show node information</span>
 </button>
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 58eb8181..a91b0cf5 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
@@ -6,20 +6,20 @@ import { Server } from '../../../../../models/server';
 
 @Component({
   selector: 'app-show-node-action',
-  templateUrl: './show-node-action.component.html'
+  templateUrl: './show-node-action.component.html',
 })
 export class ShowNodeActionComponent {
   @Input() node: Node;
-  @Input() server: Server
+  @Input() server: Server;
 
   constructor(private dialog: MatDialog) {}
 
   showNode() {
     const dialogRef = this.dialog.open(InfoDialogComponent, {
-        width: '600px',
-        maxHeight: '600px',
-        autoFocus: false,
-        disableClose: true
+      width: '600px',
+      maxHeight: '600px',
+      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-on-started-link/start-capture-on-started-link.component.html b/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.html
index 532b38ab..a755300c 100644
--- a/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.html
+++ b/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="link.capturing" (click)="startCapture()">
-    <mat-icon>search</mat-icon>
-    <span>Start Wireshark</span>
+  <mat-icon>search</mat-icon>
+  <span>Start Wireshark</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.ts b/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.ts
index b7fcd6a3..dc4c330c 100644
--- a/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component.ts
@@ -6,16 +6,14 @@ import { PacketCaptureService } from '../../../../../services/packet-capture.ser
 
 @Component({
   selector: 'app-start-capture-on-started-link-action',
-  templateUrl: './start-capture-on-started-link.component.html'
+  templateUrl: './start-capture-on-started-link.component.html',
 })
 export class StartCaptureOnStartedLinkActionComponent {
   @Input() server: Server;
   @Input() project: Project;
   @Input() link: Link;
 
-  constructor(
-    private packetCaptureService: PacketCaptureService
-  ) {}
+  constructor(private packetCaptureService: PacketCaptureService) {}
 
   startCapture() {
     var splittedFileName = this.link.capture_file_name.split('.');
diff --git a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html
index 551336cf..1fb1d1b4 100644
--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="!link.capturing" (click)="startCapture()">
-    <mat-icon>loupe</mat-icon>
-    <span>Start capture</span>
+  <mat-icon>loupe</mat-icon>
+  <span>Start capture</span>
 </button>
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 678a81e7..2ef8abb8 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
@@ -7,7 +7,7 @@ import { Project } from '../../../../../models/project';
 
 @Component({
   selector: 'app-start-capture-action',
-  templateUrl: './start-capture-action.component.html'
+  templateUrl: './start-capture-action.component.html',
 })
 export class StartCaptureActionComponent {
   @Input() server: Server;
@@ -18,9 +18,9 @@ export class StartCaptureActionComponent {
 
   startCapture() {
     const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
-        width: '400px',
-        autoFocus: false,
-        disableClose: true
+      width: '400px',
+      autoFocus: false,
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.spec.ts
index 917075b1..158fdbd2 100644
--- a/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.spec.ts
@@ -8,7 +8,7 @@ describe('StartNodeActionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [StartNodeActionComponent]
+      declarations: [StartNodeActionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.ts b/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.ts
index 3bb39a6d..b19a2a05 100644
--- a/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-node-action/start-node-action.component.ts
@@ -6,23 +6,19 @@ import { ToasterService } from '../../../../../services/toaster.service';
 
 @Component({
   selector: 'app-start-node-action',
-  templateUrl: './start-node-action.component.html'
+  templateUrl: './start-node-action.component.html',
 })
 export class StartNodeActionComponent implements OnInit, OnChanges {
   @Input() server: Server;
   @Input() nodes: Node[];
   isNodeWithStoppedStatus: boolean;
 
-  constructor(
-    private nodeService: NodeService,
-    private toasterService: ToasterService
-  ) {}
+  constructor(private nodeService: NodeService, private toasterService: ToasterService) {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ngOnChanges(changes) {
-    if(changes.nodes) {
+    if (changes.nodes) {
       this.isNodeWithStoppedStatus = false;
       this.nodes.forEach((node) => {
         if (node.status === 'stopped' || node.status === 'suspended') {
@@ -36,8 +32,8 @@ export class StartNodeActionComponent implements OnInit, OnChanges {
     this.nodes.forEach((node) => {
       this.nodeService.start(this.server, node).subscribe(
         (n: Node) => {},
-        error => {
-          this.toasterService.error(error.error.message)
+        (error) => {
+          this.toasterService.error(error.error.message);
         }
       );
     });
diff --git a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html
index 68dd9851..aed02cdd 100644
--- a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="link.capturing" (click)="stopCapture()">
-    <mat-icon>pause_circle_filled</mat-icon>
-    <span>Stop capture</span>
+  <mat-icon>pause_circle_filled</mat-icon>
+  <span>Stop capture</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts
index 3dfcaeab..9335e30c 100644
--- a/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/stop-capture/stop-capture-action.component.ts
@@ -5,15 +5,13 @@ import { LinkService } from '../../../../../services/link.service';
 
 @Component({
   selector: 'app-stop-capture-action',
-  templateUrl: './stop-capture-action.component.html'
+  templateUrl: './stop-capture-action.component.html',
 })
 export class StopCaptureActionComponent {
   @Input() server: Server;
   @Input() link: Link;
 
-  constructor(
-      private linkService: LinkService
-  ) {}
+  constructor(private linkService: LinkService) {}
 
   stopCapture() {
     this.linkService.stopCaptureOnLink(this.server, this.link).subscribe(() => {});
diff --git a/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.spec.ts b/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.spec.ts
index c49c6157..4cd2300c 100644
--- a/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.spec.ts
+++ b/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.spec.ts
@@ -8,7 +8,7 @@ describe('StopNodeActionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [StopNodeActionComponent]
+      declarations: [StopNodeActionComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.ts b/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.ts
index 2d7fcc81..68479b36 100644
--- a/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/stop-node-action/stop-node-action.component.ts
@@ -5,7 +5,7 @@ import { Node } from '../../../../../cartography/models/node';
 
 @Component({
   selector: 'app-stop-node-action',
-  templateUrl: './stop-node-action.component.html'
+  templateUrl: './stop-node-action.component.html',
 })
 export class StopNodeActionComponent implements OnInit, OnChanges {
   @Input() server: Server;
@@ -14,11 +14,10 @@ export class StopNodeActionComponent implements OnInit, OnChanges {
 
   constructor(private nodeService: NodeService) {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ngOnChanges(changes) {
-    if(changes.nodes) {
+    if (changes.nodes) {
       this.isNodeWithStartedStatus = false;
       this.nodes.forEach((node) => {
         if (node.status === 'started') {
diff --git a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html
index c503dadb..7494d0dc 100644
--- a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="!link.suspend" (click)="suspendLink()">
-    <mat-icon>pause</mat-icon>
-    <span>Suspend</span>
+  <mat-icon>pause</mat-icon>
+  <span>Suspend</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts
index f07dc592..8a60d2c3 100644
--- a/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/suspend-link/suspend-link-action.component.ts
@@ -5,18 +5,16 @@ import { LinkService } from '../../../../../services/link.service';
 
 @Component({
   selector: 'app-suspend-link-action',
-  templateUrl: './suspend-link-action.component.html'
+  templateUrl: './suspend-link-action.component.html',
 })
 export class SuspendLinkActionComponent {
-    @Input() server: Server;
-    @Input() link: Link;
+  @Input() server: Server;
+  @Input() link: Link;
 
-    constructor(
-        private linkService: LinkService
-    ) {}
+  constructor(private linkService: LinkService) {}
 
-    suspendLink() {
-        this.link.suspend = true;
-        this.linkService.updateLink(this.server, this.link).subscribe(() => {});
-    }
+  suspendLink() {
+    this.link.suspend = true;
+    this.linkService.updateLink(this.server, this.link).subscribe(() => {});
+  }
 }
diff --git a/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.html b/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.html
index de0b01c3..0e1e5861 100644
--- a/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.html
+++ b/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.html
@@ -1,4 +1,4 @@
 <button mat-menu-item *ngIf="isNodeWithStartedStatus" (click)="suspendNodes()">
-    <mat-icon>pause</mat-icon>
-    <span>Suspend</span>
+  <mat-icon>pause</mat-icon>
+  <span>Suspend</span>
 </button>
diff --git a/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.ts b/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.ts
index 17688b62..a42c2d00 100644
--- a/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component.ts
@@ -5,7 +5,7 @@ import { Node } from '../../../../../cartography/models/node';
 
 @Component({
   selector: 'app-suspend-node-action',
-  templateUrl: './suspend-node-action.component.html'
+  templateUrl: './suspend-node-action.component.html',
 })
 export class SuspendNodeActionComponent implements OnInit, OnChanges {
   @Input() server: Server;
@@ -14,11 +14,10 @@ export class SuspendNodeActionComponent implements OnInit, OnChanges {
 
   constructor(private nodeService: NodeService) {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ngOnChanges(changes) {
-    if(changes.nodes) {
+    if (changes.nodes) {
       this.isNodeWithStartedStatus = false;
       this.nodes.forEach((node) => {
         if (node.status === 'started') {
diff --git a/src/app/components/project-map/context-menu/context-menu.component.html b/src/app/components/project-map/context-menu/context-menu.component.html
index d8563c6b..9dc61b2f 100644
--- a/src/app/components/project-map/context-menu/context-menu.component.html
+++ b/src/app/components/project-map/context-menu/context-menu.component.html
@@ -1,27 +1,19 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
   <span [matMenuTriggerFor]="contextMenu"></span>
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
-    <app-show-node-action *ngIf="nodes.length===1"
-      [server]="server"
-      [node]="nodes[0]"
-    ></app-show-node-action>
-    <app-config-node-action *ngIf="nodes.length===1"
-      [server]="server"
-      [node]="nodes[0]"
-    ></app-config-node-action>
+    <app-show-node-action *ngIf="nodes.length === 1" [server]="server" [node]="nodes[0]"></app-show-node-action>
+    <app-config-node-action *ngIf="nodes.length === 1" [server]="server" [node]="nodes[0]"></app-config-node-action>
     <app-start-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-suspend-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-suspend-node-action>
     <app-stop-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-stop-node-action>
-    <app-reload-node-action
-      *ngIf="nodes.length" [server]="server" [nodes]="nodes"
-    ></app-reload-node-action>
+    <app-reload-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-reload-node-action>
     <app-http-console-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1"
       [server]="server"
       [nodes]="nodes"
     ></app-http-console-action>
     <app-http-console-new-tab-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1"
       [server]="server"
       [nodes]="nodes"
     ></app-http-console-new-tab-action>
@@ -31,41 +23,45 @@
       [nodes]="nodes"
     ></app-console-device-action>
     <app-console-device-action-browser
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1 && !isElectronApp"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1 && !isElectronApp"
       [server]="server"
       [node]="nodes[0]"
     ></app-console-device-action-browser>
     <app-open-file-explorer-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1 && isElectronApp"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1 && isElectronApp"
       [server]="server"
       [node]="nodes[0]"
     ></app-open-file-explorer-action>
     <app-change-hostname-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1"
       [server]="server"
       [node]="nodes[0]"
     ></app-change-hostname-action>
     <app-change-symbol-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length === 1"
       [server]="server"
       [node]="nodes[0]"
     ></app-change-symbol-action>
-    <app-duplicate-action *ngIf="drawings.length>0 || nodes.length>0"
+    <app-duplicate-action
+      *ngIf="drawings.length > 0 || nodes.length > 0"
       [server]="server"
       [project]="project"
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-duplicate-action>
-    <app-edit-style-action *ngIf="!projectService.isReadOnly(project) && drawings.length===1 && !hasTextCapabilities"
+    <app-edit-style-action
+      *ngIf="!projectService.isReadOnly(project) && drawings.length === 1 && !hasTextCapabilities"
       [server]="server"
       [project]="project"
       [drawing]="drawings[0]"
     ></app-edit-style-action>
     <app-edit-text-action
-      *ngIf="!projectService.isReadOnly(project) &&
-        (drawings.length===1 && hasTextCapabilities && labels.length===0 && linkNodes.length===0 ||
-        labels.length===1 && linkNodes.length===0 && drawings.length===0 ||
-        linkNodes.length===1 && labels.length===0 && drawings.length===0)"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        ((drawings.length === 1 && hasTextCapabilities && labels.length === 0 && linkNodes.length === 0) ||
+          (labels.length === 1 && linkNodes.length === 0 && drawings.length === 0) ||
+          (linkNodes.length === 1 && labels.length === 0 && drawings.length === 0))
+      "
       [server]="server"
       [project]="project"
       [drawing]="drawings[0]"
@@ -74,16 +70,25 @@
       [link]="links[0]"
       [linkNode]="linkNodes[0]"
     ></app-edit-text-action>
-    <app-edit-config-action *ngIf="nodes.length===1 && nodes[0].node_type==='vpcs'"
+    <app-edit-config-action
+      *ngIf="nodes.length === 1 && nodes[0].node_type === 'vpcs'"
       [server]="server"
       [project]="project"
       [node]="nodes[0]"
     ></app-edit-config-action>
-    <app-export-config-action *ngIf="nodes.length===1 && (nodes[0].node_type==='vpcs' || nodes[0].node_type==='iou' || nodes[0].node_type==='dynamips')"
+    <app-export-config-action
+      *ngIf="
+        nodes.length === 1 &&
+        (nodes[0].node_type === 'vpcs' || nodes[0].node_type === 'iou' || nodes[0].node_type === 'dynamips')
+      "
       [server]="server"
       [node]="nodes[0]"
     ></app-export-config-action>
-    <app-import-config-action *ngIf="nodes.length===1 && (nodes[0].node_type==='vpcs' || nodes[0].node_type==='iou' || nodes[0].node_type==='dynamips')"
+    <app-import-config-action
+      *ngIf="
+        nodes.length === 1 &&
+        (nodes[0].node_type === 'vpcs' || nodes[0].node_type === 'iou' || nodes[0].node_type === 'dynamips')
+      "
       [server]="server"
       [node]="nodes[0]"
     ></app-import-config-action>
@@ -106,61 +111,92 @@
       [drawings]="drawings"
     ></app-bring-to-front-action>
     <app-start-capture-action
-      *ngIf="!projectService.isReadOnly(project)
-      && drawings.length===0 && nodes.length===0 && links.length===1"
+      *ngIf="!projectService.isReadOnly(project) && drawings.length === 0 && nodes.length === 0 && links.length === 1"
       [server]="server"
       [project]="project"
       [link]="links[0]"
     ></app-start-capture-action>
     <app-stop-capture-action
-      *ngIf="!projectService.isReadOnly(project)
-      && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [link]="links[0]"
     ></app-stop-capture-action>
     <app-start-capture-on-started-link-action
-      *ngIf="!projectService.isReadOnly(project)
-      && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [project]="project"
       [link]="links[0]"
     ></app-start-capture-on-started-link-action>
     <app-packet-filters-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [project]="project"
       [link]="links[0]"
     ></app-packet-filters-action>
     <app-resume-link-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [link]="links[0]"
     ></app-resume-link-action>
     <app-suspend-link-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [link]="links[0]"
     ></app-suspend-link-action>
     <app-lock-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length>0 || nodes.length>0)"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length > 0 || nodes.length > 0)"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-lock-action>
     <app-delete-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length>0 || nodes.length>0 || links.length>0) && linkNodes.length === 0"
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        (drawings.length > 0 || nodes.length > 0 || links.length > 0) &&
+        linkNodes.length === 0
+      "
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
       [links]="links"
     ></app-delete-action>
     <app-align-horizontally-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length>1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length > 1"
       [server]="server"
       [nodes]="nodes"
     ></app-align-horizontally-action>
     <app-align-vertically-action
-      *ngIf="!projectService.isReadOnly(project) && nodes.length>1"
+      *ngIf="!projectService.isReadOnly(project) && nodes.length > 1"
       [server]="server"
       [nodes]="nodes"
     ></app-align-vertically-action>
diff --git a/src/app/components/project-map/context-menu/context-menu.component.scss b/src/app/components/project-map/context-menu/context-menu.component.scss
index 1226043f..eafff99b 100644
--- a/src/app/components/project-map/context-menu/context-menu.component.scss
+++ b/src/app/components/project-map/context-menu/context-menu.component.scss
@@ -3,6 +3,14 @@
   min-height: 0px;
 }
 
-.mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c7-5 context-menu-items mat-menu-after mat-menu-below ng-star-inserted mat-elevation-z4 {
-  min-height: 0px!important;
-}
\ No newline at end of file
+.mat-menu-panel
+  ng-trigger
+  ng-trigger-transformMenu
+  ng-tns-c7-5
+  context-menu-items
+  mat-menu-after
+  mat-menu-below
+  ng-star-inserted
+  mat-elevation-z4 {
+  min-height: 0px !important;
+}
diff --git a/src/app/components/project-map/context-menu/context-menu.component.spec.ts b/src/app/components/project-map/context-menu/context-menu.component.spec.ts
index 97fa46e0..776c6889 100644
--- a/src/app/components/project-map/context-menu/context-menu.component.spec.ts
+++ b/src/app/components/project-map/context-menu/context-menu.component.spec.ts
@@ -17,25 +17,25 @@ describe('ContextMenuComponent', () => {
 
   beforeEach(async(() => {
     const electronMock = {
-      isElectronApp: true
+      isElectronApp: true,
     };
 
     TestBed.configureTestingModule({
       imports: [MatMenuModule, BrowserModule],
       providers: [
-        { provide: ChangeDetectorRef }, 
+        { provide: ChangeDetectorRef },
         { provide: ProjectService, useClass: MockedProjectService },
-        { provide: ElectronService, useValue: electronMock}
+        { provide: ElectronService, useValue: electronMock },
       ],
       declarations: [ContextMenuComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ContextMenuComponent);
     component = fixture.componentInstance;
-    component.server = {location: 'local'} as Server;
+    component.server = { location: 'local' } as Server;
     fixture.detectChanges();
   });
 
diff --git a/src/app/components/project-map/context-menu/context-menu.component.ts b/src/app/components/project-map/context-menu/context-menu.component.ts
index 47d50764..52c51ec7 100644
--- a/src/app/components/project-map/context-menu/context-menu.component.ts
+++ b/src/app/components/project-map/context-menu/context-menu.component.ts
@@ -12,11 +12,10 @@ import { Link } from '../../../models/link';
 import { ElectronService } from 'ngx-electron';
 import { LinkNode } from '../../../models/link-node';
 
-
 @Component({
   selector: 'app-context-menu',
   templateUrl: './context-menu.component.html',
-  styleUrls: ['./context-menu.component.scss']
+  styleUrls: ['./context-menu.component.scss'],
 })
 export class ContextMenuComponent implements OnInit {
   @Input() project: Project;
@@ -96,7 +95,14 @@ export class ContextMenuComponent implements OnInit {
     this.contextMenu.openMenu();
   }
 
-  public openMenuForListOfElements(drawings: Drawing[], nodes: Node[], labels: Label[], links: Link[], top: number, left: number) {
+  public openMenuForListOfElements(
+    drawings: Drawing[],
+    nodes: Node[],
+    labels: Label[],
+    links: Link[],
+    top: number,
+    left: number
+  ) {
     this.resetCapabilities();
 
     this.drawings = drawings;
diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.html b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.html
index 86ff530d..7beb15f2 100644
--- a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.html
+++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.html
@@ -1,16 +1,12 @@
 <h1 mat-dialog-title>Choose configuration file</h1>
 
 <div class="modal-form-container">
-    <div class="container">
-        <div>
-            <button mat-raised-button color="primary" (click)="close('startup-config')">
-                startup configuration
-            </button>
-        </div>
-        <div>
-            <button mat-raised-button color="primary" (click)="close('private-config')">
-                private configuration
-            </button>
-        </div>
+  <div class="container">
+    <div>
+      <button mat-raised-button color="primary" (click)="close('startup-config')">startup configuration</button>
     </div>
+    <div>
+      <button mat-raised-button color="primary" (click)="close('private-config')">private configuration</button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss
index 655685b5..add91a3f 100644
--- a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss
+++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.scss
@@ -1,5 +1,5 @@
 .container {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts
index 9f7fcb0a..57a62646 100644
--- a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts
+++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts
@@ -2,16 +2,14 @@ import { Component, Input } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
-    selector: 'app-config-dialog',
-    templateUrl: './config-dialog.component.html',
-    styleUrls: ['./config-dialog.component.scss']
+  selector: 'app-config-dialog',
+  templateUrl: './config-dialog.component.html',
+  styleUrls: ['./config-dialog.component.scss'],
 })
 export class ConfigDialogComponent {
-    constructor(
-        public dialogRef: MatDialogRef<ConfigDialogComponent>,
-    ) {}
+  constructor(public dialogRef: MatDialogRef<ConfigDialogComponent>) {}
 
-    close(fileType: string) {
-        this.dialogRef.close(fileType);
-    }
+  close(fileType: string) {
+    this.dialogRef.close(fileType);
+  }
 }
diff --git a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts
index 5978e4d7..7fc7d466 100644
--- a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts
+++ b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts
@@ -8,7 +8,7 @@ describe('DrawLinkToolComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DrawLinkToolComponent]
+      declarations: [DrawLinkToolComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts
index 98e5c827..9d637fdf 100644
--- a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts
+++ b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts
@@ -15,7 +15,7 @@ import { NodeToMapNodeConverter } from '../../../cartography/converters/map/node
 @Component({
   selector: 'app-draw-link-tool',
   templateUrl: './draw-link-tool.component.html',
-  styleUrls: ['./draw-link-tool.component.scss']
+  styleUrls: ['./draw-link-tool.component.scss'],
 })
 export class DrawLinkToolComponent implements OnInit, OnDestroy {
   @Input() links: Link[];
@@ -33,7 +33,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.nodeClicked$ = this.nodesEventSource.clicked.subscribe(clickedEvent => {
+    this.nodeClicked$ = this.nodesEventSource.clicked.subscribe((clickedEvent) => {
       let node = this.mapNodeToNode.convert(clickedEvent.datum);
       this.nodeSelectInterfaceMenu.open(node, clickedEvent.y, clickedEvent.x);
     });
@@ -55,7 +55,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy {
     } else {
       this.drawingLineTool.start(node.x + node.width / 2, node.y + node.height / 2, {
         node: node,
-        port: port
+        port: port,
       });
     }
   }
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index f7605d69..be6c49aa 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@@ -3,23 +3,41 @@
 <div class="modal-form-container">
   <form [formGroup]="formGroup">
     <mat-form-field class="form-field">
-      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.fill">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Fill color"
+        type="color"
+        [(ngModel)]="element.fill"
+      />
     </mat-form-field>
 
     <mat-form-field class="form-field">
-      <input matInput [ngModelOptions]="{standalone: true}" placeholder="Border color" type="color" [(ngModel)]="element.stroke">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Border color"
+        type="color"
+        [(ngModel)]="element.stroke"
+      />
     </mat-form-field>
 
     <mat-form-field class="form-field">
-      <input matInput formControlName="borderWidth" placeholder="Border width" type="number">
+      <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
     </mat-form-field>
-      
+
     <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
-        <input matInput [ngModelOptions]="{standalone: true}" placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Border style"
+        type="text"
+        [(ngModel)]="element.stroke_dasharray"
+      />
     </mat-form-field>
 
     <mat-form-field class="form-field">
-        <input matInput formControlName="rotation" placeholder="Rotation" type="number">
+      <input matInput formControlName="rotation" placeholder="Rotation" type="number" />
     </mat-form-field>
   </form>
 </div>
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
index 36dbdb7d..9b03ab66 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
@@ -25,18 +25,18 @@ input:focus {
   outline: none;
 }
 
-input[type="color"] {
-	-webkit-appearance: none;
-	border: none;
+input[type='color'] {
+  -webkit-appearance: none;
+  border: none;
   height: 25px;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
 }
 
-input[type="color"]::-webkit-color-swatch {
-	border: none;
+input[type='color']::-webkit-color-swatch {
+  border: none;
 }
 
 .modal-form-container {
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index a49b059e..9ef0c3ff 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -18,7 +18,7 @@ import { RotationValidator } from '../../../../validators/rotation-validator';
 @Component({
   selector: 'app-style-editor',
   templateUrl: './style-editor.component.html',
-  styleUrls: ['./style-editor.component.scss']
+  styleUrls: ['./style-editor.component.scss'],
 })
 export class StyleEditorDialogComponent implements OnInit {
   server: Server;
@@ -40,7 +40,7 @@ export class StyleEditorDialogComponent implements OnInit {
   ) {
     this.formGroup = this.formBuilder.group({
       borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      rotation: new FormControl('', [Validators.required, rotationValidator.get])
+      rotation: new FormControl('', [Validators.required, rotationValidator.get]),
     });
   }
 
@@ -69,10 +69,9 @@ export class StyleEditorDialogComponent implements OnInit {
 
   onYesClick() {
     if (this.formGroup.valid) {
-
-      this.element.stroke_width =  this.formGroup.get('borderWidth').value;
+      this.element.stroke_width = this.formGroup.get('borderWidth').value;
       this.drawing.rotation = this.formGroup.get('rotation').value;
-      
+
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
         this.drawing.element.fill = this.element.fill;
         this.drawing.element.stroke = this.element.stroke;
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
index 82f44aa1..f3b7b65f 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
@@ -2,16 +2,22 @@
 
 <div class="modal-form-container">
   <mat-form-field class="form-field">
-    <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
+    <input
+      matInput
+      placeholder="Fill color"
+      type="color"
+      (ngModelChange)="changeTextColor($event)"
+      [(ngModel)]="element.fill"
+    />
   </mat-form-field>
 
   <form [formGroup]="formGroup">
     <mat-form-field class="form-field">
-      <input formControlName="rotation" matInput placeholder="Rotation" type="text">
+      <input formControlName="rotation" matInput placeholder="Rotation" type="text" />
     </mat-form-field>
   </form>
 
-  <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text" [readonly]="!isTextEditable"></textarea> 
+  <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text" [readonly]="!isTextEditable"></textarea>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
index cc5ede13..ebd8d15d 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
@@ -25,18 +25,18 @@ input:focus {
   outline: none;
 }
 
-input[type="color"] {
-	-webkit-appearance: none;
-	border: none;
+input[type='color'] {
+  -webkit-appearance: none;
+  border: none;
   height: 25px;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
 }
 
-input[type="color"]::-webkit-color-swatch {
-	border: none;
+input[type='color']::-webkit-color-swatch {
+  border: none;
 }
 
 .text {
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
index ec55e88b..d71f4adf 100644
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
@@ -25,10 +25,10 @@ import { FontFixer } from '../../../../cartography/helpers/font-fixer';
 @Component({
   selector: 'app-text-editor',
   templateUrl: './text-editor.component.html',
-  styleUrls: ['./text-editor.component.scss']
+  styleUrls: ['./text-editor.component.scss'],
 })
 export class TextEditorDialogComponent implements OnInit {
-  @ViewChild('textArea', {static: true}) textArea: ElementRef;
+  @ViewChild('textArea', { static: true }) textArea: ElementRef;
 
   server: Server;
   project: Project;
@@ -56,12 +56,12 @@ export class TextEditorDialogComponent implements OnInit {
     private formBuilder: FormBuilder,
     private toasterService: ToasterService,
     private rotationValidator: RotationValidator,
-    private fontFixer: FontFixer 
+    private fontFixer: FontFixer
   ) {}
 
   ngOnInit() {
     this.formGroup = this.formBuilder.group({
-      rotation: new FormControl('', [Validators.required, this.rotationValidator.get])
+      rotation: new FormControl('', [Validators.required, this.rotationValidator.get]),
     });
 
     if (this.label && this.node) {
@@ -70,19 +70,19 @@ export class TextEditorDialogComponent implements OnInit {
       this.element = this.getTextElementFromLabel();
     } else if (this.linkNode && this.link) {
       this.isTextEditable = true;
-      this.label = this.link.nodes.find(n => n.node_id === this.linkNode.node_id).label;
+      this.label = this.link.nodes.find((n) => n.node_id === this.linkNode.node_id).label;
       this.rotation = this.label.rotation.toString();
       this.element = this.getTextElementFromLabel();
     } else if (this.drawing) {
       this.isTextEditable = true;
       this.rotation = this.drawing.rotation.toString();
       this.element = this.drawing.element as TextElement;
-    };
+    }
 
     let font: Font = {
       font_family: this.element.font_family,
       font_size: this.element.font_size,
-      font_weight: this.element.font_weight
+      font_weight: this.element.font_weight,
     };
     font = this.fontFixer.fix(font);
 
@@ -93,28 +93,38 @@ export class TextEditorDialogComponent implements OnInit {
     this.renderer.setStyle(this.textArea.nativeElement, 'font-weight', font.font_weight);
   }
 
-  getTextElementFromLabel(): TextElement{
+  getTextElementFromLabel(): TextElement {
     var styleProperties: StyleProperty[] = [];
     var textElement = new TextElement();
 
-    for (var property of this.label.style.split(";")){
+    for (var property of this.label.style.split(';')) {
       styleProperties.push({
-        property: property.split(": ")[0],
-        value: property.split(": ")[1]
+        property: property.split(': ')[0],
+        value: property.split(': ')[1],
       });
     }
 
     textElement.text = this.label.text ? this.label.text : '';
-    textElement.font_family = styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter';
-    textElement.font_size = styleProperties.find(p => p.property === 'font-size') ? +styleProperties.find(p => p.property === 'font-size').value : 10.0;
-    textElement.font_weight = styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal';
-    textElement.fill = styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000';
-    textElement.fill_opacity = styleProperties.find(p => p.property === 'fill-opacity') ? +styleProperties.find(p => p.property === 'fill-opacity').value : 1.0;
+    textElement.font_family = styleProperties.find((p) => p.property === 'font-family')
+      ? styleProperties.find((p) => p.property === 'font-family').value
+      : 'TypeWriter';
+    textElement.font_size = styleProperties.find((p) => p.property === 'font-size')
+      ? +styleProperties.find((p) => p.property === 'font-size').value
+      : 10.0;
+    textElement.font_weight = styleProperties.find((p) => p.property === 'font-weight')
+      ? styleProperties.find((p) => p.property === 'font-weight').value
+      : 'normal';
+    textElement.fill = styleProperties.find((p) => p.property === 'fill')
+      ? styleProperties.find((p) => p.property === 'fill').value
+      : '#000000';
+    textElement.fill_opacity = styleProperties.find((p) => p.property === 'fill-opacity')
+      ? +styleProperties.find((p) => p.property === 'fill-opacity').value
+      : 1.0;
 
     return textElement;
   }
 
-  getStyleFromTextElement(): string{
+  getStyleFromTextElement(): string {
     return `font-family: ${this.element.font_family};font-size: ${this.element.font_size};font-weight: ${this.element.font_weight};fill: ${this.element.fill};fill-opacity: ${this.element.fill_opacity};`;
   }
 
@@ -129,7 +139,7 @@ export class TextEditorDialogComponent implements OnInit {
       if (this.label && this.node) {
         this.node.label.style = this.getStyleFromTextElement();
         this.node.label.rotation = +this.rotation;
-  
+
         this.nodeService.updateLabel(this.server, this.node, this.node.label).subscribe((node: Node) => {
           this.nodesDataSource.update(node);
           this.dialogRef.close();
@@ -138,7 +148,7 @@ export class TextEditorDialogComponent implements OnInit {
         this.label.style = this.getStyleFromTextElement();
         this.label.rotation = +this.rotation;
         this.label.text = this.element.text;
-  
+
         this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
           this.linksDataSource.update(link);
           this.dialogRef.close();
@@ -146,17 +156,17 @@ export class TextEditorDialogComponent implements OnInit {
       } else if (this.drawing) {
         this.drawing.rotation = +this.rotation;
         this.drawing.element = this.element;
-  
+
         let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
         mapDrawing.element = this.drawing.element;
-  
+
         this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
-  
+
         this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
           this.drawingsDataSource.update(serverDrawing);
           this.dialogRef.close();
         });
-      };
+      }
     } else {
       this.toasterService.error(`Entered data is incorrect`);
     }
diff --git a/src/app/components/project-map/help-dialog/help-dialog.component.html b/src/app/components/project-map/help-dialog/help-dialog.component.html
index 0f96d635..d24d0379 100644
--- a/src/app/components/project-map/help-dialog/help-dialog.component.html
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.html
@@ -1,16 +1,16 @@
-<h1 mat-dialog-title>{{title}}</h1>
+<h1 mat-dialog-title>{{ title }}</h1>
 
 <div class="modal-form-container">
-    <div class="message" *ngFor="let message of messages; let i = index">
-        <h6>
-            {{message.name}}
-        </h6>
-        <span class="description">
-            {{message.description}}
-        </span>
-    </div>
+  <div class="message" *ngFor="let message of messages; let i = index">
+    <h6>
+      {{ message.name }}
+    </h6>
+    <span class="description">
+      {{ message.description }}
+    </span>
+  </div>
 </div>
 
 <div mat-dialog-actions>
-    <button mat-button (click)="onCloseClick()" color="accent">Close</button>
+  <button mat-button (click)="onCloseClick()" color="accent">Close</button>
 </div>
diff --git a/src/app/components/project-map/help-dialog/help-dialog.component.scss b/src/app/components/project-map/help-dialog/help-dialog.component.scss
index f382464c..f6d3f38d 100644
--- a/src/app/components/project-map/help-dialog/help-dialog.component.scss
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.scss
@@ -1,7 +1,7 @@
 .message {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .description {
-    color: #b0bec5;
+  color: #b0bec5;
 }
diff --git a/src/app/components/project-map/help-dialog/help-dialog.component.ts b/src/app/components/project-map/help-dialog/help-dialog.component.ts
index 65d97ab1..c9728679 100644
--- a/src/app/components/project-map/help-dialog/help-dialog.component.ts
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.ts
@@ -3,19 +3,17 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { Message } from '../../../models/message';
 
 @Component({
-    selector: 'app-help-dialog',
-    templateUrl: './help-dialog.component.html',
-    styleUrls: ['./help-dialog.component.scss']
+  selector: 'app-help-dialog',
+  templateUrl: './help-dialog.component.html',
+  styleUrls: ['./help-dialog.component.scss'],
 })
 export class HelpDialogComponent {
-    @Input() title: string;
-    @Input() messages: Message[];
+  @Input() title: string;
+  @Input() messages: Message[];
 
-    constructor(
-        public dialogRef: MatDialogRef<HelpDialogComponent>,
-    ) {}
+  constructor(public dialogRef: MatDialogRef<HelpDialogComponent>) {}
 
-    onCloseClick() {
-        this.dialogRef.close();
-    }
+  onCloseClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts b/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts
index 3e58ec29..de96317b 100644
--- a/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts
+++ b/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts
@@ -1,4 +1,4 @@
-import { NodeCreatedLabelStylesFixer } from "./node-created-label-styles-fixer";
+import { NodeCreatedLabelStylesFixer } from './node-created-label-styles-fixer';
 import { Node } from '../../../cartography/models/node';
 import { Label } from '../../../cartography/models/label';
 
@@ -11,14 +11,12 @@ describe('NodeCreatedLabelStylesFixer', () => {
       calculate: (text, styles) => {
         return {
           width: 50,
-          height: 10
+          height: 10,
         };
-      }
+      },
     };
 
-    fixer = new NodeCreatedLabelStylesFixer(
-      calculator
-    );
+    fixer = new NodeCreatedLabelStylesFixer(calculator);
   });
 
   it('should fix label styles and position', () => {
@@ -26,11 +24,13 @@ describe('NodeCreatedLabelStylesFixer', () => {
     node.width = 100;
     node.height = 100;
     node.label = new Label();
-    node.label.text = "my new label";
+    node.label.text = 'my new label';
 
     const fixed = fixer.fix(node);
 
-    expect(fixed.label.style).toEqual('font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;');
+    expect(fixed.label.style).toEqual(
+      'font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;'
+    );
     expect(fixed.label.x).toEqual(25);
     expect(fixed.label.y).toEqual(-18);
   });
diff --git a/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts b/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts
index 43a3e33d..6b4530d5 100644
--- a/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts
+++ b/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts
@@ -6,9 +6,7 @@ import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calcu
 export class NodeCreatedLabelStylesFixer {
   MARGIN_BETWEEN_NODE_AND_LABEL = 8;
 
-  constructor(
-    private fontBBCalculator: FontBBoxCalculator
-  ) {}
+  constructor(private fontBBCalculator: FontBBoxCalculator) {}
 
   fix(node: Node): Node {
     node.label.style = 'font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;';
diff --git a/src/app/components/project-map/import-appliance/import-appliance.component.ts b/src/app/components/project-map/import-appliance/import-appliance.component.ts
index 2d2e4c67..bd76db8b 100644
--- a/src/app/components/project-map/import-appliance/import-appliance.component.ts
+++ b/src/app/components/project-map/import-appliance/import-appliance.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from '@angular/core';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { ToasterService } from '../../../services/toaster.service';
@@ -16,144 +16,143 @@ import { IouService } from '../../../services/iou.service';
 import { IosService } from '../../../services/ios.service';
 import { TemplatePortalDirective } from '@angular/cdk/portal';
 
-
 @Component({
-    selector: 'app-import-appliance',
-    templateUrl: './import-appliance.component.html',
-    styleUrls: ['./import-appliance.component.scss']
+  selector: 'app-import-appliance',
+  templateUrl: './import-appliance.component.html',
+  styleUrls: ['./import-appliance.component.scss'],
 })
 export class ImportApplianceComponent implements OnInit {
-    @Input('project') project: Project;
-    @Input('server') server: Server;
-    uploader: FileUploader;
-    template;
+  @Input('project') project: Project;
+  @Input('server') server: Server;
+  uploader: FileUploader;
+  template;
 
-    constructor(
-        private toasterService: ToasterService,
-        private dockerService: DockerService,
-        private qemuService: QemuService,
-        private iouService: IouService,
-        private iosService: IosService
-    ) {}
+  constructor(
+    private toasterService: ToasterService,
+    private dockerService: DockerService,
+    private qemuService: QemuService,
+    private iouService: IouService,
+    private iosService: IosService
+  ) {}
 
-    ngOnInit() {
-        this.uploader = new FileUploader({});
-        this.uploader.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-    
-        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error has occured');
-        };
-    
-        this.uploader.onCompleteItem = (
-            item: FileItem,
-            response: string,
-            status: number,
-            headers: ParsedResponseHeaders
-        ) => {
-            if (this.template.template_type === 'qemu') {
-                this.qemuService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
-            } else if (this.template.template_type === 'iou') {
-                this.iouService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
-            } else if (this.template.template_type === 'dynamips') {
-                this.iosService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
-            } else if (this.template.template_type === 'docker') {
-                this.dockerService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
-            }
-        };
-    }
+  ngOnInit() {
+    this.uploader = new FileUploader({});
+    this.uploader.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
 
-    private onUploadComplete() {
-        this.toasterService.success('Appliance imported successfully');
-        this.uploader.queue = [];
-    }
+    this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+      this.toasterService.error('An error has occured');
+    };
 
-    public uploadAppliance(event) {
-        let file: File = event.target.files[0];
-        let name: string = file.name;
-        let fileReader: FileReader = new FileReader();
+    this.uploader.onCompleteItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      if (this.template.template_type === 'qemu') {
+        this.qemuService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
+      } else if (this.template.template_type === 'iou') {
+        this.iouService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
+      } else if (this.template.template_type === 'dynamips') {
+        this.iosService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
+      } else if (this.template.template_type === 'docker') {
+        this.dockerService.addTemplate(this.server, this.template).subscribe(() => this.onUploadComplete());
+      }
+    };
+  }
 
-        let template;
-        fileReader.onloadend = () => {
-            let appliance = JSON.parse(fileReader.result as string);
-            let emulator: string;
+  private onUploadComplete() {
+    this.toasterService.success('Appliance imported successfully');
+    this.uploader.queue = [];
+  }
 
-            if (appliance.qemu) {
-                // option to select qemu image is missing
-                template = new QemuTemplate();
-                template.template_type = 'qemu';
-                template.adapter_type = appliance.qemu.adapter_type;
-                template.adapters = appliance.qemu.adapters;
-                template.ram = appliance.qemu.ram;
-                template.options = appliance.qemu.options;
-                template.console_type = appliance.qemu.console_type;
-            } else if (appliance.iou) {
-                // option to choose IOU image is missing
-                template = new IouTemplate();
-                template.template_type = 'iou';
-                template.console_type = appliance.iou.console_type;
-                template.console_auto_start = appliance.iou.console_auto_start;
-                template.ethernet_adapters = appliance.iou.ethernet_adapters;
-                template.l1_keepalives = appliance.iou.l1_keepalives;
-                template.nvram = appliance.iou.nvram;
-                template.ram = appliance.iou.ram;
-                template.serial_adapters = appliance.iou.serial_adapters;
-            } else if (appliance.dynamips) {
-                // option to choose IOS image is missing
-                template = new IosTemplate();
-                template.template_type = 'dynamips';
-                template.platform = appliance.dynamips.platform;
-                template.ram = appliance.dynamips.ram;
-                template.nvram = appliance.dynamips.nvram;
-                template.startup_config = appliance.dynamips.startup_config;
-                template.wic0 = appliance.dynamips.wic0;
-                template.wic1 = appliance.dynamips.wic1;
-                template.wic2 = appliance.dynamips.wic2;
-                template.slot0 = appliance.dynamips.slot0;
-                template.slot1 = appliance.dynamips.slot1;
-                template.slot2 = appliance.dynamips.slot2;
-                template.slot3 = appliance.dynamips.slot3;
-                template.slot4 = appliance.dynamips.slot4;
-                template.slot5 = appliance.dynamips.slot5;
-                template.slot6 = appliance.dynamips.slot6;
-                template.slot7 = appliance.dynamips.slot7;
-            } else if (appliance.docker) {
-                template = new DockerTemplate();
-                template.template_type = 'docker';
-                template.adapters = appliance.docker.adapters;
-                template.console_type = appliance.docker.console_type;
-                template.image = appliance.docker.image;
-            } else {
-                this.toasterService.error("Template type not supported");
-                return;
-            }
-            template.name = appliance.name;
-            template.category = appliance.category;
-            template.builtin = false;
-            template.default_name_format = '{name}-{0}';
-            template.compute_id = "vm";
-            // qemu - VM
-            // iou - VM + main server
-            // dynamips - vm + main server
-            // docker - vm
+  public uploadAppliance(event) {
+    let file: File = event.target.files[0];
+    let name: string = file.name;
+    let fileReader: FileReader = new FileReader();
 
-            if (template.category === 'guest') {
-                template.symbol = `:/symbols/computer.svg`;
-            } else {
-                template.symbol = `:/symbols/${template.category}_guest.svg`;
-            }
-            this.template = template;
+    let template;
+    fileReader.onloadend = () => {
+      let appliance = JSON.parse(fileReader.result as string);
+      let emulator: string;
 
-            const url = this.getUploadPath(this.server, template.template_type, name);
-            this.uploader.queue.forEach(elem => (elem.url = url));
-            const itemToUpload = this.uploader.queue[0];
-            this.uploader.uploadItem(itemToUpload);
-        };
-        fileReader.readAsText(file);
-    }
+      if (appliance.qemu) {
+        // option to select qemu image is missing
+        template = new QemuTemplate();
+        template.template_type = 'qemu';
+        template.adapter_type = appliance.qemu.adapter_type;
+        template.adapters = appliance.qemu.adapters;
+        template.ram = appliance.qemu.ram;
+        template.options = appliance.qemu.options;
+        template.console_type = appliance.qemu.console_type;
+      } else if (appliance.iou) {
+        // option to choose IOU image is missing
+        template = new IouTemplate();
+        template.template_type = 'iou';
+        template.console_type = appliance.iou.console_type;
+        template.console_auto_start = appliance.iou.console_auto_start;
+        template.ethernet_adapters = appliance.iou.ethernet_adapters;
+        template.l1_keepalives = appliance.iou.l1_keepalives;
+        template.nvram = appliance.iou.nvram;
+        template.ram = appliance.iou.ram;
+        template.serial_adapters = appliance.iou.serial_adapters;
+      } else if (appliance.dynamips) {
+        // option to choose IOS image is missing
+        template = new IosTemplate();
+        template.template_type = 'dynamips';
+        template.platform = appliance.dynamips.platform;
+        template.ram = appliance.dynamips.ram;
+        template.nvram = appliance.dynamips.nvram;
+        template.startup_config = appliance.dynamips.startup_config;
+        template.wic0 = appliance.dynamips.wic0;
+        template.wic1 = appliance.dynamips.wic1;
+        template.wic2 = appliance.dynamips.wic2;
+        template.slot0 = appliance.dynamips.slot0;
+        template.slot1 = appliance.dynamips.slot1;
+        template.slot2 = appliance.dynamips.slot2;
+        template.slot3 = appliance.dynamips.slot3;
+        template.slot4 = appliance.dynamips.slot4;
+        template.slot5 = appliance.dynamips.slot5;
+        template.slot6 = appliance.dynamips.slot6;
+        template.slot7 = appliance.dynamips.slot7;
+      } else if (appliance.docker) {
+        template = new DockerTemplate();
+        template.template_type = 'docker';
+        template.adapters = appliance.docker.adapters;
+        template.console_type = appliance.docker.console_type;
+        template.image = appliance.docker.image;
+      } else {
+        this.toasterService.error('Template type not supported');
+        return;
+      }
+      template.name = appliance.name;
+      template.category = appliance.category;
+      template.builtin = false;
+      template.default_name_format = '{name}-{0}';
+      template.compute_id = 'vm';
+      // qemu - VM
+      // iou - VM + main server
+      // dynamips - vm + main server
+      // docker - vm
 
-    private getUploadPath(server: Server, emulator: string, filename: string) {
-        return `${server.protocol}//${server.host}:${server.port}/v2/${emulator}/images/${filename}`;
-    }
+      if (template.category === 'guest') {
+        template.symbol = `:/symbols/computer.svg`;
+      } else {
+        template.symbol = `:/symbols/${template.category}_guest.svg`;
+      }
+      this.template = template;
+
+      const url = this.getUploadPath(this.server, template.template_type, name);
+      this.uploader.queue.forEach((elem) => (elem.url = url));
+      const itemToUpload = this.uploader.queue[0];
+      this.uploader.uploadItem(itemToUpload);
+    };
+    fileReader.readAsText(file);
+  }
+
+  private getUploadPath(server: Server, emulator: string, filename: string) {
+    return `${server.protocol}//${server.host}:${server.port}/v2/${emulator}/images/${filename}`;
+  }
 }
diff --git a/src/app/components/project-map/info-dialog/info-dialog.component.html b/src/app/components/project-map/info-dialog/info-dialog.component.html
index fbb64687..e8cb46af 100644
--- a/src/app/components/project-map/info-dialog/info-dialog.component.html
+++ b/src/app/components/project-map/info-dialog/info-dialog.component.html
@@ -1,27 +1,27 @@
-<h1 mat-dialog-title>{{node.name}}</h1>
+<h1 mat-dialog-title>{{ node.name }}</h1>
 
 <div class="modal-form-container">
-    <mat-tab-group animationDuration="0ms">
-        <mat-tab label="General information">
-            <div class='textBox'>
-                <div *ngFor="let info of infoList">
-                    {{info}}
-                </div>
-            </div>
-        </mat-tab>
-        <mat-tab label="Usage instructions">
-            <div class="textBox">
-                {{usage}}
-            </div>
-        </mat-tab>
-        <mat-tab label="Command line">
-            <div class="textBox">
-                {{commandLine}}
-            </div>
-        </mat-tab>
-    </mat-tab-group>
+  <mat-tab-group animationDuration="0ms">
+    <mat-tab label="General information">
+      <div class="textBox">
+        <div *ngFor="let info of infoList">
+          {{ info }}
+        </div>
+      </div>
+    </mat-tab>
+    <mat-tab label="Usage instructions">
+      <div class="textBox">
+        {{ usage }}
+      </div>
+    </mat-tab>
+    <mat-tab label="Command line">
+      <div class="textBox">
+        {{ commandLine }}
+      </div>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 
 <div mat-dialog-actions>
-    <button mat-button (click)="onCloseClick()" color="accent">Close</button>
+  <button mat-button (click)="onCloseClick()" color="accent">Close</button>
 </div>
diff --git a/src/app/components/project-map/info-dialog/info-dialog.component.scss b/src/app/components/project-map/info-dialog/info-dialog.component.scss
index e28aaee8..e54f5357 100644
--- a/src/app/components/project-map/info-dialog/info-dialog.component.scss
+++ b/src/app/components/project-map/info-dialog/info-dialog.component.scss
@@ -1,3 +1,3 @@
 .textBox {
-    margin-top: 10px;
+  margin-top: 10px;
 }
diff --git a/src/app/components/project-map/info-dialog/info-dialog.component.ts b/src/app/components/project-map/info-dialog/info-dialog.component.ts
index 7bfd0839..0e2608b4 100644
--- a/src/app/components/project-map/info-dialog/info-dialog.component.ts
+++ b/src/app/components/project-map/info-dialog/info-dialog.component.ts
@@ -5,29 +5,26 @@ import { InfoService } from '../../../services/info.service';
 import { Server } from '../../../models/server';
 
 @Component({
-    selector: 'app-info-dialog',
-    templateUrl: './info-dialog.component.html',
-    styleUrls: ['./info-dialog.component.scss']
+  selector: 'app-info-dialog',
+  templateUrl: './info-dialog.component.html',
+  styleUrls: ['./info-dialog.component.scss'],
 })
 export class InfoDialogComponent implements OnInit {
-    @Input() server: Server;
-    @Input() node: Node;
-    infoList: string[] = [];
-    usage: string = '';
-    commandLine: string = '';
+  @Input() server: Server;
+  @Input() node: Node;
+  infoList: string[] = [];
+  usage: string = '';
+  commandLine: string = '';
 
-    constructor(
-        public dialogRef: MatDialogRef<InfoDialogComponent>,
-        private infoService: InfoService
-    ) {}
+  constructor(public dialogRef: MatDialogRef<InfoDialogComponent>, private infoService: InfoService) {}
 
-    ngOnInit() {
-        this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
-        this.commandLine = this.infoService.getCommandLine(this.node);
-        this.usage = this.node.usage ? this.node.usage : `No usage information has been provided for this node.`;
-    }
+  ngOnInit() {
+    this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
+    this.commandLine = this.infoService.getCommandLine(this.node);
+    this.usage = this.node.usage ? this.node.usage : `No usage information has been provided for this node.`;
+  }
 
-    onCloseClick() {
-        this.dialogRef.close();
-    }
+  onCloseClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/log-console/log-console.component.html b/src/app/components/project-map/log-console/log-console.component.html
index 83bcf275..c73a091d 100644
--- a/src/app/components/project-map/log-console/log-console.component.html
+++ b/src/app/components/project-map/log-console/log-console.component.html
@@ -1,32 +1,31 @@
 <div class="consoleHeader">
-    <div class="consoleFiltering">
-        <button [ngClass]="{lightTheme: isLightThemeEnabled}" class="filterButton" [matMenuTriggerFor]="filterMenu">
-            Apply filter
-        </button>
-        <mat-menu #filterMenu="matMenu" xPosition="after">
-            <button (click)="applyFilter('all')" mat-menu-item>all</button>
-            <button (click)="applyFilter('errors')" mat-menu-item>errors</button>
-            <button (click)="applyFilter('warnings')" mat-menu-item>warnings</button>
-            <button (click)="applyFilter('info')" mat-menu-item>info</button>
-            <button (click)="applyFilter('map updates')" mat-menu-item>map updates</button>
-            <button (click)="applyFilter('server requests')" mat-menu-item>server requests</button>
-        </mat-menu>
-    </div>
+  <div class="consoleFiltering">
+    <button [ngClass]="{ lightTheme: isLightThemeEnabled }" class="filterButton" [matMenuTriggerFor]="filterMenu">
+      Apply filter
+    </button>
+    <mat-menu #filterMenu="matMenu" xPosition="after">
+      <button (click)="applyFilter('all')" mat-menu-item>all</button>
+      <button (click)="applyFilter('errors')" mat-menu-item>errors</button>
+      <button (click)="applyFilter('warnings')" mat-menu-item>warnings</button>
+      <button (click)="applyFilter('info')" mat-menu-item>info</button>
+      <button (click)="applyFilter('map updates')" mat-menu-item>map updates</button>
+      <button (click)="applyFilter('server requests')" mat-menu-item>server requests</button>
+    </mat-menu>
+  </div>
 </div>
 
-<div [ngClass]="{lightTheme: isLightThemeEnabled}" #console class="console" [ngStyle]="style">
-    <span class="console-item" *ngFor="let event of filteredEvents">
-        {{event.message}} <br/>
-    </span>
+<div [ngClass]="{ lightTheme: isLightThemeEnabled }" #console class="console" [ngStyle]="style">
+  <span class="console-item" *ngFor="let event of filteredEvents"> {{ event.message }} <br /> </span>
 </div>
 
-<div [ngClass]="{lightTheme: isLightThemeEnabled}" class="consoleInput">
-    <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
-    <input
-        [ngClass]="{lightTheme: isLightThemeEnabled}"
-        class="commandLine"
-        autofocus
-        (keydown)="onKeyDown($event)"
-        type="text"
-        [(ngModel)]="command"/>
+<div [ngClass]="{ lightTheme: isLightThemeEnabled }" class="consoleInput">
+  <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
+  <input
+    [ngClass]="{ lightTheme: isLightThemeEnabled }"
+    class="commandLine"
+    autofocus
+    (keydown)="onKeyDown($event)"
+    type="text"
+    [(ngModel)]="command"
+  />
 </div>
diff --git a/src/app/components/project-map/log-console/log-console.component.scss b/src/app/components/project-map/log-console/log-console.component.scss
index f8302fed..0f952e38 100644
--- a/src/app/components/project-map/log-console/log-console.component.scss
+++ b/src/app/components/project-map/log-console/log-console.component.scss
@@ -1,96 +1,96 @@
 .consoleWrapper {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    height: 180px;
-    width: 600px;
-    background: #263238;
-    color: white;
-    overflow: hidden;
-    font-size: 12px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  height: 180px;
+  width: 600px;
+  background: #263238;
+  color: white;
+  overflow: hidden;
+  font-size: 12px;
 }
 
 .lightTheme {
-    background: white!important;
-    color: black;
+  background: white !important;
+  color: black;
 }
 
 .filterButton {
-    background: transparent;
-    color: white;
-    border: none;
-    margin-top: 0px;
-    outline: none;
-    color: #dbd5d5;
-    font-weight: bold;
-    padding: 0px;
+  background: transparent;
+  color: white;
+  border: none;
+  margin-top: 0px;
+  outline: none;
+  color: #dbd5d5;
+  font-weight: bold;
+  padding: 0px;
 }
 
 .consoleFiltering {
-    display: flex;
+  display: flex;
 }
 
 .consoleHeader {
-    width: 100%;
-    height: 40px;
-    font-size: 12px;
-    overflow: hidden;
-    display: flex;
-    padding: 2px;
-    justify-content: space-between;
+  width: 100%;
+  height: 40px;
+  font-size: 12px;
+  overflow: hidden;
+  display: flex;
+  padding: 2px;
+  justify-content: space-between;
 }
 
 .console {
-    width: 596px;
-    height: 120px;
-    overflow-y: scroll;
-    padding: 2px;
-    color: #dbd5d5;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  width: 596px;
+  height: 120px;
+  overflow-y: scroll;
+  padding: 2px;
+  color: #dbd5d5;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 .consoleInput {
-    width: 100%;
-    height: 30px;
-    padding: 2px;
-    display: flex;
+  width: 100%;
+  height: 30px;
+  padding: 2px;
+  display: flex;
 }
 
 .commandLine {
-    background-color: transparent;
-    color: white;
-    border: none;
+  background-color: transparent;
+  color: white;
+  border: none;
 }
 
 .inputIcon {
-    margin-top: 2px;
+  margin-top: 2px;
 }
 
 mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
 }
 
-input:focus{
-    outline: none;
+input:focus {
+  outline: none;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
- 
+
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
- 
+
 ::-webkit-scrollbar-thumb {
   background-color: darkgrey;
   outline: 1px solid #263238;
 }
 
 .closeButton {
-    cursor: pointer;
+  cursor: pointer;
 }
diff --git a/src/app/components/project-map/log-console/log-console.component.spec.ts b/src/app/components/project-map/log-console/log-console.component.spec.ts
index b198dbc0..e55330f4 100644
--- a/src/app/components/project-map/log-console/log-console.component.spec.ts
+++ b/src/app/components/project-map/log-console/log-console.component.spec.ts
@@ -16,12 +16,12 @@ import { HttpClient } from '@angular/common/http';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
 
 export class MockedProjectWebServiceHandler {
-    public nodeNotificationEmitter = new EventEmitter<WebServiceMessage>();
-    public linkNotificationEmitter = new EventEmitter<WebServiceMessage>();
-    public drawingNotificationEmitter = new EventEmitter<WebServiceMessage>();
-    public infoNotificationEmitter = new EventEmitter<any>();
-    public warningNotificationEmitter = new EventEmitter<any>();
-    public errorNotificationEmitter = new EventEmitter<any>();
+  public nodeNotificationEmitter = new EventEmitter<WebServiceMessage>();
+  public linkNotificationEmitter = new EventEmitter<WebServiceMessage>();
+  public drawingNotificationEmitter = new EventEmitter<WebServiceMessage>();
+  public infoNotificationEmitter = new EventEmitter<any>();
+  public warningNotificationEmitter = new EventEmitter<any>();
+  public errorNotificationEmitter = new EventEmitter<any>();
 }
 
 describe('LogConsoleComponent', () => {
@@ -30,7 +30,7 @@ describe('LogConsoleComponent', () => {
 
   let mockedNodeService: MockedNodeService = new MockedNodeService();
   let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
-  let mockedProjectWebServiceHandler: MockedProjectWebServiceHandler =  new MockedProjectWebServiceHandler();
+  let mockedProjectWebServiceHandler: MockedProjectWebServiceHandler = new MockedProjectWebServiceHandler();
 
   let httpServer = new HttpServer({} as HttpClient, {} as ServerErrorHandler);
 
@@ -38,22 +38,22 @@ describe('LogConsoleComponent', () => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatMenuModule, BrowserModule],
       providers: [
-        { provide: ProjectWebServiceHandler, useValue: mockedProjectWebServiceHandler }, 
+        { provide: ProjectWebServiceHandler, useValue: mockedProjectWebServiceHandler },
         { provide: NodeService, useValue: mockedNodeService },
         { provide: NodesDataSource, useValue: mockedNodesDataSource },
         { provide: LogEventsDataSource, useClass: LogEventsDataSource },
         { provide: HttpServer, useValue: httpServer },
-        { provide: NodeConsoleService }
+        { provide: NodeConsoleService },
       ],
       declarations: [LogConsoleComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogConsoleComponent);
     component = fixture.componentInstance;
-    component.server = {location: 'local'} as Server;
+    component.server = { location: 'local' } as Server;
     fixture.detectChanges();
   });
 
@@ -67,7 +67,11 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: "Available commands: help, version, console {node name}, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}."});
+    expect(component.showMessage).toHaveBeenCalledWith({
+      type: 'command',
+      message:
+        'Available commands: help, version, console {node name}, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}.',
+    });
   });
 
   xit('should call show message when version command entered', () => {
@@ -76,7 +80,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Current version: 2.2.18dev'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Current version: 2.2.18dev' });
   });
 
   it('should call show message when unknown command entered', () => {
@@ -85,7 +89,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Unknown syntax: xyz'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Unknown syntax: xyz' });
   });
 
   it('should call node service when start all entered', () => {
@@ -95,7 +99,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Starting all nodes...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Starting all nodes...' });
     expect(mockedNodeService.startAll).toHaveBeenCalled();
   });
 
@@ -106,7 +110,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Stopping all nodes...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Stopping all nodes...' });
     expect(mockedNodeService.stopAll).toHaveBeenCalled();
   });
 
@@ -117,7 +121,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Suspending all nodes...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Suspending all nodes...' });
     expect(mockedNodeService.suspendAll).toHaveBeenCalled();
   });
 
@@ -128,7 +132,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Reloading all nodes...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Reloading all nodes...' });
     expect(mockedNodeService.reloadAll).toHaveBeenCalled();
   });
 
@@ -139,7 +143,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Starting node testNode...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Starting node testNode...' });
     expect(mockedNodeService.start).toHaveBeenCalled();
   });
 
@@ -150,7 +154,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Stopping node testNode...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Stopping node testNode...' });
     expect(mockedNodeService.stop).toHaveBeenCalled();
   });
 
@@ -161,7 +165,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-      expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Suspending node testNode...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Suspending node testNode...' });
     expect(mockedNodeService.suspend).toHaveBeenCalled();
   });
 
@@ -172,7 +176,7 @@ describe('LogConsoleComponent', () => {
 
     component.handleCommand();
 
-    expect(component.showMessage).toHaveBeenCalledWith({type: 'command', message: 'Reloading node testNode...'});
+    expect(component.showMessage).toHaveBeenCalledWith({ type: 'command', message: 'Reloading node testNode...' });
     expect(mockedNodeService.reload).toHaveBeenCalled();
   });
 });
diff --git a/src/app/components/project-map/log-console/log-console.component.ts b/src/app/components/project-map/log-console/log-console.component.ts
index 2dd0e249..14f1cd04 100644
--- a/src/app/components/project-map/log-console/log-console.component.ts
+++ b/src/app/components/project-map/log-console/log-console.component.ts
@@ -1,4 +1,16 @@
-import { Component, OnInit, AfterViewInit, OnDestroy, Input, ViewChild, ElementRef, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  OnDestroy,
+  Input,
+  ViewChild,
+  ElementRef,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ProjectWebServiceHandler } from '../../../handlers/project-web-service-handler';
 import { NodeService } from '../../../services/node.service';
@@ -18,266 +30,277 @@ import { FormControl } from '@angular/forms';
 import { version } from '../../../version';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
 
-
 @Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'app-log-console',
-    templateUrl: './log-console.component.html',
-    styleUrls: ['./log-console.component.scss']
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-log-console',
+  templateUrl: './log-console.component.html',
+  styleUrls: ['./log-console.component.scss'],
 })
 export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
-    @Input() server: Server;
-    @Input() project: Project;
+  @Input() server: Server;
+  @Input() project: Project;
 
-    @ViewChild('console') console: ElementRef;
+  @ViewChild('console') console: ElementRef;
 
-    private version = version;
-    private nodeSubscription: Subscription;
-    private linkSubscription: Subscription;
-    private drawingSubscription: Subscription;
-    private serverRequestsSubscription: Subscription;
-    private errorSubscription: Subscription;
-    private warningSubscription: Subscription;
-    private infoSubscription: Subscription;
+  private version = version;
+  private nodeSubscription: Subscription;
+  private linkSubscription: Subscription;
+  private drawingSubscription: Subscription;
+  private serverRequestsSubscription: Subscription;
+  private errorSubscription: Subscription;
+  private warningSubscription: Subscription;
+  private infoSubscription: Subscription;
 
-    public command: string = '';
-    public filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
-    public selectedFilter: string = 'all';
-    public filteredEvents: LogEvent[] = [];
+  public command: string = '';
+  public filters: string[] = ['all', 'errors', 'warnings', 'info', 'map updates', 'server requests'];
+  public selectedFilter: string = 'all';
+  public filteredEvents: LogEvent[] = [];
 
-    private regexStart: RegExp = /^start (.*?)$/;
-    private regexStop: RegExp = /^stop (.*?)$/;
-    private regexSuspend: RegExp = /^suspend (.*?)$/;
-    private regexReload: RegExp = /^reload (.*?)$/;
-    private regexShow: RegExp = /^show (.*?)$/;
-    private regexConsole: RegExp = /^console (.*?)$/;
+  private regexStart: RegExp = /^start (.*?)$/;
+  private regexStop: RegExp = /^stop (.*?)$/;
+  private regexSuspend: RegExp = /^suspend (.*?)$/;
+  private regexReload: RegExp = /^reload (.*?)$/;
+  private regexShow: RegExp = /^show (.*?)$/;
+  private regexConsole: RegExp = /^console (.*?)$/;
 
-    public style: object = {};
-    public isDraggingEnabled: boolean = false;
-    public isLightThemeEnabled: boolean = false;
-    public selected = new FormControl(0);
+  public style: object = {};
+  public isDraggingEnabled: boolean = false;
+  public isLightThemeEnabled: boolean = false;
+  public selected = new FormControl(0);
 
-    constructor(
-        private projectWebServiceHandler: ProjectWebServiceHandler,
-        private nodeService: NodeService,
-        private nodesDataSource: NodesDataSource,
-        private logEventsDataSource: LogEventsDataSource,
-        private httpService: HttpServer,
-        private themeService: ThemeService,
-        private cd: ChangeDetectorRef,
-        private nodeConsoleService: NodeConsoleService,
-        private changeDetectorRef: ChangeDetectorRef
-    ) {}
-    
-    ngOnInit() {
-        this.nodeConsoleService.consoleResized.subscribe(ev => {
-            this.style = { bottom: '20px', left: '20px', width: `${ev.width}px`, height: `${ev.height - 70}px`};
-            this.changeDetectorRef.detectChanges();
-        });
+  constructor(
+    private projectWebServiceHandler: ProjectWebServiceHandler,
+    private nodeService: NodeService,
+    private nodesDataSource: NodesDataSource,
+    private logEventsDataSource: LogEventsDataSource,
+    private httpService: HttpServer,
+    private themeService: ThemeService,
+    private cd: ChangeDetectorRef,
+    private nodeConsoleService: NodeConsoleService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
 
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false
-        this.style = { bottom: '20px', left: '20px', width: '720px', height: '340px'};
+  ngOnInit() {
+    this.nodeConsoleService.consoleResized.subscribe((ev) => {
+      this.style = { bottom: '20px', left: '20px', width: `${ev.width}px`, height: `${ev.height - 70}px` };
+      this.changeDetectorRef.detectChanges();
+    });
 
-        this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
-            let node: Node = event.event as Node;
-            let message: string = '';
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
+    this.style = { bottom: '20px', left: '20px', width: '720px', height: '340px' };
 
-            if (node.label) {
-                message = `Event received: ${event.action} - ${this.printNode(node)}.`;
+    this.nodeSubscription = this.projectWebServiceHandler.nodeNotificationEmitter.subscribe((event) => {
+      let node: Node = event.event as Node;
+      let message: string = '';
+
+      if (node.label) {
+        message = `Event received: ${event.action} - ${this.printNode(node)}.`;
+      } else {
+        message = `Event received: ${event.action} - ${node.name}.`;
+      }
+
+      this.showMessage({
+        type: 'map update',
+        message: message,
+      });
+    });
+    this.linkSubscription = this.projectWebServiceHandler.linkNotificationEmitter.subscribe((event) => {
+      let link: Link = event.event as Link;
+      let message = `Event received: ${event.action} - ${this.printLink(link)}.`;
+      this.showMessage({
+        type: 'map update',
+        message: message,
+      });
+    });
+    this.drawingSubscription = this.projectWebServiceHandler.drawingNotificationEmitter.subscribe((event) => {
+      let drawing: Drawing = event.event as Drawing;
+      let message = `Event received: ${event.action} - ${this.printDrawing(drawing)}.`;
+      this.showMessage({
+        type: 'map update',
+        message: message,
+      });
+    });
+    this.serverRequestsSubscription = this.httpService.requestsNotificationEmitter.subscribe((message) => {
+      this.showMessage({
+        type: 'server request',
+        message: message,
+      });
+    });
+    this.errorSubscription = this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
+      this.showMessage({
+        type: 'error',
+        message: message,
+      });
+    });
+    this.warningSubscription = this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
+      this.showMessage({
+        type: 'warning',
+        message: message,
+      });
+    });
+    this.infoSubscription = this.projectWebServiceHandler.infoNotificationEmitter.subscribe((message) => {
+      this.showMessage({
+        type: 'info',
+        message: message,
+      });
+    });
+  }
+
+  ngAfterViewInit() {
+    if (this.console.nativeElement) this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+  }
+
+  ngOnDestroy() {
+    this.nodeSubscription.unsubscribe();
+    this.linkSubscription.unsubscribe();
+    this.drawingSubscription.unsubscribe();
+    this.serverRequestsSubscription.unsubscribe();
+    this.errorSubscription.unsubscribe();
+    this.warningSubscription.unsubscribe();
+    this.infoSubscription.unsubscribe();
+  }
+
+  applyFilter(filter: string) {
+    this.selectedFilter = filter;
+    this.filteredEvents = this.getFilteredEvents();
+    this.cd.detectChanges();
+  }
+
+  onKeyDown(event) {
+    if (event.key === 'Enter') {
+      this.handleCommand();
+    }
+  }
+
+  handleCommand() {
+    if (this.command === 'help' || this.command === '') {
+      this.showCommand(
+        'Available commands: help, version, console {node name}, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}.'
+      );
+    } else if (this.command === 'version') {
+      this.showCommand('Current version: ' + this.version);
+    } else if (this.command === 'start all') {
+      this.showCommand('Starting all nodes...');
+      this.nodeService.startAll(this.server, this.project).subscribe(() => {
+        this.showCommand('All nodes started.');
+      });
+    } else if (this.command === 'stop all') {
+      this.showCommand('Stopping all nodes...');
+      this.nodeService.stopAll(this.server, this.project).subscribe(() => {
+        this.showCommand('All nodes stopped.');
+      });
+    } else if (this.command === 'suspend all') {
+      this.showCommand('Suspending all nodes...');
+      this.nodeService.suspendAll(this.server, this.project).subscribe(() => {
+        this.showCommand('All nodes suspended.');
+      });
+    } else if (this.command === 'reload all') {
+      this.showCommand('Reloading all nodes...');
+      this.nodeService.reloadAll(this.server, this.project).subscribe(() => {
+        this.showCommand('All nodes reloaded.');
+      });
+    } else if (
+      this.regexStart.test(this.command) ||
+      this.regexStop.test(this.command) ||
+      this.regexSuspend.test(this.command) ||
+      this.regexReload.test(this.command) ||
+      this.regexShow.test(this.command) ||
+      this.regexConsole.test(this.command)
+    ) {
+      let splittedCommand = this.command.split(/[ ,]+/);
+      let node = this.nodesDataSource.getItems().find((n) => n.name.valueOf() === splittedCommand[1].valueOf());
+      if (node) {
+        if (this.regexStart.test(this.command)) {
+          this.showCommand(`Starting node ${splittedCommand[1]}...`);
+          this.nodeService.start(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} started.`));
+        } else if (this.regexStop.test(this.command)) {
+          this.showCommand(`Stopping node ${splittedCommand[1]}...`);
+          this.nodeService.stop(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} stopped.`));
+        } else if (this.regexSuspend.test(this.command)) {
+          this.showCommand(`Suspending node ${splittedCommand[1]}...`);
+          this.nodeService.suspend(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} suspended.`));
+        } else if (this.regexReload.test(this.command)) {
+          this.showCommand(`Reloading node ${splittedCommand[1]}...`);
+          this.nodeService.reload(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} reloaded.`));
+        } else if (this.regexConsole.test(this.command)) {
+          if (node.status === 'started') {
+            this.showCommand(`Launching console for node ${splittedCommand[1]}...`);
+            if (node.console_type === 'telnet') {
+              location.assign(
+                `gns3+telnet://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
+              );
+            } else if (node.console_type === 'vnc') {
+              location.assign(
+                `gns3+vnc://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
+              );
+            } else if (node.console_type === 'spice') {
+              location.assign(
+                `gns3+spice://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
+              );
             } else {
-                message = `Event received: ${event.action} - ${node.name}.`;
+              this.showCommand('Supported console types: telnet, vnc, spice.');
             }
-
-            this.showMessage({
-                type: 'map update',
-                message: message
-            });
-        });
-        this.linkSubscription = this.projectWebServiceHandler.linkNotificationEmitter.subscribe((event) => {
-            let link: Link = event.event as Link;
-            let message = `Event received: ${event.action} - ${this.printLink(link)}.`
-            this.showMessage({
-                type: 'map update',
-                message: message
-            });
-        });
-        this.drawingSubscription = this.projectWebServiceHandler.drawingNotificationEmitter.subscribe((event) => {
-            let drawing: Drawing = event.event as Drawing;
-            let message = `Event received: ${event.action} - ${this.printDrawing(drawing)}.`
-            this.showMessage({
-                type: 'map update',
-                message: message
-            });
-        });
-        this.serverRequestsSubscription = this.httpService.requestsNotificationEmitter.subscribe((message) => {
-            this.showMessage({
-                type: 'server request',
-                message: message
-            });
-        });
-        this.errorSubscription = this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
-            this.showMessage({
-                type: 'error',
-                message: message
-            });
-        });
-        this.warningSubscription = this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
-            this.showMessage({
-                type: 'warning',
-                message: message
-            });
-        });
-        this.infoSubscription = this.projectWebServiceHandler.infoNotificationEmitter.subscribe((message) => {
-            this.showMessage({
-                type: 'info',
-                message: message
-            });
-        });
-    }
-
-    ngAfterViewInit() {
-        if (this.console.nativeElement) this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
-    }
-
-    ngOnDestroy() {
-        this.nodeSubscription.unsubscribe();
-        this.linkSubscription.unsubscribe();
-        this.drawingSubscription.unsubscribe();
-        this.serverRequestsSubscription.unsubscribe();
-        this.errorSubscription.unsubscribe();
-        this.warningSubscription.unsubscribe();
-        this.infoSubscription.unsubscribe();
-    }
-
-    applyFilter(filter: string) {
-        this.selectedFilter = filter;
-        this.filteredEvents = this.getFilteredEvents();
-        this.cd.detectChanges();
-    }
-
-    onKeyDown(event) {
-        if (event.key === "Enter") {
-          this.handleCommand();
+          } else {
+            this.showCommand(`This node must be started before a console can be opened.`);
+          }
+        } else if (this.regexShow.test(this.command)) {
+          this.showCommand(`Information about node ${node.name}:`);
+          this.showCommand(this.printNode(node));
         }
+      } else {
+        this.showCommand(`Node with ${splittedCommand[1]} name was not found.`);
+      }
+    } else {
+      this.showCommand(`Unknown syntax: ${this.command}`);
     }
+    this.command = '';
+    this.cd.detectChanges();
+  }
 
-    handleCommand() {
-        if (this.command === 'help' || this.command === '') {
-            this.showCommand("Available commands: help, version, console {node name}, start all, start {node name}, stop all, stop {node name}, suspend all, suspend {node name}, reload all, reload {node name}, show {node name}.")
-        } else if (this.command === 'version') {
-            this.showCommand("Current version: " + this.version);
-        } else if (this.command === 'start all') {
-            this.showCommand("Starting all nodes...");
-            this.nodeService.startAll(this.server, this.project).subscribe(() => {
-                this.showCommand("All nodes started.")
-            });
-        } else if (this.command === 'stop all') {
-            this.showCommand("Stopping all nodes...");
-            this.nodeService.stopAll(this.server, this.project).subscribe(() => {
-                this.showCommand("All nodes stopped.")
-            });
-        } else if (this.command === 'suspend all') {
-            this.showCommand("Suspending all nodes...");
-            this.nodeService.suspendAll(this.server, this.project).subscribe(() => {
-                this.showCommand("All nodes suspended.")
-            });
-        } else if (this.command === 'reload all') {
-            this.showCommand("Reloading all nodes...");
-            this.nodeService.reloadAll(this.server, this.project).subscribe(() => {
-                this.showCommand("All nodes reloaded.")
-            });
-        } else if (
-            this.regexStart.test(this.command) || this.regexStop.test(this.command) || this.regexSuspend.test(this.command) || this.regexReload.test(this.command) || this.regexShow.test(this.command) || this.regexConsole.test(this.command)) {
-            let splittedCommand = this.command.split(/[ ,]+/);
-            let node = this.nodesDataSource.getItems().find(n => n.name.valueOf() === splittedCommand[1].valueOf());
-            if (node) {
-                if (this.regexStart.test(this.command)) {
-                    this.showCommand(`Starting node ${splittedCommand[1]}...`);
-                    this.nodeService.start(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} started.`));
-                }
-                else if (this.regexStop.test(this.command)) {
-                    this.showCommand(`Stopping node ${splittedCommand[1]}...`);
-                    this.nodeService.stop(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} stopped.`));
-                }
-                else if (this.regexSuspend.test(this.command)) {
-                    this.showCommand(`Suspending node ${splittedCommand[1]}...`);
-                    this.nodeService.suspend(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} suspended.`));
-                }
-                else if (this.regexReload.test(this.command)) {
-                    this.showCommand(`Reloading node ${splittedCommand[1]}...`);
-                    this.nodeService.reload(this.server, node).subscribe(() => this.showCommand(`Node ${node.name} reloaded.`));
-                }
-                else if (this.regexConsole.test(this.command)) {
-                    if (node.status === 'started') {
-                        this.showCommand(`Launching console for node ${splittedCommand[1]}...`);
-                        if (node.console_type === "telnet") {
-                            location.assign(`gns3+telnet://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`);
-                        } else if (node.console_type === "vnc") {
-                            location.assign(`gns3+vnc://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`);
-                        } else if(node.console_type === "spice") {
-                            location.assign(`gns3+spice://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`);
-                        } else {
-                            this.showCommand("Supported console types: telnet, vnc, spice.");
-                        }
-                    } else {
-                        this.showCommand(`This node must be started before a console can be opened.`);
-                    }
-                }
-                else if (this.regexShow.test(this.command)) {
-                    this.showCommand(`Information about node ${node.name}:`);
-                    this.showCommand(this.printNode(node));
-                }
-            } else {
-                this.showCommand(`Node with ${splittedCommand[1]} name was not found.`);
-            }
-        } else {
-            this.showCommand(`Unknown syntax: ${this.command}`);
-        }
-        this.command = '';
-        this.cd.detectChanges();
+  clearConsole() {
+    this.filteredEvents = [];
+    this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+  }
+
+  showCommand(message: string) {
+    this.showMessage({
+      type: 'command',
+      message: message,
+    });
+  }
+
+  showMessage(event: LogEvent) {
+    this.logEventsDataSource.add(event);
+    this.filteredEvents = this.getFilteredEvents();
+    this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+
+    setTimeout(() => {
+      this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
+    }, 100);
+    this.cd.detectChanges();
+  }
+
+  getFilteredEvents(): LogEvent[] {
+    if (this.selectedFilter === 'server requests') {
+      return this.logEventsDataSource.getItems().filter((n) => n.type === 'server request');
+    } else if (this.selectedFilter === 'errors') {
+      return this.logEventsDataSource.getItems().filter((n) => n.type === 'error');
+    } else if (this.selectedFilter === 'warnings') {
+      return this.logEventsDataSource.getItems().filter((n) => n.type === 'warning');
+    } else if (this.selectedFilter === 'info') {
+      return this.logEventsDataSource.getItems().filter((n) => n.type === 'info');
+    } else if (this.selectedFilter === 'map updates') {
+      return this.logEventsDataSource.getItems().filter((n) => n.type === 'map update' || n.type === 'command');
+    } else {
+      return this.logEventsDataSource.getItems();
     }
+  }
 
-    clearConsole() {
-        this.filteredEvents = [];
-        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
-    }
-
-    showCommand(message: string) {
-        this.showMessage({
-            type: 'command',
-            message: message
-        });
-    }
-
-    showMessage(event: LogEvent) {
-        this.logEventsDataSource.add(event);
-        this.filteredEvents = this.getFilteredEvents();
-        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
-
-        setTimeout( () => { 
-            this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
-        }, 100 );
-        this.cd.detectChanges();
-    }
-
-    getFilteredEvents(): LogEvent[] {
-        if (this.selectedFilter === 'server requests') {
-            return this.logEventsDataSource.getItems().filter(n => n.type === 'server request');
-        } else if (this.selectedFilter === 'errors') {
-            return this.logEventsDataSource.getItems().filter(n => n.type === 'error');
-        } else if (this.selectedFilter === 'warnings') {
-            return this.logEventsDataSource.getItems().filter(n => n.type === 'warning');
-        } else if (this.selectedFilter === 'info') {
-            return this.logEventsDataSource.getItems().filter(n => n.type === 'info');
-        } else if (this.selectedFilter === 'map updates') {
-            return this.logEventsDataSource.getItems().filter(n => n.type === 'map update' || n.type === 'command');
-        } else {
-            return this.logEventsDataSource.getItems();
-        }
-    }
-
-    printNode(node: Node): string {
-        return `command_line: ${node.command_line}, 
+  printNode(node: Node): string {
+    return (
+      `command_line: ${node.command_line}, 
             compute_id: ${node.compute_id}, 
             console: ${node.console}, 
             console_host: ${node.console_host}, 
@@ -291,45 +314,48 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
             node_type: ${node.node_type}, 
             port_name_format: ${node.port_name_format}, 
             port_segment_size: ${node.port_segment_size}, ` +
-            this.printPorts(node.ports) +
-            `project_id: ${node.project_id}, 
+      this.printPorts(node.ports) +
+      `project_id: ${node.project_id}, 
             status: ${node.status}, 
             symbol: ${node.symbol}, 
             symbol_url: ${node.symbol_url}, 
             width: ${node.width}, 
             x: ${node.x}, 
             y: ${node.y}, 
-            z: ${node.z}`;
-    }
+            z: ${node.z}`
+    );
+  }
 
-    printPorts(ports: Port[]): string {
-        let response: string = `ports: `
-        ports.forEach(port => {
-            response = response + `adapter_number: ${port.adapter_number}, 
+  printPorts(ports: Port[]): string {
+    let response: string = `ports: `;
+    ports.forEach((port) => {
+      response =
+        response +
+        `adapter_number: ${port.adapter_number}, 
             link_type: ${port.link_type}, 
             name: ${port.name}, 
             port_number: ${port.port_number}, 
-            short_name: ${port.short_name}, `
-        });
-        return response;
-    }
+            short_name: ${port.short_name}, `;
+    });
+    return response;
+  }
 
-    printLink(link: Link): string {
-        return `capture_file_name: ${link.capture_file_name}, 
+  printLink(link: Link): string {
+    return `capture_file_name: ${link.capture_file_name}, 
             capture_file_path: ${link.capture_file_path}, 
             capturing: ${link.capturing}, 
             link_id: ${link.link_id}, 
             link_type: ${link.link_type}, 
             project_id: ${link.project_id}, 
             suspend: ${link.suspend}, `;
-    }
+  }
 
-    printDrawing(drawing: Drawing): string {
-        return `drawing_id: ${drawing.drawing_id}, 
+  printDrawing(drawing: Drawing): string {
+    return `drawing_id: ${drawing.drawing_id}, 
             project_id: ${drawing.project_id}, 
             rotation: ${drawing.rotation}, 
             x: ${drawing.x}, 
             y: ${drawing.y}, 
             z: ${drawing.z}`;
-    }
+  }
 }
diff --git a/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.html b/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.html
index 756720fa..20b56767 100644
--- a/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.html
+++ b/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.html
@@ -1,23 +1,13 @@
 <div class="title-container">
-    <h1 mat-dialog-title>{{appliance.name}}</h1>
+  <h1 mat-dialog-title>{{ appliance.name }}</h1>
 </div>
 <div mat-dialog-content>
-    <div>
-        Vendor: {{appliance.vendor_name}}
-    </div>
-    <div>
-        Status: {{appliance.status}}
-    </div>
-    <div>
-        Maintainer: {{appliance.maintainer}}
-    </div>
-    <div *ngIf="appliance.qemu">
-        Adapters: {{appliance.qemu.adapters}}
-    </div>
-    <div *ngIf="appliance.qemu">
-        Console type: {{appliance.qemu.console_type}}
-    </div>
+  <div>Vendor: {{ appliance.vendor_name }}</div>
+  <div>Status: {{ appliance.status }}</div>
+  <div>Maintainer: {{ appliance.maintainer }}</div>
+  <div *ngIf="appliance.qemu">Adapters: {{ appliance.qemu.adapters }}</div>
+  <div *ngIf="appliance.qemu">Console type: {{ appliance.qemu.console_type }}</div>
 </div>
 <div mat-dialog-actions>
-    <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
+  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
 </div>
diff --git a/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts b/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts
index bc69255c..212d855b 100644
--- a/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts
@@ -3,18 +3,18 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Appliance } from '../../../../models/appliance';
 
 @Component({
-    selector: 'appliance-info-dialog',
-    templateUrl: 'appliance-info-dialog.component.html',
+  selector: 'appliance-info-dialog',
+  templateUrl: 'appliance-info-dialog.component.html',
 })
 export class ApplianceInfoDialogComponent {
   public appliance: Appliance;
-  
-    constructor(
-      public dialogRef: MatDialogRef<ApplianceInfoDialogComponent>,
-      @Inject(MAT_DIALOG_DATA) public data: any
-    ) {}
-  
-    onNoClick(): void {
-      this.dialogRef.close();
-    }
+
+  constructor(
+    public dialogRef: MatDialogRef<ApplianceInfoDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
index dd72bc12..ada6fd3e 100644
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
@@ -1,81 +1,91 @@
 <h1 mat-dialog-title>Add new template</h1>
 
 <mat-horizontal-stepper [linear]="false" #stepper>
-    <mat-step>
-        <ng-template matStepLabel>Please select how you want to create new template</ng-template>
+  <mat-step>
+    <ng-template matStepLabel>Please select how you want to create new template</ng-template>
 
-        <mat-radio-group class="radio-group">
-            <mat-radio-button class="radio-button" value="1" (click)="setAction('install')" checked>Install new appliance from the GNS server</mat-radio-button><br/>
-            <mat-radio-button class="radio-button" value="2" (click)="setAction('import')">Import an appliance file</mat-radio-button>
-        </mat-radio-group>
+    <mat-radio-group class="radio-group">
+      <mat-radio-button class="radio-button" value="1" (click)="setAction('install')" checked
+        >Install new appliance from the GNS server</mat-radio-button
+      ><br />
+      <mat-radio-button class="radio-button" value="2" (click)="setAction('import')"
+        >Import an appliance file</mat-radio-button
+      >
+    </mat-radio-group>
 
-        <div>
-            <button mat-button matStepperNext>Next</button>
-            <button mat-button (click)="onCloseClick()">Cancel</button>
-        </div>
-    </mat-step>
+    <div>
+      <button mat-button matStepperNext>Next</button>
+      <button mat-button (click)="onCloseClick()">Cancel</button>
+    </div>
+  </mat-step>
 
-    <mat-step>
-        <ng-template matStepLabel>{{actionTitle}}</ng-template>
+  <mat-step>
+    <ng-template matStepLabel>{{ actionTitle }}</ng-template>
 
-        <mat-card [hidden]="!(action==='install')">
-            <div class="tableHeader">
-                <mat-form-field class="filter-field">
-                    <input matInput [(ngModel)]="searchText" placeholder="Filter">
-                </mat-form-field>
-    
-                <mat-select (selectionChange)="filterAppliances($event)" [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="category">
-                    <mat-option *ngFor="let category of categories" [value]="category">
-                        {{category}}
-                    </mat-option>
-                </mat-select>
-            </div>
+    <mat-card [hidden]="!(action === 'install')">
+      <div class="tableHeader">
+        <mat-form-field class="filter-field">
+          <input matInput [(ngModel)]="searchText" placeholder="Filter" />
+        </mat-form-field>
 
-            <mat-table 
-                class="mat-table" 
-                #table 
-                matSort 
-                multiTemplateDataRows 
-                (matSortChange)= "sortData($event)" 
-                [dataSource]="dataSource | datasourcefilter: searchText">
-                <ng-container matColumnDef="name">
-                    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-                    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
-                </ng-container>
+        <mat-select
+          (selectionChange)="filterAppliances($event)"
+          [ngModelOptions]="{ standalone: true }"
+          placeholder="Category"
+          [(ngModel)]="category"
+        >
+          <mat-option *ngFor="let category of categories" [value]="category">
+            {{ category }}
+          </mat-option>
+        </mat-select>
+      </div>
 
-                <ng-container matColumnDef="emulator">
-                    <mat-header-cell *matHeaderCellDef> Emulator </mat-header-cell>
-                    <mat-cell *matCellDef="let row"> {{row.emulator}} </mat-cell>
-                </ng-container>
+      <mat-table
+        class="mat-table"
+        #table
+        matSort
+        multiTemplateDataRows
+        (matSortChange)="sortData($event)"
+        [dataSource]="dataSource | datasourcefilter: searchText"
+      >
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.name }} </mat-cell>
+        </ng-container>
 
-                <ng-container matColumnDef="vendor">
-                    <mat-header-cell *matHeaderCellDef> Vendor </mat-header-cell>
-                    <mat-cell *matCellDef="let row"> {{row.vendor_name}} </mat-cell>
-                </ng-container>
-        
-                <ng-container matColumnDef="actions">
-                    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
-                    <mat-cell *matCellDef="let row" style="text-align: right">
-                        <button mat-icon-button matTooltip="Install" matTooltipClass="custom-tooltip" (click)="install(row)">
-                            <mat-icon aria-label="Install">archive</mat-icon>
-                        </button>
-                        
-                        <button mat-icon-button matTooltip="Show info" matTooltipClass="custom-tooltip" (click)="showInfo(row)">
-                            <mat-icon aria-label="Show info">info</mat-icon>
-                        </button>
-                    </mat-cell>
-                </ng-container>
+        <ng-container matColumnDef="emulator">
+          <mat-header-cell *matHeaderCellDef> Emulator </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.emulator }} </mat-cell>
+        </ng-container>
 
-                <!-- <ng-container matColumnDef="expandedDetail">
+        <ng-container matColumnDef="vendor">
+          <mat-header-cell *matHeaderCellDef> Vendor </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.vendor_name }} </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+          <mat-cell *matCellDef="let row" style="text-align: right">
+            <button mat-icon-button matTooltip="Install" matTooltipClass="custom-tooltip" (click)="install(row)">
+              <mat-icon aria-label="Install">archive</mat-icon>
+            </button>
+
+            <button mat-icon-button matTooltip="Show info" matTooltipClass="custom-tooltip" (click)="showInfo(row)">
+              <mat-icon aria-label="Show info">info</mat-icon>
+            </button>
+          </mat-cell>
+        </ng-container>
+
+        <!-- <ng-container matColumnDef="expandedDetail">
                     <mat-cell *matCellDef="let detail"> 
                         The symbol for {{detail.element}}
                     </mat-cell>
                 </ng-container> -->
-        
-                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
-                <!-- <mat-row 
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
+        <!-- <mat-row 
                     *matRowDef="let row; columns: displayedColumns;"
                     matRipple 
                     class="element-row" 
@@ -87,206 +97,319 @@
                     [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
                     style="overflow: hidden">
                 </mat-row> -->
-            </mat-table>
+      </mat-table>
 
-            <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
-        </mat-card>
+      <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
+    </mat-card>
 
-        <mat-card [hidden]="action==='install'">
-            <input
-                type="file"
-                accept=".gns3appliance, .gns3a"
-                class="non-visible"
-                #file
-                (change)="addAppliance($event)"
-                ng2FileSelect
-                [uploader]="uploader"/>
-            <button mat-raised-button color="primary" (click)="file.click()" class="create-button">Click to import appliance</button>
-        </mat-card>
+    <mat-card [hidden]="action === 'install'">
+      <input
+        type="file"
+        accept=".gns3appliance, .gns3a"
+        class="non-visible"
+        #file
+        (change)="addAppliance($event)"
+        ng2FileSelect
+        [uploader]="uploader"
+      />
+      <button mat-raised-button color="primary" (click)="file.click()" class="create-button">
+        Click to import appliance
+      </button>
+    </mat-card>
 
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button [hidden]="action !== 'install'" (click)="updateAppliances()">
+        Update from online registry
+      </button>
+      <button mat-button (click)="onCloseClick()">Cancel</button>
+    </div>
+  </mat-step>
+
+  <mat-step *ngIf="applianceToInstall">
+    <ng-template matStepLabel>{{ secondActionTitle }}</ng-template>
+
+    <mat-card [hidden]="!(!isLinuxPlatform && !isGns3VmAvailable && !applianceToInstall.dynamips)">
+      Please configure GNS3 VM to install selected appliance
+    </mat-card>
+
+    <mat-card [hidden]="!(isLinuxPlatform || isGns3VmAvailable || applianceToInstall.dynamips)">
+      <div *ngIf="applianceToInstall.qemu">
         <div>
-            <button mat-button matStepperPrevious>Back</button>
-            <button mat-button [hidden]="action!=='install'" (click)="updateAppliances()">Update from online registry</button>
-            <button mat-button (click)="onCloseClick()">Cancel</button>
+          Server type<br />
+          <mat-radio-group class="radio-group">
+            <mat-radio-button
+              [disabled]="!isLinuxPlatform"
+              [checked]="!isGns3VmChosen"
+              class="radio-button"
+              value="1"
+              (click)="setServerType('local')"
+              >Install the appliance locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              [checked]="isGns3VmChosen"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Install the appliance on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
         </div>
-    </mat-step>
-
-    <mat-step *ngIf="applianceToInstall">
-        <ng-template matStepLabel>{{secondActionTitle}}</ng-template>
-
-        <mat-card [hidden]="!(!isLinuxPlatform && !isGns3VmAvailable && !applianceToInstall.dynamips)">
-            Please configure GNS3 VM to install selected appliance
-        </mat-card>
-
-        <mat-card [hidden]="!(isLinuxPlatform || isGns3VmAvailable || applianceToInstall.dynamips)">
-            <div *ngIf="applianceToInstall.qemu">
-                <div>
-                    Server type<br/>
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </div>
-                <div>
-                    Qemu binary<br/>
-                    <mat-select
-                        class="selection-group"
-                        placeholder="Qemu binary"
-                        [(ngModel)]="selectedBinary"
-                        [ngModelOptions]="{standalone: true}">
-                        <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
-                            {{binary.path}}
-                        </mat-option>
-                    </mat-select>
-                </div>
-                <div>
-                    Install required files 
-                    <button mat-icon-button matTooltip="Refresh list of images" matTooltipClass="custom-tooltip" (click)="refreshImages()">
-                        <mat-icon aria-label="Refresh list of images">refresh</mat-icon>
-                    </button><br/>
-                    <div>
-                        <div *ngFor="let version of applianceToInstall.versions">
-                            <div class="list-item">
-                                <span>{{applianceToInstall.name}} version {{version.name}}</span>
-
-                                <div>
-                                    <button class="button" mat-raised-button color="primary" (click)="createQemuTemplateFromVersion(version)">Create</button>
-                                </div>
-                            </div>
-
-                            <div class="list-item-inside" *ngIf="version.images.hda_disk_image">
-                                <span>
-                                    {{version.images.hda_disk_image}}
-                                </span>
-
-                                <div>
-                                    <span *ngIf="checkImageFromVersion(version.images.hda_disk_image)"><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span>
-                                    <span *ngIf="!checkImageFromVersion(version.images.hda_disk_image)"><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span>
-
-                                    <input
-                                        type="file"
-                                        class="non-visible"
-                                        #file2
-                                        (change)="importImage($event, version.images.hda_disk_image)"
-                                        ng2FileSelect
-                                        [uploader]="uploaderImage"/>
-                                    <button class="button" mat-raised-button (click)="file2.click()">Import</button>
-                                    <button class="button" mat-raised-button (click)="downloadImageFromVersion(version.images.hda_disk_image)">Download</button>
-                                </div>
-                            </div>
-
-                            <div class="list-item-inside" *ngIf="version.images.hdb_disk_image">
-                                <span>
-                                    {{version.images.hdb_disk_image}}
-                                </span>
-
-                                <div>
-                                    <span *ngIf="checkImageFromVersion(version.images.hdb_disk_image)"><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span>
-                                    <span *ngIf="!checkImageFromVersion(version.images.hdb_disk_image)"><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span>
-
-                                    <input
-                                        type="file"
-                                        class="non-visible"
-                                        #file3
-                                        (change)="importImage($event, version.images.hdb_disk_image)"
-                                        ng2FileSelect
-                                        [uploader]="uploaderImage"/>
-                                    <button class="button" mat-raised-button (click)="file3.click()">Import</button>
-                                    <button class="button" mat-raised-button (click)="downloadImageFromVersion(version.images.hdb_disk_image)">Download</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div *ngIf="applianceToInstall.docker">
-                <div>
-                    Server type<br/>
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </div>
-                <button mat-raised-button color="primary" (click)="createDockerTemplate()" class="create-button">Create docker template</button>
-            </div>
-
-            <div *ngIf="applianceToInstall.dynamips">
-                <div>
-                    Server type<br/>
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </div>
-                <div>
-                    Install required files 
-                    <button mat-icon-button matTooltip="Refresh list of images" matTooltipClass="custom-tooltip" (click)="refreshImages()">
-                        <mat-icon aria-label="Refresh list of images">refresh</mat-icon>
-                    </button><br/>
-                    <mat-list>
-                        <mat-list-item *ngFor="let image of applianceToInstall.images">
-                          <div class="list-item">
-                            <div>
-                                {{image.filename}}
-                            </div>
-                            <div>
-                                <input
-                                    type="file"
-                                    class="non-visible"
-                                    #file2
-                                    (change)="importImage($event, image.filename)"
-                                    ng2FileSelect
-                                    [uploader]="uploaderImage"/>
-                                <button class="button" mat-raised-button (click)="file2.click()">Import</button>
-                                <button class="button" mat-raised-button color="primary" (click)="createIosTemplate(image)">Create</button>
-                            </div>
-                          </div>
-                        </mat-list-item>
-                    </mat-list>
-                </div>
-            </div>
-
-            <div *ngIf="applianceToInstall.iou">
-                <div>
-                    Server type<br/>
-                    <mat-radio-group class="radio-group">
-                        <mat-radio-button [disabled]="!isLinuxPlatform" [checked]="!isGns3VmChosen" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
-                        <mat-radio-button [disabled]="!isGns3VmAvailable" [checked]="isGns3VmChosen" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
-                    </mat-radio-group>
-                </div>
-                <div>
-                    Install required files 
-                    <button mat-icon-button matTooltip="Refresh list of images" matTooltipClass="custom-tooltip" (click)="refreshImages()">
-                        <mat-icon aria-label="Refresh list of images">refresh</mat-icon>
-                    </button><br/>
-                    <mat-list>
-                        <mat-list-item *ngFor="let image of applianceToInstall.images">
-                          <div class="list-item">
-                            <div>
-                                {{image.filename}}
-                            </div>
-                            <div>
-                                <input
-                                    type="file"
-                                    class="non-visible"
-                                    #file2
-                                    (change)="importImage($, image.filename)"
-                                    ng2FileSelect
-                                    [uploader]="uploaderImage"/>
-                                <button class="button" mat-raised-button (click)="file2.click()">Import</button>
-                                <button class="button" mat-raised-button color="primary" (click)="createIouTemplate(image)">Create</button>
-                            </div>
-                          </div>
-                        </mat-list-item>
-                    </mat-list>
-                </div>
-            </div>
-        </mat-card>
-
         <div>
-            <button mat-button matStepperPrevious>Back</button>
-            <button mat-button (click)="onCloseClick()">Cancel</button>
+          Qemu binary<br />
+          <mat-select
+            class="selection-group"
+            placeholder="Qemu binary"
+            [(ngModel)]="selectedBinary"
+            [ngModelOptions]="{ standalone: true }"
+          >
+            <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
+              {{ binary.path }}
+            </mat-option>
+          </mat-select>
         </div>
-    </mat-step>
+        <div>
+          Install required files
+          <button
+            mat-icon-button
+            matTooltip="Refresh list of images"
+            matTooltipClass="custom-tooltip"
+            (click)="refreshImages()"
+          >
+            <mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
+          ><br />
+          <div>
+            <div *ngFor="let version of applianceToInstall.versions">
+              <div class="list-item">
+                <span>{{ applianceToInstall.name }} version {{ version.name }}</span>
+
+                <div>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    color="primary"
+                    (click)="createQemuTemplateFromVersion(version)"
+                  >
+                    Create
+                  </button>
+                </div>
+              </div>
+
+              <div class="list-item-inside" *ngIf="version.images.hda_disk_image">
+                <span>
+                  {{ version.images.hda_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hda_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hda_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file2
+                    (change)="importImage($event, version.images.hda_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file2.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hda_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
+              <div class="list-item-inside" *ngIf="version.images.hdb_disk_image">
+                <span>
+                  {{ version.images.hdb_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hdb_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hdb_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file3
+                    (change)="importImage($event, version.images.hdb_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file3.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hdb_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="applianceToInstall.docker">
+        <div>
+          Server type<br />
+          <mat-radio-group class="radio-group">
+            <mat-radio-button
+              [disabled]="!isLinuxPlatform"
+              [checked]="!isGns3VmChosen"
+              class="radio-button"
+              value="1"
+              (click)="setServerType('local')"
+              >Install the appliance locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              [checked]="isGns3VmChosen"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Install the appliance on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </div>
+        <button mat-raised-button color="primary" (click)="createDockerTemplate()" class="create-button">
+          Create docker template
+        </button>
+      </div>
+
+      <div *ngIf="applianceToInstall.dynamips">
+        <div>
+          Server type<br />
+          <mat-radio-group class="radio-group">
+            <mat-radio-button
+              [checked]="!isGns3VmChosen"
+              class="radio-button"
+              value="1"
+              (click)="setServerType('local')"
+              >Install the appliance locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              [checked]="isGns3VmChosen"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Install the appliance on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </div>
+        <div>
+          Install required files
+          <button
+            mat-icon-button
+            matTooltip="Refresh list of images"
+            matTooltipClass="custom-tooltip"
+            (click)="refreshImages()"
+          >
+            <mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
+          ><br />
+          <mat-list>
+            <mat-list-item *ngFor="let image of applianceToInstall.images">
+              <div class="list-item">
+                <div>
+                  {{ image.filename }}
+                </div>
+                <div>
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file2
+                    (change)="importImage($event, image.filename)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file2.click()">Import</button>
+                  <button class="button" mat-raised-button color="primary" (click)="createIosTemplate(image)">
+                    Create
+                  </button>
+                </div>
+              </div>
+            </mat-list-item>
+          </mat-list>
+        </div>
+      </div>
+
+      <div *ngIf="applianceToInstall.iou">
+        <div>
+          Server type<br />
+          <mat-radio-group class="radio-group">
+            <mat-radio-button
+              [disabled]="!isLinuxPlatform"
+              [checked]="!isGns3VmChosen"
+              class="radio-button"
+              value="1"
+              (click)="setServerType('local')"
+              >Install the appliance locally</mat-radio-button
+            >
+            <mat-radio-button
+              [disabled]="!isGns3VmAvailable"
+              [checked]="isGns3VmChosen"
+              class="radio-button"
+              value="2"
+              (click)="setServerType('gns3 vm')"
+              >Install the appliance on the GNS3 VM</mat-radio-button
+            >
+          </mat-radio-group>
+        </div>
+        <div>
+          Install required files
+          <button
+            mat-icon-button
+            matTooltip="Refresh list of images"
+            matTooltipClass="custom-tooltip"
+            (click)="refreshImages()"
+          >
+            <mat-icon aria-label="Refresh list of images">refresh</mat-icon></button
+          ><br />
+          <mat-list>
+            <mat-list-item *ngFor="let image of applianceToInstall.images">
+              <div class="list-item">
+                <div>
+                  {{ image.filename }}
+                </div>
+                <div>
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file2
+                    (change)="importImage($, image.filename)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file2.click()">Import</button>
+                  <button class="button" mat-raised-button color="primary" (click)="createIouTemplate(image)">
+                    Create
+                  </button>
+                </div>
+              </div>
+            </mat-list-item>
+          </mat-list>
+        </div>
+      </div>
+    </mat-card>
+
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="onCloseClick()">Cancel</button>
+    </div>
+  </mat-step>
 </mat-horizontal-stepper>
diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss
index 0637da95..20491523 100644
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss
@@ -1,73 +1,73 @@
 .radio-button {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
 .tableHeader {
-    width: 100%;
+  width: 100%;
 }
 
 .filter-field {
-    width: 100%;
+  width: 100%;
 }
 
 .example-container {
-    display: flex;
-    flex-direction: column;
-    max-height: 500px;
-    min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+  min-width: 300px;
 }
 
 .mat-table {
-    overflow: auto;
-    max-height: 500px;
+  overflow: auto;
+  max-height: 500px;
 }
 
 .element-row {
-    position: relative;
+  position: relative;
 }
 
 .element-row:not(.expanded) {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .element-row:not(.expanded):hover {
-    background: #f5f5f5;
+  background: #f5f5f5;
 }
 
 .element-row.expanded {
-    border-bottom-color: transparent;
+  border-bottom-color: transparent;
 }
 
 .list-item {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 15px;
 }
 
 .list-item-inside {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding-left: 30px;
-    margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-left: 30px;
+  margin-bottom: 15px;
 }
 
 .button {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .create-button {
-    width: 100%;
-    margin-top: 10px;
-    margin-bottom: 10px;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .radio-button {
-    width: 50%;
-    padding-top: 20px;
+  width: 50%;
+  padding-top: 20px;
 }
 
 .selection-group {
-    padding-bottom: 20px;
+  padding-bottom: 20px;
 }
diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
index 274f9dd2..6a5587fe 100644
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
@@ -33,649 +33,671 @@ import { TemplateNameDialogComponent } from './template-name-dialog/template-nam
 import * as SparkMD5 from 'spark-md5';
 
 @Component({
-    selector: 'app-new-template-dialog',
-    templateUrl: './new-template-dialog.component.html',
-    styleUrls: ['./new-template-dialog.component.scss'],
-    animations: [
-        trigger('detailExpand', [
-          state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
-          state('expanded', style({ height: '*', visibility: 'visible' })),
-          transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-        ]),
-    ],
+  selector: 'app-new-template-dialog',
+  templateUrl: './new-template-dialog.component.html',
+  styleUrls: ['./new-template-dialog.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
+      state('expanded', style({ height: '*', visibility: 'visible' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class NewTemplateDialogComponent implements OnInit {
-    @Input() server: Server;
-    @Input() project: Project;
+  @Input() server: Server;
+  @Input() project: Project;
 
-    uploader: FileUploader;
-    uploaderImage: FileUploader;
+  uploader: FileUploader;
+  uploaderImage: FileUploader;
 
-    public action: string = 'install';
-    public actionTitle: string = 'Install appliance from server';
-    public secondActionTitle: string = 'Appliance settings';
+  public action: string = 'install';
+  public actionTitle: string = 'Install appliance from server';
+  public secondActionTitle: string = 'Appliance settings';
 
-    public searchText: string = '';
-    public allAppliances: Appliance[] = [];
-    public appliances: Appliance[] = [];
-    public applianceToInstall: Appliance;
-    public selectedImages: any[];
+  public searchText: string = '';
+  public allAppliances: Appliance[] = [];
+  public appliances: Appliance[] = [];
+  public applianceToInstall: Appliance;
+  public selectedImages: any[];
 
-    public isGns3VmAvailable = false;
-    public isLinuxPlatform = false;
+  public isGns3VmAvailable = false;
+  public isLinuxPlatform = false;
 
-    private isGns3VmChosen = false;
-    private isLocalComputerChosen = false;
+  private isGns3VmChosen = false;
+  private isLocalComputerChosen = false;
 
-    public qemuBinaries: QemuBinary[] = [];
-    public selectedBinary: QemuBinary;
+  public qemuBinaries: QemuBinary[] = [];
+  public selectedBinary: QemuBinary;
 
-    public categories: string[] = ['all categories', 'router', 'multilayer_switch', 'guest', 'firewall'];
-    public category: string = 'all categories';
-    public displayedColumns: string[] = ['name', 'emulator', 'vendor', 'actions'];
+  public categories: string[] = ['all categories', 'router', 'multilayer_switch', 'guest', 'firewall'];
+  public category: string = 'all categories';
+  public displayedColumns: string[] = ['name', 'emulator', 'vendor', 'actions'];
 
-    public dataSource: MatTableDataSource<Appliance>;
+  public dataSource: MatTableDataSource<Appliance>;
 
-    private qemuImages: Image[] = [];
-    private iosImages: Image[] = [];
-    private iouImages: Image[] = [];
+  private qemuImages: Image[] = [];
+  private iosImages: Image[] = [];
+  private iouImages: Image[] = [];
 
-    private templates: Template[] = [];
+  private templates: Template[] = [];
 
-    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
-    @ViewChild('stepper', {static: true}) stepper: MatStepper;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild('stepper', { static: true }) stepper: MatStepper;
 
-    constructor(
-        public dialogRef: MatDialogRef<NewTemplateDialogComponent>,
-        private applianceService: ApplianceService,
-        private changeDetector: ChangeDetectorRef,
-        private toasterService: ToasterService,
-        private qemuService: QemuService,
-        private dockerService: DockerService,
-        private iosService: IosService,
-        private iouService: IouService,
-        private templateService: TemplateService,
-        public dialog: MatDialog,
-        private computeService: ComputeService,
-        private changeDetectorRef: ChangeDetectorRef,
-        private progressService: ProgressService
-    ) {}
+  constructor(
+    public dialogRef: MatDialogRef<NewTemplateDialogComponent>,
+    private applianceService: ApplianceService,
+    private changeDetector: ChangeDetectorRef,
+    private toasterService: ToasterService,
+    private qemuService: QemuService,
+    private dockerService: DockerService,
+    private iosService: IosService,
+    private iouService: IouService,
+    private templateService: TemplateService,
+    public dialog: MatDialog,
+    private computeService: ComputeService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private progressService: ProgressService
+  ) {}
 
-    ngOnInit() {
-        this.templateService.list(this.server).subscribe((templates) => {
-            this.templates = templates;
-        });
-        
-        this.computeService.getComputes(this.server).subscribe((computes) => {
-            computes.forEach(compute => {
-                if (compute.compute_id === 'vm') {
-                    this.isGns3VmAvailable = true;
-                    this.isGns3VmChosen = true;
-                }
-                if (compute.capabilities.platform === 'linux') this.isLinuxPlatform = true;
-            })
-        });
+  ngOnInit() {
+    this.templateService.list(this.server).subscribe((templates) => {
+      this.templates = templates;
+    });
 
-        this.qemuService.getImages(this.server).subscribe((qemuImages) => {
-            this.qemuImages = qemuImages;
-        });
-
-        this.iosService.getImages(this.server).subscribe((iosImages) => {
-            this.iosImages = iosImages;
-        });
-
-        this.iouService.getImages(this.server).subscribe((iouImages) => {
-            this.iouImages = iouImages;
-        });
-
-        this.applianceService.getAppliances(this.server).subscribe((appliances) => {
-            this.appliances = appliances;
-            this.appliances.forEach(appliance => {
-                if (appliance.docker) appliance.emulator = 'Docker';
-                if (appliance.dynamips) appliance.emulator = 'Dynamips';
-                if (appliance.iou) appliance.emulator = 'Iou';
-                if (appliance.qemu) appliance.emulator = 'Qemu';
-            });
-            this.allAppliances = appliances;
-            this.dataSource = new MatTableDataSource(this.allAppliances);
-            this.dataSource.paginator = this.paginator;
-        });
-
-        this.qemuService.getBinaries(this.server).subscribe((binaries) => {
-            this.qemuBinaries = binaries;
-        });
-
-        this.uploader =  new FileUploader({});
-        this.uploader.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-    
-        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error has occured');
-        };
-        
-        this.uploader.onSuccessItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.success('Appliance imported succesfully');
-            this.getAppliance(item.url);
-        };
-
-        this.uploaderImage =  new FileUploader({});
-        this.uploaderImage.onAfterAddingFile = file => {
-            file.withCredentials = false;
-        };
-    
-        this.uploaderImage.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.error('An error has occured');
-            this.progressService.deactivate();
-            this.uploaderImage.clearQueue();
-        };
-        
-        this.uploaderImage.onSuccessItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
-            this.toasterService.success('Image imported succesfully');
-            this.refreshImages();
-            this.progressService.deactivate();
-            this.uploaderImage.clearQueue();
-        };
-    }
-
-    updateAppliances() {
-        this.progressService.activate();
-        this.applianceService.updateAppliances(this.server).subscribe((appliances) => {
-            this.appliances = appliances;
-            this.progressService.deactivate();
-            this.toasterService.success('Appliances are up-to-date.');
-        }, error => {
-            this.progressService.deactivate();
-            this.toasterService.error('Appliances were not updated correctly.');
-        });
-    }
-
-    refreshImages() {
-        this.qemuService.getImages(this.server).subscribe((qemuImages) => {
-            this.qemuImages = qemuImages;
-        });
-
-        this.iosService.getImages(this.server).subscribe((iosImages) => {
-            this.iosImages = iosImages;
-        });
-
-        this.iouService.getImages(this.server).subscribe((iouImages) => {
-            this.iouImages = iouImages;
-        });
-    }
-
-    getAppliance(url: string) {
-        let str = url.split('/v2');
-        let appliancePath = str[str.length-1];
-        this.applianceService.getAppliance(this.server, appliancePath).subscribe((appliance: Appliance) => {
-            this.applianceToInstall = appliance;
-            setTimeout(() => {
-                this.stepper.next();
-            }, 100);
-        });
-    }
-
-    addAppliance(event): void {
-        let name = event.target.files[0].name.split('-')[0];
-        let fileName = event.target.files[0].name;
-        let file = event.target.files[0];
-        let fileReader: FileReader = new FileReader();
-        let emulator;
-
-        fileReader.onloadend = () => {
-            let appliance = JSON.parse(fileReader.result as string);
-
-            if (appliance.docker) emulator = 'docker';
-            if (appliance.dynamips) emulator = 'dynamips';
-            if (appliance.iou) emulator = 'iou';
-            if (appliance.qemu) emulator = 'qemu';
-
-            const url = this.applianceService.getUploadPath(this.server, emulator, fileName);
-            this.uploader.queue.forEach(elem => (elem.url = url));
-    
-            const itemToUpload = this.uploader.queue[0];
-            (itemToUpload as any).options.disableMultipart = true;
-    
-            this.uploader.uploadItem(itemToUpload);
-        };
-
-        fileReader.readAsText(file);
-    }
-
-    filterAppliances(event) {
-        let temporaryAppliances = this.allAppliances.filter(item => {
-          return item.name.toLowerCase().includes(this.searchText.toLowerCase());
-        });
-    
-        if (this.category === 'all categories' || !this.category) {
-          this.appliances = temporaryAppliances;
-        } else  {
-          this.appliances = temporaryAppliances.filter(t => t.category === this.category);
+    this.computeService.getComputes(this.server).subscribe((computes) => {
+      computes.forEach((compute) => {
+        if (compute.compute_id === 'vm') {
+          this.isGns3VmAvailable = true;
+          this.isGns3VmChosen = true;
         }
+        if (compute.capabilities.platform === 'linux') this.isLinuxPlatform = true;
+      });
+    });
 
-        this.dataSource = new MatTableDataSource(this.appliances);
-        this.dataSource.paginator = this.paginator;
+    this.qemuService.getImages(this.server).subscribe((qemuImages) => {
+      this.qemuImages = qemuImages;
+    });
+
+    this.iosService.getImages(this.server).subscribe((iosImages) => {
+      this.iosImages = iosImages;
+    });
+
+    this.iouService.getImages(this.server).subscribe((iouImages) => {
+      this.iouImages = iouImages;
+    });
+
+    this.applianceService.getAppliances(this.server).subscribe((appliances) => {
+      this.appliances = appliances;
+      this.appliances.forEach((appliance) => {
+        if (appliance.docker) appliance.emulator = 'Docker';
+        if (appliance.dynamips) appliance.emulator = 'Dynamips';
+        if (appliance.iou) appliance.emulator = 'Iou';
+        if (appliance.qemu) appliance.emulator = 'Qemu';
+      });
+      this.allAppliances = appliances;
+      this.dataSource = new MatTableDataSource(this.allAppliances);
+      this.dataSource.paginator = this.paginator;
+    });
+
+    this.qemuService.getBinaries(this.server).subscribe((binaries) => {
+      this.qemuBinaries = binaries;
+    });
+
+    this.uploader = new FileUploader({});
+    this.uploader.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+
+    this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+      this.toasterService.error('An error has occured');
+    };
+
+    this.uploader.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.toasterService.success('Appliance imported succesfully');
+      this.getAppliance(item.url);
+    };
+
+    this.uploaderImage = new FileUploader({});
+    this.uploaderImage.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+
+    this.uploaderImage.onErrorItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.toasterService.error('An error has occured');
+      this.progressService.deactivate();
+      this.uploaderImage.clearQueue();
+    };
+
+    this.uploaderImage.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      this.toasterService.success('Image imported succesfully');
+      this.refreshImages();
+      this.progressService.deactivate();
+      this.uploaderImage.clearQueue();
+    };
+  }
+
+  updateAppliances() {
+    this.progressService.activate();
+    this.applianceService.updateAppliances(this.server).subscribe(
+      (appliances) => {
+        this.appliances = appliances;
+        this.progressService.deactivate();
+        this.toasterService.success('Appliances are up-to-date.');
+      },
+      (error) => {
+        this.progressService.deactivate();
+        this.toasterService.error('Appliances were not updated correctly.');
+      }
+    );
+  }
+
+  refreshImages() {
+    this.qemuService.getImages(this.server).subscribe((qemuImages) => {
+      this.qemuImages = qemuImages;
+    });
+
+    this.iosService.getImages(this.server).subscribe((iosImages) => {
+      this.iosImages = iosImages;
+    });
+
+    this.iouService.getImages(this.server).subscribe((iouImages) => {
+      this.iouImages = iouImages;
+    });
+  }
+
+  getAppliance(url: string) {
+    let str = url.split('/v2');
+    let appliancePath = str[str.length - 1];
+    this.applianceService.getAppliance(this.server, appliancePath).subscribe((appliance: Appliance) => {
+      this.applianceToInstall = appliance;
+      setTimeout(() => {
+        this.stepper.next();
+      }, 100);
+    });
+  }
+
+  addAppliance(event): void {
+    let name = event.target.files[0].name.split('-')[0];
+    let fileName = event.target.files[0].name;
+    let file = event.target.files[0];
+    let fileReader: FileReader = new FileReader();
+    let emulator;
+
+    fileReader.onloadend = () => {
+      let appliance = JSON.parse(fileReader.result as string);
+
+      if (appliance.docker) emulator = 'docker';
+      if (appliance.dynamips) emulator = 'dynamips';
+      if (appliance.iou) emulator = 'iou';
+      if (appliance.qemu) emulator = 'qemu';
+
+      const url = this.applianceService.getUploadPath(this.server, emulator, fileName);
+      this.uploader.queue.forEach((elem) => (elem.url = url));
+
+      const itemToUpload = this.uploader.queue[0];
+      (itemToUpload as any).options.disableMultipart = true;
+
+      this.uploader.uploadItem(itemToUpload);
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  filterAppliances(event) {
+    let temporaryAppliances = this.allAppliances.filter((item) => {
+      return item.name.toLowerCase().includes(this.searchText.toLowerCase());
+    });
+
+    if (this.category === 'all categories' || !this.category) {
+      this.appliances = temporaryAppliances;
+    } else {
+      this.appliances = temporaryAppliances.filter((t) => t.category === this.category);
     }
 
-    setAction(action: string) {
-        this.action = action;
-        if (action === 'install') {
-            this.actionTitle = 'Install appliance from server';
-        } else if (action === 'import') {
-            this.actionTitle = 'Import an appliance file';
-        }
+    this.dataSource = new MatTableDataSource(this.appliances);
+    this.dataSource.paginator = this.paginator;
+  }
+
+  setAction(action: string) {
+    this.action = action;
+    if (action === 'install') {
+      this.actionTitle = 'Install appliance from server';
+    } else if (action === 'import') {
+      this.actionTitle = 'Import an appliance file';
     }
+  }
 
-    setServerType(serverType: string) {
-        if (serverType === 'gns3 vm') {
-            this.isGns3VmChosen = true;
-            this.isLocalComputerChosen = false;
-        } else {
-            this.isGns3VmChosen = false;
-            this.isLocalComputerChosen = true;
-        }
+  setServerType(serverType: string) {
+    if (serverType === 'gns3 vm') {
+      this.isGns3VmChosen = true;
+      this.isLocalComputerChosen = false;
+    } else {
+      this.isGns3VmChosen = false;
+      this.isLocalComputerChosen = true;
     }
+  }
 
-    sortData(sort: Sort) {
-        if (!sort.active || sort.direction === '') return;
+  sortData(sort: Sort) {
+    if (!sort.active || sort.direction === '') return;
 
-        let appliances = this.appliances.slice();
-        this.appliances = appliances.sort((a, b) => {
-            const isAsc = sort.direction === 'asc';
-            if (sort.active === 'name') {
-                return compareNames(a.name, b.name, isAsc);
-            } else if (sort.active === 'emulator') {
-                return compareNames(a.emulator, b.emulator, isAsc);
-            } else if (sort.active === 'vendor') {
-                return compareNames(a.vendor_name, b.vendor_name, isAsc);
-            } else return 0;
-        });
-    }
+    let appliances = this.appliances.slice();
+    this.appliances = appliances.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      if (sort.active === 'name') {
+        return compareNames(a.name, b.name, isAsc);
+      } else if (sort.active === 'emulator') {
+        return compareNames(a.emulator, b.emulator, isAsc);
+      } else if (sort.active === 'vendor') {
+        return compareNames(a.vendor_name, b.vendor_name, isAsc);
+      } else return 0;
+    });
+  }
 
-    onCloseClick() {
-        this.dialogRef.close();
-    }
+  onCloseClick() {
+    this.dialogRef.close();
+  }
 
-    install(object: Appliance) {
-        this.applianceToInstall = object;
+  install(object: Appliance) {
+    this.applianceToInstall = object;
+    setTimeout(() => {
+      this.stepper.next();
+      if (this.applianceToInstall.qemu) {
         setTimeout(() => {
-            this.stepper.next();
-            if (this.applianceToInstall.qemu) {
-                setTimeout(() => {
-                    if (this.qemuBinaries.length) {
-                        if (this.applianceToInstall.qemu.arch === 'x86_64') {
-                            let filtered_binaries = this.qemuBinaries.filter(n => n.path.includes('qemu-system-x86_64'));
-                            if (filtered_binaries.length) {
-                                this.selectedBinary = filtered_binaries[0];
-                            }
-                        } else if (this.applianceToInstall.qemu.arch === 'i386') {
-                            let filtered_binaries = this.qemuBinaries.filter(n => n.path.includes('qemu-system-i386'));
-                            if (filtered_binaries.length) {
-                                this.selectedBinary = filtered_binaries[0];
-                            }
-                        } else if (this.applianceToInstall.qemu.arch === 'x86_64') {
-                            let filtered_binaries = this.qemuBinaries.filter(n => n.path.includes('qemu-system-arm'));
-                            if (filtered_binaries.length) {
-                                this.selectedBinary = filtered_binaries[0];
-                            }
-                        } else {
-                            this.selectedBinary = this.qemuBinaries[0];
-                        }
-                    }
-                }, 100);
+          if (this.qemuBinaries.length) {
+            if (this.applianceToInstall.qemu.arch === 'x86_64') {
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-x86_64'));
+              if (filtered_binaries.length) {
+                this.selectedBinary = filtered_binaries[0];
+              }
+            } else if (this.applianceToInstall.qemu.arch === 'i386') {
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-i386'));
+              if (filtered_binaries.length) {
+                this.selectedBinary = filtered_binaries[0];
+              }
+            } else if (this.applianceToInstall.qemu.arch === 'x86_64') {
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-arm'));
+              if (filtered_binaries.length) {
+                this.selectedBinary = filtered_binaries[0];
+              }
+            } else {
+              this.selectedBinary = this.qemuBinaries[0];
             }
+          }
         }, 100);
-    }
+      }
+    }, 100);
+  }
 
-    showInfo(object: Appliance) {
-        let dialogRef = this.dialog.open(ApplianceInfoDialogComponent, {
-            width: '250px',
-            data: {appliance: object}
-        });
-        dialogRef.componentInstance.appliance = object;
-    }
+  showInfo(object: Appliance) {
+    let dialogRef = this.dialog.open(ApplianceInfoDialogComponent, {
+      width: '250px',
+      data: { appliance: object },
+    });
+    dialogRef.componentInstance.appliance = object;
+  }
 
-    importImage(event, imageName) {
-        this.progressService.activate();
-        this.computeChecksumMd5(event.target.files[0], false).then((output) => {
-            let imageToInstall = this.applianceToInstall.images.filter(n => n.filename === imageName)[0];
+  importImage(event, imageName) {
+    this.progressService.activate();
+    this.computeChecksumMd5(event.target.files[0], false).then((output) => {
+      let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];
 
-            if (imageToInstall.md5sum !== output) {
-                this.progressService.deactivate();
-                const dialogRef = this.dialog.open(InformationDialogComponent, {
-                    width: '400px',
-                    height: '200px',
-                    autoFocus: false,
-                    disableClose: true
-                });
-                dialogRef.componentInstance.confirmationMessage = `This is not the correct file. 
-                    The MD5 sum is ${output} and should be ${imageToInstall.md5sum}. Do you want to accept it at your own risks?`;
-                dialogRef.afterClosed().subscribe((answer: boolean) => {
-                    if (answer) {
-                        this.importImageFile(event)
-                    } else {
-                        this.uploaderImage.clearQueue();
-                    }
-                });
-            } else {
-                this.importImageFile(event);
-            }
-        });
-    }
-
-    importImageFile(event) {
-        let name = event.target.files[0].name.split('-')[0];
-        let fileName = event.target.files[0].name;
-        let file = event.target.files[0];
-        let fileReader: FileReader = new FileReader();
-        let emulator;
-
-        fileReader.onloadend = () => {
-            if (this.applianceToInstall.qemu) emulator = 'qemu';
-            if (this.applianceToInstall.dynamips) emulator = 'dynamips';
-            if (this.applianceToInstall.iou) emulator = 'iou';
-
-            const url = this.applianceService.getUploadPath(this.server, emulator, fileName);
-            this.uploaderImage.queue.forEach(elem => (elem.url = url));
-    
-            const itemToUpload = this.uploaderImage.queue[0];
-            (itemToUpload as any).options.disableMultipart = true;
-    
-            this.uploaderImage.uploadItem(itemToUpload);
-            this.progressService.activate();
-        };
-
-        fileReader.readAsText(file);
-    }
-
-    checkImageFromVersion(image: string): boolean {
-        let imageToInstall = this.applianceToInstall.images.filter(n => n.filename === image)[0];
-        if (this.applianceToInstall.qemu) {
-            if (this.qemuImages.filter(n => n.md5sum === imageToInstall.md5sum).length > 0) return true;
-        } else if (this.applianceToInstall.dynamips) {
-            if (this.iosImages.filter(n => n.md5sum === imageToInstall.md5sum).length > 0) return true;
-        } else if (this.applianceToInstall.iou) {
-            if (this.iouImages.filter(n => n.md5sum === imageToInstall.md5sum).length > 0) return true;
-        }
-
-        return false;
-    }
-
-    checkImages(version: Version): boolean {
-        if (version.images.hdb_disk_image) {
-            if (this.checkImageFromVersion(version.images.hda_disk_image) && this.checkImageFromVersion(version.images.hdb_disk_image)) return true;
-            return false;
-        }
-
-        if (this.checkImageFromVersion(version.images.hda_disk_image)) return true;
-        return false;
-    }
-
-    openConfirmationDialog(message: string, link: string) {
+      if (imageToInstall.md5sum !== output) {
+        this.progressService.deactivate();
         const dialogRef = this.dialog.open(InformationDialogComponent, {
-            width: '400px',
-            height: '200px',
-            autoFocus: false,
-            disableClose: true
+          width: '400px',
+          height: '200px',
+          autoFocus: false,
+          disableClose: true,
         });
-        dialogRef.componentInstance.confirmationMessage = message;
-      
+        dialogRef.componentInstance.confirmationMessage = `This is not the correct file. 
+                    The MD5 sum is ${output} and should be ${imageToInstall.md5sum}. Do you want to accept it at your own risks?`;
         dialogRef.afterClosed().subscribe((answer: boolean) => {
-            if (answer) {
-              window.open(link);
-            }
+          if (answer) {
+            this.importImageFile(event);
+          } else {
+            this.uploaderImage.clearQueue();
+          }
         });
+      } else {
+        this.importImageFile(event);
+      }
+    });
+  }
+
+  importImageFile(event) {
+    let name = event.target.files[0].name.split('-')[0];
+    let fileName = event.target.files[0].name;
+    let file = event.target.files[0];
+    let fileReader: FileReader = new FileReader();
+    let emulator;
+
+    fileReader.onloadend = () => {
+      if (this.applianceToInstall.qemu) emulator = 'qemu';
+      if (this.applianceToInstall.dynamips) emulator = 'dynamips';
+      if (this.applianceToInstall.iou) emulator = 'iou';
+
+      const url = this.applianceService.getUploadPath(this.server, emulator, fileName);
+      this.uploaderImage.queue.forEach((elem) => (elem.url = url));
+
+      const itemToUpload = this.uploaderImage.queue[0];
+      (itemToUpload as any).options.disableMultipart = true;
+
+      this.uploaderImage.uploadItem(itemToUpload);
+      this.progressService.activate();
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  checkImageFromVersion(image: string): boolean {
+    let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === image)[0];
+    if (this.applianceToInstall.qemu) {
+      if (this.qemuImages.filter((n) => n.md5sum === imageToInstall.md5sum).length > 0) return true;
+    } else if (this.applianceToInstall.dynamips) {
+      if (this.iosImages.filter((n) => n.md5sum === imageToInstall.md5sum).length > 0) return true;
+    } else if (this.applianceToInstall.iou) {
+      if (this.iouImages.filter((n) => n.md5sum === imageToInstall.md5sum).length > 0) return true;
     }
 
-    downloadImage(image: Image) {
-        const directDownloadMessage: string = "Download will redirect you where the required file can be downloaded, you may have to be registered with the vendor in order to download the file.";
-        const compressionMessage: string = `The file is compressed with ${image.compression}, it must be uncompressed first.`;
+    return false;
+  }
 
-        if (image.direct_download_url) {
-            if (image.compression) {
-                this.openConfirmationDialog(compressionMessage, image.direct_download_url);
-            } else {
-                window.open(image.direct_download_url);
-            }
+  checkImages(version: Version): boolean {
+    if (version.images.hdb_disk_image) {
+      if (
+        this.checkImageFromVersion(version.images.hda_disk_image) &&
+        this.checkImageFromVersion(version.images.hdb_disk_image)
+      )
+        return true;
+      return false;
+    }
+
+    if (this.checkImageFromVersion(version.images.hda_disk_image)) return true;
+    return false;
+  }
+
+  openConfirmationDialog(message: string, link: string) {
+    const dialogRef = this.dialog.open(InformationDialogComponent, {
+      width: '400px',
+      height: '200px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    dialogRef.componentInstance.confirmationMessage = message;
+
+    dialogRef.afterClosed().subscribe((answer: boolean) => {
+      if (answer) {
+        window.open(link);
+      }
+    });
+  }
+
+  downloadImage(image: Image) {
+    const directDownloadMessage: string =
+      'Download will redirect you where the required file can be downloaded, you may have to be registered with the vendor in order to download the file.';
+    const compressionMessage: string = `The file is compressed with ${image.compression}, it must be uncompressed first.`;
+
+    if (image.direct_download_url) {
+      if (image.compression) {
+        this.openConfirmationDialog(compressionMessage, image.direct_download_url);
+      } else {
+        window.open(image.direct_download_url);
+      }
+    } else {
+      this.openConfirmationDialog(directDownloadMessage, image.download_url);
+    }
+  }
+
+  downloadImageFromVersion(image: string) {
+    this.applianceToInstall.images.forEach((n) => {
+      if (n.filename === image) this.downloadImage(n);
+    });
+  }
+
+  getCategory() {
+    if (this.applianceToInstall.category === 'multilayer_switch') {
+      return 'switch';
+    }
+    return this.applianceToInstall.category;
+  }
+
+  createIouTemplate(image: Image) {
+    let iouTemplate: IouTemplate = new IouTemplate();
+    iouTemplate.nvram = this.applianceToInstall.iou.nvram;
+    iouTemplate.ram = this.applianceToInstall.iou.ram;
+    iouTemplate.ethernet_adapters = this.applianceToInstall.iou.ethernet_adapters;
+    iouTemplate.serial_adapters = this.applianceToInstall.iou.serial_adapters;
+    iouTemplate.startup_config = this.applianceToInstall.iou.startup_config;
+    iouTemplate.builtin = this.applianceToInstall.builtin;
+    iouTemplate.category = this.getCategory();
+    iouTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iouTemplate.symbol = this.applianceToInstall.symbol;
+    iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+    iouTemplate.template_id = uuid();
+    iouTemplate.path = image.filename;
+    iouTemplate.template_type = 'iou';
+
+    const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
+      width: '400px',
+      height: '250px',
+      autoFocus: false,
+      disableClose: true,
+      data: {
+        name: this.applianceToInstall.name,
+      },
+    });
+    dialogRef.componentInstance.server = this.server;
+    dialogRef.afterClosed().subscribe((answer: string) => {
+      if (answer) {
+        iouTemplate.name = answer;
+
+        this.iouService.addTemplate(this.server, iouTemplate).subscribe((template) => {
+          this.templateService.newTemplateCreated.next(template);
+          this.toasterService.success('Template added');
+          this.dialogRef.close();
+        });
+      } else {
+        return false;
+      }
+    });
+  }
+
+  createIosTemplate(image: Image) {
+    let iosTemplate: IosTemplate = new IosTemplate();
+    iosTemplate.chassis = this.applianceToInstall.dynamips.chassis;
+    iosTemplate.nvram = this.applianceToInstall.dynamips.nvram;
+    iosTemplate.platform = this.applianceToInstall.dynamips.platform;
+    iosTemplate.ram = this.applianceToInstall.dynamips.ram;
+    iosTemplate.startup_config = this.applianceToInstall.dynamips.startup_config;
+    iosTemplate.slot0 = this.applianceToInstall.dynamips.slot0;
+    iosTemplate.slot1 = this.applianceToInstall.dynamips.slot1;
+    iosTemplate.slot2 = this.applianceToInstall.dynamips.slot2;
+    iosTemplate.slot3 = this.applianceToInstall.dynamips.slot3;
+    iosTemplate.slot4 = this.applianceToInstall.dynamips.slot4;
+    iosTemplate.slot5 = this.applianceToInstall.dynamips.slot5;
+    iosTemplate.slot6 = this.applianceToInstall.dynamips.slot6;
+    iosTemplate.slot7 = this.applianceToInstall.dynamips.slot7;
+    iosTemplate.builtin = this.applianceToInstall.builtin;
+    iosTemplate.category = this.getCategory();
+    iosTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iosTemplate.symbol = this.applianceToInstall.symbol;
+    iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+    iosTemplate.template_id = uuid();
+    iosTemplate.image = image.filename;
+    iosTemplate.template_type = 'dynamips';
+
+    const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
+      width: '400px',
+      height: '250px',
+      autoFocus: false,
+      disableClose: true,
+      data: {
+        name: this.applianceToInstall.name,
+      },
+    });
+    dialogRef.componentInstance.server = this.server;
+    dialogRef.afterClosed().subscribe((answer: string) => {
+      if (answer) {
+        iosTemplate.name = answer;
+
+        this.iosService.addTemplate(this.server, iosTemplate).subscribe((template) => {
+          this.templateService.newTemplateCreated.next((template as any) as Template);
+          this.toasterService.success('Template added');
+          this.dialogRef.close();
+        });
+      } else {
+        return false;
+      }
+    });
+  }
+
+  createDockerTemplate() {
+    let dockerTemplate: DockerTemplate = new DockerTemplate();
+    dockerTemplate.adapters = this.applianceToInstall.docker.adapters;
+    dockerTemplate.console_type = this.applianceToInstall.docker.console_type;
+    dockerTemplate.builtin = this.applianceToInstall.builtin;
+    dockerTemplate.category = this.getCategory();
+    dockerTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    dockerTemplate.symbol = this.applianceToInstall.symbol;
+    dockerTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+    dockerTemplate.template_id = uuid();
+    dockerTemplate.image = this.applianceToInstall.docker.image;
+    dockerTemplate.template_type = 'docker';
+
+    const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
+      width: '400px',
+      height: '250px',
+      autoFocus: false,
+      disableClose: true,
+      data: {
+        name: this.applianceToInstall.name,
+      },
+    });
+    dialogRef.componentInstance.server = this.server;
+    dialogRef.afterClosed().subscribe((answer: string) => {
+      if (answer) {
+        dockerTemplate.name = answer;
+
+        this.dockerService.addTemplate(this.server, dockerTemplate).subscribe((template) => {
+          this.templateService.newTemplateCreated.next((template as any) as Template);
+          this.toasterService.success('Template added');
+          this.dialogRef.close();
+        });
+      } else {
+        return false;
+      }
+    });
+  }
+
+  createQemuTemplateFromVersion(version: Version) {
+    if (!this.checkImages(version)) {
+      this.toasterService.error('Please install required images first');
+      return;
+    }
+
+    if (!this.selectedBinary) {
+      this.toasterService.error('Please select QEMU binary first');
+      return;
+    }
+
+    let qemuTemplate: QemuTemplate = new QemuTemplate();
+    qemuTemplate.ram = this.applianceToInstall.qemu.ram;
+    qemuTemplate.adapters = this.applianceToInstall.qemu.adapters;
+    qemuTemplate.adapter_type = this.applianceToInstall.qemu.adapter_type;
+    qemuTemplate.boot_priority = this.applianceToInstall.qemu.boot_priority;
+    qemuTemplate.console_type = this.applianceToInstall.qemu.console_type;
+    qemuTemplate.hda_disk_interface = this.applianceToInstall.qemu.hda_disk_interface;
+    qemuTemplate.hdb_disk_interface = this.applianceToInstall.qemu.hdb_disk_interface;
+    qemuTemplate.hdc_disk_interface = this.applianceToInstall.qemu.hdc_disk_interface;
+    qemuTemplate.hdd_disk_interface = this.applianceToInstall.qemu.hdd_disk_interface;
+    qemuTemplate.builtin = this.applianceToInstall.builtin;
+    qemuTemplate.category = this.getCategory();
+    qemuTemplate.first_port_name = this.applianceToInstall.first_port_name;
+    qemuTemplate.port_name_format = this.applianceToInstall.port_name_format;
+    qemuTemplate.symbol = this.applianceToInstall.symbol;
+    qemuTemplate.qemu_path = this.selectedBinary.path;
+    qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
+    qemuTemplate.template_id = uuid();
+    qemuTemplate.hda_disk_image = version.images.hda_disk_image;
+    qemuTemplate.hdb_disk_image = version.images.hdb_disk_image;
+    qemuTemplate.template_type = 'qemu';
+    qemuTemplate.usage = this.applianceToInstall.usage;
+
+    const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
+      width: '400px',
+      height: '250px',
+      autoFocus: false,
+      disableClose: true,
+      data: {
+        name: this.applianceToInstall.name,
+      },
+    });
+    dialogRef.componentInstance.server = this.server;
+    dialogRef.afterClosed().subscribe((answer: string) => {
+      if (answer) {
+        qemuTemplate.name = answer;
+
+        this.qemuService.addTemplate(this.server, qemuTemplate).subscribe((template) => {
+          this.templateService.newTemplateCreated.next((template as any) as Template);
+          this.toasterService.success('Template added');
+          this.dialogRef.close();
+        });
+      } else {
+        return false;
+      }
+    });
+  }
+
+  private computeChecksumMd5(file: File, encode = false): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const chunkSize = 2097152;
+      const spark = new SparkMD5.ArrayBuffer();
+      const fileReader = new FileReader();
+      let cursor = 0;
+
+      fileReader.onerror = function (): void {
+        reject('MD5 computation failed - error reading the file');
+      };
+
+      function processChunk(chunkStart: number): void {
+        const chunkEnd = Math.min(file.size, chunkStart + chunkSize);
+        fileReader.readAsArrayBuffer(file.slice(chunkStart, chunkEnd));
+      }
+
+      fileReader.onload = function (e: any): void {
+        spark.append(e.target.result);
+        cursor += chunkSize;
+        if (cursor < file.size) {
+          processChunk(cursor);
         } else {
-            this.openConfirmationDialog(directDownloadMessage, image.download_url);
+          resolve(spark.end(encode));
         }
-    }
+      };
 
-    downloadImageFromVersion(image: string) {
-        this.applianceToInstall.images.forEach(n => {
-            if (n.filename === image) this.downloadImage(n);
-        });
-    }
-
-    getCategory() {
-        if (this.applianceToInstall.category === 'multilayer_switch') {
-            return 'switch';
-        }
-        return this.applianceToInstall.category;
-    }
-
-    createIouTemplate (image: Image) {
-        let iouTemplate: IouTemplate = new IouTemplate();
-        iouTemplate.nvram = this.applianceToInstall.iou.nvram;
-        iouTemplate.ram = this.applianceToInstall.iou.ram;
-        iouTemplate.ethernet_adapters = this.applianceToInstall.iou.ethernet_adapters;
-        iouTemplate.serial_adapters = this.applianceToInstall.iou.serial_adapters;
-        iouTemplate.startup_config = this.applianceToInstall.iou.startup_config;
-        iouTemplate.builtin = this.applianceToInstall.builtin;
-        iouTemplate.category = this.getCategory();
-        iouTemplate.default_name_format = this.applianceToInstall.port_name_format;
-        iouTemplate.symbol = this.applianceToInstall.symbol;
-        iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-        iouTemplate.template_id = uuid();
-        iouTemplate.path = image.filename;
-        iouTemplate.template_type = 'iou';
-
-        const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
-            width: '400px',
-            height: '250px',
-            autoFocus: false,
-            disableClose: true,
-            data: {
-                name: this.applianceToInstall.name
-            }
-        });
-        dialogRef.componentInstance.server = this.server;
-        dialogRef.afterClosed().subscribe((answer: string) => {
-            if (answer) {
-                iouTemplate.name = answer;
-        
-                this.iouService.addTemplate(this.server, iouTemplate).subscribe((template) => {
-                    this.templateService.newTemplateCreated.next(template);
-                    this.toasterService.success('Template added');
-                    this.dialogRef.close();
-                });
-            } else{
-                return false;
-            }
-        });
-    }
-
-    createIosTemplate(image: Image) {
-        let iosTemplate: IosTemplate = new IosTemplate();
-        iosTemplate.chassis = this.applianceToInstall.dynamips.chassis;
-        iosTemplate.nvram = this.applianceToInstall.dynamips.nvram;
-        iosTemplate.platform = this.applianceToInstall.dynamips.platform;
-        iosTemplate.ram = this.applianceToInstall.dynamips.ram;
-        iosTemplate.startup_config = this.applianceToInstall.dynamips.startup_config;
-        iosTemplate.slot0 = this.applianceToInstall.dynamips.slot0;
-        iosTemplate.slot1 = this.applianceToInstall.dynamips.slot1;
-        iosTemplate.slot2 = this.applianceToInstall.dynamips.slot2;
-        iosTemplate.slot3 = this.applianceToInstall.dynamips.slot3;
-        iosTemplate.slot4 = this.applianceToInstall.dynamips.slot4;
-        iosTemplate.slot5 = this.applianceToInstall.dynamips.slot5;
-        iosTemplate.slot6 = this.applianceToInstall.dynamips.slot6;
-        iosTemplate.slot7 = this.applianceToInstall.dynamips.slot7;
-        iosTemplate.builtin = this.applianceToInstall.builtin;
-        iosTemplate.category = this.getCategory();
-        iosTemplate.default_name_format = this.applianceToInstall.port_name_format;
-        iosTemplate.symbol = this.applianceToInstall.symbol;
-        iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-        iosTemplate.template_id = uuid();
-        iosTemplate.image = image.filename;
-        iosTemplate.template_type = 'dynamips';
-
-        const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
-            width: '400px',
-            height: '250px',
-            autoFocus: false,
-            disableClose: true,
-            data: {
-                name: this.applianceToInstall.name
-            }
-        });
-        dialogRef.componentInstance.server = this.server;
-        dialogRef.afterClosed().subscribe((answer: string) => {
-            if (answer) {
-                iosTemplate.name = answer;
-        
-                this.iosService.addTemplate(this.server, iosTemplate).subscribe((template) => {
-                    this.templateService.newTemplateCreated.next(template as any as Template);
-                    this.toasterService.success('Template added');
-                    this.dialogRef.close();
-                });
-            } else{
-                return false;
-            }
-        });
-    }
-
-    createDockerTemplate() {
-        let dockerTemplate: DockerTemplate = new DockerTemplate();
-        dockerTemplate.adapters = this.applianceToInstall.docker.adapters;
-        dockerTemplate.console_type = this.applianceToInstall.docker.console_type;
-        dockerTemplate.builtin = this.applianceToInstall.builtin;
-        dockerTemplate.category = this.getCategory();
-        dockerTemplate.default_name_format = this.applianceToInstall.port_name_format;
-        dockerTemplate.symbol = this.applianceToInstall.symbol;
-        dockerTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-        dockerTemplate.template_id = uuid();
-        dockerTemplate.image = this.applianceToInstall.docker.image;
-        dockerTemplate.template_type = 'docker';
-
-        const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
-            width: '400px',
-            height: '250px',
-            autoFocus: false,
-            disableClose: true,
-            data: {
-                name: this.applianceToInstall.name
-            }
-        });
-        dialogRef.componentInstance.server = this.server;
-        dialogRef.afterClosed().subscribe((answer: string) => {
-            if (answer) {
-                dockerTemplate.name = answer;
-        
-                this.dockerService.addTemplate(this.server, dockerTemplate).subscribe((template) => {
-                    this.templateService.newTemplateCreated.next(template as any as Template);
-                    this.toasterService.success('Template added');
-                    this.dialogRef.close();
-                });
-            } else{
-                return false;
-            }
-        });
-    }
-
-    createQemuTemplateFromVersion(version: Version) {
-        if (!this.checkImages(version)) {
-            this.toasterService.error('Please install required images first');
-            return;
-        }
-
-        if (!this.selectedBinary) {
-            this.toasterService.error('Please select QEMU binary first');
-            return;
-        }
-
-        let qemuTemplate: QemuTemplate = new QemuTemplate();
-        qemuTemplate.ram = this.applianceToInstall.qemu.ram;
-        qemuTemplate.adapters = this.applianceToInstall.qemu.adapters;
-        qemuTemplate.adapter_type = this.applianceToInstall.qemu.adapter_type;
-        qemuTemplate.boot_priority = this.applianceToInstall.qemu.boot_priority;
-        qemuTemplate.console_type =  this.applianceToInstall.qemu.console_type;
-        qemuTemplate.hda_disk_interface = this.applianceToInstall.qemu.hda_disk_interface;
-        qemuTemplate.hdb_disk_interface = this.applianceToInstall.qemu.hdb_disk_interface;
-        qemuTemplate.hdc_disk_interface = this.applianceToInstall.qemu.hdc_disk_interface;
-        qemuTemplate.hdd_disk_interface = this.applianceToInstall.qemu.hdd_disk_interface;
-        qemuTemplate.builtin = this.applianceToInstall.builtin;
-        qemuTemplate.category = this.getCategory();
-        qemuTemplate.first_port_name = this.applianceToInstall.first_port_name;
-        qemuTemplate.port_name_format = this.applianceToInstall.port_name_format;
-        qemuTemplate.symbol = this.applianceToInstall.symbol;
-        qemuTemplate.qemu_path = this.selectedBinary.path;
-        qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
-        qemuTemplate.template_id = uuid();
-        qemuTemplate.hda_disk_image = version.images.hda_disk_image;
-        qemuTemplate.hdb_disk_image = version.images.hdb_disk_image;
-        qemuTemplate.template_type = 'qemu';
-        qemuTemplate.usage = this.applianceToInstall.usage;
-
-
-        const dialogRef = this.dialog.open(TemplateNameDialogComponent, {
-            width: '400px',
-            height: '250px',
-            autoFocus: false,
-            disableClose: true,
-            data: {
-                name: this.applianceToInstall.name
-            }
-        });
-        dialogRef.componentInstance.server = this.server;
-        dialogRef.afterClosed().subscribe((answer: string) => {
-            if (answer) {
-                qemuTemplate.name = answer;
-        
-                this.qemuService.addTemplate(this.server, qemuTemplate).subscribe((template) => {
-                    this.templateService.newTemplateCreated.next(template as any as Template);
-                    this.toasterService.success('Template added');
-                    this.dialogRef.close();
-                });
-            } else{
-                return false;
-            }
-        });
-    }
-
-    private computeChecksumMd5(file: File, encode = false): Promise<string> {
-        return new Promise((resolve, reject) => {
-            const chunkSize = 2097152;
-            const spark = new SparkMD5.ArrayBuffer();
-            const fileReader = new FileReader();
-            let cursor = 0;
-        
-            fileReader.onerror = function(): void {
-                reject('MD5 computation failed - error reading the file');
-            };
-
-            function processChunk(chunkStart: number): void {
-                const chunkEnd = Math.min(file.size, chunkStart + chunkSize);
-                fileReader.readAsArrayBuffer(file.slice(chunkStart, chunkEnd));
-            }
-
-            fileReader.onload = function(e: any): void {
-                spark.append(e.target.result);
-                cursor += chunkSize;
-                if (cursor < file.size) {
-                    processChunk(cursor);
-                } else {
-                    resolve(spark.end(encode));
-                }
-            };
-        
-            processChunk(0);
-        });
-    }
+      processChunk(0);
+    });
+  }
 }
 
 function compareNames(a: string, b: string, isAsc: boolean) {
-    a = a.toLowerCase();
-    b = b.toLowerCase();
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  a = a.toLowerCase();
+  b = b.toLowerCase();
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }
diff --git a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.html b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.html
index 72de353f..f83bec76 100644
--- a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.html
+++ b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.html
@@ -21,6 +21,8 @@
   </mat-form-field>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">Add template</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">
+      Add template
+    </button>
   </div>
 </form>
diff --git a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.scss b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.scss
index acf081db..2fa952b3 100644
--- a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.scss
+++ b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.scss
@@ -1,7 +1,7 @@
 .file-name-form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .project-snackbar {
-    background: #2196F3;
+  background: #2196f3;
 }
diff --git a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts
index 62a88939..ed89222f 100644
--- a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts
@@ -10,12 +10,11 @@ import { TemplateService } from '../../../../services/template.service';
 import { templateNameAsyncValidator } from '../../../../validators/template-name-async-validator';
 import { Template } from '../../../../models/template';
 
-
 @Component({
   selector: 'app-template-name-dialog',
   templateUrl: './template-name-dialog.component.html',
   styleUrls: ['./template-name-dialog.component.scss'],
-  providers: [ProjectNameValidator]
+  providers: [ProjectNameValidator],
 })
 export class TemplateNameDialogComponent implements OnInit {
   server: Server;
@@ -35,9 +34,13 @@ export class TemplateNameDialogComponent implements OnInit {
   ngOnInit() {
     let name = this.data['name'];
     this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl(name, [Validators.required, this.templateNameValidator.get], [templateNameAsyncValidator(this.server, this.templateService)])
+      templateName: new FormControl(
+        name,
+        [Validators.required, this.templateNameValidator.get],
+        [templateNameAsyncValidator(this.server, this.templateService)]
+      ),
     });
-    
+
     setTimeout(() => {
       this.templateNameForm.controls['templateName'].markAsTouched();
     }, 100);
@@ -54,7 +57,7 @@ export class TemplateNameDialogComponent implements OnInit {
     }
     this.templateService.list(this.server).subscribe((templates: Template[]) => {
       const templateName = this.templateNameForm.controls['templateName'].value;
-      let existingProject = templates.find(t => t.name === templateName);
+      let existingProject = templates.find((t) => t.name === templateName);
 
       if (existingProject) {
         this.toasterService.error('Template with this name exists');
@@ -69,7 +72,7 @@ export class TemplateNameDialogComponent implements OnInit {
   }
 
   onKeyDown(event) {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       this.onAddClick();
     }
   }
diff --git a/src/app/components/project-map/node-editors/config-editor/config-editor.component.html b/src/app/components/project-map/node-editors/config-editor/config-editor.component.html
index d4795b4e..3eba95f7 100644
--- a/src/app/components/project-map/node-editors/config-editor/config-editor.component.html
+++ b/src/app/components/project-map/node-editors/config-editor/config-editor.component.html
@@ -1,16 +1,16 @@
-<h1 mat-dialog-title>Configuration for node {{node.name}}</h1>
+<h1 mat-dialog-title>Configuration for node {{ node.name }}</h1>
 
-<div *ngIf="node.node_type==='vpcs'" class="modal-form-container">
-    <textarea #textArea id="textArea" class="textArea" [(ngModel)]="config"></textarea> 
+<div *ngIf="node.node_type === 'vpcs'" class="modal-form-container">
+  <textarea #textArea id="textArea" class="textArea" [(ngModel)]="config"></textarea>
 </div>
 
-<mat-tab-group *ngIf="node.node_type==='iou' || node.node_type==='dynamips'">
-    <mat-tab label="Startup config">
-      <textarea #textArea id="textArea" class="textAreaTab" [(ngModel)]="config"></textarea> 
-    </mat-tab>
-    <mat-tab label="Private config">
-      <textarea #textArea id="textArea" class="textAreaTab" [(ngModel)]="privateConfig"></textarea> 
-    </mat-tab>
+<mat-tab-group *ngIf="node.node_type === 'iou' || node.node_type === 'dynamips'">
+  <mat-tab label="Startup config">
+    <textarea #textArea id="textArea" class="textAreaTab" [(ngModel)]="config"></textarea>
+  </mat-tab>
+  <mat-tab label="Private config">
+    <textarea #textArea id="textArea" class="textAreaTab" [(ngModel)]="privateConfig"></textarea>
+  </mat-tab>
 </mat-tab-group>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/config-editor/config-editor.component.scss b/src/app/components/project-map/node-editors/config-editor/config-editor.component.scss
index 6010a550..738dca82 100644
--- a/src/app/components/project-map/node-editors/config-editor/config-editor.component.scss
+++ b/src/app/components/project-map/node-editors/config-editor/config-editor.component.scss
@@ -1,9 +1,9 @@
 .textArea {
-    width: 100%;
-    height: 350px;
+  width: 100%;
+  height: 350px;
 }
 
 .textAreaTab {
-    width: 100%;
-    height: 300px;
+  width: 100%;
+  height: 300px;
 }
diff --git a/src/app/components/project-map/node-editors/config-editor/config-editor.component.spec.ts b/src/app/components/project-map/node-editors/config-editor/config-editor.component.spec.ts
index e7d3a2a2..4c49f955 100644
--- a/src/app/components/project-map/node-editors/config-editor/config-editor.component.spec.ts
+++ b/src/app/components/project-map/node-editors/config-editor/config-editor.component.spec.ts
@@ -19,10 +19,10 @@ describe('ConfigEditorDialogComponent', () => {
   let server: Server;
   let node: Node;
   let toaster = {
-    success: jasmine.createSpy('success')
+    success: jasmine.createSpy('success'),
   };
   let dialogRef = {
-    close: jasmine.createSpy('close')
+    close: jasmine.createSpy('close'),
   };
   let mockedNodeService: MockedNodeService = new MockedNodeService();
 
@@ -34,15 +34,15 @@ describe('ConfigEditorDialogComponent', () => {
         NoopAnimationsModule,
         MatSnackBarModule,
         FormsModule,
-        MatTabsModule
+        MatTabsModule,
       ],
       providers: [
         { provide: MatDialogRef, useValue: dialogRef },
         { provide: MAT_DIALOG_DATA, useValue: [] },
         { provide: NodeService, useValue: mockedNodeService },
-        { provide: ToasterService, useValue: toaster }
+        { provide: ToasterService, useValue: toaster },
       ],
-      declarations: [ConfigEditorDialogComponent]
+      declarations: [ConfigEditorDialogComponent],
     }).compileComponents();
 
     server = new Server();
diff --git a/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts b/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts
index c5cab711..11425058 100644
--- a/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts
+++ b/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts
@@ -7,51 +7,51 @@ import { NodeService } from '../../../../services/node.service';
 import { ToasterService } from '../../../../services/toaster.service';
 
 @Component({
-    selector: 'app-config-editor',
-    templateUrl: './config-editor.component.html',
-    styleUrls: ['./config-editor.component.scss']
+  selector: 'app-config-editor',
+  templateUrl: './config-editor.component.html',
+  styleUrls: ['./config-editor.component.scss'],
 })
 export class ConfigEditorDialogComponent implements OnInit {
-    server: Server;
-    project: Project;
-    node: Node;
+  server: Server;
+  project: Project;
+  node: Node;
 
-    config: any;
-    privateConfig: any;
+  config: any;
+  privateConfig: any;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfigEditorDialogComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService
-    ) {}
+  constructor(
+    public dialogRef: MatDialogRef<ConfigEditorDialogComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService
+  ) {}
 
-    ngOnInit() {
-        this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
-            this.config = config;
-        });
+  ngOnInit() {
+    this.nodeService.getStartupConfiguration(this.server, this.node).subscribe((config: any) => {
+      this.config = config;
+    });
 
-        if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
-            this.nodeService.getPrivateConfiguration(this.server, this.node).subscribe((privateConfig: any) => {
-                this.privateConfig = privateConfig;
-            });
-        }
+    if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
+      this.nodeService.getPrivateConfiguration(this.server, this.node).subscribe((privateConfig: any) => {
+        this.privateConfig = privateConfig;
+      });
     }
+  }
 
-    onSaveClick() {
-        this.nodeService.saveConfiguration(this.server, this.node, this.config).subscribe((response) => {
-            if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
-                this.nodeService.savePrivateConfiguration(this.server, this.node, this.privateConfig).subscribe((resp) => {
-                    this.dialogRef.close();
-                    this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
-                });
-            } else {
-                this.dialogRef.close();
-                this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
-            }
+  onSaveClick() {
+    this.nodeService.saveConfiguration(this.server, this.node, this.config).subscribe((response) => {
+      if (this.node.node_type === 'iou' || this.node.node_type === 'dynamips') {
+        this.nodeService.savePrivateConfiguration(this.server, this.node, this.privateConfig).subscribe((resp) => {
+          this.dialogRef.close();
+          this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
         });
-    }
-
-    onCancelClick() {
+      } else {
         this.dialogRef.close();
-    }
+        this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
+      }
+    });
+  }
+
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
index 16741089..0b5b4091 100644
--- a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html
@@ -1,106 +1,100 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card>
-                <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
-                    <ng-container matColumnDef="portIn">
-                        <th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
-                        <td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
-                    </ng-container>
-                
-                    <ng-container matColumnDef="portOut">
-                        <th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
-                        <td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
-                    </ng-container>
-                
-                    <ng-container matColumnDef="actions">
-                        <th mat-header-cell *matHeaderCellDef> Actions </th>
-                        <td mat-cell *matCellDef="let element">
-                            <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
-                                <mat-icon aria-label="Delete port">delete</mat-icon>
-                            </button>
-                        </td>
-                    </ng-container>
-                    
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table><br/>
+  <div class="content">
+    <div class="default-content">
+      <mat-card>
+        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+          <ng-container matColumnDef="portIn">
+            <th mat-header-cell *matHeaderCellDef>Port : VPI : VCI</th>
+            <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>
+          </ng-container>
 
-                <form [formGroup]="nameForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
+          <ng-container matColumnDef="portOut">
+            <th mat-header-cell *matHeaderCellDef>Port : VPI : VCI</th>
+            <td mat-cell *matCellDef="let element">{{ element.portOut }}</td>
+          </ng-container>
 
-                <mat-checkbox [(ngModel)]="useVpiOnly">
-                    Use VPI only (VP tunnel)
-                </mat-checkbox>
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef>Actions</th>
+            <td mat-cell *matCellDef="let element">
+              <button
+                mat-icon-button
+                matTooltip="Delete port"
+                matTooltipClass="custom-tooltip"
+                (click)="delete(element)"
+              >
+                <mat-icon aria-label="Delete port">delete</mat-icon>
+              </button>
+            </td>
+          </ng-container>
 
-                <form [formGroup]="inputForm">
-                    Source
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="sourcePort" 
-                            formControlName="sourcePort"
-                            placeholder="Port">
-                    </mat-form-field>
-                </form>
-                <form [formGroup]="abstractForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="sourceVpi" 
-                            formControlName="sourceVpi"
-                            placeholder="VPI">
-                    </mat-form-field>
-                </form>
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="sourceVci" 
-                            formControlName="sourceVci"
-                            placeholder="VCI">
-                    </mat-form-field>
-                    Destination
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="destinationPort" 
-                            formControlName="destinationPort"
-                            placeholder="Port">
-                    </mat-form-field>
-                </form>
-                <form [formGroup]="abstractForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="destinationVpi" 
-                            formControlName="destinationVpi"
-                            placeholder="VPI">
-                    </mat-form-field>
-                </form>
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="destinationVci" 
-                            formControlName="destinationVci"
-                            placeholder="VCI">
-                    </mat-form-field>
-                </form>
-                
-                <button mat-button class="form-field" (click)="add()">Add</button>
-            </mat-card>
-        </div>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+        <br />
+
+        <form [formGroup]="nameForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+        </form>
+
+        <mat-checkbox [(ngModel)]="useVpiOnly"> Use VPI only (VP tunnel) </mat-checkbox>
+
+        <form [formGroup]="inputForm">
+          Source
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="sourcePort" formControlName="sourcePort" placeholder="Port" />
+          </mat-form-field>
+        </form>
+        <form [formGroup]="abstractForm">
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="sourceVpi" formControlName="sourceVpi" placeholder="VPI" />
+          </mat-form-field>
+        </form>
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="sourceVci" formControlName="sourceVci" placeholder="VCI" />
+          </mat-form-field>
+          Destination
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="destinationPort"
+              formControlName="destinationPort"
+              placeholder="Port"
+            />
+          </mat-form-field>
+        </form>
+        <form [formGroup]="abstractForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="destinationVpi"
+              formControlName="destinationVpi"
+              placeholder="VPI"
+            />
+          </mat-form-field>
+        </form>
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="destinationVci"
+              formControlName="destinationVci"
+              placeholder="VCI"
+            />
+          </mat-form-field>
+        </form>
+
+        <button mat-button class="form-field" (click)="add()">Add</button>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
index e854a632..376757f5 100644
--- a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -6,159 +6,161 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-atm-switch',
-    templateUrl: './configurator-atm-switch.component.html',
-    styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
+  selector: 'app-configurator-atm-switch',
+  templateUrl: './configurator-atm-switch.component.html',
+  styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss'],
 })
 export class ConfiguratorDialogAtmSwitchComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    nameForm: FormGroup;
-    inputForm: FormGroup;
-    abstractForm: FormGroup;
-    consoleTypes: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  nameForm: FormGroup;
+  inputForm: FormGroup;
+  abstractForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    nodeMappings = new Map<string, string>();
-    nodeMappingsDataSource: NodeMapping[] = [];
-    dataSource = [];
-    displayedColumns = ['portIn', 'portOut', 'actions']
+  nodeMappings = new Map<string, string>();
+  nodeMappingsDataSource: NodeMapping[] = [];
+  dataSource = [];
+  displayedColumns = ['portIn', 'portOut', 'actions'];
 
-    sourcePort: string = '';
-    sourceVpi: string = '';
-    sourceVci: string = '';
-    destinationPort: string = '';
-    destinationVpi: string = '';
-    destinationVci: string = '';
+  sourcePort: string = '';
+  sourceVpi: string = '';
+  sourceVci: string = '';
+  destinationPort: string = '';
+  destinationVpi: string = '';
+  destinationVci: string = '';
 
-    useVpiOnly: boolean = false;
+  useVpiOnly: boolean = false;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogAtmSwitchComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
-    ) {
-        this.nameForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogAtmSwitchComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder
+  ) {
+    this.nameForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+
+    this.inputForm = this.formBuilder.group({
+      sourcePort: new FormControl('', Validators.required),
+      sourceVci: new FormControl('', Validators.required),
+      destinationPort: new FormControl('', Validators.required),
+      destinationVci: new FormControl('', Validators.required),
+    });
+
+    this.abstractForm = this.formBuilder.group({
+      sourceVpi: new FormControl('', Validators.required),
+      destinationVpi: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+
+      let mappings = node.properties.mappings;
+      Object.keys(mappings).forEach((key) => {
+        this.nodeMappings.set(key, mappings[key]);
+      });
+
+      this.nodeMappings.forEach((value: string, key: string) => {
+        this.nodeMappingsDataSource.push({
+          portIn: key,
+          portOut: value,
         });
+      });
+    });
+  }
 
-        this.inputForm = this.formBuilder.group({
-            sourcePort: new FormControl('', Validators.required),
-            sourceVci: new FormControl('', Validators.required),
-            destinationPort: new FormControl('', Validators.required),
-            destinationVci: new FormControl('', Validators.required),
-        });
+  delete(elem: NodeMapping) {
+    this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter((n) => n !== elem);
+  }
 
-        this.abstractForm = this.formBuilder.group({
-            sourceVpi: new FormControl('', Validators.required),
-            destinationVpi: new FormControl('', Validators.required)
-        });
-    }
+  add() {
+    if (this.inputForm.valid) {
+      let nodeMapping: NodeMapping;
+      if (!this.useVpiOnly) {
+        if (this.abstractForm.valid) {
+          nodeMapping = {
+            portIn: `${this.sourcePort}:${this.sourceVpi}:${this.sourceVci}`,
+            portOut: `${this.destinationPort}:${this.destinationVpi}:${this.destinationVci}`,
+          };
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-
-            let mappings = node.properties.mappings;
-            Object.keys(mappings).forEach(key => {
-                this.nodeMappings.set(key, mappings[key]);
-            });
-
-            this.nodeMappings.forEach((value: string, key: string) => {
-                this.nodeMappingsDataSource.push({
-                    portIn: key,
-                    portOut: value
-                });
-            });
-        });
-    }
-
-    delete(elem: NodeMapping) {
-        this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
-    }
-
-    add() {
-        if (this.inputForm.valid) {
-            let nodeMapping: NodeMapping;
-            if (!this.useVpiOnly) {
-                if (this.abstractForm.valid) {
-                    nodeMapping = {
-                        portIn: `${this.sourcePort}:${this.sourceVpi}:${this.sourceVci}`,
-                        portOut: `${this.destinationPort}:${this.destinationVpi}:${this.destinationVci}`
-                    };
-
-                    if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
-                        this.toasterService.error('Mapping already defined.');
-                    } else {
-                        this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
-                        this.clearUserInput();
-                    }
-                } else {
-                    this.toasterService.error('Fill all required fields.');
-                }
-            } else {
-                nodeMapping = {
-                    portIn: `${this.sourcePort}:${this.sourceVci}`,
-                    portOut: `${this.destinationPort}:${this.destinationVci}`
-                };
-
-                if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
-                    this.toasterService.error('Mapping already defined.');
-                } else {
-                    this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
-                    this.clearUserInput();
-                }
-            }
+          if (this.nodeMappingsDataSource.filter((n) => n.portIn === nodeMapping.portIn).length > 0) {
+            this.toasterService.error('Mapping already defined.');
+          } else {
+            this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
+            this.clearUserInput();
+          }
         } else {
-            this.toasterService.error('Fill all required fields.');
+          this.toasterService.error('Fill all required fields.');
         }
-    }
+      } else {
+        nodeMapping = {
+          portIn: `${this.sourcePort}:${this.sourceVci}`,
+          portOut: `${this.destinationPort}:${this.destinationVci}`,
+        };
 
-    clearUserInput() {
-        this.sourcePort = '0';
-        this.sourceVpi = '0';
-        this.sourceVci = '0';
-        this.destinationPort = '0';
-        this.destinationVpi = '0';
-        this.sourceVci = '0';
-    }
-
-    strMapToObj(strMap) {
-        let obj = Object.create(null);
-        for (let [k,v] of strMap) {
-          obj[k] = v;
-        }
-        return obj;
-    }
-
-    onSaveClick() {
-        if (this.nameForm.valid) {
-            this.nodeMappings.clear();
-            this.nodeMappingsDataSource.forEach(elem => {
-                this.nodeMappings.set(elem.portIn, elem.portOut);
-            });
-
-            this.node.properties.mappings = Array.from(this.nodeMappings).reduce((obj, [key, value]) => (Object.assign(obj, { [key]: value })), {});
-
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
+        if (this.nodeMappingsDataSource.filter((n) => n.portIn === nodeMapping.portIn).length > 0) {
+          this.toasterService.error('Mapping already defined.');
         } else {
-            this.toasterService.error(`Fill all required fields.`);
+          this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
+          this.clearUserInput();
         }
+      }
+    } else {
+      this.toasterService.error('Fill all required fields.');
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
+  clearUserInput() {
+    this.sourcePort = '0';
+    this.sourceVpi = '0';
+    this.sourceVci = '0';
+    this.destinationPort = '0';
+    this.destinationVpi = '0';
+    this.sourceVci = '0';
+  }
+
+  strMapToObj(strMap) {
+    let obj = Object.create(null);
+    for (let [k, v] of strMap) {
+      obj[k] = v;
     }
+    return obj;
+  }
+
+  onSaveClick() {
+    if (this.nameForm.valid) {
+      this.nodeMappings.clear();
+      this.nodeMappingsDataSource.forEach((elem) => {
+        this.nodeMappings.set(elem.portIn, elem.portOut);
+      });
+
+      this.node.properties.mappings = Array.from(this.nodeMappings).reduce(
+        (obj, [key, value]) => Object.assign(obj, { [key]: value }),
+        {}
+      );
+
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
+    }
+  }
+
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
 
 export interface NodeMapping {
-    portIn: string,
-    portOut: string
+  portIn: string;
+  portOut: string;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.html b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.html
index d7618fda..fb0f0aa4 100644
--- a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.html
+++ b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.html
@@ -1,86 +1,86 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="Ethernet interfaces">
-                        <div class="form-field" *ngFor="let port of portsMappingEthernet">
-                            <div class="form-field">{{port.name}}</div><br/><br/>
-                        </div>
-                        <mat-form-field class="select">
-                            <mat-select 
-                                placeholder="Ethernet interface" 
-                                [ngModelOptions]="{standalone: true}" 
-                                [(ngModel)]="ethernetInterface">
-                                    <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
-                    </mat-tab>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="Ethernet interfaces">
+            <div class="form-field" *ngFor="let port of portsMappingEthernet">
+              <div class="form-field">{{ port.name }}</div>
+              <br /><br />
+            </div>
+            <mat-form-field class="select">
+              <mat-select
+                placeholder="Ethernet interface"
+                [ngModelOptions]="{ standalone: true }"
+                [(ngModel)]="ethernetInterface"
+              >
+                <mat-option *ngFor="let type of ethernetInterfaces" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button>
+          </mat-tab>
 
-                    <mat-tab label="TAP interfaces">
-                        <div class="form-field" *ngFor="let port of portsMappingTap">
-                            <div class="form-field">{{port.name}}</div><br/><br/>
-                        </div>
-                        <mat-form-field class="form-field">
-                            <input 
-                                matInput type="text" 
-                                [(ngModel)]="tapInterface" 
-                                placeholder="TAP interface">
-                        </mat-form-field>
-                        <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
-                    </mat-tab>
+          <mat-tab label="TAP interfaces">
+            <div class="form-field" *ngFor="let port of portsMappingTap">
+              <div class="form-field">{{ port.name }}</div>
+              <br /><br />
+            </div>
+            <mat-form-field class="form-field">
+              <input matInput type="text" [(ngModel)]="tapInterface" placeholder="TAP interface" />
+            </mat-form-field>
+            <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button>
+          </mat-tab>
 
-                    <mat-tab label="UDP tunnels">
-                        <app-udp-tunnels #udpTunnels [dataSourceUdp]="portsMappingUdp" ></app-udp-tunnels>
-                    </mat-tab>
+          <mat-tab label="UDP tunnels">
+            <app-udp-tunnels #udpTunnels [dataSourceUdp]="portsMappingUdp"></app-udp-tunnels>
+          </mat-tab>
 
-                    <mat-tab label="Miscellaneous">
-                        <form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input 
-                                    matInput type="text" 
-                                    [(ngModel)]="node.name"
-                                    formControlName="name"
-                                    placeholder="Name">
-                            </mat-form-field>
-                        </form>
-                        <mat-form-field class="select">
-                            <mat-select 
-                                placeholder="Console type" 
-                                [(ngModel)]="node.console_type">
-                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <input 
-                                matInput type="text" 
-                                [(ngModel)]="node.properties.remote_console_host" 
-                                placeholder="Console host">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <input 
-                                matInput type="text" 
-                                [(ngModel)]="node.properties.remote_console_port" 
-                                placeholder="Console port">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <input 
-                                matInput type="text" 
-                                [(ngModel)]="node.properties.remote_console_http_path" 
-                                placeholder="Console HTTP path">
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+          <mat-tab label="Miscellaneous">
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+              </mat-form-field>
+            </form>
+            <mat-form-field class="select">
+              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
+                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="text"
+                [(ngModel)]="node.properties.remote_console_host"
+                placeholder="Console host"
+              />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="text"
+                [(ngModel)]="node.properties.remote_console_port"
+                placeholder="Console port"
+              />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <input
+                matInput
+                type="text"
+                [(ngModel)]="node.properties.remote_console_http_path"
+                placeholder="Console HTTP path"
+              />
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
index 92ba0343..a6265439 100644
--- a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -11,106 +11,104 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
 import { UdpTunnelsComponent } from '../../../../../components/preferences/common/udp-tunnels/udp-tunnels.component';
 
-
 @Component({
-    selector: 'app-configurator-cloud',
-    templateUrl: './configurator-cloud.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-cloud',
+  templateUrl: './configurator-cloud.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogCloudComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    consoleTypes: string[] = [];
-    binaries: QemuBinary[] = [];
-    onCloseOptions = [];
-    bootPriorities = [];
-    diskInterfaces: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  consoleTypes: string[] = [];
+  binaries: QemuBinary[] = [];
+  onCloseOptions = [];
+  bootPriorities = [];
+  diskInterfaces: string[] = [];
 
-    portsMappingEthernet: PortsMappingEntity[] = [];
-    portsMappingTap: PortsMappingEntity[] = [];
-    portsMappingUdp: PortsMappingEntity[] = [];
+  portsMappingEthernet: PortsMappingEntity[] = [];
+  portsMappingTap: PortsMappingEntity[] = [];
+  portsMappingUdp: PortsMappingEntity[] = [];
 
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    networkTypes = [];
-    tapInterface: string = '';
-    ethernetInterface: string = '';
-    ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  networkTypes = [];
+  tapInterface: string = '';
+  ethernetInterface: string = '';
+  ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
 
-    @ViewChild("udpTunnels") udpTunnels: UdpTunnelsComponent;
+  @ViewChild('udpTunnels') udpTunnels: UdpTunnelsComponent;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogCloudComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogCloudComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+
+      this.portsMappingEthernet = this.node.properties.ports_mapping.filter((elem) => elem.type === 'ethernet');
+
+      this.portsMappingTap = this.node.properties.ports_mapping.filter((elem) => elem.type === 'tap');
+
+      this.portsMappingUdp = this.node.properties.ports_mapping.filter((elem) => elem.type === 'udp');
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
+  }
+
+  onAddEthernetInterface() {
+    if (this.ethernetInterface) {
+      this.portsMappingEthernet.push({
+        interface: this.ethernetInterface,
+        name: this.ethernetInterface,
+        port_number: 0,
+        type: 'ethernet',
+      });
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-
-            this.portsMappingEthernet = this.node.properties.ports_mapping
-                .filter((elem) => elem.type === 'ethernet');
-
-            this.portsMappingTap = this.node.properties.ports_mapping
-                .filter((elem) => elem.type === 'tap');
-            
-            this.portsMappingUdp = this.node.properties.ports_mapping
-                .filter((elem) => elem.type === 'udp');
-        })
+  onAddTapInterface() {
+    if (this.tapInterface) {
+      this.portsMappingTap.push({
+        interface: this.tapInterface,
+        name: this.tapInterface,
+        port_number: 0,
+        type: 'tap',
+      });
     }
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.portsMappingUdp = this.udpTunnels.dataSourceUdp;
+
+      this.node.properties.ports_mapping = this.portsMappingUdp
+        .concat(this.portsMappingEthernet)
+        .concat(this.portsMappingTap);
+
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onAddEthernetInterface() {
-        if (this.ethernetInterface) {
-            this.portsMappingEthernet.push({
-                interface: this.ethernetInterface,
-                name: this.ethernetInterface,
-                port_number: 0,
-                type: "ethernet"
-            });
-        }
-    }
-
-    onAddTapInterface() {
-        if (this.tapInterface) {
-            this.portsMappingTap.push({
-                interface: this.tapInterface,
-                name: this.tapInterface,
-                port_number: 0,
-                type: "tap"
-            });
-        }
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.portsMappingUdp = this.udpTunnels.dataSourceUdp;
-
-            this.node.properties.ports_mapping = this.portsMappingUdp.concat(this.portsMappingEthernet).concat(this.portsMappingTap);
-
-            this.nodeService. updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/configurator.component.scss b/src/app/components/project-map/node-editors/configurator/configurator.component.scss
index 7bae870f..ad4f3001 100644
--- a/src/app/components/project-map/node-editors/configurator/configurator.component.scss
+++ b/src/app/components/project-map/node-editors/configurator/configurator.component.scss
@@ -1,51 +1,51 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .configButton {
-    width: 100%;
+  width: 100%;
 }
 
 .select {
-    width: 100%;
+  width: 100%;
 }
 
 .default-content {
-    max-height: 400px;
-    overflow-y: scroll;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  max-height: 400px;
+  overflow-y: scroll;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 .file-button {
-    width: 18%;
+  width: 18%;
 }
 
 .create-button {
-    width: 100%;
+  width: 100%;
 }
 
 .file-name-form-field {
-    padding-left: 2%;
-    width: 80%;
+  padding-left: 2%;
+  width: 80%;
 }
 
 .nonvisible {
-    display: none;
+  display: none;
 }
 
 mat-radio-button {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
- 
+
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
- 
+
 ::-webkit-scrollbar-thumb {
   background-color: darkgrey;
   outline: 1px solid #263238;
diff --git a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
index 936fd35c..488b72a1 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
+++ b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
@@ -1,86 +1,119 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
 
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="startCommand" type="text" [(ngModel)]="node.properties.start_command" placeholder="Start command">
-                            </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  formControlName="startCommand"
+                  type="text"
+                  [(ngModel)]="node.properties.start_command"
+                  placeholder="Start command"
+                />
+              </mat-form-field>
 
-                            <mat-form-field class="form-field">
-                                <input formControlName="adapter" matInput type="number" [(ngModel)]="node.properties.adapters" placeholder="Adapters">
-                            </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  formControlName="adapter"
+                  matInput
+                  type="number"
+                  [(ngModel)]="node.properties.adapters"
+                  placeholder="Adapters"
+                />
+              </mat-form-field>
 
-                            <button mat-button class="form-field" (click)="configureCustomAdapters()">
-                                Configure custom adapters
-                            </button>
+              <button mat-button class="form-field" (click)="configureCustomAdapters()">
+                Configure custom adapters
+              </button>
 
-                            <mat-form-field class="select">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="node.console_type">
-                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="node.console_auto_start">
-                                Auto start console
-                            </mat-checkbox>
+              <mat-form-field class="select">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="Console type"
+                  [(ngModel)]="node.console_type"
+                >
+                  <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                    {{ type }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="node.console_auto_start">
+                Auto start console
+              </mat-checkbox>
 
-                            <mat-form-field class="form-field">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="VNC console resolution" [(ngModel)]="node.properties.console_resolution">
-                                    <mat-option *ngFor="let resolution of consoleResolutions" [value]="resolution">
-                                        {{resolution}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="VNC console resolution"
+                  [(ngModel)]="node.properties.console_resolution"
+                >
+                  <mat-option *ngFor="let resolution of consoleResolutions" [value]="resolution">
+                    {{ resolution }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
 
-                            <mat-form-field class="form-field">
-                                <input formControlName="consoleHttpPort" matInput type="number" [(ngModel)]="node.properties.console_http_port" placeholder="HTTP port in the container">
-                            </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  formControlName="consoleHttpPort"
+                  matInput
+                  type="number"
+                  [(ngModel)]="node.properties.console_http_port"
+                  placeholder="HTTP port in the container"
+                />
+              </mat-form-field>
 
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="consoleHttpPath" type="text" [(ngModel)]="node.properties.console_http_path" placeholder="HTTP path">
-                            </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  formControlName="consoleHttpPath"
+                  type="text"
+                  [(ngModel)]="node.properties.console_http_path"
+                  placeholder="HTTP path"
+                />
+              </mat-form-field>
 
-                            <button mat-button class="form-field" (click)="editNetworkConfiguration()">
-                                Edit network configuration
-                            </button>
-                        </form>
-                        <h6>Environment</h6>
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.environment"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
+              <button mat-button class="form-field" (click)="editNetworkConfiguration()">
+                Edit network configuration
+              </button>
+            </form>
+            <h6>Environment</h6>
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.environment"></textarea>
+            </mat-form-field>
+          </mat-tab>
 
-                    <mat-tab label="Advanced">
-                        <h6>Extra hosts</h6>
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.extra_hosts"></textarea>
-                        </mat-form-field><br/>
+          <mat-tab label="Advanced">
+            <h6>Extra hosts</h6>
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.extra_hosts"></textarea></mat-form-field
+            ><br />
 
-                        <h6>Additional directories</h6>
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.extra_volumes"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
+            <h6>Additional directories</h6>
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.extra_volumes"></textarea>
+            </mat-form-field>
+          </mat-tab>
 
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
index ba346076..6a297e46 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -9,89 +9,80 @@ import { DockerConfigurationService } from '../../../../../services/docker-confi
 import { EditNetworkConfigurationDialogComponent } from './edit-network-configuration/edit-network-configuration.component';
 import { ConfigureCustomAdaptersDialogComponent } from './configure-custom-adapters/configure-custom-adapters.component';
 
-
 @Component({
-    selector: 'app-configurator-docker',
-    templateUrl: './configurator-docker.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-docker',
+  templateUrl: './configurator-docker.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogDockerComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    consoleTypes: string[] = [];
-    consoleResolutions: string[] = [
-        '640x480',
-        '800x600',
-        '1024x768',
-        '1280x800',
-        '1280x1024',
-        '1366x768',
-        '1920x1080'
-    ];
-    private conf = {
-        autoFocus: false,
-        width: '800px',
-        disableClose: true
-    };
-    dialogRef;
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  consoleTypes: string[] = [];
+  consoleResolutions: string[] = ['640x480', '800x600', '1024x768', '1280x800', '1280x1024', '1366x768', '1920x1080'];
+  private conf = {
+    autoFocus: false,
+    width: '800px',
+    disableClose: true,
+  };
+  dialogRef;
 
-    constructor(
-        public dialogReference: MatDialogRef<ConfiguratorDialogDockerComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private dockerConfigurationService: DockerConfigurationService,
-        private dialog: MatDialog
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
-            adapter: new FormControl('', Validators.required),
-            startCommand: new FormControl('', Validators.required),
-            consoleHttpPort: new FormControl('', Validators.required),
-            consoleHttpPath: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogReference: MatDialogRef<ConfiguratorDialogDockerComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private dockerConfigurationService: DockerConfigurationService,
+    private dialog: MatDialog
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+      adapter: new FormControl('', Validators.required),
+      startCommand: new FormControl('', Validators.required),
+      consoleHttpPort: new FormControl('', Validators.required),
+      consoleHttpPath: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.dockerConfigurationService.getConsoleTypes();
-    }
+  getConfiguration() {
+    this.consoleTypes = this.dockerConfigurationService.getConsoleTypes();
+  }
 
-    configureCustomAdapters() {
-        this.dialogRef = this.dialog.open(ConfigureCustomAdaptersDialogComponent, this.conf);
-        let instance = this.dialogRef.componentInstance;
-        instance.server = this.server;
-        instance.node = this.node;
-    }
+  configureCustomAdapters() {
+    this.dialogRef = this.dialog.open(ConfigureCustomAdaptersDialogComponent, this.conf);
+    let instance = this.dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.node = this.node;
+  }
 
-    editNetworkConfiguration() {
-        this.dialogRef = this.dialog.open(EditNetworkConfigurationDialogComponent, this.conf);
-        let instance = this.dialogRef.componentInstance;
-        instance.server = this.server;
-        instance.node = this.node;
-    }
+  editNetworkConfiguration() {
+    this.dialogRef = this.dialog.open(EditNetworkConfigurationDialogComponent, this.conf);
+    let instance = this.dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.node = this.node;
+  }
 
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogReference.close();
-    }
+  onCancelClick() {
+    this.dialogReference.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html
index 7cebbcd5..e7f879ed 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html
+++ b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html
@@ -1,29 +1,23 @@
-<h1 mat-dialog-title>Configure custom adapters for node {{node.name}}</h1>
+<h1 mat-dialog-title>Configure custom adapters for node {{ node.name }}</h1>
 
 <div *ngIf="node" class="modal-form-container">
-    <div class="header">
-        <span class="column">
-            Adapter number
-        </span>
-        <span class="column">
-            Port name
-        </span>
-    </div>
+  <div class="header">
+    <span class="column"> Adapter number </span>
+    <span class="column"> Port name </span>
+  </div>
 
-    <div>
-        <mat-list>
-            <mat-list-item *ngFor="let adapter of adapters; index as i">
-                <div class="header">
-                    <span class="column">
-                        Adapter {{adapter.adapter_number}}
-                    </span>
-                    <span class="column">
-                        <input matInput type="text" [(ngModel)]="adapter.port_name" placeholder="Edit port name">
-                    </span>
-                </div>
-            </mat-list-item>
-        </mat-list>
-    </div>
+  <div>
+    <mat-list>
+      <mat-list-item *ngFor="let adapter of adapters; index as i">
+        <div class="header">
+          <span class="column"> Adapter {{ adapter.adapter_number }} </span>
+          <span class="column">
+            <input matInput type="text" [(ngModel)]="adapter.port_name" placeholder="Edit port name" />
+          </span>
+        </div>
+      </mat-list-item>
+    </mat-list>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.scss b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.scss
index 351c6f12..07f4d76e 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.scss
+++ b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.scss
@@ -1,21 +1,21 @@
 th {
-    border: 0px!important;
+  border: 0px !important;
 }
 
 th.mat-header-cell {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
 td.mat-cell {
-    padding-top: 15px;
+  padding-top: 15px;
 }
 
 .header {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .column {
-    width: 50%;
+  width: 50%;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts
index 58af0a88..a3c25290 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../../cartography/models/node';
 import { Server } from '../../../../../../models/server';
@@ -7,54 +7,53 @@ import { ToasterService } from '../../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DockerConfigurationService } from '../../../../../../services/docker-configuration.service';
 
-
 @Component({
-    selector: 'app-configure-custom-adapters',
-    templateUrl: './configure-custom-adapters.component.html',
-    styleUrls: ['./configure-custom-adapters.component.scss']
+  selector: 'app-configure-custom-adapters',
+  templateUrl: './configure-custom-adapters.component.html',
+  styleUrls: ['./configure-custom-adapters.component.scss'],
 })
 export class ConfigureCustomAdaptersDialogComponent implements OnInit {
-    server: Server;
-    node: Node;
-    displayedColumns: string[] = ['adapter_number', 'port_name'];
-    adapters: CustomAdapter[] = [];
+  server: Server;
+  node: Node;
+  displayedColumns: string[] = ['adapter_number', 'port_name'];
+  adapters: CustomAdapter[] = [];
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfigureCustomAdaptersDialogComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private dockerConfigurationService: DockerConfigurationService
-    ) {}
+  constructor(
+    public dialogRef: MatDialogRef<ConfigureCustomAdaptersDialogComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private dockerConfigurationService: DockerConfigurationService
+  ) {}
 
-    ngOnInit() {
-        let i: number = 0;
-        if (!this.node.custom_adapters) {
-            this.node.ports.forEach((port) => {
-                this.adapters.push({
-                    adapter_number: i,
-                    port_name: ''
-                });
-            });
-        } else {
-            this.adapters = this.node.custom_adapters;
-        }
-    }
-
-    onSaveClick() {
-        this.node.custom_adapters = this.adapters;
-        this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
-            this.onCancelClick();
-            this.toasterService.success(`Configuration saved for node ${this.node.name}`);
+  ngOnInit() {
+    let i: number = 0;
+    if (!this.node.custom_adapters) {
+      this.node.ports.forEach((port) => {
+        this.adapters.push({
+          adapter_number: i,
+          port_name: '',
         });
+      });
+    } else {
+      this.adapters = this.node.custom_adapters;
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onSaveClick() {
+    this.node.custom_adapters = this.adapters;
+    this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
+      this.onCancelClick();
+      this.toasterService.success(`Configuration saved for node ${this.node.name}`);
+    });
+  }
+
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
 
 export class CustomAdapter {
-    adapter_number: number;
-    port_name: string;
+  adapter_number: number;
+  port_name: string;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.html b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.html
index 40432342..75ceddf0 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.html
+++ b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.html
@@ -1,7 +1,7 @@
-<h1 mat-dialog-title>Edit network configuration for node {{node.name}}</h1>
+<h1 mat-dialog-title>Edit network configuration for node {{ node.name }}</h1>
 
 <div *ngIf="node" class="modal-form-container">
-    <textarea matInput [(ngModel)]="configuration" class="textArea" type="text"></textarea>
+  <textarea matInput [(ngModel)]="configuration" class="textArea" type="text"></textarea>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.scss b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.scss
index d874a5ff..d47c6ad4 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.scss
+++ b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.scss
@@ -1,4 +1,4 @@
 .textArea {
-    width: 100%;
-    height: 350px;
+  width: 100%;
+  height: 350px;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.ts b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.ts
index c6ed260f..2fd87694 100644
--- a/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../../cartography/models/node';
 import { Server } from '../../../../../../models/server';
@@ -7,37 +7,38 @@ import { ToasterService } from '../../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DockerConfigurationService } from '../../../../../../services/docker-configuration.service';
 
-
 @Component({
-    selector: 'app-edit-network-configuration',
-    templateUrl: './edit-network-configuration.component.html',
-    styleUrls: ['./edit-network-configuration.component.scss']
+  selector: 'app-edit-network-configuration',
+  templateUrl: './edit-network-configuration.component.html',
+  styleUrls: ['./edit-network-configuration.component.scss'],
 })
 export class EditNetworkConfigurationDialogComponent implements OnInit {
-    server: Server;
-    node: Node;
-    configuration: string;
+  server: Server;
+  node: Node;
+  configuration: string;
 
-    constructor(
-        public dialogRef: MatDialogRef<EditNetworkConfigurationDialogComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService
-    ) {}
+  constructor(
+    public dialogRef: MatDialogRef<EditNetworkConfigurationDialogComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService
+  ) {}
 
-    ngOnInit() {
-        this.nodeService.getNetworkConfiguration(this.server, this.node).subscribe((response: string) => {
-            this.configuration = response;
-        });
-    }
+  ngOnInit() {
+    this.nodeService.getNetworkConfiguration(this.server, this.node).subscribe((response: string) => {
+      this.configuration = response;
+    });
+  }
 
-    onSaveClick() {
-        this.nodeService.saveNetworkConfiguration(this.server, this.node, this.configuration).subscribe((response: string) => {
-            this.onCancelClick();
-            this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
-        });
-    }
+  onSaveClick() {
+    this.nodeService
+      .saveNetworkConfiguration(this.server, this.node, this.configuration)
+      .subscribe((response: string) => {
+        this.onCancelClick();
+        this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
+      });
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html
index 826a0154..eb26d008 100644
--- a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.html
@@ -1,32 +1,29 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content" *ngIf="node">
-            <mat-card class="matCard">
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select 
-                            placeholder="Console type" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="node.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </form>
-                <app-ports *ngIf="node.properties" #ports [ethernetPorts]="node.properties.ports_mapping"></app-ports>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content" *ngIf="node">
+      <mat-card class="matCard">
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              placeholder="Console type"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="node.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </form>
+        <app-ports *ngIf="node.properties" #ports [ethernetPorts]="node.properties.ports_mapping"></app-ports>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
index 8184b55a..87a8972a 100644
--- a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -8,57 +8,56 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 import { PortsComponent } from '../../../../../components/preferences/common/ports/ports.component';
 
-
 @Component({
-    selector: 'app-configurator-ethernet-switch',
-    templateUrl: './configurator-ethernet-switch.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-ethernet-switch',
+  templateUrl: './configurator-ethernet-switch.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogEthernetSwitchComponent implements OnInit {
-    @ViewChild(PortsComponent) portsComponent: PortsComponent;
-    server: Server;
-    node: Node;
-    name: string;
-    inputForm: FormGroup;
-    consoleTypes: string[] = [];
+  @ViewChild(PortsComponent) portsComponent: PortsComponent;
+  server: Server;
+  node: Node;
+  name: string;
+  inputForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogEthernetSwitchComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private ethernetSwitchesConfigurationService: BuiltInTemplatesConfigurationService
-    ) {
-        this.inputForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogEthernetSwitchComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private ethernetSwitchesConfigurationService: BuiltInTemplatesConfigurationService
+  ) {
+    this.inputForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = this.node.name;
-            this.getConfiguration();
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = this.node.name;
+      this.getConfiguration();
+    });
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.ethernetSwitchesConfigurationService.getConsoleTypesForEthernetSwitches();
-    }
+  getConfiguration() {
+    this.consoleTypes = this.ethernetSwitchesConfigurationService.getConsoleTypesForEthernetSwitches();
+  }
 
-    onSaveClick() {
-        if (this.inputForm.valid) {
-            this.node.properties.ports_mapping = this.portsComponent.ethernetPorts;
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.inputForm.valid) {
+      this.node.properties.ports_mapping = this.portsComponent.ethernetPorts;
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.html b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.html
index 13d7838c..e6735ef5 100644
--- a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.html
+++ b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.html
@@ -1,28 +1,26 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="numberOfPorts" 
-                            [ngModelOptions]="{standalone: true}"
-                            placeholder="Number of ports">
-                    </mat-form-field>
-                </form>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="numberOfPorts"
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Number of ports"
+            />
+          </mat-form-field>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
index 73f22b28..dfb9d6b8 100644
--- a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { VpcsConfigurationService } from '../../../../../services/vpcs-configuration.service';
 import { Node } from '../../../../../cartography/models/node';
@@ -7,67 +7,66 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-ethernet-hub',
-    templateUrl: './configurator-ethernet-hub.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-ethernet-hub',
+  templateUrl: './configurator-ethernet-hub.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogEthernetHubComponent implements OnInit {
-    server: Server;
-    node: Node;
-    numberOfPorts: number;
-    inputForm: FormGroup;
-    consoleTypes: string[] = [];
-    categories = [];
-    name: string;
+  server: Server;
+  node: Node;
+  numberOfPorts: number;
+  inputForm: FormGroup;
+  consoleTypes: string[] = [];
+  categories = [];
+  name: string;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogEthernetHubComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private vpcsConfigurationService: VpcsConfigurationService
-    ) {
-        this.inputForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogEthernetHubComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private vpcsConfigurationService: VpcsConfigurationService
+  ) {
+    this.inputForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = this.node.name;
+      this.numberOfPorts = this.node.ports.length;
+      this.getConfiguration();
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
+    this.categories = this.vpcsConfigurationService.getCategories();
+  }
+
+  onSaveClick() {
+    if (this.inputForm.valid) {
+      this.node.properties.ports_mapping = [];
+      for (let i = 0; i < this.numberOfPorts; i++) {
+        this.node.properties.ports_mapping.push({
+          name: `Ethernet${i}`,
+          port_number: i,
         });
-    }
+      }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = this.node.name;
-            this.numberOfPorts = this.node.ports.length;
-            this.getConfiguration();
-        })
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
-        this.categories = this.vpcsConfigurationService.getCategories();
-    }
-
-    onSaveClick() {
-        if (this.inputForm.valid) {
-            this.node.properties.ports_mapping = [];
-            for(let i=0; i<this.numberOfPorts; i++){
-                this.node.properties.ports_mapping.push({
-                    name: `Ethernet${i}`,
-                    port_number: i
-                });
-            }
-
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`)
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.html b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.html
index d3136b4b..cebe922a 100644
--- a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.html
+++ b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.html
@@ -1,50 +1,62 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
-                        </form>
-                        <mat-form-field class="select">
-                            <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
-                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-checkbox [(ngModel)]="node.console_auto_start">
-                            Auto start console
-                        </mat-checkbox><br/>
-                    </mat-tab>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
+            </form>
+            <mat-form-field class="select">
+              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
+                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-checkbox [(ngModel)]="node.console_auto_start"> Auto start console </mat-checkbox><br />
+          </mat-tab>
 
-                    <mat-tab label="Memories and disks">
-                        <br/><form [formGroup]="memoryForm">
-                            <mat-form-field class="form-field">
-                                <input matInput type="number" formControlName="ram" [(ngModel)]="node.properties.ram" placeholder="RAM size">
-                                <span matSuffix>MB</span>
-                            </mat-form-field>
-                            <mat-form-field class="form-field">
-                                <input matInput type="number" formControlName="nvram" [(ngModel)]="node.properties.nvram" placeholder="NVRAM size">
-                                <span matSuffix>MB</span>
-                            </mat-form-field>
-                        </form>
-                    </mat-tab>
+          <mat-tab label="Memories and disks">
+            <br />
+            <form [formGroup]="memoryForm">
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  type="number"
+                  formControlName="ram"
+                  [(ngModel)]="node.properties.ram"
+                  placeholder="RAM size"
+                />
+                <span matSuffix>MB</span>
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  type="number"
+                  formControlName="nvram"
+                  [(ngModel)]="node.properties.nvram"
+                  placeholder="NVRAM size"
+                />
+                <span matSuffix>MB</span>
+              </mat-form-field>
+            </form>
+          </mat-tab>
 
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
index 3cff737b..39c281c7 100644
--- a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -7,61 +7,60 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { IosConfigurationService } from '../../../../../services/ios-configuration.service';
 
-
 @Component({
-    selector: 'app-configurator-ios',
-    templateUrl: './configurator-ios.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-ios',
+  templateUrl: './configurator-ios.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogIosComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    memoryForm: FormGroup;
-    consoleTypes: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  memoryForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogIosComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private configurationService: IosConfigurationService
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogIosComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private configurationService: IosConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
 
-        this.memoryForm = this.formBuilder.group({
-            ram: new FormControl('', Validators.required),
-            nvram: new FormControl('', Validators.required)
-        });
+    this.memoryForm = this.formBuilder.group({
+      ram: new FormControl('', Validators.required),
+      nvram: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.configurationService.getConsoleTypes();
+  }
+
+  onSaveClick() {
+    if (this.generalSettingsForm.valid && this.memoryForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        });
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.configurationService.getConsoleTypes();
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid && this.memoryForm.valid) {
-            this.nodeService. updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html
index 52c63b9e..09dafd94 100644
--- a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html
+++ b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html
@@ -1,56 +1,68 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
-                        </form>
-                        <mat-form-field class="select">
-                            <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
-                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-checkbox [(ngModel)]="node.console_auto_start">
-                            Auto start console
-                        </mat-checkbox><br/>
-                        <mat-form-field class="form-field">
-                            <input matInput type="number" [(ngModel)]="node.properties.ram" placeholder="RAM size">
-                            <span matSuffix>MB</span>
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <input matInput type="number" [(ngModel)]="node.properties.nvram" placeholder="NVRAM size">
-                            <span matSuffix>MB</span>
-                        </mat-form-field>
-                    </mat-tab>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
+            </form>
+            <mat-form-field class="select">
+              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
+                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-checkbox [(ngModel)]="node.console_auto_start"> Auto start console </mat-checkbox><br />
+            <mat-form-field class="form-field">
+              <input matInput type="number" [(ngModel)]="node.properties.ram" placeholder="RAM size" />
+              <span matSuffix>MB</span>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <input matInput type="number" [(ngModel)]="node.properties.nvram" placeholder="NVRAM size" />
+              <span matSuffix>MB</span>
+            </mat-form-field>
+          </mat-tab>
 
-                    <mat-tab label="Network">
-                        <br/><form [formGroup]="networkForm">
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="ethernetAdapters" type="number" [(ngModel)]="node.ethernet_adapters" placeholder="Ethernet adapters">
-                            </mat-form-field>
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="serialAdapters" type="number" [(ngModel)]="node.serial_adapters" placeholder="Serial adapters">
-                            </mat-form-field>
-                        </form>
-                    </mat-tab>
+          <mat-tab label="Network">
+            <br />
+            <form [formGroup]="networkForm">
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  formControlName="ethernetAdapters"
+                  type="number"
+                  [(ngModel)]="node.ethernet_adapters"
+                  placeholder="Ethernet adapters"
+                />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  formControlName="serialAdapters"
+                  type="number"
+                  [(ngModel)]="node.serial_adapters"
+                  placeholder="Serial adapters"
+                />
+              </mat-form-field>
+            </form>
+          </mat-tab>
 
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
index a433c130..5d305b44 100644
--- a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -7,61 +7,60 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { IouConfigurationService } from '../../../../../services/iou-configuration.service';
 
-
 @Component({
-    selector: 'app-configurator-iou',
-    templateUrl: './configurator-iou.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-iou',
+  templateUrl: './configurator-iou.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogIouComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    networkForm: FormGroup;
-    consoleTypes: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  networkForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogIouComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private configurationService: IouConfigurationService
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogIouComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private configurationService: IouConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
 
-        this.networkForm = this.formBuilder.group({
-            ethernetAdapters: new FormControl('', Validators.required),
-            serialAdapters: new FormControl('', Validators.required)
-        });
+    this.networkForm = this.formBuilder.group({
+      ethernetAdapters: new FormControl('', Validators.required),
+      serialAdapters: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.configurationService.getConsoleTypes();
+  }
+
+  onSaveClick() {
+    if (this.generalSettingsForm.valid && this.networkForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        });
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.configurationService.getConsoleTypes();
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid && this.networkForm.valid) {
-            this.nodeService. updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.html b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.html
index ff1164d0..e257af66 100644
--- a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.html
+++ b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.html
@@ -1,21 +1,17 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
index f31c558d..11497838 100644
--- a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -6,48 +6,47 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-nat',
-    templateUrl: './configurator-nat.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-nat',
+  templateUrl: './configurator-nat.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogNatComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogNatComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogNatComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+    });
+  }
 
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html
index e181eac4..d62b81fb 100644
--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html
@@ -1,277 +1,255 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <input matInput type="number" formControlName="ram" [(ngModel)]="node.properties.ram" placeholder="RAM">
-                            <span matSuffix>MB</span>
-                        </mat-form-field>
-                        </form>
-                        <mat-form-field class="form-field">
-                            <input matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="vCPUs">
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <mat-select placeholder="Qemu binary" [(ngModel)]="node.properties.qemu_path">
-                                <mat-option *ngFor="let binary of binaries" [value]="binary.path">
-                                    {{binary.path}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <mat-select placeholder="Boot priority" [(ngModel)]="node.properties.boot_priority">
-                                <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
-                                    {{priority[0]}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="form-field">
-                            <mat-select placeholder="On close" [(ngModel)]="node.properties.on_close">
-                                <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                                    {{option[0]}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-form-field class="select">
-                            <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
-                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                    {{type}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                        <mat-checkbox [(ngModel)]="node.properties.console_auto_start">
-                            Auto start console
-                        </mat-checkbox>
-                    </mat-tab>
-                    <mat-tab label="HDD">
-                        <mat-card>
-                            <!-- to do -->
-                            <button mat-raised-button color="primary" (click)="openQemuImageCreator()" class="create-button">Create Qemu image</button>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                HDA (Primary Master)
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hda_disk_image">
-                                    <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
-                                        {{image.filename}}
-                                    </mat-option>
-                                </mat-select>
-                                <mat-form-field class="form-field">
-                                <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hda_disk_interface">
-                                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                        {{interface}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                HDB (Primary Slave)
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdb_disk_image">
-                                    <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
-                                        {{image.filename}}
-                                    </mat-option>
-                                </mat-select>
-                                <mat-form-field class="form-field">
-                                <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdb_disk_interface">
-                                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                        {{interface}}
-                                    </mat-option>
-                                </mat-select>
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                HDC (Secondary Master)
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdc_disk_image">
-                                    <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
-                                        {{image.filename}}
-                                    </mat-option>
-                                </mat-select>
-                                <mat-form-field class="form-field">
-                                <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdc_disk_interface">
-                                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                        {{interface}}
-                                    </mat-option>
-                                </mat-select>
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                HDD (Secondary Slave)
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdd_disk_image">
-                                    <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
-                                        {{image.filename}}
-                                    </mat-option>
-                                </mat-select>
-                                <mat-form-field class="form-field">
-                                <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdd_disk_interface">
-                                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
-                                        {{interface}}
-                                    </mat-option>
-                                </mat-select>
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                    </mat-tab>
-                    <mat-tab label="CD/DVD">
-                        <div>
-                            <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
-                            <input
-                                type="file"
-                                #filecdrom
-                                class="nonvisible"
-                                (change)="uploadCdromImageFile($event)"/>
-                            <mat-form-field class="file-name-form-field">
-                                <input
-                                    matInput
-                                    type="text"
-                                    [(ngModel)]="node.properties.cdrom_image"
-                                    placeholder="Image"/>
-                            </mat-form-field>
-                        </div>
-                    </mat-tab>
-                    <mat-tab label="Network">
-                        <br/><mat-checkbox [(ngModel)]="node.properties.legacy_networking">
-                            Use the legacy networking mode
-                        </mat-checkbox>
-                        <br/><mat-checkbox [(ngModel)]="node.properties.replicate_network_connection_state">
-                            Replicate network connection state
-                        </mat-checkbox>
-                        <app-custom-adapters-table 
-                            #customAdapters
-                            [networkTypes]="networkTypes" 
-                            [displayedColumns]="displayedColumns"
-                            [adapters]="node.ports"
-                        ></app-custom-adapters-table>
-                    </mat-tab>
-                    <mat-tab label="Advanced">
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                Linux boot specific settings
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <div>
-                                    <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">Browse</button>
-                                    <input
-                                        type="file"
-                                        #fileinitrd
-                                        class="nonvisible"
-                                        (change)="uploadInitrdFile($event)"/>
-                                    <mat-form-field class="file-name-form-field">
-                                        <input
-                                            matInput
-                                            type="text"
-                                            [(ngModel)]="node.properties.initrd"
-                                            placeholder="Initial RAM disk (initrd)"/>
-                                    </mat-form-field>
-                                </div>
-                                <div>
-                                    <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">Browse</button>
-                                    <input
-                                        type="file"
-                                        #filekernelimage
-                                        class="nonvisible"
-                                        (change)="uploadKernelImageFile($event)"/>
-                                    <mat-form-field class="file-name-form-field">
-                                        <input
-                                            matInput
-                                            type="text"
-                                            [(ngModel)]="node.properties.kernel_image"
-                                            placeholder="Kernel image"/>
-                                    </mat-form-field>
-                                </div>
-                                <mat-form-field class="form-field">
-                                    <input matInput type="text" [(ngModel)]="node.properties.kernel_command_line" placeholder="Kernel command line">
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                Bios
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <div>
-                                    <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">Browse</button>
-                                    <input
-                                        type="file"
-                                        #filebios
-                                        class="nonvisible"
-                                        (change)="uploadBiosFile($event)"/>
-                                    <mat-form-field class="file-name-form-field">
-                                        <input
-                                            matInput
-                                            type="text"
-                                            [(ngModel)]="node.properties.bios_image"
-                                            placeholder="Bios image"/>
-                                    </mat-form-field>
-                                </div>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                Optimization
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-checkbox [(ngModel)]="activateCpuThrottling">
-                                    Activate CPU throttling
-                                </mat-checkbox>
-                                <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
-                                    <input matInput type="number" [(ngModel)]="node.properties.cpu_throttling" placeholder="Perecentage of CPU allowed">
-                                </mat-form-field>
-                                <mat-form-field class="form-field">
-                                <mat-select placeholder="Process priority" [(ngModel)]="node.properties.process_priority">
-                                    <mat-option *ngFor="let priority of priorities" [value]="priority">
-                                        {{priority}}
-                                    </mat-option>
-                                </mat-select>
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                        <mat-card>
-                            <mat-card-title></mat-card-title>
-                            <mat-card-subtitle>
-                                Additional settings
-                            </mat-card-subtitle>
-                            <mat-card-content>
-                                <mat-form-field class="form-field">
-                                    <input matInput type="text" [(ngModel)]="node.properties.options" placeholder="Options">
-                                </mat-form-field>
-                            </mat-card-content>
-                        </mat-card>
-                    </mat-tab>
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput type="text" formControlName="name" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  type="number"
+                  formControlName="ram"
+                  [(ngModel)]="node.properties.ram"
+                  placeholder="RAM"
+                />
+                <span matSuffix>MB</span>
+              </mat-form-field>
+            </form>
+            <mat-form-field class="form-field">
+              <input matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="vCPUs" />
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Qemu binary" [(ngModel)]="node.properties.qemu_path">
+                <mat-option *ngFor="let binary of binaries" [value]="binary.path">
+                  {{ binary.path }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="Boot priority" [(ngModel)]="node.properties.boot_priority">
+                <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
+                  {{ priority[0] }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="form-field">
+              <mat-select placeholder="On close" [(ngModel)]="node.properties.on_close">
+                <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                  {{ option[0] }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field class="select">
+              <mat-select placeholder="Console type" [(ngModel)]="node.console_type">
+                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                  {{ type }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-checkbox [(ngModel)]="node.properties.console_auto_start"> Auto start console </mat-checkbox>
+          </mat-tab>
+          <mat-tab label="HDD">
+            <mat-card>
+              <!-- to do -->
+              <button mat-raised-button color="primary" (click)="openQemuImageCreator()" class="create-button">
+                Create Qemu image
+              </button>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> HDA (Primary Master) </mat-card-subtitle>
+              <mat-card-content>
+                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hda_disk_image">
+                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
+                    {{ image.filename }}
+                  </mat-option>
+                </mat-select>
+                <mat-form-field class="form-field">
+                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hda_disk_interface">
+                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                      {{ interface }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </mat-card-content>
             </mat-card>
-        </div>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> HDB (Primary Slave) </mat-card-subtitle>
+              <mat-card-content>
+                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdb_disk_image">
+                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
+                    {{ image.filename }}
+                  </mat-option>
+                </mat-select>
+                <mat-form-field class="form-field">
+                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdb_disk_interface">
+                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                      {{ interface }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> HDC (Secondary Master) </mat-card-subtitle>
+              <mat-card-content>
+                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdc_disk_image">
+                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
+                    {{ image.filename }}
+                  </mat-option>
+                </mat-select>
+                <mat-form-field class="form-field">
+                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdc_disk_interface">
+                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                      {{ interface }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> HDD (Secondary Slave) </mat-card-subtitle>
+              <mat-card-content>
+                <mat-select placeholder="Disk image" [(ngModel)]="node.properties.hdd_disk_image">
+                  <mat-option *ngFor="let image of qemuImages" [value]="image.filename">
+                    {{ image.filename }}
+                  </mat-option>
+                </mat-select>
+                <mat-form-field class="form-field">
+                  <mat-select placeholder="Disk interface" [(ngModel)]="node.properties.hdd_disk_interface">
+                    <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
+                      {{ interface }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+          </mat-tab>
+          <mat-tab label="CD/DVD">
+            <div>
+              <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
+              <input type="file" #filecdrom class="nonvisible" (change)="uploadCdromImageFile($event)" />
+              <mat-form-field class="file-name-form-field">
+                <input matInput type="text" [(ngModel)]="node.properties.cdrom_image" placeholder="Image" />
+              </mat-form-field>
+            </div>
+          </mat-tab>
+          <mat-tab label="Network">
+            <br /><mat-checkbox [(ngModel)]="node.properties.legacy_networking">
+              Use the legacy networking mode
+            </mat-checkbox>
+            <br /><mat-checkbox [(ngModel)]="node.properties.replicate_network_connection_state">
+              Replicate network connection state
+            </mat-checkbox>
+            <app-custom-adapters-table
+              #customAdapters
+              [networkTypes]="networkTypes"
+              [displayedColumns]="displayedColumns"
+              [adapters]="node.ports"
+            ></app-custom-adapters-table>
+          </mat-tab>
+          <mat-tab label="Advanced">
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> Linux boot specific settings </mat-card-subtitle>
+              <mat-card-content>
+                <div>
+                  <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">
+                    Browse
+                  </button>
+                  <input type="file" #fileinitrd class="nonvisible" (change)="uploadInitrdFile($event)" />
+                  <mat-form-field class="file-name-form-field">
+                    <input
+                      matInput
+                      type="text"
+                      [(ngModel)]="node.properties.initrd"
+                      placeholder="Initial RAM disk (initrd)"
+                    />
+                  </mat-form-field>
+                </div>
+                <div>
+                  <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">
+                    Browse
+                  </button>
+                  <input type="file" #filekernelimage class="nonvisible" (change)="uploadKernelImageFile($event)" />
+                  <mat-form-field class="file-name-form-field">
+                    <input matInput type="text" [(ngModel)]="node.properties.kernel_image" placeholder="Kernel image" />
+                  </mat-form-field>
+                </div>
+                <mat-form-field class="form-field">
+                  <input
+                    matInput
+                    type="text"
+                    [(ngModel)]="node.properties.kernel_command_line"
+                    placeholder="Kernel command line"
+                  />
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> Bios </mat-card-subtitle>
+              <mat-card-content>
+                <div>
+                  <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">
+                    Browse
+                  </button>
+                  <input type="file" #filebios class="nonvisible" (change)="uploadBiosFile($event)" />
+                  <mat-form-field class="file-name-form-field">
+                    <input matInput type="text" [(ngModel)]="node.properties.bios_image" placeholder="Bios image" />
+                  </mat-form-field>
+                </div>
+              </mat-card-content>
+            </mat-card>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> Optimization </mat-card-subtitle>
+              <mat-card-content>
+                <mat-checkbox [(ngModel)]="activateCpuThrottling"> Activate CPU throttling </mat-checkbox>
+                <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
+                  <input
+                    matInput
+                    type="number"
+                    [(ngModel)]="node.properties.cpu_throttling"
+                    placeholder="Perecentage of CPU allowed"
+                  />
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                  <mat-select placeholder="Process priority" [(ngModel)]="node.properties.process_priority">
+                    <mat-option *ngFor="let priority of priorities" [value]="priority">
+                      {{ priority }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+            <mat-card>
+              <mat-card-title></mat-card-title>
+              <mat-card-subtitle> Additional settings </mat-card-subtitle>
+              <mat-card-content>
+                <mat-form-field class="form-field">
+                  <input matInput type="text" [(ngModel)]="node.properties.options" placeholder="Options" />
+                </mat-form-field>
+              </mat-card-content>
+            </mat-card>
+          </mat-tab>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
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 c7291097..43dda36f 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
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -12,121 +12,120 @@ import { QemuBinary } from '../../../../../models/qemu/qemu-binary';
 import { QemuImageCreatorComponent } from './qemu-image-creator/qemu-image-creator.component';
 import { QemuImage } from '../../../../../models/qemu/qemu-image';
 
-
 @Component({
-    selector: 'app-configurator-qemu',
-    templateUrl: './configurator-qemu.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-qemu',
+  templateUrl: './configurator-qemu.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogQemuComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    consoleTypes: string[] = [];
-    binaries: QemuBinary[] = [];
-    onCloseOptions = [];
-    bootPriorities = [];
-    diskInterfaces: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  consoleTypes: string[] = [];
+  binaries: QemuBinary[] = [];
+  onCloseOptions = [];
+  bootPriorities = [];
+  diskInterfaces: string[] = [];
 
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    networkTypes = [];
-    qemuImages: QemuImage[] = [];
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  networkTypes = [];
+  qemuImages: QemuImage[] = [];
 
-    private conf = {
-        autoFocus: false,
-        width: '800px',
-        disableClose: true
-    };
-    dialogRefQemuImageCreator;
+  private conf = {
+    autoFocus: false,
+    width: '800px',
+    disableClose: true,
+  };
+  dialogRefQemuImageCreator;
 
-    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;
+  @ViewChild('customAdapters') customAdapters: CustomAdaptersTableComponent;
 
-    constructor(
-        private dialog: MatDialog,
-        public dialogRef: MatDialogRef<ConfiguratorDialogQemuComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private qemuService: QemuService,
-        private qemuConfigurationService: QemuConfigurationService
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
-            ram: new FormControl('', Validators.required)
+  constructor(
+    private dialog: MatDialog,
+    public dialogRef: MatDialogRef<ConfiguratorDialogQemuComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private qemuService: QemuService,
+    private qemuConfigurationService: QemuConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+      ram: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+
+    this.qemuService.getBinaries(this.server).subscribe((qemuBinaries: QemuBinary[]) => {
+      this.binaries = qemuBinaries;
+    });
+
+    this.qemuService.getImages(this.server).subscribe((qemuImages: QemuImage[]) => {
+      this.qemuImages = qemuImages;
+    });
+  }
+
+  openQemuImageCreator() {
+    this.dialogRefQemuImageCreator = this.dialog.open(QemuImageCreatorComponent, this.conf);
+    let instance = this.dialogRefQemuImageCreator.componentInstance;
+    instance.server = this.server;
+  }
+
+  uploadCdromImageFile(event) {
+    this.node.properties.cdrom_image = event.target.files[0].name;
+  }
+
+  uploadInitrdFile(event) {
+    this.node.properties.initrd = event.target.files[0].name;
+  }
+
+  uploadKernelImageFile(event) {
+    this.node.properties.kernel_image = event.target.files[0].name;
+  }
+
+  uploadBiosFile(event) {
+    this.node.properties.bios_image = event.target.files[0].name;
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.qemuConfigurationService.getConsoleTypes();
+    this.onCloseOptions = this.qemuConfigurationService.getOnCloseOptions();
+    this.qemuConfigurationService.getNetworkTypes().forEach((n) => {
+      this.networkTypes.push(n);
+    });
+    this.bootPriorities = this.qemuConfigurationService.getBootPriorities();
+    this.diskInterfaces = this.qemuConfigurationService.getDiskInterfaces();
+  }
+
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.node.custom_adapters = [];
+      this.customAdapters.adapters.forEach((n) => {
+        this.node.custom_adapters.push({
+          adapter_number: n.adapter_number,
+          adapter_type: n.adapter_type,
         });
+      });
+
+      this.node.properties.adapters = this.node.custom_adapters.length;
+
+      this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        })
-
-        this.qemuService.getBinaries(this.server).subscribe((qemuBinaries: QemuBinary[]) => {
-            this.binaries = qemuBinaries;
-        });
-
-        this.qemuService.getImages(this.server).subscribe((qemuImages: QemuImage[]) => {
-            this.qemuImages = qemuImages;
-        });
-    }
-
-    openQemuImageCreator() {
-        this.dialogRefQemuImageCreator = this.dialog.open(QemuImageCreatorComponent, this.conf);
-        let instance = this.dialogRefQemuImageCreator.componentInstance;
-        instance.server = this.server;
-    }
-
-    uploadCdromImageFile(event){
-        this.node.properties.cdrom_image = event.target.files[0].name;
-    }
-
-    uploadInitrdFile(event){
-        this.node.properties.initrd = event.target.files[0].name;
-    }
-
-    uploadKernelImageFile(event){
-        this.node.properties.kernel_image = event.target.files[0].name;
-    }
-
-    uploadBiosFile(event){
-        this.node.properties.bios_image = event.target.files[0].name;
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.qemuConfigurationService.getConsoleTypes();
-        this.onCloseOptions = this.qemuConfigurationService.getOnCloseOptions();
-        this.qemuConfigurationService.getNetworkTypes().forEach(n => {
-            this.networkTypes.push(n);
-        });
-        this.bootPriorities = this.qemuConfigurationService.getBootPriorities();
-        this.diskInterfaces = this.qemuConfigurationService.getDiskInterfaces();
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.node.custom_adapters = [];
-            this.customAdapters.adapters.forEach(n => {
-                this.node.custom_adapters.push({
-                    adapter_number: n.adapter_number,
-                    adapter_type: n.adapter_type
-                })
-            });
-
-            this.node.properties.adapters = this.node.custom_adapters.length;
-
-            this.nodeService. updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.html b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.html
index aec8fdd5..c5081381 100644
--- a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.html
+++ b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.html
@@ -1,104 +1,108 @@
 <h1 mat-dialog-title>Qemu image configurator</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="qemuImg.qemu_img" 
-                            formControlName="qemu_img"
-                            placeholder="Qemu image path">
-                    </mat-form-field>
-                </form>
-                <mat-form-field class="form-field">
-                    <mat-select placeholder="Image format" [(ngModel)]="qemuImg.format">
-                        <mat-option *ngFor="let format of formatOptions" [value]="format">
-                            {{format}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <div *ngIf="qemuImg.format==='qcow2'">
-                    Size options
-                    <mat-form-field class="form-field">
-                        <mat-select placeholder="Image format" [(ngModel)]="qemuImg.preallocation">
-                            <mat-option *ngFor="let preallocation of preallocationsOptions" [value]="preallocation">
-                                {{preallocation}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <mat-select placeholder="Cluster size" [(ngModel)]="qemuImg.cluster_size">
-                            <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
-                                {{clusterSize.name}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    Refcounts
-                    <mat-form-field class="form-field">
-                        <mat-select placeholder="Lazy refcounts" [(ngModel)]="qemuImg.lazy_refcounts">
-                            <mat-option *ngFor="let lazyRefcount of lazyRefcountsOptions" [value]="lazyRefcount">
-                                {{lazyRefcount}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <mat-select placeholder="Refcount entry size" [(ngModel)]="qemuImg.refcount_bits">
-                            <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
-                                {{clusterSize.name}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
-                <div *ngIf="qemuImg.format==='vhd' || qemuImg.format==='vdi'">
-                    <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
-                        <mat-radio-button value="1" (click)="setSubformat('dynamic')" checked>Dynamic</mat-radio-button>
-                        <mat-radio-button value="2" (click)="setSubformat('fixed')">Fixed</mat-radio-button>
-                    </mat-radio-group>
-                </div>
-                <div *ngIf="qemuImg.format==='vmdk'">
-                    Adapter type<br/>
-                    <mat-radio-group aria-label="Adapter type" class="radio-selection">
-                        <mat-radio-button value="1" (click)="setAdapterType('ide')" checked>IDE</mat-radio-button>
-                        <mat-radio-button value="2" (click)="setAdapterType('lsilogic')">LSI Logic</mat-radio-button>
-                        <mat-radio-button value="3" (click)="setAdapterType('buslogic')">BusLogic</mat-radio-button>
-                        <mat-radio-button value="4" (click)="setAdapterType('legacyESX')">Legacy (ESX)</mat-radio-button>
-                    </mat-radio-group><br/><br/>
-                    Image file sizing mode<br/>
-                    <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
-                        <mat-radio-button value="1" (click)="setSubformat('streamOptimized')" checked>Stream optimized</mat-radio-button>
-                        <mat-radio-button value="2" (click)="setSubformat('twoGbMaxExtentSparse')">Split every 2GB (sparse)</mat-radio-button>
-                        <mat-radio-button value="3" (click)="setSubformat('twoGbMaxExtentFlat')">Split every 2GB (flat)</mat-radio-button>
-                        <mat-radio-button value="4" (click)="setSubformat('monolithicSparse')">Monolithic sparse</mat-radio-button>
-                        <mat-radio-button value="5" (click)="setSubformat('monolithicFlat')">Monolithic flat</mat-radio-button>
-                    </mat-radio-group><br/><br/>
-                    <mat-select placeholder="Zeroed grain" [(ngModel)]="qemuImg.zeroed_grain">
-                        <mat-option *ngFor="let option of zeroedGrainOptions" [value]="option">
-                            {{option}}
-                        </mat-option>
-                    </mat-select>
-                </div>
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="qemuImg.path" 
-                            formControlName="path"
-                            placeholder="File location">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="qemuImg.size" 
-                            formControlName="size"
-                            placeholder="Disk size">
-                    </mat-form-field>
-                </form>
-            </mat-card>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [(ngModel)]="qemuImg.qemu_img"
+              formControlName="qemu_img"
+              placeholder="Qemu image path"
+            />
+          </mat-form-field>
+        </form>
+        <mat-form-field class="form-field">
+          <mat-select placeholder="Image format" [(ngModel)]="qemuImg.format">
+            <mat-option *ngFor="let format of formatOptions" [value]="format">
+              {{ format }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <div *ngIf="qemuImg.format === 'qcow2'">
+          Size options
+          <mat-form-field class="form-field">
+            <mat-select placeholder="Image format" [(ngModel)]="qemuImg.preallocation">
+              <mat-option *ngFor="let preallocation of preallocationsOptions" [value]="preallocation">
+                {{ preallocation }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <mat-select placeholder="Cluster size" [(ngModel)]="qemuImg.cluster_size">
+              <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
+                {{ clusterSize.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          Refcounts
+          <mat-form-field class="form-field">
+            <mat-select placeholder="Lazy refcounts" [(ngModel)]="qemuImg.lazy_refcounts">
+              <mat-option *ngFor="let lazyRefcount of lazyRefcountsOptions" [value]="lazyRefcount">
+                {{ lazyRefcount }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <mat-select placeholder="Refcount entry size" [(ngModel)]="qemuImg.refcount_bits">
+              <mat-option *ngFor="let clusterSize of clusterSizeOptions" [value]="clusterSize.value">
+                {{ clusterSize.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </div>
+        <div *ngIf="qemuImg.format === 'vhd' || qemuImg.format === 'vdi'">
+          <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
+            <mat-radio-button value="1" (click)="setSubformat('dynamic')" checked>Dynamic</mat-radio-button>
+            <mat-radio-button value="2" (click)="setSubformat('fixed')">Fixed</mat-radio-button>
+          </mat-radio-group>
+        </div>
+        <div *ngIf="qemuImg.format === 'vmdk'">
+          Adapter type<br />
+          <mat-radio-group aria-label="Adapter type" class="radio-selection">
+            <mat-radio-button value="1" (click)="setAdapterType('ide')" checked>IDE</mat-radio-button>
+            <mat-radio-button value="2" (click)="setAdapterType('lsilogic')">LSI Logic</mat-radio-button>
+            <mat-radio-button value="3" (click)="setAdapterType('buslogic')">BusLogic</mat-radio-button>
+            <mat-radio-button value="4" (click)="setAdapterType('legacyESX')"
+              >Legacy (ESX)</mat-radio-button
+            > </mat-radio-group
+          ><br /><br />
+          Image file sizing mode<br />
+          <mat-radio-group aria-label="Image file sizing mode" class="radio-selection">
+            <mat-radio-button value="1" (click)="setSubformat('streamOptimized')" checked
+              >Stream optimized</mat-radio-button
+            >
+            <mat-radio-button value="2" (click)="setSubformat('twoGbMaxExtentSparse')"
+              >Split every 2GB (sparse)</mat-radio-button
+            >
+            <mat-radio-button value="3" (click)="setSubformat('twoGbMaxExtentFlat')"
+              >Split every 2GB (flat)</mat-radio-button
+            >
+            <mat-radio-button value="4" (click)="setSubformat('monolithicSparse')">Monolithic sparse</mat-radio-button>
+            <mat-radio-button value="5" (click)="setSubformat('monolithicFlat')"
+              >Monolithic flat</mat-radio-button
+            > </mat-radio-group
+          ><br /><br />
+          <mat-select placeholder="Zeroed grain" [(ngModel)]="qemuImg.zeroed_grain">
+            <mat-option *ngFor="let option of zeroedGrainOptions" [value]="option">
+              {{ option }}
+            </mat-option>
+          </mat-select>
+        </div>
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="qemuImg.path" formControlName="path" placeholder="File location" />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="qemuImg.size" formControlName="size" placeholder="Disk size" />
+          </mat-form-field>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
index 87d8e5a6..09eb73f0 100644
--- a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Server } from '../../../../../../models/server';
 import { NodeService } from '../../../../../../services/node.service';
@@ -7,115 +7,114 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { QemuService } from '../../../../../../services/qemu.service';
 import { QemuImg } from '../../../../../../models/qemu/qemu-img';
 
-
 @Component({
-    selector: 'app-qemu-image-creator',
-    templateUrl: './qemu-image-creator.component.html',
-    styleUrls: ['../../configurator.component.scss']
+  selector: 'app-qemu-image-creator',
+  templateUrl: './qemu-image-creator.component.html',
+  styleUrls: ['../../configurator.component.scss'],
 })
 export class QemuImageCreatorComponent implements OnInit {
-    server: Server;
-    qemuImg: QemuImg;
+  server: Server;
+  qemuImg: QemuImg;
 
-    formatOptions: string[] = ['qcow2', 'qcow', 'vhd', 'vdi', 'vmdk', 'raw'];
-    preallocationsOptions: string[] = ['off', 'metadata', 'falloc', 'full'];
-    clusterSizeOptions: ClusterSize[] = [
-        {
-            name: '512',
-            value: 512
-        },
-        {
-            name: '1k',
-            value: 1024
-        },
-        {
-            name: '2k',
-            value: 2048
-        },
-        {
-            name: '4k',
-            value: 4096
-        },
-        {
-            name: '8k',
-            value: 8192
-        },
-        {
-            name: '16k',
-            value: 16384
-        },
-        {
-            name: '32k',
-            value: 32768
-        },
-        {
-            name: '64k',
-            value: 65536
-        },
-        {
-            name: '128k',
-            value: 131072
-        },
-        {
-            name: '256k',
-            value: 262144
-        },
-        {
-            name: '512k',
-            value: 524288
-        },
-        {
-            name: '1024k',
-            value: 1048576
-        },
-        {
-            name: '2048k',
-            value: 2097152
-        }
-    ];
-    lazyRefcountsOptions: string[] = ['off', 'on'];
-    refcountBitsOptions: number[] = [1,2,4,8,16,32,64];
-    zeroedGrainOptions: string[] = ['on', 'off'];
-    inputForm: FormGroup;
+  formatOptions: string[] = ['qcow2', 'qcow', 'vhd', 'vdi', 'vmdk', 'raw'];
+  preallocationsOptions: string[] = ['off', 'metadata', 'falloc', 'full'];
+  clusterSizeOptions: ClusterSize[] = [
+    {
+      name: '512',
+      value: 512,
+    },
+    {
+      name: '1k',
+      value: 1024,
+    },
+    {
+      name: '2k',
+      value: 2048,
+    },
+    {
+      name: '4k',
+      value: 4096,
+    },
+    {
+      name: '8k',
+      value: 8192,
+    },
+    {
+      name: '16k',
+      value: 16384,
+    },
+    {
+      name: '32k',
+      value: 32768,
+    },
+    {
+      name: '64k',
+      value: 65536,
+    },
+    {
+      name: '128k',
+      value: 131072,
+    },
+    {
+      name: '256k',
+      value: 262144,
+    },
+    {
+      name: '512k',
+      value: 524288,
+    },
+    {
+      name: '1024k',
+      value: 1048576,
+    },
+    {
+      name: '2048k',
+      value: 2097152,
+    },
+  ];
+  lazyRefcountsOptions: string[] = ['off', 'on'];
+  refcountBitsOptions: number[] = [1, 2, 4, 8, 16, 32, 64];
+  zeroedGrainOptions: string[] = ['on', 'off'];
+  inputForm: FormGroup;
 
-    constructor(
-        public dialogRef: MatDialogRef<QemuImageCreatorComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private qemuService: QemuService
-    ) {
-        this.inputForm = this.formBuilder.group({
-            qemu_img: new FormControl('', Validators.required),
-            path: new FormControl('', Validators.required),
-            size: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<QemuImageCreatorComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private qemuService: QemuService
+  ) {
+    this.inputForm = this.formBuilder.group({
+      qemu_img: new FormControl('', Validators.required),
+      path: new FormControl('', Validators.required),
+      size: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.qemuImg = {} as QemuImg;
-    }
+  ngOnInit() {
+    this.qemuImg = {} as QemuImg;
+  }
 
-    setSubformat(subformat: string) {
-        this.qemuImg.subformat = subformat;
-    }
+  setSubformat(subformat: string) {
+    this.qemuImg.subformat = subformat;
+  }
 
-    onSaveClick() {
-        if (this.inputForm.valid && this.qemuImg.format) {
-            this.qemuService.addImage(this.server, this.qemuImg).subscribe(() => {
-                this.dialogRef.close();
-            });
-        } else {
-            this.toasterService.error('Fill all required fields.')
-        }
-    }
-
-    onCancelClick() {
+  onSaveClick() {
+    if (this.inputForm.valid && this.qemuImg.format) {
+      this.qemuService.addImage(this.server, this.qemuImg).subscribe(() => {
         this.dialogRef.close();
+      });
+    } else {
+      this.toasterService.error('Fill all required fields.');
     }
+  }
+
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
 
 export interface ClusterSize {
-    name: string;
-    value: number;
+  name: string;
+  value: number;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
index e2f2f293..e0faf72c 100644
--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
@@ -1,80 +1,78 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card>
-                <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
-                    <ng-container matColumnDef="portIn">
-                        <th mat-header-cell *matHeaderCellDef> Port : DLCI</th>
-                        <td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
-                    </ng-container>
-                
-                    <ng-container matColumnDef="portOut">
-                        <th mat-header-cell *matHeaderCellDef> Port : DLCI </th>
-                        <td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
-                    </ng-container>
-                
-                    <ng-container matColumnDef="actions">
-                        <th mat-header-cell *matHeaderCellDef> Actions </th>
-                        <td mat-cell *matCellDef="let element">
-                            <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
-                                <mat-icon aria-label="Delete port">delete</mat-icon>
-                            </button>
-                        </td>
-                    </ng-container>
-                    
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table><br/>
+  <div class="content">
+    <div class="default-content">
+      <mat-card>
+        <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+          <ng-container matColumnDef="portIn">
+            <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
+            <td mat-cell *matCellDef="let element">{{ element.portIn }}</td>
+          </ng-container>
 
-                <form [formGroup]="nameForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
+          <ng-container matColumnDef="portOut">
+            <th mat-header-cell *matHeaderCellDef>Port : DLCI</th>
+            <td mat-cell *matCellDef="let element">{{ element.portOut }}</td>
+          </ng-container>
 
-                <form [formGroup]="inputForm">
-                    Source
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="sourcePort" 
-                            formControlName="sourcePort"
-                            placeholder="Port">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="sourceDlci" 
-                            formControlName="sourceDlci"
-                            placeholder="DLCI">
-                    </mat-form-field>
-                    Destination
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="destinationPort" 
-                            formControlName="destinationPort"
-                            placeholder="Port">
-                    </mat-form-field>
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="number" 
-                            [(ngModel)]="destinationDlci" 
-                            formControlName="destinationDlci"
-                            placeholder="DLCI">
-                    </mat-form-field>
-                </form>
-                
-                <button mat-button class="form-field" (click)="add()">Add</button>
-            </mat-card>
-        </div>
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef>Actions</th>
+            <td mat-cell *matCellDef="let element">
+              <button
+                mat-icon-button
+                matTooltip="Delete port"
+                matTooltipClass="custom-tooltip"
+                (click)="delete(element)"
+              >
+                <mat-icon aria-label="Delete port">delete</mat-icon>
+              </button>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+        <br />
+
+        <form [formGroup]="nameForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+        </form>
+
+        <form [formGroup]="inputForm">
+          Source
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="sourcePort" formControlName="sourcePort" placeholder="Port" />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input matInput type="number" [(ngModel)]="sourceDlci" formControlName="sourceDlci" placeholder="DLCI" />
+          </mat-form-field>
+          Destination
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="destinationPort"
+              formControlName="destinationPort"
+              placeholder="Port"
+            />
+          </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="number"
+              [(ngModel)]="destinationDlci"
+              formControlName="destinationDlci"
+              placeholder="DLCI"
+            />
+          </mat-form-field>
+        </form>
+
+        <button mat-button class="form-field" (click)="add()">Add</button>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
index 0bc51497..393069f7 100644
--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -6,128 +6,130 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-switch',
-    templateUrl: './configurator-switch.component.html',
-    styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
+  selector: 'app-configurator-switch',
+  templateUrl: './configurator-switch.component.html',
+  styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss'],
 })
 export class ConfiguratorDialogSwitchComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    nameForm: FormGroup;
-    inputForm: FormGroup;
-    consoleTypes: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  nameForm: FormGroup;
+  inputForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    nodeMappings = new Map<string, string>();
-    nodeMappingsDataSource: NodeMapping[] = [];
-    dataSource = [];
-    displayedColumns = ['portIn', 'portOut', 'actions']
+  nodeMappings = new Map<string, string>();
+  nodeMappingsDataSource: NodeMapping[] = [];
+  dataSource = [];
+  displayedColumns = ['portIn', 'portOut', 'actions'];
 
-    sourcePort: string = '';
-    sourceDlci: string = '';
-    destinationPort: string = '';
-    destinationDlci: string = '';
+  sourcePort: string = '';
+  sourceDlci: string = '';
+  destinationPort: string = '';
+  destinationDlci: string = '';
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
-    ) {
-        this.nameForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder
+  ) {
+    this.nameForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+
+    this.inputForm = this.formBuilder.group({
+      sourcePort: new FormControl('', Validators.required),
+      sourceDlci: new FormControl('', Validators.required),
+      destinationPort: new FormControl('', Validators.required),
+      destinationDlci: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+
+      let mappings = node.properties.mappings;
+      Object.keys(mappings).forEach((key) => {
+        this.nodeMappings.set(key, mappings[key]);
+      });
+
+      this.nodeMappings.forEach((value: string, key: string) => {
+        this.nodeMappingsDataSource.push({
+          portIn: key,
+          portOut: value,
         });
+      });
+    });
+  }
 
-        this.inputForm = this.formBuilder.group({
-            sourcePort: new FormControl('', Validators.required),
-            sourceDlci: new FormControl('', Validators.required),
-            destinationPort: new FormControl('', Validators.required),
-            destinationDlci: new FormControl('', Validators.required),
-        });
+  delete(elem: NodeMapping) {
+    this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter((n) => n !== elem);
+  }
+
+  add() {
+    if (this.inputForm.valid) {
+      let nodeMapping: NodeMapping = {
+        portIn: `${this.sourcePort}:${this.sourceDlci}`,
+        portOut: `${this.destinationPort}:${this.destinationDlci}`,
+      };
+
+      if (this.nodeMappingsDataSource.filter((n) => n.portIn === nodeMapping.portIn).length > 0) {
+        this.toasterService.error('Mapping already defined.');
+      } else {
+        this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
+        this.clearUserInput();
+      }
+    } else {
+      this.toasterService.error('Fill all required fields.');
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
+  clearUserInput() {
+    this.sourcePort = '0';
+    this.sourceDlci = '0';
+    this.destinationPort = '0';
+    this.destinationDlci = '0';
+  }
 
-            let mappings = node.properties.mappings;
-            Object.keys(mappings).forEach(key => {
-                this.nodeMappings.set(key, mappings[key]);
-            });
-
-            this.nodeMappings.forEach((value: string, key: string) => {
-                this.nodeMappingsDataSource.push({
-                    portIn: key,
-                    portOut: value
-                });
-            });
-        });
+  strMapToObj(strMap) {
+    let obj = Object.create(null);
+    for (let [k, v] of strMap) {
+      obj[k] = v;
     }
+    return obj;
+  }
 
-    delete(elem: NodeMapping) {
-        this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
+  onSaveClick() {
+    if (this.nameForm.valid) {
+      this.nodeMappings.clear();
+      this.nodeMappingsDataSource.forEach((elem) => {
+        this.nodeMappings.set(elem.portIn, elem.portOut);
+      });
+
+      this.node.properties.mappings = Array.from(this.nodeMappings).reduce(
+        (obj, [key, value]) => Object.assign(obj, { [key]: value }),
+        {}
+      );
+
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    add() {
-        if (this.inputForm.valid) {
-            let nodeMapping: NodeMapping = {
-                portIn: `${this.sourcePort}:${this.sourceDlci}`,
-                portOut: `${this.destinationPort}:${this.destinationDlci}`
-            };
-    
-            if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
-                this.toasterService.error('Mapping already defined.');
-            } else {
-                this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
-                this.clearUserInput();
-            }
-        } else {
-            this.toasterService.error('Fill all required fields.');
-        }
-    }
-
-    clearUserInput() {
-        this.sourcePort = '0';
-        this.sourceDlci = '0';
-        this.destinationPort = '0';
-        this.destinationDlci = '0';
-    }
-
-    strMapToObj(strMap) {
-        let obj = Object.create(null);
-        for (let [k,v] of strMap) {
-          obj[k] = v;
-        }
-        return obj;
-    }
-
-    onSaveClick() {
-        if (this.nameForm.valid) {
-            this.nodeMappings.clear();
-            this.nodeMappingsDataSource.forEach(elem => {
-                this.nodeMappings.set(elem.portIn, elem.portOut);
-            });
-
-            this.node.properties.mappings = Array.from(this.nodeMappings).reduce((obj, [key, value]) => (Object.assign(obj, { [key]: value })), {});
-
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
 
 export interface NodeMapping {
-    portIn: string,
-    portOut: string
+  portIn: string;
+  portOut: string;
 }
diff --git a/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.html b/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.html
index ff1164d0..e257af66 100644
--- a/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.html
+++ b/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.html
@@ -1,21 +1,17 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="generalSettingsForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="generalSettingsForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts b/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts
index 4cb45eae..68553449 100644
--- a/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -6,48 +6,47 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-traceng',
-    templateUrl: './configurator-traceng.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-traceng',
+  templateUrl: './configurator-traceng.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogTracengComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogTracengComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogTracengComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+    });
+  }
 
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html
index 44a25210..c8b653e7 100644
--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html
@@ -1,61 +1,74 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
-                            <mat-form-field class="select">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="node.console_type">
-                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="node.console_auto_start">
-                                Auto start console
-                            </mat-checkbox>
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="ram" type="number" [(ngModel)]="node.properties.ram" placeholder="RAM">
-                                <span matSuffix>MB</span>
-                            </mat-form-field>
-                            <mat-form-field class="form-field">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="node.properties.on_close">
-                                    <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                                        {{option[0]}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                        </form>
-                        <mat-checkbox [(ngModel)]="node.properties.headless">
-                            Start VM in headless mode
-                        </mat-checkbox>
-                    </mat-tab>
-                    <mat-tab label="Network">
-                        <br/><mat-checkbox [(ngModel)]="node.properties.use_any_adapter">
-                            Allow GNS3 to use any configured VirtualBox adapter
-                        </mat-checkbox>
-                        <app-custom-adapters-table 
-                            #customAdapters
-                            [networkTypes]="networkTypes" 
-                            [displayedColumns]="displayedColumns"
-                            [adapters]="node.ports"
-                        ></app-custom-adapters-table>
-                    </mat-tab>
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
+              <mat-form-field class="select">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="Console type"
+                  [(ngModel)]="node.console_type"
+                >
+                  <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                    {{ type }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="node.console_auto_start">
+                Auto start console
+              </mat-checkbox>
+              <mat-form-field class="form-field">
+                <input
+                  matInput
+                  formControlName="ram"
+                  type="number"
+                  [(ngModel)]="node.properties.ram"
+                  placeholder="RAM"
+                />
+                <span matSuffix>MB</span>
+              </mat-form-field>
+              <mat-form-field class="form-field">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="On close"
+                  [(ngModel)]="node.properties.on_close"
+                >
+                  <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                    {{ option[0] }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </form>
+            <mat-checkbox [(ngModel)]="node.properties.headless"> Start VM in headless mode </mat-checkbox>
+          </mat-tab>
+          <mat-tab label="Network">
+            <br /><mat-checkbox [(ngModel)]="node.properties.use_any_adapter">
+              Allow GNS3 to use any configured VirtualBox adapter
+            </mat-checkbox>
+            <app-custom-adapters-table
+              #customAdapters
+              [networkTypes]="networkTypes"
+              [displayedColumns]="displayedColumns"
+              [adapters]="node.ports"
+            ></app-custom-adapters-table>
+          </mat-tab>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
index ee427a7d..458be2c2 100644
--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -8,74 +8,73 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { VirtualBoxConfigurationService } from '../../../../../services/virtual-box-configuration.service';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 
-
 @Component({
-    selector: 'app-configurator-virtualbox',
-    templateUrl: './configurator-virtualbox.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-virtualbox',
+  templateUrl: './configurator-virtualbox.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    consoleTypes: string[] = [];
-    onCloseOptions = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  consoleTypes: string[] = [];
+  onCloseOptions = [];
 
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    networkTypes = [];
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  networkTypes = [];
 
-    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;
+  @ViewChild('customAdapters') customAdapters: CustomAdaptersTableComponent;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogVirtualBoxComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private virtualBoxConfigurationService: VirtualBoxConfigurationService
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required),
-            ram: new FormControl('', Validators.required)
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogVirtualBoxComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private virtualBoxConfigurationService: VirtualBoxConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+      ram: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.virtualBoxConfigurationService.getConsoleTypes();
+    this.onCloseOptions = this.virtualBoxConfigurationService.getOnCloseoptions();
+    this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
+  }
+
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.node.custom_adapters = [];
+      this.customAdapters.adapters.forEach((n) => {
+        this.node.custom_adapters.push({
+          adapter_number: n.adapter_number,
+          adapter_type: n.adapter_type,
         });
+      });
+
+      this.node.properties.adapters = this.node.custom_adapters.length;
+
+      this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        })
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.virtualBoxConfigurationService.getConsoleTypes();
-        this.onCloseOptions = this.virtualBoxConfigurationService.getOnCloseoptions();
-        this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.node.custom_adapters = [];
-            this.customAdapters.adapters.forEach(n => {
-                this.node.custom_adapters.push({
-                    adapter_number: n.adapter_number,
-                    adapter_type: n.adapter_type
-                })
-            });
-
-            this.node.properties.adapters = this.node.custom_adapters.length;
-
-            this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.html b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.html
index 6750e2b5..a4562818 100644
--- a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.html
+++ b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.html
@@ -1,60 +1,67 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <mat-tab-group *ngIf="name">
-                    <mat-tab label="General settings">
-                        <br/><form [formGroup]="generalSettingsForm">
-                            <mat-form-field class="form-field">
-                                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name">
-                            </mat-form-field>
-                            <mat-form-field class="select">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="node.console_type">
-                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="node.console_auto_start">
-                                Auto start console
-                            </mat-checkbox>
-                            <mat-form-field class="form-field">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="node.properties.on_close">
-                                    <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
-                                        {{option[0]}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                        </form>
-                        <mat-checkbox [(ngModel)]="node.properties.headless">
-                            Start VM in headless mode
-                        </mat-checkbox><br/>
-                        <mat-checkbox [(ngModel)]="node.properties.linked_clone">
-                            Use a linked base VM (experimental)
-                        </mat-checkbox>
-                    </mat-tab>
-                    <mat-tab label="Network">
-                        <br/><mat-checkbox [(ngModel)]="node.properties.use_any_adapter">
-                            Allow GNS3 to override non custom VMware adapter
-                        </mat-checkbox>
-                        <app-custom-adapters-table 
-                            #customAdapters
-                            [networkTypes]="networkTypes" 
-                            [displayedColumns]="displayedColumns"
-                            [adapters]="node.ports"
-                        ></app-custom-adapters-table>
-                    </mat-tab>
-                    <mat-tab label="Usage">
-                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
-                        </mat-form-field>
-                    </mat-tab>
-                </mat-tab-group>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <mat-tab-group *ngIf="name">
+          <mat-tab label="General settings">
+            <br />
+            <form [formGroup]="generalSettingsForm">
+              <mat-form-field class="form-field">
+                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name" />
+              </mat-form-field>
+              <mat-form-field class="select">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="Console type"
+                  [(ngModel)]="node.console_type"
+                >
+                  <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                    {{ type }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="node.console_auto_start">
+                Auto start console
+              </mat-checkbox>
+              <mat-form-field class="form-field">
+                <mat-select
+                  [ngModelOptions]="{ standalone: true }"
+                  placeholder="On close"
+                  [(ngModel)]="node.properties.on_close"
+                >
+                  <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                    {{ option[0] }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </form>
+            <mat-checkbox [(ngModel)]="node.properties.headless"> Start VM in headless mode </mat-checkbox><br />
+            <mat-checkbox [(ngModel)]="node.properties.linked_clone">
+              Use a linked base VM (experimental)
+            </mat-checkbox>
+          </mat-tab>
+          <mat-tab label="Network">
+            <br /><mat-checkbox [(ngModel)]="node.properties.use_any_adapter">
+              Allow GNS3 to override non custom VMware adapter
+            </mat-checkbox>
+            <app-custom-adapters-table
+              #customAdapters
+              [networkTypes]="networkTypes"
+              [displayedColumns]="displayedColumns"
+              [adapters]="node.ports"
+            ></app-custom-adapters-table>
+          </mat-tab>
+          <mat-tab label="Usage">
+            <mat-form-field class="form-field">
+              <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
+            </mat-form-field>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
index 75c5196a..7ad3372c 100644
--- a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
@@ -8,73 +8,72 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { VmwareConfigurationService } from '../../../../../services/vmware-configuration.service';
 
-
 @Component({
-    selector: 'app-configurator-vmware',
-    templateUrl: './configurator-vmware.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-vmware',
+  templateUrl: './configurator-vmware.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogVmwareComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    generalSettingsForm: FormGroup;
-    consoleTypes: string[] = [];
-    onCloseOptions = [];
+  server: Server;
+  node: Node;
+  name: string;
+  generalSettingsForm: FormGroup;
+  consoleTypes: string[] = [];
+  onCloseOptions = [];
 
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-    networkTypes = [];
+  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+  networkTypes = [];
 
-    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;
+  @ViewChild('customAdapters') customAdapters: CustomAdaptersTableComponent;
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogVmwareComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private vmwareConfigurationService: VmwareConfigurationService
-    ) {
-        this.generalSettingsForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogVmwareComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private vmwareConfigurationService: VmwareConfigurationService
+  ) {
+    this.generalSettingsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
+
+  getConfiguration() {
+    this.consoleTypes = this.vmwareConfigurationService.getConsoleTypes();
+    this.onCloseOptions = this.vmwareConfigurationService.getOnCloseoptions();
+    this.networkTypes = this.vmwareConfigurationService.getNetworkTypes();
+  }
+
+  onSaveClick() {
+    if (this.generalSettingsForm.valid) {
+      this.node.custom_adapters = [];
+      this.customAdapters.adapters.forEach((n) => {
+        this.node.custom_adapters.push({
+          adapter_number: n.adapter_number,
+          adapter_type: n.adapter_type,
         });
+      });
+
+      this.node.properties.adapters = this.node.custom_adapters.length;
+
+      this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        })
-    }
-
-    getConfiguration() {
-        this.consoleTypes = this.vmwareConfigurationService.getConsoleTypes();
-        this.onCloseOptions = this.vmwareConfigurationService.getOnCloseoptions();
-        this.networkTypes = this.vmwareConfigurationService.getNetworkTypes();
-    }
-
-    onSaveClick() {
-        if (this.generalSettingsForm.valid) {
-            this.node.custom_adapters = [];
-            this.customAdapters.adapters.forEach(n => {
-                this.node.custom_adapters.push({
-                    adapter_number: n.adapter_number,
-                    adapter_type: n.adapter_type
-                })
-            });
-
-            this.node.properties.adapters = this.node.custom_adapters.length;
-
-            this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
-    }
-
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.html b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.html
index c431fe58..3d67e82f 100644
--- a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.html
+++ b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.html
@@ -1,36 +1,31 @@
-<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+<h1 mat-dialog-title>Configurator for node {{ name }}</h1>
 
 <div class="modal-form-container">
-    <div class="content">
-        <div class="default-content">
-            <mat-card class="matCard">
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                    <mat-form-field class="select">
-                        <mat-select 
-                            placeholder="Console type" 
-                            [ngModelOptions]="{standalone: true}" 
-                            [(ngModel)]="node.console_type">
-                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                    <mat-checkbox 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="node.console_auto_start">
-                        Auto start console
-                    </mat-checkbox>
-                </form>
-            </mat-card>
-        </div>
+  <div class="content">
+    <div class="default-content">
+      <mat-card class="matCard">
+        <form [formGroup]="inputForm">
+          <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="node.name" formControlName="name" placeholder="Name" />
+          </mat-form-field>
+          <mat-form-field class="select">
+            <mat-select
+              placeholder="Console type"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="node.console_type"
+            >
+              <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                {{ type }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="node.console_auto_start">
+            Auto start console
+          </mat-checkbox>
+        </form>
+      </mat-card>
     </div>
+  </div>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
index c97f9a78..9b1dd78e 100644
--- a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { VpcsConfigurationService } from '../../../../../services/vpcs-configuration.service';
 import { Node } from '../../../../../cartography/models/node';
@@ -7,55 +7,54 @@ import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { MatDialogRef } from '@angular/material/dialog';
 
-
 @Component({
-    selector: 'app-configurator-vpcs',
-    templateUrl: './configurator-vpcs.component.html',
-    styleUrls: ['../configurator.component.scss']
+  selector: 'app-configurator-vpcs',
+  templateUrl: './configurator-vpcs.component.html',
+  styleUrls: ['../configurator.component.scss'],
 })
 export class ConfiguratorDialogVpcsComponent implements OnInit {
-    server: Server;
-    node: Node;
-    name: string;
-    inputForm: FormGroup;
-    consoleTypes: string[] = [];
+  server: Server;
+  node: Node;
+  name: string;
+  inputForm: FormGroup;
+  consoleTypes: string[] = [];
 
-    constructor(
-        public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
-        public nodeService: NodeService,
-        private toasterService: ToasterService,
-        private formBuilder: FormBuilder,
-        private vpcsConfigurationService: VpcsConfigurationService
-    ) {
-        this.inputForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
-        });
-    }
+  constructor(
+    public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
+    public nodeService: NodeService,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private vpcsConfigurationService: VpcsConfigurationService
+  ) {
+    this.inputForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+    });
+  }
 
-    ngOnInit() {
-        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
-            this.node = node;
-            this.name = node.name;
-            this.getConfiguration();
-        })
-    }
+  ngOnInit() {
+    this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+      this.node = node;
+      this.name = node.name;
+      this.getConfiguration();
+    });
+  }
 
-    getConfiguration() {
-        this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
-    }
+  getConfiguration() {
+    this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
+  }
 
-    onSaveClick() {
-        if (this.inputForm.valid) {
-            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
-                this.toasterService.success(`Node ${this.node.name} updated.`);
-                this.onCancelClick();
-            });
-        } else {
-            this.toasterService.error(`Fill all required fields.`);
-        }
+  onSaveClick() {
+    if (this.inputForm.valid) {
+      this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+        this.toasterService.success(`Node ${this.node.name} updated.`);
+        this.onCancelClick();
+      });
+    } else {
+      this.toasterService.error(`Fill all required fields.`);
     }
+  }
 
-    onCancelClick() {
-        this.dialogRef.close();
-    }
+  onCancelClick() {
+    this.dialogRef.close();
+  }
 }
diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.scss b/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
index 5ca0ac3f..9c0da1fd 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.scss
@@ -3,7 +3,7 @@
 }
 
 .context-menu-items {
-  min-height: 0px!important;
+  min-height: 0px !important;
 }
 
 .status {
diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts b/src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts
index 9a7116ff..2046ea71 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts
@@ -8,7 +8,7 @@ describe('NodeSelectInterfaceComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NodeSelectInterfaceComponent]
+      declarations: [NodeSelectInterfaceComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.ts b/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
index 177d12c7..13f1498a 100644
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Node } from '../../../cartography/models/node';
@@ -9,7 +18,7 @@ import { LinkNode } from '../../../models/link-node';
 @Component({
   selector: 'app-node-select-interface',
   templateUrl: './node-select-interface.component.html',
-  styleUrls: ['./node-select-interface.component.scss']
+  styleUrls: ['./node-select-interface.component.scss'],
 })
 export class NodeSelectInterfaceComponent implements OnInit {
   @Input() links: Link[];
@@ -22,10 +31,7 @@ export class NodeSelectInterfaceComponent implements OnInit {
   public node: Node;
   public ports: Port[];
 
-  constructor(
-    private sanitizer: DomSanitizer, 
-    private changeDetector: ChangeDetectorRef
-  ) {}
+  constructor(private sanitizer: DomSanitizer, private changeDetector: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.setPosition(0, 0);
@@ -56,11 +62,16 @@ export class NodeSelectInterfaceComponent implements OnInit {
 
     this.ports = [];
     this.node.ports.forEach((port: Port) => {
-      let linkNodesOnTheSameAdapter = linkNodes.filter((linkNode: LinkNode) => linkNode.adapter_number === port.adapter_number);
+      let linkNodesOnTheSameAdapter = linkNodes.filter(
+        (linkNode: LinkNode) => linkNode.adapter_number === port.adapter_number
+      );
       if (linkNodesOnTheSameAdapter.length === 0) {
         port.available = true;
       } else {
-        if (linkNodesOnTheSameAdapter.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0) {
+        if (
+          linkNodesOnTheSameAdapter.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length ===
+          0
+        ) {
           port.available = true;
         } else {
           port.available = false;
@@ -74,7 +85,7 @@ export class NodeSelectInterfaceComponent implements OnInit {
   public chooseInterface(port: Port) {
     this.onChooseInterface.emit({
       node: this.node,
-      port: port
+      port: port,
     });
   }
 }
diff --git a/src/app/components/project-map/nodes-menu/nodes-menu.component.html b/src/app/components/project-map/nodes-menu/nodes-menu.component.html
index afb87690..b495ad3c 100644
--- a/src/app/components/project-map/nodes-menu/nodes-menu.component.html
+++ b/src/app/components/project-map/nodes-menu/nodes-menu.component.html
@@ -1,43 +1,47 @@
 <div class="menu-button-group">
-   <button
-       matTooltip="Console connect to all nodes"
-       matTooltipClass="custom-tooltip"
-       mat-icon-button
-       (click)="startConsoleForAllNodes()"
-       class="menu-button">
-       <mat-icon>web_asset</mat-icon>
-   </button>
-   <button
-       matTooltip="Start/Resume all nodes"
-       matTooltipClass="custom-tooltip"
-       mat-icon-button
-       (click)="startNodes()"
-       class="menu-button">
-       <mat-icon>play_arrow</mat-icon>
-   </button>
-   <button
-       matTooltip="Suspend all nodes"
-       matTooltipClass="custom-tooltip"
-       mat-icon-button
-       (click)="suspendNodes()"
-       class="menu-button">
-       <mat-icon>pause</mat-icon>
-   </button>
-   <button
-       matTooltip="Stop all nodes"
-       matTooltipClass="custom-tooltip"
-       mat-icon-button
-       (click)="stopNodes()"
-       class="menu-button">
-       <mat-icon>stop</mat-icon>
-   </button>
-   <button
-       matTooltip="Reload all nodes"
-       matTooltipClass="custom-tooltip"
-       mat-icon-button
-       (click)="reloadNodes()"
-       class="menu-button">
-       <mat-icon>replay</mat-icon>
-   </button>
-
+  <button
+    matTooltip="Console connect to all nodes"
+    matTooltipClass="custom-tooltip"
+    mat-icon-button
+    (click)="startConsoleForAllNodes()"
+    class="menu-button"
+  >
+    <mat-icon>web_asset</mat-icon>
+  </button>
+  <button
+    matTooltip="Start/Resume all nodes"
+    matTooltipClass="custom-tooltip"
+    mat-icon-button
+    (click)="startNodes()"
+    class="menu-button"
+  >
+    <mat-icon>play_arrow</mat-icon>
+  </button>
+  <button
+    matTooltip="Suspend all nodes"
+    matTooltipClass="custom-tooltip"
+    mat-icon-button
+    (click)="suspendNodes()"
+    class="menu-button"
+  >
+    <mat-icon>pause</mat-icon>
+  </button>
+  <button
+    matTooltip="Stop all nodes"
+    matTooltipClass="custom-tooltip"
+    mat-icon-button
+    (click)="stopNodes()"
+    class="menu-button"
+  >
+    <mat-icon>stop</mat-icon>
+  </button>
+  <button
+    matTooltip="Reload all nodes"
+    matTooltipClass="custom-tooltip"
+    mat-icon-button
+    (click)="reloadNodes()"
+    class="menu-button"
+  >
+    <mat-icon>replay</mat-icon>
+  </button>
 </div>
diff --git a/src/app/components/project-map/nodes-menu/nodes-menu.component.scss b/src/app/components/project-map/nodes-menu/nodes-menu.component.scss
index 0417dd8f..fb7e4cb2 100644
--- a/src/app/components/project-map/nodes-menu/nodes-menu.component.scss
+++ b/src/app/components/project-map/nodes-menu/nodes-menu.component.scss
@@ -1,7 +1,7 @@
 .menu-button {
-   margin: 0px 5px !important;
+  margin: 0px 5px !important;
 }
 
 .marked {
-    color: #0097a7!important;
+  color: #0097a7 !important;
 }
diff --git a/src/app/components/project-map/nodes-menu/nodes-menu.component.spec.ts b/src/app/components/project-map/nodes-menu/nodes-menu.component.spec.ts
index bbc38bf4..2d1fcab7 100644
--- a/src/app/components/project-map/nodes-menu/nodes-menu.component.spec.ts
+++ b/src/app/components/project-map/nodes-menu/nodes-menu.component.spec.ts
@@ -16,69 +16,67 @@ import { SettingsService } from '../../../services/settings.service';
 import { ElectronService } from 'ngx-electron';
 
 xdescribe('NodesMenuComponent', () => {
-    let component: NodesMenuComponent;
-    let fixture: ComponentFixture<NodesMenuComponent>;
-    let mockedToasterService: MockedToasterService = new MockedToasterService();
-    let mockedNodeService: MockedNodeService = new MockedNodeService();
-    let mockedNodesDataSource: MockedNodesDataSource =  new MockedNodesDataSource();
+  let component: NodesMenuComponent;
+  let fixture: ComponentFixture<NodesMenuComponent>;
+  let mockedToasterService: MockedToasterService = new MockedToasterService();
+  let mockedNodeService: MockedNodeService = new MockedNodeService();
+  let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports:  [MatButtonModule, MatIconModule, CommonModule, NoopAnimationsModule],
-            providers: [
-                { provide: NodeService, useValue: mockedNodeService },
-                { provide: ToasterService, useValue: mockedToasterService },
-                { provide: NodesDataSource, useValue: mockedNodesDataSource },
-                { provide: ServerService },
-                { provide: SettingsService },
-                { provide: ElectronService }
-            ],
-            declarations: [
-                NodesMenuComponent,
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatButtonModule, MatIconModule, CommonModule, NoopAnimationsModule],
+      providers: [
+        { provide: NodeService, useValue: mockedNodeService },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: NodesDataSource, useValue: mockedNodesDataSource },
+        { provide: ServerService },
+        { provide: SettingsService },
+        { provide: ElectronService },
+      ],
+      declarations: [NodesMenuComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(NodesMenuComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NodesMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should call start all nodes', () => {
-        spyOn(mockedNodeService, 'startAll').and.returnValue(of());
+  it('should call start all nodes', () => {
+    spyOn(mockedNodeService, 'startAll').and.returnValue(of());
 
-        component.startNodes();
+    component.startNodes();
 
-        expect(mockedNodeService.startAll).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.startAll).toHaveBeenCalled();
+  });
 
-    it('should call stop all nodes', () => {
-        spyOn(mockedNodeService, 'stopAll').and.returnValue(of());
+  it('should call stop all nodes', () => {
+    spyOn(mockedNodeService, 'stopAll').and.returnValue(of());
 
-        component.stopNodes();
+    component.stopNodes();
 
-        expect(mockedNodeService.stopAll).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.stopAll).toHaveBeenCalled();
+  });
 
-    it('should call suspend all nodes', () => {
-        spyOn(mockedNodeService, 'suspendAll').and.returnValue(of());
+  it('should call suspend all nodes', () => {
+    spyOn(mockedNodeService, 'suspendAll').and.returnValue(of());
 
-        component.suspendNodes();
+    component.suspendNodes();
 
-        expect(mockedNodeService.suspendAll).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.suspendAll).toHaveBeenCalled();
+  });
 
-    it('should call reload all nodes', () => {
-        spyOn(mockedNodeService, 'reloadAll').and.returnValue(of());
+  it('should call reload all nodes', () => {
+    spyOn(mockedNodeService, 'reloadAll').and.returnValue(of());
 
-        component.reloadNodes();
+    component.reloadNodes();
 
-        expect(mockedNodeService.reloadAll).toHaveBeenCalled();
-    });
+    expect(mockedNodeService.reloadAll).toHaveBeenCalled();
+  });
 });
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 0c9a1d2c..c1e13322 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, ChangeDetectionStrategy } 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';
@@ -9,68 +9,70 @@ import { SettingsService } from '../../../services/settings.service';
 import { ServerService } from '../../../services/server.service';
 
 @Component({
-    selector: 'app-nodes-menu',
-    templateUrl: './nodes-menu.component.html',
-    styleUrls: ['./nodes-menu.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-nodes-menu',
+  templateUrl: './nodes-menu.component.html',
+  styleUrls: ['./nodes-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodesMenuComponent {
-    @Input('project') project: Project;
-    @Input('server') server: Server;
+  @Input('project') project: Project;
+  @Input('server') server: Server;
 
-    constructor(
-        private nodeService: NodeService,
-        private nodesDataSource: NodesDataSource,
-        private toasterService: ToasterService,
-        private serverService: ServerService,
-        private settingsService: SettingsService,
-        private electronService: ElectronService
-    ) {}
+  constructor(
+    private nodeService: NodeService,
+    private nodesDataSource: NodesDataSource,
+    private toasterService: ToasterService,
+    private serverService: ServerService,
+    private settingsService: SettingsService,
+    private electronService: ElectronService
+  ) {}
 
-    async startConsoleForAllNodes() {
-        if (this.electronService.isElectronApp) {
-            let consoleCommand = this.settingsService.get<string>('console_command') ? this.settingsService.get<string>('console_command') : this.nodeService.getDefaultCommand();
+  async startConsoleForAllNodes() {
+    if (this.electronService.isElectronApp) {
+      let consoleCommand = this.settingsService.get<string>('console_command')
+        ? this.settingsService.get<string>('console_command')
+        : this.nodeService.getDefaultCommand();
 
-            let nodes = this.nodesDataSource.getItems();
-            for(var node of nodes) {
-                const request = {
-                    command: consoleCommand,
-                    type: node.console_type,
-                    host: node.console_host,
-                    port: node.console,
-                    name: node.name,
-                    project_id: node.project_id,
-                    node_id: node.node_id,
-                    server_url: this.serverService.getServerUrl(this.server)
-                };
-                await this.electronService.remote.require('./console-executor.js').openConsole(request);
-            }
-        } else {
-            this.toasterService.error("Option to start all nodes not available in web browser.");
-        }
+      let nodes = this.nodesDataSource.getItems();
+      for (var node of nodes) {
+        const request = {
+          command: consoleCommand,
+          type: node.console_type,
+          host: node.console_host,
+          port: node.console,
+          name: node.name,
+          project_id: node.project_id,
+          node_id: node.node_id,
+          server_url: this.serverService.getServerUrl(this.server),
+        };
+        await this.electronService.remote.require('./console-executor.js').openConsole(request);
+      }
+    } else {
+      this.toasterService.error('Option to start all nodes not available in web browser.');
     }
+  }
 
-    startNodes() {
-        this.nodeService.startAll(this.server, this.project).subscribe(() => {
-            this.toasterService.success('All nodes successfully started');
-        });
-    }
+  startNodes() {
+    this.nodeService.startAll(this.server, this.project).subscribe(() => {
+      this.toasterService.success('All nodes successfully started');
+    });
+  }
 
-    stopNodes() {
-        this.nodeService.stopAll(this.server, this.project).subscribe(() => {
-            this.toasterService.success('All nodes successfully stopped');
-        });
-    }
+  stopNodes() {
+    this.nodeService.stopAll(this.server, this.project).subscribe(() => {
+      this.toasterService.success('All nodes successfully stopped');
+    });
+  }
 
-    suspendNodes() {
-        this.nodeService.suspendAll(this.server, this.project).subscribe(() => {
-            this.toasterService.success('All nodes successfully suspended');
-        });
-    }
+  suspendNodes() {
+    this.nodeService.suspendAll(this.server, this.project).subscribe(() => {
+      this.toasterService.success('All nodes successfully suspended');
+    });
+  }
 
-    reloadNodes() {
-        this.nodeService.reloadAll(this.server, this.project).subscribe(() => {
-            this.toasterService.success('All nodes successfully reloaded');
-        });
-    }
+  reloadNodes() {
+    this.nodeService.reloadAll(this.server, this.project).subscribe(() => {
+      this.toasterService.success('All nodes successfully reloaded');
+    });
+  }
 }
diff --git a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
index 09856747..bb3db223 100644
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.html
@@ -1,44 +1,44 @@
 <h1 mat-dialog-title>Packet filters</h1>
 
 <div class="modal-form-container" class="content">
-    <mat-tab-group *ngIf="this.filters">
-        <mat-tab label="Frequency drop">
-            <mat-form-field class="input-field">
-                <input matInput placeholder="Frequency" type="number" [(ngModel)]="filters.frequency_drop[0]">
-            </mat-form-field>
-        </mat-tab>
-        <mat-tab label="Packet loss">
-            <mat-form-field class="input-field">
-                <input matInput placeholder="Chance" type="number" [(ngModel)]="filters.packet_loss[0]">
-            </mat-form-field>
-        </mat-tab>
-        <mat-tab label="Delay">
-            <mat-form-field class="input-field">
-                <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.delay[0]">
-            </mat-form-field>
-            <mat-form-field class="input-field">
-                <input matInput placeholder="Jitter" type="number" [(ngModel)]="filters.delay[1]">
-            </mat-form-field>
-        </mat-tab>
-        <mat-tab label="Corrupt">
-            <mat-form-field class="input-field">
-                <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.corrupt[0]">
-            </mat-form-field>
-        </mat-tab>
-        <mat-tab label="Berkeley Packet Filter (BPF)">
-            <mat-form-field class="input-field">
-                <textarea matInput type="text" [(ngModel)]="filters.bpf[0]"></textarea>
-            </mat-form-field>
-        </mat-tab>
-    </mat-tab-group>
+  <mat-tab-group *ngIf="this.filters">
+    <mat-tab label="Frequency drop">
+      <mat-form-field class="input-field">
+        <input matInput placeholder="Frequency" type="number" [(ngModel)]="filters.frequency_drop[0]" />
+      </mat-form-field>
+    </mat-tab>
+    <mat-tab label="Packet loss">
+      <mat-form-field class="input-field">
+        <input matInput placeholder="Chance" type="number" [(ngModel)]="filters.packet_loss[0]" />
+      </mat-form-field>
+    </mat-tab>
+    <mat-tab label="Delay">
+      <mat-form-field class="input-field">
+        <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.delay[0]" />
+      </mat-form-field>
+      <mat-form-field class="input-field">
+        <input matInput placeholder="Jitter" type="number" [(ngModel)]="filters.delay[1]" />
+      </mat-form-field>
+    </mat-tab>
+    <mat-tab label="Corrupt">
+      <mat-form-field class="input-field">
+        <input matInput placeholder="Latency" type="number" [(ngModel)]="filters.corrupt[0]" />
+      </mat-form-field>
+    </mat-tab>
+    <mat-tab label="Berkeley Packet Filter (BPF)">
+      <mat-form-field class="input-field">
+        <textarea matInput type="text" [(ngModel)]="filters.bpf[0]"></textarea>
+      </mat-form-field>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 <div class="bottom-bar">
-    <div class="spacer"></div>
-    <div mat-dialog-actions layout="row" class="dialog-actions">
-        <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
-        <button mat-button (click)="onResetClick()" color="accent">Reset</button>
-        <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
-        <div class="divider"></div>
-        <button mat-button (click)="onHelpClick()" color="accent">Help</button>
-    </div>
+  <div class="spacer"></div>
+  <div mat-dialog-actions layout="row" class="dialog-actions">
+    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onResetClick()" color="accent">Reset</button>
+    <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+    <div class="divider"></div>
+    <button mat-button (click)="onHelpClick()" color="accent">Help</button>
+  </div>
 </div>
diff --git a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
index 529a458e..54328173 100644
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.scss
@@ -1,67 +1,67 @@
 .spacer {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .content {
-    height: 260px;
+  height: 260px;
 }
 
 .item {
-    height: 25px;
-    font-size: 10pt;
-    margin-bottom: 10px;
+  height: 25px;
+  font-size: 10pt;
+  margin-bottom: 10px;
 }
 
 .item-name {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .item-value {
-    width: 100%;
-    margin-bottom: 10px;
+  width: 100%;
+  margin-bottom: 10px;
 }
 
 .input-field {
-    width: 100%;
-    margin-top: 10px;
+  width: 100%;
+  margin-top: 10px;
 }
 
 .divider {
-    width: fit-content;
-    flex: 1 1 auto;
+  width: fit-content;
+  flex: 1 1 auto;
 }
 
 .input-color {
-    padding: 0px;
-    border-width: 0px;
-    width: 100%;
-    background-color: transparent;
-    outline: none;
+  padding: 0px;
+  border-width: 0px;
+  width: 100%;
+  background-color: transparent;
+  outline: none;
 }
 
 input:focus {
-    outline: none;
+  outline: none;
 }
 
-input[type="color"] {
-    -webkit-appearance: none;
-    border: none;
-    height: 25px;
+input[type='color'] {
+  -webkit-appearance: none;
+  border: none;
+  height: 25px;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-    padding: 0;
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
 }
 
-input[type="color"]::-webkit-color-swatch {
-    border: none;
+input[type='color']::-webkit-color-swatch {
+  border: none;
 }
 
 .modal-form-container {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .modal-form-container > * {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts
index 8a220fa2..8fbf5e71 100644
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.spec.ts
@@ -15,53 +15,61 @@ import { of } from 'rxjs';
 import { PacketFiltersDialogComponent } from './packet-filters.component';
 
 describe('PacketFiltersDialogComponent', () => {
-    let component: PacketFiltersDialogComponent;
-    let fixture: ComponentFixture<PacketFiltersDialogComponent>;
+  let component: PacketFiltersDialogComponent;
+  let fixture: ComponentFixture<PacketFiltersDialogComponent>;
 
-    let mockedLinkService = new MockedLinkService;
-    let dialogRef = {
-        close: jasmine.createSpy('close')
-    };
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
-          providers: [
-            { provide: MatDialogRef, useValue: dialogRef },
-            { provide: MAT_DIALOG_DATA, useValue: [] },
-            { provide: LinkService, useValue: mockedLinkService }
-          ],
-          declarations: [
-            PacketFiltersDialogComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedLinkService = new MockedLinkService();
+  let dialogRef = {
+    close: jasmine.createSpy('close'),
+  };
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(PacketFiltersDialogComponent);
-        component = fixture.componentInstance;
-        component.link = {link_type: 'ethernet'} as Link;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatDialogModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: dialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: LinkService, useValue: mockedLinkService },
+      ],
+      declarations: [PacketFiltersDialogComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PacketFiltersDialogComponent);
+    component = fixture.componentInstance;
+    component.link = { link_type: 'ethernet' } as Link;
+    fixture.detectChanges();
+  });
 
-    it('should call update link when filters applied', () => {
-        spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onYesClick();
+  it('should call update link when filters applied', () => {
+    spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
 
-        expect(mockedLinkService.updateLink).toHaveBeenCalled();
-    });
+    component.onYesClick();
 
-    it('should call update link after resetting', () => {
-        spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
+    expect(mockedLinkService.updateLink).toHaveBeenCalled();
+  });
 
-        component.onResetClick();
+  it('should call update link after resetting', () => {
+    spyOn(mockedLinkService, 'updateLink').and.returnValue(of({}));
 
-        expect(mockedLinkService.updateLink).toHaveBeenCalled();
-    });
+    component.onResetClick();
+
+    expect(mockedLinkService.updateLink).toHaveBeenCalled();
+  });
 });
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 afbcf5e5..898b5c78 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
@@ -10,88 +10,88 @@ import { Message } from '../../../../models/message';
 import { Filter } from '../../../../models/filter';
 
 @Component({
-    selector: 'app-packet-filters',
-    templateUrl: './packet-filters.component.html',
-    styleUrls: ['./packet-filters.component.scss']
+  selector: 'app-packet-filters',
+  templateUrl: './packet-filters.component.html',
+  styleUrls: ['./packet-filters.component.scss'],
 })
-export class PacketFiltersDialogComponent implements OnInit{
-    server: Server;
-    project: Project;
-    link: Link;
-    filters: Filter;
-    availableFilters: FilterDescription[];
+export class PacketFiltersDialogComponent implements OnInit {
+  server: Server;
+  project: Project;
+  link: Link;
+  filters: Filter;
+  availableFilters: FilterDescription[];
 
-    constructor(
-        private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
-        private linkService: LinkService,
-        private dialog: MatDialog
-    ) {}
+  constructor(
+    private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
+    private linkService: LinkService,
+    private dialog: MatDialog
+  ) {}
 
-    ngOnInit(){
-        this.linkService.getLink(this.server, this.link.project_id, this.link.link_id).subscribe((link: Link) => {
-            this.link = link;
-            this.filters = {
-                bpf: [],
-                corrupt: [0],
-                delay: [0, 0],
-                frequency_drop: [0],
-                packet_loss: [0]
-            };
+  ngOnInit() {
+    this.linkService.getLink(this.server, this.link.project_id, this.link.link_id).subscribe((link: Link) => {
+      this.link = link;
+      this.filters = {
+        bpf: [],
+        corrupt: [0],
+        delay: [0, 0],
+        frequency_drop: [0],
+        packet_loss: [0],
+      };
 
-            if (this.link.filters) {
-                this.filters.bpf = this.link.filters.bpf ? this.link.filters.bpf : [];
-                this.filters.corrupt = this.link.filters.corrupt ? this.link.filters.corrupt : [0];
-                this.filters.delay = this.link.filters.delay ? this.link.filters.delay : [0, 0];
-                this.filters.frequency_drop =  this.link.filters.frequency_drop ? this.link.filters.frequency_drop : [0];
-                this.filters.packet_loss = this.link.filters.packet_loss ? this.link.filters.packet_loss : [0];
-            }
-        });
+      if (this.link.filters) {
+        this.filters.bpf = this.link.filters.bpf ? this.link.filters.bpf : [];
+        this.filters.corrupt = this.link.filters.corrupt ? this.link.filters.corrupt : [0];
+        this.filters.delay = this.link.filters.delay ? this.link.filters.delay : [0, 0];
+        this.filters.frequency_drop = this.link.filters.frequency_drop ? this.link.filters.frequency_drop : [0];
+        this.filters.packet_loss = this.link.filters.packet_loss ? this.link.filters.packet_loss : [0];
+      }
+    });
 
-        this.linkService.getAvailableFilters(this.server, this.link).subscribe((availableFilters: FilterDescription[]) => {
-            this.availableFilters = availableFilters;
-        });
-    }
+    this.linkService.getAvailableFilters(this.server, this.link).subscribe((availableFilters: FilterDescription[]) => {
+      this.availableFilters = availableFilters;
+    });
+  }
 
-    onNoClick() {
-        this.dialogRef.close();
-    }
+  onNoClick() {
+    this.dialogRef.close();
+  }
 
-    onResetClick() {
-        this.link.filters = {
-            bpf: [],
-            corrupt: [0],
-            delay: [0, 0],
-            frequency_drop: [0],
-            packet_loss: [0]
-        };
+  onResetClick() {
+    this.link.filters = {
+      bpf: [],
+      corrupt: [0],
+      delay: [0, 0],
+      frequency_drop: [0],
+      packet_loss: [0],
+    };
 
-        this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
-            this.dialogRef.close();
-        });
-    }
+    this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
+      this.dialogRef.close();
+    });
+  }
 
-    onYesClick() {
-        this.link.filters = this.filters;
-        this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
-            this.dialogRef.close();
-        });
-    }
+  onYesClick() {
+    this.link.filters = this.filters;
+    this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
+      this.dialogRef.close();
+    });
+  }
 
-    onHelpClick() {
-        const dialogRef = this.dialog.open(HelpDialogComponent, {
-            width: '500px',
-            autoFocus: false,
-            disableClose: true
-        });
-        let instance = dialogRef.componentInstance;
-        instance.title = 'Help for filters';
-        let messages: Message[] = [];
-        this.availableFilters.forEach((filter: FilterDescription) => {
-            messages.push({
-                name: filter.name,
-                description: filter.description
-            });
-        });
-        instance.messages = messages;
-    }
+  onHelpClick() {
+    const dialogRef = this.dialog.open(HelpDialogComponent, {
+      width: '500px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    let instance = dialogRef.componentInstance;
+    instance.title = 'Help for filters';
+    let messages: Message[] = [];
+    this.availableFilters.forEach((filter: FilterDescription) => {
+      messages.push({
+        name: filter.name,
+        description: filter.description,
+      });
+    });
+    instance.messages = messages;
+  }
 }
diff --git a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
index 12b6ae70..44480753 100644
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.html
@@ -1,30 +1,24 @@
 <h1 mat-dialog-title>Packet capture</h1>
 
 <div class="modal-form-container">
-    <form [formGroup]="inputForm">
-        <mat-form-field class="input-field">
-            <mat-select 
-                placeholder="Link type"
-                formControlName="linkType"
-                ngDefaultControl>
-                <mat-option *ngFor="let type of linkTypes" [value]="type[1]">
-                    {{type[0]}}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-        <mat-form-field class="input-field">
-            <input 
-                placeholder="File name"
-                formControlName="fileName" 
-                matInput type="text">
-        </mat-form-field>
-        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="startProgram">
-            Start the capture visualization program
-        </mat-checkbox>
-    </form>
+  <form [formGroup]="inputForm">
+    <mat-form-field class="input-field">
+      <mat-select placeholder="Link type" formControlName="linkType" ngDefaultControl>
+        <mat-option *ngFor="let type of linkTypes" [value]="type[1]">
+          {{ type[0] }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="input-field">
+      <input placeholder="File name" formControlName="fileName" matInput type="text" />
+    </mat-form-field>
+    <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="startProgram">
+      Start the capture visualization program
+    </mat-checkbox>
+  </form>
 </div>
 
 <div mat-dialog-actions>
-    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Ok</button>
+  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Ok</button>
 </div>
diff --git a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
index 396495e3..2888a748 100644
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.scss
@@ -1,3 +1,3 @@
 .input-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts
index 5ce8651d..bc77c034 100644
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.spec.ts
@@ -1,4 +1,4 @@
-import { StartCaptureDialogComponent } from "./start-capture.component";
+import { StartCaptureDialogComponent } from './start-capture.component';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -19,70 +19,78 @@ import { NodesDataSource } from '../../../../cartography/datasources/nodes-datas
 import { PacketCaptureService } from '../../../../services/packet-capture.service';
 
 describe('StartCaptureDialogComponent', () => {
-    let component: StartCaptureDialogComponent;
-    let fixture: ComponentFixture<StartCaptureDialogComponent>;
+  let component: StartCaptureDialogComponent;
+  let fixture: ComponentFixture<StartCaptureDialogComponent>;
 
-    let mockedToasterService = new MockedToasterService;
-    let mockedLinkService = new MockedLinkService;
-    let mockedNodesDataSource = new MockedNodesDataSource;
-    let dialogRef = {
-        close: jasmine.createSpy('close')
-    };
-    
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-          imports: [MatDialogModule, FormsModule, ReactiveFormsModule, MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
-          providers: [
-            { provide: MatDialogRef, useValue: dialogRef },
-            { provide: MAT_DIALOG_DATA, useValue: [] },
-            { provide: ToasterService, useValue: mockedToasterService },
-            { provide: LinkService, useValue: mockedLinkService },
-            { provide: NodesDataSource, useValue: mockedNodesDataSource },
-            { provide: PacketCaptureService }
-          ],
-          declarations: [
-            StartCaptureDialogComponent
-          ],
-          schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  let mockedToasterService = new MockedToasterService();
+  let mockedLinkService = new MockedLinkService();
+  let mockedNodesDataSource = new MockedNodesDataSource();
+  let dialogRef = {
+    close: jasmine.createSpy('close'),
+  };
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(StartCaptureDialogComponent);
-        component = fixture.componentInstance;
-        component.link = {link_type: 'ethernet', nodes: [{node_id: '1'}, {node_id: '2'}]} as Link;
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatDialogModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: dialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: ToasterService, useValue: mockedToasterService },
+        { provide: LinkService, useValue: mockedLinkService },
+        { provide: NodesDataSource, useValue: mockedNodesDataSource },
+        { provide: PacketCaptureService },
+      ],
+      declarations: [StartCaptureDialogComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartCaptureDialogComponent);
+    component = fixture.componentInstance;
+    component.link = { link_type: 'ethernet', nodes: [{ node_id: '1' }, { node_id: '2' }] } as Link;
+  });
 
-    it('should call link service when input is valid', () => {
-        component.inputForm.controls['linkType'].setValue('Ethernet');
-        component.inputForm.controls['fileName'].setValue('SampleFileName');
-        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        component.onYesClick();
+  it('should call link service when input is valid', () => {
+    component.inputForm.controls['linkType'].setValue('Ethernet');
+    component.inputForm.controls['fileName'].setValue('SampleFileName');
+    spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
 
-        expect(mockedLinkService.startCaptureOnLink).toHaveBeenCalled();
-    });
+    component.onYesClick();
 
-    it('should not call link service when link type is not set', () => {
-        component.inputForm.controls['fileName'].setValue('SampleFileName');
-        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+    expect(mockedLinkService.startCaptureOnLink).toHaveBeenCalled();
+  });
 
-        component.onYesClick();
+  it('should not call link service when link type is not set', () => {
+    component.inputForm.controls['fileName'].setValue('SampleFileName');
+    spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
 
-        expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
-    });
+    component.onYesClick();
 
-    it('should not call link service when filename is empty', () => {
-        component.inputForm.controls['linkType'].setValue('Ethernet');
-        component.inputForm.controls['fileName'].setValue('');
-        spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
+    expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
+  });
 
-        component.onYesClick();
+  it('should not call link service when filename is empty', () => {
+    component.inputForm.controls['linkType'].setValue('Ethernet');
+    component.inputForm.controls['fileName'].setValue('');
+    spyOn(mockedLinkService, 'startCaptureOnLink').and.returnValue(of({}));
 
-        expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
-    });
+    component.onYesClick();
+
+    expect(mockedLinkService.startCaptureOnLink).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
index 3f46f43e..04a6e78c 100644
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
@@ -13,81 +13,81 @@ import { PacketCaptureService } from '../../../../services/packet-capture.servic
 import { Project } from '../../../../models/project';
 
 @Component({
-    selector: 'app-start-capture',
-    templateUrl: './start-capture.component.html',
-    styleUrls: ['./start-capture.component.scss']
+  selector: 'app-start-capture',
+  templateUrl: './start-capture.component.html',
+  styleUrls: ['./start-capture.component.scss'],
 })
 export class StartCaptureDialogComponent implements OnInit {
-    server: Server;
-    project: Project;
-    link: Link;
-    linkTypes = [];
-    inputForm: FormGroup;
-    startProgram: boolean;
+  server: Server;
+  project: Project;
+  link: Link;
+  linkTypes = [];
+  inputForm: FormGroup;
+  startProgram: boolean;
 
-    constructor(
-        private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
-        private linkService: LinkService,
-        private formBuilder: FormBuilder, 
-        private toasterService: ToasterService,
-        private nodesDataSource: NodesDataSource,
-        private packetCaptureService: PacketCaptureService
-    ) {
-        this.inputForm = this.formBuilder.group({
-            linkType: new FormControl('', Validators.required),
-            fileName: new FormControl('', Validators.required)
-        });
+  constructor(
+    private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
+    private linkService: LinkService,
+    private formBuilder: FormBuilder,
+    private toasterService: ToasterService,
+    private nodesDataSource: NodesDataSource,
+    private packetCaptureService: PacketCaptureService
+  ) {
+    this.inputForm = this.formBuilder.group({
+      linkType: new FormControl('', Validators.required),
+      fileName: new FormControl('', Validators.required),
+    });
+  }
+
+  ngOnInit() {
+    if (this.link.link_type === 'ethernet') {
+      this.linkTypes = [['Ethernet', 'DLT_EN10MB']];
+    } else {
+      this.linkTypes = [
+        ['Cisco HDLC', 'DLT_C_HDLC'],
+        ['Cisco PPP', 'DLT_PPP_SERIAL'],
+        ['Frame Relay', 'DLT_FRELAY'],
+        ['ATM', 'DLT_ATM_RFC1483'],
+      ];
     }
 
-    ngOnInit() {
-        if (this.link.link_type === 'ethernet') {
-            this.linkTypes = [
-                ["Ethernet", "DLT_EN10MB"]
-            ];
-        } else {
-            this.linkTypes = [
-                ["Cisco HDLC", "DLT_C_HDLC"],
-                ["Cisco PPP", "DLT_PPP_SERIAL"],
-                ["Frame Relay", "DLT_FRELAY"],
-                ["ATM", "DLT_ATM_RFC1483"]
-            ];
-        }
+    const sourceNode = this.nodesDataSource.get(this.link.nodes[0].node_id);
+    const targetNode = this.nodesDataSource.get(this.link.nodes[1].node_id);
+    const sourcePort = sourceNode.ports[this.link.nodes[0].port_number];
+    const targetPort = targetNode.ports[this.link.nodes[1].port_number];
+    this.inputForm.controls['fileName'].setValue(
+      `${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`
+    );
+  }
 
-        const sourceNode = this.nodesDataSource.get(this.link.nodes[0].node_id);
-        const targetNode = this.nodesDataSource.get(this.link.nodes[1].node_id);
-        const sourcePort = sourceNode.ports[this.link.nodes[0].port_number];
-        const targetPort = targetNode.ports[this.link.nodes[1].port_number];
-        this.inputForm.controls['fileName'].setValue(`${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`);
-    }
+  onYesClick() {
+    let isAnyRunningDevice = false;
+    this.link.nodes.forEach((linkNode: LinkNode) => {
+      let node = this.nodesDataSource.get(linkNode.node_id);
+      if (node.status === 'started') isAnyRunningDevice = true;
+    });
 
-    onYesClick() {
-        let isAnyRunningDevice = false;
-        this.link.nodes.forEach((linkNode: LinkNode) => {
-            let node = this.nodesDataSource.get(linkNode.node_id);
-            if (node.status === 'started') isAnyRunningDevice = true;
-        });
+    if (!isAnyRunningDevice) {
+      this.toasterService.error(`Cannot capture because there is no running device on this link`);
+    } else if (this.inputForm.invalid) {
+      this.toasterService.error(`Fill all required fields`);
+    } else {
+      let captureSettings: CapturingSettings = {
+        capture_file_name: this.inputForm.get('fileName').value,
+        data_link_type: this.inputForm.get('linkType').value,
+      };
 
-        if (!isAnyRunningDevice) {
-            this.toasterService.error(`Cannot capture because there is no running device on this link`);
-        } else if (this.inputForm.invalid) {
-            this.toasterService.error(`Fill all required fields`);
-        } else {
-            let captureSettings: CapturingSettings = {
-                capture_file_name: this.inputForm.get('fileName').value,
-                data_link_type: this.inputForm.get('linkType').value
-            };
+      if (this.startProgram) {
+        this.packetCaptureService.startCapture(this.server, this.project, this.link, captureSettings.capture_file_name);
+      }
 
-            if (this.startProgram) {
-                this.packetCaptureService.startCapture(this.server, this.project, this.link, captureSettings.capture_file_name);
-            }
-
-            this.linkService.startCaptureOnLink(this.server, this.link, captureSettings).subscribe(() => {
-                this.dialogRef.close();
-            });
-        }
-    }
-
-    onNoClick() {
+      this.linkService.startCaptureOnLink(this.server, this.link, captureSettings).subscribe(() => {
         this.dialogRef.close();
+      });
     }
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
 }
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 3edf9562..81f0fc0f 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
@@ -1,96 +1,108 @@
 <button
-    matTooltip="Add a note"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="addDrawing('text')">
-    <mat-icon [ngClass]="getCssClassForIcon('text')">create</mat-icon>
+  matTooltip="Add a note"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="addDrawing('text')"
+>
+  <mat-icon [ngClass]="getCssClassForIcon('text')">create</mat-icon>
 </button>
 <input
-    type="file"
-    accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
-    class="non-visible"
-    #file
-    (change)="uploadImageFile($event)"/>
+  type="file"
+  accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
+  class="non-visible"
+  #file
+  (change)="uploadImageFile($event)"
+/>
 <button
-    matTooltip="Insert a picture"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="file.click()">
-    <mat-icon>image</mat-icon>
+  matTooltip="Insert a picture"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="file.click()"
+>
+  <mat-icon>image</mat-icon>
 </button>
 <button
-    matTooltip="Draw a rectangle"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="addDrawing('rectangle')">
-    <mat-icon [ngClass]="getCssClassForIcon('rectangle')">crop_3_2</mat-icon>
+  matTooltip="Draw a rectangle"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="addDrawing('rectangle')"
+>
+  <mat-icon [ngClass]="getCssClassForIcon('rectangle')">crop_3_2</mat-icon>
 </button>
 <button
-    matTooltip="Draw an ellipse"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="addDrawing('ellipse')">
-    <mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
+  matTooltip="Draw an ellipse"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="addDrawing('ellipse')"
+>
+  <mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
 </button>
 <button
-    *ngIf="!isLightThemeEnabled"
-    matTooltip="Draw a line"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button class="menu-button"
-    (click)="addDrawing('line')">
-    <svg height="40" width="40">
+  *ngIf="!isLightThemeEnabled"
+  matTooltip="Draw a line"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="addDrawing('line')"
+>
+  <svg height="40" width="40">
     <line
-        [ngClass]="{ selected: drawTools.isLineChosen }"
-        x1="30"
-        y1="10"
-        x2="10"
-        y2="30"
-        style="stroke:white;stroke-width:2"/>
-    </svg>
+      [ngClass]="{ selected: drawTools.isLineChosen }"
+      x1="30"
+      y1="10"
+      x2="10"
+      y2="30"
+      style="stroke: white; stroke-width: 2"
+    />
+  </svg>
 </button>
 <button
-    *ngIf="isLightThemeEnabled"
-    matTooltip="Draw a line"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button class="menu-button"
-    (click)="addDrawing('line')">
-    <svg height="40" width="40">
+  *ngIf="isLightThemeEnabled"
+  matTooltip="Draw a line"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="addDrawing('line')"
+>
+  <svg height="40" width="40">
     <line
-        [ngClass]="{ selected: drawTools.isLineChosen }"
-        x1="30"
-        y1="10"
-        x2="10"
-        y2="30"
-        style="stroke:black;stroke-width:2"/>
-    </svg>
+      [ngClass]="{ selected: drawTools.isLineChosen }"
+      x1="30"
+      y1="10"
+      x2="10"
+      y2="30"
+      style="stroke: black; stroke-width: 2"
+    />
+  </svg>
 </button>
 <button
-    matTooltip="Lock or unlock all items"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="changeLockValue()">
-    <mat-icon [ngClass]="{unmarkedLight: !isLocked && isLightThemeEnabled, marked: isLocked}">lock</mat-icon>
+  matTooltip="Lock or unlock all items"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="changeLockValue()"
+>
+  <mat-icon [ngClass]="{ unmarkedLight: !isLocked && isLightThemeEnabled, marked: isLocked }">lock</mat-icon>
 </button>
 <button
-    matTooltip="Take a screenshot"
-    matTooltipClass="custom-tooltip"
-    mat-icon-button
-    class="menu-button"
-    (click)="takeScreenshot()"
-    >
-    <mat-icon [ngClass]="{unmarkedLight: !isLocked && isLightThemeEnabled}">photo_camera</mat-icon>
+  matTooltip="Take a screenshot"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button"
+  (click)="takeScreenshot()"
+>
+  <mat-icon [ngClass]="{ unmarkedLight: !isLocked && isLightThemeEnabled }">photo_camera</mat-icon>
 </button>
 <app-drawing-added
   [server]="server"
   [project]="project"
   [selectedDrawing]="selectedDrawing"
-  (drawingSaved)="onDrawingSaved()">
+  (drawingSaved)="onDrawingSaved()"
+>
 </app-drawing-added>
 
-<div id="crowbar-workspace">
-</div>
+<div id="crowbar-workspace"></div>
diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.scss b/src/app/components/project-map/project-map-menu/project-map-menu.component.scss
index c429af51..05c0892d 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.scss
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.scss
@@ -1,15 +1,15 @@
 .non-visible {
-    display: none;
+  display: none;
 }
 
 .unmarked {
-    color: white!important;
+  color: white !important;
 }
 
 .unmarkedLight {
-    color: black!important;
+  color: black !important;
 }
 
 .marked {
-    color: #0097a7!important;
+  color: #0097a7 !important;
 }
diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts
index 104a8edb..5fb785eb 100644
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts
@@ -1,4 +1,4 @@
-import { ProjectMapMenuComponent } from "./project-map-menu.component";
+import { ProjectMapMenuComponent } from './project-map-menu.component';
 import { ComponentFixture, async, TestBed } from '@angular/core/testing';
 import { MockedDrawingService } from '../project-map.component.spec';
 import { MapSettingsService } from '../../../services/mapsettings.service';
@@ -19,59 +19,67 @@ import { MockedSymbolService } from '../../preferences/common/symbols/symbols.co
 import { ElectronService } from 'ngx-electron';
 
 describe('ProjectMapMenuComponent', () => {
-    let component: ProjectMapMenuComponent;
-    let fixture: ComponentFixture<ProjectMapMenuComponent>;
-    let drawingService = new MockedDrawingService();
-    let mapSettingService = new MapSettingsService();
-    let mockedSymbolService = new MockedSymbolService;
+  let component: ProjectMapMenuComponent;
+  let fixture: ComponentFixture<ProjectMapMenuComponent>;
+  let drawingService = new MockedDrawingService();
+  let mapSettingService = new MapSettingsService();
+  let mockedSymbolService = new MockedSymbolService();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [MatIconModule, MatDialogModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
-            providers: [
-              { provide: DrawingService, useValue: drawingService },
-              { provide: ToolsService },
-              { provide: MapSettingsService, useValue: mapSettingService },
-              { provide: SymbolService, useValue: mockedSymbolService},
-              { provide: ElectronService }
-            ],
-            declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatIconModule,
+        MatDialogModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        { provide: DrawingService, useValue: drawingService },
+        { provide: ToolsService },
+        { provide: MapSettingsService, useValue: mapSettingService },
+        { provide: SymbolService, useValue: mockedSymbolService },
+        { provide: ElectronService },
+      ],
+      declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectMapMenuComponent);
-        component = fixture.componentInstance;
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectMapMenuComponent);
+    component = fixture.componentInstance;
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should reset choice on draw menu after saving drawing', () => {
-        spyOn(component, 'resetDrawToolChoice');
+  it('should reset choice on draw menu after saving drawing', () => {
+    spyOn(component, 'resetDrawToolChoice');
 
-        component.onDrawingSaved();
+    component.onDrawingSaved();
 
-        expect(component.resetDrawToolChoice).toHaveBeenCalled();
-    });
+    expect(component.resetDrawToolChoice).toHaveBeenCalled();
+  });
 
-    it('should call map settings service when lock value was changed', () => {
-        spyOn(mapSettingService, 'changeMapLockValue');
+  it('should call map settings service when lock value was changed', () => {
+    spyOn(mapSettingService, 'changeMapLockValue');
 
-        component.changeLockValue();
+    component.changeLockValue();
 
-        expect(mapSettingService.changeMapLockValue).toHaveBeenCalled();
-    });
+    expect(mapSettingService.changeMapLockValue).toHaveBeenCalled();
+  });
 
-    it('should call map settings service with proper value', () => {
-        spyOn(mapSettingService, 'changeMapLockValue');
+  it('should call map settings service with proper value', () => {
+    spyOn(mapSettingService, 'changeMapLockValue');
 
-        component.changeLockValue();
-        expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(true);
+    component.changeLockValue();
+    expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(true);
 
-        component.changeLockValue();
-        expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(false);
-    });
+    component.changeLockValue();
+    expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(false);
+  });
 });
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 dba46728..30e252ef 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
@@ -15,170 +15,173 @@ 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'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-project-map-menu',
+  templateUrl: './project-map-menu.component.html',
+  styleUrls: ['./project-map-menu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectMapMenuComponent implements OnInit, OnDestroy {
-    @Input() project: Project;
-    @Input() server: Server;
+  @Input() project: Project;
+  @Input() server: Server;
 
-    public selectedDrawing: string;
-    public drawTools = {
-        isRectangleChosen: false,
-        isEllipseChosen: false,
-        isLineChosen: false,
-        isTextChosen: false
+  public selectedDrawing: string;
+  public drawTools = {
+    isRectangleChosen: false,
+    isEllipseChosen: false,
+    isLineChosen: false,
+    isTextChosen: false,
+  };
+  public isLocked: boolean = false;
+  public isLightThemeEnabled: boolean = false;
+
+  constructor(
+    private toolsService: ToolsService,
+    private mapSettingsService: MapSettingsService,
+    private drawingService: DrawingService,
+    private symbolService: SymbolService,
+    private dialog: MatDialog,
+    private themeService: ThemeService
+  ) {}
+
+  ngOnInit() {
+    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 isLocked: boolean = false;
-    public isLightThemeEnabled: boolean = false;
+  }
 
-    constructor(
-        private toolsService: ToolsService,
-        private mapSettingsService: MapSettingsService,
-        private drawingService: DrawingService,
-        private symbolService: SymbolService,
-        private dialog: MatDialog,
-        private themeService: ThemeService
-    ) {}
+  public takeScreenshot() {
+    const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
+      width: '400px',
+      autoFocus: false,
+      disableClose: true,
+    });
+    dialogRef.afterClosed().subscribe((result: Screenshot) => {
+      if (result) this.saveImage(result);
+    });
+  }
 
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
+  private async saveImage(screenshotProperties: Screenshot) {
+    if (screenshotProperties.filetype === 'png') {
+      let splittedSvg = document.getElementsByTagName('svg')[0].outerHTML.split('image');
+      let i = 1;
+
+      while (i < splittedSvg.length) {
+        let splittedImage = splittedSvg[i].split('"');
+        let splittedUrl = splittedImage[1].split('/');
+
+        let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise();
+        let splittedElement = elem.split('-->');
+        splittedSvg[i] = splittedElement[1].substring(2);
+        i += 2;
+      }
+      let svgString = splittedSvg.join();
+
+      let placeholder = document.createElement('div');
+      placeholder.innerHTML = svgString;
+      let element = placeholder.firstChild;
+
+      svg.saveSvgAsPng(element, `${screenshotProperties.name}.png`);
+    } else {
+      var svg_el = select('svg').attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg').node();
+      downloadSvg(select('svg').node(), `${screenshotProperties.name}`);
     }
+  }
 
-    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',
-            autoFocus: false,
-            disableClose: true
-        });
-        dialogRef.afterClosed().subscribe((result: Screenshot) => {
-            if (result) this.saveImage(result);
-        });
-    }
-
-    private async saveImage(screenshotProperties: Screenshot) {
-        if (screenshotProperties.filetype === 'png') {
-            let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
-            let i = 1;
-
-            while (i < splittedSvg.length) {
-                let splittedImage = splittedSvg[i].split("\"");
-                let splittedUrl = splittedImage[1].split("/");
-
-                let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise(); 
-                let splittedElement = elem.split('-->');
-                splittedSvg[i] = splittedElement[1].substring(2);
-                i += 2;
-            }
-            let svgString = splittedSvg.join();
-
-            let placeholder = document.createElement('div');
-            placeholder.innerHTML = svgString;
-            let element = placeholder.firstChild;
-
-            svg.saveSvgAsPng(element, `${screenshotProperties.name}.png`);
-        } else {
-            var svg_el = select("svg")
-            .attr("version", 1.1)
-            .attr("xmlns", "http://www.w3.org/2000/svg")
-            .node();
-            downloadSvg(select("svg").node(), `${screenshotProperties.name}`);
-        }
-    }
-
-    public addDrawing(selectedObject: string) {
-        switch (selectedObject) {
-          case 'rectangle':
-            this.drawTools.isTextChosen = false;
-            this.drawTools.isEllipseChosen = false;
-            this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
-            this.drawTools.isLineChosen = false;
-            break;
-          case 'ellipse':
-            this.drawTools.isTextChosen = false;
-            this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
-            this.drawTools.isRectangleChosen = false;
-            this.drawTools.isLineChosen = false;
-            break;
-          case 'line':
-            this.drawTools.isTextChosen = false;
-            this.drawTools.isEllipseChosen = false;
-            this.drawTools.isRectangleChosen = false;
-            this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
-            break;
-          case 'text':
-            this.drawTools.isTextChosen = !this.drawTools.isTextChosen;
-            this.drawTools.isEllipseChosen = false;
-            this.drawTools.isRectangleChosen = false;
-            this.drawTools.isLineChosen = false;
-            this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
-            break;
-        }
-    
-        this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject;
-    }
-
-    public onDrawingSaved() {
-        this.resetDrawToolChoice();
-    }
-
-    public resetDrawToolChoice() {
-        this.drawTools.isRectangleChosen = false;
-        this.drawTools.isEllipseChosen = false;
-        this.drawTools.isLineChosen = false;
+  public addDrawing(selectedObject: string) {
+    switch (selectedObject) {
+      case 'rectangle':
         this.drawTools.isTextChosen = false;
-        this.selectedDrawing = '';
+        this.drawTools.isEllipseChosen = false;
+        this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen;
+        this.drawTools.isLineChosen = false;
+        break;
+      case 'ellipse':
+        this.drawTools.isTextChosen = false;
+        this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen;
+        this.drawTools.isRectangleChosen = false;
+        this.drawTools.isLineChosen = false;
+        break;
+      case 'line':
+        this.drawTools.isTextChosen = false;
+        this.drawTools.isEllipseChosen = false;
+        this.drawTools.isRectangleChosen = false;
+        this.drawTools.isLineChosen = !this.drawTools.isLineChosen;
+        break;
+      case 'text':
+        this.drawTools.isTextChosen = !this.drawTools.isTextChosen;
+        this.drawTools.isEllipseChosen = false;
+        this.drawTools.isRectangleChosen = false;
+        this.drawTools.isLineChosen = false;
         this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
+        break;
     }
 
-    public changeLockValue() {
-        this.isLocked = !this.isLocked;
-        this.mapSettingsService.changeMapLockValue(this.isLocked);
-    }
+    this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject;
+  }
 
-    public uploadImageFile(event) {
-        this.readImageFile(event.target);
-    }
-    
-    private readImageFile(fileInput) {
-        let file: File = fileInput.files[0];
-        let fileReader: FileReader = new FileReader();
-        let imageToUpload = new Image();
-    
-        fileReader.onloadend = () => {
-            let image = fileReader.result;
-            let svg = this.createSvgFileForImage(image, imageToUpload);
-            this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
-        }
-            
-        imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
-        imageToUpload.src = window.URL.createObjectURL(file);
-    }
+  public onDrawingSaved() {
+    this.resetDrawToolChoice();
+  }
 
-    private createSvgFileForImage(image: string|ArrayBuffer, imageToUpload: HTMLImageElement) {
-        return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
-                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`
-    }
+  public resetDrawToolChoice() {
+    this.drawTools.isRectangleChosen = false;
+    this.drawTools.isEllipseChosen = false;
+    this.drawTools.isLineChosen = false;
+    this.drawTools.isTextChosen = false;
+    this.selectedDrawing = '';
+    this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen);
+  }
 
-    ngOnDestroy() {}
+  public changeLockValue() {
+    this.isLocked = !this.isLocked;
+    this.mapSettingsService.changeMapLockValue(this.isLocked);
+  }
+
+  public uploadImageFile(event) {
+    this.readImageFile(event.target);
+  }
+
+  private readImageFile(fileInput) {
+    let file: File = fileInput.files[0];
+    let fileReader: FileReader = new FileReader();
+    let imageToUpload = new Image();
+
+    fileReader.onloadend = () => {
+      let image = fileReader.result;
+      let svg = this.createSvgFileForImage(image, imageToUpload);
+      this.drawingService
+        .add(this.server, this.project.project_id, -(imageToUpload.width / 2), -(imageToUpload.height / 2), svg)
+        .subscribe(() => {});
+    };
+
+    imageToUpload.onload = () => {
+      fileReader.readAsDataURL(file);
+    };
+    imageToUpload.src = window.URL.createObjectURL(file);
+  }
+
+  private createSvgFileForImage(image: string | ArrayBuffer, imageToUpload: HTMLImageElement) {
+    return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
+                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`;
+  }
+
+  ngOnDestroy() {}
 }
diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html
index ce700c32..8154fa86 100644
--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@@ -1,24 +1,63 @@
-<div *ngIf="project" [ngClass]="{lightTheme: isLightThemeEnabled}" class="project-map">
-  <app-d3-map *ngIf="!settings.angular_map" [server]="server" [project]="project" [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height"
-     [show-interface-labels]="isInterfaceLabelVisible" [readonly]="inReadOnlyMode" (nodeDragged)="onNodeDragged($event)" (drawingDragged)="onDrawingDragged($event)" (onLinkCreated)="onLinkCreated($event)"
-     (onDrawingResized)="onDrawingResized($event)">
+<div *ngIf="project" [ngClass]="{ lightTheme: isLightThemeEnabled }" class="project-map">
+  <app-d3-map
+    *ngIf="!settings.angular_map"
+    [server]="server"
+    [project]="project"
+    [symbols]="symbols"
+    [nodes]="nodes"
+    [links]="links"
+    [drawings]="drawings"
+    [width]="project.scene_width"
+    [height]="project.scene_height"
+    [show-interface-labels]="isInterfaceLabelVisible"
+    [readonly]="inReadOnlyMode"
+    (nodeDragged)="onNodeDragged($event)"
+    (drawingDragged)="onDrawingDragged($event)"
+    (onLinkCreated)="onLinkCreated($event)"
+    (onDrawingResized)="onDrawingResized($event)"
+  >
   </app-d3-map>
 
-  <app-experimental-map *ngIf="settings.angular_map" [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height" [show-interface-labels]="isInterfaceLabelVisible"
-     [selection-tool]="tools.selection" [moving-tool]="tools.moving" [draw-link-tool]="tools.draw_link" [readonly]="inReadOnlyMode">
+  <app-experimental-map
+    *ngIf="settings.angular_map"
+    [symbols]="symbols"
+    [nodes]="nodes"
+    [links]="links"
+    [drawings]="drawings"
+    [width]="project.scene_width"
+    [height]="project.scene_height"
+    [show-interface-labels]="isInterfaceLabelVisible"
+    [selection-tool]="tools.selection"
+    [moving-tool]="tools.moving"
+    [draw-link-tool]="tools.draw_link"
+    [readonly]="inReadOnlyMode"
+  >
   </app-experimental-map>
 
   <!-- Project Titlebar -->
-  <div id="project-titlebar" [ngClass]="{lightTheme: isLightThemeEnabled}">
-    <button matTooltip="Open menu" matTooltipClass="custom-tooltip" mat-icon-button class="gns3-button menu-button" [matMenuTriggerFor]="mainMenu">
+  <div id="project-titlebar" [ngClass]="{ lightTheme: isLightThemeEnabled }">
+    <button
+      matTooltip="Open menu"
+      matTooltipClass="custom-tooltip"
+      mat-icon-button
+      class="gns3-button menu-button"
+      [matMenuTriggerFor]="mainMenu"
+    >
       <mat-icon *ngIf="!isLightThemeEnabled" svgIcon="gns3"></mat-icon>
       <mat-icon *ngIf="isLightThemeEnabled" svgIcon="gns3black"></mat-icon>
     </button>
     <div class="project-titlebar-controls">
-      <div *ngIf="!readonly" [ngClass]="{lightTheme: isLightThemeEnabled}" class="menu-button-group primary-controls">
-        <app-template [server]="server" [project]="project" (onNodeCreation)="onNodeCreation($event)">
-        </app-template>
-        <button matTooltip="Add a link" matTooltipClass="custom-tooltip" class="menu-button" mat-icon-button [ngClass]="{selected: tools.draw_link}" [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
+      <div *ngIf="!readonly" [ngClass]="{ lightTheme: isLightThemeEnabled }" class="menu-button-group primary-controls">
+        <app-template [server]="server" [project]="project" (onNodeCreation)="onNodeCreation($event)"> </app-template>
+        <button
+          matTooltip="Add a link"
+          matTooltipClass="custom-tooltip"
+          class="menu-button"
+          mat-icon-button
+          [ngClass]="{ selected: tools.draw_link }"
+          [color]="tools.draw_link ? 'primary' : 'basic'"
+          (click)="toggleDrawLineMode()"
+        >
           <mat-icon>timeline</mat-icon>
         </button>
       </div>
@@ -29,12 +68,16 @@
       </div>
     </div>
     <div>
-      <button 
-        matTooltip="Toggle topology/servers summary" 
-        matTooltipClass="custom-tooltip" 
-        [ngClass]="{unmarkedLight: !isTopologySummaryVisible && isLightThemeEnabled, marked: isTopologySummaryVisible}"
+      <button
+        matTooltip="Toggle topology/servers summary"
+        matTooltipClass="custom-tooltip"
+        [ngClass]="{
+          unmarkedLight: !isTopologySummaryVisible && isLightThemeEnabled,
+          marked: isTopologySummaryVisible
+        }"
         mat-icon-button
-        (click)="toggleShowTopologySummary(!isTopologySummaryVisible)">
+        (click)="toggleShowTopologySummary(!isTopologySummaryVisible)"
+      >
         <mat-icon>toc</mat-icon>
       </button>
     </div>
@@ -49,11 +92,11 @@
         <mat-icon>developer_board</mat-icon>
         <span>Go to servers</span>
       </button>
-      <button mat-menu-item routerLink="/server/{{server.id}}/preferences">
+      <button mat-menu-item routerLink="/server/{{ server.id }}/preferences">
         <mat-icon>settings_applications</mat-icon>
         <span>Go to preferences</span>
       </button>
-      <button mat-menu-item routerLink="/server/{{server.id}}/systemstatus">
+      <button mat-menu-item routerLink="/server/{{ server.id }}/systemstatus">
         <mat-icon>info</mat-icon>
         <span>Go to system status</span>
       </button>
@@ -114,40 +157,51 @@
     <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
       <div class="options-item">
         <mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
-          Show interface labels
-        </mat-checkbox><br />
+          Show interface labels </mat-checkbox
+        ><br />
         <mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
-          Show console
-        </mat-checkbox><br />
+          Show console </mat-checkbox
+        ><br />
         <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
-          Show topology/servers summary
-        </mat-checkbox><br />
+          Show topology/servers summary </mat-checkbox
+        ><br />
         <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
-          Show notifications
-        </mat-checkbox><br />
-        <mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
-          Show layers
-        </mat-checkbox><br />
-        <mat-checkbox [ngModel]="gridVisibility" (change)="toggleGrid($event.checked)">
-          Show grid
-        </mat-checkbox><br />
+          Show notifications </mat-checkbox
+        ><br />
+        <mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)"> Show layers </mat-checkbox
+        ><br />
+        <mat-checkbox [ngModel]="gridVisibility" (change)="toggleGrid($event.checked)"> Show grid </mat-checkbox><br />
         <mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
-          Snap to grid
-        </mat-checkbox><br />
+          Snap to grid </mat-checkbox
+        ><br />
         <mat-checkbox [ngModel]="symbolScaling" (change)="toggleSymbolScaling($event.checked)">
-          Scale symbols
-        </mat-checkbox><br />
+          Scale symbols </mat-checkbox
+        ><br />
       </div>
     </mat-menu>
   </div>
 
   <!-- Project toolbar -->
-  <div id="project-toolbar" [ngClass]="{lightTheme: isLightThemeEnabled}">
+  <div id="project-toolbar" [ngClass]="{ lightTheme: isLightThemeEnabled }">
     <div class="section">
-      <button matTooltip="Selection mode" matTooltipClass="custom-tooltip" mat-icon-button class="selection-button menu-button" [color]="tools.moving ? 'basic' : 'primary'" (click)="toggleMovingMode()">
+      <button
+        matTooltip="Selection mode"
+        matTooltipClass="custom-tooltip"
+        mat-icon-button
+        class="selection-button menu-button"
+        [color]="tools.moving ? 'basic' : 'primary'"
+        (click)="toggleMovingMode()"
+      >
         <mat-icon>near_me</mat-icon>
       </button>
-      <button matTooltip="Pan workspace" matTooltipClass="custom-tooltip" class="pan-button menu-button" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
+      <button
+        matTooltip="Pan workspace"
+        matTooltipClass="custom-tooltip"
+        class="pan-button menu-button"
+        mat-icon-button
+        [color]="tools.moving ? 'primary' : 'basic'"
+        (click)="toggleMovingMode()"
+      >
         <mat-icon>zoom_out_map</mat-icon>
       </button>
       <button matTooltip="Zoom in" matTooltipClass="custom-tooltip" class="zoom-button" (click)="zoomIn()">
@@ -179,8 +233,19 @@
   <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
   <app-text-edited [server]="server"></app-text-edited>
   <div [ngClass]="{ visible: !isConsoleVisible }">
-    <app-console-wrapper *ngIf="project" [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-console-wrapper>
+    <app-console-wrapper
+      *ngIf="project"
+      [server]="server"
+      [project]="project"
+      (closeConsole)="toggleShowConsole($event)"
+    ></app-console-wrapper>
   </div>
   <div [ngClass]="{ visible: !isTopologySummaryVisible }">
-    <app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
+    <app-topology-summary
+      *ngIf="project"
+      [server]="server"
+      [project]="project"
+      (closeTopologySummary)="toggleShowTopologySummary($event)"
+    ></app-topology-summary>
   </div>
+</div>
diff --git a/src/app/components/project-map/project-map.component.scss b/src/app/components/project-map/project-map.component.scss
index 4c826803..3d811b07 100644
--- a/src/app/components/project-map/project-map.component.scss
+++ b/src/app/components/project-map/project-map.component.scss
@@ -14,130 +14,114 @@ g.node:hover {
 }
 
 .project-map {
-   background-color: #e8ecef;
+  background-color: #e8ecef;
 }
 
 #project-titlebar {
-   position: fixed;
-   top: 0px;
-   left: 0px;
-   right: 0px;
-   height: 60px;
-   padding: 0px 20px;
-   background-color: #20313b;
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
-   z-index: 2;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  height: 60px;
+  padding: 0px 20px;
+  background-color: #20313b;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  z-index: 2;
 
-   .gns3-button {
-      position: relative;
-      top: -2px;
+  .gns3-button {
+    position: relative;
+    top: -2px;
 
-      mat-icon {
-         width: 30px !important;
-         height: 30px !important;
-      }
-   }
+    mat-icon {
+      width: 30px !important;
+      height: 30px !important;
+    }
+  }
 
-   .primary-controls {
-      border-right: 1px solid rgba(255,255,255,0.3);
-      padding-right: 15px;
-      margin-right: 15px;
+  .primary-controls {
+    border-right: 1px solid rgba(255, 255, 255, 0.3);
+    padding-right: 15px;
+    margin-right: 15px;
 
-      &.lightTheme {
-        border-right: 1px solid black;
-      }
-   }
+    &.lightTheme {
+      border-right: 1px solid black;
+    }
+  }
 
-   .menu-button-group {
-      display: flex;
-      align-items: center;
-      height: 24px;
-   }
+  .menu-button-group {
+    display: flex;
+    align-items: center;
+    height: 24px;
+  }
 
-   .menu-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 36px;
-      width: 36px;
-      margin: 0px 8px;
-      border-radius: 18px;
-      background: none;
-      font-size: 20px;
-   }
+  .menu-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    width: 36px;
+    margin: 0px 8px;
+    border-radius: 18px;
+    background: none;
+    font-size: 20px;
+  }
 
-   .add-menu-button mat-icon {
-      font-size: 28px !important;
-   }
+  .add-menu-button mat-icon {
+    font-size: 28px !important;
+  }
 
-   .selected {
-      background: rgba(0, 151, 167, 0.1);
+  .selected {
+    background: rgba(0, 151, 167, 0.1);
 
-      mat-icon {
-         color: #0097a7 !important;
-      }
-   }
+    mat-icon {
+      color: #0097a7 !important;
+    }
+  }
 
-   .project-titlebar-controls {
-      display: flex;
-      align-items: center;
-   }
+  .project-titlebar-controls {
+    display: flex;
+    align-items: center;
+  }
 
-   &.lightTheme {
-      background-color: white !important;
+  &.lightTheme {
+    background-color: white !important;
 
-      .selected mat-icon {
-         color: #0097a7 !important;
-      }
-   }
+    .selected mat-icon {
+      color: #0097a7 !important;
+    }
+  }
 }
 
 #project-toolbar {
-   position: fixed;
-   top: 60px;
-   left: 0px;
-   width: 50px;
-   margin: 20px;
-   background-color: #20313b;
-   border-radius: 6px;
-   box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
-   z-index: 2;
+  position: fixed;
+  top: 60px;
+  left: 0px;
+  width: 50px;
+  margin: 20px;
+  background-color: #20313b;
+  border-radius: 6px;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
+  z-index: 2;
 
-   mat-icon {
-      font-size: 20px;
-   }
+  mat-icon {
+    font-size: 20px;
+  }
 
-   .menu-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 36px;
-      width: 36px;
-      border-radius: 18px;
-      background: none;
-      margin: 2px 0px;
-   }
+  .menu-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    width: 36px;
+    border-radius: 18px;
+    background: none;
+    margin: 2px 0px;
+  }
 
-   .zoom-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 36px;
-      width: 36px;
-      border-radius: 18px;
-      background: none;
-      margin: 2px 0px;
-      color: white;
-
-      mat-icon {
-        font-size: 24px!important;
-      }
-   }
-
-   .reset-zoom-button {
+  .zoom-button {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -149,53 +133,69 @@ g.node:hover {
     color: white;
 
     mat-icon {
-      font-size: 16px!important;
+      font-size: 24px !important;
+    }
+  }
+
+  .reset-zoom-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 36px;
+    width: 36px;
+    border-radius: 18px;
+    background: none;
+    margin: 2px 0px;
+    color: white;
+
+    mat-icon {
+      font-size: 16px !important;
       margin-top: 8px;
     }
-   }
+  }
 
-   .selection-button {
-      margin-bottom: 0px !important;
-   }
+  .selection-button {
+    margin-bottom: 0px !important;
+  }
 
-   .snapshot-button mat-icon {
-      font-size: 16px;
-   }
+  .snapshot-button mat-icon {
+    font-size: 16px;
+  }
 
-   .section {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      border-top: 1px solid rgba(255,255,255,0.3);
-      padding: 5px 0px;
+  .section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 5px 0px;
+
+    &:first-child {
+      border: none;
+    }
+  }
+
+  &.lightTheme {
+    background-color: rgba(244, 248, 252, 0.95) !important;
+
+    .zoom-button {
+      opacity: 0.7;
+      color: black;
+    }
+
+    .reset-zoom-button {
+      opacity: 0.7;
+      color: black;
+    }
+
+    .section {
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
 
       &:first-child {
-         border: none;
+        border: none;
       }
-   }
-
-   &.lightTheme {
-      background-color: rgba(244, 248, 252, 0.95) !important;
-
-      .zoom-button {
-         opacity: 0.7;
-         color: black;
-      }
-
-      .reset-zoom-button {
-        opacity: 0.7;
-        color: black;
-      }
-
-      .section {
-         border-top: 1px solid rgba(0,0,0,0.1);
-
-         &:first-child {
-            border: none;
-         }
-      }
-   }
+    }
+  }
 }
 
 img {
@@ -204,11 +204,11 @@ img {
 }
 
 .lightTheme {
-  color: black!important;
+  color: black !important;
 }
 
 .darkTheme {
-  color: white!important;
+  color: white !important;
 }
 
 #show-menu-wrapper {
@@ -393,13 +393,13 @@ mat-menu-panel {
 }
 
 .unmarked {
-  color: white!important;
+  color: white !important;
 }
 
 .unmarkedLight {
-  color: black!important;
+  color: black !important;
 }
 
 .marked {
-  color: #0097a7!important;
+  color: #0097a7 !important;
 }
diff --git a/src/app/components/project-map/project-map.component.spec.ts b/src/app/components/project-map/project-map.component.spec.ts
index 15d07471..6bc6498b 100644
--- a/src/app/components/project-map/project-map.component.spec.ts
+++ b/src/app/components/project-map/project-map.component.spec.ts
@@ -58,7 +58,12 @@ import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.com
 import { MockedToasterService } from '../../services/toaster.service.spec';
 import { ToasterService } from '../../services/toaster.service';
 import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
-import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
+import {
+  MapNodesDataSource,
+  MapLinksDataSource,
+  MapDrawingsDataSource,
+  MapSymbolsDataSource,
+} from '../../cartography/datasources/map-datasource';
 import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
 import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
 import { NotificationService } from '../../services/notification.service';
@@ -73,7 +78,7 @@ export class MockedProgressService {
 export class MockedNodeService {
   public node = { label: {} } as Node;
   constructor() {}
-  
+
   getDefaultCommand(): string {
     return `putty.exe -telnet \%h \%p -wt \"\%d\" -gns3 5 -skin 4`;
   }
@@ -133,7 +138,7 @@ export class MockedNodeService {
   saveConfiguration(server: Server, node: Node, configuration: string) {
     return of(configuration);
   }
-  
+
   update(server: Server, node: Node) {
     return of(node);
   }
@@ -179,7 +184,7 @@ export class MockedLinkService {
     return of({});
   }
 
-  deleteLink(_server: Server, link: Link){
+  deleteLink(_server: Server, link: Link) {
     return of({});
   }
 
@@ -199,7 +204,7 @@ export class MockedLinkService {
     return of({});
   }
 
-  getAvailableFilters(server: Server, link: Link) { 
+  getAvailableFilters(server: Server, link: Link) {
     return of({});
   }
 }
@@ -224,11 +229,11 @@ export class MockedNodesDataSource {
   clear() {}
 
   get() {
-    return {status: 'started'};
+    return { status: 'started' };
   }
 
   getItems() {
-    return [{name: 'testNode'}];
+    return [{ name: 'testNode' }];
   }
 
   update() {
@@ -253,15 +258,24 @@ xdescribe('ProjectMapComponent', () => {
   let linksDataSource = new MockedLinksDataSource();
   let mockedToasterService = new MockedToasterService();
   let nodeCreatedLabelStylesFixer;
-  let mockedRouter = new MockedActivatedRoute;
+  let mockedRouter = new MockedActivatedRoute();
 
   beforeEach(async(() => {
     nodeCreatedLabelStylesFixer = {
-      fix: (node) => node
+      fix: (node) => node,
     };
 
     TestBed.configureTestingModule({
-      imports: [MatBottomSheetModule, MatIconModule, MatDialogModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+      imports: [
+        MatBottomSheetModule,
+        MatIconModule,
+        MatDialogModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+      ],
       providers: [
         { provide: ActivatedRoute },
         { provide: ServerService, useClass: MockedServerService },
@@ -294,11 +308,11 @@ xdescribe('ProjectMapComponent', () => {
         { provide: MovingEventSource },
         {
           provide: RecentlyOpenedProjectService,
-          useClass: RecentlyOpenedProjectService
+          useClass: RecentlyOpenedProjectService,
         },
-        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer },
         { provide: MapScaleService },
-        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer },
         { provide: ToasterService, useValue: mockedToasterService },
         { provide: Router, useValue: mockedRouter },
         { provide: MapNodesDataSource, useClass: MapNodesDataSource },
@@ -306,18 +320,18 @@ xdescribe('ProjectMapComponent', () => {
         { provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
         { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
         { provide: MapSettingsService, useClass: MapSettingsService },
-        { provide: NotificationService }
+        { provide: NotificationService },
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProjectMapComponent);
     component = fixture.componentInstance;
-    component.projectMapMenuComponent = { 
-      resetDrawToolChoice(){}
+    component.projectMapMenuComponent = {
+      resetDrawToolChoice() {},
     } as ProjectMapMenuComponent;
 
     component.ws = {
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index 547e9a1f..40f18592 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -1,4 +1,12 @@
-import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, ElementRef, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  ElementRef,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
@@ -31,7 +39,12 @@ import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-nod
 import { SettingsService, Settings } from '../../services/settings.service';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { ToolsService } from '../../services/tools.service';
-import { DrawingContextMenu, LinkContextMenu, LabelContextMenu, InterfaceLabelContextMenu } from '../../cartography/events/event-source';
+import {
+  DrawingContextMenu,
+  LinkContextMenu,
+  LabelContextMenu,
+  InterfaceLabelContextMenu,
+} from '../../cartography/events/event-source';
 import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
 import { SelectionManager } from '../../cartography/managers/selection-manager';
 import { SelectionTool } from '../../cartography/tools/selection-tool';
@@ -59,7 +72,13 @@ import { mixinColor } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
-import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
+import {
+  MapNodesDataSource,
+  MapLinksDataSource,
+  MapDrawingsDataSource,
+  MapSymbolsDataSource,
+  Indexed,
+} from '../../cartography/datasources/map-datasource';
 import { MapSettingsService } from '../../services/mapsettings.service';
 import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
 import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
@@ -75,12 +94,11 @@ import { NodeConsoleService } from '../../services/nodeConsole.service';
 import * as Mousetrap from 'mousetrap';
 import { SymbolService } from '../../services/symbol.service';
 
-
 @Component({
   selector: 'app-project-map',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './project-map.component.html',
-  styleUrls: ['./project-map.component.scss']
+  styleUrls: ['./project-map.component.scss'],
 })
 export class ProjectMapComponent implements OnInit, OnDestroy {
   public nodes: Node[] = [];
@@ -105,7 +123,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     selection: true,
     moving: false,
     draw_link: false,
-    text_editing: true
+    text_editing: true,
   };
 
   protected settings: Settings;
@@ -120,7 +138,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(D3MapComponent) mapChild: D3MapComponent;
   @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
 
-  private projectMapSubscription: Subscription =  new Subscription();
+  private projectMapSubscription: Subscription = new Subscription();
 
   constructor(
     private route: ActivatedRoute,
@@ -189,19 +207,23 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.addKeyboardListeners();
 
     this.themeService.themeChanged.subscribe((value: string) => {
-      this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+      this.themeService.getActualTheme() === 'light'
+        ? (this.isLightThemeEnabled = true)
+        : (this.isLightThemeEnabled = false);
     });
   }
 
   getSettings() {
-    this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
     this.cd.detectChanges();
 
     this.settings = this.settingsService.getAll();
     this.symbolScaling = this.mapSettingsService.getSymbolScaling();
     this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
-    this.mapSettingsService.logConsoleSubject.subscribe(value => this.isConsoleVisible = value);
+    this.mapSettingsService.logConsoleSubject.subscribe((value) => (this.isConsoleVisible = value));
     this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
     this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
     this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? true : false;
@@ -247,23 +269,29 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       })
     );
 
-    this.projectMapSubscription.add(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
-      this.showMessage({
-          type: 'error',
-          message: message
-      });
-    }));
-
-    this.projectMapSubscription.add(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
+    this.projectMapSubscription.add(
+      this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
         this.showMessage({
-            type: 'warning',
-            message: message
+          type: 'error',
+          message: message,
         });
-    }));
+      })
+    );
 
-    this.projectMapSubscription.add(this.mapSettingsService.symbolScalingSubject.subscribe((value) => {
+    this.projectMapSubscription.add(
+      this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
+        this.showMessage({
+          type: 'warning',
+          message: message,
+        });
+      })
+    );
+
+    this.projectMapSubscription.add(
+      this.mapSettingsService.symbolScalingSubject.subscribe((value) => {
         if (value) this.applyScalingOfNodeSymbols();
-    }));
+      })
+    );
   }
 
   applyScalingOfNodeSymbols() {
@@ -283,29 +311,29 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       from(this.serverService.get(server_id))
         .pipe(
           mergeMap((server: Server) => {
-            if (!server ) this.router.navigate(['/servers']);
+            if (!server) this.router.navigate(['/servers']);
 
             this.server = server;
             return this.projectService.get(server, paramMap.get('project_id')).pipe(
-              map(project => {
+              map((project) => {
                 return project;
               })
             );
           }),
           mergeMap((project: Project) => {
             this.project = project;
-            if (!project ) this.router.navigate(['/servers']);
+            if (!project) this.router.navigate(['/servers']);
 
             this.projectService.open(this.server, this.project.project_id);
             this.title.setTitle(this.project.name);
 
             this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
-            
+
             this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
             this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
 
             if (this.project.status === 'opened') {
-              return new Observable<Project>(observer => {
+              return new Observable<Project>((observer) => {
                 observer.next(this.project);
               });
             } else {
@@ -317,7 +345,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
           (project: Project) => {
             this.onProjectLoad(project);
           },
-          error => {
+          (error) => {
             this.progressService.setError(error);
           },
           () => {
@@ -374,10 +402,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       const selected = this.selectionManager.getSelected();
 
       selected
-        .filter(item => item instanceof MapNode)
+        .filter((item) => item instanceof MapNode)
         .forEach((item: MapNode) => {
           const node = this.mapNodeToNode.convert(item);
-          this.nodeService.delete(this.server, node).subscribe(data => {
+          this.nodeService.delete(this.server, node).subscribe((data) => {
             this.toasterService.success('Node has been deleted');
           });
         });
@@ -407,7 +435,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
         this.progressService.deactivate();
       });
-      this.projectMapSubscription.add(subscription);
+    this.projectMapSubscription.add(subscription);
   }
 
   setUpProjectWS(project: Project) {
@@ -458,15 +486,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     const onLabelContextMenu = this.labelWidget.onContextMenu.subscribe((eventLabel: LabelContextMenu) => {
       const label = this.mapLabelToLabel.convert(eventLabel.label);
-      const node = this.nodes.find(n => n.node_id === eventLabel.label.nodeId);
+      const node = this.nodes.find((n) => n.node_id === eventLabel.label.nodeId);
       this.contextMenu.openMenuForLabel(label, node, eventLabel.event.pageY, eventLabel.event.pageX);
     });
 
-    const onInterfaceLabelContextMenu = this.interfaceLabelWidget.onContextMenu.subscribe((eventInterfaceLabel: InterfaceLabelContextMenu) => {
-      const linkNode = this.mapLinkNodeToLinkNode.convert(eventInterfaceLabel.interfaceLabel);
-      const link = this.links.find(l => l.link_id === eventInterfaceLabel.interfaceLabel.linkId);
-      this.contextMenu.openMenuForInterfaceLabel(linkNode, link, eventInterfaceLabel.event.pageY, eventInterfaceLabel.event.pageX);
-    });
+    const onInterfaceLabelContextMenu = this.interfaceLabelWidget.onContextMenu.subscribe(
+      (eventInterfaceLabel: InterfaceLabelContextMenu) => {
+        const linkNode = this.mapLinkNodeToLinkNode.convert(eventInterfaceLabel.interfaceLabel);
+        const link = this.links.find((l) => l.link_id === eventInterfaceLabel.interfaceLabel.linkId);
+        this.contextMenu.openMenuForInterfaceLabel(
+          linkNode,
+          link,
+          eventInterfaceLabel.event.pageY,
+          eventInterfaceLabel.event.pageX
+        );
+      }
+    );
 
     const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => {
       const selectedItems = this.selectionManager.getSelected();
@@ -485,7 +520,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         } else if (elem instanceof MapLabel) {
           labels.push(this.mapLabelToLabel.convert(elem));
         } else if (elem instanceof MapLink) {
-          links.push(this.mapLinkToLink.convert(elem))
+          links.push(this.mapLinkToLink.convert(elem));
         }
       });
 
@@ -510,104 +545,120 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   onNodeCreation(nodeAddedEvent: NodeAddedEvent) {
-    if(!nodeAddedEvent) {
+    if (!nodeAddedEvent) {
       return;
     }
 
     this.progressService.activate();
-    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(()=>{});
-      // }
-      this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
+    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(()=>{});
+          // }
+          this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
+            nodes
+              .filter((node) => node.label.style === null)
+              .forEach((node) => {
+                const fixedNode = this.nodeCreatedLabelStylesFixer.fix(node);
+                this.nodeService.updateLabel(this.server, node, fixedNode.label).subscribe();
+              });
 
-        nodes.filter((node) => node.label.style === null).forEach((node) => {
-          const fixedNode = this.nodeCreatedLabelStylesFixer.fix(node);
-          this.nodeService.updateLabel(this.server, node, fixedNode.label).subscribe();
-        });
-
-        this.nodesDataSource.set(nodes);
-        nodeAddedEvent.numberOfNodes--;
-        if (nodeAddedEvent.numberOfNodes > 0) {
-          nodeAddedEvent.x = nodeAddedEvent.x + 50 < this.project.scene_width/2 ? nodeAddedEvent.x + 50 : nodeAddedEvent.x;
-          nodeAddedEvent.y = nodeAddedEvent.y + 50 < this.project.scene_height/2 ? nodeAddedEvent.y + 50 : nodeAddedEvent.y;
-          this.onNodeCreation(nodeAddedEvent);
-        } else {
+            this.nodesDataSource.set(nodes);
+            nodeAddedEvent.numberOfNodes--;
+            if (nodeAddedEvent.numberOfNodes > 0) {
+              nodeAddedEvent.x =
+                nodeAddedEvent.x + 50 < this.project.scene_width / 2 ? nodeAddedEvent.x + 50 : nodeAddedEvent.x;
+              nodeAddedEvent.y =
+                nodeAddedEvent.y + 50 < this.project.scene_height / 2 ? nodeAddedEvent.y + 50 : nodeAddedEvent.y;
+              this.onNodeCreation(nodeAddedEvent);
+            } else {
+              this.progressService.deactivate();
+            }
+          });
+        },
+        (error) => {
+          this.toasterService.error(error.error.message);
           this.progressService.deactivate();
         }
-      });
-    },
-    error => {
-      this.toasterService.error(error.error.message);
-      this.progressService.deactivate();
-    });
+      );
   }
 
   public fitInView() {
-    this.drawings.forEach(drawing => {
-      let splittedSvg = drawing.svg.split("\"");
+    this.drawings.forEach((drawing) => {
+      let splittedSvg = drawing.svg.split('"');
       let height: number = parseInt(splittedSvg[1], 10);
-      let width: number =  parseInt(splittedSvg[3], 10);
+      let width: number = parseInt(splittedSvg[3], 10);
 
       drawing.element = {
         width: width,
-        height: height
+        height: height,
       };
     });
 
-    if ((this.nodes.length === 0) && (this.drawings.length === 0)) { return };
-    let minX : number, maxX : number, minY: number, maxY : number;
+    if (this.nodes.length === 0 && this.drawings.length === 0) {
+      return;
+    }
+    let minX: number, maxX: number, minY: number, maxY: number;
 
     let borderedNodes: BorderedNode[] = [];
-    this.nodes.forEach(n => {
+    this.nodes.forEach((n) => {
       let borderedNode: BorderedNode = new BorderedNode();
       borderedNode.node = n;
       borderedNode.top = n.y;
       borderedNode.left = n.x;
-      borderedNode.bottom =  n.y + n.height;
+      borderedNode.bottom = n.y + n.height;
       borderedNode.right = n.x + n.width;
 
-      if ((n.y + n.label.y) < borderedNode.top) {
+      if (n.y + n.label.y < borderedNode.top) {
         borderedNode.top = n.y + n.label.y;
-      };
+      }
 
-      if ((n.x + n.label.x) < borderedNode.left) {
+      if (n.x + n.label.x < borderedNode.left) {
         borderedNode.left = n.x + n.label.x;
-      };
+      }
 
-      if ((n.y + n.label.y) > borderedNode.bottom) {
+      if (n.y + n.label.y > borderedNode.bottom) {
         borderedNode.bottom = n.y + n.label.y;
-      };
+      }
 
-      if ((n.x + n.label.x) > borderedNode.right) {
+      if (n.x + n.label.x > borderedNode.right) {
         borderedNode.right = n.x + n.label.x;
-      };
+      }
 
       borderedNodes.push(borderedNode);
     });
 
-    let nodeMinX = borderedNodes.sort((n,m) => n.left - m.left)[0];
-    let nodeMaxX = borderedNodes.sort((n,m) => n.right - m.right)[borderedNodes.length - 1];
-    let nodeMinY = borderedNodes.sort((n,m) => n.top - m.top)[0];
-    let nodeMaxY = borderedNodes.sort((n,m) => n.bottom - m.bottom)[borderedNodes.length - 1];
+    let nodeMinX = borderedNodes.sort((n, m) => n.left - m.left)[0];
+    let nodeMaxX = borderedNodes.sort((n, m) => n.right - m.right)[borderedNodes.length - 1];
+    let nodeMinY = borderedNodes.sort((n, m) => n.top - m.top)[0];
+    let nodeMaxY = borderedNodes.sort((n, m) => n.bottom - m.bottom)[borderedNodes.length - 1];
 
     let borderedDrawings: BorderedDrawing[] = [];
-    this.drawings.forEach(n => {
-      let borderedDrawing: BorderedDrawing =  new BorderedDrawing();
+    this.drawings.forEach((n) => {
+      let borderedDrawing: BorderedDrawing = new BorderedDrawing();
       borderedDrawing.drawing = n;
       borderedDrawing.top = n.y;
       borderedDrawing.left = n.x;
-      borderedDrawing.bottom =  n.y + n.element.height;
+      borderedDrawing.bottom = n.y + n.element.height;
       borderedDrawing.right = n.x + n.element.width;
 
       borderedDrawings.push(borderedDrawing);
     });
 
-    let drawingMinX = borderedDrawings.sort((n,m) => n.left - m.left)[0];
-    let drawingMaxX = borderedDrawings.sort((n,m) => n.right - m.right)[borderedDrawings.length - 1];
-    let drawingMinY = borderedDrawings.sort((n,m) => n.top - m.top)[0];
-    let drawingMaxY = borderedDrawings.sort((n,m) => n.bottom - m.bottom)[borderedDrawings.length - 1];
+    let drawingMinX = borderedDrawings.sort((n, m) => n.left - m.left)[0];
+    let drawingMaxX = borderedDrawings.sort((n, m) => n.right - m.right)[borderedDrawings.length - 1];
+    let drawingMinY = borderedDrawings.sort((n, m) => n.top - m.top)[0];
+    let drawingMaxY = borderedDrawings.sort((n, m) => n.bottom - m.bottom)[borderedDrawings.length - 1];
 
     if (drawingMinX && nodeMinX) {
       if (nodeMinX.left < drawingMinX.left) {
@@ -615,19 +666,19 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       } else {
         minX = drawingMinX.left;
       }
-  
+
       if (nodeMaxX.right > drawingMaxX.right) {
         maxX = nodeMaxX.right;
       } else {
         maxX = drawingMaxX.right;
       }
-  
+
       if (nodeMinY.top < drawingMinY.top) {
         minY = nodeMinY.top;
       } else {
         minY = drawingMinY.top;
       }
-  
+
       if (nodeMaxY.bottom > drawingMaxY.bottom) {
         maxY = nodeMaxY.bottom;
       } else {
@@ -670,15 +721,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.project.scene_width = this.project.scene_width * scale;
       this.project.scene_height = this.project.scene_height * scale;
       if (heightToSceneHeightRatio < widthOfAreaToShow) {
-        this.scrollX = (minX * scale) - ((windowWidth - widthOfAreaToShow*scale)/2) + this.project.scene_width/2;
-        this.scrollY = (minY * scale) + this.project.scene_height/2;
+        this.scrollX = minX * scale - (windowWidth - widthOfAreaToShow * scale) / 2 + this.project.scene_width / 2;
+        this.scrollY = minY * scale + this.project.scene_height / 2;
       } else {
-        this.scrollX = (minX * scale) + this.project.scene_width/2;
-        this.scrollY = (minY * scale) - ((windowHeight - heightOfAreaToShow*scale)/2) + this.project.scene_height/2;
+        this.scrollX = minX * scale + this.project.scene_width / 2;
+        this.scrollY = minY * scale - (windowHeight - heightOfAreaToShow * scale) / 2 + this.project.scene_height / 2;
       }
     } else {
-      this.scrollX = (minX * scale) + this.project.scene_width/2;
-      this.scrollY = (minY * scale) + this.project.scene_height/2;
+      this.scrollX = minX * scale + this.project.scene_width / 2;
+      this.scrollY = minY * scale + this.project.scene_height / 2;
     }
     this.scrollEnabled = true;
   }
@@ -690,9 +741,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public centerView() {
     if (this.project) {
-      let scrollX: number = (this.project.scene_width - document.documentElement.clientWidth) > 0 ? (this.project.scene_width - document.documentElement.clientWidth)/2 : 0;
-      let scrollY: number = (this.project.scene_height - document.documentElement.clientHeight) > 0 ? (this.project.scene_height - document.documentElement.clientHeight)/2 : 0;
-  
+      let scrollX: number =
+        this.project.scene_width - document.documentElement.clientWidth > 0
+          ? (this.project.scene_width - document.documentElement.clientWidth) / 2
+          : 0;
+      let scrollY: number =
+        this.project.scene_height - document.documentElement.clientHeight > 0
+          ? (this.project.scene_height - document.documentElement.clientHeight) / 2
+          : 0;
+
       window.scrollTo(scrollX, scrollY);
     } else {
       this.toasterService.error('Please wait until all components are loaded.');
@@ -726,7 +783,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public toggleMovingMode() {
     this.tools.moving = !this.tools.moving;
     this.movingEventSource.movingModeState.emit(this.tools.moving);
-    
+
     if (!this.readonly) {
       this.tools.selection = !this.tools.moving;
       this.toolsService.selectionToolActivation(this.tools.selection);
@@ -748,7 +805,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.isConsoleVisible = visible;
     this.mapSettingsService.toggleLogConsole(this.isConsoleVisible);
   }
-  
+
   public toggleShowTopologySummary(visible: boolean) {
     this.isTopologySummaryVisible = visible;
     this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
@@ -769,7 +826,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     if (this.layersVisibility) {
       localStorage.setItem('layersVisibility', 'true');
     } else {
-      localStorage.removeItem('layersVisibility')
+      localStorage.removeItem('layersVisibility');
     }
     this.mapChild.applyMapSettingsChanges();
   }
@@ -781,7 +838,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     } else {
       localStorage.removeItem('gridVisibility');
     }
-    this.mapChild.gridVisibility =  this.gridVisibility ? 1 : 0;
+    this.mapChild.gridVisibility = this.gridVisibility ? 1 : 0;
   }
 
   public toggleSnapToGrid(enabled: boolean) {
@@ -796,7 +853,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public hideMenu() {
-    this.projectMapMenuComponent.resetDrawToolChoice()
+    this.projectMapMenuComponent.resetDrawToolChoice();
     this.isProjectMapMenuVisible = false;
   }
 
@@ -811,7 +868,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   zoomOut() {
     let currentScale = this.mapScaleService.getScale();
 
-    if ((currentScale - 0.1) > 0) {
+    if (currentScale - 0.1 > 0) {
       this.mapScaleService.setScale(currentScale - 0.1);
     }
   }
@@ -824,7 +881,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -834,7 +891,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -845,7 +902,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(EditProjectDialogComponent, {
       width: '600px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -857,7 +914,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -871,7 +928,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.bottomSheet.open(NavigationDialogComponent);
         let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
         bottomSheetRef.instance.projectMessage = 'imported project';
-        
+
         const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => {
           if (result) {
             this.projectService.open(this.server, uuid).subscribe(() => {
@@ -884,18 +941,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   exportProject() {
-    if (this.nodes.filter(node => node.node_type === 'virtualbox').length > 0) {
-      this.toasterService.error('Map with VirtualBox machines cannot be exported.')
-    } else if (this.nodes.filter(node => 
-        (node.status === 'started' && node.node_type==='vpcs') || 
-        (node.status === 'started' && node.node_type==='virtualbox') || 
-        (node.status === 'started' && node.node_type==='vmware')).length > 0) {
-      this.toasterService.error('Project with running nodes cannot be exported.')
+    if (this.nodes.filter((node) => node.node_type === 'virtualbox').length > 0) {
+      this.toasterService.error('Map with VirtualBox machines cannot be exported.');
+    } else if (
+      this.nodes.filter(
+        (node) =>
+          (node.status === 'started' && node.node_type === 'vpcs') ||
+          (node.status === 'started' && node.node_type === 'virtualbox') ||
+          (node.status === 'started' && node.node_type === 'vmware')
+      ).length > 0
+    ) {
+      this.toasterService.error('Project with running nodes cannot be exported.');
     } else {
       location.assign(this.projectService.getExportPath(this.server, this.project));
     }
   }
-  
+
   public uploadImageFile(event) {
     this.readImageFile(event.target);
   }
@@ -910,10 +971,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" 
                 height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" 
                 xlink:href=\"${image}\"/>\n</svg>`;
-      this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
-    }
-        
-    imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
+      this.drawingService
+        .add(this.server, this.project.project_id, -(imageToUpload.width / 2), -(imageToUpload.height / 2), svg)
+        .subscribe(() => {});
+    };
+
+    imageToUpload.onload = () => {
+      fileReader.readAsDataURL(file);
+    };
     imageToUpload.src = window.URL.createObjectURL(file);
   }
 
@@ -948,7 +1013,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       width: '1000px',
       maxHeight: '700px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html
index c3bd3f57..2cc0ed50 100644
--- a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html
+++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html
@@ -1,8 +1,8 @@
 <h1 mat-dialog-title>Take a screenshot</h1>
 
 <mat-radio-group class="radio-group" aria-label="Sorting">
-    <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
-    <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
+  <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
+  <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
 </mat-radio-group>
 
 <form [formGroup]="nameForm" class="name-form">
@@ -15,10 +15,12 @@
       [ngClass]="{ 'is-invalid': form.acreenshotName?.errors }"
       placeholder="Please enter name"
     />
-    <mat-error *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.screenshotName?.errors.required"
+    <mat-error
+      *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.screenshotName?.errors.required"
       >Name for screenshot is required</mat-error
     >
-    <mat-error *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.acreenshotName?.errors.invalidName"
+    <mat-error
+      *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.acreenshotName?.errors.invalidName"
       >Entered name is incorrect</mat-error
     >
   </mat-form-field>
diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss
index bde5436e..7cd61f31 100644
--- a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss
+++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss
@@ -1,8 +1,8 @@
 .name-form {
-    width: 100%;
+  width: 100%;
 }
 
 .radio-group {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
index 54c98319..6926211b 100644
--- a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
+++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
@@ -5,11 +5,10 @@ import { ToasterService } from '../../../services/toaster.service';
 import { ElectronService } from 'ngx-electron';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
-
 @Component({
   selector: 'app-screenshot-dialog',
   templateUrl: './screenshot-dialog.component.html',
-  styleUrls: ['./screenshot-dialog.component.scss']
+  styleUrls: ['./screenshot-dialog.component.scss'],
 })
 export class ScreenshotDialogComponent implements OnInit {
   nameForm: FormGroup;
@@ -24,9 +23,9 @@ export class ScreenshotDialogComponent implements OnInit {
     private deviceService: DeviceDetectorService
   ) {
     this.nameForm = this.formBuilder.group({
-      screenshotName: new FormControl(`screenshot-${Date.now()}`, [Validators.required])
+      screenshotName: new FormControl(`screenshot-${Date.now()}`, [Validators.required]),
     });
-    this.isPngAvailable = this.electronService.isWindows || (this.deviceService.getDeviceInfo().os==='Windows');
+    this.isPngAvailable = this.electronService.isWindows || this.deviceService.getDeviceInfo().os === 'Windows';
   }
 
   ngOnInit() {}
@@ -37,12 +36,12 @@ export class ScreenshotDialogComponent implements OnInit {
 
   onAddClick(): void {
     if (this.nameForm.invalid) {
-        return;
+      return;
     }
 
     let screenshotProperties: Screenshot = {
-        name: this.nameForm.get('screenshotName').value,
-        filetype: this.filetype
+      name: this.nameForm.get('screenshotName').value,
+      filetype: this.filetype,
     };
     this.dialogRef.close(screenshotProperties);
   }
@@ -52,19 +51,19 @@ export class ScreenshotDialogComponent implements OnInit {
   }
 
   onKeyDown(event) {
-    if (event.key === "Enter") {
-        this.onAddClick();
+    if (event.key === 'Enter') {
+      this.onAddClick();
     }
   }
 
   setFiletype(type: string) {
     if (this.isPngAvailable) {
-        this.filetype = type;   
+      this.filetype = type;
     }
   }
 }
 
 export class Screenshot {
-    name: string;
-    filetype: string;
+  name: string;
+  filetype: string;
 }
diff --git a/src/app/components/project-map/web-console/web-console.component.scss b/src/app/components/project-map/web-console/web-console.component.scss
index 1f3236b0..f9fc6414 100644
--- a/src/app/components/project-map/web-console/web-console.component.scss
+++ b/src/app/components/project-map/web-console/web-console.component.scss
@@ -1,4 +1,4 @@
 .lightTheme {
-    background: white!important;
-    color: black!important;
+  background: white !important;
+  color: black !important;
 }
diff --git a/src/app/components/project-map/web-console/web-console.component.ts b/src/app/components/project-map/web-console/web-console.component.ts
index a3c3abfd..6686b46b 100644
--- a/src/app/components/project-map/web-console/web-console.component.ts
+++ b/src/app/components/project-map/web-console/web-console.component.ts
@@ -8,79 +8,78 @@ import { FitAddon } from 'xterm-addon-fit';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
 import { ThemeService } from '../../../services/theme.service';
 
-
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    selector: 'app-web-console',
-    templateUrl: './web-console.component.html',
-    styleUrls: ['../../../../../node_modules/xterm/css/xterm.css', './web-console.component.scss']
+  encapsulation: ViewEncapsulation.None,
+  selector: 'app-web-console',
+  templateUrl: './web-console.component.html',
+  styleUrls: ['../../../../../node_modules/xterm/css/xterm.css', './web-console.component.scss'],
 })
 export class WebConsoleComponent implements OnInit, AfterViewInit {
-    @Input() server: Server;
-    @Input() project: Project;
-    @Input() node: Node;
+  @Input() server: Server;
+  @Input() project: Project;
+  @Input() node: Node;
 
-    public term: Terminal = new Terminal();
-    public fitAddon: FitAddon = new FitAddon();
-    public isLightThemeEnabled: boolean = false;
-    private copiedText: string = '';
+  public term: Terminal = new Terminal();
+  public fitAddon: FitAddon = new FitAddon();
+  public isLightThemeEnabled: boolean = false;
+  private copiedText: string = '';
 
-    @ViewChild('terminal') terminal: ElementRef;
+  @ViewChild('terminal') terminal: ElementRef;
 
-    constructor(
-        private consoleService: NodeConsoleService,
-        private themeService: ThemeService,
-    ) {}
-    
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
+  constructor(private consoleService: NodeConsoleService, private themeService: ThemeService) {}
 
-        this.consoleService.consoleResized.subscribe(ev => {
-            let numberOfColumns = Math.floor(ev.width / 9);
-            let numberOfRows = Math.floor(ev.height / 17);
+  ngOnInit() {
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
 
-            this.consoleService.setNumberOfColumns(numberOfColumns);
-            this.consoleService.setNumberOfRows(numberOfRows);
+    this.consoleService.consoleResized.subscribe((ev) => {
+      let numberOfColumns = Math.floor(ev.width / 9);
+      let numberOfRows = Math.floor(ev.height / 17);
 
-            this.term.resize(numberOfColumns, numberOfRows);
-        });
+      this.consoleService.setNumberOfColumns(numberOfColumns);
+      this.consoleService.setNumberOfRows(numberOfRows);
 
-        if (this.consoleService.getNumberOfColumns() && this.consoleService.getNumberOfRows()){
-            this.term.resize(this.consoleService.getNumberOfColumns(), this.consoleService.getNumberOfRows());
+      this.term.resize(numberOfColumns, numberOfRows);
+    });
+
+    if (this.consoleService.getNumberOfColumns() && this.consoleService.getNumberOfRows()) {
+      this.term.resize(this.consoleService.getNumberOfColumns(), this.consoleService.getNumberOfRows());
+    }
+  }
+
+  ngAfterViewInit() {
+    this.term.open(this.terminal.nativeElement);
+    if (this.isLightThemeEnabled)
+      this.term.setOption('theme', { background: 'white', foreground: 'black', cursor: 'black' });
+
+    const socket = new WebSocket(this.getUrl());
+
+    socket.onerror = (event) => {
+      this.term.write('Connection lost');
+    };
+    socket.onclose = (event) => {
+      this.consoleService.closeConsoleForNode(this.node);
+    };
+
+    const attachAddon = new AttachAddon(socket);
+    this.term.loadAddon(attachAddon);
+    this.term.setOption('cursorBlink', true);
+    this.term.loadAddon(this.fitAddon);
+    this.fitAddon.activate(this.term);
+    this.term.focus();
+
+    this.term.attachCustomKeyEventHandler((key: KeyboardEvent) => {
+      if (key.code === 'KeyC' || key.code === 'KeyV') {
+        if (key.ctrlKey) {
+          return false;
         }
-    }
+      }
+      return true;
+    });
+  }
 
-    ngAfterViewInit() {
-        this.term.open(this.terminal.nativeElement);
-        if (this.isLightThemeEnabled) this.term.setOption('theme', { background: 'white', foreground: 'black', cursor: 'black' });
-
-        const socket = new WebSocket(this.getUrl());
-
-        socket.onerror = ((event) => {
-            this.term.write('Connection lost');
-        });
-        socket.onclose = ((event) => {
-            this.consoleService.closeConsoleForNode(this.node);
-        });
-
-        const attachAddon = new AttachAddon(socket);
-        this.term.loadAddon(attachAddon);
-        this.term.setOption('cursorBlink', true);
-        this.term.loadAddon(this.fitAddon);
-        this.fitAddon.activate(this.term);
-        this.term.focus();
-
-        this.term.attachCustomKeyEventHandler((key: KeyboardEvent) => {
-            if (key.code === 'KeyC' || key.code === 'KeyV'){
-                if (key.ctrlKey) {
-                    return false;
-               }
-            }
-            return true;
-        });
-    }
-
-    getUrl() {
-        return `ws://${this.server.host}:${this.server.port}/v2/projects/${this.node.project_id}/nodes/${this.node.node_id}/console/ws`
-    }
+  getUrl() {
+    return `ws://${this.server.host}:${this.server.port}/v2/projects/${this.node.project_id}/nodes/${this.node.node_id}/console/ws`;
+  }
 }
diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
index 719798ab..ce6a6e8f 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html
@@ -21,6 +21,8 @@
   </mat-form-field>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">Add project</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">
+      Add project
+    </button>
   </div>
 </form>
diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.scss b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.scss
index fd32953d..2fa952b3 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.scss
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.scss
@@ -1,7 +1,7 @@
 .file-name-form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .project-snackbar {
-    background: #2196F3;
-}
\ No newline at end of file
+  background: #2196f3;
+}
diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
index fe9ca1c3..467e6b13 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
@@ -34,8 +34,8 @@ export class MockedProjectService {
       show_layers: false,
       show_grid: false,
       snap_to_grid: false,
-      variables: []
-    }
+      variables: [],
+    },
   ];
 
   list() {
@@ -46,7 +46,7 @@ export class MockedProjectService {
     return of(this.projects.pop);
   }
 
-  isReadOnly(project: Project){
+  isReadOnly(project: Project) {
     return false;
   }
 }
@@ -56,13 +56,13 @@ describe('AddBlankProjectDialogComponent', () => {
   let fixture: ComponentFixture<AddBlankProjectDialogComponent>;
   let server: Server;
   let router = {
-    navigate: jasmine.createSpy('navigate')
+    navigate: jasmine.createSpy('navigate'),
   };
   let toaster = {
-    success: jasmine.createSpy('success')
+    success: jasmine.createSpy('success'),
   };
   let dialogRef = {
-    close: jasmine.createSpy('close')
+    close: jasmine.createSpy('close'),
   };
 
   beforeEach(async(() => {
@@ -74,16 +74,16 @@ describe('AddBlankProjectDialogComponent', () => {
         NoopAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
-        MatSnackBarModule
+        MatSnackBarModule,
       ],
       providers: [
         { provide: MatDialogRef, useValue: dialogRef },
         { provide: MAT_DIALOG_DATA, useValue: [] },
         { provide: ProjectService, useClass: MockedProjectService },
         { provide: ToasterService, useValue: toaster },
-        { provide: Router, useValue: router }
+        { provide: Router, useValue: router },
       ],
-      declarations: [AddBlankProjectDialogComponent]
+      declarations: [AddBlankProjectDialogComponent],
     }).compileComponents();
 
     server = new Server();
@@ -146,7 +146,7 @@ describe('AddBlankProjectDialogComponent', () => {
     component.projectNameForm.controls['projectName'].setValue('validName');
     spyOn(component, 'onAddClick');
 
-    component.onKeyDown({key: 'Enter'});
+    component.onKeyDown({ key: 'Enter' });
 
     expect(component.onAddClick).toHaveBeenCalled();
   });
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 3bb9f2ca..e3fbc3c6 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
@@ -11,12 +11,11 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 import { ToasterService } from '../../../services/toaster.service';
 import { projectNameAsyncValidator } from '../../../validators/project-name-async-validator';
 
-
 @Component({
   selector: 'app-add-blank-project-dialog',
   templateUrl: './add-blank-project-dialog.component.html',
   styleUrls: ['./add-blank-project-dialog.component.scss'],
-  providers: [ProjectNameValidator]
+  providers: [ProjectNameValidator],
 })
 export class AddBlankProjectDialogComponent implements OnInit {
   server: Server;
@@ -36,7 +35,11 @@ export class AddBlankProjectDialogComponent implements OnInit {
 
   ngOnInit() {
     this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, this.projectNameValidator.get], [projectNameAsyncValidator(this.server, this.projectService)])
+      projectName: new FormControl(
+        null,
+        [Validators.required, this.projectNameValidator.get],
+        [projectNameAsyncValidator(this.server, this.projectService)]
+      ),
     });
   }
 
@@ -50,7 +53,7 @@ export class AddBlankProjectDialogComponent implements OnInit {
     }
     this.projectService.list(this.server).subscribe((projects: Project[]) => {
       const projectName = this.projectNameForm.controls['projectName'].value;
-      let existingProject = projects.find(project => project.name === projectName);
+      let existingProject = projects.find((project) => project.name === projectName);
 
       if (existingProject) {
         this.openConfirmationDialog(existingProject);
@@ -76,7 +79,7 @@ export class AddBlankProjectDialogComponent implements OnInit {
   }
 
   onKeyDown(event) {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       this.onAddClick();
     }
   }
@@ -86,10 +89,10 @@ export class AddBlankProjectDialogComponent implements OnInit {
       width: '300px',
       height: '150px',
       data: {
-        existingProject: existingProject
+        existingProject: existingProject,
       },
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
 
     dialogRef.afterClosed().subscribe((answer: boolean) => {
diff --git a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.html b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.html
index 8d9b0d73..42d261a1 100644
--- a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.html
+++ b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.html
@@ -1,12 +1,12 @@
 <h1 mat-dialog-title>Please choose name for exporting project</h1>
 
 <div class="modal-form-container">
-    <mat-form-field class="form-field">
-        <input matInput placeholder="Project name" [(ngModel)]="name" type="text">
-    </mat-form-field>
+  <mat-form-field class="form-field">
+    <input matInput placeholder="Project name" [(ngModel)]="name" type="text" />
+  </mat-form-field>
 </div>
 
 <div mat-dialog-actions>
-    <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+  <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
 </div>
diff --git a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.scss b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.scss
index 9c2173c2..8aff6f5a 100644
--- a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.scss
+++ b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.scss
@@ -1,3 +1,3 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts
index cc710248..cdc6441b 100644
--- a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts
+++ b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts
@@ -4,33 +4,29 @@ import { Server } from '../../../models/server';
 import { ProjectService } from '../../../services/project.service';
 import { Project } from '../../../models/project';
 
-
 @Component({
-    selector: 'app-choose-name-dialog',
-    templateUrl: './choose-name-dialog.component.html',
-    styleUrls: ['./choose-name-dialog.component.scss']
+  selector: 'app-choose-name-dialog',
+  templateUrl: './choose-name-dialog.component.html',
+  styleUrls: ['./choose-name-dialog.component.scss'],
 })
 export class ChooseNameDialogComponent implements OnInit {
-    @Input() server: Server;
-    @Input() project: Project
-    name: string;
+  @Input() server: Server;
+  @Input() project: Project;
+  name: string;
 
-    constructor(
-        public dialogRef: MatDialogRef<ChooseNameDialogComponent>,
-        private projectService: ProjectService
-    ) {}
+  constructor(public dialogRef: MatDialogRef<ChooseNameDialogComponent>, private projectService: ProjectService) {}
 
-    ngOnInit() {
-        this.name = this.project.name;
-    }
+  ngOnInit() {
+    this.name = this.project.name;
+  }
 
-    onCloseClick() {
-        this.dialogRef.close();
-    }
+  onCloseClick() {
+    this.dialogRef.close();
+  }
 
-    onSaveClick() {
-        this.projectService.duplicate(this.server, this.project.project_id, this.name).subscribe(() => {
-            this.dialogRef.close();
-        });
-    }
+  onSaveClick() {
+    this.projectService.duplicate(this.server, this.project.project_id, this.name).subscribe(() => {
+      this.dialogRef.close();
+    });
+  }
 }
diff --git a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html
index e2fe915e..cceaad44 100644
--- a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html
+++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html
@@ -1,7 +1,7 @@
-<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
-    <div class="title">{{message}}</div>
-    <div>
-        <button mat-button (click)="onNoClick()">No</button>
-        <button mat-button (click)="onYesClick()">Yes</button>
-    </div>
+<div class="dialogWrapper" [ngClass]="{ lightTheme: isLightThemeEnabled }">
+  <div class="title">{{ message }}</div>
+  <div>
+    <button mat-button (click)="onNoClick()">No</button>
+    <button mat-button (click)="onYesClick()">Yes</button>
+  </div>
 </div>
diff --git a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss
index ca9bfe4a..6b118b9a 100644
--- a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss
+++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss
@@ -1,17 +1,17 @@
 .dialogWrapper {
-    background-color: #263238;
-    padding: 10px 20px;
-    margin-bottom: -8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  background-color: #263238;
+  padding: 10px 20px;
+  margin-bottom: -8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .lightTheme {
-    background-color: white!important;
+  background-color: white !important;
 }
 
 .title {
-    margin-right: 10px;
-    margin-left: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
 }
diff --git a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
index 238b59b4..47dbdc0a 100644
--- a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
+++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
@@ -6,26 +6,28 @@ import { ThemeService } from '../../../services/theme.service';
 @Component({
   selector: 'app-confirmation-bottomsheet',
   templateUrl: 'confirmation-bottomsheet.component.html',
-  styleUrls: ['confirmation-bottomsheet.component.scss']
+  styleUrls: ['confirmation-bottomsheet.component.scss'],
 })
 export class ConfirmationBottomSheetComponent implements OnInit {
-    message: string = '';
-    isLightThemeEnabled: boolean = false;
+  message: string = '';
+  isLightThemeEnabled: boolean = false;
 
-    constructor(
-        private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>,
-        private themeService: ThemeService
-    ) {}
+  constructor(
+    private bottomSheetRef: MatBottomSheetRef<ConfirmationBottomSheetComponent>,
+    private themeService: ThemeService
+  ) {}
 
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
-    }
+  ngOnInit() {
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
+  }
 
-    onNoClick(): void {
-        this.bottomSheetRef.dismiss(false);
-    }
+  onNoClick(): void {
+    this.bottomSheetRef.dismiss(false);
+  }
 
-    onYesClick(): void {
-        this.bottomSheetRef.dismiss(true);
-    }
+  onYesClick(): void {
+    this.bottomSheetRef.dismiss(true);
+  }
 }
diff --git a/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts b/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts
index a2d68fc1..f69898e7 100644
--- a/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts
@@ -5,7 +5,7 @@ import { Project } from '../../../models/project';
 @Component({
   selector: 'app-import-project-dialog',
   templateUrl: 'confirmation-dialog.component.html',
-  styleUrls: ['confirmation-dialog.component.scss']
+  styleUrls: ['confirmation-dialog.component.scss'],
 })
 export class ConfirmationDialogComponent implements OnInit {
   private existingProject: Project;
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
index 392bbbdb..175660ee 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
@@ -1,82 +1,89 @@
 <h1 mat-dialog-title>Edit project</h1>
 
 <div class="modal-form-container">
-    <mat-tab-group>
-        <mat-tab label="General">
-            <form [formGroup]="formGroup">
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="projectName" placeholder="Project name" type="text">
-                </mat-form-field>
-            
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="width" placeholder="Scene width (px)" type="number">
-                </mat-form-field>
-            
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="height" placeholder="Scene height (px)" type="number">
-                </mat-form-field>
-            
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
-                </mat-form-field>
-            
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
-                </mat-form-field>
-            </form>
-            
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
-                Open this project in the background when GNS3 server starts
-            </mat-checkbox>
-            
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
-                Start all nodes when this project is opened
-            </mat-checkbox>
-            
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="auto_close">
-                Leave this project running in the background after closing
-            </mat-checkbox>
-            
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
-                Show interface labels at start
-            </mat-checkbox>
-        </mat-tab>
-        <mat-tab label="Global variables">
-            <form [formGroup]="variableFormGroup">
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="name" placeholder="Name" type="text">
-                </mat-form-field>
-            
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="value" placeholder="Value" type="text">
-                </mat-form-field>
-            </form>
-            <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
-            <table class="table" mat-table [dataSource]="variables">
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef>Name</th>
-                    <td mat-cell *matCellDef="let element">{{element.name}} </td>
-                </ng-container>
-            
-                <ng-container matColumnDef="value">
-                    <th mat-header-cell *matHeaderCellDef>Value</th>
-                    <td mat-cell *matCellDef="let element">{{element.value}}</td>
-                </ng-container>
-            
-                <ng-container matColumnDef="actions">
-                    <th mat-header-cell *matHeaderCellDef>Actions</th>
-                    <td mat-cell *matCellDef="let element">
-                        <button mat-icon-button matTooltip="Delete variable" matTooltipClass="custom-tooltip" (click)="deleteVariable(element)">
-                            <mat-icon aria-label="Delete adapter">delete</mat-icon>
-                        </button>
-                    </td>
-                </ng-container>
-                
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </mat-tab>
-    </mat-tab-group>
+  <mat-tab-group>
+    <mat-tab label="General">
+      <form [formGroup]="formGroup">
+        <mat-form-field class="form-field">
+          <input matInput formControlName="projectName" placeholder="Project name" type="text" />
+        </mat-form-field>
+
+        <mat-form-field class="form-field">
+          <input matInput formControlName="width" placeholder="Scene width (px)" type="number" />
+        </mat-form-field>
+
+        <mat-form-field class="form-field">
+          <input matInput formControlName="height" placeholder="Scene height (px)" type="number" />
+        </mat-form-field>
+
+        <mat-form-field class="form-field">
+          <input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number" />
+        </mat-form-field>
+
+        <mat-form-field class="form-field">
+          <input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number" />
+        </mat-form-field>
+      </form>
+
+      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="project.auto_open">
+        Open this project in the background when GNS3 server starts
+      </mat-checkbox>
+
+      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="project.auto_start">
+        Start all nodes when this project is opened
+      </mat-checkbox>
+
+      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="auto_close">
+        Leave this project running in the background after closing
+      </mat-checkbox>
+
+      <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="project.show_interface_labels">
+        Show interface labels at start
+      </mat-checkbox>
+    </mat-tab>
+    <mat-tab label="Global variables">
+      <form [formGroup]="variableFormGroup">
+        <mat-form-field class="form-field">
+          <input matInput formControlName="name" placeholder="Name" type="text" />
+        </mat-form-field>
+
+        <mat-form-field class="form-field">
+          <input matInput formControlName="value" placeholder="Value" type="text" />
+        </mat-form-field>
+      </form>
+      <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">
+        Add variable
+      </button>
+      <table class="table" mat-table [dataSource]="variables">
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Name</th>
+          <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="value">
+          <th mat-header-cell *matHeaderCellDef>Value</th>
+          <td mat-cell *matCellDef="let element">{{ element.value }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let element">
+            <button
+              mat-icon-button
+              matTooltip="Delete variable"
+              matTooltipClass="custom-tooltip"
+              (click)="deleteVariable(element)"
+            >
+              <mat-icon aria-label="Delete adapter">delete</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 
 <div mat-dialog-actions>
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
index 00dc4971..3bf4e100 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
@@ -1,15 +1,15 @@
 .form-field {
-    width: 100%;
+  width: 100%;
 }
 
 th {
-    border: 0px!important;
+  border: 0px !important;
 }
 
 th.mat-header-cell {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
 td.mat-cell {
-    padding-top: 15px;
+  padding-top: 15px;
 }
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
index e08e09ae..17060178 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
@@ -10,7 +10,7 @@ import { ProjectService } from '../../../services/project.service';
 @Component({
   selector: 'app-edit-project-dialog',
   templateUrl: './edit-project-dialog.component.html',
-  styleUrls: ['./edit-project-dialog.component.scss']
+  styleUrls: ['./edit-project-dialog.component.scss'],
 })
 export class EditProjectDialogComponent implements OnInit {
   server: Server;
@@ -19,7 +19,7 @@ export class EditProjectDialogComponent implements OnInit {
   variableFormGroup: FormGroup;
   projectVariables: ProjectVariable[];
 
-  displayedColumns: string[] = ['name', 'value', 'actions']; 
+  displayedColumns: string[] = ['name', 'value', 'actions'];
   variables: ProjectVariable[] = [];
 
   auto_close: boolean;
@@ -36,12 +36,12 @@ export class EditProjectDialogComponent implements OnInit {
       width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
       height: new FormControl('', [Validators.required, nonNegativeValidator.get]),
       nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get])
+      drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
     });
 
     this.variableFormGroup = this.formBuilder.group({
       name: new FormControl('', [Validators.required]),
-      value: new FormControl('', [Validators.required])
+      value: new FormControl('', [Validators.required]),
     });
   }
 
@@ -52,7 +52,7 @@ export class EditProjectDialogComponent implements OnInit {
     this.formGroup.controls['nodeGridSize'].setValue(this.project.grid_size);
     this.formGroup.controls['drawingGridSize'].setValue(this.project.drawing_grid_size);
     if (this.project.variables) {
-      this.project.variables.forEach(n => this.variables.push(n));
+      this.project.variables.forEach((n) => this.variables.push(n));
     }
     this.auto_close = !this.project.auto_close;
   }
@@ -61,7 +61,7 @@ export class EditProjectDialogComponent implements OnInit {
     if (this.variableFormGroup.valid) {
       let variable: ProjectVariable = {
         name: this.variableFormGroup.get('name').value,
-        value: this.variableFormGroup.get('value').value
+        value: this.variableFormGroup.get('value').value,
       };
       this.variables = this.variables.concat([variable]);
     } else {
@@ -70,7 +70,7 @@ export class EditProjectDialogComponent implements OnInit {
   }
 
   deleteVariable(variable: ProjectVariable) {
-    this.variables = this.variables.filter(elem => elem!== variable);
+    this.variables = this.variables.filter((elem) => elem !== variable);
   }
 
   onNoClick() {
@@ -89,9 +89,9 @@ export class EditProjectDialogComponent implements OnInit {
       this.project.auto_close = !this.project.auto_close;
 
       this.projectService.update(this.server, this.project).subscribe((project: Project) => {
-          this.toasterService.success(`Project ${project.name} updated.`);
-          this.onNoClick();
-      })
+        this.toasterService.success(`Project ${project.name} updated.`);
+        this.onNoClick();
+      });
     } else {
       this.toasterService.error(`Fill all required fields with correct values.`);
     }
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.html b/src/app/components/projects/import-project-dialog/import-project-dialog.component.html
index fb86b6ac..dc620518 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.html
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.html
@@ -10,7 +10,16 @@
       ng2FileSelect
       [uploader]="uploader"
     />
-    <button mat-raised-button color="primary" (click)="file.click()" matTooltip="Import your .gns3p or .gns3project file" matTooltipClass="custom-tooltip" class="file-button">Choose file</button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="file.click()"
+      matTooltip="Import your .gns3p or .gns3project file"
+      matTooltipClass="custom-tooltip"
+      class="file-button"
+    >
+      Choose file
+    </button>
     <mat-form-field [ngClass]="{ empty: !isDeleteVisible }" class="file-name-form-field">
       <input
         matInput
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.scss b/src/app/components/projects/import-project-dialog/import-project-dialog.component.scss
index 24be550b..d2a29190 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.scss
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.scss
@@ -1,43 +1,43 @@
 .non-visible {
-    display: none;
+  display: none;
 }
 
-.file-button{
-    width: 100%;
-    margin-top: 5px;
-    margin-bottom: 10px;
-    padding: 0px;
+.file-button {
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  padding: 0px;
 }
 
 .file-name-form {
-    float: right;
-    width: 100%;
+  float: right;
+  width: 100%;
 }
 
 .file-name-form-field {
-    width: 90%; 
+  width: 90%;
 }
 
 .empty {
-    width: 100%; 
+  width: 100%;
 }
 
 .delete-button {
-    background: transparent; 
-    border: none; 
-    outline: 0;
-    width: 10%;
+  background: transparent;
+  border: none;
+  outline: 0;
+  width: 10%;
 }
 
 .delete-icon {
-    vertical-align: "middle";
+  vertical-align: 'middle';
 }
 
 .result-message-box {
-    margin-top: 10px;
-    text-align: center;
+  margin-top: 10px;
+  text-align: center;
 }
 
 .progress-bar {
-    background-color : #0097a7;
+  background-color: #0097a7;
 }
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts b/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
index e7408082..39357177 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
@@ -38,8 +38,8 @@ export class MockedProjectService {
       show_layers: false,
       show_grid: false,
       snap_to_grid: false,
-      variables: []
-    }
+      variables: [],
+    },
   ];
 
   list() {
@@ -63,7 +63,7 @@ describe('ImportProjectDialogComponent', () => {
   let fileSelectDirective: FileSelectDirective;
 
   let dialogRef = {
-    close: jasmine.createSpy('close')
+    close: jasmine.createSpy('close'),
   };
 
   beforeEach(async(() => {
@@ -80,14 +80,14 @@ describe('ImportProjectDialogComponent', () => {
         FileUploadModule,
         FormsModule,
         ReactiveFormsModule,
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       providers: [
         { provide: MatDialogRef, useValue: dialogRef },
         { provide: MAT_DIALOG_DATA, useValue: [] },
-        { provide: ProjectService, useClass: MockedProjectService }
+        { provide: ProjectService, useClass: MockedProjectService },
       ],
-      declarations: [ImportProjectDialogComponent]
+      declarations: [ImportProjectDialogComponent],
     }).compileComponents();
 
     server = new Server();
@@ -222,8 +222,8 @@ describe('ImportProjectDialogComponent', () => {
     fileSelectDirective.uploader.queue.push(fileItem);
     let event = {
       target: {
-        files: [{ name: 'uploadedFile' }]
-      }
+        files: [{ name: 'uploadedFile' }],
+      },
     };
     component.uploadProjectFile(event);
 
@@ -235,8 +235,8 @@ describe('ImportProjectDialogComponent', () => {
     fileSelectDirective.uploader.queue.push(fileItem);
     let event = {
       target: {
-        files: [{ name: 'uploadedFile' }]
-      }
+        files: [{ name: 'uploadedFile' }],
+      },
     };
     component.uploadProjectFile(event);
     component.onDeleteClick();
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 650e286b..efa17563 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
@@ -14,7 +14,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
   selector: 'app-import-project-dialog',
   templateUrl: 'import-project-dialog.component.html',
   styleUrls: ['import-project-dialog.component.scss'],
-  providers: [ProjectNameValidator]
+  providers: [ProjectNameValidator],
 })
 export class ImportProjectDialogComponent implements OnInit {
   uploader: FileUploader;
@@ -38,13 +38,13 @@ export class ImportProjectDialogComponent implements OnInit {
     private projectNameValidator: ProjectNameValidator
   ) {
     this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, projectNameValidator.get])
+      projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
     });
   }
 
   ngOnInit() {
     this.uploader = new FileUploader({});
-    this.uploader.onAfterAddingFile = file => {
+    this.uploader.onAfterAddingFile = (file) => {
       file.withCredentials = false;
     };
 
@@ -82,7 +82,7 @@ export class ImportProjectDialogComponent implements OnInit {
     } else {
       this.projectService.list(this.server).subscribe((projects: Project[]) => {
         const projectName = this.projectNameForm.controls['projectName'].value;
-        let existingProject = projects.find(project => project.name === projectName);
+        let existingProject = projects.find((project) => project.name === projectName);
 
         if (existingProject) {
           this.openConfirmationDialog(existingProject);
@@ -95,7 +95,7 @@ export class ImportProjectDialogComponent implements OnInit {
 
   importProject() {
     const url = this.prepareUploadPath();
-    this.uploader.queue.forEach(elem => (elem.url = url));
+    this.uploader.queue.forEach((elem) => (elem.url = url));
 
     this.isFirstStepCompleted = true;
 
@@ -108,10 +108,10 @@ export class ImportProjectDialogComponent implements OnInit {
       width: '300px',
       height: '150px',
       data: {
-        existingProject: existingProject
+        existingProject: existingProject,
       },
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
 
     dialogRef.afterClosed().subscribe((answer: boolean) => {
diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.html b/src/app/components/projects/navigation-dialog/navigation-dialog.component.html
index 814ac4dc..519a6af2 100644
--- a/src/app/components/projects/navigation-dialog/navigation-dialog.component.html
+++ b/src/app/components/projects/navigation-dialog/navigation-dialog.component.html
@@ -1,7 +1,7 @@
-<div class="dialogWrapper" [ngClass]="{lightTheme: isLightThemeEnabled}">
-    <div class="title"> Do you want to navigate to {{projectMessage}}?</div>
-    <div>
-        <button mat-button (click)="onNoClick()">No</button>
-        <button class="confirmButton" mat-button (click)="onYesClick()">Yes</button>
-    </div>
+<div class="dialogWrapper" [ngClass]="{ lightTheme: isLightThemeEnabled }">
+  <div class="title">Do you want to navigate to {{ projectMessage }}?</div>
+  <div>
+    <button mat-button (click)="onNoClick()">No</button>
+    <button class="confirmButton" mat-button (click)="onYesClick()">Yes</button>
+  </div>
 </div>
diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss b/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss
index ca9bfe4a..6b118b9a 100644
--- a/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss
+++ b/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss
@@ -1,17 +1,17 @@
 .dialogWrapper {
-    background-color: #263238;
-    padding: 10px 20px;
-    margin-bottom: -8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  background-color: #263238;
+  padding: 10px 20px;
+  margin-bottom: -8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .lightTheme {
-    background-color: white!important;
+  background-color: white !important;
 }
 
 .title {
-    margin-right: 10px;
-    margin-left: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
 }
diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts b/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
index 62f1b2ae..99e16d6a 100644
--- a/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
+++ b/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
@@ -6,26 +6,28 @@ import { ThemeService } from '../../../services/theme.service';
 @Component({
   selector: 'app-navigation-dialog',
   templateUrl: 'navigation-dialog.component.html',
-  styleUrls: ['navigation-dialog.component.scss']
+  styleUrls: ['navigation-dialog.component.scss'],
 })
 export class NavigationDialogComponent implements OnInit {
-    projectMessage: string = '';
-    isLightThemeEnabled: boolean = false;
+  projectMessage: string = '';
+  isLightThemeEnabled: boolean = false;
 
-    constructor(
-        private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>,
-        private themeService: ThemeService
-    ) {}
+  constructor(
+    private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>,
+    private themeService: ThemeService
+  ) {}
 
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false; 
-    }
+  ngOnInit() {
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
+  }
 
-    onNoClick(): void {
-        this.bottomSheetRef.dismiss(false);
-    }
+  onNoClick(): void {
+    this.bottomSheetRef.dismiss(false);
+  }
 
-    onYesClick(): void {
-        this.bottomSheetRef.dismiss(true);
-    }
+  onYesClick(): void {
+    this.bottomSheetRef.dismiss(true);
+  }
 }
diff --git a/src/app/components/projects/projects.component.html b/src/app/components/projects/projects.component.html
index 95fd98cc..e2e32dd4 100644
--- a/src/app/components/projects/projects.component.html
+++ b/src/app/components/projects/projects.component.html
@@ -2,42 +2,20 @@
   <div class="default-header">
     <div class="row">
       <h1 class="col">Projects</h1>
-      <button
-        class="col"
-        mat-raised-button
-        (click)="goToPreferences()"
-        class="add-button"
-      >
-        Go to preferences
-      </button>
-      <button
-        class="col"
-        mat-raised-button
-        color="primary"
-        (click)="addBlankProject()"
-        class="add-button"
-      >
+      <button class="col" mat-raised-button (click)="goToPreferences()" class="add-button">Go to preferences</button>
+      <button class="col" mat-raised-button color="primary" (click)="addBlankProject()" class="add-button">
         Add blank project
       </button>
-      <button
-        class="col"
-        mat-raised-button
-        color="primary"
-        (click)="importProject()"
-        class="import-button"
-      >
+      <button class="col" mat-raised-button color="primary" (click)="importProject()" class="import-button">
         Import project
       </button>
     </div>
   </div>
 
   <form>
-      <mat-form-field class="full-width">
-          <input matInput
-              placeholder="Search by name"
-              [(ngModel)]="searchText"
-              [ngModelOptions]="{standalone: true}">
-      </mat-form-field>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Search by name" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" />
+    </mat-form-field>
   </form>
 
   <div class="default-content">
@@ -53,16 +31,40 @@
         <ng-container matColumnDef="actions">
           <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
           <mat-cell *matCellDef="let row" style="text-align: right">
-            <button mat-icon-button matTooltip="Open project" matTooltipClass="custom-tooltip" (click)="open(row)" *ngIf="row.status == 'closed'">
+            <button
+              mat-icon-button
+              matTooltip="Open project"
+              matTooltipClass="custom-tooltip"
+              (click)="open(row)"
+              *ngIf="row.status == 'closed'"
+            >
               <mat-icon aria-label="Open project">play_arrow</mat-icon>
             </button>
-            <button mat-icon-button matTooltip="Close project" matTooltipClass="custom-tooltip" (click)="close(row)" *ngIf="row.status == 'opened'">
+            <button
+              mat-icon-button
+              matTooltip="Close project"
+              matTooltipClass="custom-tooltip"
+              (click)="close(row)"
+              *ngIf="row.status == 'opened'"
+            >
               <mat-icon aria-label="Close project">pause</mat-icon>
             </button>
-            <button mat-icon-button matTooltip="Duplicate project" matTooltipClass="custom-tooltip" (click)="duplicate(row)" *ngIf="row.status == 'closed'">
+            <button
+              mat-icon-button
+              matTooltip="Duplicate project"
+              matTooltipClass="custom-tooltip"
+              (click)="duplicate(row)"
+              *ngIf="row.status == 'closed'"
+            >
               <mat-icon aria-label="Duplicate project">filter_2</mat-icon>
             </button>
-            <button mat-icon-button matTooltip="Delete project" matTooltipClass="custom-tooltip" (click)="delete(row)" *ngIf="row.status == 'closed'">
+            <button
+              mat-icon-button
+              matTooltip="Delete project"
+              matTooltipClass="custom-tooltip"
+              (click)="delete(row)"
+              *ngIf="row.status == 'closed'"
+            >
               <mat-icon aria-label="Delete project">delete</mat-icon>
             </button>
           </mat-cell>
diff --git a/src/app/components/projects/projects.component.scss b/src/app/components/projects/projects.component.scss
index 5ed0ed20..0268f4a2 100644
--- a/src/app/components/projects/projects.component.scss
+++ b/src/app/components/projects/projects.component.scss
@@ -1,15 +1,15 @@
 .import-button {
-    height: 40px;
-    margin: 20px;
+  height: 40px;
+  margin: 20px;
 }
 
 .add-button {
-    height: 40px;
-    margin: 20px;
+  height: 40px;
+  margin: 20px;
 }
 
 .full-width {
-    width: 940px;
-    margin-left: -470px;
-    left: 50%;
+  width: 940px;
+  margin-left: -470px;
+  left: 50%;
 }
diff --git a/src/app/components/projects/projects.component.spec.ts b/src/app/components/projects/projects.component.spec.ts
index 55ea6cac..ba8088a3 100644
--- a/src/app/components/projects/projects.component.spec.ts
+++ b/src/app/components/projects/projects.component.spec.ts
@@ -48,10 +48,10 @@ xdescribe('ProjectsComponent', () => {
       remote: {
         require: (file) => {
           return {
-            openConsole() {}
-          }
-        }
-      }
+            openConsole() {},
+          };
+        },
+      },
     };
 
     TestBed.configureTestingModule({
@@ -67,7 +67,7 @@ xdescribe('ProjectsComponent', () => {
         MatBottomSheetModule,
         FormsModule,
         ReactiveFormsModule,
-        RouterTestingModule.withRoutes([])
+        RouterTestingModule.withRoutes([]),
       ],
       providers: [
         { provide: ServerService, useClass: MockedServerService },
@@ -75,13 +75,15 @@ xdescribe('ProjectsComponent', () => {
         { provide: SettingsService, useClass: MockedSettingsService },
         { provide: ToasterService },
         { provide: ElectronService, useValue: electronService },
-        ProgressService
+        ProgressService,
       ],
       declarations: [ProjectsComponent, ChooseNameDialogComponent, ConfigureGns3VMDialogComponent, ProjectsFilter],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     })
-    .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChooseNameDialogComponent, ConfigureGns3VMDialogComponent] } })
-    .compileComponents();
+      .overrideModule(BrowserDynamicTestingModule, {
+        set: { entryComponents: [ChooseNameDialogComponent, ConfigureGns3VMDialogComponent] },
+      })
+      .compileComponents();
 
     serverService = TestBed.get(ServerService);
     settingsService = TestBed.get(SettingsService);
diff --git a/src/app/components/projects/projects.component.ts b/src/app/components/projects/projects.component.ts
index 097f2c00..51ecb3e1 100644
--- a/src/app/components/projects/projects.component.ts
+++ b/src/app/components/projects/projects.component.ts
@@ -29,7 +29,7 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
-  styleUrls: ['./projects.component.scss']
+  styleUrls: ['./projects.component.scss'],
 })
 export class ProjectsComponent implements OnInit {
   server: Server;
@@ -40,7 +40,7 @@ export class ProjectsComponent implements OnInit {
 
   searchText: string = '';
 
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(
     private route: ActivatedRoute,
@@ -57,13 +57,13 @@ export class ProjectsComponent implements OnInit {
 
   ngOnInit() {
     this.server = this.route.snapshot.data['server'];
-    if(!this.server) this.router.navigate(['/servers']);
+    if (!this.server) this.router.navigate(['/servers']);
     this.recentlyOpenedProjectService.setServerIdProjectList(this.server.id.toString());
 
     this.refresh();
     this.sort.sort(<MatSortable>{
       id: 'name',
-      start: 'asc'
+      start: 'asc',
     });
     this.dataSource = new ProjectDataSource(this.projectDatabase, this.sort);
     this.settings = this.settingsService.getAll();
@@ -71,26 +71,27 @@ export class ProjectsComponent implements OnInit {
     this.projectService.projectListSubject.subscribe(() => this.refresh());
 
     let gns3vmConfig = localStorage.getItem('gns3vmConfig');
-    if (this.electronService.isElectronApp && gns3vmConfig!=='configured') {
+    if (this.electronService.isElectronApp && gns3vmConfig !== 'configured') {
       const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
         width: '350px',
         height: '120px',
         autoFocus: false,
-        disableClose: true
+        disableClose: true,
       });
-  
+
       dialogRef.afterClosed().subscribe((answer: boolean) => {
         if (answer) {
           localStorage.setItem('gns3vmConfig', 'configured');
           this.router.navigate(['/server', this.server.id, 'preferences', 'gns3vm']);
         }
       });
-    };
+    }
   }
 
   goToPreferences() {
-    this.router.navigate(['/server', this.server.id, 'preferences'])
-      .catch(error => this.toasterService.error('Cannot navigate to the preferences'));
+    this.router
+      .navigate(['/server', this.server.id, 'preferences'])
+      .catch((error) => this.toasterService.error('Cannot navigate to the preferences'));
   }
 
   refresh() {
@@ -98,7 +99,7 @@ export class ProjectsComponent implements OnInit {
       (projects: Project[]) => {
         this.projectDatabase.addProjects(projects);
       },
-      error => {
+      (error) => {
         this.progressService.setError(error);
       }
     );
@@ -153,7 +154,7 @@ export class ProjectsComponent implements OnInit {
     const dialogRef = this.dialog.open(ChooseNameDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -167,7 +168,7 @@ export class ProjectsComponent implements OnInit {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -178,7 +179,7 @@ export class ProjectsComponent implements OnInit {
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -193,7 +194,7 @@ export class ProjectsComponent implements OnInit {
         this.bottomSheet.open(NavigationDialogComponent);
         let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
         bottomSheetRef.instance.projectMessage = 'imported project';
-        
+
         const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => {
           if (result) {
             this.projectService.open(this.server, uuid).subscribe(() => {
diff --git a/src/app/components/projects/save-project-dialog/save-project-dialog.component.scss b/src/app/components/projects/save-project-dialog/save-project-dialog.component.scss
index acf081db..2fa952b3 100644
--- a/src/app/components/projects/save-project-dialog/save-project-dialog.component.scss
+++ b/src/app/components/projects/save-project-dialog/save-project-dialog.component.scss
@@ -1,7 +1,7 @@
 .file-name-form-field {
-    width: 100%;
+  width: 100%;
 }
 
 .project-snackbar {
-    background: #2196F3;
+  background: #2196f3;
 }
diff --git a/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts b/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
index 591ab1f3..8414257b 100644
--- a/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
+++ b/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
@@ -10,12 +10,11 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 import { ToasterService } from '../../../services/toaster.service';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 
-
 @Component({
   selector: 'app-save-project-dialog',
   templateUrl: './save-project-dialog.component.html',
   styleUrls: ['./save-project-dialog.component.scss'],
-  providers: [ProjectNameValidator]
+  providers: [ProjectNameValidator],
 })
 export class SaveProjectDialogComponent implements OnInit {
   server: Server;
@@ -32,7 +31,7 @@ export class SaveProjectDialogComponent implements OnInit {
     private projectNameValidator: ProjectNameValidator
   ) {
     this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, projectNameValidator.get])
+      projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
     });
   }
 
@@ -48,15 +47,21 @@ export class SaveProjectDialogComponent implements OnInit {
     }
     this.projectService.list(this.server).subscribe((projects: Project[]) => {
       const projectName = this.projectNameForm.controls['projectName'].value;
-      let existingProject = projects.find(project => project.name === projectName);
+      let existingProject = projects.find((project) => project.name === projectName);
 
       if (existingProject) {
         this.toasterService.error(`Project with this name already exists.`);
-      } else if (this.nodesDataSource.getItems().filter(node => 
-        (node.status === 'started' && node.node_type==='vpcs') || 
-        (node.status === 'started' && node.node_type==='virtualbox') || 
-        (node.status === 'started' && node.node_type==='vmware')).length > 0) {
-        this.toasterService.error('Please stop all nodes in order to save project.')
+      } else if (
+        this.nodesDataSource
+          .getItems()
+          .filter(
+            (node) =>
+              (node.status === 'started' && node.node_type === 'vpcs') ||
+              (node.status === 'started' && node.node_type === 'virtualbox') ||
+              (node.status === 'started' && node.node_type === 'vmware')
+          ).length > 0
+      ) {
+        this.toasterService.error('Please stop all nodes in order to save project.');
       } else {
         this.addProject();
       }
@@ -68,14 +73,16 @@ export class SaveProjectDialogComponent implements OnInit {
   }
 
   addProject(): void {
-    this.projectService.duplicate(this.server, this.project.project_id, this.projectNameForm.controls['projectName'].value).subscribe((project: Project) => {
+    this.projectService
+      .duplicate(this.server, this.project.project_id, this.projectNameForm.controls['projectName'].value)
+      .subscribe((project: Project) => {
         this.dialogRef.close();
         this.toasterService.success(`Project ${project.name} added`);
-    });
+      });
   }
 
   onKeyDown(event) {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       this.onAddClick();
     }
   }
diff --git a/src/app/components/servers/add-server-dialog/add-server-dialog.component.html b/src/app/components/servers/add-server-dialog/add-server-dialog.component.html
index 1104fddf..f918e07b 100644
--- a/src/app/components/servers/add-server-dialog/add-server-dialog.component.html
+++ b/src/app/components/servers/add-server-dialog/add-server-dialog.component.html
@@ -1,13 +1,13 @@
 <h1 mat-dialog-title>Add server</h1>
 <form [formGroup]="serverForm">
-<div mat-dialog-content>
+  <div mat-dialog-content>
     <mat-form-field>
       <input matInput tabindex="1" formControlName="name" placeholder="Name" />
       <mat-error *ngIf="serverForm.get('name').hasError('required')">You must enter a value</mat-error>
     </mat-form-field>
 
-   <mat-form-field>
-      <mat-select placeholder="Location" formControlName="location" >
+    <mat-form-field>
+      <mat-select placeholder="Location" formControlName="location">
         <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
       </mat-select>
     </mat-form-field>
@@ -29,13 +29,13 @@
     </mat-form-field>
 
     <mat-form-field>
-      <mat-select placeholder="Protocol" formControlName="protocol" >
+      <mat-select placeholder="Protocol" formControlName="protocol">
         <mat-option *ngFor="let protocol of protocols" [value]="protocol.key"> {{ protocol.name }} </mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
-      <mat-select placeholder="Authorization" formControlName="authorization" >
+      <mat-select placeholder="Authorization" formControlName="authorization">
         <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
       </mat-select>
     </mat-form-field>
@@ -47,7 +47,6 @@
     <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
       <input matInput tabindex="1" formControlName="password" placeholder="Password" />
     </mat-form-field>
-
   </div>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
diff --git a/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts b/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts
index ce40e905..aa34579b 100644
--- a/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts
+++ b/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts
@@ -6,27 +6,32 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { ServerService } from '../../../services/server.service';
 import { ToasterService } from '../../../services/toaster.service';
 
-
 @Component({
   selector: 'app-add-server-dialog',
-  templateUrl: 'add-server-dialog.component.html'
+  templateUrl: 'add-server-dialog.component.html',
 })
 export class AddServerDialogComponent implements OnInit {
-  authorizations = [{ key: 'none', name: 'No authorization' }, { key: 'basic', name: 'Basic authorization' }];
-  protocols = [{ key: 'http:', name: 'HTTP' }, { key: 'https:', name: 'HTTPS' }];
+  authorizations = [
+    { key: 'none', name: 'No authorization' },
+    { key: 'basic', name: 'Basic authorization' },
+  ];
+  protocols = [
+    { key: 'http:', name: 'HTTP' },
+    { key: 'https:', name: 'HTTPS' },
+  ];
   locations = [];
 
   serverForm = new FormGroup({
-    'name': new FormControl('', [ Validators.required ]),
-    'location': new FormControl(''),
-    'path': new FormControl(''),
-    'ubridge_path': new FormControl(''),
-    'host': new FormControl('', [ Validators.required ]),
-    'port': new FormControl('', [ Validators.required, Validators.min(1) ]),
-    'protocol': new FormControl('http:'),
-    'authorization': new FormControl('none'),
-    'login': new FormControl(''),
-    'password': new FormControl('')
+    name: new FormControl('', [Validators.required]),
+    location: new FormControl(''),
+    path: new FormControl(''),
+    ubridge_path: new FormControl(''),
+    host: new FormControl('', [Validators.required]),
+    port: new FormControl('', [Validators.required, Validators.min(1)]),
+    protocol: new FormControl('http:'),
+    authorization: new FormControl('none'),
+    login: new FormControl(''),
+    password: new FormControl(''),
   });
 
   constructor(
@@ -34,24 +39,23 @@ export class AddServerDialogComponent implements OnInit {
     private electronService: ElectronService,
     private serverService: ServerService,
     private toasterService: ToasterService,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: any
   ) {}
 
   async getLocations() {
     const localServers = await this.numberOfLocalServers();
 
     let locations = [];
-    if(this.electronService.isElectronApp && localServers === 0) {
+    if (this.electronService.isElectronApp && localServers === 0) {
       locations.push({ key: 'local', name: 'Local' });
     }
     locations.push({ key: 'remote', name: 'Remote' });
-    return locations
+    return locations;
   }
 
-  
   async getDefaultLocation() {
     const localServers = await this.numberOfLocalServers();
-    if(this.electronService.isElectronApp && localServers === 0) {
+    if (this.electronService.isElectronApp && localServers === 0) {
       return 'local';
     }
     return 'remote';
@@ -72,14 +76,14 @@ export class AddServerDialogComponent implements OnInit {
   }
 
   async getDefaultLocalServerPath() {
-    if(this.electronService.isElectronApp) {
+    if (this.electronService.isElectronApp) {
       return await this.electronService.remote.require('./local-server.js').getLocalServerPath();
     }
     return;
   }
 
   async getDefaultUbridgePath() {
-    if(this.electronService.isElectronApp) {
+    if (this.electronService.isElectronApp) {
       return await this.electronService.remote.require('./local-server.js').getUbridgePath();
     }
     return;
@@ -95,14 +99,13 @@ export class AddServerDialogComponent implements OnInit {
       const pathControl = this.serverForm.get('path');
       const ubridgePathControl = this.serverForm.get('ubridge_path');
 
-      if(location === 'local') {
+      if (location === 'local') {
         pathControl.setValue(defaultLocalServerPath);
         pathControl.setValidators([Validators.required]);
 
         ubridgePathControl.setValue(defaultUbridgePath);
         ubridgePathControl.setValidators([Validators.required]);
-      }
-      else {
+      } else {
         pathControl.setValue('');
         pathControl.clearValidators();
 
@@ -112,29 +115,28 @@ export class AddServerDialogComponent implements OnInit {
 
       [pathControl, ubridgePathControl].forEach((control) => {
         control.updateValueAndValidity({
-          onlySelf: true
+          onlySelf: true,
         });
-      })
+      });
     });
-    
+
     this.serverForm.get('authorization').valueChanges.subscribe((authorization: string) => {
       const loginControl = this.serverForm.get('login');
       const passwordControl = this.serverForm.get('password');
 
-      if(authorization === 'none') {
+      if (authorization === 'none') {
         loginControl.clearValidators();
         passwordControl.clearValidators();
-      }
-      else {
+      } else {
         loginControl.setValidators([Validators.required]);
         passwordControl.setValidators([Validators.required]);
       }
 
       [loginControl, passwordControl].forEach((control) => {
         control.updateValueAndValidity({
-          onlySelf: true
+          onlySelf: true,
         });
-      })
+      });
     });
 
     const defaultLocation = await this.getDefaultLocation();
@@ -145,23 +147,23 @@ export class AddServerDialogComponent implements OnInit {
   }
 
   onAddClick(): void {
-    if(!this.serverForm.valid) {
+    if (!this.serverForm.valid) {
       return;
     }
 
     const server: Server = Object.assign({}, this.serverForm.value);
     this.serverService.checkServerVersion(server).subscribe(
       (serverInfo) => {
-        if ((serverInfo.version.split('.')[1]>=2) && (serverInfo.version.split('.')[0]>=2)) {
+        if (serverInfo.version.split('.')[1] >= 2 && serverInfo.version.split('.')[0] >= 2) {
           this.dialogRef.close(server);
-          this.toasterService.success(`Server ${server.name} added.`)
+          this.toasterService.success(`Server ${server.name} added.`);
         } else {
           this.dialogRef.close();
-          this.toasterService.error(`Server version is not supported.`)
+          this.toasterService.error(`Server version is not supported.`);
         }
       },
-      error => { 
-        this.toasterService.error('Cannot connect to the server: ' + error)
+      (error) => {
+        this.toasterService.error('Cannot connect to the server: ' + error);
       }
     );
   }
diff --git a/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html b/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html
index c9f74ebf..bc7ff337 100644
--- a/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html
+++ b/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html
@@ -1,4 +1,4 @@
-<span class="message">{{message}}</span>
+<span class="message">{{ message }}</span>
 <div mat-dialog-actions>
   <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
   <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
diff --git a/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts b/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts
index 6e60c46d..98c61a37 100644
--- a/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts
+++ b/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'app-configure-gns3-vm-dialog',
   templateUrl: 'configure-gns3vm-dialog.component.html',
-  styleUrls: ['configure-gns3vm-dialog.component.scss']
+  styleUrls: ['configure-gns3vm-dialog.component.scss'],
 })
 export class ConfigureGns3VMDialogComponent implements OnInit {
   public message: string = 'Do you want to configure GNS3 VM?';
diff --git a/src/app/components/servers/server-discovery/server-discovery.component.spec.ts b/src/app/components/servers/server-discovery/server-discovery.component.spec.ts
index e72bf00d..24fd06b4 100644
--- a/src/app/components/servers/server-discovery/server-discovery.component.spec.ts
+++ b/src/app/components/servers/server-discovery/server-discovery.component.spec.ts
@@ -27,9 +27,9 @@ xdescribe('ServerDiscoveryComponent', () => {
       providers: [
         { provide: VersionService, useFactory: () => mockedVersionService },
         { provide: ServerService, useFactory: () => mockedServerService },
-        ServerDatabase
+        ServerDatabase,
       ],
-      declarations: [ServerDiscoveryComponent]
+      declarations: [ServerDiscoveryComponent],
     }).compileComponents();
   }));
 
@@ -55,7 +55,7 @@ xdescribe('ServerDiscoveryComponent', () => {
 
       const getVersionSpy = spyOn(mockedVersionService, 'get').and.returnValue(Observable.of(version));
 
-      component.isServerAvailable('127.0.0.1', 3080).subscribe(s => {
+      component.isServerAvailable('127.0.0.1', 3080).subscribe((s) => {
         expect(s.host).toEqual('127.0.0.1');
         expect(s.port).toEqual(3080);
       });
@@ -78,8 +78,8 @@ xdescribe('ServerDiscoveryComponent', () => {
       let hasExecuted = false;
 
       component.isServerAvailable('127.0.0.1', 3080).subscribe(
-        ver => {},
-        err => {
+        (ver) => {},
+        (err) => {
           hasExecuted = true;
           expect(err.toString()).toEqual('Error: server is unavailable');
         }
@@ -91,7 +91,7 @@ xdescribe('ServerDiscoveryComponent', () => {
   });
 
   describe('discovery', () => {
-    it('should discovery all servers available', done => {
+    it('should discovery all servers available', (done) => {
       const version = new Version();
       version.version = '2.1.8';
 
@@ -102,7 +102,7 @@ xdescribe('ServerDiscoveryComponent', () => {
         return Observable.of(server);
       });
 
-      component.discovery().subscribe(discovered => {
+      component.discovery().subscribe((discovered) => {
         expect(discovered[0].host).toEqual('127.0.0.1');
         expect(discovered[0].port).toEqual(3080);
 
@@ -116,7 +116,7 @@ xdescribe('ServerDiscoveryComponent', () => {
   describe('discoverFirstAvailableServer', () => {
     let server: Server;
 
-    beforeEach(function() {
+    beforeEach(function () {
       server = new Server();
       (server.host = '199.111.111.1'), (server.port = 3333);
 
diff --git a/src/app/components/servers/server-discovery/server-discovery.component.ts b/src/app/components/servers/server-discovery/server-discovery.component.ts
index e688a081..79a29b98 100644
--- a/src/app/components/servers/server-discovery/server-discovery.component.ts
+++ b/src/app/components/servers/server-discovery/server-discovery.component.ts
@@ -15,14 +15,14 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'app-server-discovery',
   templateUrl: './server-discovery.component.html',
-  styleUrls: ['./server-discovery.component.scss']
+  styleUrls: ['./server-discovery.component.scss'],
 })
 export class ServerDiscoveryComponent implements OnInit {
   private defaultServers = [
     {
       host: '127.0.0.1',
-      port: 3080
-    }
+      port: 3080,
+    },
   ];
 
   discoveredServer: Server;
@@ -31,7 +31,7 @@ export class ServerDiscoveryComponent implements OnInit {
     private versionService: VersionService,
     private serverService: ServerService,
     private serverDatabase: ServerDatabase,
-    private route : ActivatedRoute
+    private route: ActivatedRoute
   ) {}
 
   ngOnInit() {
@@ -47,15 +47,15 @@ export class ServerDiscoveryComponent implements OnInit {
     let discovered = await this.discoverServers();
     let local = await this.serverService.findAll();
 
-    local.forEach(added => {
-      discovered = discovered.filter(server => {
+    local.forEach((added) => {
+      discovered = discovered.filter((server) => {
         return !(server.host == added.host && server.port == added.port);
       });
     });
 
     if (discovered.length > 0) {
       this.discoveredServer = discovered.shift();
-    };
+    }
   }
 
   async discoverServers() {
@@ -64,20 +64,20 @@ export class ServerDiscoveryComponent implements OnInit {
       const server = new Server();
       server.host = testServer.host;
       server.port = testServer.port;
-      let version = await this.versionService.get(server).toPromise().catch(error => null);
+      let version = await this.versionService
+        .get(server)
+        .toPromise()
+        .catch((error) => null);
       if (version) discoveredServers.push(server);
     });
     return discoveredServers;
   }
 
   discoverFirstAvailableServer() {
-    forkJoin(
-      [from(this.serverService.findAll()).pipe(map((s: Server[]) => s)),
-      this.discovery()]
-    ).subscribe(
+    forkJoin([from(this.serverService.findAll()).pipe(map((s: Server[]) => s)), this.discovery()]).subscribe(
       ([local, discovered]) => {
-        local.forEach(added => {
-          discovered = discovered.filter(server => {
+        local.forEach((added) => {
+          discovered = discovered.filter((server) => {
             return !(server.host == added.host && server.port == added.port);
           });
         });
@@ -85,23 +85,24 @@ export class ServerDiscoveryComponent implements OnInit {
           this.discoveredServer = discovered.shift();
         }
       },
-      error => {});
+      (error) => {}
+    );
   }
 
   discovery(): Observable<Server[]> {
     const queries: Observable<Server>[] = [];
 
-    this.defaultServers.forEach(testServer => {
+    this.defaultServers.forEach((testServer) => {
       queries.push(
-        this.isServerAvailable(testServer.host, testServer.port).catch(err => {
+        this.isServerAvailable(testServer.host, testServer.port).catch((err) => {
           return Observable.of(null);
         })
       );
     });
 
-    return new Observable<Server[]>(observer => {
-      forkJoin(queries).subscribe(discoveredServers => {
-        observer.next(discoveredServers.filter(s => s != null));
+    return new Observable<Server[]>((observer) => {
+      forkJoin(queries).subscribe((discoveredServers) => {
+        observer.next(discoveredServers.filter((s) => s != null));
         observer.complete();
       });
     });
diff --git a/src/app/components/servers/servers.component.html b/src/app/components/servers/servers.component.html
index 0fc84529..178a1b2e 100644
--- a/src/app/components/servers/servers.component.html
+++ b/src/app/components/servers/servers.component.html
@@ -13,8 +13,16 @@
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
           <mat-cell *matCellDef="let row">
-            <a *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'" [routerLink]="['/server', row.id, 'projects']" class="table-link">{{ row.name }}</a>
-            <span *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote' && row.location !== 'bundled'">{{ row.name }}</span>
+            <a
+              *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'"
+              [routerLink]="['/server', row.id, 'projects']"
+              class="table-link"
+              >{{ row.name }}</a
+            >
+            <span
+              *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote' && row.location !== 'bundled'"
+              >{{ row.name }}</span
+            >
           </mat-cell>
         </ng-container>
 
@@ -36,21 +44,47 @@
         <ng-container matColumnDef="actions">
           <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
           <mat-cell *matCellDef="let row" style="text-align: right">
-            <button mat-icon-button matTooltip="Go to projects" matTooltipClass="custom-tooltip" (click)="openProjects(row)" *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'">
+            <button
+              mat-icon-button
+              matTooltip="Go to projects"
+              matTooltipClass="custom-tooltip"
+              (click)="openProjects(row)"
+              *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'"
+            >
               <mat-icon aria-label="Go to projects">arrow_forward</mat-icon>
             </button>
 
-            <button mat-icon-button matTooltip="Start server" matTooltipClass="custom-tooltip" (click)="startServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'stopped'">
+            <button
+              mat-icon-button
+              matTooltip="Start server"
+              matTooltipClass="custom-tooltip"
+              (click)="startServer(row)"
+              *ngIf="row.location === 'local' && getServerStatus(row) === 'stopped'"
+            >
               <mat-icon aria-label="Start server">play_arrow</mat-icon>
             </button>
 
-            <button mat-icon-button matTooltip="Stop server" matTooltipClass="custom-tooltip" (click)="stopServer(row)" *ngIf="row.location === 'local' && getServerStatus(row) === 'running'">
+            <button
+              mat-icon-button
+              matTooltip="Stop server"
+              matTooltipClass="custom-tooltip"
+              (click)="stopServer(row)"
+              *ngIf="row.location === 'local' && getServerStatus(row) === 'running'"
+            >
               <mat-icon aria-label="Stop server">stop</mat-icon>
             </button>
 
-            <mat-spinner [diameter]="24" *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"></mat-spinner>
-            
-            <button mat-icon-button matTooltip="Remove server" matTooltipClass="custom-tooltip" (click)="deleteServer(row)">
+            <mat-spinner
+              [diameter]="24"
+              *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"
+            ></mat-spinner>
+
+            <button
+              mat-icon-button
+              matTooltip="Remove server"
+              matTooltipClass="custom-tooltip"
+              (click)="deleteServer(row)"
+            >
               <mat-icon aria-label="Remove server">delete</mat-icon>
             </button>
           </mat-cell>
@@ -62,7 +96,9 @@
     </div>
 
     <div class="buttons-bar">
-      <button *ngIf="isElectronApp" mat-raised-button class="button" (click)="startLocalServer()">Start local server</button>
+      <button *ngIf="isElectronApp" mat-raised-button class="button" (click)="startLocalServer()">
+        Start local server
+      </button>
       <button mat-raised-button class="button" color="primary" (click)="createModal()">Add server</button>
     </div>
   </div>
diff --git a/src/app/components/servers/servers.component.scss b/src/app/components/servers/servers.component.scss
index 9a7ae95d..e7e1f28f 100644
--- a/src/app/components/servers/servers.component.scss
+++ b/src/app/components/servers/servers.component.scss
@@ -1,7 +1,7 @@
 .buttons-bar {
-    padding-top: 0px;
+  padding-top: 0px;
 }
 
 .button {
-    margin: 20px!important;
+  margin: 20px !important;
 }
diff --git a/src/app/components/servers/servers.component.spec.ts b/src/app/components/servers/servers.component.spec.ts
index a0c628c5..ca48efc3 100644
--- a/src/app/components/servers/servers.component.spec.ts
+++ b/src/app/components/servers/servers.component.spec.ts
@@ -8,7 +8,7 @@ describe('ServersComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ServersComponent]
+      declarations: [ServersComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/servers/servers.component.ts b/src/app/components/servers/servers.component.ts
index d49c99ac..cdcfb707 100644
--- a/src/app/components/servers/servers.component.ts
+++ b/src/app/components/servers/servers.component.ts
@@ -14,11 +14,10 @@ import { ElectronService } from 'ngx-electron';
 import { ChildProcessService } from 'ngx-childprocess';
 import { ConfirmationBottomSheetComponent } from '../projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
 
-
 @Component({
   selector: 'app-server-list',
   templateUrl: './servers.component.html',
-  styleUrls: ['./servers.component.scss']
+  styleUrls: ['./servers.component.scss'],
 })
 export class ServersComponent implements OnInit, OnDestroy {
   dataSource: ServerDataSource;
@@ -35,17 +34,17 @@ export class ServersComponent implements OnInit, OnDestroy {
     private electronService: ElectronService,
     private childProcessService: ChildProcessService,
     private bottomSheet: MatBottomSheet,
-    private route : ActivatedRoute,
+    private route: ActivatedRoute,
     private router: Router
   ) {}
-  
+
   getServers() {
     const runningServersNames = this.serverManagement.getRunningServers();
 
     this.serverService.findAll().then((servers: Server[]) => {
       servers.forEach((server) => {
         const serverIndex = runningServersNames.findIndex((serverName) => server.name === serverName);
-        if(serverIndex >= 0) {
+        if (serverIndex >= 0) {
           server.status = 'running';
         }
       });
@@ -53,13 +52,13 @@ export class ServersComponent implements OnInit, OnDestroy {
       servers.forEach((server) => {
         this.serverService.checkServerVersion(server).subscribe(
           (serverInfo) => {
-            if ((serverInfo.version.split('.')[1]>=2) && (serverInfo.version.split('.')[0]>=2)) {
+            if (serverInfo.version.split('.')[1] >= 2 && serverInfo.version.split('.')[0] >= 2) {
               if (!server.protocol) server.protocol = location.protocol as ServerProtocol;
               if (!this.serverDatabase.find(server.name)) this.serverDatabase.addServer(server);
             }
           },
-          error => {}
-          );
+          (error) => {}
+        );
       });
     });
   }
@@ -79,19 +78,19 @@ export class ServersComponent implements OnInit, OnDestroy {
 
     this.serverStatusSubscription = this.serverManagement.serverStatusChanged.subscribe((serverStatus) => {
       const server = this.serverDatabase.find(serverStatus.serverName);
-      if(!server) {
+      if (!server) {
         return;
       }
-      if(serverStatus.status === 'starting') {
+      if (serverStatus.status === 'starting') {
         server.status = 'starting';
       }
-      if(serverStatus.status === 'stopped') {
+      if (serverStatus.status === 'stopped') {
         server.status = 'stopped';
       }
-      if(serverStatus.status === 'errored') {
+      if (serverStatus.status === 'errored') {
         server.status = 'stopped';
       }
-      if(serverStatus.status === 'started') {
+      if (serverStatus.status === 'started') {
         server.status = 'running';
       }
       this.serverDatabase.update(server);
@@ -104,7 +103,7 @@ export class ServersComponent implements OnInit, OnDestroy {
   }
 
   startLocalServer() {
-    const server = this.serverDatabase.data.find(n => n.location === 'bundled' || 'local');
+    const server = this.serverDatabase.data.find((n) => n.location === 'bundled' || 'local');
     this.startServer(server);
   }
 
@@ -116,10 +115,10 @@ export class ServersComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(AddServerDialogComponent, {
       width: '350px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
 
-    dialogRef.afterClosed().subscribe(server => {
+    dialogRef.afterClosed().subscribe((server) => {
       if (server) {
         this.serverService.create(server).then((created: Server) => {
           this.serverDatabase.addServer(created);
@@ -129,8 +128,8 @@ export class ServersComponent implements OnInit, OnDestroy {
   }
 
   getServerStatus(server: Server) {
-    if(server.location === 'local') {
-      if(server.status === undefined) {
+    if (server.location === 'local') {
+      if (server.status === undefined) {
         return 'stopped';
       }
       return server.status;
@@ -145,7 +144,7 @@ export class ServersComponent implements OnInit, OnDestroy {
       if (result) {
         this.serverService.delete(server).then(() => {
           this.serverDatabase.remove(server);
-        }); 
+        });
       }
     });
   }
diff --git a/src/app/components/settings/console/console.component.html b/src/app/components/settings/console/console.component.html
index 67c2316f..185b553e 100644
--- a/src/app/components/settings/console/console.component.html
+++ b/src/app/components/settings/console/console.component.html
@@ -1,28 +1,29 @@
 <div class="content">
   <div class="default-header">
-      <div class="row">
-          <h1 class="col">Console settings</h1>
-      </div>
+    <div class="row">
+      <h1 class="col">Console settings</h1>
+    </div>
   </div>
   <div class="default-content">
-      <mat-card>
-          <form [formGroup]="consoleForm">
-            <mat-form-field class="form-field full-width-field">
-              <textarea matInput formControlName="command" placeholder="Command"></textarea>
-            </mat-form-field>
-            <div class="help">The following variables are replaced by GNS3:<br />
-              %h: console IP or hostname<br />
-              %p: console port<br />
-              %s: path of the serial connection<br />
-              %d: title of the console<br />
-              %i: Project UUID<br />
-              %c: server URL (http://user:password@server:port)
-            </div>
-          </form>
-      </mat-card>
-      <div class="buttons-bar">
-          <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
-          <button mat-raised-button color="primary" (click)="save()">Save</button><br/>
-      </div>
+    <mat-card>
+      <form [formGroup]="consoleForm">
+        <mat-form-field class="form-field full-width-field">
+          <textarea matInput formControlName="command" placeholder="Command"></textarea>
+        </mat-form-field>
+        <div class="help">
+          The following variables are replaced by GNS3:<br />
+          %h: console IP or hostname<br />
+          %p: console port<br />
+          %s: path of the serial connection<br />
+          %d: title of the console<br />
+          %i: Project UUID<br />
+          %c: server URL (http://user:password@server:port)
+        </div>
+      </form>
+    </mat-card>
+    <div class="buttons-bar">
+      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+      <button mat-raised-button color="primary" (click)="save()">Save</button><br />
+    </div>
   </div>
 </div>
diff --git a/src/app/components/settings/console/console.component.scss b/src/app/components/settings/console/console.component.scss
index 6955ed73..9057bc2e 100644
--- a/src/app/components/settings/console/console.component.scss
+++ b/src/app/components/settings/console/console.component.scss
@@ -1,3 +1,3 @@
 .help {
   font-size: 14px;
-}
\ No newline at end of file
+}
diff --git a/src/app/components/settings/console/console.component.spec.ts b/src/app/components/settings/console/console.component.spec.ts
index 3af4ba64..62d491f8 100644
--- a/src/app/components/settings/console/console.component.spec.ts
+++ b/src/app/components/settings/console/console.component.spec.ts
@@ -11,7 +11,6 @@ import { MockedToasterService } from '../../../services/toaster.service.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 
-
 describe('ConsoleComponent', () => {
   let component: ConsoleComponent;
   let fixture: ComponentFixture<ConsoleComponent>;
@@ -21,11 +20,11 @@ describe('ConsoleComponent', () => {
 
   beforeEach(async(() => {
     consoleService = {
-      command: 'command'
+      command: 'command',
     };
 
     router = {
-      navigate: jasmine.createSpy('navigate')
+      navigate: jasmine.createSpy('navigate'),
     };
 
     toaster = new MockedToasterService();
@@ -34,12 +33,18 @@ describe('ConsoleComponent', () => {
       providers: [
         { provide: ConsoleService, useValue: consoleService },
         { provide: ToasterService, useValue: toaster },
-        { provide: Router, useValue: router}
+        { provide: Router, useValue: router },
       ],
-      imports: [ FormsModule, ReactiveFormsModule, MatFormFieldModule, MatCardModule, MatInputModule, NoopAnimationsModule ],
-      declarations: [ ConsoleComponent ]
-    })
-    .compileComponents();
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatCardModule,
+        MatInputModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [ConsoleComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -55,14 +60,13 @@ describe('ConsoleComponent', () => {
   it('should set default command', () => {
     component.ngOnInit();
     expect(component.consoleForm.value.command).toEqual('command');
-  })
+  });
 
   it('should go back', () => {
     component.goBack();
     expect(router.navigate).toHaveBeenCalledWith(['/settings']);
   });
 
-
   it('should update console command', () => {
     component.consoleForm.get('command').setValue('newCommand');
     spyOn(component, 'goBack');
@@ -70,5 +74,4 @@ describe('ConsoleComponent', () => {
     expect(toaster.success.length).toEqual(1);
     expect(component.goBack).toHaveBeenCalled();
   });
-
 });
diff --git a/src/app/components/settings/console/console.component.ts b/src/app/components/settings/console/console.component.ts
index f043bc5f..27a9caa0 100644
--- a/src/app/components/settings/console/console.component.ts
+++ b/src/app/components/settings/console/console.component.ts
@@ -7,19 +7,14 @@ import { ToasterService } from '../../../services/toaster.service';
 @Component({
   selector: 'app-console',
   templateUrl: './console.component.html',
-  styleUrls: ['./console.component.scss']
+  styleUrls: ['./console.component.scss'],
 })
 export class ConsoleComponent implements OnInit {
-
   consoleForm = new FormGroup({
-    'command': new FormControl(''),
+    command: new FormControl(''),
   });
-  
-  constructor(
-    private router: Router,
-    private consoleService: ConsoleService,
-    private toasterService: ToasterService
-  ) { }
+
+  constructor(private router: Router, private consoleService: ConsoleService, private toasterService: ToasterService) {}
 
   ngOnInit() {
     const commandControl = this.consoleForm.get('command');
@@ -33,8 +28,7 @@ export class ConsoleComponent implements OnInit {
   save() {
     const formValue = this.consoleForm.value;
     this.consoleService.command = formValue.command;
-    this.toasterService.success("Console command has been updated.");
+    this.toasterService.success('Console command has been updated.');
     this.goBack();
   }
-
 }
diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html
index 1c3c0b6c..dd09dcf4 100644
--- a/src/app/components/settings/settings.component.html
+++ b/src/app/components/settings/settings.component.html
@@ -10,7 +10,7 @@
           </mat-expansion-panel-header>
 
           <div>
-            <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br/>
+            <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox>
           </div>
 
@@ -35,11 +35,10 @@
 
           <div>
             <mat-form-field class="full-width-field">
-              <input matInput placeholder="console" [value]="consoleCommand" readonly="true">
+              <input matInput placeholder="console" [value]="consoleCommand" readonly="true" />
               <a mat-icon-button matSuffix routerLink="/settings/console"><mat-icon>mode_edit</mat-icon></a>
             </mat-form-field>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel [expanded]="false">
@@ -52,7 +51,6 @@
             <button mat-raised-button (click)="setDarkMode(false)">Switch to light theme</button>
             <button mat-raised-button (click)="setDarkMode(true)">Switch to dark theme</button>
           </div>
-
         </mat-expansion-panel>
 
         <mat-expansion-panel [expanded]="false">
@@ -64,12 +62,10 @@
           <div class="theme-panel">
             <button mat-raised-button (click)="checkForUpdates()" class="fullWidth">Check for updates</button>
           </div>
-
         </mat-expansion-panel>
       </mat-accordion>
     </div>
 
     <div class="buttons-bar"><button mat-raised-button color="primary" (click)="save()">Save settings</button></div>
   </div>
-
 </div>
diff --git a/src/app/components/settings/settings.component.scss b/src/app/components/settings/settings.component.scss
index 279e9631..56307c92 100644
--- a/src/app/components/settings/settings.component.scss
+++ b/src/app/components/settings/settings.component.scss
@@ -1,9 +1,9 @@
 .theme-panel {
-    justify-content: space-between;
-    display: flex;
-    padding: 10px;
+  justify-content: space-between;
+  display: flex;
+  padding: 10px;
 }
 
 .fullWidth {
-    width: 100%;
+  width: 100%;
 }
diff --git a/src/app/components/settings/settings.component.spec.ts b/src/app/components/settings/settings.component.spec.ts
index 65f16d90..17aabf97 100644
--- a/src/app/components/settings/settings.component.spec.ts
+++ b/src/app/components/settings/settings.component.spec.ts
@@ -24,26 +24,35 @@ describe('SettingsComponent', () => {
   let settingsService: SettingsService;
   let mapSettingsService = {
     integrateLinkLabelsToLinks: true,
-    toggleIntegrateInterfaceLabels(val: boolean) {}
+    toggleIntegrateInterfaceLabels(val: boolean) {},
   };
   let consoleService;
   let updatesService = autoSpy(UpdatesService);
 
   beforeEach(async(() => {
     consoleService = {
-      command: 'command'
+      command: 'command',
     };
 
     TestBed.configureTestingModule({
-      imports: [MatExpansionModule, MatCheckboxModule, FormsModule, PersistenceModule, BrowserAnimationsModule, MatIconModule, MatFormFieldModule, MatInputModule],
+      imports: [
+        MatExpansionModule,
+        MatCheckboxModule,
+        FormsModule,
+        PersistenceModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+      ],
       providers: [
         SettingsService,
         { provide: ToasterService, useClass: MockedToasterService },
         { provide: ConsoleService, useValue: consoleService },
         { provide: MapSettingsService, useValue: mapSettingsService },
-        { provide: UpdatesService, useValue: updatesService }
+        { provide: UpdatesService, useValue: updatesService },
       ],
-      declarations: [SettingsComponent]
+      declarations: [SettingsComponent],
     }).compileComponents();
 
     settingsService = TestBed.get(SettingsService);
@@ -64,7 +73,7 @@ describe('SettingsComponent', () => {
       crash_reports: true,
       experimental_features: true,
       angular_map: false,
-      console_command: ''
+      console_command: '',
     };
     const getAll = spyOn(settingsService, 'getAll').and.returnValue(settings);
     const setAll = spyOn(settingsService, 'setAll');
@@ -75,5 +84,4 @@ describe('SettingsComponent', () => {
     component.save();
     expect(setAll).toHaveBeenCalledWith(settings);
   });
-
 });
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
index 5ff17c4f..16fb7e09 100644
--- a/src/app/components/settings/settings.component.ts
+++ b/src/app/components/settings/settings.component.ts
@@ -9,7 +9,7 @@ import { UpdatesService } from '../../services/updates.service';
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss']
+  styleUrls: ['./settings.component.scss'],
 })
 export class SettingsComponent implements OnInit {
   settings = { ...SettingsService.DEFAULTS };
@@ -42,6 +42,6 @@ export class SettingsComponent implements OnInit {
   }
 
   checkForUpdates() {
-    window.open("https://gns3.com/software");
+    window.open('https://gns3.com/software');
   }
 }
diff --git a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html
index 43959d22..21f00940 100644
--- a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html
+++ b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.html
@@ -1,14 +1,19 @@
 <div class="title-container">
   <h1 mat-dialog-title>Create snapshot</h1>
-  <button mat-button class="top-button" color="accent" (click)="onNoClick()" routerLink="/server/{{server.id}}/project/{{project.project_id}}/snapshots">Go to snapshots</button>
+  <button
+    mat-button
+    class="top-button"
+    color="accent"
+    (click)="onNoClick()"
+    routerLink="/server/{{ server.id }}/project/{{ project.project_id }}/snapshots"
+  >
+    Go to snapshots
+  </button>
 </div>
 <div mat-dialog-content>
   <form [formGroup]="inputForm">
     <mat-form-field class="name-input">
-      <input 
-        matInput tabindex="1" 
-        formControlName="snapshotName"
-        placeholder="Name" />
+      <input matInput tabindex="1" formControlName="snapshotName" placeholder="Name" />
     </mat-form-field>
   </form>
 </div>
diff --git a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.scss b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.scss
index 7977448c..d21c1a32 100644
--- a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.scss
+++ b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.scss
@@ -1,21 +1,21 @@
 .title-container {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
 }
 
 .name-input {
-    width: 100%;
+  width: 100%;
 }
 
 .top-button {
-    outline: none;
-    box-shadow: none !important;
-    background: transparent !important; 
+  outline: none;
+  box-shadow: none !important;
+  background: transparent !important;
 }
 
 button:focus {
-    outline: 0 !important;
-    border: 0 !important;
-    box-shadow: none !important;
+  outline: 0 !important;
+  border: 0 !important;
+  box-shadow: none !important;
 }
diff --git a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts
index a981589e..e62e28e5 100644
--- a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts
+++ b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.spec.ts
@@ -8,7 +8,7 @@ describe('CreateSnapshotDialogComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CreateSnapshotDialogComponent]
+      declarations: [CreateSnapshotDialogComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts
index 06c40d32..bf1ab6ed 100644
--- a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts
+++ b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts
@@ -9,11 +9,10 @@ import { SnapshotService } from '../../../services/snapshot.service';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { Node } from '../../../cartography/models/node';
 
-
 @Component({
   selector: 'app-create-snapshot-dialog',
   templateUrl: './create-snapshot-dialog.component.html',
-  styleUrls: ['./create-snapshot-dialog.component.scss']
+  styleUrls: ['./create-snapshot-dialog.component.scss'],
 })
 export class CreateSnapshotDialogComponent {
   server: Server;
@@ -35,7 +34,7 @@ export class CreateSnapshotDialogComponent {
     this.project = data['project'];
 
     this.inputForm = this.formBuilder.group({
-      snapshotName: new FormControl('', Validators.required)
+      snapshotName: new FormControl('', Validators.required),
     });
 
     this.snapshotService.list(this.server, this.project.project_id).subscribe((snapshots: Snapshot[]) => {
@@ -52,7 +51,7 @@ export class CreateSnapshotDialogComponent {
   }
 
   isAlwaysRunningNode(nodeType: string) {
-    return !["qemu", "docker", "dynamips", "vpcs", "vmware", "virtualbox", "iou", "traceng"].includes(nodeType);
+    return !['qemu', 'docker', 'dynamips', 'vpcs', 'vmware', 'virtualbox', 'iou', 'traceng'].includes(nodeType);
   }
 
   onAddClick(): void {
diff --git a/src/app/components/snapshots/list-of-snapshots/list-of-snaphshots.component.spec.ts b/src/app/components/snapshots/list-of-snapshots/list-of-snaphshots.component.spec.ts
index dad43a46..ee4638dd 100644
--- a/src/app/components/snapshots/list-of-snapshots/list-of-snaphshots.component.spec.ts
+++ b/src/app/components/snapshots/list-of-snapshots/list-of-snaphshots.component.spec.ts
@@ -26,136 +26,138 @@ import { NameFilter } from '../../../filters/nameFilter.pipe';
 import { ServerResolve } from '../../../resolvers/server-resolve';
 
 export class MockedActivatedRoute {
-    get() {
-        return {
-            params: of({ id: 3 }),
-            snapshot: {
-                parent: {
-                    params: {
-                        id: 1
-                    }
-                },
-                paramMap: {
-                    get(name: string): string {
-                        return '1';
-                    }
-                },
-                data: {
-                    'server': new Server() 
-                }
-            },
-        };
-    }
+  get() {
+    return {
+      params: of({ id: 3 }),
+      snapshot: {
+        parent: {
+          params: {
+            id: 1,
+          },
+        },
+        paramMap: {
+          get(name: string): string {
+            return '1';
+          },
+        },
+        data: {
+          server: new Server(),
+        },
+      },
+    };
+  }
 }
 
 export class MockedSnapshotService {
-    public list(server: Server, project_id: string) {
-        return of([]);
-    }
+  public list(server: Server, project_id: string) {
+    return of([]);
+  }
 
-    public delete(server: Server, project_id: string, snapshot_id: string) {
-        return of({});
-    }
+  public delete(server: Server, project_id: string, snapshot_id: string) {
+    return of({});
+  }
 
-    public restore(server: Server, project_id: string, snapshot_id: string) {
-        return of({});
-    }
+  public restore(server: Server, project_id: string, snapshot_id: string) {
+    return of({});
+  }
 }
 
 describe('ListOfSnapshotsComponent', () => {
-    let component: ListOfSnapshotsComponent;
-    let fixture: ComponentFixture<ListOfSnapshotsComponent>;
-    let activatedRoute = new MockedActivatedRoute().get();
-    let mockedSnapshotService = new MockedSnapshotService();
-    let mockedToasterService = new MockedToasterService();
+  let component: ListOfSnapshotsComponent;
+  let fixture: ComponentFixture<ListOfSnapshotsComponent>;
+  let activatedRoute = new MockedActivatedRoute().get();
+  let mockedSnapshotService = new MockedSnapshotService();
+  let mockedToasterService = new MockedToasterService();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports:  [MatDialogModule, 
-                MatTableModule, 
-                MatIconModule, 
-                MatToolbarModule, 
-                MatMenuModule, 
-                MatCheckboxModule, 
-                CommonModule, 
-                NoopAnimationsModule, 
-                RouterTestingModule.withRoutes([
-                    { path: 'server/:server_id/project/:project_id/snapshots', component: ListOfSnapshotsComponent, resolve: {server: ServerResolve} }
-                ])],
-            providers: [
-                { provide: SnapshotService, useValue: mockedSnapshotService },
-                { provide: ActivatedRoute, useValue: activatedRoute },
-                { provide: ProgressDialogService, useClass: ProgressDialogService },
-                { provide: ToasterService, useValue: mockedToasterService }
-            ],
-            declarations: [
-                ListOfSnapshotsComponent,
-                DateFilter,
-                NameFilter
-            ],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatDialogModule,
+        MatTableModule,
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        CommonModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([
+          {
+            path: 'server/:server_id/project/:project_id/snapshots',
+            component: ListOfSnapshotsComponent,
+            resolve: { server: ServerResolve },
+          },
+        ]),
+      ],
+      providers: [
+        { provide: SnapshotService, useValue: mockedSnapshotService },
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ProgressDialogService, useClass: ProgressDialogService },
+        { provide: ToasterService, useValue: mockedToasterService },
+      ],
+      declarations: [ListOfSnapshotsComponent, DateFilter, NameFilter],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ListOfSnapshotsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListOfSnapshotsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should call snapshot service to get items', () => {
-        spyOn(mockedSnapshotService, 'list').and.returnValues(of([]));
+  it('should call snapshot service to get items', () => {
+    spyOn(mockedSnapshotService, 'list').and.returnValues(of([]));
 
-        component.getSnapshots();
+    component.getSnapshots();
 
-        expect(mockedSnapshotService.list).toHaveBeenCalled();
-    });
+    expect(mockedSnapshotService.list).toHaveBeenCalled();
+  });
 
-    it('should call snapshot service to delete snapshot', () => {
-        let snapshot: Snapshot = {
-            snapshot_id: 1,
-            name: 'snapshot1',
-            created_at: '111111',
-            project_id: 1
-        };
-        spyOn(mockedSnapshotService, 'delete').and.returnValues(of([]));
+  it('should call snapshot service to delete snapshot', () => {
+    let snapshot: Snapshot = {
+      snapshot_id: 1,
+      name: 'snapshot1',
+      created_at: '111111',
+      project_id: 1,
+    };
+    spyOn(mockedSnapshotService, 'delete').and.returnValues(of([]));
 
-        component.deleteSnapshot(snapshot);
+    component.deleteSnapshot(snapshot);
 
-        expect(mockedSnapshotService.delete).toHaveBeenCalled();
-    });
+    expect(mockedSnapshotService.delete).toHaveBeenCalled();
+  });
 
-    it('should sort snapshots in correct order', () => {
-        component.snapshots = [
-            {
-                snapshot_id: 2,
-                name: 'second snapshot',
-                created_at: '222222',
-                project_id: 1
-            },
-            {
-                snapshot_id: 1,
-                name: 'first snapshot',
-                created_at: '111111',
-                project_id: 1
-            }
-        ];
-        let sort: Sort = {
-            active: 'name',
-            direction: 'asc'
-        };
+  it('should sort snapshots in correct order', () => {
+    component.snapshots = [
+      {
+        snapshot_id: 2,
+        name: 'second snapshot',
+        created_at: '222222',
+        project_id: 1,
+      },
+      {
+        snapshot_id: 1,
+        name: 'first snapshot',
+        created_at: '111111',
+        project_id: 1,
+      },
+    ];
+    let sort: Sort = {
+      active: 'name',
+      direction: 'asc',
+    };
 
-        component.sortData(sort);
+    component.sortData(sort);
 
-        expect(component.snapshots[0].snapshot_id).toBe(1);
+    expect(component.snapshots[0].snapshot_id).toBe(1);
 
-        sort.direction = 'desc';
-        component.sortData(sort);
+    sort.direction = 'desc';
+    component.sortData(sort);
 
-        expect(component.snapshots[0].snapshot_id).toBe(2);
-    });
+    expect(component.snapshots[0].snapshot_id).toBe(2);
+  });
 });
diff --git a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html
index da8c9b6d..4951d2b5 100644
--- a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html
+++ b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.html
@@ -1,46 +1,58 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Snapshots</h1>
-        </div>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Snapshots</h1>
     </div>
-    <div class="default-content">
-        <mat-card>
-            <mat-form-field class="filter-field">
-                <input matInput [(ngModel)]="searchText" placeholder="Filter">
-            </mat-form-field>
+  </div>
+  <div class="default-content">
+    <mat-card>
+      <mat-form-field class="filter-field">
+        <input matInput [(ngModel)]="searchText" placeholder="Filter" />
+      </mat-form-field>
 
-            <mat-table 
-                class="mat-table" 
-                #table matSort 
-                (matSortChange)= "sortData($event)" 
-                [dataSource]="snapshots | namefilter: searchText">
-                <ng-container matColumnDef="name">
-                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
-                    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
-                </ng-container>
+      <mat-table
+        class="mat-table"
+        #table
+        matSort
+        (matSortChange)="sortData($event)"
+        [dataSource]="snapshots | namefilter: searchText"
+      >
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.name }} </mat-cell>
+        </ng-container>
 
-                <ng-container matColumnDef="creationDate">
-                    <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
-                    <mat-cell *matCellDef="let row"> {{row.created_at | datefilter}} </mat-cell>
-                </ng-container>
-        
-                <ng-container matColumnDef="actions">
-                    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
-                    <mat-cell *matCellDef="let row" style="text-align: right">
-                        <button mat-icon-button matTooltip="Restore snapshot" matTooltipClass="custom-tooltip" (click)="restoreSnapshot(row)">
-                            <mat-icon aria-label="Restore snapshot">restore</mat-icon>
-                        </button>
-                        
-                        <button mat-icon-button matTooltip="Delete snapshot" matTooltipClass="custom-tooltip" (click)="deleteSnapshot(row)">
-                            <mat-icon aria-label="Delete snapshot">delete</mat-icon>
-                        </button>
-                    </mat-cell>
-                </ng-container>
-        
-                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-            </mat-table>
-        </mat-card>
-    </div>
+        <ng-container matColumnDef="creationDate">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{ row.created_at | datefilter }} </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
+          <mat-cell *matCellDef="let row" style="text-align: right">
+            <button
+              mat-icon-button
+              matTooltip="Restore snapshot"
+              matTooltipClass="custom-tooltip"
+              (click)="restoreSnapshot(row)"
+            >
+              <mat-icon aria-label="Restore snapshot">restore</mat-icon>
+            </button>
+
+            <button
+              mat-icon-button
+              matTooltip="Delete snapshot"
+              matTooltipClass="custom-tooltip"
+              (click)="deleteSnapshot(row)"
+            >
+              <mat-icon aria-label="Delete snapshot">delete</mat-icon>
+            </button>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      </mat-table>
+    </mat-card>
+  </div>
 </div>
diff --git a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.scss b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.scss
index 84536106..cc98a244 100644
--- a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.scss
+++ b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.scss
@@ -1,7 +1,7 @@
 .filter-field {
-    width: 100%;
+  width: 100%;
 }
 
 .mat-table {
-    margin: -16px!important;
+  margin: -16px !important;
 }
diff --git a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts
index 5ea0c685..cca659fe 100644
--- a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts
+++ b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts
@@ -13,79 +13,77 @@ import { ProgressDialogComponent } from '../../../common/progress-dialog/progres
 @Component({
   selector: 'app-list-of-snapshots',
   templateUrl: './list-of-snapshots.component.html',
-  styleUrls: ['./list-of-snapshots.component.scss']
+  styleUrls: ['./list-of-snapshots.component.scss'],
 })
 export class ListOfSnapshotsComponent implements OnInit {
-    server: Server;
-    projectId: string;
-    snapshots: Snapshot[];
-    displayedColumns = ['name', 'creationDate', 'actions'];
-    searchText: string;
+  server: Server;
+  projectId: string;
+  snapshots: Snapshot[];
+  displayedColumns = ['name', 'creationDate', 'actions'];
+  searchText: string;
 
-    constructor(
-        private route: ActivatedRoute,
-        private snapshotService: SnapshotService,
-        private progressDialogService: ProgressDialogService,
-        private toaster: ToasterService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private snapshotService: SnapshotService,
+    private progressDialogService: ProgressDialogService,
+    private toaster: ToasterService
+  ) {}
 
-    ngOnInit() {
-        this.projectId = this.route.snapshot.paramMap.get("project_id");
-        this.server = this.route.snapshot.data['server'];
-        this.getSnapshots();
-    }
+  ngOnInit() {
+    this.projectId = this.route.snapshot.paramMap.get('project_id');
+    this.server = this.route.snapshot.data['server'];
+    this.getSnapshots();
+  }
 
-    getSnapshots() {
-        this.snapshotService.list(this.server, this.projectId).subscribe((snapshots: Snapshot[]) => {
-            this.snapshots = snapshots;
-        });
-    }
+  getSnapshots() {
+    this.snapshotService.list(this.server, this.projectId).subscribe((snapshots: Snapshot[]) => {
+      this.snapshots = snapshots;
+    });
+  }
 
-    restoreSnapshot(snapshot: Snapshot) {
-        const restoring = this.snapshotService.restore(this.server, this.projectId, snapshot.snapshot_id.toString());
-        const progress = this.progressDialogService.open();
-        const subscription = restoring.subscribe(
-            (project: Project) => {
-                this.toaster.success(`Snapshot ${snapshot.name} has been restored.`);
-                progress.close();
-            }
-        );
+  restoreSnapshot(snapshot: Snapshot) {
+    const restoring = this.snapshotService.restore(this.server, this.projectId, snapshot.snapshot_id.toString());
+    const progress = this.progressDialogService.open();
+    const subscription = restoring.subscribe((project: Project) => {
+      this.toaster.success(`Snapshot ${snapshot.name} has been restored.`);
+      progress.close();
+    });
 
-        progress.afterClosed().subscribe(result => {
-            if (result === ProgressDialogComponent.CANCELLED) {
-                subscription.unsubscribe();
-            }
-        });
-    }
+    progress.afterClosed().subscribe((result) => {
+      if (result === ProgressDialogComponent.CANCELLED) {
+        subscription.unsubscribe();
+      }
+    });
+  }
 
-    deleteSnapshot(snapshot: Snapshot) {
-        this.snapshotService.delete(this.server, this.projectId, snapshot.snapshot_id.toString()).subscribe(() => {
-            this.getSnapshots();
-            this.toaster.success(`Snapshot ${snapshot.name} has been deleted.`);
-        });
-    }
+  deleteSnapshot(snapshot: Snapshot) {
+    this.snapshotService.delete(this.server, this.projectId, snapshot.snapshot_id.toString()).subscribe(() => {
+      this.getSnapshots();
+      this.toaster.success(`Snapshot ${snapshot.name} has been deleted.`);
+    });
+  }
 
-    sortData(sort: Sort) {
-        if (!sort.active || sort.direction === '') return;
+  sortData(sort: Sort) {
+    if (!sort.active || sort.direction === '') return;
 
-        let snapshots = this.snapshots.slice();
-        this.snapshots = snapshots.sort((a, b) => {
-            const isAsc = sort.direction === 'asc';
-            if (sort.active === 'name') {
-                return compareNames(a.name, b.name, isAsc);
-            } else if (sort.active === 'creationDate') {
-                return compareDates(+a.created_at, +b.created_at, !isAsc);
-            } else return 0;
-        });
-    }
+    let snapshots = this.snapshots.slice();
+    this.snapshots = snapshots.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      if (sort.active === 'name') {
+        return compareNames(a.name, b.name, isAsc);
+      } else if (sort.active === 'creationDate') {
+        return compareDates(+a.created_at, +b.created_at, !isAsc);
+      } else return 0;
+    });
+  }
 }
 
 function compareDates(a: number, b: number, isAsc: boolean) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}  
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}
 
 function compareNames(a: string, b: string, isAsc: boolean) {
-    a = a.toLowerCase();
-    b = b.toLowerCase();
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}  
+  a = a.toLowerCase();
+  b = b.toLowerCase();
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}
diff --git a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html
index df9c9668..9ad2f376 100644
--- a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html
+++ b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.html
@@ -1,8 +1,9 @@
 <button
-   matTooltip="Manage snapshots"
-   matTooltipClass="custom-tooltip"
-   mat-icon-button
-   class="snapshot-button menu-button"
-   (click)="createSnapshotModal()">
-   <mat-icon>filter_none</mat-icon>
+  matTooltip="Manage snapshots"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="snapshot-button menu-button"
+  (click)="createSnapshotModal()"
+>
+  <mat-icon>filter_none</mat-icon>
 </button>
diff --git a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts
index 92eec731..22998bca 100644
--- a/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts
+++ b/src/app/components/snapshots/snapshot-menu-item/snapshot-menu-item.component.spec.ts
@@ -8,7 +8,7 @@ describe('SnapshotMenuItemComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [SnapshotMenuItemComponent]
+      declarations: [SnapshotMenuItemComponent],
     }).compileComponents();
   }));
 
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 574c4239..acead691 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
@@ -13,7 +13,7 @@ import { Snapshot } from '../../../models/snapshot';
 @Component({
   selector: 'app-snapshot-menu-item',
   templateUrl: './snapshot-menu-item.component.html',
-  styleUrls: ['./snapshot-menu-item.component.scss']
+  styleUrls: ['./snapshot-menu-item.component.scss'],
 })
 export class SnapshotMenuItemComponent implements OnInit {
   @Input('project') project: Project;
@@ -33,26 +33,24 @@ export class SnapshotMenuItemComponent implements OnInit {
       width: '450px',
       data: {
         server: this.server,
-        project: this.project
+        project: this.project,
       },
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
 
-    dialogRef.afterClosed().subscribe(snapshot => {
+    dialogRef.afterClosed().subscribe((snapshot) => {
       if (snapshot) {
         const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot);
 
         const progress = this.progressDialogService.open();
 
-        const subscription = creation.subscribe(
-          (created_snapshot: Snapshot) => {
-            this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
-            progress.close();
-          }
-        );
+        const subscription = creation.subscribe((created_snapshot: Snapshot) => {
+          this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
+          progress.close();
+        });
 
-        progress.afterClosed().subscribe(result => {
+        progress.afterClosed().subscribe((result) => {
           if (result === ProgressDialogComponent.CANCELLED) {
             subscription.unsubscribe();
           }
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 db2301a7..ee985753 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
@@ -1,155 +1,163 @@
 <mat-card>
-    <div class="wrapper">
-        <circle-progress
-            [percent]="computeStatistics.statistics.cpu_usage_percent"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="'CPU usage'"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
+  <div class="wrapper">
+    <circle-progress
+      [percent]="computeStatistics.statistics.cpu_usage_percent"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="'CPU usage'"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
 
-        <circle-progress
-            [percent]="computeStatistics.statistics.disk_usage_percent"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="'Disk usage'"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
+    <circle-progress
+      [percent]="computeStatistics.statistics.disk_usage_percent"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="'Disk usage'"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
 
-        <circle-progress
-            [percent]="computeStatistics.statistics.memory_usage_percent"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="'Memory usage'"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
+    <circle-progress
+      [percent]="computeStatistics.statistics.memory_usage_percent"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="'Memory usage'"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
 
-        <circle-progress
-            [percent]="computeStatistics.statistics.swap_usage_percent"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="'SWAP usage'"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
-    </div>
+    <circle-progress
+      [percent]="computeStatistics.statistics.swap_usage_percent"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="'SWAP usage'"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
+  </div>
 
-    <div class="wrapper">
-        <circle-progress
-            [percent]="computeStatistics.statistics.load_average_percent[0]"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="['Load average', '(last 1 minute)']"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
-        
-        <circle-progress
-            [percent]="computeStatistics.statistics.load_average_percent[1]"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="['Load average', '(last 5 minutes)']"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
+  <div class="wrapper">
+    <circle-progress
+      [percent]="computeStatistics.statistics.load_average_percent[0]"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="['Load average', '(last 1 minute)']"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
 
-        <circle-progress
-            [percent]="computeStatistics.statistics.load_average_percent[2]"
-            [radius]="100"
-            [outerStrokeWidth]="8"
-            [innerStrokeWidth]="6"
-            [outerStrokeColor]="'#0097a7'"
-            [innerStrokeColor]="'#007380'"
-            [animation]="true"
-            [animationDuration]="300"
-            [unitsColor]="'#C0C0C0'"
-            [unitsFontSize]="20"
-            [titleColor]="'#C0C0C0'"
-            [titleFontSize]="30"
-            [subtitle]="['Load average', '(last 15 minutes)']"
-            [subtitleColor]="'#C0C0C0'"
-            [subtitleFontSize]="15"
-        ></circle-progress>
-    </div>
+    <circle-progress
+      [percent]="computeStatistics.statistics.load_average_percent[1]"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="['Load average', '(last 5 minutes)']"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
 
-    <div class="chips-wrapper">
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Memory total: {{formatBytes(computeStatistics.statistics.memory_total)}}</mat-chip>
-        </mat-chip-list>
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Memory used: {{formatBytes(computeStatistics.statistics.memory_used)}}</mat-chip>
-        </mat-chip-list>
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Memory free: {{formatBytes(computeStatistics.statistics.memory_free)}}</mat-chip>
-        </mat-chip-list>
-    </div>
+    <circle-progress
+      [percent]="computeStatistics.statistics.load_average_percent[2]"
+      [radius]="100"
+      [outerStrokeWidth]="8"
+      [innerStrokeWidth]="6"
+      [outerStrokeColor]="'#0097a7'"
+      [innerStrokeColor]="'#007380'"
+      [animation]="true"
+      [animationDuration]="300"
+      [unitsColor]="'#C0C0C0'"
+      [unitsFontSize]="20"
+      [titleColor]="'#C0C0C0'"
+      [titleFontSize]="30"
+      [subtitle]="['Load average', '(last 15 minutes)']"
+      [subtitleColor]="'#C0C0C0'"
+      [subtitleFontSize]="15"
+    ></circle-progress>
+  </div>
 
-    <div class="chips-wrapper">
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Swap total: {{formatBytes(computeStatistics.statistics.swap_total)}}</mat-chip>
-        </mat-chip-list>
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Swap used: {{formatBytes(computeStatistics.statistics.swap_used)}}</mat-chip>
-        </mat-chip-list>
-        <mat-chip-list>
-            <mat-chip color="primary" selected>Swap free: {{formatBytes(computeStatistics.statistics.swap_free)}}</mat-chip>
-        </mat-chip-list>
-    </div>
+  <div class="chips-wrapper">
+    <mat-chip-list>
+      <mat-chip color="primary" selected
+        >Memory total: {{ formatBytes(computeStatistics.statistics.memory_total) }}</mat-chip
+      >
+    </mat-chip-list>
+    <mat-chip-list>
+      <mat-chip color="primary" selected
+        >Memory used: {{ formatBytes(computeStatistics.statistics.memory_used) }}</mat-chip
+      >
+    </mat-chip-list>
+    <mat-chip-list>
+      <mat-chip color="primary" selected
+        >Memory free: {{ formatBytes(computeStatistics.statistics.memory_free) }}</mat-chip
+      >
+    </mat-chip-list>
+  </div>
+
+  <div class="chips-wrapper">
+    <mat-chip-list>
+      <mat-chip color="primary" selected
+        >Swap total: {{ formatBytes(computeStatistics.statistics.swap_total) }}</mat-chip
+      >
+    </mat-chip-list>
+    <mat-chip-list>
+      <mat-chip color="primary" selected>Swap used: {{ formatBytes(computeStatistics.statistics.swap_used) }}</mat-chip>
+    </mat-chip-list>
+    <mat-chip-list>
+      <mat-chip color="primary" selected>Swap free: {{ formatBytes(computeStatistics.statistics.swap_free) }}</mat-chip>
+    </mat-chip-list>
+  </div>
 </mat-card>
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 f0af5557..e7c92924 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
@@ -1,13 +1,13 @@
 .wrapper {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    max-height: 250px!important;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  max-height: 250px !important;
 }
 
 .chips-wrapper {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
 }
diff --git a/src/app/components/system-status/status-chart/status-chart.component.ts b/src/app/components/system-status/status-chart/status-chart.component.ts
index 05647246..cfdd383b 100644
--- a/src/app/components/system-status/status-chart/status-chart.component.ts
+++ b/src/app/components/system-status/status-chart/status-chart.component.ts
@@ -1,28 +1,27 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input } from '@angular/core';
 import { ComputeStatistics } from '../../../models/computeStatistics';
 
-
 @Component({
-    selector: 'app-status-chart',
-    templateUrl: './status-chart.component.html',
-    styleUrls: ['./status-chart.component.scss']
+  selector: 'app-status-chart',
+  templateUrl: './status-chart.component.html',
+  styleUrls: ['./status-chart.component.scss'],
 })
 export class StatusChartComponent implements OnInit {
-    @Input() computeStatistics: ComputeStatistics;
+  @Input() computeStatistics: ComputeStatistics;
 
-    constructor() {}
+  constructor() {}
 
-    ngOnInit() {}
+  ngOnInit() {}
 
-    formatBytes(bytes, decimals = 2) {
-        if (bytes === 0) return '0 Bytes';
-    
-        const k = 1024;
-        const dm = decimals < 0 ? 0 : decimals;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-    
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-    }
+  formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  }
 }
diff --git a/src/app/components/system-status/status-info/status-info.component.html b/src/app/components/system-status/status-info/status-info.component.html
index 3c672e38..89eade4a 100644
--- a/src/app/components/system-status/status-info/status-info.component.html
+++ b/src/app/components/system-status/status-info/status-info.component.html
@@ -1,7 +1,5 @@
-<div *ngIf="!computeStatistics.length">
-    Statistics not loaded
-</div>
-<div *ngFor='let statistics of computeStatistics'>
-    {{statistics.compute_name}}
-    <app-status-chart [computeStatistics]="statistics"></app-status-chart>
+<div *ngIf="!computeStatistics.length">Statistics not loaded</div>
+<div *ngFor="let statistics of computeStatistics">
+  {{ statistics.compute_name }}
+  <app-status-chart [computeStatistics]="statistics"></app-status-chart>
 </div>
diff --git a/src/app/components/system-status/status-info/status-info.component.ts b/src/app/components/system-status/status-info/status-info.component.ts
index 5d837c99..2b5fb7a6 100644
--- a/src/app/components/system-status/status-info/status-info.component.ts
+++ b/src/app/components/system-status/status-info/status-info.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ComputeService } from '../../../services/compute.service';
 import { ComputeStatistics } from '../../../models/computeStatistics';
@@ -6,42 +6,39 @@ import { ServerService } from '../../../services/server.service';
 import { Server } from '../../../models/server';
 import { ToasterService } from '../../../services/toaster.service';
 
-
 @Component({
-    selector: 'app-status-info',
-    templateUrl: './status-info.component.html',
-    styleUrls: ['./status-info.component.scss']
+  selector: 'app-status-info',
+  templateUrl: './status-info.component.html',
+  styleUrls: ['./status-info.component.scss'],
 })
 export class StatusInfoComponent implements OnInit {
-    public serverId: string = "";
-    public computeStatistics: ComputeStatistics[] = [];
-    public connectionFailed: boolean;
+  public serverId: string = '';
+  public computeStatistics: ComputeStatistics[] = [];
+  public connectionFailed: boolean;
 
-    constructor(
-        private route: ActivatedRoute,
-        private computeService: ComputeService,
-        private serverService: ServerService,
-        private toasterService: ToasterService
-    ) {}
+  constructor(
+    private route: ActivatedRoute,
+    private computeService: ComputeService,
+    private serverService: ServerService,
+    private toasterService: ToasterService
+  ) {}
 
-    ngOnInit() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-        this.getStatistics();
-    }
+  ngOnInit() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+    this.getStatistics();
+  }
 
-    getStatistics() {
-        this.serverService.get(Number(this.serverId)).then((server: Server) => {
-            this.computeService.getStatistics(server).subscribe((statistics: ComputeStatistics[]) => {
-                this.computeStatistics = statistics;
-                setTimeout(() => 
-                {
-                    this.getStatistics();
-                },
-                20000);
-            }),
-            error => {
-                this.connectionFailed = true;
-            }
-        });
-    }
+  getStatistics() {
+    this.serverService.get(Number(this.serverId)).then((server: Server) => {
+      this.computeService.getStatistics(server).subscribe((statistics: ComputeStatistics[]) => {
+        this.computeStatistics = statistics;
+        setTimeout(() => {
+          this.getStatistics();
+        }, 20000);
+      }),
+        (error) => {
+          this.connectionFailed = true;
+        };
+    });
+  }
 }
diff --git a/src/app/components/system-status/system-status.component.html b/src/app/components/system-status/system-status.component.html
index d47624d2..28158e13 100644
--- a/src/app/components/system-status/system-status.component.html
+++ b/src/app/components/system-status/system-status.component.html
@@ -1,10 +1,10 @@
 <div class="content">
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">System status</h1>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-status-info></app-status-info>
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">System status</h1>
     </div>
+  </div>
+  <div class="default-content">
+    <app-status-info></app-status-info>
+  </div>
 </div>
diff --git a/src/app/components/system-status/system-status.component.ts b/src/app/components/system-status/system-status.component.ts
index f2915a0a..0b476298 100644
--- a/src/app/components/system-status/system-status.component.ts
+++ b/src/app/components/system-status/system-status.component.ts
@@ -1,20 +1,17 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-
 @Component({
-    selector: 'app-system-status',
-    templateUrl: './system-status.component.html',
-    styleUrls: ['./system-status.component.scss']
+  selector: 'app-system-status',
+  templateUrl: './system-status.component.html',
+  styleUrls: ['./system-status.component.scss'],
 })
 export class SystemStatusComponent implements OnInit {
-    public serverId: string = "";
+  public serverId: string = '';
 
-    constructor(
-        private route: ActivatedRoute
-    ) {}
+  constructor(private route: ActivatedRoute) {}
 
-    ngOnInit() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-    }
+  ngOnInit() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+  }
 }
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 4ef68e4a..617ccd2e 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
@@ -1,38 +1,45 @@
 <div class="title-container">
   <h1 mat-dialog-title>Add a node</h1>
-  <button mat-button class="top-button" color="accent" (click)="onNoClick()" routerLink="/server/{{server.id}}/preferences">Go to template preferences</button>
+  <button
+    mat-button
+    class="top-button"
+    color="accent"
+    (click)="onNoClick()"
+    routerLink="/server/{{ server.id }}/preferences"
+  >
+    Go to template preferences
+  </button>
 </div>
 <div mat-dialog-content class="content">
   <div class="title-container">
     <h6>Template</h6>
   </div>
   <mat-form-field class="form-field" floatPlaceholder="never">
-    <input matInput
-    placeholder="Search by name"
-    [(ngModel)]="searchText"
-    [ngModelOptions]="{standalone: true}">
+    <input matInput placeholder="Search by name" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" />
   </mat-form-field>
   <mat-form-field class="form-field">
-      <mat-select 
-        [ngModelOptions]="{standalone: true}"  
-        placeholder="Filter templates by type"
-        (selectionChange)="filterTemplates($event)"
-        [(ngModel)]="selectedType">
-        <mat-option *ngFor="let type of templateTypes" [value]="type">
-          {{type}}
-        </mat-option>
-      </mat-select>
+    <mat-select
+      [ngModelOptions]="{ standalone: true }"
+      placeholder="Filter templates by type"
+      (selectionChange)="filterTemplates($event)"
+      [(ngModel)]="selectedType"
+    >
+      <mat-option *ngFor="let type of templateTypes" [value]="type">
+        {{ type }}
+      </mat-option>
+    </mat-select>
   </mat-form-field>
   <mat-form-field class="form-field">
-      <mat-select 
-        [ngModelOptions]="{standalone: true}"  
-        placeholder="Choose template"
-        (selectionChange)="chooseTemplate($event)"
-        [(ngModel)]="selectedTemplate">
-        <mat-option *ngFor="let template of filteredTemplates | templatefilter: searchText" [value]="template">
-          {{template.name}}
-        </mat-option>
-      </mat-select>
+    <mat-select
+      [ngModelOptions]="{ standalone: true }"
+      placeholder="Choose template"
+      (selectionChange)="chooseTemplate($event)"
+      [(ngModel)]="selectedTemplate"
+    >
+      <mat-option *ngFor="let template of filteredTemplates | templatefilter: searchText" [value]="template">
+        {{ template.name }}
+      </mat-option>
+    </mat-select>
   </mat-form-field>
 
   <div class="title-container">
@@ -43,16 +50,18 @@
       <input type="text" matInput formControlName="name" placeholder="Enter name (default is taken from template)" />
     </mat-form-field> -->
     <mat-form-field class="form-field">
-      <input type="number" matInput formControlName="numberOfNodes" placeholder="Enter number of nodes (default value is 1)" />
+      <input
+        type="number"
+        matInput
+        formControlName="numberOfNodes"
+        placeholder="Enter number of nodes (default value is 1)"
+      />
     </mat-form-field>
   </form>
-  <mat-select 
-    *ngIf="selectedTemplate"
-    placeholder="Choose server for node" 
-    [(value)]="selectedTemplate.compute_id">
-      <mat-option *ngFor="let type of nodeServers" [value]="type">
-          {{type}}
-      </mat-option>
+  <mat-select *ngIf="selectedTemplate" placeholder="Choose server for node" [(value)]="selectedTemplate.compute_id">
+    <mat-option *ngFor="let type of nodeServers" [value]="type">
+      {{ type }}
+    </mat-option>
   </mat-select>
 
   <div class="title-container">
@@ -61,15 +70,17 @@
   <form [formGroup]="positionForm">
     Left:&nbsp;
     <mat-form-field>
-      <input matInput type="number" formControlName="left"/>
+      <input matInput type="number" formControlName="left" />
     </mat-form-field>
     Top:&nbsp;
     <mat-form-field>
-      <input matInput type="number" formControlName="top"/>
+      <input matInput type="number" formControlName="top" />
     </mat-form-field>
   </form>
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
-  <button class="addButton" mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+  <button class="addButton" mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">
+    Add
+  </button>
 </div>
diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.scss b/src/app/components/template/template-list-dialog/template-list-dialog.component.scss
index 62ee0283..74c3f44a 100644
--- a/src/app/components/template/template-list-dialog/template-list-dialog.component.scss
+++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.scss
@@ -42,7 +42,7 @@ mat-table {
 }
 
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-thumb {
diff --git a/src/app/components/template/template-list-dialog/template-list-dialog.component.spec.ts b/src/app/components/template/template-list-dialog/template-list-dialog.component.spec.ts
index 2d15ef12..f61c35f7 100644
--- a/src/app/components/template/template-list-dialog/template-list-dialog.component.spec.ts
+++ b/src/app/components/template/template-list-dialog/template-list-dialog.component.spec.ts
@@ -8,7 +8,7 @@ describe('TemplateListDialogComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TemplateListDialogComponent]
+      declarations: [TemplateListDialogComponent],
     }).compileComponents();
   }));
 
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 337e0338..9444d818 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
@@ -14,12 +14,24 @@ import { NonNegativeValidator } from '../../../validators/non-negative-validator
 @Component({
   selector: 'app-template-list-dialog',
   templateUrl: './template-list-dialog.component.html',
-  styleUrls: ['./template-list-dialog.component.scss']
+  styleUrls: ['./template-list-dialog.component.scss'],
 })
 export class TemplateListDialogComponent implements OnInit {
   server: Server;
   project: Project;
-  templateTypes: string[] = ['cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu'];
+  templateTypes: string[] = [
+    'cloud',
+    'ethernet_hub',
+    'ethernet_switch',
+    'docker',
+    'dynamips',
+    'vpcs',
+    'traceng',
+    'virtualbox',
+    'vmware',
+    'iou',
+    'qemu',
+  ];
   selectedType: string;
   configurationForm: FormGroup;
   positionForm: FormGroup;
@@ -36,17 +48,17 @@ export class TemplateListDialogComponent implements OnInit {
     private formBuilder: FormBuilder,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private toasterService: ToasterService,
-    private nonNegativeValidator: NonNegativeValidator,
+    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, nonNegativeValidator.get])
+      numberOfNodes: new FormControl(1, [Validators.required, nonNegativeValidator.get]),
     });
     this.positionForm = this.formBuilder.group({
       top: new FormControl(0, Validators.required),
-      left: new FormControl(0, Validators.required)
+      left: new FormControl(0, Validators.required),
     });
   }
 
@@ -62,15 +74,19 @@ export class TemplateListDialogComponent implements OnInit {
   }
 
   filterTemplates(event) {
-    let temporaryTemplates = this.templates.filter( item => {
+    let temporaryTemplates = this.templates.filter((item) => {
       return item.name.toLowerCase().includes(this.searchText.toLowerCase());
     });
-    this.filteredTemplates = temporaryTemplates.filter(t => t.template_type === event.value.toString());
+    this.filteredTemplates = temporaryTemplates.filter((t) => t.template_type === event.value.toString());
   }
 
   chooseTemplate(event) {
     this.selectedTemplate = event.value;
-    if (this.selectedTemplate.template_type === 'cloud' || this.selectedTemplate.template_type === 'ethernet_hub' || this.selectedTemplate.template_type === 'ethernet_switch') {
+    if (
+      this.selectedTemplate.template_type === 'cloud' ||
+      this.selectedTemplate.template_type === 'ethernet_hub' ||
+      this.selectedTemplate.template_type === 'ethernet_switch'
+    ) {
       this.selectedTemplate.compute_id = 'local';
     }
     // this.configurationForm.controls['name'].setValue(this.selectedTemplate.default_name_format);
@@ -84,8 +100,13 @@ export class TemplateListDialogComponent implements OnInit {
     } else {
       let x: number = this.positionForm.get('left').value;
       let y: number = this.positionForm.get('top').value;
-      if (x>(this.project.scene_width/2) || x<-(this.project.scene_width/2) || y>(this.project.scene_height/2) || y<-(this.project.scene_height)) {
-        this.toasterService.error('Please set correct position values.')
+      if (
+        x > this.project.scene_width / 2 ||
+        x < -(this.project.scene_width / 2) ||
+        y > this.project.scene_height / 2 ||
+        y < -this.project.scene_height
+      ) {
+        this.toasterService.error('Please set correct position values.');
       } else {
         let event: NodeAddedEvent = {
           template: this.selectedTemplate,
@@ -93,7 +114,7 @@ export class TemplateListDialogComponent implements OnInit {
           // name: this.configurationForm.get('name').value,
           numberOfNodes: this.configurationForm.get('numberOfNodes').value,
           x: x,
-          y: y
+          y: y,
         };
         this.dialogRef.close(event);
       }
@@ -102,9 +123,9 @@ export class TemplateListDialogComponent implements OnInit {
 }
 
 export interface NodeAddedEvent {
-  template: Template,
-  server: string,
-  name?: string,
+  template: Template;
+  server: string;
+  name?: string;
   numberOfNodes: number;
   x: number;
   y: number;
@@ -118,7 +139,7 @@ export class TemplateDatabase {
   }
 
   constructor(private server: Server, private templateService: TemplateService) {
-    this.templateService.list(this.server).subscribe(templates => {
+    this.templateService.list(this.server).subscribe((templates) => {
       this.dataChange.next(templates);
     });
   }
diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html
index 4c18af6a..917e30e2 100644
--- a/src/app/components/template/template.component.html
+++ b/src/app/components/template/template.component.html
@@ -1,72 +1,72 @@
 <button
-   class="addNode"
-   matTooltip="Add a node"
-   matTooltipClass="custom-tooltip"
-   mat-icon-button
-   class="menu-button add-menu-button"
-   [matMenuTriggerFor]="mainMenu">
-    <mat-icon>add</mat-icon>
+  class="addNode"
+  matTooltip="Add a node"
+  matTooltipClass="custom-tooltip"
+  mat-icon-button
+  class="menu-button add-menu-button"
+  [matMenuTriggerFor]="mainMenu"
+>
+  <mat-icon>add</mat-icon>
 </button>
 
 <mat-menu #mainMenu="matMenu">
-    <button mat-menu-item (click)="openDialog()">
-        <mat-icon>add_to_queue</mat-icon>
-        <span>Open dialog to configure</span>
-    </button>
+  <button mat-menu-item (click)="openDialog()">
+    <mat-icon>add_to_queue</mat-icon>
+    <span>Open dialog to configure</span>
+  </button>
 
-    <mat-form-field
-        (click)="$event.stopPropagation()"
-        class="form-field"
-        floatPlaceholder="never">
-        <input
-            matInput
-            placeholder="Search by name"
-            (keyup)="filterTemplates($event)"
-            [(ngModel)]="searchText"
-            [ngModelOptions]="{standalone: true}">
-    </mat-form-field>
-    <mat-form-field (click)="$event.stopPropagation()" class="form-field">
-        <mat-select
-            [ngModelOptions]="{standalone: true}"
-            placeholder="Filter templates by type"
-            (selectionChange)="filterTemplates($event)"
-            [(ngModel)]="selectedType">
-            <mat-option *ngFor="let type of templateTypes" [value]="type">
-                {{type}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
+  <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
+    <input
+      matInput
+      placeholder="Search by name"
+      (keyup)="filterTemplates($event)"
+      [(ngModel)]="searchText"
+      [ngModelOptions]="{ standalone: true }"
+    />
+  </mat-form-field>
+  <mat-form-field (click)="$event.stopPropagation()" class="form-field">
+    <mat-select
+      [ngModelOptions]="{ standalone: true }"
+      placeholder="Filter templates by type"
+      (selectionChange)="filterTemplates($event)"
+      [(ngModel)]="selectedType"
+    >
+      <mat-option *ngFor="let type of templateTypes" [value]="type">
+        {{ type }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
 
-    <div class="menu">
-        <div class="templateList">
-            <mat-list-item *ngFor="let template of filteredTemplates;let i = index">
-                <span *ngIf="i%4===0" class="templateRow">
-                    <span class="templateIcon">
-                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
-                            <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])"/>
-                        </div>
-                        <div class="templateText">{{filteredTemplates[i].name}}</div>
-                    </span>
-                    <span *ngIf="filteredTemplates[i+1]" class="templateIcon">
-                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i+1])">
-                            <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i+1])"/>
-                        </div>
-                        <div class="templateText">{{filteredTemplates[i+1].name}}</div>
-                    </span>
-                    <span *ngIf="filteredTemplates[i+2]" class="templateIcon">
-                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i+2])">
-                            <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i+2])"/>
-                        </div>
-                        <div class="templateText">{{filteredTemplates[i+2].name}}</div>
-                    </span>
-                    <span *ngIf="filteredTemplates[i+3]" class="templateIcon">
-                        <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i+3])">
-                            <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i+3])"/>
-                        </div>
-                        <div class="templateText">{{filteredTemplates[i+3].name}}</div>
-                    </span>
-                </span>
-            </mat-list-item>
-        </div>
+  <div class="menu">
+    <div class="templateList">
+      <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
+        <span *ngIf="i % 4 === 0" class="templateRow">
+          <span class="templateIcon">
+            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
+            </div>
+            <div class="templateText">{{ filteredTemplates[i].name }}</div>
+          </span>
+          <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
+            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
+            </div>
+            <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
+          </span>
+          <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
+            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
+            </div>
+            <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
+          </span>
+          <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
+            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
+            </div>
+            <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
+          </span>
+        </span>
+      </mat-list-item>
     </div>
+  </div>
 </mat-menu>
diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss
index 23c26180..bded2894 100644
--- a/src/app/components/template/template.component.scss
+++ b/src/app/components/template/template.component.scss
@@ -1,55 +1,55 @@
 ::ng-deep .mat-menu-panel {
-    max-width: 400px;
-    max-height: 500px;
+  max-width: 400px;
+  max-height: 500px;
 }
 
 .menu {
-    width: 100%;
-    overflow-y: scroll;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  width: 100%;
+  overflow-y: scroll;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
- 
+
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
- 
+
 ::-webkit-scrollbar-thumb {
-    background-color: darkgrey;
-    outline: 1px solid #263238;
+  background-color: darkgrey;
+  outline: 1px solid #263238;
 }
 
 .form-field {
-    width: 90%;
-    margin-left: 5%;
-    margin-right: 5%;
+  width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
 }
 
 .image {
-    width: 65px;
-    height: 65px;   
-    filter: invert(0);
-    --webkit-filter: invert(0)!important;
+  width: 65px;
+  height: 65px;
+  filter: invert(0);
+  --webkit-filter: invert(0) !important;
 }
 
 .templateList {
-    width: 100%;
+  width: 100%;
 }
 
 .templateRow {
-    display: flex;
-    margin-bottom: 10px;
+  display: flex;
+  margin-bottom: 10px;
 }
 
 .templateText {
-    word-wrap: break-word;
+  word-wrap: break-word;
 }
 
 .templateIcon {
-    width: 80px!important;
-    padding: 10px;
+  width: 80px !important;
+  padding: 10px;
 }
diff --git a/src/app/components/template/template.component.spec.ts b/src/app/components/template/template.component.spec.ts
index 07ea008b..4f1c9055 100644
--- a/src/app/components/template/template.component.spec.ts
+++ b/src/app/components/template/template.component.spec.ts
@@ -8,7 +8,7 @@ describe('TemplateComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TemplateComponent]
+      declarations: [TemplateComponent],
     }).compileComponents();
   }));
 
diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts
index a6f0f09b..bb93b7d6 100644
--- a/src/app/components/template/template.component.ts
+++ b/src/app/components/template/template.component.ts
@@ -13,7 +13,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-template',
   templateUrl: './template.component.html',
-  styleUrls: ['./template.component.scss']
+  styleUrls: ['./template.component.scss'],
 })
 export class TemplateComponent implements OnInit, OnDestroy {
   @Input() server: Server;
@@ -23,7 +23,20 @@ export class TemplateComponent implements OnInit, OnDestroy {
   templates: Template[] = [];
   filteredTemplates: Template[] = [];
   searchText: string = '';
-  templateTypes: string[] = ['all', 'cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu'];
+  templateTypes: string[] = [
+    'all',
+    'cloud',
+    'ethernet_hub',
+    'ethernet_switch',
+    'docker',
+    'dynamips',
+    'vpcs',
+    'traceng',
+    'virtualbox',
+    'vmware',
+    'iou',
+    'qemu',
+  ];
   selectedType: string;
 
   movementX: number;
@@ -59,14 +72,14 @@ export class TemplateComponent implements OnInit, OnDestroy {
   }
 
   filterTemplates(event) {
-    let temporaryTemplates = this.templates.filter(item => {
+    let temporaryTemplates = this.templates.filter((item) => {
       return item.name.toLowerCase().includes(this.searchText.toLowerCase());
     });
 
     if (this.selectedType === 'all' || !this.selectedType) {
       this.filteredTemplates = temporaryTemplates;
-    } else  {
-      this.filteredTemplates = temporaryTemplates.filter(t => t.template_type === this.selectedType);
+    } else {
+      this.filteredTemplates = temporaryTemplates.filter((t) => t.template_type === this.selectedType);
     }
     this.sortTemplates();
   }
@@ -83,15 +96,15 @@ export class TemplateComponent implements OnInit, OnDestroy {
 
   dragEnd(ev, template: Template) {
     this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => {
-      let width = +symbolSvg.split("width=\"")[1].split("\"")[0] ? +symbolSvg.split("width=\"")[1].split("\"")[0] : 0;
+      let width = +symbolSvg.split('width="')[1].split('"')[0] ? +symbolSvg.split('width="')[1].split('"')[0] : 0;
       let scale = this.scaleService.getScale();
 
       let nodeAddedEvent: NodeAddedEvent = {
         template: template,
         server: 'local',
         numberOfNodes: 1,
-        x: (this.startX + ev.x - this.project.scene_width/2 - (width/2)) * scale + window.scrollX ,
-        y: (this.startY + ev.y - this.project.scene_height/2) * scale + window.scrollY
+        x: (this.startX + ev.x - this.project.scene_width / 2 - width / 2) * scale + window.scrollX,
+        y: (this.startY + ev.y - this.project.scene_height / 2) * scale + window.scrollY,
       };
       this.onNodeCreation.emit(nodeAddedEvent);
     });
@@ -102,10 +115,10 @@ export class TemplateComponent implements OnInit, OnDestroy {
       width: '600px',
       data: {
         server: this.server,
-        project: this.project
+        project: this.project,
       },
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
 
     dialogRef.afterClosed().subscribe((nodeAddedEvent: NodeAddedEvent) => {
diff --git a/src/app/components/topology-summary/topology-summary.component.html b/src/app/components/topology-summary/topology-summary.component.html
index 601f2ca6..652d5deb 100644
--- a/src/app/components/topology-summary/topology-summary.component.html
+++ b/src/app/components/topology-summary/topology-summary.component.html
@@ -1,97 +1,98 @@
 <div
-    *ngIf="isDraggingEnabled"
-    (document:mousemove)="dragWidget($event)"
-    (document:mouseup)="toggleDragging(false)">
-</div>
+  *ngIf="isDraggingEnabled"
+  (document:mousemove)="dragWidget($event)"
+  (document:mouseup)="toggleDragging(false)"
+></div>
 <div
-    class="summaryWrapper"
-    (mousedown)="toggleDragging(true)"
-    *ngIf="projectsStatistics"
-    [ngStyle]="style"
-    [ngClass]="{lightTheme: isLightThemeEnabled}"
-    mwlResizable
-    [validateResize]="validate"
-    [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
-    [enableGhostResize]="true"
-    (resizeStart)="toggleDragging(false)"
-    (resizeEnd)="onResizeEnd($event)">
-    <div class="summaryHeader">
-      <mat-tab-group>
-        <mat-tab
-           (click)="toggleTopologyVisibility(true)"
-           label="Map topology">
-           <div class="tabContent">
-             <div class="summaryFilters">
-                 <mat-select placeholder="Filter nodes" multiple>
-                     <mat-optgroup label="Status filter">
-                       <mat-option value="started" (onSelectionChange)="applyStatusFilter('started')">started</mat-option>
-                       <mat-option value="suspended" (onSelectionChange)="applyStatusFilter('suspended')">suspended</mat-option>
-                       <mat-option value="stopped" (onSelectionChange)="applyStatusFilter('stopped')">stopped</mat-option>
-                     </mat-optgroup>
-                     <mat-optgroup label="Capture filter">
-                       <mat-option value="capture" (onSelectionChange)="applyCaptureFilter('capture')">active capture(s)</mat-option>
-                       <mat-option value="packet" (onSelectionChange)="applyCaptureFilter('packet')">active packet captures</mat-option>
-                     </mat-optgroup>
-                 </mat-select>
-             </div>
-             <div class="summarySorting">
-                 <mat-select (selectionChange)="setSortingOrder()" placeholder="Sorting" [(value)]="sortingOrder">
-                     <mat-option value="asc">sort by name ascending</mat-option>
-                     <mat-option value="desc">sort by name descending</mat-option>
-                 </mat-select>
-             </div>
-             <mat-divider class="divider"></mat-divider>
-             <div
-                 [ngStyle]="styleInside"
-                 class="summaryContent">
-                 <div class="nodeRow" *ngFor="let node of filteredNodes">
-                     <div>
-                         <svg *ngIf="node.status==='started'" width="10" height="10">
-                              <rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
-                         </svg>
-                         <svg *ngIf="node.status==='suspended'" width="10" height="10">
-                              <rect class="status_suspended" x="0" y="0" width="10" height="10" fill="yellow"></rect>
-                         </svg>
-                         <svg *ngIf="node.status==='stopped'" width="10" height="10">
-                              <rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
-                         </svg>
-                         {{node.name}}
-                     </div>
-                     <div *ngIf="node.console!=null && node.console!=undefined && node.console_type!='none'">
-                         {{node.console_type}} {{node.console_host}}:{{node.console}}
-                     </div>
-                     <div *ngIf="node.console===null || node.console===undefined || node.console_type==='none'">
-                         none
-                     </div>
-                 </div>
-             </div>
-           </div>
-        </mat-tab>
-        <mat-tab
-           (click)="toggleTopologyVisibility(false)"
-           label="Servers">
-           <div class="tabContent">
-             <div class="summaryContentServers">
-                 <div class="nodeRow" *ngFor="let compute of computes">
-                     <div>
-                         <svg *ngIf="compute.connected" width="10" height="10">
-                              <rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
-                         </svg>
-                         <svg *ngIf="!compute.connected" width="10" height="10">
-                              <rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
-                         </svg>
-                         {{compute.name}}
-                     </div>
-                     <div>
-                         {{compute.host}}
-                     </div>
-                     <div>
-                         {{server.location}}
-                     </div>
-                 </div>
-             </div>
-           </div>
-        </mat-tab>
-      </mat-tab-group>
-    </div>
+  class="summaryWrapper"
+  (mousedown)="toggleDragging(true)"
+  *ngIf="projectsStatistics"
+  [ngStyle]="style"
+  [ngClass]="{ lightTheme: isLightThemeEnabled }"
+  mwlResizable
+  [validateResize]="validate"
+  [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
+  [enableGhostResize]="true"
+  (resizeStart)="toggleDragging(false)"
+  (resizeEnd)="onResizeEnd($event)"
+>
+  <div class="summaryHeader">
+    <mat-tab-group>
+      <mat-tab (click)="toggleTopologyVisibility(true)" label="Map topology">
+        <div class="tabContent">
+          <div class="summaryFilters">
+            <mat-select placeholder="Filter nodes" multiple>
+              <mat-optgroup label="Status filter">
+                <mat-option value="started" (onSelectionChange)="applyStatusFilter('started')">started</mat-option>
+                <mat-option value="suspended" (onSelectionChange)="applyStatusFilter('suspended')"
+                  >suspended</mat-option
+                >
+                <mat-option value="stopped" (onSelectionChange)="applyStatusFilter('stopped')">stopped</mat-option>
+              </mat-optgroup>
+              <mat-optgroup label="Capture filter">
+                <mat-option value="capture" (onSelectionChange)="applyCaptureFilter('capture')"
+                  >active capture(s)</mat-option
+                >
+                <mat-option value="packet" (onSelectionChange)="applyCaptureFilter('packet')"
+                  >active packet captures</mat-option
+                >
+              </mat-optgroup>
+            </mat-select>
+          </div>
+          <div class="summarySorting">
+            <mat-select (selectionChange)="setSortingOrder()" placeholder="Sorting" [(value)]="sortingOrder">
+              <mat-option value="asc">sort by name ascending</mat-option>
+              <mat-option value="desc">sort by name descending</mat-option>
+            </mat-select>
+          </div>
+          <mat-divider class="divider"></mat-divider>
+          <div [ngStyle]="styleInside" class="summaryContent">
+            <div class="nodeRow" *ngFor="let node of filteredNodes">
+              <div>
+                <svg *ngIf="node.status === 'started'" width="10" height="10">
+                  <rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
+                </svg>
+                <svg *ngIf="node.status === 'suspended'" width="10" height="10">
+                  <rect class="status_suspended" x="0" y="0" width="10" height="10" fill="yellow"></rect>
+                </svg>
+                <svg *ngIf="node.status === 'stopped'" width="10" height="10">
+                  <rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
+                </svg>
+                {{ node.name }}
+              </div>
+              <div *ngIf="node.console != null && node.console != undefined && node.console_type != 'none'">
+                {{ node.console_type }} {{ node.console_host }}:{{ node.console }}
+              </div>
+              <div *ngIf="node.console === null || node.console === undefined || node.console_type === 'none'">
+                none
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab (click)="toggleTopologyVisibility(false)" label="Servers">
+        <div class="tabContent">
+          <div class="summaryContentServers">
+            <div class="nodeRow" *ngFor="let compute of computes">
+              <div>
+                <svg *ngIf="compute.connected" width="10" height="10">
+                  <rect class="status_started" x="0" y="0" width="10" height="10" fill="green"></rect>
+                </svg>
+                <svg *ngIf="!compute.connected" width="10" height="10">
+                  <rect class="status_stopped" x="0" y="0" width="10" height="10" fill="red"></rect>
+                </svg>
+                {{ compute.name }}
+              </div>
+              <div>
+                {{ compute.host }}
+              </div>
+              <div>
+                {{ server.location }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
 </div>
diff --git a/src/app/components/topology-summary/topology-summary.component.scss b/src/app/components/topology-summary/topology-summary.component.scss
index e47673b7..4cef7500 100644
--- a/src/app/components/topology-summary/topology-summary.component.scss
+++ b/src/app/components/topology-summary/topology-summary.component.scss
@@ -1,133 +1,133 @@
 @media screen and (max-width: 600px) {
-    .summaryWrapper {
-        visibility: hidden;
-    }
+  .summaryWrapper {
+    visibility: hidden;
+  }
 }
 
 mat-tab-group {
-    width: 100%;
+  width: 100%;
 }
 
 .summaryWrapper {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    position: fixed;
-    top: 60px;
-    right: 0px;
-    height: 400px;
-    width: 320px;
-    background: #263238;
-    color: white;
-    overflow: hidden;
-    font-size: 12px;
-    margin: 20px;
-    border-radius: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  position: fixed;
+  top: 60px;
+  right: 0px;
+  height: 400px;
+  width: 320px;
+  background: #263238;
+  color: white;
+  overflow: hidden;
+  font-size: 12px;
+  margin: 20px;
+  border-radius: 8px;
 }
 
 .lightTheme {
-    background-color: rgba(244, 248, 252, 0.95);
-    color: black;
-    margin: 20px;
-    border-radius: 8px;
+  background-color: rgba(244, 248, 252, 0.95);
+  color: black;
+  margin: 20px;
+  border-radius: 8px;
 }
 
 .summaryHeaderMenu {
-    height: 24px;
+  height: 24px;
 }
 
 .summaryHeader {
-    width: 100%;
-    display: flex;
+  width: 100%;
+  display: flex;
 }
 
 .summaryFilters {
-    height: 25px;
-    margin-left: 5px;
-    margin-right: 5px;
+  height: 25px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .summarySorting {
-    height: 25px;
-    margin-left: 5px;
-    margin-right: 5px;
+  height: 25px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .tabContent {
-   padding: 10px;
+  padding: 10px;
 }
 
 .summaryContent {
-    overflow: auto;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  overflow: auto;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 .summaryContentServers {
-    max-height: 350px;
-    overflow: auto;
-    scrollbar-color: darkgrey #263238;
-    scrollbar-width: thin;
+  max-height: 350px;
+  overflow: auto;
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
 }
 
 .titleButton {
-    margin-left: 5px;
-    margin-top: 4px;
-    outline: none;
-    border-radius: 0px;
+  margin-left: 5px;
+  margin-top: 4px;
+  outline: none;
+  border-radius: 0px;
 }
 
 .marked {
-    color: #0097a7;
-    border-bottom: 2px solid #0097a7;
+  color: #0097a7;
+  border-bottom: 2px solid #0097a7;
 }
 
 .divider {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    width: 100%;
-    height: 2px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  width: 100%;
+  height: 2px;
 }
 
 .nodeRow {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding-right: 5px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 5px;
 }
 
 ::-webkit-scrollbar {
-    width: 0.5em;
+  width: 0.5em;
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: darkgrey;
-    outline: 1px solid #263238;
+  background-color: darkgrey;
+  outline: 1px solid #263238;
 }
 
 .radio-group-wrapper {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
 .radio-group {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .closeButton {
-    cursor: pointer;
-    font-size: 24px;
-    margin-top: 8px;
-    margin-right: 5px;
+  cursor: pointer;
+  font-size: 24px;
+  margin-top: 8px;
+  margin-right: 5px;
 }
 
 .filterBox {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .notvisible {
-    display: none;
+  display: none;
 }
diff --git a/src/app/components/topology-summary/topology-summary.component.spec.ts b/src/app/components/topology-summary/topology-summary.component.spec.ts
index 96cedfc0..8a32fb05 100644
--- a/src/app/components/topology-summary/topology-summary.component.spec.ts
+++ b/src/app/components/topology-summary/topology-summary.component.spec.ts
@@ -1,4 +1,4 @@
-import { TopologySummaryComponent } from "./topology-summary.component";
+import { TopologySummaryComponent } from './topology-summary.component';
 import { ComponentFixture, async, TestBed } from '@angular/core/testing';
 import { ProjectService } from '../../services/project.service';
 import { MockedProjectService } from '../../services/project.service.spec';
@@ -20,147 +20,132 @@ import { ComputeService } from '../../services/compute.service';
 import { LinksDataSource } from '../../cartography/datasources/links-datasource';
 
 export class MockedComputeService {
-    getComputes(server: Server) {
-        return of([]);
-    }
+  getComputes(server: Server) {
+    return of([]);
+  }
 }
 
 describe('TopologySummaryComponent', () => {
-    let component: TopologySummaryComponent;
-    let fixture: ComponentFixture<TopologySummaryComponent>;
-    let mockedProjectService: MockedProjectService = new MockedProjectService();
-    let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
-    let mockedComputeService: MockedComputeService = new MockedComputeService();
-    let mockedLinksDataSource: MockedLinksDataSource = new MockedLinksDataSource();
-  
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                MatTableModule,
-                MatTooltipModule,
-                MatIconModule,
-                MatSortModule,
-                MatDialogModule,
-                NoopAnimationsModule,
-                RouterTestingModule.withRoutes([])
-            ],
-            providers: [
-                { provide: ProjectService, useValue: mockedProjectService },
-                { provide: NodesDataSource, useValue: mockedNodesDataSource },
-                { provide: ComputeService, useValue: mockedComputeService},
-                { provide: LinksDataSource, useValue: mockedLinksDataSource }
-            ],
-            declarations: [TopologySummaryComponent],
-            schemas: [NO_ERRORS_SCHEMA]
-        }).compileComponents();
-    }));
-  
-    beforeEach(() => {
-        fixture = TestBed.createComponent(TopologySummaryComponent);
-        component = fixture.componentInstance;
-        component.project = { project_id: 1 } as unknown as Project;
-        fixture.detectChanges();
-    });
-  
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  let component: TopologySummaryComponent;
+  let fixture: ComponentFixture<TopologySummaryComponent>;
+  let mockedProjectService: MockedProjectService = new MockedProjectService();
+  let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
+  let mockedComputeService: MockedComputeService = new MockedComputeService();
+  let mockedLinksDataSource: MockedLinksDataSource = new MockedLinksDataSource();
 
-    it('should show only running nodes when filter started applied', () => {
-        component.nodes = [
-            { status: 'started' } as Node,
-            { status: 'stopped' } as Node
-        ];
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatTableModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatSortModule,
+        MatDialogModule,
+        NoopAnimationsModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      providers: [
+        { provide: ProjectService, useValue: mockedProjectService },
+        { provide: NodesDataSource, useValue: mockedNodesDataSource },
+        { provide: ComputeService, useValue: mockedComputeService },
+        { provide: LinksDataSource, useValue: mockedLinksDataSource },
+      ],
+      declarations: [TopologySummaryComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-        component.applyStatusFilter('started');
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopologySummaryComponent);
+    component = fixture.componentInstance;
+    component.project = ({ project_id: 1 } as unknown) as Project;
+    fixture.detectChanges();
+  });
 
-        expect(component.filteredNodes.length).toBe(1);
-        expect(component.filteredNodes[0].status).toBe('started');
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-    it('should show only stopped nodes when filter stopped applied', () => {
-        component.nodes = [
-            { status: 'started' } as Node,
-            { status: 'stopped' } as Node
-        ];
+  it('should show only running nodes when filter started applied', () => {
+    component.nodes = [{ status: 'started' } as Node, { status: 'stopped' } as Node];
 
-        component.applyStatusFilter('stopped');
+    component.applyStatusFilter('started');
 
-        expect(component.filteredNodes.length).toBe(1);
-        expect(component.filteredNodes[0].status).toBe('stopped');
-    });
+    expect(component.filteredNodes.length).toBe(1);
+    expect(component.filteredNodes[0].status).toBe('started');
+  });
 
-    it('should show only suspended nodes when filter suspended applied', () => {
-        component.nodes = [
-            { status: 'started' } as Node,
-            { status: 'stopped' } as Node
-        ];
+  it('should show only stopped nodes when filter stopped applied', () => {
+    component.nodes = [{ status: 'started' } as Node, { status: 'stopped' } as Node];
 
-        component.applyStatusFilter('suspended');
+    component.applyStatusFilter('stopped');
 
-        expect(component.filteredNodes.length).toBe(0);
-    });
+    expect(component.filteredNodes.length).toBe(1);
+    expect(component.filteredNodes[0].status).toBe('stopped');
+  });
 
-    it('should show all nodes when all filters applied', () => {
-        component.nodes = [
-            { status: 'started' } as Node,
-            { status: 'stopped' } as Node
-        ];
+  it('should show only suspended nodes when filter suspended applied', () => {
+    component.nodes = [{ status: 'started' } as Node, { status: 'stopped' } as Node];
 
-        component.applyStatusFilter('suspended');
-        component.applyStatusFilter('started');
-        component.applyStatusFilter('stopped');
+    component.applyStatusFilter('suspended');
 
-        expect(component.filteredNodes.length).toBe(2);
-    });
+    expect(component.filteredNodes.length).toBe(0);
+  });
 
-    it('should show all nodes when no filters applied', () => {
-        component.nodes = [
-            { status: 'started' } as Node,
-            { status: 'stopped' } as Node
-        ];
+  it('should show all nodes when all filters applied', () => {
+    component.nodes = [{ status: 'started' } as Node, { status: 'stopped' } as Node];
 
-        component.applyStatusFilter('suspended');
-        component.applyStatusFilter('started');
-        component.applyStatusFilter('stopped');
+    component.applyStatusFilter('suspended');
+    component.applyStatusFilter('started');
+    component.applyStatusFilter('stopped');
 
-        expect(component.filteredNodes.length).toBe(2);
+    expect(component.filteredNodes.length).toBe(2);
+  });
 
-        component.applyStatusFilter('stopped');
+  it('should show all nodes when no filters applied', () => {
+    component.nodes = [{ status: 'started' } as Node, { status: 'stopped' } as Node];
 
-        expect(component.filteredNodes.length).toBe(1);
+    component.applyStatusFilter('suspended');
+    component.applyStatusFilter('started');
+    component.applyStatusFilter('stopped');
 
-        component.applyStatusFilter('suspended');
-        component.applyStatusFilter('started');
+    expect(component.filteredNodes.length).toBe(2);
 
-        expect(component.filteredNodes.length).toBe(2);
-    });
+    component.applyStatusFilter('stopped');
 
-    it('should sort nodes in correct order', () => {
-        component.nodes = [
-            { status: 'started', name: 'A' } as Node,
-            { status: 'stopped', name: 'B' } as Node,
-            { status: 'stopped', name: 'D' } as Node,
-        ];
-        component.sortingOrder = 'asc';
+    expect(component.filteredNodes.length).toBe(1);
 
-        component.applyFilters();
-        component.setSortingOrder();
+    component.applyStatusFilter('suspended');
+    component.applyStatusFilter('started');
 
-        expect(component.filteredNodes[0].name).toBe('A');
-    });
+    expect(component.filteredNodes.length).toBe(2);
+  });
 
-    it('should sort filtered nodes in correct order', () => {
-        component.nodes = [
-            { status: 'started', name: 'A' } as Node,
-            { status: 'stopped', name: 'B' } as Node,
-            { status: 'stopped', name: 'D' } as Node,
-        ];
-        component.sortingOrder = 'desc';
+  it('should sort nodes in correct order', () => {
+    component.nodes = [
+      { status: 'started', name: 'A' } as Node,
+      { status: 'stopped', name: 'B' } as Node,
+      { status: 'stopped', name: 'D' } as Node,
+    ];
+    component.sortingOrder = 'asc';
 
-        component.applyStatusFilter('stopped');
-        component.setSortingOrder();
+    component.applyFilters();
+    component.setSortingOrder();
 
-        expect(component.filteredNodes[0].name).toBe('D');
-    });
+    expect(component.filteredNodes[0].name).toBe('A');
+  });
+
+  it('should sort filtered nodes in correct order', () => {
+    component.nodes = [
+      { status: 'started', name: 'A' } as Node,
+      { status: 'stopped', name: 'B' } as Node,
+      { status: 'stopped', name: 'D' } as Node,
+    ];
+    component.sortingOrder = 'desc';
+
+    component.applyStatusFilter('stopped');
+    component.setSortingOrder();
+
+    expect(component.filteredNodes[0].name).toBe('D');
+  });
 });
diff --git a/src/app/components/topology-summary/topology-summary.component.ts b/src/app/components/topology-summary/topology-summary.component.ts
index a7891086..d9a723a8 100644
--- a/src/app/components/topology-summary/topology-summary.component.ts
+++ b/src/app/components/topology-summary/topology-summary.component.ts
@@ -1,4 +1,13 @@
-import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitter, ChangeDetectionStrategy } 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';
@@ -12,255 +21,261 @@ import { LinksDataSource } from '../../cartography/datasources/links-datasource'
 import { ResizeEvent } from 'angular-resizable-element';
 import { ThemeService } from '../../services/theme.service';
 
-
 @Component({
-    selector: 'app-topology-summary',
-    templateUrl: './topology-summary.component.html',
-    styleUrls: ['./topology-summary.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Default
+  selector: 'app-topology-summary',
+  templateUrl: './topology-summary.component.html',
+  styleUrls: ['./topology-summary.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class TopologySummaryComponent implements OnInit, OnDestroy {
-    @Input() server: Server;
-    @Input() project: Project;
+  @Input() server: Server;
+  @Input() project: Project;
 
-    @Output() closeTopologySummary = new EventEmitter<boolean>();
+  @Output() closeTopologySummary = new EventEmitter<boolean>();
 
-    public style = { };
-    public styleInside = { height: `280px` };
-    private subscriptions: Subscription[] = [];
-    projectsStatistics: ProjectStatistics;
-    nodes: Node[] = [];
-    filteredNodes: Node[] = [];
-    public sortingOrder: string = 'asc';
-    startedStatusFilterEnabled: boolean = false;
-    suspendedStatusFilterEnabled: boolean = false;
-    stoppedStatusFilterEnabled: boolean = false;
-    captureFilterEnabled: boolean = false;
-    packetFilterEnabled: boolean = false;
-    computes: Compute[] = [];
+  public style = {};
+  public styleInside = { height: `280px` };
+  private subscriptions: Subscription[] = [];
+  projectsStatistics: ProjectStatistics;
+  nodes: Node[] = [];
+  filteredNodes: Node[] = [];
+  public sortingOrder: string = 'asc';
+  startedStatusFilterEnabled: boolean = false;
+  suspendedStatusFilterEnabled: boolean = false;
+  stoppedStatusFilterEnabled: boolean = false;
+  captureFilterEnabled: boolean = false;
+  packetFilterEnabled: boolean = false;
+  computes: Compute[] = [];
 
-    isTopologyVisible: boolean = true;
-    isDraggingEnabled: boolean = false;
-    isLightThemeEnabled: boolean = false;
+  isTopologyVisible: boolean = true;
+  isDraggingEnabled: boolean = false;
+  isLightThemeEnabled: boolean = false;
 
-    constructor(
-        private nodesDataSource: NodesDataSource,
-        private projectService: ProjectService,
-        private computeService: ComputeService,
-        private linksDataSource: LinksDataSource,
-        private themeService: ThemeService
-    ) {}
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private projectService: ProjectService,
+    private computeService: ComputeService,
+    private linksDataSource: LinksDataSource,
+    private themeService: ThemeService
+  ) {}
 
-    ngOnInit() {
-        this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
-        this.subscriptions.push(
-            this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
-                this.nodes = nodes;
-                this.nodes.forEach(n => {
-                    if (n.console_host === '0.0.0.0' || n.console_host === '0:0:0:0:0:0:0:0' || n.console_host === '::') {
-                        n.console_host = this.server.host;
-                    }
-                });
-                if (this.sortingOrder === 'asc') {
-                    this.filteredNodes = nodes.sort(this.compareAsc);
-                } else {
-                    this.filteredNodes = nodes.sort(this.compareDesc);
-                }
-            })
-        );
-
-        this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
-            this.projectsStatistics = stats;
+  ngOnInit() {
+    this.themeService.getActualTheme() === 'light'
+      ? (this.isLightThemeEnabled = true)
+      : (this.isLightThemeEnabled = false);
+    this.subscriptions.push(
+      this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
+        this.nodes = nodes;
+        this.nodes.forEach((n) => {
+          if (n.console_host === '0.0.0.0' || n.console_host === '0:0:0:0:0:0:0:0' || n.console_host === '::') {
+            n.console_host = this.server.host;
+          }
         });
-
-        this.computeService.getComputes(this.server).subscribe((computes) => {
-            this.computes = computes;
-        });
-
-        this.style = { top: '60px', right: '0px', width: '320px', height: '400px'};
-    }
-
-    toggleDragging(value: boolean) {
-        this.isDraggingEnabled = value;
-    }
-
-    dragWidget(event) {
-        let x: number = Number(event.movementX);
-        let y: number = Number(event.movementY);
-
-        let width: number = Number(this.style['width'].split('px')[0]);
-        let height: number = Number(this.style['height'].split('px')[0]);
-        let top: number = Number(this.style['top'].split('px')[0]) + y;
-        if (this.style['left']) {
-            let left: number = Number(this.style['left'].split('px')[0]) + x;
-            this.style = {
-                position: 'fixed',
-                left: `${left}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        } else {
-            let right: number = Number(this.style['right'].split('px')[0]) - x;
-            this.style = {
-                position: 'fixed',
-                right: `${right}px`,
-                top: `${top}px`,
-                width: `${width}px`,
-                height: `${height}px`
-            };
-        }
-    }
-
-    validate(event: ResizeEvent): boolean {
-        if (
-            event.rectangle.width &&
-            event.rectangle.height &&
-            (event.rectangle.width < 290 ||
-            event.rectangle.height < 260)
-        ) {
-            return false;
-        }
-        return true;
-    }
-
-    onResizeEnd(event: ResizeEvent): void {
-        this.style = {
-            position: 'fixed',
-            left: `${event.rectangle.left}px`,
-            top: `${event.rectangle.top}px`,
-            width: `${event.rectangle.width}px`,
-            height: `${event.rectangle.height}px`
-        };
-
-        this.styleInside = {
-            height: `${event.rectangle.height - 120}px`
-        };
-    }
-
-    toggleTopologyVisibility(value: boolean) {
-        this.isTopologyVisible = value;
-    }
-
-    compareAsc(first: Node, second: Node) {
-        if (first.name < second.name) return -1;
-        return 1;
-    }
-
-    compareDesc(first: Node, second: Node) {
-        if (first.name < second.name) return 1;
-        return -1;
-    }
-
-    ngOnDestroy() {
-        this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
-    }
-
-    setSortingOrder() {
         if (this.sortingOrder === 'asc') {
-            this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
+          this.filteredNodes = nodes.sort(this.compareAsc);
         } else {
-            this.filteredNodes = this.filteredNodes.sort(this.compareDesc);
+          this.filteredNodes = nodes.sort(this.compareDesc);
         }
+      })
+    );
+
+    this.projectService.getStatistics(this.server, this.project.project_id).subscribe((stats) => {
+      this.projectsStatistics = stats;
+    });
+
+    this.computeService.getComputes(this.server).subscribe((computes) => {
+      this.computes = computes;
+    });
+
+    this.style = { top: '60px', right: '0px', width: '320px', height: '400px' };
+  }
+
+  toggleDragging(value: boolean) {
+    this.isDraggingEnabled = value;
+  }
+
+  dragWidget(event) {
+    let x: number = Number(event.movementX);
+    let y: number = Number(event.movementY);
+
+    let width: number = Number(this.style['width'].split('px')[0]);
+    let height: number = Number(this.style['height'].split('px')[0]);
+    let top: number = Number(this.style['top'].split('px')[0]) + y;
+    if (this.style['left']) {
+      let left: number = Number(this.style['left'].split('px')[0]) + x;
+      this.style = {
+        position: 'fixed',
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+    } else {
+      let right: number = Number(this.style['right'].split('px')[0]) - x;
+      this.style = {
+        position: 'fixed',
+        right: `${right}px`,
+        top: `${top}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+    }
+  }
+
+  validate(event: ResizeEvent): boolean {
+    if (
+      event.rectangle.width &&
+      event.rectangle.height &&
+      (event.rectangle.width < 290 || event.rectangle.height < 260)
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  onResizeEnd(event: ResizeEvent): void {
+    this.style = {
+      position: 'fixed',
+      left: `${event.rectangle.left}px`,
+      top: `${event.rectangle.top}px`,
+      width: `${event.rectangle.width}px`,
+      height: `${event.rectangle.height}px`,
+    };
+
+    this.styleInside = {
+      height: `${event.rectangle.height - 120}px`,
+    };
+  }
+
+  toggleTopologyVisibility(value: boolean) {
+    this.isTopologyVisible = value;
+  }
+
+  compareAsc(first: Node, second: Node) {
+    if (first.name < second.name) return -1;
+    return 1;
+  }
+
+  compareDesc(first: Node, second: Node) {
+    if (first.name < second.name) return 1;
+    return -1;
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+  }
+
+  setSortingOrder() {
+    if (this.sortingOrder === 'asc') {
+      this.filteredNodes = this.filteredNodes.sort(this.compareAsc);
+    } else {
+      this.filteredNodes = this.filteredNodes.sort(this.compareDesc);
+    }
+  }
+
+  applyStatusFilter(filter: string) {
+    if (filter === 'started') {
+      this.startedStatusFilterEnabled = !this.startedStatusFilterEnabled;
+    } else if (filter === 'stopped') {
+      this.stoppedStatusFilterEnabled = !this.stoppedStatusFilterEnabled;
+    } else if (filter === 'suspended') {
+      this.suspendedStatusFilterEnabled = !this.suspendedStatusFilterEnabled;
+    }
+    this.applyFilters();
+  }
+
+  applyCaptureFilter(filter: string) {
+    if (filter === 'capture') {
+      this.captureFilterEnabled = !this.captureFilterEnabled;
+    } else if (filter === 'packet') {
+      this.packetFilterEnabled = !this.packetFilterEnabled;
+    }
+    this.applyFilters();
+  }
+
+  applyFilters() {
+    let nodes: Node[] = [];
+
+    if (this.startedStatusFilterEnabled) {
+      nodes = nodes.concat(this.nodes.filter((n) => n.status === 'started'));
     }
 
-    applyStatusFilter(filter: string) {
-        if (filter === 'started') {
-            this.startedStatusFilterEnabled = !this.startedStatusFilterEnabled;
-        } else if (filter === 'stopped') {
-            this.stoppedStatusFilterEnabled = !this.stoppedStatusFilterEnabled;
-        } else if (filter === 'suspended') {
-            this.suspendedStatusFilterEnabled = !this.suspendedStatusFilterEnabled;
-        }
-        this.applyFilters();
+    if (this.stoppedStatusFilterEnabled) {
+      nodes = nodes.concat(this.nodes.filter((n) => n.status === 'stopped'));
     }
 
-    applyCaptureFilter(filter: string) {
-        if (filter === 'capture') {
-            this.captureFilterEnabled = !this.captureFilterEnabled;
-        } else if (filter === 'packet') {
-            this.packetFilterEnabled = !this.packetFilterEnabled;
-        }
-        this.applyFilters();
+    if (this.suspendedStatusFilterEnabled) {
+      nodes = nodes.concat(this.nodes.filter((n) => n.status === 'suspended'));
     }
 
-    applyFilters() {
-        let nodes: Node[] = [];
-
-        if (this.startedStatusFilterEnabled) {
-            nodes = nodes.concat(this.nodes.filter(n => n.status === 'started'));
-        }
-
-        if (this.stoppedStatusFilterEnabled) {
-            nodes = nodes.concat(this.nodes.filter(n => n.status === 'stopped'));
-        }
-
-        if (this.suspendedStatusFilterEnabled) {
-            nodes = nodes.concat(this.nodes.filter(n => n.status === 'suspended'));
-        }
-
-        if (!this.startedStatusFilterEnabled && !this.stoppedStatusFilterEnabled && !this.suspendedStatusFilterEnabled) {
-            nodes = nodes.concat(this.nodes);
-        }
-
-        if (this.captureFilterEnabled) {
-            nodes = this.checkCapturing(nodes);
-        }
-
-        if(this.packetFilterEnabled) {
-            nodes = this.checkPacketFilters(nodes);
-        }
-
-        if (this.sortingOrder === 'asc') {
-            this.filteredNodes = nodes.sort(this.compareAsc);
-        } else {
-            this.filteredNodes = nodes.sort(this.compareDesc);
-        }
+    if (!this.startedStatusFilterEnabled && !this.stoppedStatusFilterEnabled && !this.suspendedStatusFilterEnabled) {
+      nodes = nodes.concat(this.nodes);
     }
 
-    checkCapturing(nodes: Node[]): Node[] {
-        let links = this.linksDataSource.getItems();
-        let nodesWithCapturing: string[] = [];
+    if (this.captureFilterEnabled) {
+      nodes = this.checkCapturing(nodes);
+    }
 
-        links.forEach(link => {
-            if (link.capturing) {
-                link.nodes.forEach(node => {
-                    nodesWithCapturing.push(node.node_id);
-                });
-            }
+    if (this.packetFilterEnabled) {
+      nodes = this.checkPacketFilters(nodes);
+    }
+
+    if (this.sortingOrder === 'asc') {
+      this.filteredNodes = nodes.sort(this.compareAsc);
+    } else {
+      this.filteredNodes = nodes.sort(this.compareDesc);
+    }
+  }
+
+  checkCapturing(nodes: Node[]): Node[] {
+    let links = this.linksDataSource.getItems();
+    let nodesWithCapturing: string[] = [];
+
+    links.forEach((link) => {
+      if (link.capturing) {
+        link.nodes.forEach((node) => {
+          nodesWithCapturing.push(node.node_id);
         });
+      }
+    });
 
-        let filteredNodes: Node[] = [];
-        nodes.forEach(node => {
-            if (nodesWithCapturing.includes(node.node_id)) {
-                filteredNodes.push(node);
-            }
+    let filteredNodes: Node[] = [];
+    nodes.forEach((node) => {
+      if (nodesWithCapturing.includes(node.node_id)) {
+        filteredNodes.push(node);
+      }
+    });
+    return filteredNodes;
+  }
+
+  checkPacketFilters(nodes: Node[]): Node[] {
+    let links = this.linksDataSource.getItems();
+    let nodesWithPacketFilters: string[] = [];
+
+    links.forEach((link) => {
+      if (
+        link.filters.bpf ||
+        link.filters.corrupt ||
+        link.filters.corrupt ||
+        link.filters.packet_loss ||
+        link.filters.frequency_drop
+      ) {
+        link.nodes.forEach((node) => {
+          nodesWithPacketFilters.push(node.node_id);
         });
-        return filteredNodes;
-    }
+      }
+    });
 
-    checkPacketFilters(nodes: Node[]): Node[] {
-        let links = this.linksDataSource.getItems();
-        let nodesWithPacketFilters: string[] = [];
+    let filteredNodes: Node[] = [];
+    nodes.forEach((node) => {
+      if (nodesWithPacketFilters.includes(node.node_id)) {
+        filteredNodes.push(node);
+      }
+    });
+    return filteredNodes;
+  }
 
-        links.forEach(link => {
-            if (link.filters.bpf || link.filters.corrupt || link.filters.corrupt || link.filters.packet_loss || link.filters.frequency_drop) {
-                link.nodes.forEach(node => {
-                    nodesWithPacketFilters.push(node.node_id);
-                });
-            }
-        });
-
-        let filteredNodes: Node[] = [];
-        nodes.forEach(node => {
-            if (nodesWithPacketFilters.includes(node.node_id)) {
-                filteredNodes.push(node);
-            }
-        });
-        return filteredNodes;
-    }
-
-    close() {
-        this.closeTopologySummary.emit(false);
-    }
+  close() {
+    this.closeTopologySummary.emit(false);
+  }
 }
diff --git a/src/app/components/web-console-full-window/web-console-full-window.component.html b/src/app/components/web-console-full-window/web-console-full-window.component.html
index 2710d097..2e4e92f7 100644
--- a/src/app/components/web-console-full-window/web-console-full-window.component.html
+++ b/src/app/components/web-console-full-window/web-console-full-window.component.html
@@ -1 +1 @@
-<div style="width: 100%;height: 100%;" #terminal id="terminal"></div>
+<div style="width: 100%; height: 100%" #terminal id="terminal"></div>
diff --git a/src/app/components/web-console-full-window/web-console-full-window.component.ts b/src/app/components/web-console-full-window/web-console-full-window.component.ts
index 99b2f68f..52cc1413 100644
--- a/src/app/components/web-console-full-window/web-console-full-window.component.ts
+++ b/src/app/components/web-console-full-window/web-console-full-window.component.ts
@@ -12,101 +12,100 @@ import { Title } from '@angular/platform-browser';
 import { NodeService } from '../../services/node.service';
 import { Subscription } from 'rxjs';
 
-
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    selector: 'app-web-console-full-window',
-    templateUrl: './web-console-full-window.component.html',
-    styleUrls: ['../../../../node_modules/xterm/css/xterm.css']
+  encapsulation: ViewEncapsulation.None,
+  selector: 'app-web-console-full-window',
+  templateUrl: './web-console-full-window.component.html',
+  styleUrls: ['../../../../node_modules/xterm/css/xterm.css'],
 })
 export class WebConsoleFullWindowComponent implements OnInit {
-    private serverId: string;
-    private projectId: string;
-    private nodeId: string;
-    private subscriptions: Subscription = new Subscription();
-    private server: Server;
-    private node: Node;
+  private serverId: string;
+  private projectId: string;
+  private nodeId: string;
+  private subscriptions: Subscription = new Subscription();
+  private server: Server;
+  private node: Node;
 
-    public term: Terminal = new Terminal();
-    public fitAddon: FitAddon = new FitAddon();
+  public term: Terminal = new Terminal();
+  public fitAddon: FitAddon = new FitAddon();
 
-    @ViewChild('terminal') terminal: ElementRef;
+  @ViewChild('terminal') terminal: ElementRef;
 
-    constructor(
-        private consoleService: NodeConsoleService,
-        private serverService: ServerService,
-        private route: ActivatedRoute,
-        private title: Title,
-        private nodeService: NodeService
-    ) {}
-    
-    ngOnInit() {
-        if (this.serverService.isServiceInitialized) {
-            this.getData();
-        } else {
-            this.subscriptions.add(
-              this.serverService.serviceInitialized.subscribe((val) => {
-                if (val) this.getData();
-              })
-            );
+  constructor(
+    private consoleService: NodeConsoleService,
+    private serverService: ServerService,
+    private route: ActivatedRoute,
+    private title: Title,
+    private nodeService: NodeService
+  ) {}
+
+  ngOnInit() {
+    if (this.serverService.isServiceInitialized) {
+      this.getData();
+    } else {
+      this.subscriptions.add(
+        this.serverService.serviceInitialized.subscribe((val) => {
+          if (val) this.getData();
+        })
+      );
+    }
+  }
+
+  getData() {
+    this.serverId = this.route.snapshot.paramMap.get('server_id');
+    this.projectId = this.route.snapshot.paramMap.get('project_id');
+    this.nodeId = this.route.snapshot.paramMap.get('node_id');
+
+    this.consoleService.consoleResized.subscribe((ev) => {
+      this.fitAddon.fit();
+    });
+
+    this.serverService.get(+this.serverId).then((server: Server) => {
+      this.server = server;
+      this.nodeService.getNodeById(this.server, this.projectId, this.nodeId).subscribe((node: Node) => {
+        this.node = node;
+        this.title.setTitle(this.node.name);
+        this.openTerminal();
+      });
+    });
+  }
+
+  openTerminal() {
+    setTimeout(() => {
+      this.term.open(this.terminal.nativeElement);
+      const socket = new WebSocket(this.getUrl());
+
+      socket.onerror = (event) => {
+        this.term.write('Connection lost' + '\r\n');
+      };
+      socket.onclose = (event) => {
+        this.term.write('Connection closed' + '\r\n');
+      };
+
+      const attachAddon = new AttachAddon(socket);
+      this.term.loadAddon(attachAddon);
+      this.term.setOption('cursorBlink', true);
+      this.term.loadAddon(this.fitAddon);
+      this.fitAddon.activate(this.term);
+      this.fitAddon.fit();
+      this.term.focus();
+
+      this.term.attachCustomKeyEventHandler((key: KeyboardEvent) => {
+        if (key.code === 'KeyC' || key.code === 'KeyV') {
+          if (key.ctrlKey) {
+            return false;
+          }
         }
-    }
+        return true;
+      });
 
-    getData() {
-        this.serverId = this.route.snapshot.paramMap.get("server_id");
-        this.projectId = this.route.snapshot.paramMap.get("project_id");
-        this.nodeId = this.route.snapshot.paramMap.get("node_id");
+      let numberOfColumns = Math.round(window.innerWidth / this.consoleService.getLineWidth());
+      let numberOfRows = Math.round(window.innerHeight / this.consoleService.getLineHeight());
+      this.term.resize(numberOfColumns, numberOfRows);
+    }, 0);
+  }
 
-        this.consoleService.consoleResized.subscribe(ev => {
-            this.fitAddon.fit();
-        });
-
-        this.serverService.get(+this.serverId).then((server: Server) => {
-            this.server = server;
-            this.nodeService.getNodeById(this.server, this.projectId, this.nodeId).subscribe((node: Node) => {
-                this.node = node;
-                this.title.setTitle(this.node.name);
-                this.openTerminal();
-            });
-        });
-    }
-
-    openTerminal() {
-        setTimeout(() => { 
-            this.term.open(this.terminal.nativeElement);
-            const socket = new WebSocket(this.getUrl());
-    
-            socket.onerror = ((event) => {
-                this.term.write("Connection lost" + "\r\n");
-            });
-            socket.onclose = ((event) => {
-                this.term.write("Connection closed" + "\r\n");
-            });
-    
-            const attachAddon = new AttachAddon(socket);
-            this.term.loadAddon(attachAddon);
-            this.term.setOption('cursorBlink', true);
-            this.term.loadAddon(this.fitAddon);
-            this.fitAddon.activate(this.term);
-            this.fitAddon.fit();
-            this.term.focus();
-    
-            this.term.attachCustomKeyEventHandler((key: KeyboardEvent) => {
-                if (key.code === 'KeyC' || key.code === 'KeyV'){
-                    if (key.ctrlKey) {
-                        return false;
-                   }
-                }
-                return true;
-            });
-    
-            let numberOfColumns = Math.round(window.innerWidth / this.consoleService.getLineWidth());
-            let numberOfRows = Math.round(window.innerHeight / this.consoleService.getLineHeight());
-            this.term.resize(numberOfColumns, numberOfRows);
-        }, 0 );
-    }
-
-    getUrl() {
-        return `ws://${this.server.host}:${this.server.port}/v2/projects/${this.projectId}/nodes/${this.nodeId}/console/ws`
-    }
+  getUrl() {
+    return `ws://${this.server.host}:${this.server.port}/v2/projects/${this.projectId}/nodes/${this.nodeId}/console/ws`;
+  }
 }
diff --git a/src/app/filters/dataSourceFilter.ts b/src/app/filters/dataSourceFilter.ts
index d5928004..2a4f27d6 100644
--- a/src/app/filters/dataSourceFilter.ts
+++ b/src/app/filters/dataSourceFilter.ts
@@ -1,17 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-
 @Pipe({
-  name: 'datasourcefilter'
+  name: 'datasourcefilter',
 })
 export class DataSourceFilter implements PipeTransform {
-    transform(items: any, searchText: string): any[] {
-        if(!items) return [];
-        if(!searchText) return items;
-        
-        searchText = searchText.toLowerCase();
-            return items.filteredData.filter( item => {
-              return item.name.toLowerCase().includes(searchText);
-            });
-    } 
+  transform(items: any, searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.toLowerCase();
+    return items.filteredData.filter((item) => {
+      return item.name.toLowerCase().includes(searchText);
+    });
+  }
 }
diff --git a/src/app/filters/dateFilter.pipe.ts b/src/app/filters/dateFilter.pipe.ts
index 930a8683..fad6d7f6 100644
--- a/src/app/filters/dateFilter.pipe.ts
+++ b/src/app/filters/dateFilter.pipe.ts
@@ -1,21 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-
 @Pipe({
-  name: 'datefilter'
+  name: 'datefilter',
 })
 export class DateFilter implements PipeTransform {
-    transform(timestamp: string): string {
-        let date = new Date(+timestamp*1000);
+  transform(timestamp: string): string {
+    let date = new Date(+timestamp * 1000);
 
-        let hours = date.getHours();
-        let minutes = "0" + date.getMinutes();
-        let seconds = "0" + date.getSeconds();
+    let hours = date.getHours();
+    let minutes = '0' + date.getMinutes();
+    let seconds = '0' + date.getSeconds();
 
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
 
-        return  hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + ' ' + day + '/' + month + '/' + year;
-    } 
+    return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2) + ' ' + day + '/' + month + '/' + year;
+  }
 }
diff --git a/src/app/filters/nameFilter.pipe.ts b/src/app/filters/nameFilter.pipe.ts
index 80514b2a..7b28250f 100644
--- a/src/app/filters/nameFilter.pipe.ts
+++ b/src/app/filters/nameFilter.pipe.ts
@@ -1,17 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-
 @Pipe({
-  name: 'namefilter'
+  name: 'namefilter',
 })
 export class NameFilter implements PipeTransform {
-    transform(items: any[], searchText: string): any[] {
-        if(!items) return [];
-        if(!searchText) return items;
-        
-        searchText = searchText.toLowerCase();
-            return items.filter( item => {
-              return item.name.toLowerCase().includes(searchText);
-            });
-    } 
+  transform(items: any[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.toLowerCase();
+    return items.filter((item) => {
+      return item.name.toLowerCase().includes(searchText);
+    });
+  }
 }
diff --git a/src/app/filters/projectsFilter.pipe.ts b/src/app/filters/projectsFilter.pipe.ts
index a0d637f4..6f8c79c4 100644
--- a/src/app/filters/projectsFilter.pipe.ts
+++ b/src/app/filters/projectsFilter.pipe.ts
@@ -1,18 +1,17 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { ProjectDataSource } from '../components/projects/projects.component';
 
-
 @Pipe({
-  name: 'projectsfilter'
+  name: 'projectsfilter',
 })
 export class ProjectsFilter implements PipeTransform {
-    transform(items: ProjectDataSource, searchText: string) {
-        if(!items) return [];
-        if(!searchText) return items;
-        
-        searchText = searchText.toLowerCase();
-            return items.projectDatabase.data.filter( item => {
-              return item.filename.toLowerCase().includes(searchText);
-            });
-    } 
+  transform(items: ProjectDataSource, searchText: string) {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.toLowerCase();
+    return items.projectDatabase.data.filter((item) => {
+      return item.filename.toLowerCase().includes(searchText);
+    });
+  }
 }
diff --git a/src/app/filters/searchFilter.pipe.ts b/src/app/filters/searchFilter.pipe.ts
index 5177a825..f761bf60 100644
--- a/src/app/filters/searchFilter.pipe.ts
+++ b/src/app/filters/searchFilter.pipe.ts
@@ -1,17 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-
 @Pipe({
-  name: 'filenamefilter'
+  name: 'filenamefilter',
 })
 export class SearchFilter implements PipeTransform {
-    transform(items: any[], searchText: string): any[] {
-        if(!items) return [];
-        if(!searchText) return items;
-        
-        searchText = searchText.toLowerCase();
-            return items.filter( item => {
-              return item.filename.toLowerCase().includes(searchText);
-            });
-    } 
+  transform(items: any[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.toLowerCase();
+    return items.filter((item) => {
+      return item.filename.toLowerCase().includes(searchText);
+    });
+  }
 }
diff --git a/src/app/filters/templateFilter.pipe.ts b/src/app/filters/templateFilter.pipe.ts
index 7c1e30a1..6d71e650 100644
--- a/src/app/filters/templateFilter.pipe.ts
+++ b/src/app/filters/templateFilter.pipe.ts
@@ -1,18 +1,17 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { Template } from '../models/template';
 
-
 @Pipe({
-  name: 'templatefilter'
+  name: 'templatefilter',
 })
 export class TemplateFilter implements PipeTransform {
-    transform(items: Template[], searchText: string): any[] {
-        if(!items) return [];
-        if(!searchText) return items;
-        
-        searchText = searchText.toLowerCase();
-            return items.filter( item => {
-              return item.name.toLowerCase().includes(searchText);
-            });
-    } 
+  transform(items: Template[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    searchText = searchText.toLowerCase();
+    return items.filter((item) => {
+      return item.name.toLowerCase().includes(searchText);
+    });
+  }
 }
diff --git a/src/app/guards/console-guard.ts b/src/app/guards/console-guard.ts
index c744bf07..cd6a264e 100644
--- a/src/app/guards/console-guard.ts
+++ b/src/app/guards/console-guard.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { CanDeactivate } from '@angular/router';
 import { NodeConsoleService } from '../services/nodeConsole.service';
 import { Observable } from 'rxjs';
@@ -6,24 +6,21 @@ import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { ConfirmationBottomSheetComponent } from '../components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
 
 export interface CanComponentDeactivate {
-    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
 }
 
 @Injectable()
 export class ConsoleGuard implements CanDeactivate<CanComponentDeactivate> {
-    constructor(
-        private consoleService: NodeConsoleService,
-        private bottomSheet: MatBottomSheet
-    ) {}
+  constructor(private consoleService: NodeConsoleService, private bottomSheet: MatBottomSheet) {}
 
-    canDeactivate() {
-        if (this.consoleService.openConsoles > 0) {
-            this.bottomSheet.open(ConfirmationBottomSheetComponent);
-            let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
-            bottomSheetRef.instance.message = 'Exiting the project will close open consoles, do you want to continue?';
-            return bottomSheetRef.afterDismissed();
-        } else {
-            return true;
-        }
+  canDeactivate() {
+    if (this.consoleService.openConsoles > 0) {
+      this.bottomSheet.open(ConfirmationBottomSheetComponent);
+      let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
+      bottomSheetRef.instance.message = 'Exiting the project will close open consoles, do you want to continue?';
+      return bottomSheetRef.afterDismissed();
+    } else {
+      return true;
     }
+  }
 }
diff --git a/src/app/handlers/project-web-service-handler.spec.ts b/src/app/handlers/project-web-service-handler.spec.ts
index e8cae8f2..9721dd49 100644
--- a/src/app/handlers/project-web-service-handler.spec.ts
+++ b/src/app/handlers/project-web-service-handler.spec.ts
@@ -15,7 +15,7 @@ describe('ProjectWebServiceHandler', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProjectWebServiceHandler, NodesDataSource, LinksDataSource, DrawingsDataSource]
+      providers: [ProjectWebServiceHandler, NodesDataSource, LinksDataSource, DrawingsDataSource],
     });
 
     ws = new Subject<WebServiceMessage>();
diff --git a/src/app/layouts/default-layout/default-layout.component.html b/src/app/layouts/default-layout/default-layout.component.html
index 387a69ec..e50813a0 100644
--- a/src/app/layouts/default-layout/default-layout.component.html
+++ b/src/app/layouts/default-layout/default-layout.component.html
@@ -4,13 +4,17 @@
 
     <button mat-button routerLink="/servers">Servers</button>
 
-    <button *ngIf="!recentlyOpenedProjectId && serverIdProjectList" mat-button (click)="listProjects()">Projects</button>
+    <button *ngIf="!recentlyOpenedProjectId && serverIdProjectList" mat-button (click)="listProjects()">
+      Projects
+    </button>
 
-    <button *ngIf="recentlyOpenedProjectId && recentlyOpenedServerId" mat-button (click)="backToProject()">Back to project</button>
+    <button *ngIf="recentlyOpenedProjectId && recentlyOpenedServerId" mat-button (click)="backToProject()">
+      Back to project
+    </button>
 
     <span class="fill-space"></span>
 
-    <button mat-button [matMenuTriggerFor]="menu" >
+    <button mat-button [matMenuTriggerFor]="menu">
       <mat-icon>more_vert</mat-icon>
     </button>
 
@@ -28,7 +32,6 @@
         <span>Help</span>
       </button>
     </mat-menu>
-
   </mat-toolbar>
 </header>
 
@@ -36,6 +39,4 @@
 
 <app-progress></app-progress>
 
-<footer class="footer mat-app-background">
-  GNS3 Web UI &copy; 2020 - v{{ uiVersion }}
-</footer>
+<footer class="footer mat-app-background">GNS3 Web UI &copy; 2020 - v{{ uiVersion }}</footer>
diff --git a/src/app/layouts/default-layout/default-layout.component.scss b/src/app/layouts/default-layout/default-layout.component.scss
index 53d03477..2765c065 100644
--- a/src/app/layouts/default-layout/default-layout.component.scss
+++ b/src/app/layouts/default-layout/default-layout.component.scss
@@ -1,8 +1,10 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
-app-root, app-default-layout {
+app-root,
+app-default-layout {
   height: 100%;
 }
 
@@ -31,12 +33,12 @@ app-default-layout {
 }
 
 header {
-  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
   z-index: 10;
 }
 
 /*main {*/
-  /*height: 100%;*/
+/*height: 100%;*/
 /*}*/
 
 .default-header h1 {
diff --git a/src/app/layouts/default-layout/default-layout.component.spec.ts b/src/app/layouts/default-layout/default-layout.component.spec.ts
index ca101a30..65899496 100644
--- a/src/app/layouts/default-layout/default-layout.component.spec.ts
+++ b/src/app/layouts/default-layout/default-layout.component.spec.ts
@@ -15,7 +15,6 @@ import { MockedToasterService } from '../../services/toaster.service.spec';
 import { Subject } from 'rxjs';
 import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 
-
 class ElectronServiceMock {
   public isElectronApp: boolean;
 }
@@ -41,22 +40,22 @@ describe('DefaultLayoutComponent', () => {
       providers: [
         {
           provide: ElectronService,
-          useValue: electronServiceMock
+          useValue: electronServiceMock,
         },
         {
           provide: ServerManagementService,
-          useValue: serverManagementService
+          useValue: serverManagementService,
         },
         {
           provide: ToasterService,
-          useClass: MockedToasterService
+          useClass: MockedToasterService,
         },
         {
           provide: RecentlyOpenedProjectService,
-          useClass: RecentlyOpenedProjectService
+          useClass: RecentlyOpenedProjectService,
         },
-        ProgressService
-      ]
+        ProgressService,
+      ],
     }).compileComponents();
   }));
 
@@ -86,7 +85,7 @@ describe('DefaultLayoutComponent', () => {
     const toaster: MockedToasterService = TestBed.get(ToasterService);
     serverManagementService.serverStatusChanged.next({
       status: 'errored',
-      message: 'Message'
+      message: 'Message',
     });
     expect(toaster.errors).toEqual(['Message']);
   });
@@ -96,7 +95,7 @@ describe('DefaultLayoutComponent', () => {
     const toaster: MockedToasterService = TestBed.get(ToasterService);
     serverManagementService.serverStatusChanged.next({
       status: 'errored',
-      message: 'Message'
+      message: 'Message',
     });
     expect(toaster.errors).toEqual([]);
   });
@@ -119,6 +118,4 @@ describe('DefaultLayoutComponent', () => {
       expect(isClosed).toBeTruthy();
     });
   });
-
-
 });
diff --git a/src/app/layouts/default-layout/default-layout.component.ts b/src/app/layouts/default-layout/default-layout.component.ts
index bb486bf6..443d978b 100644
--- a/src/app/layouts/default-layout/default-layout.component.ts
+++ b/src/app/layouts/default-layout/default-layout.component.ts
@@ -8,12 +8,11 @@ import { ProgressService } from '../../common/progress/progress.service';
 import { version } from './../../version';
 import { Router } from '@angular/router';
 
-
 @Component({
   selector: 'app-default-layout',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './default-layout.component.html',
-  styleUrls: ['./default-layout.component.scss']
+  styleUrls: ['./default-layout.component.scss'],
 })
 export class DefaultLayoutComponent implements OnInit, OnDestroy {
   public isInstalledSoftwareAvailable = false;
@@ -22,8 +21,8 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   serverStatusSubscription: Subscription;
   shouldStopServersOnClosing = true;
 
-  recentlyOpenedServerId : string;
-  recentlyOpenedProjectId : string;
+  recentlyOpenedServerId: string;
+  recentlyOpenedProjectId: string;
   serverIdProjectList: string;
 
   constructor(
@@ -39,16 +38,16 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.recentlyOpenedServerId = this.recentlyOpenedProjectService.getServerId();
     this.recentlyOpenedProjectId = this.recentlyOpenedProjectService.getProjectId();
     this.serverIdProjectList = this.recentlyOpenedProjectService.getServerIdProjectList();
-    
+
     this.isInstalledSoftwareAvailable = this.electronService.isElectronApp;
 
     // attach to notification stream when any of running local servers experienced issues
     this.serverStatusSubscription = this.serverManagement.serverStatusChanged.subscribe((serverStatus) => {
-      if(serverStatus.status === 'errored') {
+      if (serverStatus.status === 'errored') {
         console.error(serverStatus.message);
         this.toasterService.error(serverStatus.message);
       }
-      if(serverStatus.status === 'stderr') {
+      if (serverStatus.status === 'stderr') {
         console.error(serverStatus.message);
         this.toasterService.error(serverStatus.message);
       }
@@ -59,21 +58,23 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   }
 
   listProjects() {
-    this.router.navigate(['/server', this.serverIdProjectList, 'projects'])
-      .catch(error => this.toasterService.error('Cannot list projects'));
+    this.router
+      .navigate(['/server', this.serverIdProjectList, 'projects'])
+      .catch((error) => this.toasterService.error('Cannot list projects'));
   }
 
   backToProject() {
-    this.router.navigate(['/server', this.recentlyOpenedServerId, 'project', this.recentlyOpenedProjectId])
-      .catch(error => this.toasterService.error('Cannot navigate to the last opened project'));
+    this.router
+      .navigate(['/server', this.recentlyOpenedServerId, 'project', this.recentlyOpenedProjectId])
+      .catch((error) => this.toasterService.error('Cannot navigate to the last opened project'));
   }
 
   @HostListener('window:beforeunload', ['$event'])
   async onBeforeUnload($event) {
-    if(!this.shouldStopServersOnClosing) {
+    if (!this.shouldStopServersOnClosing) {
       return;
     }
-    $event.preventDefault()
+    $event.preventDefault();
     $event.returnValue = false;
     this.progressService.activate();
     await this.serverManagement.stopAll();
diff --git a/src/app/material.imports.ts b/src/app/material.imports.ts
index 89932d59..3d29c8f6 100644
--- a/src/app/material.imports.ts
+++ b/src/app/material.imports.ts
@@ -51,5 +51,5 @@ export const MATERIAL_IMPORTS = [
   MatTabsModule,
   MatTreeModule,
   MatBottomSheetModule,
-  MatChipsModule
+  MatChipsModule,
 ];
diff --git a/src/app/models/adbutler.ts b/src/app/models/adbutler.ts
index 00518ab6..bf7d44fa 100644
--- a/src/app/models/adbutler.ts
+++ b/src/app/models/adbutler.ts
@@ -1,23 +1,23 @@
 export interface Placement1 {
-    banner_id: string;
-    width: string;
-    height: string;
-    alt_text: string;
-    accompanied_html: string;
-    target: string;
-    tracking_pixel: string;
-    body: string;
-    redirect_url: string;
-    refresh_url: string;
-    refresh_time: string;
-    image_url: string;
+  banner_id: string;
+  width: string;
+  height: string;
+  alt_text: string;
+  accompanied_html: string;
+  target: string;
+  tracking_pixel: string;
+  body: string;
+  redirect_url: string;
+  refresh_url: string;
+  refresh_time: string;
+  image_url: string;
 }
 
 export interface Placements {
-    placement_1: Placement1;
+  placement_1: Placement1;
 }
 
 export interface AdButlerResponse {
-    status: string;
-    placements: Placements;
+  status: string;
+  placements: Placements;
 }
diff --git a/src/app/models/appliance.ts b/src/app/models/appliance.ts
index 132b9944..661fbc01 100644
--- a/src/app/models/appliance.ts
+++ b/src/app/models/appliance.ts
@@ -1,93 +1,93 @@
 export interface Image {
-    compression? : string;
-    direct_download_url? : string;
-    download_url: string;
-    filename: string;
-    filesize: any;
-    md5sum: string;
-    version: string;
+  compression?: string;
+  direct_download_url?: string;
+  download_url: string;
+  filename: string;
+  filesize: any;
+  md5sum: string;
+  version: string;
 }
 
 export interface Qemu {
-    adapter_type: string;
-    adapters: number;
-    arch: string;
-    boot_priority: string;
-    console_type: string;
-    hda_disk_interface: string;
-    hdb_disk_interface: string;
-    hdc_disk_interface: string;
-    hdd_disk_interface: string;
-    kvm: string;
-    ram: number;
+  adapter_type: string;
+  adapters: number;
+  arch: string;
+  boot_priority: string;
+  console_type: string;
+  hda_disk_interface: string;
+  hdb_disk_interface: string;
+  hdc_disk_interface: string;
+  hdd_disk_interface: string;
+  kvm: string;
+  ram: number;
 }
 
 export interface Docker {
-    adapters: number;
-    console_type: string;
-    image: string;
+  adapters: number;
+  console_type: string;
+  image: string;
 }
 
 export interface Dynamips {
-    chassis: string;
-    nvram: number;
-    platform: string;
-    ram: number;
-    slot0: string;
-    slot1: string;
-    slot2: string;
-    slot3: string;
-    slot4: string;
-    slot5: string;
-    slot6: string;
-    slot7: string;
-    startup_config: string;
+  chassis: string;
+  nvram: number;
+  platform: string;
+  ram: number;
+  slot0: string;
+  slot1: string;
+  slot2: string;
+  slot3: string;
+  slot4: string;
+  slot5: string;
+  slot6: string;
+  slot7: string;
+  startup_config: string;
 }
 
 export interface Iou {
-    ethernet_adapters: number;
-    nvram: number;
-    ram: number;
-    serial_adapters: number;
-    startup_config: string;
+  ethernet_adapters: number;
+  nvram: number;
+  ram: number;
+  serial_adapters: number;
+  startup_config: string;
 }
 
 export interface Images {
-    hda_disk_image: string;
-    hdb_disk_image: string;
+  hda_disk_image: string;
+  hdb_disk_image: string;
 }
 
 export interface Version {
-    images: Images;
-    name: string;
+  images: Images;
+  name: string;
 }
 
 export interface Appliance {
-    availability: string;
-    builtin: boolean;
-    category: string;
-    description: string;
-    documentation_url: string;
-    first_port_name: string;
-    images: Image[];
-    maintainer: string;
-    maintainer_email: string;
-    name: string;
-    port_name_format: string;
-    product_name: string;
-    product_url: string;
-    registry_version: number;
-    status: string;
-    symbol: string;
-    usage: string;
-    vendor_name: string;
-    vendor_url: string;
-    versions: Version[];
+  availability: string;
+  builtin: boolean;
+  category: string;
+  description: string;
+  documentation_url: string;
+  first_port_name: string;
+  images: Image[];
+  maintainer: string;
+  maintainer_email: string;
+  name: string;
+  port_name_format: string;
+  product_name: string;
+  product_url: string;
+  registry_version: number;
+  status: string;
+  symbol: string;
+  usage: string;
+  vendor_name: string;
+  vendor_url: string;
+  versions: Version[];
 
-    docker: Docker;
-    dynamips: Dynamips;
-    iou: Iou;
-    qemu: Qemu;
+  docker: Docker;
+  dynamips: Dynamips;
+  iou: Iou;
+  qemu: Qemu;
 
-    emulator?: string;
+  emulator?: string;
 }
diff --git a/src/app/models/capturingSettings.ts b/src/app/models/capturingSettings.ts
index 7cf85ba8..6714e51d 100644
--- a/src/app/models/capturingSettings.ts
+++ b/src/app/models/capturingSettings.ts
@@ -1,4 +1,4 @@
 export class CapturingSettings {
-    capture_file_name: string;
-    data_link_type: string;
+  capture_file_name: string;
+  data_link_type: string;
 }
diff --git a/src/app/models/compute.ts b/src/app/models/compute.ts
index 83c16bf2..9898229c 100644
--- a/src/app/models/compute.ts
+++ b/src/app/models/compute.ts
@@ -1,19 +1,19 @@
 export interface Capabilities {
-    node_types: string[];
-    platform: string;
-    version: string;
+  node_types: string[];
+  platform: string;
+  version: string;
 }
 
 export interface Compute {
-    capabilities: Capabilities;
-    compute_id: string;
-    connected: boolean;
-    cpu_usage_percent: number;
-    host: string;
-    last_error?: any;
-    memory_usage_percent: number;
-    name: string;
-    port: number;
-    protocol: string;
-    user: string;
+  capabilities: Capabilities;
+  compute_id: string;
+  connected: boolean;
+  cpu_usage_percent: number;
+  host: string;
+  last_error?: any;
+  memory_usage_percent: number;
+  name: string;
+  port: number;
+  protocol: string;
+  user: string;
 }
diff --git a/src/app/models/computeStatistics.ts b/src/app/models/computeStatistics.ts
index c5d19031..6b65aac3 100644
--- a/src/app/models/computeStatistics.ts
+++ b/src/app/models/computeStatistics.ts
@@ -1,19 +1,19 @@
 export interface Statistics {
-    cpu_usage_percent: number;
-    disk_usage_percent: number;
-    load_average_percent: number[];
-    memory_free: number;
-    memory_total: number;
-    memory_usage_percent: number;
-    memory_used: number;
-    swap_free: number;
-    swap_total: number;
-    swap_usage_percent: number;
-    swap_used: number;
+  cpu_usage_percent: number;
+  disk_usage_percent: number;
+  load_average_percent: number[];
+  memory_free: number;
+  memory_total: number;
+  memory_usage_percent: number;
+  memory_used: number;
+  swap_free: number;
+  swap_total: number;
+  swap_usage_percent: number;
+  swap_used: number;
 }
 
 export interface ComputeStatistics {
-    compute_id: string;
-    compute_name: string;
-    statistics: Statistics;
+  compute_id: string;
+  compute_name: string;
+  statistics: Statistics;
 }
diff --git a/src/app/models/docker/docker-image.ts b/src/app/models/docker/docker-image.ts
index fbde09e1..7219c419 100644
--- a/src/app/models/docker/docker-image.ts
+++ b/src/app/models/docker/docker-image.ts
@@ -1,3 +1,3 @@
 export class DockerImage {
-    image: string;
+  image: string;
 }
diff --git a/src/app/models/ethernetHub/ports-mapping-enity.ts b/src/app/models/ethernetHub/ports-mapping-enity.ts
index ba470929..6995be32 100644
--- a/src/app/models/ethernetHub/ports-mapping-enity.ts
+++ b/src/app/models/ethernetHub/ports-mapping-enity.ts
@@ -1,11 +1,11 @@
 export interface PortsMappingEntity {
-    ethertype?: string;
-    interface?: string,
-    name: string;
-    port_number: number;
-    type?: string;
-    vlan?: number;
-    rhost?: string;
-    lport?: number;
-    rport?: number;
+  ethertype?: string;
+  interface?: string;
+  name: string;
+  port_number: number;
+  type?: string;
+  vlan?: number;
+  rhost?: string;
+  lport?: number;
+  rport?: number;
 }
diff --git a/src/app/models/filter-description.ts b/src/app/models/filter-description.ts
index 77238e27..9c49247e 100644
--- a/src/app/models/filter-description.ts
+++ b/src/app/models/filter-description.ts
@@ -1,14 +1,14 @@
 export class FilterDescription {
-    description: string;
-    name: string;
-    parameters: Parameter[];
-    type: string;
+  description: string;
+  name: string;
+  parameters: Parameter[];
+  type: string;
 }
 
 interface Parameter {
-    maximum?: number;
-    minimum?: number;
-    name: string;
-    type: string;
-    unit?: string;
+  maximum?: number;
+  minimum?: number;
+  name: string;
+  type: string;
+  unit?: string;
 }
diff --git a/src/app/models/filter.ts b/src/app/models/filter.ts
index 5a27c67a..c4a4d0ed 100644
--- a/src/app/models/filter.ts
+++ b/src/app/models/filter.ts
@@ -1,7 +1,7 @@
 export class Filter {
-    bpf?: string[];
-    corrupt?: number[];
-    delay?: number[];
-    frequency_drop?: number[];
-    packet_loss?: number[];
+  bpf?: string[];
+  corrupt?: number[];
+  delay?: number[];
+  frequency_drop?: number[];
+  packet_loss?: number[];
 }
diff --git a/src/app/models/gns3vm/gns3vm.ts b/src/app/models/gns3vm/gns3vm.ts
index e1443c7f..58df26c0 100644
--- a/src/app/models/gns3vm/gns3vm.ts
+++ b/src/app/models/gns3vm/gns3vm.ts
@@ -1,10 +1,10 @@
 export interface Gns3vm {
-    enable: boolean;
-    engine: string;
-    headless: boolean;
-    port: number;
-    ram: number;
-    vcpus: number;
-    vmname: string;
-    when_exit: string;
+  enable: boolean;
+  engine: string;
+  headless: boolean;
+  port: number;
+  ram: number;
+  vcpus: number;
+  vmname: string;
+  when_exit: string;
 }
diff --git a/src/app/models/gns3vm/gns3vmEngine.ts b/src/app/models/gns3vm/gns3vmEngine.ts
index 4cc9b144..c63d0831 100644
--- a/src/app/models/gns3vm/gns3vmEngine.ts
+++ b/src/app/models/gns3vm/gns3vmEngine.ts
@@ -1,8 +1,8 @@
 export interface Gns3vmEngine {
-    description: string;
-    engine_id: string;
-    name: string;
-    support_headless: boolean;
-    support_ram: boolean;
-    support_when_exit: boolean;
+  description: string;
+  engine_id: string;
+  name: string;
+  support_headless: boolean;
+  support_ram: boolean;
+  support_when_exit: boolean;
 }
diff --git a/src/app/models/gns3vm/vm.ts b/src/app/models/gns3vm/vm.ts
index b67b272a..856c98e7 100644
--- a/src/app/models/gns3vm/vm.ts
+++ b/src/app/models/gns3vm/vm.ts
@@ -1,3 +1,3 @@
 export interface VM {
-    vmname: string;
+  vmname: string;
 }
diff --git a/src/app/models/images/ios-image.ts b/src/app/models/images/ios-image.ts
index f876b75d..ee329321 100644
--- a/src/app/models/images/ios-image.ts
+++ b/src/app/models/images/ios-image.ts
@@ -1,6 +1,6 @@
 export interface IosImage {
-    filename: string;
-    filesize: number;
-    md5sum: string;
-    path: string;
+  filename: string;
+  filesize: number;
+  md5sum: string;
+  path: string;
 }
diff --git a/src/app/models/iou/iou-image.ts b/src/app/models/iou/iou-image.ts
index 02466d3a..8f7438ce 100644
--- a/src/app/models/iou/iou-image.ts
+++ b/src/app/models/iou/iou-image.ts
@@ -1,6 +1,6 @@
 export class IouImage {
-    filename: string;
-    filesize: number;
-    md5sum: string;
-    path: string;
+  filename: string;
+  filesize: number;
+  md5sum: string;
+  path: string;
 }
diff --git a/src/app/models/logEvent.ts b/src/app/models/logEvent.ts
index 4f3e7110..43b80ff2 100644
--- a/src/app/models/logEvent.ts
+++ b/src/app/models/logEvent.ts
@@ -1,4 +1,4 @@
 export class LogEvent {
-    type: string;
-    message: string;
+  type: string;
+  message: string;
 }
diff --git a/src/app/models/message.ts b/src/app/models/message.ts
index 3d21b1cc..d6b07c6c 100644
--- a/src/app/models/message.ts
+++ b/src/app/models/message.ts
@@ -1,4 +1,4 @@
 export class Message {
-    name?: string;
-    description: string;
+  name?: string;
+  description: string;
 }
diff --git a/src/app/models/project-statistics.ts b/src/app/models/project-statistics.ts
index c26566ce..b07e1db9 100644
--- a/src/app/models/project-statistics.ts
+++ b/src/app/models/project-statistics.ts
@@ -1,6 +1,6 @@
 export class ProjectStatistics {
-    drawings: number;
-    links: number;
-    nodes: number;
-    snapshots: number
+  drawings: number;
+  links: number;
+  nodes: number;
+  snapshots: number;
 }
diff --git a/src/app/models/qemu/qemu-binary.ts b/src/app/models/qemu/qemu-binary.ts
index 148dedd9..5233596e 100644
--- a/src/app/models/qemu/qemu-binary.ts
+++ b/src/app/models/qemu/qemu-binary.ts
@@ -1,4 +1,4 @@
 export class QemuBinary {
-    path: string;
-    version: string;
+  path: string;
+  version: string;
 }
diff --git a/src/app/models/qemu/qemu-custom-adapter.ts b/src/app/models/qemu/qemu-custom-adapter.ts
index 35e024e7..aae4d735 100644
--- a/src/app/models/qemu/qemu-custom-adapter.ts
+++ b/src/app/models/qemu/qemu-custom-adapter.ts
@@ -1,4 +1,4 @@
 export class CustomAdapter {
-    adapter_number: number;
-    adapter_type: string;
+  adapter_number: number;
+  adapter_type: string;
 }
diff --git a/src/app/models/qemu/qemu-image.ts b/src/app/models/qemu/qemu-image.ts
index 014b0942..d433f27f 100644
--- a/src/app/models/qemu/qemu-image.ts
+++ b/src/app/models/qemu/qemu-image.ts
@@ -1,6 +1,6 @@
 export class QemuImage {
-    filename: string;
-    filesize: number;
-    md5sum: string;
-    path: string;
+  filename: string;
+  filesize: number;
+  md5sum: string;
+  path: string;
 }
diff --git a/src/app/models/qemu/qemu-img.ts b/src/app/models/qemu/qemu-img.ts
index c8d8d7d2..a411ee95 100644
--- a/src/app/models/qemu/qemu-img.ts
+++ b/src/app/models/qemu/qemu-img.ts
@@ -1,12 +1,12 @@
 export class QemuImg {
-    cluster_size: number;
-    format: string;
-    lazy_refcounts: string;
-    path: string;
-    preallocation: string;
-    qemu_img: string;
-    refcount_bits: number;
-    size: number;
-    subformat: string;
-    zeroed_grain: string;
+  cluster_size: number;
+  format: string;
+  lazy_refcounts: string;
+  path: string;
+  preallocation: string;
+  qemu_img: string;
+  refcount_bits: number;
+  size: number;
+  subformat: string;
+  zeroed_grain: string;
 }
diff --git a/src/app/models/server-settings-models/builtin.ts b/src/app/models/server-settings-models/builtin.ts
index a45d695c..0e2cc81f 100644
--- a/src/app/models/server-settings-models/builtin.ts
+++ b/src/app/models/server-settings-models/builtin.ts
@@ -1,3 +1,3 @@
 export class Builtin {
-    default_nat_interface: string;
-}
\ No newline at end of file
+  default_nat_interface: string;
+}
diff --git a/src/app/models/server-settings-models/docker.ts b/src/app/models/server-settings-models/docker.ts
index ade92821..716fc2fe 100644
--- a/src/app/models/server-settings-models/docker.ts
+++ b/src/app/models/server-settings-models/docker.ts
@@ -1,3 +1,3 @@
 export class Docker {
-    containers: any[];
-}
\ No newline at end of file
+  containers: any[];
+}
diff --git a/src/app/models/server-settings-models/dynamips.ts b/src/app/models/server-settings-models/dynamips.ts
index cf720c1f..a17836fa 100644
--- a/src/app/models/server-settings-models/dynamips.ts
+++ b/src/app/models/server-settings-models/dynamips.ts
@@ -1,7 +1,7 @@
 export class Dynamips {
-    allocate_aux_console_ports: string;
-    dynamips_path: string;
-    ghost_ios_support: string;
-    mmap_support: string;
-    sparse_memory_support: string
-}
\ No newline at end of file
+  allocate_aux_console_ports: string;
+  dynamips_path: string;
+  ghost_ios_support: string;
+  mmap_support: string;
+  sparse_memory_support: string;
+}
diff --git a/src/app/models/server-settings-models/graphics-view.ts b/src/app/models/server-settings-models/graphics-view.ts
index 998c7559..72ef0f56 100644
--- a/src/app/models/server-settings-models/graphics-view.ts
+++ b/src/app/models/server-settings-models/graphics-view.ts
@@ -1,17 +1,17 @@
 export class GraphicsView {
-    default_label_color: string;
-    default_label_font: string;
-    default_note_color: string;
-    default_note_font: string;
-    draw_link_status_points: boolean;
-    draw_rectangle_selected_item: boolean;
-    grid_size: number;
-    scene_height: number;
-    scene_width: 2000;
-    show_grid: boolean;
-    show_interface_labels: boolean;
-    show_interface_labels_on_new_project: boolean;
-    show_layers: boolean;
-    snap_to_grid: boolean;
-    zoom: any
-}
\ No newline at end of file
+  default_label_color: string;
+  default_label_font: string;
+  default_note_color: string;
+  default_note_font: string;
+  draw_link_status_points: boolean;
+  draw_rectangle_selected_item: boolean;
+  grid_size: number;
+  scene_height: number;
+  scene_width: 2000;
+  show_grid: boolean;
+  show_interface_labels: boolean;
+  show_interface_labels_on_new_project: boolean;
+  show_layers: boolean;
+  snap_to_grid: boolean;
+  zoom: any;
+}
diff --git a/src/app/models/server-settings-models/iou.ts b/src/app/models/server-settings-models/iou.ts
index 23c046d8..a526e9dc 100644
--- a/src/app/models/server-settings-models/iou.ts
+++ b/src/app/models/server-settings-models/iou.ts
@@ -1,4 +1,4 @@
 export class IOU {
-    iourc_content: "";
-    license_check: boolean
-}
\ No newline at end of file
+  iourc_content: '';
+  license_check: boolean;
+}
diff --git a/src/app/models/server-settings-models/qemu.ts b/src/app/models/server-settings-models/qemu.ts
index 6a49ccd7..1625623f 100644
--- a/src/app/models/server-settings-models/qemu.ts
+++ b/src/app/models/server-settings-models/qemu.ts
@@ -1,7 +1,7 @@
 export class Qemu {
-    enable_hardware_acceleration: boolean;
-    enable_kvm: boolean;
-    require_hardware_acceleration: boolean;
-    require_kvm: boolean;
-    vms: any[]
-}
\ No newline at end of file
+  enable_hardware_acceleration: boolean;
+  enable_kvm: boolean;
+  require_hardware_acceleration: boolean;
+  require_kvm: boolean;
+  vms: any[];
+}
diff --git a/src/app/models/server-settings-models/virtual-box.ts b/src/app/models/server-settings-models/virtual-box.ts
index 4fdf91e5..bb7a784e 100644
--- a/src/app/models/server-settings-models/virtual-box.ts
+++ b/src/app/models/server-settings-models/virtual-box.ts
@@ -1,3 +1,3 @@
 export class VirtualBox {
-    vboxmanage_path: string;
-}
\ No newline at end of file
+  vboxmanage_path: string;
+}
diff --git a/src/app/models/server-settings-models/vmware.ts b/src/app/models/server-settings-models/vmware.ts
index ac36a011..c9f9cb58 100644
--- a/src/app/models/server-settings-models/vmware.ts
+++ b/src/app/models/server-settings-models/vmware.ts
@@ -1,7 +1,7 @@
 export class VMware {
-    block_host_traffic: boolean;
-    host_type: string;
-    vmnet_end_range: number;
-    vmnet_start_range: number;
-    vmrun_path: string
-}
\ No newline at end of file
+  block_host_traffic: boolean;
+  host_type: string;
+  vmnet_end_range: number;
+  vmnet_start_range: number;
+  vmrun_path: string;
+}
diff --git a/src/app/models/server-settings-models/vpcs.ts b/src/app/models/server-settings-models/vpcs.ts
index 61306b28..56d5a88a 100644
--- a/src/app/models/server-settings-models/vpcs.ts
+++ b/src/app/models/server-settings-models/vpcs.ts
@@ -1,3 +1,3 @@
 export class VPCS {
-    vpcs_path: string;
-}
\ No newline at end of file
+  vpcs_path: string;
+}
diff --git a/src/app/models/server.ts b/src/app/models/server.ts
index 1275d7fd..c4419de4 100644
--- a/src/app/models/server.ts
+++ b/src/app/models/server.ts
@@ -1,7 +1,7 @@
 export type ServerAuthorization = 'basic' | 'none';
 export type ServerLocation = 'local' | 'remote' | 'bundled';
 export type ServerStatus = 'stopped' | 'starting' | 'running';
-export type ServerProtocol = 'http:' | 'https:'
+export type ServerProtocol = 'http:' | 'https:';
 
 export class Server {
   id: number;
diff --git a/src/app/models/serverSettings.ts b/src/app/models/serverSettings.ts
index 5d920a20..891bf877 100644
--- a/src/app/models/serverSettings.ts
+++ b/src/app/models/serverSettings.ts
@@ -9,14 +9,14 @@ import { VPCS } from './server-settings-models/vpcs';
 import { VirtualBox } from './server-settings-models/virtual-box';
 
 export class ServerSettings {
-    Builtin: Builtin;
-    Docker: Docker;
-    Dynamips: Dynamips;
-    Graphicsview: GraphicsView;
-    IOU: IOU;
-    Qemu: Qemu;
-    VMware: VMware;
-    VPCS: VPCS;
-    VirtualBox:  VirtualBox;
-    modification_uuid: string
+  Builtin: Builtin;
+  Docker: Docker;
+  Dynamips: Dynamips;
+  Graphicsview: GraphicsView;
+  IOU: IOU;
+  Qemu: Qemu;
+  VMware: VMware;
+  VPCS: VPCS;
+  VirtualBox: VirtualBox;
+  modification_uuid: string;
 }
diff --git a/src/app/models/settings/qemu-settings.ts b/src/app/models/settings/qemu-settings.ts
index a237f794..6d707940 100644
--- a/src/app/models/settings/qemu-settings.ts
+++ b/src/app/models/settings/qemu-settings.ts
@@ -1,4 +1,4 @@
 export class QemuSettings {
-    enable_hardware_acceleration: boolean;
-    require_hardware_acceleration: boolean
+  enable_hardware_acceleration: boolean;
+  require_hardware_acceleration: boolean;
 }
diff --git a/src/app/models/software.ts b/src/app/models/software.ts
index 6b294480..514fdf90 100644
--- a/src/app/models/software.ts
+++ b/src/app/models/software.ts
@@ -1,12 +1,12 @@
-export type SoftwareType = "web";
+export type SoftwareType = 'web';
 
 export class Software {
-    name: string;
-    locations: string[];
-    type: SoftwareType;
-    resource: string;
-    binary: string;
-    sudo: boolean;
-    installation_arguments: string[];
-    installed: boolean;
-}
\ No newline at end of file
+  name: string;
+  locations: string[];
+  type: SoftwareType;
+  resource: string;
+  binary: string;
+  sudo: boolean;
+  installation_arguments: string[];
+  installed: boolean;
+}
diff --git a/src/app/models/symbol.ts b/src/app/models/symbol.ts
index a08d1693..df17351e 100644
--- a/src/app/models/symbol.ts
+++ b/src/app/models/symbol.ts
@@ -1,6 +1,6 @@
 export class Symbol {
-    builtin: boolean;
-    filename: string;
-    symbol_id: string;
-    raw: string;
+  builtin: boolean;
+  filename: string;
+  symbol_id: string;
+  raw: string;
 }
diff --git a/src/app/models/templates/cloud-template.ts b/src/app/models/templates/cloud-template.ts
index 549d6011..12b2a0fc 100644
--- a/src/app/models/templates/cloud-template.ts
+++ b/src/app/models/templates/cloud-template.ts
@@ -1,17 +1,17 @@
 import { PortsMappingEntity } from '../ethernetHub/ports-mapping-enity';
 
 export interface CloudTemplate {
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    default_name_format: string;
-    name: string;
-    ports_mapping?: PortsMappingEntity[];
-    remote_console_host: string;
-    remote_console_http_path: string;
-    remote_console_port: number;
-    remote_console_type: string;
-    symbol: string;
-    template_id: string;
-    template_type: string;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  default_name_format: string;
+  name: string;
+  ports_mapping?: PortsMappingEntity[];
+  remote_console_host: string;
+  remote_console_http_path: string;
+  remote_console_port: number;
+  remote_console_type: string;
+  symbol: string;
+  template_id: string;
+  template_type: string;
 }
diff --git a/src/app/models/templates/docker-template.ts b/src/app/models/templates/docker-template.ts
index 84729980..db700223 100644
--- a/src/app/models/templates/docker-template.ts
+++ b/src/app/models/templates/docker-template.ts
@@ -1,24 +1,24 @@
 import { CustomAdapter } from '../qemu/qemu-custom-adapter';
 
 export class DockerTemplate {
-    adapters: number;
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_http_path: string;
-    console_http_port: number;
-    console_resolution: string;
-    console_type: string;
-    custom_adapters: CustomAdapter[];
-    default_name_format: string;
-    environment: string;
-    extra_hosts: string;
-    image: string;
-    name: string;
-    start_command: string;
-    symbol: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
+  adapters: number;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_http_path: string;
+  console_http_port: number;
+  console_resolution: string;
+  console_type: string;
+  custom_adapters: CustomAdapter[];
+  default_name_format: string;
+  environment: string;
+  extra_hosts: string;
+  image: string;
+  name: string;
+  start_command: string;
+  symbol: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
 }
diff --git a/src/app/models/templates/ethernet-hub-template.ts b/src/app/models/templates/ethernet-hub-template.ts
index 982e2de2..1171e2a8 100644
--- a/src/app/models/templates/ethernet-hub-template.ts
+++ b/src/app/models/templates/ethernet-hub-template.ts
@@ -1,13 +1,13 @@
 import { PortsMappingEntity } from '../ethernetHub/ports-mapping-enity';
 
 export interface EthernetHubTemplate {
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    default_name_format: string;
-    name: string;
-    ports_mapping?: PortsMappingEntity[];
-    symbol: string;
-    template_id: string;
-    template_type: string;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  default_name_format: string;
+  name: string;
+  ports_mapping?: PortsMappingEntity[];
+  symbol: string;
+  template_id: string;
+  template_type: string;
 }
diff --git a/src/app/models/templates/ethernet-switch-template.ts b/src/app/models/templates/ethernet-switch-template.ts
index 00ed9458..d4539551 100644
--- a/src/app/models/templates/ethernet-switch-template.ts
+++ b/src/app/models/templates/ethernet-switch-template.ts
@@ -1,14 +1,14 @@
 import { PortsMappingEntity } from '../ethernetHub/ports-mapping-enity';
 
 export interface EthernetSwitchTemplate {
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_type: string;
-    default_name_format: string;
-    name: string;
-    ports_mapping: PortsMappingEntity[];
-    symbol: string;
-    template_id: string;
-    template_type: string;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_type: string;
+  default_name_format: string;
+  name: string;
+  ports_mapping: PortsMappingEntity[];
+  symbol: string;
+  template_id: string;
+  template_type: string;
 }
diff --git a/src/app/models/templates/ios-template.ts b/src/app/models/templates/ios-template.ts
index 7f9f2fe5..b87063a0 100644
--- a/src/app/models/templates/ios-template.ts
+++ b/src/app/models/templates/ios-template.ts
@@ -1,43 +1,43 @@
 export class IosTemplate {
-    auto_delete_disks: boolean;
-    builtin: boolean;
-    category: string;
-    chassis?: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    default_name_format: string;
-    disk0: number;
-    disk1: number;
-    exec_area: number;
-    idlemax: number;
-    idlepc: string;
-    idlesleep: number;
-    image: string;
-    iomem?: number;
-    mac_addr: string;
-    mmap: boolean;
-    name: string;
-    nvram: number;
-    platform: string;
-    private_config: string;
-    ram: number;
-    slot0?: string;
-    slot1?: string;
-    slot2?: string;
-    slot3?: string;
-    slot4?: string;
-    slot5?: string;
-    slot6?: string;
-    slot7?: string;
-    sparsemem: boolean;
-    startup_config: string;
-    symbol: string;
-    system_id: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
-    wic0?: string;
-    wic1?: string;
-    wic2?: string;
+  auto_delete_disks: boolean;
+  builtin: boolean;
+  category: string;
+  chassis?: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  default_name_format: string;
+  disk0: number;
+  disk1: number;
+  exec_area: number;
+  idlemax: number;
+  idlepc: string;
+  idlesleep: number;
+  image: string;
+  iomem?: number;
+  mac_addr: string;
+  mmap: boolean;
+  name: string;
+  nvram: number;
+  platform: string;
+  private_config: string;
+  ram: number;
+  slot0?: string;
+  slot1?: string;
+  slot2?: string;
+  slot3?: string;
+  slot4?: string;
+  slot5?: string;
+  slot6?: string;
+  slot7?: string;
+  sparsemem: boolean;
+  startup_config: string;
+  symbol: string;
+  system_id: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
+  wic0?: string;
+  wic1?: string;
+  wic2?: string;
 }
diff --git a/src/app/models/templates/iou-template.ts b/src/app/models/templates/iou-template.ts
index 81b1bd40..1d983887 100644
--- a/src/app/models/templates/iou-template.ts
+++ b/src/app/models/templates/iou-template.ts
@@ -1,22 +1,22 @@
 export class IouTemplate {
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    default_name_format: string;
-    ethernet_adapters: number;
-    l1_keepalives: boolean;
-    name: string;
-    nvram: number;
-    path: string;
-    private_config: string;
-    ram: number;
-    serial_adapters: number;
-    startup_config: string;
-    symbol: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
-    use_default_iou_values: boolean;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  default_name_format: string;
+  ethernet_adapters: number;
+  l1_keepalives: boolean;
+  name: string;
+  nvram: number;
+  path: string;
+  private_config: string;
+  ram: number;
+  serial_adapters: number;
+  startup_config: string;
+  symbol: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
+  use_default_iou_values: boolean;
 }
diff --git a/src/app/models/templates/qemu-template.ts b/src/app/models/templates/qemu-template.ts
index c0137df9..1d559bea 100644
--- a/src/app/models/templates/qemu-template.ts
+++ b/src/app/models/templates/qemu-template.ts
@@ -1,46 +1,46 @@
 import { CustomAdapter } from '../qemu/qemu-custom-adapter';
 
 export class QemuTemplate {
-    adapter_type: string;
-    adapters: number;
-    bios_image: string;
-    boot_priority: string;
-    builtin: boolean;
-    category: string;
-    cdrom_image: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    cpu_throttling: number;
-    cpus: number;
-    custom_adapters: CustomAdapter[];
-    default_name_format: string;
-    first_port_name: string;
-    hda_disk_image: string;
-    hda_disk_interface: string;
-    hdb_disk_image: string;
-    hdb_disk_interface: string;
-    hdc_disk_image: string;
-    hdc_disk_interface: string;
-    hdd_disk_image: string;
-    hdd_disk_interface: string;
-    initrd: string;
-    kernel_command_line: string;
-    kernel_image: string;
-    legacy_networking: boolean;
-    linked_clone: boolean;
-    mac_address: string;
-    name: string;
-    on_close: string;
-    options: string;
-    platform: string;
-    port_name_format: string;
-    port_segment_size: number;
-    process_priority: string;
-    qemu_path: string;
-    ram: number;
-    symbol: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
+  adapter_type: string;
+  adapters: number;
+  bios_image: string;
+  boot_priority: string;
+  builtin: boolean;
+  category: string;
+  cdrom_image: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  cpu_throttling: number;
+  cpus: number;
+  custom_adapters: CustomAdapter[];
+  default_name_format: string;
+  first_port_name: string;
+  hda_disk_image: string;
+  hda_disk_interface: string;
+  hdb_disk_image: string;
+  hdb_disk_interface: string;
+  hdc_disk_image: string;
+  hdc_disk_interface: string;
+  hdd_disk_image: string;
+  hdd_disk_interface: string;
+  initrd: string;
+  kernel_command_line: string;
+  kernel_image: string;
+  legacy_networking: boolean;
+  linked_clone: boolean;
+  mac_address: string;
+  name: string;
+  on_close: string;
+  options: string;
+  platform: string;
+  port_name_format: string;
+  port_segment_size: number;
+  process_priority: string;
+  qemu_path: string;
+  ram: number;
+  symbol: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
 }
diff --git a/src/app/models/templates/traceng-template.ts b/src/app/models/templates/traceng-template.ts
index 00eeb3c6..955990ec 100644
--- a/src/app/models/templates/traceng-template.ts
+++ b/src/app/models/templates/traceng-template.ts
@@ -1,12 +1,12 @@
 export interface TracengTemplate {
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_type: string;
-    default_name_format: string;
-    ip_address: string;
-    name: string;
-    symbol: string;
-    template_id: string;
-    template_type: string;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_type: string;
+  default_name_format: string;
+  ip_address: string;
+  name: string;
+  symbol: string;
+  template_id: string;
+  template_type: string;
 }
diff --git a/src/app/models/templates/virtualbox-template.ts b/src/app/models/templates/virtualbox-template.ts
index 9d63b08a..f72c6648 100644
--- a/src/app/models/templates/virtualbox-template.ts
+++ b/src/app/models/templates/virtualbox-template.ts
@@ -1,27 +1,27 @@
 import { CustomAdapter } from '../qemu/qemu-custom-adapter';
 
 export interface VirtualBoxTemplate {
-    adapter_type: string;
-    adapters: number;
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    custom_adapters?: CustomAdapter[];
-    default_name_format: string;
-    first_port_name: string;
-    headless: boolean;
-    linked_clone: boolean;
-    name: string;
-    on_close: string;
-    port_name_format: string;
-    port_segment_size: number;
-    ram: number;
-    symbol: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
-    use_any_adapter: boolean;
-    vmname: string;
+  adapter_type: string;
+  adapters: number;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  custom_adapters?: CustomAdapter[];
+  default_name_format: string;
+  first_port_name: string;
+  headless: boolean;
+  linked_clone: boolean;
+  name: string;
+  on_close: string;
+  port_name_format: string;
+  port_segment_size: number;
+  ram: number;
+  symbol: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
+  use_any_adapter: boolean;
+  vmname: string;
 }
diff --git a/src/app/models/templates/vmware-template.ts b/src/app/models/templates/vmware-template.ts
index 0bdd113e..0ab02ade 100644
--- a/src/app/models/templates/vmware-template.ts
+++ b/src/app/models/templates/vmware-template.ts
@@ -1,26 +1,26 @@
 import { CustomAdapter } from '../qemu/qemu-custom-adapter';
 
 export class VmwareTemplate {
-    adapter_type: string;
-    adapters: number;
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    custom_adapters: CustomAdapter[];
-    default_name_format: string;
-    first_port_name: string;
-    headless: boolean;
-    linked_clone: boolean;
-    name: string;
-    on_close: string;
-    port_name_format: string;
-    port_segment_size: number;
-    symbol: string;
-    template_id: string;
-    template_type: string;
-    usage: string;
-    use_any_adapter: boolean;
-    vmx_path: string;
+  adapter_type: string;
+  adapters: number;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  custom_adapters: CustomAdapter[];
+  default_name_format: string;
+  first_port_name: string;
+  headless: boolean;
+  linked_clone: boolean;
+  name: string;
+  on_close: string;
+  port_name_format: string;
+  port_segment_size: number;
+  symbol: string;
+  template_id: string;
+  template_type: string;
+  usage: string;
+  use_any_adapter: boolean;
+  vmx_path: string;
 }
diff --git a/src/app/models/templates/vpcs-template.ts b/src/app/models/templates/vpcs-template.ts
index b33fbabd..93e5a90d 100644
--- a/src/app/models/templates/vpcs-template.ts
+++ b/src/app/models/templates/vpcs-template.ts
@@ -1,13 +1,13 @@
 export interface VpcsTemplate {
-    base_script_file: string;
-    builtin: boolean;
-    category: string;
-    compute_id: string;
-    console_auto_start: boolean;
-    console_type: string;
-    default_name_format: string;
-    name: string;
-    symbol: string;
-    template_id: string;
-    template_type: string;
+  base_script_file: string;
+  builtin: boolean;
+  category: string;
+  compute_id: string;
+  console_auto_start: boolean;
+  console_type: string;
+  default_name_format: string;
+  name: string;
+  symbol: string;
+  template_id: string;
+  template_type: string;
 }
diff --git a/src/app/models/virtualBox/virtual-box-vm.ts b/src/app/models/virtualBox/virtual-box-vm.ts
index e49d7e85..038c9ceb 100644
--- a/src/app/models/virtualBox/virtual-box-vm.ts
+++ b/src/app/models/virtualBox/virtual-box-vm.ts
@@ -1,4 +1,4 @@
 export class VirtualBoxVm {
-    ram: number;
-    vmname: string;
+  ram: number;
+  vmname: string;
 }
diff --git a/src/app/models/vmware/vmware-vm.ts b/src/app/models/vmware/vmware-vm.ts
index 21232db1..83942acb 100644
--- a/src/app/models/vmware/vmware-vm.ts
+++ b/src/app/models/vmware/vmware-vm.ts
@@ -1,4 +1,4 @@
 export class VmwareVm {
-    vmname: string;
-    vmx_path: string;
+  vmname: string;
+  vmx_path: string;
 }
diff --git a/src/app/resolvers/server-resolve.ts b/src/app/resolvers/server-resolve.ts
index 6c96d947..25ea6195 100644
--- a/src/app/resolvers/server-resolve.ts
+++ b/src/app/resolvers/server-resolve.ts
@@ -1,15 +1,13 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { ServerService } from '../services/server.service';
 import { Server } from '../models/server';
 
 @Injectable()
 export class ServerResolve implements Resolve<Server> {
-    constructor(
-        private serverService: ServerService
-    ) {}
+  constructor(private serverService: ServerService) {}
 
-    resolve(route: ActivatedRouteSnapshot) {
-        return this.serverService.get(parseInt(route.params['server_id']));
-    }
+  resolve(route: ActivatedRouteSnapshot) {
+    return this.serverService.get(parseInt(route.params['server_id']));
+  }
 }
diff --git a/src/app/services/appliances.service.ts b/src/app/services/appliances.service.ts
index e21a2533..3aa1484e 100644
--- a/src/app/services/appliances.service.ts
+++ b/src/app/services/appliances.service.ts
@@ -8,21 +8,21 @@ import { Appliance } from '../models/appliance';
 
 @Injectable()
 export class ApplianceService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getAppliances(server: Server): Observable<Appliance[]> {
-        return this.httpServer.get<Appliance[]>(server, '/appliances') as Observable<Appliance[]>;
-    }
+  getAppliances(server: Server): Observable<Appliance[]> {
+    return this.httpServer.get<Appliance[]>(server, '/appliances') as Observable<Appliance[]>;
+  }
 
-    getAppliance(server: Server, url): Observable<Appliance> {
-        return this.httpServer.get<Appliance>(server, url) as Observable<Appliance>;
-    }
+  getAppliance(server: Server, url): Observable<Appliance> {
+    return this.httpServer.get<Appliance>(server, url) as Observable<Appliance>;
+  }
 
-    getUploadPath(server: Server, emulator: string, filename: string) {
-        return `${server.protocol}//${server.host}:${server.port}/v2/compute/${emulator}/images/${filename}`;
-    }
+  getUploadPath(server: Server, emulator: string, filename: string) {
+    return `${server.protocol}//${server.host}:${server.port}/v2/compute/${emulator}/images/${filename}`;
+  }
 
-    updateAppliances(server: Server): Observable<Appliance[]> {
-        return this.httpServer.get<Appliance[]>(server, '/appliances?update=yes') as Observable<Appliance[]>;
-    }
+  updateAppliances(server: Server): Observable<Appliance[]> {
+    return this.httpServer.get<Appliance[]>(server, '/appliances?update=yes') as Observable<Appliance[]>;
+  }
 }
diff --git a/src/app/services/built-in-templates-configuration.service.ts b/src/app/services/built-in-templates-configuration.service.ts
index c1526a4a..12c868fc 100644
--- a/src/app/services/built-in-templates-configuration.service.ts
+++ b/src/app/services/built-in-templates-configuration.service.ts
@@ -1,50 +1,56 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class BuiltInTemplatesConfigurationService {
-    getCategoriesForCloudNodes() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategoriesForCloudNodes() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getConsoleTypesForCloudNodes() {
-        return ['telnet', 'none'];
-    }
+  getConsoleTypesForCloudNodes() {
+    return ['telnet', 'none'];
+  }
 
-    getCategoriesForEthernetHubs() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategoriesForEthernetHubs() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getCategoriesForEthernetSwitches() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategoriesForEthernetSwitches() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getConsoleTypesForEthernetSwitches() {
-        return ['telnet', 'none'];
-    }
+  getConsoleTypesForEthernetSwitches() {
+    return ['telnet', 'none'];
+  }
 
-    getPortTypesForEthernetSwitches() {
-        return ['access', 'dot1q', 'qinq'];
-    }
+  getPortTypesForEthernetSwitches() {
+    return ['access', 'dot1q', 'qinq'];
+  }
 
-    getEtherTypesForEthernetSwitches() {
-        return ['0x8100', '0x88A8', '0x9100', '0x9200'];
-    }
+  getEtherTypesForEthernetSwitches() {
+    return ['0x8100', '0x88A8', '0x9100', '0x9200'];
+  }
 }
diff --git a/src/app/services/built-in-templates.service.spec.ts b/src/app/services/built-in-templates.service.spec.ts
index 51781002..ba492374 100644
--- a/src/app/services/built-in-templates.service.spec.ts
+++ b/src/app/services/built-in-templates.service.spec.ts
@@ -10,150 +10,150 @@ import { CloudTemplate } from '../models/templates/cloud-template';
 import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
 
 describe('BuiltInTemplatesService', () => {
-    let httpClient: HttpClient;
-    let httpTestingController: HttpTestingController;
-    let httpServer: HttpServer;
-    let server: Server;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let server: Server;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, AppTestingModule],
-        providers: [HttpServer, BuiltInTemplatesService]
-        });
-
-        httpClient = TestBed.get(HttpClient);
-        httpTestingController = TestBed.get(HttpTestingController);
-        httpServer = TestBed.get(HttpServer);
-        server = getTestServer();
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, BuiltInTemplatesService],
     });
 
-    afterEach(() => {
-        httpTestingController.verify();
-    });
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    server = getTestServer();
+  });
 
-    it('should be created', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        expect(service).toBeTruthy();
-    }));
+  afterEach(() => {
+    httpTestingController.verify();
+  });
 
-    it('should update cloud template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        const cloudtemplate = {
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            default_name_format: 'Cloud{0}',
-            name: '',
-            ports_mapping: [],
-            remote_console_type: 'none',
-            symbol: ':/symbols/cloud.svg',
-            template_id: '1',
-            template_type: 'cloud'
-        } as CloudTemplate;
+  it('should be created', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    expect(service).toBeTruthy();
+  }));
 
-        service.saveTemplate(server, cloudtemplate).subscribe();
+  it('should update cloud template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    const cloudtemplate = {
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      default_name_format: 'Cloud{0}',
+      name: '',
+      ports_mapping: [],
+      remote_console_type: 'none',
+      symbol: ':/symbols/cloud.svg',
+      template_id: '1',
+      template_type: 'cloud',
+    } as CloudTemplate;
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(cloudtemplate);
-    }));
+    service.saveTemplate(server, cloudtemplate).subscribe();
 
-    it('should update ethernet hub template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        let ethernethubtemplate: EthernetHubTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            default_name_format: 'Hub{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/hub.svg',
-            template_id: '2',
-            template_type: 'ethernet_hub'
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(cloudtemplate);
+  }));
 
-        service.saveTemplate(server, ethernethubtemplate).subscribe();
+  it('should update ethernet hub template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    let ethernethubtemplate: EthernetHubTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      default_name_format: 'Hub{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/hub.svg',
+      template_id: '2',
+      template_type: 'ethernet_hub',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/2');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(ethernethubtemplate);
-    }));
+    service.saveTemplate(server, ethernethubtemplate).subscribe();
 
-    it('should update ethernet switch template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        let ethernetswitchtemplate: EthernetHubTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            default_name_format: 'Hub{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/hub.svg',
-            template_id: '3',
-            template_type: 'ethernet_hub'
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/2');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(ethernethubtemplate);
+  }));
 
-        service.saveTemplate(server, ethernetswitchtemplate).subscribe();
+  it('should update ethernet switch template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    let ethernetswitchtemplate: EthernetHubTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      default_name_format: 'Hub{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/hub.svg',
+      template_id: '3',
+      template_type: 'ethernet_hub',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/3');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(ethernetswitchtemplate);
-    }));
+    service.saveTemplate(server, ethernetswitchtemplate).subscribe();
 
-    it('should add cloud template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        const cloudtemplate = {
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            default_name_format: 'Cloud{0}',
-            name: '',
-            ports_mapping: [],
-            remote_console_type: 'none',
-            symbol: ':/symbols/cloud.svg',
-            template_id: '1',
-            template_type: 'cloud'
-        } as CloudTemplate;
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/3');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(ethernetswitchtemplate);
+  }));
 
-        service.addTemplate(server, cloudtemplate).subscribe();
+  it('should add cloud template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    const cloudtemplate = {
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      default_name_format: 'Cloud{0}',
+      name: '',
+      ports_mapping: [],
+      remote_console_type: 'none',
+      symbol: ':/symbols/cloud.svg',
+      template_id: '1',
+      template_type: 'cloud',
+    } as CloudTemplate;
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(cloudtemplate);
-    }));
+    service.addTemplate(server, cloudtemplate).subscribe();
 
-    it('should add ethernet hub template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        let ethernethubtemplate: EthernetHubTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            default_name_format: 'Hub{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/hub.svg',
-            template_id: '2',
-            template_type: 'ethernet_hub'
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(cloudtemplate);
+  }));
 
-        service.addTemplate(server, ethernethubtemplate).subscribe();
+  it('should add ethernet hub template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    let ethernethubtemplate: EthernetHubTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      default_name_format: 'Hub{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/hub.svg',
+      template_id: '2',
+      template_type: 'ethernet_hub',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(ethernethubtemplate);
-    }));
+    service.addTemplate(server, ethernethubtemplate).subscribe();
 
-    it('should add ethernet switch template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
-        let ethernetswitchtemplate: EthernetHubTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            default_name_format: 'Hub{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/hub.svg',
-            template_id: '3',
-            template_type: 'ethernet_hub'
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(ethernethubtemplate);
+  }));
 
-        service.addTemplate(server, ethernetswitchtemplate).subscribe();
+  it('should add ethernet switch template', inject([BuiltInTemplatesService], (service: BuiltInTemplatesService) => {
+    let ethernetswitchtemplate: EthernetHubTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      default_name_format: 'Hub{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/hub.svg',
+      template_id: '3',
+      template_type: 'ethernet_hub',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(ethernetswitchtemplate);
-    }));
+    service.addTemplate(server, ethernetswitchtemplate).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(ethernetswitchtemplate);
+  }));
 });
diff --git a/src/app/services/built-in-templates.service.ts b/src/app/services/built-in-templates.service.ts
index ebda6686..165e038e 100644
--- a/src/app/services/built-in-templates.service.ts
+++ b/src/app/services/built-in-templates.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -6,22 +6,25 @@ import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
 
 @Injectable()
 export class BuiltInTemplatesService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<any[]> {
-        return this.httpServer.get<any[]>(server, '/templates') as Observable<any[]>;
-    }
+  getTemplates(server: Server): Observable<any[]> {
+    return this.httpServer.get<any[]>(server, '/templates') as Observable<any[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<any> {
-        return this.httpServer.get<any>(server, `/templates/${template_id}`) as Observable<any>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<any> {
+    return this.httpServer.get<any>(server, `/templates/${template_id}`) as Observable<any>;
+  }
 
-    addTemplate(server: Server, builtInTemplate: any): Observable<any> {
-        return this.httpServer.post<any>(server, `/templates`, builtInTemplate) as Observable<any>;
-    }
+  addTemplate(server: Server, builtInTemplate: any): Observable<any> {
+    return this.httpServer.post<any>(server, `/templates`, builtInTemplate) as Observable<any>;
+  }
 
-    saveTemplate(server: Server, builtInTemplate: any): Observable<any> {
-        return this.httpServer.put<any>(server, `/templates/${builtInTemplate.template_id}`, builtInTemplate) as Observable<any>;
-
-    }
+  saveTemplate(server: Server, builtInTemplate: any): Observable<any> {
+    return this.httpServer.put<any>(
+      server,
+      `/templates/${builtInTemplate.template_id}`,
+      builtInTemplate
+    ) as Observable<any>;
+  }
 }
diff --git a/src/app/services/compute.service.ts b/src/app/services/compute.service.ts
index 9cc76014..5c270a44 100644
--- a/src/app/services/compute.service.ts
+++ b/src/app/services/compute.service.ts
@@ -7,17 +7,17 @@ import { ComputeStatistics } from '../models/computeStatistics';
 
 @Injectable()
 export class ComputeService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getComputes(server: Server): Observable<Compute[]> {
-        return this.httpServer.get<Compute[]>(server, '/computes') as Observable<Compute[]>;
-    }
+  getComputes(server: Server): Observable<Compute[]> {
+    return this.httpServer.get<Compute[]>(server, '/computes') as Observable<Compute[]>;
+  }
 
-    getUploadPath(server: Server, emulator: string, filename: string) {
-        return `${server.protocol}//${server.host}:${server.port}/v2/${emulator}/images/${filename}`;
-    }
+  getUploadPath(server: Server, emulator: string, filename: string) {
+    return `${server.protocol}//${server.host}:${server.port}/v2/${emulator}/images/${filename}`;
+  }
 
-    getStatistics(server: Server): Observable<ComputeStatistics[]> {
-        return this.httpServer.get(server, `/statistics`)
-    }
+  getStatistics(server: Server): Observable<ComputeStatistics[]> {
+    return this.httpServer.get(server, `/statistics`);
+  }
 }
diff --git a/src/app/services/docker-configuration.service.ts b/src/app/services/docker-configuration.service.ts
index d80a51d2..9a7dc7c0 100644
--- a/src/app/services/docker-configuration.service.ts
+++ b/src/app/services/docker-configuration.service.ts
@@ -1,32 +1,26 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DockerConfigurationService {
-    getConsoleTypes() {
-        return ['telnet', 'vnc', 'http', 'https', 'none'];
-    }
+  getConsoleTypes() {
+    return ['telnet', 'vnc', 'http', 'https', 'none'];
+  }
 
-    getCategories() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getConsoleResolutions() {
-        let consoleResolutions = [
-            '1920x1080',
-            '1366x768',
-            '1280x1024',
-            '1280x800',
-            '1024x768',
-            '800x600',
-            '640x480'
-        ];
+  getConsoleResolutions() {
+    let consoleResolutions = ['1920x1080', '1366x768', '1280x1024', '1280x800', '1024x768', '800x600', '640x480'];
 
-        return consoleResolutions;
-    }
+    return consoleResolutions;
+  }
 }
diff --git a/src/app/services/docker.service.ts b/src/app/services/docker.service.ts
index ef3ae345..2332061b 100644
--- a/src/app/services/docker.service.ts
+++ b/src/app/services/docker.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,26 +7,29 @@ import { DockerImage } from '../models/docker/docker-image';
 
 @Injectable()
 export class DockerService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<DockerTemplate[]> {
-        return this.httpServer.get<DockerTemplate[]>(server, '/templates') as Observable<DockerTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<DockerTemplate[]> {
+    return this.httpServer.get<DockerTemplate[]>(server, '/templates') as Observable<DockerTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<any> {
-        return this.httpServer.get<DockerTemplate>(server, `/templates/${template_id}`) as Observable<DockerTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<any> {
+    return this.httpServer.get<DockerTemplate>(server, `/templates/${template_id}`) as Observable<DockerTemplate>;
+  }
 
-    getImages(server: Server): Observable<DockerImage[]> {
-        return this.httpServer.get<DockerImage[]>(server, '/compute/docker/images') as Observable<DockerImage[]>;
-    }
+  getImages(server: Server): Observable<DockerImage[]> {
+    return this.httpServer.get<DockerImage[]>(server, '/compute/docker/images') as Observable<DockerImage[]>;
+  }
 
-    addTemplate(server: Server, dockerTemplate: any): Observable<any> {
-        return this.httpServer.post<DockerTemplate>(server, `/templates`, dockerTemplate) as Observable<DockerTemplate>;
-    }
+  addTemplate(server: Server, dockerTemplate: any): Observable<any> {
+    return this.httpServer.post<DockerTemplate>(server, `/templates`, dockerTemplate) as Observable<DockerTemplate>;
+  }
 
-    saveTemplate(server: Server, dockerTemplate: any): Observable<any> {
-        return this.httpServer.put<DockerTemplate>(server, `/templates/${dockerTemplate.template_id}`, dockerTemplate) as Observable<DockerTemplate>;
-
-    }
+  saveTemplate(server: Server, dockerTemplate: any): Observable<any> {
+    return this.httpServer.put<DockerTemplate>(
+      server,
+      `/templates/${dockerTemplate.template_id}`,
+      dockerTemplate
+    ) as Observable<DockerTemplate>;
+  }
 }
diff --git a/src/app/services/drawing.service.spec.ts b/src/app/services/drawing.service.spec.ts
index c95a10ba..23167709 100644
--- a/src/app/services/drawing.service.spec.ts
+++ b/src/app/services/drawing.service.spec.ts
@@ -21,7 +21,7 @@ describe('DrawingService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, SvgToDrawingConverter, DrawingService]
+      providers: [HttpServer, SvgToDrawingConverter, DrawingService],
     });
 
     httpClient = TestBed.get(HttpClient);
@@ -49,7 +49,7 @@ describe('DrawingService', () => {
     expect(req.request.method).toEqual('PUT');
     expect(req.request.body).toEqual({
       x: 10,
-      y: 20
+      y: 20,
     });
   }));
 
@@ -64,7 +64,7 @@ describe('DrawingService', () => {
     expect(req.request.method).toEqual('PUT');
     expect(req.request.body).toEqual({
       x: 10,
-      y: 21
+      y: 21,
     });
   }));
 
@@ -81,7 +81,7 @@ describe('DrawingService', () => {
     expect(req.request.body).toEqual({
       x: 100,
       y: 100,
-      svg: svgSample
+      svg: svgSample,
     });
   }));
 
@@ -100,7 +100,7 @@ describe('DrawingService', () => {
       expect(req.request.body).toEqual({
         x: 100,
         y: 101,
-        svg: svgSample
+        svg: svgSample,
       });
     }
   ));
@@ -126,7 +126,7 @@ describe('DrawingService', () => {
       z: 30,
       rotation: 0,
       svg: '<svg></svg>',
-      locked: false
+      locked: false,
     });
   }));
 
@@ -143,13 +143,14 @@ describe('DrawingService', () => {
 
   it('should duplicate drawing', inject([DrawingService], (service: DrawingService) => {
     const drawing = new Drawing();
-    drawing.project_id = "project_id_1";
-    drawing.drawing_id = "drawing_id_1";
+    drawing.project_id = 'project_id_1';
+    drawing.drawing_id = 'drawing_id_1';
     drawing.x = 100;
     drawing.y = 90;
     drawing.z = 1;
     drawing.rotation = 0;
-    drawing.svg = "<svg height=\"100\" width=\"200\"><rect fill=\"#ffffff\" fill-opacity=\"1.0\" height=\"100\" stroke=\"#000000\" stroke-width=\"2\" width=\"200\" /></svg>";
+    drawing.svg =
+      '<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" /></svg>';
 
     service.duplicate(server, drawing.project_id, drawing).subscribe();
 
@@ -160,7 +161,7 @@ describe('DrawingService', () => {
       rotation: 0,
       x: 110,
       y: 100,
-      z: 1
+      z: 1,
     });
   }));
 });
diff --git a/src/app/services/drawing.service.ts b/src/app/services/drawing.service.ts
index 9c71d620..e2536054 100644
--- a/src/app/services/drawing.service.ts
+++ b/src/app/services/drawing.service.ts
@@ -10,17 +10,14 @@ import { SvgToDrawingConverter } from '../cartography/helpers/svg-to-drawing-con
 
 @Injectable()
 export class DrawingService {
-  constructor(
-    private httpServer: HttpServer,
-    private svgToDrawingConverter: SvgToDrawingConverter
-  ) {}
+  constructor(private httpServer: HttpServer, private svgToDrawingConverter: SvgToDrawingConverter) {}
 
   add(server: Server, project_id: string, x: number, y: number, svg: string) {
     return this.httpServer.post<Drawing>(server, `/projects/${project_id}/drawings`, {
       svg: svg,
       x: Math.round(x),
       y: Math.round(y),
-      z: 1
+      z: 1,
     });
   }
 
@@ -30,7 +27,7 @@ export class DrawingService {
       rotation: drawing.rotation,
       x: drawing.x + 10,
       y: drawing.y + 10,
-      z: drawing.z
+      z: drawing.z,
     });
   }
 
@@ -41,16 +38,18 @@ export class DrawingService {
     if (project.snap_to_grid) {
       drawing.element = this.svgToDrawingConverter.convert(drawing.svg);
 
-      xPosition = Math.round((xPosition + drawing.element.width/2) / project.drawing_grid_size) * project.drawing_grid_size;
-      yPosition = Math.round((yPosition + drawing.element.width/2) / project.drawing_grid_size) * project.drawing_grid_size;
+      xPosition =
+        Math.round((xPosition + drawing.element.width / 2) / project.drawing_grid_size) * project.drawing_grid_size;
+      yPosition =
+        Math.round((yPosition + drawing.element.width / 2) / project.drawing_grid_size) * project.drawing_grid_size;
 
-      xPosition = Math.round(xPosition - drawing.element.width/2);
-      yPosition = Math.round(yPosition - drawing.element.height/2);
+      xPosition = Math.round(xPosition - drawing.element.width / 2);
+      yPosition = Math.round(yPosition - drawing.element.height / 2);
     }
 
     return this.httpServer.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
       x: xPosition,
-      y: yPosition
+      y: yPosition,
     });
   }
 
@@ -58,7 +57,7 @@ export class DrawingService {
     return this.httpServer.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
       svg: svg,
       x: Math.round(x),
-      y: Math.round(y)
+      y: Math.round(y),
     });
   }
 
@@ -67,7 +66,7 @@ export class DrawingService {
       svg: svg,
       x: Math.round(drawing.x),
       y: Math.round(drawing.y),
-      z: drawing.z
+      z: drawing.z,
     });
   }
 
@@ -78,7 +77,7 @@ export class DrawingService {
       rotation: drawing.rotation,
       x: Math.round(drawing.x),
       y: Math.round(drawing.y),
-      z: drawing.z
+      z: drawing.z,
     });
   }
 
diff --git a/src/app/services/external-software-definition.service.spec.ts b/src/app/services/external-software-definition.service.spec.ts
index de4b073d..94f9c5a3 100644
--- a/src/app/services/external-software-definition.service.spec.ts
+++ b/src/app/services/external-software-definition.service.spec.ts
@@ -18,7 +18,6 @@ class PlatformServiceMock {
   }
 }
 
-
 describe('ExternalSoftwareDefinitionService', () => {
   let platformServiceMock: PlatformServiceMock;
   let service: ExternalSoftwareDefinitionService;
@@ -27,16 +26,15 @@ describe('ExternalSoftwareDefinitionService', () => {
     platformServiceMock = new PlatformServiceMock();
   });
 
-  beforeEach(() => TestBed.configureTestingModule({
-    providers: [
-      ExternalSoftwareDefinitionService,
-      { provide: PlatformService, useValue: platformServiceMock}
-    ]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [ExternalSoftwareDefinitionService, { provide: PlatformService, useValue: platformServiceMock }],
+    })
+  );
 
   beforeEach(() => {
     service = TestBed.get(ExternalSoftwareDefinitionService);
-  })
+  });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
@@ -91,7 +89,5 @@ describe('ExternalSoftwareDefinitionService', () => {
       expect(darwinSpy).toHaveBeenCalled();
       expect(linuxSpy).not.toHaveBeenCalled();
     });
-
-  })
-
+  });
 });
diff --git a/src/app/services/external-software-definition.service.ts b/src/app/services/external-software-definition.service.ts
index 26fe75b3..f1443a78 100644
--- a/src/app/services/external-software-definition.service.ts
+++ b/src/app/services/external-software-definition.service.ts
@@ -4,53 +4,46 @@ import { environment } from '../../environments/environment';
 
 @Injectable()
 export class ExternalSoftwareDefinitionService {
-
-  constructor(
-    private platformService: PlatformService
-  ) { }
+  constructor(private platformService: PlatformService) {}
 
   get() {
-    if(this.platformService.isWindows()) {
+    if (this.platformService.isWindows()) {
       return this.getForWindows();
     }
-    if(this.platformService.isDarwin()) {
+    if (this.platformService.isDarwin()) {
       return this.getForDarwin();
     }
     return this.getForLinux();
   }
 
   getForWindows() {
-    let software = [{
+    let software = [
+      {
         name: 'Wireshark',
-        locations: [
-          'C:\\Program Files\\Wireshark\\Wireshark.exe'
-        ],
+        locations: ['C:\\Program Files\\Wireshark\\Wireshark.exe'],
         type: 'web',
         resource: 'https://1.na.dl.wireshark.org/win64/all-versions/Wireshark-win64-2.6.3.exe',
         binary: 'Wireshark.exe',
         sudo: true,
         installation_arguments: [],
         installed: false,
-        installer: true
-      }
+        installer: true,
+      },
     ];
 
     const solarPutty = {
       name: 'SolarPuTTY',
-      locations: [
-        'SolarPuTTY.exe',
-        'external\\SolarPuTTY.exe'
-      ],
+      locations: ['SolarPuTTY.exe', 'external\\SolarPuTTY.exe'],
       type: 'web',
       resource: '',
       binary: 'SolarPuTTY.exe',
       sudo: false,
       installation_arguments: ['--only-ask'],
       installed: false,
-      installer: false
+      installer: false,
     };
 
-    if(environment.solarputty_download_url) {
+    if (environment.solarputty_download_url) {
       solarPutty.resource = environment.solarputty_download_url;
       software.push(solarPutty);
     }
diff --git a/src/app/services/gns3vm.service.ts b/src/app/services/gns3vm.service.ts
index 5c83c7c6..5e95ce48 100644
--- a/src/app/services/gns3vm.service.ts
+++ b/src/app/services/gns3vm.service.ts
@@ -8,21 +8,21 @@ import { VM } from '../models/gns3vm/vm';
 
 @Injectable()
 export class Gns3vmService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getGns3vm(server: Server): Observable<Gns3vm> {
-        return this.httpServer.get<Gns3vm>(server, '/gns3vm') as Observable<Gns3vm>;
-    }
+  getGns3vm(server: Server): Observable<Gns3vm> {
+    return this.httpServer.get<Gns3vm>(server, '/gns3vm') as Observable<Gns3vm>;
+  }
 
-    updateGns3vm(server: Server, gns3vm: Gns3vm): Observable<Gns3vm> {
-        return this.httpServer.put<Gns3vm>(server, `/gns3vm`, gns3vm) as Observable<Gns3vm>;
-    }
+  updateGns3vm(server: Server, gns3vm: Gns3vm): Observable<Gns3vm> {
+    return this.httpServer.put<Gns3vm>(server, `/gns3vm`, gns3vm) as Observable<Gns3vm>;
+  }
 
-    getGns3vmEngines(server: Server): Observable<Gns3vmEngine[]> {
-        return this.httpServer.get<Gns3vmEngine[]>(server, '/gns3vm/engines') as Observable<Gns3vmEngine[]>;
-    }
+  getGns3vmEngines(server: Server): Observable<Gns3vmEngine[]> {
+    return this.httpServer.get<Gns3vmEngine[]>(server, '/gns3vm/engines') as Observable<Gns3vmEngine[]>;
+  }
 
-    getVms(server: Server, engine: string): Observable<VM[]> {
-        return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine}/vms`)
-    }
+  getVms(server: Server, engine: string): Observable<VM[]> {
+    return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine}/vms`);
+  }
 }
diff --git a/src/app/services/google-analytics.service.ts b/src/app/services/google-analytics.service.ts
index 0a963ac7..24511f9d 100644
--- a/src/app/services/google-analytics.service.ts
+++ b/src/app/services/google-analytics.service.ts
@@ -1,20 +1,17 @@
-
 import { Injectable } from '@angular/core';
-import {Router, NavigationEnd} from '@angular/router';
+import { Router, NavigationEnd } from '@angular/router';
 import { environment } from '../../environments/environment';
-declare var gtag:Function;
+declare var gtag: Function;
 
 @Injectable()
 export class GoogleAnalyticsService {
-
   constructor(router: Router) {
     if (!environment.production) return;
-    router.events.subscribe(event => {
+    router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         gtag('set', 'page', event.url);
         gtag('send', 'pageview');
       }
-    })
+    });
   }
-
 }
diff --git a/src/app/services/http-server.service.spec.ts b/src/app/services/http-server.service.spec.ts
index 4a4dded6..c96e0cd6 100644
--- a/src/app/services/http-server.service.spec.ts
+++ b/src/app/services/http-server.service.spec.ts
@@ -26,25 +26,25 @@ describe('ServerError', () => {
 });
 
 describe('ServerErrorHandler', () => {
-  it('should handle HttpErrorResponse with status 0', done => {
+  it('should handle HttpErrorResponse with status 0', (done) => {
     const error = new HttpErrorResponse({ status: 0 });
 
     const handler = new ServerErrorHandler();
     const result = handler.handleError(error);
 
-    result.subscribe(null, err => {
+    result.subscribe(null, (err) => {
       expect(err.message).toEqual('Server is unreachable');
       done();
     });
   });
 
-  it('should not handle HttpErrorResponse with status!=0', done => {
+  it('should not handle HttpErrorResponse with status!=0', (done) => {
     const error = new HttpErrorResponse({ status: 499 });
 
     const handler = new ServerErrorHandler();
     const result = handler.handleError(error);
 
-    result.subscribe(null, err => {
+    result.subscribe(null, (err) => {
       expect(err.message).toEqual('Http failure response for (unknown url): 499 undefined');
       done();
     });
@@ -60,7 +60,7 @@ describe('HttpServer', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer]
+      providers: [HttpServer],
     });
 
     httpClient = TestBed.get(HttpClient);
@@ -85,7 +85,7 @@ describe('HttpServer', () => {
   it('should make GET query for get method and return instance of type', () => {
     const testData: MyType = { id: 3 };
 
-    service.get<MyType>(server, '/test').subscribe(data => {
+    service.get<MyType>(server, '/test').subscribe((data) => {
       expect(data instanceof MyType).toBeFalsy();
       expect(data).toEqual(testData);
     });
@@ -100,7 +100,7 @@ describe('HttpServer', () => {
   it('HttpClient should make GET query for get method and return instance of type', () => {
     const testData: MyType = { id: 3 };
 
-    httpClient.get<MyType>('http://localhost/test').subscribe(data => {
+    httpClient.get<MyType>('http://localhost/test').subscribe((data) => {
       // when this condition is true, it would be great
       expect(data instanceof MyType).toBeFalsy();
       expect(data).toEqual(testData);
@@ -125,9 +125,9 @@ describe('HttpServer', () => {
     service
       .getText(server, '/test', {
         headers: {
-          CustomHeader: 'value'
+          CustomHeader: 'value',
         },
-        responseType: 'text'
+        responseType: 'text',
       })
       .subscribe();
 
@@ -205,8 +205,8 @@ describe('HttpServer', () => {
     service
       .get(server, '/test', {
         headers: {
-          CustomHeader: 'value'
-        }
+          CustomHeader: 'value',
+        },
       })
       .subscribe();
 
@@ -224,8 +224,8 @@ describe('HttpServer', () => {
     service
       .get(server, '/test', {
         headers: {
-          CustomHeader: 'value'
-        }
+          CustomHeader: 'value',
+        },
       })
       .subscribe();
 
diff --git a/src/app/services/http-server.service.ts b/src/app/services/http-server.service.ts
index e3742a78..e707df46 100644
--- a/src/app/services/http-server.service.ts
+++ b/src/app/services/http-server.service.ts
@@ -160,7 +160,7 @@ export class HttpServer {
   private getJsonOptions(options: JsonOptions): JsonOptions {
     if (!options) {
       return {
-        responseType: 'json'
+        responseType: 'json',
       };
     }
     return options;
@@ -169,7 +169,7 @@ export class HttpServer {
   private getTextOptions(options: TextOptions): TextOptions {
     if (!options) {
       return {
-        responseType: 'text'
+        responseType: 'text',
       };
     }
     return options;
@@ -196,7 +196,7 @@ export class HttpServer {
 
     return {
       url: url,
-      options: options
+      options: options,
     };
   }
 }
diff --git a/src/app/services/indexed-db.service.spec.ts b/src/app/services/indexed-db.service.spec.ts
index 52bfb800..361d75fc 100644
--- a/src/app/services/indexed-db.service.spec.ts
+++ b/src/app/services/indexed-db.service.spec.ts
@@ -5,7 +5,7 @@ import { IndexedDbService } from './indexed-db.service';
 describe('IndexedDbService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [IndexedDbService]
+      providers: [IndexedDbService],
     });
   });
 
diff --git a/src/app/services/info.service.ts b/src/app/services/info.service.ts
index 6d944159..0589aea4 100644
--- a/src/app/services/info.service.ts
+++ b/src/app/services/info.service.ts
@@ -1,77 +1,79 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { Node } from '../cartography/models/node';
 import { Port } from '../models/port';
 import { Server } from '../models/server';
 
 @Injectable()
 export class InfoService {
-    getInfoAboutNode(node: Node, server: Server): string[] {
-        let infoList: string[] = [];
-        if (node.node_type === 'cloud') {
-            infoList.push(`Cloud ${node.name} is always on.`);
-        } else if (node.node_type === 'nat') {
-            infoList.push(`NAT ${node.name} is always on.`);
-        } else if (node.node_type === 'ethernet-hub') {
-            infoList.push(`Ethernet hub ${node.name} is always on.`);
-        } else if (node.node_type === 'ethernet_switch') {
-            infoList.push(`Ethernet switch ${node.name} is always on.`);
-        } else if (node.node_type === 'frame_relay_switch') {
-            infoList.push(`Frame relay switch ${node.name} is always on.`);
-        } else if (node.node_type === 'atm_switch') {
-            infoList.push(`ATM switch ${node.name} is always on.`);
-        } else if (node.node_type === 'docker') {
-            infoList.push(`Docker ${node.name} is ${node.status}.`);
-        } else if (node.node_type === 'dynamips') {
-            infoList.push(`Dynamips ${node.name} is always on.`);
-        } else if (node.node_type === 'traceng') {
-            infoList.push(`TraceNG ${node.name} is always on.`);
-        } else if (node.node_type === 'virtualbox') {
-            infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
-        } else if (node.node_type === 'vmware') {
-            infoList.push(`VMware VM ${node.name} is ${node.status}.`);
-        } else if (node.node_type === 'qemu') {
-            infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
-        } else if (node.node_type === 'iou') {
-            infoList.push(`IOU ${node.name} is always on.`);
-        } else if (node.node_type === 'vpcs') {
-            infoList.push(`Node ${node.name} is ${node.status}.`);
-        }
-        infoList.push(`Running on server ${server.name} with port ${server.port}.`);
-        infoList.push(`Server ID is ${server.id}.`);
-        if (node.console_type !== 'none' && node.console_type !== 'null') {
-            infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
-        }
-        infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
-        return infoList;
+  getInfoAboutNode(node: Node, server: Server): string[] {
+    let infoList: string[] = [];
+    if (node.node_type === 'cloud') {
+      infoList.push(`Cloud ${node.name} is always on.`);
+    } else if (node.node_type === 'nat') {
+      infoList.push(`NAT ${node.name} is always on.`);
+    } else if (node.node_type === 'ethernet-hub') {
+      infoList.push(`Ethernet hub ${node.name} is always on.`);
+    } else if (node.node_type === 'ethernet_switch') {
+      infoList.push(`Ethernet switch ${node.name} is always on.`);
+    } else if (node.node_type === 'frame_relay_switch') {
+      infoList.push(`Frame relay switch ${node.name} is always on.`);
+    } else if (node.node_type === 'atm_switch') {
+      infoList.push(`ATM switch ${node.name} is always on.`);
+    } else if (node.node_type === 'docker') {
+      infoList.push(`Docker ${node.name} is ${node.status}.`);
+    } else if (node.node_type === 'dynamips') {
+      infoList.push(`Dynamips ${node.name} is always on.`);
+    } else if (node.node_type === 'traceng') {
+      infoList.push(`TraceNG ${node.name} is always on.`);
+    } else if (node.node_type === 'virtualbox') {
+      infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
+    } else if (node.node_type === 'vmware') {
+      infoList.push(`VMware VM ${node.name} is ${node.status}.`);
+    } else if (node.node_type === 'qemu') {
+      infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
+    } else if (node.node_type === 'iou') {
+      infoList.push(`IOU ${node.name} is always on.`);
+    } else if (node.node_type === 'vpcs') {
+      infoList.push(`Node ${node.name} is ${node.status}.`);
     }
+    infoList.push(`Running on server ${server.name} with port ${server.port}.`);
+    infoList.push(`Server ID is ${server.id}.`);
+    if (node.console_type !== 'none' && node.console_type !== 'null') {
+      infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
+    }
+    infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
+    return infoList;
+  }
 
-    getInfoAboutPorts(ports: Port[]): string {
-        let response: string = `Ports: `
-        ports.forEach(port => {
-            response += `link_type: ${port.link_type}, 
-                        name: ${port.name}; `
-        });
-        response = response.substring(0, response.length - 2);
-        return response;
-    }
+  getInfoAboutPorts(ports: Port[]): string {
+    let response: string = `Ports: `;
+    ports.forEach((port) => {
+      response += `link_type: ${port.link_type}, 
+                        name: ${port.name}; `;
+    });
+    response = response.substring(0, response.length - 2);
+    return response;
+  }
 
-    getCommandLine(node: Node): string {
-        if (node.node_type ===  "cloud" || 
-            node.node_type ===  "nat" || 
-            node.node_type ===  "ethernet_hub" || 
-            node.node_type ===  "ethernet_switch" || 
-            node.node_type ===  "frame_relay_switch" || 
-            node.node_type ===  "atm_switch" || 
-            node.node_type ===  "dynamips" || 
-            node.node_type ===  "traceng" || 
-            node.node_type ===  "iou") {
-            return 'Command line information is not supported for this type of node.';
-        } else {
-            if (node.command_line) {
-                return node.command_line;
-            } else {
-                return 'Please start the node in order to get the command line information.';
-            }
-        }
+  getCommandLine(node: Node): string {
+    if (
+      node.node_type === 'cloud' ||
+      node.node_type === 'nat' ||
+      node.node_type === 'ethernet_hub' ||
+      node.node_type === 'ethernet_switch' ||
+      node.node_type === 'frame_relay_switch' ||
+      node.node_type === 'atm_switch' ||
+      node.node_type === 'dynamips' ||
+      node.node_type === 'traceng' ||
+      node.node_type === 'iou'
+    ) {
+      return 'Command line information is not supported for this type of node.';
+    } else {
+      if (node.command_line) {
+        return node.command_line;
+      } else {
+        return 'Please start the node in order to get the command line information.';
+      }
     }
+  }
 }
diff --git a/src/app/services/installed-software.service.ts b/src/app/services/installed-software.service.ts
index 1e64eef5..f66b4f20 100644
--- a/src/app/services/installed-software.service.ts
+++ b/src/app/services/installed-software.service.ts
@@ -7,18 +7,18 @@ export class InstalledSoftwareService {
   constructor(
     private electronService: ElectronService,
     private externalSoftwareDefinition: ExternalSoftwareDefinitionService
-  ) { }
+  ) {}
 
   list() {
     const softwareDefinition = this.externalSoftwareDefinition.get();
 
-    const installedSoftware = this.electronService.remote.require('./installed-software.js')
+    const installedSoftware = this.electronService.remote
+      .require('./installed-software.js')
       .getInstalledSoftware(softwareDefinition);
-    
+
     return softwareDefinition.map((software) => {
       software.installed = installedSoftware[software.name].length > 0;
       return software;
     });
   }
-
 }
diff --git a/src/app/services/ios-configuration.service.ts b/src/app/services/ios-configuration.service.ts
index dd3f49c6..8b048980 100644
--- a/src/app/services/ios-configuration.service.ts
+++ b/src/app/services/ios-configuration.service.ts
@@ -1,277 +1,248 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class IosConfigurationService {
-    c1700_wics = ["WIC-1T", "WIC-2T", "WIC-1ENET"];
-    c2600_wics = ["WIC-1T", "WIC-2T"];
-    c3700_wics = ["WIC-1T", "WIC-2T"];
+  c1700_wics = ['WIC-1T', 'WIC-2T', 'WIC-1ENET'];
+  c2600_wics = ['WIC-1T', 'WIC-2T'];
+  c3700_wics = ['WIC-1T', 'WIC-2T'];
 
-    c2600_nms = [
-        "NM-1FE-TX",
-        "NM-1E",
-        "NM-4E",
-        "NM-16ESW"
-    ];
-    c3600_nms = [
-        "NM-1FE-TX",
-        "NM-1E",
-        "NM-4E",
-        "NM-16ESW",
-        "NM-4T"
-    ];
-    c3700_nms = [
-        "NM-1FE-TX",
-        "NM-4T",
-        "NM-16ESW",
-    ];
-    c7200_pas = [
-        "PA-A1",
-        "PA-FE-TX",
-        "PA-2FE-TX",
-        "PA-GE",
-        "PA-4T+",
-        "PA-8T",
-        "PA-4E",
-        "PA-8E",
-        "PA-POS-OC3",
-    ];
-    c7200_io = [
-        "C7200-IO-FE",
-        "C7200-IO-2FE",
-        "C7200-IO-GE-E"
-    ];
+  c2600_nms = ['NM-1FE-TX', 'NM-1E', 'NM-4E', 'NM-16ESW'];
+  c3600_nms = ['NM-1FE-TX', 'NM-1E', 'NM-4E', 'NM-16ESW', 'NM-4T'];
+  c3700_nms = ['NM-1FE-TX', 'NM-4T', 'NM-16ESW'];
+  c7200_pas = ['PA-A1', 'PA-FE-TX', 'PA-2FE-TX', 'PA-GE', 'PA-4T+', 'PA-8T', 'PA-4E', 'PA-8E', 'PA-POS-OC3'];
+  c7200_io = ['C7200-IO-FE', 'C7200-IO-2FE', 'C7200-IO-GE-E'];
 
-    getConsoleTypes() {
-        return ['telnet', 'none'];
-    }
+  getConsoleTypes() {
+    return ['telnet', 'none'];
+  }
 
-    getDefaultRamSettings() {
-        return {   
-            "c1700": 160,
-            "c2600": 160,
-            "c2691": 192,
-            "c3600": 192,
-            "c3725": 128,
-            "c3745": 256,
-            "c7200": 512
-        };
-    }
+  getDefaultRamSettings() {
+    return {
+      c1700: 160,
+      c2600: 160,
+      c2691: 192,
+      c3600: 192,
+      c3725: 128,
+      c3745: 256,
+      c7200: 512,
+    };
+  }
 
-    getDefaultNvRamSettings() {
-        return {
-            "c1700": 128,
-            "c2600": 128,
-            "c2691": 256,
-            "c3600": 192,
-            "c3620": 192,
-            "c3640": 192,
-            "c3660": 192,
-            "c3725": 256,
-            "c3745": 256,
-            "c7200": 512
-        };
+  getDefaultNvRamSettings() {
+    return {
+      c1700: 128,
+      c2600: 128,
+      c2691: 256,
+      c3600: 192,
+      c3620: 192,
+      c3640: 192,
+      c3660: 192,
+      c3725: 256,
+      c3745: 256,
+      c7200: 512,
+    };
+  }
+
+  getAvailablePlatforms() {
+    return ['c1700', 'c2600', 'c2691', 'c3725', 'c3745', 'c3600', 'c7200'];
+  }
+
+  getPlatformsWithEtherSwitchRouterOption() {
+    return {
+      c1700: false,
+      c2600: true,
+      c2691: true,
+      c3725: true,
+      c3745: true,
+      c3600: true,
+      c7200: false,
+    };
+  }
+
+  getPlatformsWithChassis() {
+    return {
+      c1700: true,
+      c2600: true,
+      c2691: false,
+      c3725: false,
+      c3745: false,
+      c3600: true,
+      c7200: false,
+    };
+  }
+
+  getChassis() {
+    return {
+      c1700: ['1720', '1721', '1750', '1751', '1760'],
+      c2600: ['2610', '2611', '2620', '2621', '2610XM', '2611XM', '2620XM', '2621XM', '2650XM', '2651XM'],
+      c3600: ['3620', '3640', '3660'],
+    };
+  }
+
+  getNetworkModules() {
+    return {
+      c1700: {
+        0: this.c1700_wics,
+        1: this.c1700_wics,
+      },
+      c2600: {
+        0: this.c2600_wics,
+        1: this.c2600_wics,
+        2: this.c2600_wics,
+      },
+      c2691: {
+        0: this.c3700_wics,
+        1: this.c3700_wics,
+        2: this.c3700_wics,
+      },
+      c3725: {
+        0: this.c3700_wics,
+        1: this.c3700_wics,
+        2: this.c3700_wics,
+      },
+      c3745: {
+        0: this.c3700_wics,
+        1: this.c3700_wics,
+        2: this.c3700_wics,
+      },
+    };
+  }
+
+  getNetworkAdapters() {
+    return {
+      '1720': {
+        0: ['C1700-MB-1FE'],
+      },
+      '1721': {
+        0: ['C1700-MB-1FE'],
+      },
+      '1750': {
+        0: ['C1700-MB-1FE'],
+      },
+      '1751': {
+        0: ['C1700-MB-1FE'],
+        1: ['C1700-MB-WIC1'],
+      },
+      '1760': {
+        0: ['C1700-MB-1FE'],
+        1: ['C1700-MB-WIC1'],
+      },
+      '2610': {
+        0: ['C2600-MB-1E'],
+        1: this.c2600_nms,
+      },
+      '2611': {
+        0: ['C2600-MB-2E'],
+        1: this.c2600_nms,
+      },
+      '2620': {
+        0: ['C2600-MB-1FE'],
+        1: this.c2600_nms,
+      },
+      '2621': {
+        0: ['C2600-MB-2FE'],
+        1: this.c2600_nms,
+      },
+      '2610XM': {
+        0: ['C2600-MB-1FE'],
+        1: this.c2600_nms,
+      },
+      '2611XM': {
+        0: ['C2600-MB-2FE'],
+        1: this.c2600_nms,
+      },
+      '2620XM': {
+        0: ['C2600-MB-1FE'],
+        1: this.c2600_nms,
+      },
+      '2621XM': {
+        0: ['C2600-MB-2FE'],
+        1: this.c2600_nms,
+      },
+      '2650XM': {
+        0: ['C2600-MB-1FE'],
+        1: this.c2600_nms,
+      },
+      '2651XM': {
+        0: ['C2600-MB-2FE'],
+        1: this.c2600_nms,
+      },
+      '3620': {
+        0: this.c3600_nms,
+        1: this.c3600_nms,
+      },
+      '3640': {
+        0: this.c3600_nms,
+        1: this.c3600_nms,
+        2: this.c3600_nms,
+        3: this.c3600_nms,
+      },
+      '3660': {
+        0: ['Leopard-2FE'],
+        1: this.c3600_nms,
+        2: this.c3600_nms,
+        3: this.c3600_nms,
+        4: this.c3600_nms,
+        5: this.c3600_nms,
+        6: this.c3600_nms,
+      },
+    };
+  }
+
+  getNetworkAdaptersForPlatform() {
+    let networkAdaptersForPlatform = {};
+    networkAdaptersForPlatform['c2691'] = {
+      0: ['GT96100-FE'],
+      1: this.c3700_nms,
+    };
+    networkAdaptersForPlatform['c3725'] = {
+      0: ['GT96100-FE'],
+      1: this.c3700_nms,
+      2: this.c3700_nms,
+    };
+    networkAdaptersForPlatform['c3745'] = {
+      0: ['GT96100-FE'],
+      1: this.c3700_nms,
+      2: this.c3700_nms,
+      3: this.c3700_nms,
+      4: this.c3700_nms,
+    };
+    networkAdaptersForPlatform['c7200'] = {
+      0: this.c7200_io,
+      1: this.c7200_pas,
+      2: this.c7200_pas,
+      3: this.c7200_pas,
+      4: this.c7200_pas,
+      5: this.c7200_pas,
+      6: this.c7200_pas,
     };
 
-    getAvailablePlatforms() {
-        return ["c1700", "c2600", "c2691", "c3725", "c3745", "c3600", "c7200"];
-    }
-
-    getPlatformsWithEtherSwitchRouterOption() {
-        return {
-            "c1700": false, 
-            "c2600": true, 
-            "c2691": true, 
-            "c3725": true, 
-            "c3745": true, 
-            "c3600": true, 
-            "c7200": false
-        };
-    }
-
-    getPlatformsWithChassis() {
-        return {
-            "c1700": true, 
-            "c2600": true, 
-            "c2691": false, 
-            "c3725": false, 
-            "c3745": false, 
-            "c3600": true, 
-            "c7200": false
-        };
-    }
-
-    getChassis() {
-        return {
-            "c1700": ["1720", "1721", "1750", "1751", "1760"],
-            "c2600": ["2610", "2611", "2620", "2621", "2610XM", "2611XM", "2620XM", "2621XM", "2650XM", "2651XM"],
-            "c3600": ["3620", "3640", "3660"]
-        };
-    }
-    
-    getNetworkModules() {
-        return {
-            "c1700": {
-                0: this.c1700_wics,
-                1: this.c1700_wics
-            },
-            "c2600": {
-                0: this.c2600_wics,
-                1: this.c2600_wics,
-                2: this.c2600_wics
-            },
-            "c2691": {
-                0: this.c3700_wics,
-                1: this.c3700_wics,
-                2: this.c3700_wics
-            },
-            "c3725": {
-                0: this.c3700_wics,
-                1: this.c3700_wics,
-                2: this.c3700_wics
-            },
-            "c3745": {
-                0: this.c3700_wics,
-                1: this.c3700_wics,
-                2: this.c3700_wics
-            }
-        };
-    }
-
-    getNetworkAdapters() {
-        return {
-            "1720": {
-                0: ["C1700-MB-1FE"]
-            },
-            "1721": {
-                0: ["C1700-MB-1FE"]
-            },
-            "1750": {
-                0: ["C1700-MB-1FE"]
-            },
-            "1751": {
-                0: ["C1700-MB-1FE"],
-                1: ["C1700-MB-WIC1"]
-            },
-            "1760": {
-                0: ["C1700-MB-1FE"],
-                1: ["C1700-MB-WIC1"]
-            },
-            "2610": {
-                0: ["C2600-MB-1E"],
-                1: this.c2600_nms
-            }, 
-            "2611": {
-                0: ["C2600-MB-2E"],
-                1: this.c2600_nms
-            }, 
-            "2620": {
-                0: ["C2600-MB-1FE"],
-                1: this.c2600_nms
-            }, 
-            "2621": {
-                0: ["C2600-MB-2FE"],
-                1: this.c2600_nms
-            }, 
-            "2610XM": {
-                0: ["C2600-MB-1FE"],
-                1: this.c2600_nms
-            }, 
-            "2611XM": {
-                0: ["C2600-MB-2FE"],
-                1: this.c2600_nms
-            }, 
-            "2620XM": {
-                0: ["C2600-MB-1FE"],
-                1: this.c2600_nms
-            }, 
-            "2621XM": {
-                0: ["C2600-MB-2FE"],
-                1: this.c2600_nms
-            }, 
-            "2650XM": {
-                0: ["C2600-MB-1FE"],
-                1: this.c2600_nms
-            }, 
-            "2651XM": {
-                0: ["C2600-MB-2FE"],
-                1: this.c2600_nms
-            }, 
-            "3620": {
-                0: this.c3600_nms,
-                1: this.c3600_nms
-            }, 
-            "3640": {
-                0: this.c3600_nms,
-                1: this.c3600_nms,
-                2: this.c3600_nms,
-                3: this.c3600_nms
-            }, 
-            "3660": {
-                0: ["Leopard-2FE"],
-                1: this.c3600_nms,
-                2: this.c3600_nms,
-                3: this.c3600_nms,
-                4: this.c3600_nms,
-                5: this.c3600_nms,
-                6: this.c3600_nms
-            }
-        };
-    }
-
-    getNetworkAdaptersForPlatform() {
-        let networkAdaptersForPlatform = {};
-        networkAdaptersForPlatform["c2691"] = {
-            0: ["GT96100-FE"],
-            1: this.c3700_nms
-        };
-        networkAdaptersForPlatform["c3725"] = {
-            0: ["GT96100-FE"],
-            1:  this.c3700_nms,
-            2:  this.c3700_nms
-        };
-        networkAdaptersForPlatform["c3745"] = {
-            0: ["GT96100-FE"],
-            1: this.c3700_nms,
-            2: this.c3700_nms,
-            3: this.c3700_nms,
-            4: this.c3700_nms
-        };
-        networkAdaptersForPlatform["c7200"] = {
-            0: this.c7200_io,
-            1: this.c7200_pas,
-            2: this.c7200_pas,
-            3: this.c7200_pas,
-            4: this.c7200_pas,
-            5: this.c7200_pas,
-            6: this.c7200_pas
-        };
-
-        return {
-            "c2691": {
-                0: ["GT96100-FE"],
-                1: this.c3700_nms
-            },
-            "c3725": {
-                0: ["GT96100-FE"],
-                1:  this.c3700_nms,
-                2:  this.c3700_nms
-            },
-            "c3745": {
-                0: ["GT96100-FE"],
-                1: this.c3700_nms,
-                2: this.c3700_nms,
-                3: this.c3700_nms,
-                4: this.c3700_nms
-            },
-            "c7200": {
-                0: this.c7200_io,
-                1: this.c7200_pas,
-                2: this.c7200_pas,
-                3: this.c7200_pas,
-                4: this.c7200_pas,
-                5: this.c7200_pas,
-                6: this.c7200_pas
-            }
-        };
-    }
+    return {
+      c2691: {
+        0: ['GT96100-FE'],
+        1: this.c3700_nms,
+      },
+      c3725: {
+        0: ['GT96100-FE'],
+        1: this.c3700_nms,
+        2: this.c3700_nms,
+      },
+      c3745: {
+        0: ['GT96100-FE'],
+        1: this.c3700_nms,
+        2: this.c3700_nms,
+        3: this.c3700_nms,
+        4: this.c3700_nms,
+      },
+      c7200: {
+        0: this.c7200_io,
+        1: this.c7200_pas,
+        2: this.c7200_pas,
+        3: this.c7200_pas,
+        4: this.c7200_pas,
+        5: this.c7200_pas,
+        6: this.c7200_pas,
+      },
+    };
+  }
 }
diff --git a/src/app/services/ios.service.ts b/src/app/services/ios.service.ts
index ae1f0704..8287e899 100644
--- a/src/app/services/ios.service.ts
+++ b/src/app/services/ios.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,29 +7,33 @@ import { IosImage } from '../models/images/ios-image';
 
 @Injectable()
 export class IosService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getImages(server: Server): Observable<any> {
-        return this.httpServer.get<IosImage[]>(server, '/compute/dynamips/images') as Observable<IosImage[]>;
-    } 
+  getImages(server: Server): Observable<any> {
+    return this.httpServer.get<IosImage[]>(server, '/compute/dynamips/images') as Observable<IosImage[]>;
+  }
 
-    getImagePath(server: Server, filename: string): string {
-        return `${server.protocol}//${server.host}:${server.port}/v2/compute/dynamips/images/${filename}`;
-    }
+  getImagePath(server: Server, filename: string): string {
+    return `${server.protocol}//${server.host}:${server.port}/v2/compute/dynamips/images/${filename}`;
+  }
 
-    getTemplates(server: Server): Observable<IosTemplate[]> {
-        return this.httpServer.get<IosTemplate[]>(server, '/templates') as Observable<IosTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<IosTemplate[]> {
+    return this.httpServer.get<IosTemplate[]>(server, '/templates') as Observable<IosTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<IosTemplate> {
-        return this.httpServer.get<IosTemplate>(server, `/templates/${template_id}`) as Observable<IosTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<IosTemplate> {
+    return this.httpServer.get<IosTemplate>(server, `/templates/${template_id}`) as Observable<IosTemplate>;
+  }
 
-    addTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
-        return this.httpServer.post<IosTemplate>(server, `/templates`, iosTemplate) as Observable<IosTemplate>;
-    }
+  addTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
+    return this.httpServer.post<IosTemplate>(server, `/templates`, iosTemplate) as Observable<IosTemplate>;
+  }
 
-    saveTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
-        return this.httpServer.put<IosTemplate>(server, `/templates/${iosTemplate.template_id}`, iosTemplate) as Observable<IosTemplate>;
-    }
+  saveTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
+    return this.httpServer.put<IosTemplate>(
+      server,
+      `/templates/${iosTemplate.template_id}`,
+      iosTemplate
+    ) as Observable<IosTemplate>;
+  }
 }
diff --git a/src/app/services/iou-configuration.service.ts b/src/app/services/iou-configuration.service.ts
index 80cbabc8..6f978fab 100644
--- a/src/app/services/iou-configuration.service.ts
+++ b/src/app/services/iou-configuration.service.ts
@@ -1,18 +1,20 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class IouConfigurationService {
-    getConsoleTypes() {
-        return ['telnet', 'none'];
-    }
+  getConsoleTypes() {
+    return ['telnet', 'none'];
+  }
 
-    getCategories() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 }
diff --git a/src/app/services/iou.service.ts b/src/app/services/iou.service.ts
index 9dd95bed..34353e23 100644
--- a/src/app/services/iou.service.ts
+++ b/src/app/services/iou.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,30 +7,33 @@ import { IouImage } from '../models/iou/iou-image';
 
 @Injectable()
 export class IouService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<IouTemplate[]> {
-        return this.httpServer.get<IouTemplate[]>(server, '/templates') as Observable<IouTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<IouTemplate[]> {
+    return this.httpServer.get<IouTemplate[]>(server, '/templates') as Observable<IouTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<any> {
-        return this.httpServer.get<IouTemplate>(server, `/templates/${template_id}`) as Observable<IouTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<any> {
+    return this.httpServer.get<IouTemplate>(server, `/templates/${template_id}`) as Observable<IouTemplate>;
+  }
 
-    getImages(server: Server): Observable<any> {
-        return this.httpServer.get<IouImage[]>(server, '/compute/iou/images') as Observable<IouImage[]>;
-    }
+  getImages(server: Server): Observable<any> {
+    return this.httpServer.get<IouImage[]>(server, '/compute/iou/images') as Observable<IouImage[]>;
+  }
 
-    getImagePath(server: Server, filename: string): string {
-        return `${server.protocol}//${server.host}:${server.port}/v2/compute/iou/images/${filename}`;
-    }
+  getImagePath(server: Server, filename: string): string {
+    return `${server.protocol}//${server.host}:${server.port}/v2/compute/iou/images/${filename}`;
+  }
 
-    addTemplate(server: Server, iouTemplate: any): Observable<any> {
-        return this.httpServer.post<IouTemplate>(server, `/templates`, iouTemplate) as Observable<IouTemplate>;
-    }
+  addTemplate(server: Server, iouTemplate: any): Observable<any> {
+    return this.httpServer.post<IouTemplate>(server, `/templates`, iouTemplate) as Observable<IouTemplate>;
+  }
 
-    saveTemplate(server: Server, iouTemplate: any): Observable<any> {
-        return this.httpServer.put<IouTemplate>(server, `/templates/${iouTemplate.template_id}`, iouTemplate) as Observable<IouTemplate>;
-
-    }
+  saveTemplate(server: Server, iouTemplate: any): Observable<any> {
+    return this.httpServer.put<IouTemplate>(
+      server,
+      `/templates/${iouTemplate.template_id}`,
+      iouTemplate
+    ) as Observable<IouTemplate>;
+  }
 }
diff --git a/src/app/services/link.service.spec.ts b/src/app/services/link.service.spec.ts
index e532b615..b93b43e3 100644
--- a/src/app/services/link.service.spec.ts
+++ b/src/app/services/link.service.spec.ts
@@ -19,7 +19,7 @@ describe('LinkService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, LinkService]
+      providers: [HttpServer, LinkService],
     });
 
     httpClient = TestBed.get(HttpClient);
@@ -64,11 +64,11 @@ describe('LinkService', () => {
           adapter_number: 2,
           label: {
             rotation: 0,
-            style: "font-size: 10; font-style: Verdana",
+            style: 'font-size: 10; font-style: Verdana',
             text: sourcePort.short_name,
             x: 0,
-            y: 0
-          }
+            y: 0,
+          },
         },
         {
           node_id: 'targetid',
@@ -76,13 +76,13 @@ describe('LinkService', () => {
           adapter_number: 4,
           label: {
             rotation: 0,
-            style: "font-size: 10; font-style: Verdana",
+            style: 'font-size: 10; font-style: Verdana',
             text: sourcePort.short_name,
             x: 10,
-            y: 10
-          }
-        }
-      ]
+            y: 10,
+          },
+        },
+      ],
     });
   }));
 });
diff --git a/src/app/services/link.service.ts b/src/app/services/link.service.ts
index b2cdc22f..cc9827b4 100644
--- a/src/app/services/link.service.ts
+++ b/src/app/services/link.service.ts
@@ -14,8 +14,17 @@ import { CapturingSettings } from '../models/capturingSettings';
 export class LinkService {
   constructor(private httpServer: HttpServer) {}
 
-  createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port,
-    xLabelSourceNode: number, yLabelSourceNode: number, xLabelTargetNode: number, yLabelTargetNode: number) {
+  createLink(
+    server: Server,
+    source_node: Node,
+    source_port: Port,
+    target_node: Node,
+    target_port: Port,
+    xLabelSourceNode: number,
+    yLabelSourceNode: number,
+    xLabelTargetNode: number,
+    yLabelTargetNode: number
+  ) {
     return this.httpServer.post(server, `/projects/${source_node.project_id}/links`, {
       nodes: [
         {
@@ -24,11 +33,11 @@ export class LinkService {
           adapter_number: source_port.adapter_number,
           label: {
             rotation: 0,
-            style: "font-size: 10; font-style: Verdana",
+            style: 'font-size: 10; font-style: Verdana',
             text: source_port.short_name,
             x: xLabelSourceNode,
-            y: yLabelSourceNode
-          }
+            y: yLabelSourceNode,
+          },
         },
         {
           node_id: target_node.node_id,
@@ -36,13 +45,13 @@ export class LinkService {
           adapter_number: target_port.adapter_number,
           label: {
             rotation: 0,
-            style: "font-size: 10; font-style: Verdana",
+            style: 'font-size: 10; font-style: Verdana',
             text: target_port.short_name,
             x: xLabelTargetNode,
-            y: yLabelTargetNode
-          }
-        }
-      ]
+            y: yLabelTargetNode,
+          },
+        },
+      ],
     });
   }
 
@@ -51,22 +60,25 @@ export class LinkService {
   }
 
   deleteLink(server: Server, link: Link) {
-    return this.httpServer.delete(server, `/projects/${link.project_id}/links/${link.link_id}`)
+    return this.httpServer.delete(server, `/projects/${link.project_id}/links/${link.link_id}`);
   }
 
   updateLink(server: Server, link: Link) {
     link.x = Math.round(link.x);
     link.y = Math.round(link.y);
-    
+
     return this.httpServer.put<Link>(server, `/projects/${link.project_id}/links/${link.link_id}`, link);
   }
 
   getAvailableFilters(server: Server, link: Link) {
-    return this.httpServer.get<FilterDescription[]>(server, `/projects/${link.project_id}/links/${link.link_id}/available_filters`);
+    return this.httpServer.get<FilterDescription[]>(
+      server,
+      `/projects/${link.project_id}/links/${link.link_id}/available_filters`
+    );
   }
 
   updateNodes(server: Server, link: Link, nodes: LinkNode[]) {
-    const requestNodes = nodes.map(linkNode => {
+    const requestNodes = nodes.map((linkNode) => {
       return {
         node_id: linkNode.node_id,
         port_number: linkNode.port_number,
@@ -76,8 +88,8 @@ export class LinkService {
           style: linkNode.label.style,
           text: linkNode.label.text,
           x: linkNode.label.x,
-          y: linkNode.label.y
-        }
+          y: linkNode.label.y,
+        },
       };
     });
 
@@ -93,6 +105,6 @@ export class LinkService {
   }
 
   streamPcap(server: Server, link: Link) {
-    return this.httpServer.get(server, `/projects/${link.project_id}/links/${link.link_id}/pcap`)
+    return this.httpServer.get(server, `/projects/${link.project_id}/links/${link.link_id}/pcap`);
   }
 }
diff --git a/src/app/services/mapScale.service.ts b/src/app/services/mapScale.service.ts
index cae1ad87..ee5d1c68 100644
--- a/src/app/services/mapScale.service.ts
+++ b/src/app/services/mapScale.service.ts
@@ -3,28 +3,26 @@ import { Context } from '../cartography/models/context';
 
 @Injectable()
 export class MapScaleService {
-    public currentScale: number;
-    public scaleChangeEmitter = new EventEmitter();
+  public currentScale: number;
+  public scaleChangeEmitter = new EventEmitter();
 
-    constructor(
-        private context: Context
-    ) {
-        this.currentScale = 1;
-    }
+  constructor(private context: Context) {
+    this.currentScale = 1;
+  }
 
-    getScale() {
-        return this.currentScale;
-    }
+  getScale() {
+    return this.currentScale;
+  }
 
-    setScale(newScale: number) {
-        this.currentScale = newScale;
-        this.context.transformation.k = this.currentScale;
-        this.scaleChangeEmitter.emit(this.currentScale);
-    }
+  setScale(newScale: number) {
+    this.currentScale = newScale;
+    this.context.transformation.k = this.currentScale;
+    this.scaleChangeEmitter.emit(this.currentScale);
+  }
 
-    resetToDefault() {
-        this.currentScale = 1;
-        this.context.transformation.k = this.currentScale;
-        this.scaleChangeEmitter.emit(this.currentScale);
-    }
+  resetToDefault() {
+    this.currentScale = 1;
+    this.context.transformation.k = this.currentScale;
+    this.scaleChangeEmitter.emit(this.currentScale);
+  }
 }
diff --git a/src/app/services/mapsettings.service.ts b/src/app/services/mapsettings.service.ts
index a54700c5..664e2b02 100644
--- a/src/app/services/mapsettings.service.ts
+++ b/src/app/services/mapsettings.service.ts
@@ -1,83 +1,84 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable, EventEmitter } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root',
 })
 export class MapSettingsService {
-    public symbolScalingSubject : Subject<boolean> = new Subject<boolean>();
-    
-    public isScrollDisabled = new Subject<boolean>();
-    public isMapLocked = new Subject<boolean>();
-    public isTopologySummaryVisible: boolean = true;
-    public isLogConsoleVisible: boolean = false;
-    public isLayerNumberVisible: boolean = false;
-    public logConsoleSubject = new Subject<boolean>();
-    public mapRenderedEmitter = new EventEmitter<boolean>();
+  public symbolScalingSubject: Subject<boolean> = new Subject<boolean>();
 
-    public showInterfaceLabels: boolean = true;
-    public integrateLinkLabelsToLinks: boolean = true;
+  public isScrollDisabled = new Subject<boolean>();
+  public isMapLocked = new Subject<boolean>();
+  public isTopologySummaryVisible: boolean = true;
+  public isLogConsoleVisible: boolean = false;
+  public isLayerNumberVisible: boolean = false;
+  public logConsoleSubject = new Subject<boolean>();
+  public mapRenderedEmitter = new EventEmitter<boolean>();
 
-    constructor() {
-        this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
-        if (localStorage.getItem('integrateLinkLabelsToLinks')) this.integrateLinkLabelsToLinks = localStorage.getItem('integrateLinkLabelsToLinks') === 'true' ? true : false;
-        
-        let isSymbolScalingEnabled = true;
-        if (localStorage.getItem('symbolScaling')) {
-            isSymbolScalingEnabled = localStorage.getItem('symbolScaling') === 'true' ? true : false;
-        } else {
-            localStorage.setItem('symbolScaling', 'true');
-        }
+  public showInterfaceLabels: boolean = true;
+  public integrateLinkLabelsToLinks: boolean = true;
+
+  constructor() {
+    this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
+    if (localStorage.getItem('integrateLinkLabelsToLinks'))
+      this.integrateLinkLabelsToLinks = localStorage.getItem('integrateLinkLabelsToLinks') === 'true' ? true : false;
+
+    let isSymbolScalingEnabled = true;
+    if (localStorage.getItem('symbolScaling')) {
+      isSymbolScalingEnabled = localStorage.getItem('symbolScaling') === 'true' ? true : false;
+    } else {
+      localStorage.setItem('symbolScaling', 'true');
     }
+  }
 
-    public getSymbolScaling() : boolean {
-        return localStorage.getItem('symbolScaling') === 'true' ? true : false;
-    }
+  public getSymbolScaling(): boolean {
+    return localStorage.getItem('symbolScaling') === 'true' ? true : false;
+  }
 
-    public setSymbolScaling(value: boolean) {
-        if (value) {
-            localStorage.setItem('symbolScaling', 'true');
-        } else {
-            localStorage.setItem('symbolScaling', 'false');
-        }
-        this.symbolScalingSubject.next(value);
+  public setSymbolScaling(value: boolean) {
+    if (value) {
+      localStorage.setItem('symbolScaling', 'true');
+    } else {
+      localStorage.setItem('symbolScaling', 'false');
     }
+    this.symbolScalingSubject.next(value);
+  }
 
-    changeMapLockValue(value: boolean) {
-        this.isMapLocked.next(value);
-    }
+  changeMapLockValue(value: boolean) {
+    this.isMapLocked.next(value);
+  }
 
-    setConsoleContextMenuAction(action: string) {
-        localStorage.setItem('consoleContextMenu', action);
-    }
+  setConsoleContextMenuAction(action: string) {
+    localStorage.setItem('consoleContextMenu', action);
+  }
 
-    getConsoleContextManuAction(): string {
-        return localStorage.getItem('consoleContextMenu');
-    }
+  getConsoleContextManuAction(): string {
+    return localStorage.getItem('consoleContextMenu');
+  }
 
-    toggleTopologySummary(value: boolean) {
-        this.isTopologySummaryVisible = value;
-    }
+  toggleTopologySummary(value: boolean) {
+    this.isTopologySummaryVisible = value;
+  }
 
-    toggleLogConsole(value: boolean) {
-        this.isLogConsoleVisible = value;
-    }
+  toggleLogConsole(value: boolean) {
+    this.isLogConsoleVisible = value;
+  }
 
-    toggleLayers(value: boolean) {
-        this.isLayerNumberVisible = value;
-    }
+  toggleLayers(value: boolean) {
+    this.isLayerNumberVisible = value;
+  }
 
-    toggleShowInterfaceLabels(value: boolean) {
-        this.showInterfaceLabels = value;
-    }
+  toggleShowInterfaceLabels(value: boolean) {
+    this.showInterfaceLabels = value;
+  }
 
-    toggleIntegrateInterfaceLabels(value: boolean) {
-        this.integrateLinkLabelsToLinks = value;
-        localStorage.removeItem('integrateLinkLabelsToLinks');
-        if (value) {
-            localStorage.setItem('integrateLinkLabelsToLinks', 'true');
-        } else {
-            localStorage.setItem('integrateLinkLabelsToLinks', 'false');
-        }
+  toggleIntegrateInterfaceLabels(value: boolean) {
+    this.integrateLinkLabelsToLinks = value;
+    localStorage.removeItem('integrateLinkLabelsToLinks');
+    if (value) {
+      localStorage.setItem('integrateLinkLabelsToLinks', 'true');
+    } else {
+      localStorage.setItem('integrateLinkLabelsToLinks', 'false');
     }
+  }
 }
diff --git a/src/app/services/node.service.spec.ts b/src/app/services/node.service.spec.ts
index 44feb302..f1b48866 100644
--- a/src/app/services/node.service.spec.ts
+++ b/src/app/services/node.service.spec.ts
@@ -22,7 +22,7 @@ describe('NodeService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, NodeService]
+      providers: [HttpServer, NodeService],
     });
 
     httpClient = TestBed.get(HttpClient);
@@ -64,7 +64,7 @@ describe('NodeService', () => {
     expect(req.request.body).toEqual({});
   }));
 
-  it('should suspend node', inject([NodeService], (service:NodeService) => {
+  it('should suspend node', inject([NodeService], (service: NodeService) => {
     const node = new Node();
     node.project_id = 'myproject';
     node.node_id = 'id';
@@ -76,7 +76,7 @@ describe('NodeService', () => {
     expect(req.request.body).toEqual({});
   }));
 
-  it('should reload node', inject([NodeService], (service:NodeService) => {
+  it('should reload node', inject([NodeService], (service: NodeService) => {
     const node = new Node();
     node.project_id = 'myproject';
     node.node_id = 'id';
@@ -90,7 +90,7 @@ describe('NodeService', () => {
 
   it('should start all nodes', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
 
     service.startAll(server, project).subscribe();
@@ -102,7 +102,7 @@ describe('NodeService', () => {
 
   it('should stop all nodes', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
 
     service.stopAll(server, project).subscribe();
@@ -114,7 +114,7 @@ describe('NodeService', () => {
 
   it('should suspend all nodes', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
 
     service.suspendAll(server, project).subscribe();
@@ -126,7 +126,7 @@ describe('NodeService', () => {
 
   it('should reload all nodes', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
 
     service.reloadAll(server, project).subscribe();
@@ -149,13 +149,13 @@ describe('NodeService', () => {
     expect(req.request.body).toEqual({
       x: 10,
       y: 20,
-      compute_id: 'compute'
+      compute_id: 'compute',
     });
   }));
 
   it('should updatePosition of node', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
     const node = new Node();
     node.project_id = 'myproject';
@@ -167,13 +167,13 @@ describe('NodeService', () => {
     expect(req.request.method).toEqual('PUT');
     expect(req.request.body).toEqual({
       x: 10,
-      y: 20
+      y: 20,
     });
   }));
 
   it('should updatePosition of node and round to integer', inject([NodeService], (service: NodeService) => {
     let project = {
-      project_id: '1'
+      project_id: '1',
     } as Project;
     const node = new Node();
     node.project_id = 'myproject';
@@ -185,7 +185,7 @@ describe('NodeService', () => {
     expect(req.request.method).toEqual('PUT');
     expect(req.request.body).toEqual({
       x: 10,
-      y: 21
+      y: 21,
     });
   }));
 
@@ -211,8 +211,8 @@ describe('NodeService', () => {
         style: 'my style',
         text: 'my text',
         x: 10,
-        y: 20
-      }
+        y: 20,
+      },
     });
   }));
 
@@ -231,7 +231,7 @@ describe('NodeService', () => {
     expect(req.request.body).toEqual({
       x: 10,
       y: 20,
-      z: 30
+      z: 30,
     });
   }));
 
@@ -248,12 +248,14 @@ describe('NodeService', () => {
 
   it('should duplicate node', inject([NodeService], (service: NodeService) => {
     const node = new Node();
-    node.project_id = "project_id_1";
-    node.node_id = "node_id_1";
+    node.project_id = 'project_id_1';
+    node.node_id = 'node_id_1';
 
     service.duplicate(server, node).subscribe();
 
-    const req = httpTestingController.expectOne(`http://127.0.0.1:3080/v2/projects/${node.project_id}/nodes/${node.node_id}/duplicate`);
+    const req = httpTestingController.expectOne(
+      `http://127.0.0.1:3080/v2/projects/${node.project_id}/nodes/${node.node_id}/duplicate`
+    );
     expect(req.request.method).toEqual('POST');
   }));
 });
diff --git a/src/app/services/node.service.ts b/src/app/services/node.service.ts
index 38db62ce..2b18797b 100644
--- a/src/app/services/node.service.ts
+++ b/src/app/services/node.service.ts
@@ -49,18 +49,25 @@ export class NodeService {
     return this.httpServer.post(server, `/projects/${project.project_id}/nodes/reload`, {});
   }
 
-  createFromTemplate(server: Server, project: Project, template: Template, x: number, y: number, compute_id: string): Observable<Node> {
+  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'
+        compute_id: 'local',
       });
-    } 
+    }
     return this.httpServer.post(server, `/projects/${project.project_id}/templates/${template.template_id}`, {
       x: Math.round(x),
       y: Math.round(y),
-      compute_id: compute_id
+      compute_id: compute_id,
     });
   }
 
@@ -69,16 +76,16 @@ export class NodeService {
     let yPosition: number = Math.round(y);
 
     if (project.snap_to_grid) {
-      xPosition = Math.round((xPosition + node.width/2) / project.grid_size) * project.grid_size;
-      yPosition = Math.round((yPosition + node.height/2) / project.grid_size) * project.grid_size;
+      xPosition = Math.round((xPosition + node.width / 2) / project.grid_size) * project.grid_size;
+      yPosition = Math.round((yPosition + node.height / 2) / project.grid_size) * project.grid_size;
 
-      xPosition = Math.round(xPosition - node.width/2);
-      yPosition = Math.round(yPosition - node.height/2);
+      xPosition = Math.round(xPosition - node.width / 2);
+      yPosition = Math.round(yPosition - node.height / 2);
     }
 
     return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
       x: xPosition,
-      y: yPosition
+      y: yPosition,
     });
   }
 
@@ -89,14 +96,14 @@ export class NodeService {
         style: label.style,
         text: label.text,
         x: Math.round(label.x),
-        y: Math.round(label.y)
-      }
+        y: Math.round(label.y),
+      },
     });
   }
 
   updateSymbol(server: Server, node: Node, changedSymbol: string): Observable<Node> {
     return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
-      symbol: changedSymbol
+      symbol: changedSymbol,
     });
   }
 
@@ -104,7 +111,7 @@ export class NodeService {
     return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
       x: Math.round(node.x),
       y: Math.round(node.y),
-      z: node.z
+      z: node.z,
     });
   }
 
@@ -114,7 +121,7 @@ export class NodeService {
       console_auto_start: node.console_auto_start,
       locked: node.locked,
       name: node.name,
-      properties: node.properties
+      properties: node.properties,
     });
   }
 
@@ -124,7 +131,7 @@ export class NodeService {
       console_auto_start: node.console_auto_start,
       custom_adapters: node.custom_adapters,
       name: node.name,
-      properties: node.properties
+      properties: node.properties,
     });
   }
 
@@ -133,11 +140,10 @@ export class NodeService {
   }
 
   duplicate(server: Server, node: Node) {
-    return this.httpServer.post(server, `/projects/${node.project_id}/nodes/${node.node_id}/duplicate`, 
-    {
-      "x": node.x + 10,
-      "y": node.y + 10,
-      "z": node.z
+    return this.httpServer.post(server, `/projects/${node.project_id}/nodes/${node.node_id}/duplicate`, {
+      x: node.x + 10,
+      y: node.y + 10,
+      z: node.z,
     });
   }
 
@@ -150,11 +156,19 @@ export class NodeService {
   }
 
   getNetworkConfiguration(server: Server, node: Node) {
-    return this.httpServer.get(server, `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`, { responseType: 'text' as 'json'});
+    return this.httpServer.get(
+      server,
+      `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`,
+      { responseType: 'text' as 'json' }
+    );
   }
 
   saveNetworkConfiguration(server: Server, node: Node, configuration: string) {
-    return this.httpServer.post(server, `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`, configuration);
+    return this.httpServer.post(
+      server,
+      `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`,
+      configuration
+    );
   }
 
   getStartupConfiguration(server: Server, node: Node) {
@@ -168,7 +182,7 @@ export class NodeService {
       urlPath += `/files/configs/i${node.node_id}_startup-config.cfg`;
     }
 
-    return this.httpServer.get(server, urlPath, { responseType: 'text' as 'json'});
+    return this.httpServer.get(server, urlPath, { responseType: 'text' as 'json' });
   }
 
   getPrivateConfiguration(server: Server, node: Node) {
@@ -180,11 +194,11 @@ export class NodeService {
       urlPath += `/files/configs/i${node.node_id}_private-config.cfg`;
     }
 
-    return this.httpServer.get(server, urlPath, { responseType: 'text' as 'json'});
+    return this.httpServer.get(server, urlPath, { responseType: 'text' as 'json' });
   }
 
   saveConfiguration(server: Server, node: Node, configuration: string) {
-    let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`
+    let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`;
 
     if (node.node_type === 'vpcs') {
       urlPath += '/files/startup.vpc';
@@ -198,7 +212,7 @@ export class NodeService {
   }
 
   savePrivateConfiguration(server: Server, node: Node, configuration: string) {
-    let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`
+    let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`;
 
     if (node.node_type === 'iou') {
       urlPath += '/files/private-config.cfg';
diff --git a/src/app/services/nodeConsole.service.ts b/src/app/services/nodeConsole.service.ts
index 8c5d6aaf..7e316363 100644
--- a/src/app/services/nodeConsole.service.ts
+++ b/src/app/services/nodeConsole.service.ts
@@ -58,6 +58,6 @@ export class NodeConsoleService {
 }
 
 export interface ConsoleResizedEvent {
-  width: number,
-  height: number
+  width: number;
+  height: number;
 }
diff --git a/src/app/services/packet-capture.service.ts b/src/app/services/packet-capture.service.ts
index b6f36153..0b25dc99 100644
--- a/src/app/services/packet-capture.service.ts
+++ b/src/app/services/packet-capture.service.ts
@@ -1,13 +1,15 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { Server } from '../models/server';
 import { Project } from '../models/project';
 import { Link } from '../models/link';
 
 @Injectable()
 export class PacketCaptureService {
-    constructor() {}
+  constructor() {}
 
-    startCapture(server: Server, project: Project, link: Link, name: string) {
-        location.assign(`gns3+pcap://${server.host}:${server.port}?project_id=${project.project_id}&link_id=${link.link_id}&name=${name}`);
-    }
+  startCapture(server: Server, project: Project, link: Link, name: string) {
+    location.assign(
+      `gns3+pcap://${server.host}:${server.port}?project_id=${project.project_id}&link_id=${link.link_id}&name=${name}`
+    );
+  }
 }
diff --git a/src/app/services/platform.service.spec.ts b/src/app/services/platform.service.spec.ts
index 7a49f5de..a1e04e38 100644
--- a/src/app/services/platform.service.spec.ts
+++ b/src/app/services/platform.service.spec.ts
@@ -5,7 +5,7 @@ import { ElectronService } from 'ngx-electron';
 
 class ElectronServiceMock {
   process = {
-    platform: 'unknown'
+    platform: 'unknown',
   };
 }
 
@@ -19,16 +19,13 @@ describe('PlatformService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        PlatformService,
-        {provide: ElectronService, useValue: electronServiceMock}
-      ]
+      providers: [PlatformService, { provide: ElectronService, useValue: electronServiceMock }],
     });
   });
 
   beforeEach(() => {
     service = TestBed.get(PlatformService);
-  })
+  });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
diff --git a/src/app/services/platform.service.ts b/src/app/services/platform.service.ts
index 58f6b5df..ac5591b6 100644
--- a/src/app/services/platform.service.ts
+++ b/src/app/services/platform.service.ts
@@ -3,10 +3,7 @@ import { ElectronService } from 'ngx-electron';
 
 @Injectable()
 export class PlatformService {
-
-  constructor(
-    private electronService: ElectronService
-  ) { }
+  constructor(private electronService: ElectronService) {}
 
   isWindows() {
     return this.electronService.process.platform === 'win32';
diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts
index 38a23743..ebc9e3f8 100644
--- a/src/app/services/project.service.spec.ts
+++ b/src/app/services/project.service.spec.ts
@@ -63,7 +63,12 @@ describe('ProjectService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, ProjectService, RecentlyOpenedProjectService, { provide: SettingsService, useClass: MockedSettingsService }]
+      providers: [
+        HttpServer,
+        ProjectService,
+        RecentlyOpenedProjectService,
+        { provide: SettingsService, useClass: MockedSettingsService },
+      ],
     });
 
     httpClient = TestBed.get(HttpClient);
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 8392eacf..3a60aa77 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -14,7 +14,7 @@ export class ProjectService {
   public projectListSubject = new Subject<boolean>();
 
   constructor(
-    private httpServer: HttpServer, 
+    private httpServer: HttpServer,
     private settingsService: SettingsService,
     private recentlyOpenedProjectService: RecentlyOpenedProjectService
   ) {}
@@ -56,7 +56,7 @@ export class ProjectService {
     return this.httpServer.post<Project>(server, `/projects`, { name: project_name, project_id: project_id });
   }
 
-  update(server: Server, project: Project) : Observable<Project> {
+  update(server: Server, project: Project): Observable<Project> {
     return this.httpServer.put<Project>(server, `/projects/${project.project_id}`, {
       auto_close: project.auto_close,
       auto_open: project.auto_open,
@@ -66,7 +66,7 @@ export class ProjectService {
       name: project.name,
       scene_width: project.scene_width,
       scene_height: project.scene_height,
-      show_interface_labels: project.show_interface_labels
+      show_interface_labels: project.show_interface_labels,
     });
   }
 
@@ -83,13 +83,13 @@ export class ProjectService {
   }
 
   export(server: Server, project_id: string): Observable<any> {
-    return this.httpServer.get(server, `/projects/${project_id}/export`)
+    return this.httpServer.get(server, `/projects/${project_id}/export`);
   }
 
   getStatistics(server: Server, project_id: string): Observable<any> {
     return this.httpServer.get(server, `/projects/${project_id}/stats`);
   }
-  
+
   duplicate(server: Server, project_id: string, project_name): Observable<any> {
     return this.httpServer.post(server, `/projects/${project_id}/duplicate`, { name: project_name });
   }
diff --git a/src/app/services/qemu-configuration.service.ts b/src/app/services/qemu-configuration.service.ts
index c9fedcf8..c4e8c675 100644
--- a/src/app/services/qemu-configuration.service.ts
+++ b/src/app/services/qemu-configuration.service.ts
@@ -1,103 +1,106 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class QemuConfigurationService {
-    getConsoleTypes(){
-        return ['telnet', 'vnc', 'spice', 'spice+agent', 'none'];
-    }
+  getConsoleTypes() {
+    return ['telnet', 'vnc', 'spice', 'spice+agent', 'none'];
+  }
 
-    getDiskInterfaces() {
-        return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'nvme', 'none'];
-    }
+  getDiskInterfaces() {
+    return ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'nvme', 'none'];
+  }
 
-    getNetworkTypes() {
-        // needs extending of custom adapter component
-        // let networkTypes = [["e1000", "Intel Gigabit Ethernet"],
-        //     ["i82550", "Intel i82550 Ethernet"],
-        //     ["i82551", "Intel i82551 Ethernet"],
-        //     ["i82557a", "Intel i82557A Ethernet"],
-        //     ["i82557b", "Intel i82557B Ethernet"],
-        //     ["i82557c", "Intel i82557C Ethernet"],
-        //     ["i82558a", "Intel i82558A Ethernet"],
-        //     ["i82558b", "Intel i82558B Ethernet"],
-        //     ["i82559a", "Intel i82559A Ethernet"],
-        //     ["i82559b", "Intel i82559B Ethernet"],
-        //     ["i82559c", "Intel i82559C Ethernet"],
-        //     ["i82559er", "Intel i82559ER Ethernet"],
-        //     ["i82562", "Intel i82562 Ethernet"],
-        //     ["i82801", "Intel i82801 Ethernet"],
-        //     ["ne2k_pci", "NE2000 Ethernet"],
-        //     ["pcnet", "AMD PCNet Ethernet"],
-        //     ["rtl8139", "Realtek 8139 Ethernet"],
-        //     ["virtio", "Legacy paravirtualized Network I/O"],
-        //     ["virtio-net-pci", "Paravirtualized Network I/O"],
-        //     ["vmxnet3", "VMWare Paravirtualized Ethernet v3"]];
+  getNetworkTypes() {
+    // needs extending of custom adapter component
+    // let networkTypes = [["e1000", "Intel Gigabit Ethernet"],
+    //     ["i82550", "Intel i82550 Ethernet"],
+    //     ["i82551", "Intel i82551 Ethernet"],
+    //     ["i82557a", "Intel i82557A Ethernet"],
+    //     ["i82557b", "Intel i82557B Ethernet"],
+    //     ["i82557c", "Intel i82557C Ethernet"],
+    //     ["i82558a", "Intel i82558A Ethernet"],
+    //     ["i82558b", "Intel i82558B Ethernet"],
+    //     ["i82559a", "Intel i82559A Ethernet"],
+    //     ["i82559b", "Intel i82559B Ethernet"],
+    //     ["i82559c", "Intel i82559C Ethernet"],
+    //     ["i82559er", "Intel i82559ER Ethernet"],
+    //     ["i82562", "Intel i82562 Ethernet"],
+    //     ["i82801", "Intel i82801 Ethernet"],
+    //     ["ne2k_pci", "NE2000 Ethernet"],
+    //     ["pcnet", "AMD PCNet Ethernet"],
+    //     ["rtl8139", "Realtek 8139 Ethernet"],
+    //     ["virtio", "Legacy paravirtualized Network I/O"],
+    //     ["virtio-net-pci", "Paravirtualized Network I/O"],
+    //     ["vmxnet3", "VMWare Paravirtualized Ethernet v3"]];
 
-        let networkTypes = ["e1000",
-            "e1000-82544gc",
-            "e1000-82545em",
-            "e1000e",
-            "rocker",
-            "Intel Gigabit Ethernet",
-            "i82550",
-            "i82551",
-            "i82557a",
-            "i82557b",
-            "i82557c",
-            "i82558a",
-            "i82558b",
-            "i82559a",
-            "i82559b",
-            "i82559c",
-            "i82559er",
-            "i82562",
-            "i82801",
-            "ne2k_pci",
-            "pcnet",
-            "rtl8139",
-            "virtio",
-            "virtio-net-pci",
-            "vmxnet3"];
+    let networkTypes = [
+      'e1000',
+      'e1000-82544gc',
+      'e1000-82545em',
+      'e1000e',
+      'rocker',
+      'Intel Gigabit Ethernet',
+      'i82550',
+      'i82551',
+      'i82557a',
+      'i82557b',
+      'i82557c',
+      'i82558a',
+      'i82558b',
+      'i82559a',
+      'i82559b',
+      'i82559c',
+      'i82559er',
+      'i82562',
+      'i82801',
+      'ne2k_pci',
+      'pcnet',
+      'rtl8139',
+      'virtio',
+      'virtio-net-pci',
+      'vmxnet3',
+    ];
 
-        return networkTypes;
-    }
+    return networkTypes;
+  }
 
-    getBootPriorities() {
-        let bootPriorities = [["HDD", "c"],
-            ["CD/DVD-ROM", "d"],
-            ["Network", "n"],
-            ["HDD or Network", "cn"],
-            ["HDD or CD/DVD-ROM", "cd"]];
+  getBootPriorities() {
+    let bootPriorities = [
+      ['HDD', 'c'],
+      ['CD/DVD-ROM', 'd'],
+      ['Network', 'n'],
+      ['HDD or Network', 'cn'],
+      ['HDD or CD/DVD-ROM', 'cd'],
+    ];
 
-        return bootPriorities;
-    }
+    return bootPriorities;
+  }
 
-    getOnCloseOptions() {
-        let onCloseOptions = [["Power off the VM", "power_off"],
-            ["Send the shutdown signal (ACPI)", "shutdown_signal"],
-            ["Save the VM state", "save_vm_state"]];
+  getOnCloseOptions() {
+    let onCloseOptions = [
+      ['Power off the VM', 'power_off'],
+      ['Send the shutdown signal (ACPI)', 'shutdown_signal'],
+      ['Save the VM state', 'save_vm_state'],
+    ];
 
-        return onCloseOptions;
-    }
+    return onCloseOptions;
+  }
 
-    getCategories() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getPriorities() {
-        let priorities = ["realtime",
-            "very high",
-            "high",
-            "normal",
-            "low",
-            "very low"];
+  getPriorities() {
+    let priorities = ['realtime', 'very high', 'high', 'normal', 'low', 'very low'];
 
-        return priorities;
-    }
+    return priorities;
+  }
 }
diff --git a/src/app/services/qemu.service.spec.ts b/src/app/services/qemu.service.spec.ts
index b8196a7d..5a036aa8 100644
--- a/src/app/services/qemu.service.spec.ts
+++ b/src/app/services/qemu.service.spec.ts
@@ -9,134 +9,134 @@ import { QemuService } from './qemu.service';
 import { QemuTemplate } from '../models/templates/qemu-template';
 
 describe('QemuService', () => {
-    let httpClient: HttpClient;
-    let httpTestingController: HttpTestingController;
-    let httpServer: HttpServer;
-    let server: Server;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let server: Server;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, AppTestingModule],
-        providers: [HttpServer, QemuService]
-        });
-
-        httpClient = TestBed.get(HttpClient);
-        httpTestingController = TestBed.get(HttpTestingController);
-        httpServer = TestBed.get(HttpServer);
-        server = getTestServer();
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, QemuService],
     });
 
-    afterEach(() => {
-        httpTestingController.verify();
-    });
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    server = getTestServer();
+  });
 
-    it('should be created', inject([QemuService], (service: QemuService) => {
-        expect(service).toBeTruthy();
-    }));
+  afterEach(() => {
+    httpTestingController.verify();
+  });
 
-    it('should update qemu template', inject([QemuService], (service: QemuService) => {
-        const template : QemuTemplate = {
-            adapter_type: 'e1000',
-            adapters: 4,
-            bios_image: '',
-            boot_priority: 'c',
-            builtin: false,
-            category: 'guest',
-            cdrom_image: '',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            cpu_throttling: 0,
-            cpus: 1,
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            hda_disk_image: '',
-            hda_disk_interface: 'ide',
-            hdb_disk_image: '',
-            hdb_disk_interface: 'ide',
-            hdc_disk_image: '',
-            hdc_disk_interface: 'ide',
-            hdd_disk_image: '',
-            hdd_disk_interface: 'ide',
-            initrd: '',
-            kernel_command_line: '',
-            kernel_image: '',
-            legacy_networking: false,
-            linked_clone: true,
-            mac_address: '',
-            name: '',
-            on_close: 'power_off',
-            options: '-nographic',
-            platform: '',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            process_priority: 'normal',
-            qemu_path: '',
-            ram: 256,
-            symbol: ':/symbols/qemu_guest.svg',
-            template_id: '1',
-            template_type: 'qemu',
-            usage: ''
-        }
+  it('should be created', inject([QemuService], (service: QemuService) => {
+    expect(service).toBeTruthy();
+  }));
 
-        service.saveTemplate(server, template).subscribe();
+  it('should update qemu template', inject([QemuService], (service: QemuService) => {
+    const template: QemuTemplate = {
+      adapter_type: 'e1000',
+      adapters: 4,
+      bios_image: '',
+      boot_priority: 'c',
+      builtin: false,
+      category: 'guest',
+      cdrom_image: '',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      cpu_throttling: 0,
+      cpus: 1,
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      hda_disk_image: '',
+      hda_disk_interface: 'ide',
+      hdb_disk_image: '',
+      hdb_disk_interface: 'ide',
+      hdc_disk_image: '',
+      hdc_disk_interface: 'ide',
+      hdd_disk_image: '',
+      hdd_disk_interface: 'ide',
+      initrd: '',
+      kernel_command_line: '',
+      kernel_image: '',
+      legacy_networking: false,
+      linked_clone: true,
+      mac_address: '',
+      name: '',
+      on_close: 'power_off',
+      options: '-nographic',
+      platform: '',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      process_priority: 'normal',
+      qemu_path: '',
+      ram: 256,
+      symbol: ':/symbols/qemu_guest.svg',
+      template_id: '1',
+      template_type: 'qemu',
+      usage: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.saveTemplate(server, template).subscribe();
 
-    it('should add qemu template', inject([QemuService], (service: QemuService) => {
-        const template : QemuTemplate = {
-            adapter_type: 'e1000',
-            adapters: 4,
-            bios_image: '',
-            boot_priority: 'c',
-            builtin: false,
-            category: 'guest',
-            cdrom_image: '',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            cpu_throttling: 0,
-            cpus: 1,
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            hda_disk_image: '',
-            hda_disk_interface: 'ide',
-            hdb_disk_image: '',
-            hdb_disk_interface: 'ide',
-            hdc_disk_image: '',
-            hdc_disk_interface: 'ide',
-            hdd_disk_image: '',
-            hdd_disk_interface: 'ide',
-            initrd: '',
-            kernel_command_line: '',
-            kernel_image: '',
-            legacy_networking: false,
-            linked_clone: true,
-            mac_address: '',
-            name: '',
-            on_close: 'power_off',
-            options: '-nographic',
-            platform: '',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            process_priority: 'normal',
-            qemu_path: '',
-            ram: 256,
-            symbol: ':/symbols/qemu_guest.svg',
-            template_id: '',
-            template_type: 'qemu',
-            usage: ''
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        service.addTemplate(server, template).subscribe();
+  it('should add qemu template', inject([QemuService], (service: QemuService) => {
+    const template: QemuTemplate = {
+      adapter_type: 'e1000',
+      adapters: 4,
+      bios_image: '',
+      boot_priority: 'c',
+      builtin: false,
+      category: 'guest',
+      cdrom_image: '',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      cpu_throttling: 0,
+      cpus: 1,
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      hda_disk_image: '',
+      hda_disk_interface: 'ide',
+      hdb_disk_image: '',
+      hdb_disk_interface: 'ide',
+      hdc_disk_image: '',
+      hdc_disk_interface: 'ide',
+      hdd_disk_image: '',
+      hdd_disk_interface: 'ide',
+      initrd: '',
+      kernel_command_line: '',
+      kernel_image: '',
+      legacy_networking: false,
+      linked_clone: true,
+      mac_address: '',
+      name: '',
+      on_close: 'power_off',
+      options: '-nographic',
+      platform: '',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      process_priority: 'normal',
+      qemu_path: '',
+      ram: 256,
+      symbol: ':/symbols/qemu_guest.svg',
+      template_id: '',
+      template_type: 'qemu',
+      usage: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.addTemplate(server, template).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(template);
+  }));
 });
diff --git a/src/app/services/qemu.service.ts b/src/app/services/qemu.service.ts
index f9f94afc..8099618a 100644
--- a/src/app/services/qemu.service.ts
+++ b/src/app/services/qemu.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Observable } from 'rxjs';
 import { QemuTemplate } from '../models/templates/qemu-template';
@@ -9,37 +9,41 @@ import { QemuImg } from '../models/qemu/qemu-img';
 
 @Injectable()
 export class QemuService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<QemuTemplate[]> {
-        return this.httpServer.get<QemuTemplate[]>(server, '/templates') as Observable<QemuTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<QemuTemplate[]> {
+    return this.httpServer.get<QemuTemplate[]>(server, '/templates') as Observable<QemuTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<QemuTemplate> {
-        return this.httpServer.get<QemuTemplate>(server, `/templates/${template_id}`) as Observable<QemuTemplate>;
-    } 
+  getTemplate(server: Server, template_id: string): Observable<QemuTemplate> {
+    return this.httpServer.get<QemuTemplate>(server, `/templates/${template_id}`) as Observable<QemuTemplate>;
+  }
 
-    getImagePath(server: Server, filename: string): string {
-        return `${server.protocol}//${server.host}:${server.port}/v2/compute/qemu/images/${filename}`;
-    }
+  getImagePath(server: Server, filename: string): string {
+    return `${server.protocol}//${server.host}:${server.port}/v2/compute/qemu/images/${filename}`;
+  }
 
-    getBinaries(server: Server): Observable<QemuBinary[]> {
-        return this.httpServer.get<QemuBinary[]>(server, '/computes/local/qemu/binaries') as Observable<QemuBinary[]>;
-    }
+  getBinaries(server: Server): Observable<QemuBinary[]> {
+    return this.httpServer.get<QemuBinary[]>(server, '/computes/local/qemu/binaries') as Observable<QemuBinary[]>;
+  }
 
-    getImages(server: Server): Observable<any> {
-        return this.httpServer.get<QemuImage[]>(server, '/compute/qemu/images') as Observable<QemuImage[]>;
-    }
+  getImages(server: Server): Observable<any> {
+    return this.httpServer.get<QemuImage[]>(server, '/compute/qemu/images') as Observable<QemuImage[]>;
+  }
 
-    addImage(server: Server, qemuImg: QemuImg): Observable<QemuImg> {
-        return this.httpServer.post<QemuImg>(server, '/compute/qemu/img', qemuImg) as Observable<QemuImg>;
-    }
- 
-    addTemplate(server: Server, qemuTemplate: QemuTemplate): Observable<QemuTemplate> {
-        return this.httpServer.post<QemuTemplate>(server, `/templates`, qemuTemplate) as Observable<QemuTemplate>;
-    }
+  addImage(server: Server, qemuImg: QemuImg): Observable<QemuImg> {
+    return this.httpServer.post<QemuImg>(server, '/compute/qemu/img', qemuImg) as Observable<QemuImg>;
+  }
 
-    saveTemplate(server: Server, qemuTemplate: QemuTemplate): Observable<QemuTemplate> {
-        return this.httpServer.put<QemuTemplate>(server, `/templates/${qemuTemplate.template_id}`, qemuTemplate) as Observable<QemuTemplate>;
-    }
+  addTemplate(server: Server, qemuTemplate: QemuTemplate): Observable<QemuTemplate> {
+    return this.httpServer.post<QemuTemplate>(server, `/templates`, qemuTemplate) as Observable<QemuTemplate>;
+  }
+
+  saveTemplate(server: Server, qemuTemplate: QemuTemplate): Observable<QemuTemplate> {
+    return this.httpServer.put<QemuTemplate>(
+      server,
+      `/templates/${qemuTemplate.template_id}`,
+      qemuTemplate
+    ) as Observable<QemuTemplate>;
+  }
 }
diff --git a/src/app/services/recentlyOpenedProject.service.ts b/src/app/services/recentlyOpenedProject.service.ts
index 4c7e1313..d9753e96 100644
--- a/src/app/services/recentlyOpenedProject.service.ts
+++ b/src/app/services/recentlyOpenedProject.service.ts
@@ -2,37 +2,36 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class RecentlyOpenedProjectService {
-    private serverId: string;
-    private projectId: string;
+  private serverId: string;
+  private projectId: string;
 
-    private serverIdProjectList: string;
-    
-    setServerId(serverId: string) {
-        this.serverId = serverId;
-    }
+  private serverIdProjectList: string;
 
-    setProjectId(projectId: string) {
-        this.projectId = projectId;
-    }
+  setServerId(serverId: string) {
+    this.serverId = serverId;
+  }
 
-    setServerIdProjectList(serverId: string) {
-        this.serverIdProjectList = serverId;
-    }
+  setProjectId(projectId: string) {
+    this.projectId = projectId;
+  }
 
-    getServerId() : string {
-        return this.serverId;
-    }
+  setServerIdProjectList(serverId: string) {
+    this.serverIdProjectList = serverId;
+  }
 
-    getProjectId() : string {
-        return this.projectId;
-    }
+  getServerId(): string {
+    return this.serverId;
+  }
 
-    getServerIdProjectList() : string {
-        return this.serverIdProjectList;
-    }
- 
-    removeData() {
-        this.serverId = '',
-        this.projectId = ''
-    }
+  getProjectId(): string {
+    return this.projectId;
+  }
+
+  getServerIdProjectList(): string {
+    return this.serverIdProjectList;
+  }
+
+  removeData() {
+    (this.serverId = ''), (this.projectId = '');
+  }
 }
diff --git a/src/app/services/server-management.service.spec.ts b/src/app/services/server-management.service.spec.ts
index 68036d60..12a6e785 100644
--- a/src/app/services/server-management.service.spec.ts
+++ b/src/app/services/server-management.service.spec.ts
@@ -6,7 +6,7 @@ import { Server } from '../models/server';
 
 describe('ServerManagementService', () => {
   let electronService;
-  let callbacks
+  let callbacks;
   let removed;
   let server;
 
@@ -20,12 +20,12 @@ describe('ServerManagementService', () => {
         on: (channel, callback) => {
           callbacks.push({
             channel: channel,
-            callback: callback
+            callback: callback,
           });
         },
         removeAllListeners: (name) => {
           removed.push(name);
-        }
+        },
       },
       remote: {
         require: (file) => {
@@ -35,19 +35,18 @@ describe('ServerManagementService', () => {
             },
             stopLocalServer: (serv) => {
               server = serv;
-            }
-          }
-        }
-      }
+            },
+          };
+        },
+      },
     };
-  })
-  
-  beforeEach(() => TestBed.configureTestingModule({
-    providers: [
-      { provide: ElectronService, useValue: electronService},
-      ServerManagementService
-    ]
-  }));
+  });
+
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [{ provide: ElectronService, useValue: electronService }, ServerManagementService],
+    })
+  );
 
   it('should be created', () => {
     const service: ServerManagementService = TestBed.get(ServerManagementService);
@@ -81,13 +80,13 @@ describe('ServerManagementService', () => {
 
   it('should start local server', async () => {
     const service: ServerManagementService = TestBed.get(ServerManagementService);
-    await service.start({ name: 'test'} as Server);
-    expect(server).toEqual({ name: 'test'});
+    await service.start({ name: 'test' } as Server);
+    expect(server).toEqual({ name: 'test' });
   });
 
   it('should stop local server', async () => {
     const service: ServerManagementService = TestBed.get(ServerManagementService);
-    await service.stop({ name: 'test2'} as Server);
-    expect(server).toEqual({ name: 'test2'});
+    await service.stop({ name: 'test2' } as Server);
+    expect(server).toEqual({ name: 'test2' });
   });
 });
diff --git a/src/app/services/server-management.service.ts b/src/app/services/server-management.service.ts
index 45778732..661e43fd 100644
--- a/src/app/services/server-management.service.ts
+++ b/src/app/services/server-management.service.ts
@@ -5,19 +5,16 @@ import { Subject } from 'rxjs';
 
 export interface ServerStateEvent {
   serverName: string;
-  status: "starting" | "started" | "errored" | "stopped" | "stderr";
+  status: 'starting' | 'started' | 'errored' | 'stopped' | 'stderr';
   message: string;
 }
 
 @Injectable()
 export class ServerManagementService implements OnDestroy {
-
   serverStatusChanged = new Subject<ServerStateEvent>();
 
-  constructor(
-    private electronService: ElectronService
-  ) {
-    if(this.electronService.isElectronApp) {
+  constructor(private electronService: ElectronService) {
+    if (this.electronService.isElectronApp) {
       this.electronService.ipcRenderer.on(this.statusChannel, (event, data) => {
         this.serverStatusChanged.next(data);
       });
@@ -29,10 +26,10 @@ export class ServerManagementService implements OnDestroy {
   }
 
   async start(server: Server) {
-    var startingEvent : ServerStateEvent = {
+    var startingEvent: ServerStateEvent = {
       serverName: server.name,
-      status: "starting",
-      message: ''
+      status: 'starting',
+      message: '',
     };
     this.serverStatusChanged.next(startingEvent);
     return await this.electronService.remote.require('./local-server.js').startLocalServer(server);
@@ -47,14 +44,14 @@ export class ServerManagementService implements OnDestroy {
   }
 
   getRunningServers() {
-    if(this.electronService.isElectronApp) {
+    if (this.electronService.isElectronApp) {
       return this.electronService.remote.require('./local-server.js').getRunningServers();
     }
     return [];
   }
 
   ngOnDestroy() {
-    if(this.electronService.isElectronApp) {
+    if (this.electronService.isElectronApp) {
       this.electronService.ipcRenderer.removeAllListeners(this.statusChannel);
     }
   }
diff --git a/src/app/services/server-settings.service.spec.ts b/src/app/services/server-settings.service.spec.ts
index 7637cc92..ae934fe0 100644
--- a/src/app/services/server-settings.service.spec.ts
+++ b/src/app/services/server-settings.service.spec.ts
@@ -8,28 +8,28 @@ import { AppTestingModule } from '../testing/app-testing/app-testing.module';
 import { of } from 'rxjs';
 
 export class MockedServerSettingsService {
-    getSettingsForQemu(server: Server) {
-        return of([]);
-    }
+  getSettingsForQemu(server: Server) {
+    return of([]);
+  }
 
-    updateSettingsForQemu(server: Server, qemuSettings: QemuSettings) {
-        return of([]);
-    }
+  updateSettingsForQemu(server: Server, qemuSettings: QemuSettings) {
+    return of([]);
+  }
 }
 
 describe('ServerSettingsService', () => {
-    let httpServer: HttpServer;
+  let httpServer: HttpServer;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule, AppTestingModule],
-            providers: [HttpServer, ServerSettingsService]
-        });
-
-        httpServer = TestBed.get(HttpServer);
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, ServerSettingsService],
     });
 
-    it('should be created', inject([ServerSettingsService], (service: ServerSettingsService) => {
-        expect(service).toBeTruthy();
-    }));
+    httpServer = TestBed.get(HttpServer);
+  });
+
+  it('should be created', inject([ServerSettingsService], (service: ServerSettingsService) => {
+    expect(service).toBeTruthy();
+  }));
 });
diff --git a/src/app/services/server-settings.service.ts b/src/app/services/server-settings.service.ts
index 6df377f0..2bdbe7d9 100644
--- a/src/app/services/server-settings.service.ts
+++ b/src/app/services/server-settings.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { ServerSettings } from '../models/serverSettings';
@@ -6,26 +6,24 @@ import { QemuSettings } from '../models/settings/qemu-settings';
 
 @Injectable()
 export class ServerSettingsService {
-    constructor(
-        private httpServer: HttpServer
-    ){}
+  constructor(private httpServer: HttpServer) {}
 
-    get(server: Server) {
-        return this.httpServer.get<ServerSettings>(server, `/settings`);
-    }
+  get(server: Server) {
+    return this.httpServer.get<ServerSettings>(server, `/settings`);
+  }
 
-    update(server: Server, serverSettings: ServerSettings) {
-        return this.httpServer.post<ServerSettings>(server, `/settings`, serverSettings);
-    }
+  update(server: Server, serverSettings: ServerSettings) {
+    return this.httpServer.post<ServerSettings>(server, `/settings`, serverSettings);
+  }
 
-    getSettingsForQemu(server: Server) {
-        return this.httpServer.get<QemuSettings>(server, `/settings/qemu`);
-    }
+  getSettingsForQemu(server: Server) {
+    return this.httpServer.get<QemuSettings>(server, `/settings/qemu`);
+  }
 
-    updateSettingsForQemu(server: Server, qemuSettings: QemuSettings) {
-        return this.httpServer.put<QemuSettings>(server, `/settings/qemu`, {
-            enable_hardware_acceleration: qemuSettings.enable_hardware_acceleration,
-            require_hardware_acceleration: qemuSettings.require_hardware_acceleration
-        });
-    }
+  updateSettingsForQemu(server: Server, qemuSettings: QemuSettings) {
+    return this.httpServer.put<QemuSettings>(server, `/settings/qemu`, {
+      enable_hardware_acceleration: qemuSettings.enable_hardware_acceleration,
+      require_hardware_acceleration: qemuSettings.require_hardware_acceleration,
+    });
+  }
 }
diff --git a/src/app/services/server.service.spec.ts b/src/app/services/server.service.spec.ts
index c3a15fb3..17ebee5d 100644
--- a/src/app/services/server.service.spec.ts
+++ b/src/app/services/server.service.spec.ts
@@ -59,10 +59,10 @@ describe('ServerService', () => {
 
     TestBed.configureTestingModule({
       providers: [
-        ServerService, 
+        ServerService,
         { provide: IndexedDbService, useValue: indexedDbService },
-        { provide: HttpServer, useValue: httpServer }
-      ]
+        { provide: HttpServer, useValue: httpServer },
+      ],
     });
 
     service = TestBed.get(ServerService);
@@ -76,9 +76,9 @@ describe('ServerService', () => {
     const evnt = {
       currentTarget: {
         result: {
-          createObjectStore: function() {}
-        }
-      }
+          createObjectStore: function () {},
+        },
+      },
     };
 
     spyOn(evnt.currentTarget.result, 'createObjectStore');
@@ -97,29 +97,29 @@ describe('ServerService', () => {
       record.name = 'test';
     });
 
-    it('should create an object', done => {
+    it('should create an object', (done) => {
       const created = new Server();
       created.id = 22;
 
       spyOn(db, 'add').and.returnValue(Promise.resolve(created));
 
-      service.create(record).then(result => {
+      service.create(record).then((result) => {
         expect(db.add).toHaveBeenCalledWith('servers', record);
         done();
       });
     });
 
-    it('should update an object', done => {
+    it('should update an object', (done) => {
       spyOn(db, 'update').and.returnValue(Promise.resolve(record));
 
-      service.update(record).then(result => {
+      service.update(record).then((result) => {
         expect(db.update).toHaveBeenCalledWith('servers', record);
         expect(result).toEqual(record);
         done();
       });
     });
 
-    it('should delete an object', done => {
+    it('should delete an object', (done) => {
       record.id = 88;
 
       spyOn(db, 'delete').and.returnValue(Promise.resolve());
@@ -131,17 +131,17 @@ describe('ServerService', () => {
     });
   });
 
-  it('should call findAll', done => {
+  it('should call findAll', (done) => {
     spyOn(db, 'getAll').and.returnValue(Promise.resolve([]));
 
-    service.findAll().then(result => {
+    service.findAll().then((result) => {
       expect(result).toEqual([]);
       expect(db.getAll).toHaveBeenCalledWith('servers');
       done();
     });
   });
 
-  it('should create local server when missing', done => {
+  it('should create local server when missing', (done) => {
     spyOn(db, 'getAll').and.returnValue(Promise.resolve([]));
     spyOn(service, 'create').and.returnValue(Promise.resolve(new Server()));
 
@@ -158,7 +158,7 @@ describe('ServerService', () => {
     });
   });
 
-  it('should update local server when found', done => {
+  it('should update local server when found', (done) => {
     const server = new Server();
     server.name = 'local';
     server.host = 'hostname';
diff --git a/src/app/services/server.service.ts b/src/app/services/server.service.ts
index a89bafef..55a41784 100644
--- a/src/app/services/server.service.ts
+++ b/src/app/services/server.service.ts
@@ -13,34 +13,41 @@ export class ServerService {
   public serviceInitialized: Subject<boolean> = new Subject<boolean>();
   public isServiceInitialized: boolean;
 
-  constructor(
-    private indexedDbService: IndexedDbService,
-    private httpServer: HttpServer
-  ) {
-    this.ready = this.indexedDbService.get().openDatabase(1,  evt => {
-      evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
-    }).then(() => {
-      this.indexedDbService.get().getAll(this.tablename)
-      .then(() => {})
+  constructor(private indexedDbService: IndexedDbService, private httpServer: HttpServer) {
+    this.ready = this.indexedDbService
+      .get()
+      .openDatabase(1, (evt) => {
+        evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
+      })
+      .then(() => {
+        this.indexedDbService
+          .get()
+          .getAll(this.tablename)
+          .then(() => {})
+          .catch(() => {
+            this.isIncognitoMode = true;
+          });
+      })
       .catch(() => {
         this.isIncognitoMode = true;
+      })
+      .finally(() => {
+        this.isServiceInitialized = true;
+        this.serviceInitialized.next(true);
       });
-    }).catch(() => {
-      this.isIncognitoMode = true;
-    }).finally(() => {
-      this.isServiceInitialized = true;
-      this.serviceInitialized.next(true);
-    });
   }
 
   public tryToCreateDb() {
-    let promise = new Promise(resolve => {
-      this.indexedDbService.get().openDatabase(1,  evt => {
-        evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
-      }).then(() => {
-      }).catch(() => {
-        this.isIncognitoMode = true;
-      });
+    let promise = new Promise((resolve) => {
+      this.indexedDbService
+        .get()
+        .openDatabase(1, (evt) => {
+          evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
+        })
+        .then(() => {})
+        .catch(() => {
+          this.isIncognitoMode = true;
+        });
     });
     return promise;
   }
@@ -48,7 +55,7 @@ export class ServerService {
   public get(id: number): Promise<Server> {
     if (this.isIncognitoMode) {
       let server: Server = JSON.parse(localStorage.getItem(`server-${id}`));
-      let promise = new Promise<Server>(resolve => {
+      let promise = new Promise<Server>((resolve) => {
         resolve(server);
       });
       return promise;
@@ -63,7 +70,7 @@ export class ServerService {
       localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
       this.serverIdsInIncognitoMode.push(`server-${server.id}`);
 
-      let promise = new Promise<Server>(resolve => {
+      let promise = new Promise<Server>((resolve) => {
         resolve(server);
       });
       return promise;
@@ -74,7 +81,7 @@ export class ServerService {
         this.indexedDbService
           .get()
           .add(this.tablename, server)
-          .then(added => {
+          .then((added) => {
             server.id = added.key;
             resolve(server);
           }, reject);
@@ -88,7 +95,7 @@ export class ServerService {
       localStorage.removeItem(`server-${server.id}`);
       localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
 
-      let promise = new Promise<Server>(resolve => {
+      let promise = new Promise<Server>((resolve) => {
         resolve(server);
       });
       return promise;
@@ -99,7 +106,7 @@ export class ServerService {
         this.indexedDbService
           .get()
           .update(this.tablename, server)
-          .then(updated => {
+          .then((updated) => {
             resolve(server);
           }, reject);
       });
@@ -109,9 +116,9 @@ export class ServerService {
 
   public findAll() {
     if (this.isIncognitoMode) {
-      let promise = new Promise<Server[]>(resolve => {
+      let promise = new Promise<Server[]>((resolve) => {
         let servers: Server[] = [];
-        this.serverIdsInIncognitoMode.forEach(n => {
+        this.serverIdsInIncognitoMode.forEach((n) => {
           let server: Server = JSON.parse(localStorage.getItem(n));
           servers.push(server);
         });
@@ -126,9 +133,9 @@ export class ServerService {
   public delete(server: Server) {
     if (this.isIncognitoMode) {
       localStorage.removeItem(`server-${server.id}`);
-      this.serverIdsInIncognitoMode = this.serverIdsInIncognitoMode.filter(n => n !== `server-${server.id}`);
+      this.serverIdsInIncognitoMode = this.serverIdsInIncognitoMode.filter((n) => n !== `server-${server.id}`);
 
-      let promise = new Promise(resolve => {
+      let promise = new Promise((resolve) => {
         resolve(server.id);
       });
       return promise;
@@ -148,12 +155,12 @@ export class ServerService {
   public getLocalServer(host: string, port: number) {
     const promise = new Promise((resolve, reject) => {
       this.findAll().then((servers: Server[]) => {
-        const local = servers.find(server => server.location === 'bundled');
+        const local = servers.find((server) => server.location === 'bundled');
         if (local) {
           local.host = host;
           local.port = port;
           local.protocol = location.protocol as ServerProtocol;
-          this.update(local).then(updated => {
+          this.update(local).then((updated) => {
             resolve(updated);
           }, reject);
         } else {
@@ -163,7 +170,7 @@ export class ServerService {
           server.port = port;
           server.location = 'bundled';
           server.protocol = location.protocol as ServerProtocol;
-          this.create(server).then(created => {
+          this.create(server).then((created) => {
             resolve(created);
           }, reject);
         }
@@ -178,15 +185,15 @@ export class ServerService {
       this.ready.then(
         () => {
           query().then(
-            result => {
+            (result) => {
               resolve(result);
             },
-            error => {
+            (error) => {
               reject(error);
             }
           );
         },
-        error => {
+        (error) => {
           reject(error);
         }
       );
diff --git a/src/app/services/settings.service.spec.ts b/src/app/services/settings.service.spec.ts
index ec8f9ad7..21998e9c 100644
--- a/src/app/services/settings.service.spec.ts
+++ b/src/app/services/settings.service.spec.ts
@@ -25,7 +25,7 @@ describe('SettingsService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [SettingsService, PersistenceService]
+      providers: [SettingsService, PersistenceService],
     });
 
     persistenceService = TestBed.get(PersistenceService);
@@ -61,13 +61,13 @@ describe('SettingsService', () => {
       crash_reports: true,
       experimental_features: false,
       angular_map: false,
-      console_command: undefined
+      console_command: undefined,
     });
   }));
 
   it('should set all values', inject([SettingsService], (service: SettingsService) => {
     const settings = {
-      crash_reports: false
+      crash_reports: false,
     };
     service.setAll(settings);
 
@@ -75,7 +75,7 @@ describe('SettingsService', () => {
       crash_reports: false,
       experimental_features: false,
       angular_map: false,
-      console_command: undefined
+      console_command: undefined,
     });
   }));
 
@@ -85,7 +85,7 @@ describe('SettingsService', () => {
       let changedSettings: Settings;
 
       service.set('crash_reports', true);
-      service.subscribe(settings => {
+      service.subscribe((settings) => {
         changedSettings = settings;
       });
       service.set('crash_reports', false);
diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts
index 8c287f97..fd4c7a3c 100644
--- a/src/app/services/settings.service.ts
+++ b/src/app/services/settings.service.ts
@@ -10,14 +10,14 @@ export interface Settings {
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class SettingsService {
   static DEFAULTS: Settings = {
     crash_reports: true,
     experimental_features: false,
     angular_map: false,
-    console_command: undefined
+    console_command: undefined,
   };
 
   private settingsSubject: BehaviorSubject<Settings>;
@@ -47,14 +47,14 @@ export class SettingsService {
 
   getAll() {
     const settings = { ...SettingsService.DEFAULTS };
-    Object.keys(SettingsService.DEFAULTS).forEach(key => {
+    Object.keys(SettingsService.DEFAULTS).forEach((key) => {
       settings[key] = this.get(key);
     });
     return settings;
   }
 
   setAll(settings) {
-    Object.keys(settings).forEach(key => {
+    Object.keys(settings).forEach((key) => {
       this.set(key, settings[key]);
     });
   }
@@ -63,7 +63,7 @@ export class SettingsService {
     return this.get('experimental_features');
   }
 
-  subscribe(subscriber: ((settings: Settings) => void)) {
+  subscribe(subscriber: (settings: Settings) => void) {
     return this.settingsSubject.subscribe(subscriber);
   }
 }
diff --git a/src/app/services/settings/console.service.spec.ts b/src/app/services/settings/console.service.spec.ts
index 07c0ac8a..485e996d 100644
--- a/src/app/services/settings/console.service.spec.ts
+++ b/src/app/services/settings/console.service.spec.ts
@@ -7,7 +7,7 @@ describe('ConsoleService', () => {
 
   beforeEach(() => {
     let defaultConsoleService = {
-      get: () => 'default'
+      get: () => 'default',
     };
     settings = new MockedSettingsService();
     service = new ConsoleService(defaultConsoleService as any, settings as any);
diff --git a/src/app/services/settings/console.service.ts b/src/app/services/settings/console.service.ts
index 0f8a04a2..48dc52e4 100644
--- a/src/app/services/settings/console.service.ts
+++ b/src/app/services/settings/console.service.ts
@@ -4,15 +4,11 @@ import { SettingsService } from '../settings.service';
 
 @Injectable()
 export class ConsoleService {
-
-  constructor(
-    private defaultConsoleService: DefaultConsoleService,
-    private settingsService: SettingsService
-  ) { }
+  constructor(private defaultConsoleService: DefaultConsoleService, private settingsService: SettingsService) {}
 
   get command(): string {
     const command = this.settingsService.get<string>('console_command');
-    if(command === undefined) {
+    if (command === undefined) {
       return this.defaultConsoleService.get();
     }
     return command;
diff --git a/src/app/services/settings/default-console.service.spec.ts b/src/app/services/settings/default-console.service.spec.ts
index df89f144..9ee9d5f8 100644
--- a/src/app/services/settings/default-console.service.spec.ts
+++ b/src/app/services/settings/default-console.service.spec.ts
@@ -1,4 +1,3 @@
-
 import { DefaultConsoleService } from './default-console.service';
 
 describe('DefaultConsoleService', () => {
@@ -8,10 +7,10 @@ describe('DefaultConsoleService', () => {
     electronService = {
       isElectronApp: false,
       isWindows: false,
-      isLinux: false
+      isLinux: false,
     };
   });
- 
+
   beforeEach(() => {
     service = new DefaultConsoleService(electronService);
   });
@@ -29,17 +28,16 @@ describe('DefaultConsoleService', () => {
     electronService.isElectronApp = true;
     electronService.isWindows = true;
     expect(service.get()).toEqual('putty.exe -telnet %h %p -loghost "%d"');
-  })
+  });
 
   it('should return console for linux', () => {
     electronService.isElectronApp = true;
     electronService.isLinux = true;
     expect(service.get()).toEqual('xfce4-terminal --tab -T "%d" -e "telnet %h %p"');
-  })
+  });
 
   it('should return undefined for other platforms', () => {
     electronService.isElectronApp = true;
     expect(service.get()).toBeUndefined();
-  })
-
+  });
 });
diff --git a/src/app/services/settings/default-console.service.ts b/src/app/services/settings/default-console.service.ts
index 0120a68b..b18aa29c 100644
--- a/src/app/services/settings/default-console.service.ts
+++ b/src/app/services/settings/default-console.service.ts
@@ -3,22 +3,19 @@ import { ElectronService } from 'ngx-electron';
 
 @Injectable()
 export class DefaultConsoleService {
-
-  constructor(
-    private electronService: ElectronService
-  ) { }
+  constructor(private electronService: ElectronService) {}
 
   get() {
-    if(!this.electronService.isElectronApp) {
+    if (!this.electronService.isElectronApp) {
       return undefined;
     }
 
-    if(this.electronService.isLinux) {
-      return 'xfce4-terminal --tab -T "%d" -e "telnet %h %p"'
+    if (this.electronService.isLinux) {
+      return 'xfce4-terminal --tab -T "%d" -e "telnet %h %p"';
     }
 
-    if(this.electronService.isWindows) {
-      return 'putty.exe -telnet %h %p -loghost "%d"'
+    if (this.electronService.isWindows) {
+      return 'putty.exe -telnet %h %p -loghost "%d"';
     }
 
     return undefined;
diff --git a/src/app/services/snapshot.service.spec.ts b/src/app/services/snapshot.service.spec.ts
index b9b354a6..5638d6a0 100644
--- a/src/app/services/snapshot.service.spec.ts
+++ b/src/app/services/snapshot.service.spec.ts
@@ -19,7 +19,7 @@ describe('SnapshotService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, SnapshotService]
+      providers: [HttpServer, SnapshotService],
     });
 
     httpClient = TestBed.get(HttpClient);
diff --git a/src/app/services/symbol.service.spec.ts b/src/app/services/symbol.service.spec.ts
index 6ef893a6..ed0b41d4 100644
--- a/src/app/services/symbol.service.spec.ts
+++ b/src/app/services/symbol.service.spec.ts
@@ -19,7 +19,7 @@ describe('SymbolService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, SymbolService]
+      providers: [HttpServer, SymbolService],
     });
 
     httpClient = TestBed.get(HttpClient);
diff --git a/src/app/services/symbol.service.ts b/src/app/services/symbol.service.ts
index 9727544e..b0539d9e 100644
--- a/src/app/services/symbol.service.ts
+++ b/src/app/services/symbol.service.ts
@@ -31,11 +31,11 @@ export class SymbolService {
   }
 
   scaleDimensionsForNode(node: Node): SymbolDimension {
-    let scale = node.width > node.height ? this.maximumSymbolSize/node.width : this.maximumSymbolSize/node.height;
+    let scale = node.width > node.height ? this.maximumSymbolSize / node.width : this.maximumSymbolSize / node.height;
     return {
       width: node.width * scale,
-      height: node.height * scale
-    }
+      height: node.height * scale,
+    };
   }
 
   getByFilename(symbol_filename: string) {
@@ -44,7 +44,7 @@ export class SymbolService {
 
   add(server: Server, symbolName: string, symbol: string) {
     this.cache = null;
-    return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol)
+    return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol);
   }
 
   load(server: Server): Observable<Symbol[]> {
@@ -52,10 +52,8 @@ export class SymbolService {
   }
 
   list(server: Server) {
-    if(!this.cache) {
-      this.cache = this.load(server).pipe(
-        shareReplay(CACHE_SIZE)
-      );
+    if (!this.cache) {
+      this.cache = this.load(server).pipe(shareReplay(CACHE_SIZE));
     }
 
     return this.cache;
@@ -69,5 +67,5 @@ export class SymbolService {
 
 class SymbolDimension {
   width: number;
-  height: number
+  height: number;
 }
diff --git a/src/app/services/template-mocks.service.ts b/src/app/services/template-mocks.service.ts
index 0859739c..19774006 100644
--- a/src/app/services/template-mocks.service.ts
+++ b/src/app/services/template-mocks.service.ts
@@ -15,285 +15,285 @@ import { TracengTemplate } from '../models/templates/traceng-template';
 
 @Injectable()
 export class TemplateMocksService {
-    getTracengTemplate() : TracengTemplate {
-        let template: TracengTemplate = {
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_type: 'none',
-            default_name_format: 'TraceNG{0}',
-            ip_address: '',
-            name: '',
-            symbol: ':/symbols/classic/traceng.svg',
-            template_id: '',
-            template_type: 'traceng'
-        };
+  getTracengTemplate(): TracengTemplate {
+    let template: TracengTemplate = {
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_type: 'none',
+      default_name_format: 'TraceNG{0}',
+      ip_address: '',
+      name: '',
+      symbol: ':/symbols/classic/traceng.svg',
+      template_id: '',
+      template_type: 'traceng',
+    };
 
-        return template;
-    }
+    return template;
+  }
 
-    getQemuTemplate() : Observable<QemuTemplate> {
-        let template : QemuTemplate = {
-            adapter_type: 'e1000',
-            adapters: 4,
-            bios_image: '',
-            boot_priority: 'c',
-            builtin: false,
-            category: 'guest',
-            cdrom_image: '',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            cpu_throttling: 0,
-            cpus: 1,
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            hda_disk_image: '',
-            hda_disk_interface: 'ide',
-            hdb_disk_image: '',
-            hdb_disk_interface: 'ide',
-            hdc_disk_image: '',
-            hdc_disk_interface: 'ide',
-            hdd_disk_image: '',
-            hdd_disk_interface: 'ide',
-            initrd: '',
-            kernel_command_line: '',
-            kernel_image: '',
-            legacy_networking: false,
-            linked_clone: true,
-            mac_address: '',
-            name: '',
-            on_close: 'power_off',
-            options: '-nographic',
-            platform: '',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            process_priority: 'normal',
-            qemu_path: '',
-            ram: 256,
-            symbol: ':/symbols/qemu_guest.svg',
-            template_id: '',
-            template_type: 'qemu',
-            usage: ''
-        }
-        
-        return of(template);
-    }
+  getQemuTemplate(): Observable<QemuTemplate> {
+    let template: QemuTemplate = {
+      adapter_type: 'e1000',
+      adapters: 4,
+      bios_image: '',
+      boot_priority: 'c',
+      builtin: false,
+      category: 'guest',
+      cdrom_image: '',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      cpu_throttling: 0,
+      cpus: 1,
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      hda_disk_image: '',
+      hda_disk_interface: 'ide',
+      hdb_disk_image: '',
+      hdb_disk_interface: 'ide',
+      hdc_disk_image: '',
+      hdc_disk_interface: 'ide',
+      hdd_disk_image: '',
+      hdd_disk_interface: 'ide',
+      initrd: '',
+      kernel_command_line: '',
+      kernel_image: '',
+      legacy_networking: false,
+      linked_clone: true,
+      mac_address: '',
+      name: '',
+      on_close: 'power_off',
+      options: '-nographic',
+      platform: '',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      process_priority: 'normal',
+      qemu_path: '',
+      ram: 256,
+      symbol: ':/symbols/qemu_guest.svg',
+      template_id: '',
+      template_type: 'qemu',
+      usage: '',
+    };
 
-    getVpcsTemplate() : Observable<VpcsTemplate> {
-        let template: VpcsTemplate = {
-            base_script_file: 'vpcs_base_config.txt',
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            default_name_format: 'PC{0}',
-            name: '',
-            symbol: ':/symbols/vpcs_guest.svg',
-            template_id: '',
-            template_type: 'vpcs'
-        }
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getVpcsTemplate(): Observable<VpcsTemplate> {
+    let template: VpcsTemplate = {
+      base_script_file: 'vpcs_base_config.txt',
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      default_name_format: 'PC{0}',
+      name: '',
+      symbol: ':/symbols/vpcs_guest.svg',
+      template_id: '',
+      template_type: 'vpcs',
+    };
 
-    getVirtualBoxTemplate() : Observable<VirtualBoxTemplate> {
-        let template: VirtualBoxTemplate = {
-            adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power_off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            ram: 0,
-            symbol: ':/symbols/vbox_guest.svg',
-            template_id: '',
-            template_type: 'virtualbox',
-            usage: '',
-            use_any_adapter: false,
-            vmname: ''
-        }
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getVirtualBoxTemplate(): Observable<VirtualBoxTemplate> {
+    let template: VirtualBoxTemplate = {
+      adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power_off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      ram: 0,
+      symbol: ':/symbols/vbox_guest.svg',
+      template_id: '',
+      template_type: 'virtualbox',
+      usage: '',
+      use_any_adapter: false,
+      vmname: '',
+    };
 
-    getCloudNodeTemplate() : Observable<CloudTemplate> {
-        let template = {
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            default_name_format: 'Cloud{0}',
-            name: '',
-            ports_mapping: [],
-            remote_console_type: 'none',
-            symbol: ':/symbols/cloud.svg',
-            template_id: '',
-            template_type: 'cloud'
-        } as CloudTemplate;
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getCloudNodeTemplate(): Observable<CloudTemplate> {
+    let template = {
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      default_name_format: 'Cloud{0}',
+      name: '',
+      ports_mapping: [],
+      remote_console_type: 'none',
+      symbol: ':/symbols/cloud.svg',
+      template_id: '',
+      template_type: 'cloud',
+    } as CloudTemplate;
 
-    getEthernetHubTemplate() : Observable<EthernetHubTemplate> {
-        let template: EthernetHubTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            default_name_format: 'Hub{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/hub.svg',
-            template_id: '',
-            template_type: 'ethernet_hub'
-        }
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getEthernetHubTemplate(): Observable<EthernetHubTemplate> {
+    let template: EthernetHubTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      default_name_format: 'Hub{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/hub.svg',
+      template_id: '',
+      template_type: 'ethernet_hub',
+    };
 
-    getEthernetSwitchTemplate() : Observable<EthernetSwitchTemplate> {
-        let template: EthernetSwitchTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'local',
-            console_type: 'telnet',
-            default_name_format: 'Switch{0}',
-            name: '',
-            ports_mapping: [],
-            symbol: ':/symbols/ethernet_switch.svg',
-            template_id: '',
-            template_type: 'ethernet_switch'
-        }
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getEthernetSwitchTemplate(): Observable<EthernetSwitchTemplate> {
+    let template: EthernetSwitchTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'local',
+      console_type: 'telnet',
+      default_name_format: 'Switch{0}',
+      name: '',
+      ports_mapping: [],
+      symbol: ':/symbols/ethernet_switch.svg',
+      template_id: '',
+      template_type: 'ethernet_switch',
+    };
 
-    getIosTemplate() : Observable<IosTemplate> {
-        let template: IosTemplate = {
-            auto_delete_disks: true,
-            builtin: false,
-            category: 'router',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            default_name_format: 'R{0}',
-            disk0: 0,
-            disk1: 0,
-            exec_area: 64,
-            idlemax: 500,
-            idlepc: '',
-            idlesleep: 30,
-            image: '',
-            mac_addr: '',
-            mmap: true,
-            name: '',
-            nvram: 128,
-            platform: '',
-            private_config: '',
-            ram: 128,
-            sparsemem: true,
-            startup_config: '',
-            symbol: ':/symbols/router.svg',
-            system_id: 'FTX0945W0MY',
-            template_id: '',
-            template_type: 'dynamips',
-            usage: ''
-        }
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getIosTemplate(): Observable<IosTemplate> {
+    let template: IosTemplate = {
+      auto_delete_disks: true,
+      builtin: false,
+      category: 'router',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      default_name_format: 'R{0}',
+      disk0: 0,
+      disk1: 0,
+      exec_area: 64,
+      idlemax: 500,
+      idlepc: '',
+      idlesleep: 30,
+      image: '',
+      mac_addr: '',
+      mmap: true,
+      name: '',
+      nvram: 128,
+      platform: '',
+      private_config: '',
+      ram: 128,
+      sparsemem: true,
+      startup_config: '',
+      symbol: ':/symbols/router.svg',
+      system_id: 'FTX0945W0MY',
+      template_id: '',
+      template_type: 'dynamips',
+      usage: '',
+    };
 
-    getVmwareTemplate() : Observable<VmwareTemplate> {
-        let template: VmwareTemplate = {
-            adapter_type: 'e1000',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power_off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            symbol: ':/symbols/vmware_guest.svg',
-            template_id: '',
-            template_type: 'vmware',
-            usage: '',
-            use_any_adapter: false,
-            vmx_path: ''
-        };
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getVmwareTemplate(): Observable<VmwareTemplate> {
+    let template: VmwareTemplate = {
+      adapter_type: 'e1000',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power_off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      symbol: ':/symbols/vmware_guest.svg',
+      template_id: '',
+      template_type: 'vmware',
+      usage: '',
+      use_any_adapter: false,
+      vmx_path: '',
+    };
 
-    getDockerTemplate() : Observable<DockerTemplate> {
-        let template: DockerTemplate = {
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'vm',
-            console_auto_start: false,
-            console_http_path: '/',
-            console_http_port: 80,
-            console_resolution: '1024x768',
-            console_type: 'telnet',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            environment: '',
-            extra_hosts: '',
-            image: '',
-            name: '',
-            start_command: '',
-            symbol: ':/symbols/docker_guest.svg',
-            template_id: '',
-            template_type: 'docker',
-            usage: ''
-        };
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getDockerTemplate(): Observable<DockerTemplate> {
+    let template: DockerTemplate = {
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'vm',
+      console_auto_start: false,
+      console_http_path: '/',
+      console_http_port: 80,
+      console_resolution: '1024x768',
+      console_type: 'telnet',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      environment: '',
+      extra_hosts: '',
+      image: '',
+      name: '',
+      start_command: '',
+      symbol: ':/symbols/docker_guest.svg',
+      template_id: '',
+      template_type: 'docker',
+      usage: '',
+    };
 
-    getIouTemplate() : Observable<IouTemplate> {
-        let template: IouTemplate = {
-            builtin: false,
-            category: 'switch',
-            compute_id: 'vm',
-            console_auto_start: false,
-            console_type: 'telnet',
-            default_name_format: 'IOU{0}',
-            ethernet_adapters: 1,
-            l1_keepalives: false,
-            name: '',
-            nvram: 128,
-            path: '',
-            private_config: '',
-            ram: 256,
-            serial_adapters: 0,
-            startup_config: 'iou_l2_base_startup-config.txt',
-            symbol: ':/symbols/multilayer_switch.svg',
-            template_id: '',
-            template_type: 'iou',
-            usage: '',
-            use_default_iou_values: true
-        };
+    return of(template);
+  }
 
-        return of(template);
-    }
+  getIouTemplate(): Observable<IouTemplate> {
+    let template: IouTemplate = {
+      builtin: false,
+      category: 'switch',
+      compute_id: 'vm',
+      console_auto_start: false,
+      console_type: 'telnet',
+      default_name_format: 'IOU{0}',
+      ethernet_adapters: 1,
+      l1_keepalives: false,
+      name: '',
+      nvram: 128,
+      path: '',
+      private_config: '',
+      ram: 256,
+      serial_adapters: 0,
+      startup_config: 'iou_l2_base_startup-config.txt',
+      symbol: ':/symbols/multilayer_switch.svg',
+      template_id: '',
+      template_type: 'iou',
+      usage: '',
+      use_default_iou_values: true,
+    };
+
+    return of(template);
+  }
 }
diff --git a/src/app/services/template.service.spec.ts b/src/app/services/template.service.spec.ts
index 06924aab..c4a8ea58 100644
--- a/src/app/services/template.service.spec.ts
+++ b/src/app/services/template.service.spec.ts
@@ -15,7 +15,7 @@ describe('TemplateService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [TemplateService, HttpServer]
+      providers: [TemplateService, HttpServer],
     });
 
     httpClient = TestBed.get(HttpClient);
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index d1b19da5..f8336483 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, EventEmitter } from '@angular/core';
-import { Observable, BehaviorSubject} from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
diff --git a/src/app/services/toaster.service.spec.ts b/src/app/services/toaster.service.spec.ts
index 37c94e7e..edee5195 100644
--- a/src/app/services/toaster.service.spec.ts
+++ b/src/app/services/toaster.service.spec.ts
@@ -11,13 +11,13 @@ export class MockedToasterService {
     duration: 2000,
     panelClass: ['snackabar-success'],
     MatSnackBarHorizontalPosition: 'center',
-    MatSnackBarVerticalPosition: 'bottom'
+    MatSnackBarVerticalPosition: 'bottom',
   };
   snackBarConfigForError = {
     duration: 2000,
     panelClass: ['snackabar-error'],
     MatSnackBarHorizontalPosition: 'center',
-    MatSnackBarVerticalPosition: 'bottom'
+    MatSnackBarVerticalPosition: 'bottom',
   };
 
   constructor() {
@@ -41,9 +41,7 @@ class MockedSnackBar {
 describe('ToasterService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        ToasterService,
-        { provide: MatSnackBar, useClass: MockedSnackBar }]
+      providers: [ToasterService, { provide: MatSnackBar, useClass: MockedSnackBar }],
     });
   });
 
diff --git a/src/app/services/toaster.service.ts b/src/app/services/toaster.service.ts
index 525a7f46..266c2d32 100644
--- a/src/app/services/toaster.service.ts
+++ b/src/app/services/toaster.service.ts
@@ -7,26 +7,24 @@ export class ToasterService {
     duration: 4000,
     panelClass: ['snackabar-success'],
     MatSnackBarHorizontalPosition: 'center',
-    MatSnackBarVerticalPosition: 'bottom'
+    MatSnackBarVerticalPosition: 'bottom',
   };
 
   snackBarConfigForWarning = {
     duration: 4000,
     panelClass: ['snackabar-warning'],
     MatSnackBarHorizontalPosition: 'center',
-    MatSnackBarVerticalPosition: 'bottom'
+    MatSnackBarVerticalPosition: 'bottom',
   };
 
   snackBarConfigForError = {
     duration: 10000,
     panelClass: ['snackabar-error'],
     MatSnackBarHorizontalPosition: 'center',
-    MatSnackBarVerticalPosition: 'bottom'
+    MatSnackBarVerticalPosition: 'bottom',
   };
 
-  constructor(
-    private snackbar: MatSnackBar,
-    private zone: NgZone) {}
+  constructor(private snackbar: MatSnackBar, private zone: NgZone) {}
 
   public error(message: string) {
     this.zone.run(() => {
diff --git a/src/app/services/traceng.service.ts b/src/app/services/traceng.service.ts
index 2c33f12e..4a62043e 100644
--- a/src/app/services/traceng.service.ts
+++ b/src/app/services/traceng.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,21 +7,25 @@ import { TracengTemplate } from '../models/templates/traceng-template';
 
 @Injectable()
 export class TracengService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<TracengTemplate[]> {
-        return this.httpServer.get<TracengTemplate[]>(server, '/templates') as Observable<TracengTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<TracengTemplate[]> {
+    return this.httpServer.get<TracengTemplate[]>(server, '/templates') as Observable<TracengTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<TracengTemplate> {
-        return this.httpServer.get<TracengTemplate>(server, `/templates/${template_id}`) as Observable<TracengTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<TracengTemplate> {
+    return this.httpServer.get<TracengTemplate>(server, `/templates/${template_id}`) as Observable<TracengTemplate>;
+  }
 
-    addTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
-        return this.httpServer.post<TracengTemplate>(server, `/templates`, vpcsTemplate) as Observable<TracengTemplate>;
-    }
+  addTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
+    return this.httpServer.post<TracengTemplate>(server, `/templates`, vpcsTemplate) as Observable<TracengTemplate>;
+  }
 
-    saveTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
-        return this.httpServer.put<TracengTemplate>(server, `/templates/${vpcsTemplate.template_id}`, vpcsTemplate) as Observable<TracengTemplate>;
-    }
+  saveTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
+    return this.httpServer.put<TracengTemplate>(
+      server,
+      `/templates/${vpcsTemplate.template_id}`,
+      vpcsTemplate
+    ) as Observable<TracengTemplate>;
+  }
 }
diff --git a/src/app/services/version.service.spec.ts b/src/app/services/version.service.spec.ts
index 544351e1..76729ee3 100644
--- a/src/app/services/version.service.spec.ts
+++ b/src/app/services/version.service.spec.ts
@@ -27,7 +27,7 @@ describe('VersionService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, AppTestingModule],
-      providers: [HttpServer, VersionService]
+      providers: [HttpServer, VersionService],
     });
 
     httpClient = TestBed.get(HttpClient);
diff --git a/src/app/services/virtual-box-configuration.service.ts b/src/app/services/virtual-box-configuration.service.ts
index 59e1157f..fc0ce89c 100644
--- a/src/app/services/virtual-box-configuration.service.ts
+++ b/src/app/services/virtual-box-configuration.service.ts
@@ -1,37 +1,43 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
-export class VirtualBoxConfigurationService{
-    getConsoleTypes() {
-        return ['telnet', 'none'];
-    }
+export class VirtualBoxConfigurationService {
+  getConsoleTypes() {
+    return ['telnet', 'none'];
+  }
 
-    getOnCloseoptions() {
-        let onCloseOptions = [["Power off the VM", "power_off"],
-            ["Send the shutdown signal (ACPI)", "shutdown_signal"],
-            ["Save the VM state", "save_vm_state"]];
+  getOnCloseoptions() {
+    let onCloseOptions = [
+      ['Power off the VM', 'power_off'],
+      ['Send the shutdown signal (ACPI)', 'shutdown_signal'],
+      ['Save the VM state', 'save_vm_state'],
+    ];
 
-        return onCloseOptions;
-    }
+    return onCloseOptions;
+  }
 
-    getCategories() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getNetworkTypes() {
-        let networkTypes = ["PCnet-PCI II (Am79C970A)",
-            "PCNet-FAST III (Am79C973)",
-            "Intel PRO/1000 MT Desktop (82540EM)",
-            "Intel PRO/1000 T Server (82543GC)",
-            "Intel PRO/1000 MT Server (82545EM)",
-            "Paravirtualized Network (virtio-net)"];
+  getNetworkTypes() {
+    let networkTypes = [
+      'PCnet-PCI II (Am79C970A)',
+      'PCNet-FAST III (Am79C973)',
+      'Intel PRO/1000 MT Desktop (82540EM)',
+      'Intel PRO/1000 T Server (82543GC)',
+      'Intel PRO/1000 MT Server (82545EM)',
+      'Paravirtualized Network (virtio-net)',
+    ];
 
-        return networkTypes;
-    }
+    return networkTypes;
+  }
 }
diff --git a/src/app/services/virtual-box.service.spec.ts b/src/app/services/virtual-box.service.spec.ts
index 885c41b9..7f1143a1 100644
--- a/src/app/services/virtual-box.service.spec.ts
+++ b/src/app/services/virtual-box.service.spec.ts
@@ -9,103 +9,103 @@ import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
 import { VirtualBoxService } from './virtual-box.service';
 
 describe('VirtualBoxService', () => {
-    let httpClient: HttpClient;
-    let httpTestingController: HttpTestingController;
-    let httpServer: HttpServer;
-    let server: Server;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let server: Server;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, AppTestingModule],
-        providers: [HttpServer, VirtualBoxService]
-        });
-
-        httpClient = TestBed.get(HttpClient);
-        httpTestingController = TestBed.get(HttpTestingController);
-        httpServer = TestBed.get(HttpServer);
-        server = getTestServer();
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, VirtualBoxService],
     });
 
-    afterEach(() => {
-        httpTestingController.verify();
-    });
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    server = getTestServer();
+  });
 
-    it('should be created', inject([VirtualBoxService], (service: VirtualBoxService) => {
-        expect(service).toBeTruthy();
-    }));
+  afterEach(() => {
+    httpTestingController.verify();
+  });
 
-    it('should update virtual box template', inject([VirtualBoxService], (service: VirtualBoxService) => {
-        const template: VirtualBoxTemplate = {
-            adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power_off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            ram: 0,
-            symbol: ':/symbols/vbox_guest.svg',
-            template_id: '1',
-            template_type: 'virtualbox',
-            usage: '',
-            use_any_adapter: false,
-            vmname: ''
-        }
+  it('should be created', inject([VirtualBoxService], (service: VirtualBoxService) => {
+    expect(service).toBeTruthy();
+  }));
 
-        service.saveTemplate(server, template).subscribe();
+  it('should update virtual box template', inject([VirtualBoxService], (service: VirtualBoxService) => {
+    const template: VirtualBoxTemplate = {
+      adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power_off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      ram: 0,
+      symbol: ':/symbols/vbox_guest.svg',
+      template_id: '1',
+      template_type: 'virtualbox',
+      usage: '',
+      use_any_adapter: false,
+      vmname: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.saveTemplate(server, template).subscribe();
 
-    it('should add virtual box template', inject([VirtualBoxService], (service: VirtualBoxService) => {
-        const template: VirtualBoxTemplate = {
-            adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power_off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            ram: 0,
-            symbol: ':/symbols/vbox_guest.svg',
-            template_id: '',
-            template_type: 'virtualbox',
-            usage: '',
-            use_any_adapter: false,
-            vmname: ''
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        service.addTemplate(server, template).subscribe();
+  it('should add virtual box template', inject([VirtualBoxService], (service: VirtualBoxService) => {
+    const template: VirtualBoxTemplate = {
+      adapter_type: 'Intel PRO/1000 MT Desktop (82540EM)',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power_off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      ram: 0,
+      symbol: ':/symbols/vbox_guest.svg',
+      template_id: '',
+      template_type: 'virtualbox',
+      usage: '',
+      use_any_adapter: false,
+      vmname: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.addTemplate(server, template).subscribe();
 
-    it('should get available virtual machines', inject([VirtualBoxService], (service: VirtualBoxService) => {
-        service.getVirtualMachines(server).subscribe();
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/compute/virtualbox/vms');
-        expect(req.request.method).toEqual('GET');
-    }));
+  it('should get available virtual machines', inject([VirtualBoxService], (service: VirtualBoxService) => {
+    service.getVirtualMachines(server).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/compute/virtualbox/vms');
+    expect(req.request.method).toEqual('GET');
+  }));
 });
diff --git a/src/app/services/virtual-box.service.ts b/src/app/services/virtual-box.service.ts
index cdcb0d7d..6bcd3f97 100644
--- a/src/app/services/virtual-box.service.ts
+++ b/src/app/services/virtual-box.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,25 +7,36 @@ import { VirtualBoxVm } from '../models/virtualBox/virtual-box-vm';
 
 @Injectable()
 export class VirtualBoxService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<VirtualBoxTemplate[]> {
-        return this.httpServer.get<VirtualBoxTemplate[]>(server, '/templates') as Observable<VirtualBoxTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<VirtualBoxTemplate[]> {
+    return this.httpServer.get<VirtualBoxTemplate[]>(server, '/templates') as Observable<VirtualBoxTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<VirtualBoxTemplate> {
-        return this.httpServer.get<VirtualBoxTemplate>(server, `/templates/${template_id}`) as Observable<VirtualBoxTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<VirtualBoxTemplate> {
+    return this.httpServer.get<VirtualBoxTemplate>(
+      server,
+      `/templates/${template_id}`
+    ) as Observable<VirtualBoxTemplate>;
+  }
 
-    addTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate): Observable<VirtualBoxTemplate> {
-        return this.httpServer.post<VirtualBoxTemplate>(server, `/templates`, virtualBoxTemplate) as Observable<VirtualBoxTemplate>;
-    }
+  addTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate): Observable<VirtualBoxTemplate> {
+    return this.httpServer.post<VirtualBoxTemplate>(
+      server,
+      `/templates`,
+      virtualBoxTemplate
+    ) as Observable<VirtualBoxTemplate>;
+  }
 
-    saveTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate): Observable<VirtualBoxTemplate> {
-        return this.httpServer.put<VirtualBoxTemplate>(server, `/templates/${virtualBoxTemplate.template_id}`, virtualBoxTemplate) as Observable<VirtualBoxTemplate>;
-    }
+  saveTemplate(server: Server, virtualBoxTemplate: VirtualBoxTemplate): Observable<VirtualBoxTemplate> {
+    return this.httpServer.put<VirtualBoxTemplate>(
+      server,
+      `/templates/${virtualBoxTemplate.template_id}`,
+      virtualBoxTemplate
+    ) as Observable<VirtualBoxTemplate>;
+  }
 
-    getVirtualMachines(server: Server) : Observable<VirtualBoxVm[]> {
-        return this.httpServer.get<VirtualBoxVm[]>(server, '/compute/virtualbox/vms') as Observable<VirtualBoxVm[]>;
-    }
+  getVirtualMachines(server: Server): Observable<VirtualBoxVm[]> {
+    return this.httpServer.get<VirtualBoxVm[]>(server, '/compute/virtualbox/vms') as Observable<VirtualBoxVm[]>;
+  }
 }
diff --git a/src/app/services/vmware-configuration.service.ts b/src/app/services/vmware-configuration.service.ts
index 7f9fa6eb..34df5874 100644
--- a/src/app/services/vmware-configuration.service.ts
+++ b/src/app/services/vmware-configuration.service.ts
@@ -1,39 +1,36 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
-export class VmwareConfigurationService{
-    getConsoleTypes() {
-        return ['telnet', 'none'];
-    }
+export class VmwareConfigurationService {
+  getConsoleTypes() {
+    return ['telnet', 'none'];
+  }
 
-    getOnCloseoptions() {
-        let onCloseOptions = [["Power off the VM", "power_off"],
-            ["Send the shutdown signal (ACPI)", "shutdown_signal"],
-            ["Save the VM state", "save_vm_state"]];
+  getOnCloseoptions() {
+    let onCloseOptions = [
+      ['Power off the VM', 'power_off'],
+      ['Send the shutdown signal (ACPI)', 'shutdown_signal'],
+      ['Save the VM state', 'save_vm_state'],
+    ];
 
-        return onCloseOptions;
-    }
+    return onCloseOptions;
+  }
 
-    getCategories() {
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 
-    getNetworkTypes() {
-        let networkTypes = ["default",
-            "e1000",
-            "e1000e",
-            "flexible",
-            "vlance",
-            "vmxnet",
-            "vmxnet2",
-            "vmxnet3"];
+  getNetworkTypes() {
+    let networkTypes = ['default', 'e1000', 'e1000e', 'flexible', 'vlance', 'vmxnet', 'vmxnet2', 'vmxnet3'];
 
-        return networkTypes;
-    }
+    return networkTypes;
+  }
 }
diff --git a/src/app/services/vmware.service.spec.ts b/src/app/services/vmware.service.spec.ts
index 43506556..450a0446 100644
--- a/src/app/services/vmware.service.spec.ts
+++ b/src/app/services/vmware.service.spec.ts
@@ -9,101 +9,101 @@ import { VmwareService } from './vmware.service';
 import { VmwareTemplate } from '../models/templates/vmware-template';
 
 describe('VmwareService', () => {
-    let httpClient: HttpClient;
-    let httpTestingController: HttpTestingController;
-    let httpServer: HttpServer;
-    let server: Server;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let server: Server;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, AppTestingModule],
-        providers: [HttpServer, VmwareService]
-        });
-
-        httpClient = TestBed.get(HttpClient);
-        httpTestingController = TestBed.get(HttpTestingController);
-        httpServer = TestBed.get(HttpServer);
-        server = getTestServer();
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, VmwareService],
     });
 
-    afterEach(() => {
-        httpTestingController.verify();
-    });
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    server = getTestServer();
+  });
 
-    it('should be created', inject([VmwareService], (service: VmwareService) => {
-        expect(service).toBeTruthy();
-    }));
+  afterEach(() => {
+    httpTestingController.verify();
+  });
 
-    it('should update vmware template', inject([VmwareService], (service: VmwareService) => {
-        const template: VmwareTemplate = {
-            adapter_type: 'e1000',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power-off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            symbol: ':/symbols/vmware_guest.svg',
-            template_id: '1',
-            template_type: 'vmware',
-            usage: '',
-            use_any_adapter: false,
-            vmx_path: ''
-        };
+  it('should be created', inject([VmwareService], (service: VmwareService) => {
+    expect(service).toBeTruthy();
+  }));
 
-        service.saveTemplate(server, template).subscribe();
+  it('should update vmware template', inject([VmwareService], (service: VmwareService) => {
+    const template: VmwareTemplate = {
+      adapter_type: 'e1000',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power-off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      symbol: ':/symbols/vmware_guest.svg',
+      template_id: '1',
+      template_type: 'vmware',
+      usage: '',
+      use_any_adapter: false,
+      vmx_path: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.saveTemplate(server, template).subscribe();
 
-    it('should add vmware template', inject([VmwareService], (service: VmwareService) => {
-        const template: VmwareTemplate = {
-            adapter_type: 'e1000',
-            adapters: 1,
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'none',
-            custom_adapters: [],
-            default_name_format: '{name}-{0}',
-            first_port_name: '',
-            headless: false,
-            linked_clone: false,
-            name: '',
-            on_close: 'power-off',
-            port_name_format: 'Ethernet{0}',
-            port_segment_size: 0,
-            symbol: ':/symbols/vmware_guest.svg',
-            template_id: '1',
-            template_type: 'vmware',
-            usage: '',
-            use_any_adapter: false,
-            vmx_path: ''
-        };
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        service.addTemplate(server, template).subscribe();
+  it('should add vmware template', inject([VmwareService], (service: VmwareService) => {
+    const template: VmwareTemplate = {
+      adapter_type: 'e1000',
+      adapters: 1,
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'none',
+      custom_adapters: [],
+      default_name_format: '{name}-{0}',
+      first_port_name: '',
+      headless: false,
+      linked_clone: false,
+      name: '',
+      on_close: 'power-off',
+      port_name_format: 'Ethernet{0}',
+      port_segment_size: 0,
+      symbol: ':/symbols/vmware_guest.svg',
+      template_id: '1',
+      template_type: 'vmware',
+      usage: '',
+      use_any_adapter: false,
+      vmx_path: '',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.addTemplate(server, template).subscribe();
 
-    it('should get available virtual machines', inject([VmwareService], (service: VmwareService) => {
-        service.getVirtualMachines(server).subscribe();
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/compute/vmware/vms');
-        expect(req.request.method).toEqual('GET');
-    }));
+  it('should get available virtual machines', inject([VmwareService], (service: VmwareService) => {
+    service.getVirtualMachines(server).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/compute/vmware/vms');
+    expect(req.request.method).toEqual('GET');
+  }));
 });
diff --git a/src/app/services/vmware.service.ts b/src/app/services/vmware.service.ts
index 111cf371..e9bd5850 100644
--- a/src/app/services/vmware.service.ts
+++ b/src/app/services/vmware.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { Observable } from 'rxjs';
@@ -7,25 +7,29 @@ import { VmwareVm } from '../models/vmware/vmware-vm';
 
 @Injectable()
 export class VmwareService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<VmwareTemplate[]> {
-        return this.httpServer.get<VmwareTemplate[]>(server, '/templates') as Observable<VmwareTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<VmwareTemplate[]> {
+    return this.httpServer.get<VmwareTemplate[]>(server, '/templates') as Observable<VmwareTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<VmwareTemplate> {
-        return this.httpServer.get<VmwareTemplate>(server, `/templates/${template_id}`) as Observable<VmwareTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<VmwareTemplate> {
+    return this.httpServer.get<VmwareTemplate>(server, `/templates/${template_id}`) as Observable<VmwareTemplate>;
+  }
 
-    addTemplate(server: Server, vmwareTemplate: VmwareTemplate): Observable<VmwareTemplate> {
-        return this.httpServer.post<VmwareTemplate>(server, `/templates`, vmwareTemplate) as Observable<VmwareTemplate>;
-    }
+  addTemplate(server: Server, vmwareTemplate: VmwareTemplate): Observable<VmwareTemplate> {
+    return this.httpServer.post<VmwareTemplate>(server, `/templates`, vmwareTemplate) as Observable<VmwareTemplate>;
+  }
 
-    saveTemplate(server: Server, vmwareTemplate: VmwareTemplate): Observable<VmwareTemplate> {
-        return this.httpServer.put<VmwareTemplate>(server, `/templates/${vmwareTemplate.template_id}`, vmwareTemplate) as Observable<VmwareTemplate>;
-    }
+  saveTemplate(server: Server, vmwareTemplate: VmwareTemplate): Observable<VmwareTemplate> {
+    return this.httpServer.put<VmwareTemplate>(
+      server,
+      `/templates/${vmwareTemplate.template_id}`,
+      vmwareTemplate
+    ) as Observable<VmwareTemplate>;
+  }
 
-    getVirtualMachines(server: Server) : Observable<VmwareVm[]> {
-        return this.httpServer.get<VmwareVm[]>(server, '/compute/vmware/vms') as Observable<VmwareVm[]>;
-    }
+  getVirtualMachines(server: Server): Observable<VmwareVm[]> {
+    return this.httpServer.get<VmwareVm[]>(server, '/compute/vmware/vms') as Observable<VmwareVm[]>;
+  }
 }
diff --git a/src/app/services/vpcs-configuration.service.ts b/src/app/services/vpcs-configuration.service.ts
index 2216013a..bc9dd374 100644
--- a/src/app/services/vpcs-configuration.service.ts
+++ b/src/app/services/vpcs-configuration.service.ts
@@ -1,18 +1,20 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class VpcsConfigurationService {
-    getConsoleTypes(){
-        return ['telnet', 'none'];
-    }
+  getConsoleTypes() {
+    return ['telnet', 'none'];
+  }
 
-    getCategories(){
-        let categories = [["Default", "guest"],
-            ["Routers", "router"],
-            ["Switches", "switch"],
-            ["End devices", "guest"],
-            ["Security devices", "firewall"]];
+  getCategories() {
+    let categories = [
+      ['Default', 'guest'],
+      ['Routers', 'router'],
+      ['Switches', 'switch'],
+      ['End devices', 'guest'],
+      ['Security devices', 'firewall'],
+    ];
 
-        return categories;
-    }
+    return categories;
+  }
 }
diff --git a/src/app/services/vpcs.service.spec.ts b/src/app/services/vpcs.service.spec.ts
index c633c751..c1c13860 100644
--- a/src/app/services/vpcs.service.spec.ts
+++ b/src/app/services/vpcs.service.spec.ts
@@ -9,72 +9,72 @@ import { VpcsService } from './vpcs.service';
 import { VpcsTemplate } from '../models/templates/vpcs-template';
 
 describe('VpcsService', () => {
-    let httpClient: HttpClient;
-    let httpTestingController: HttpTestingController;
-    let httpServer: HttpServer;
-    let server: Server;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let httpServer: HttpServer;
+  let server: Server;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, AppTestingModule],
-        providers: [HttpServer, VpcsService]
-        });
-
-        httpClient = TestBed.get(HttpClient);
-        httpTestingController = TestBed.get(HttpTestingController);
-        httpServer = TestBed.get(HttpServer);
-        server = getTestServer();
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, AppTestingModule],
+      providers: [HttpServer, VpcsService],
     });
 
-    afterEach(() => {
-        httpTestingController.verify();
-    });
+    httpClient = TestBed.get(HttpClient);
+    httpTestingController = TestBed.get(HttpTestingController);
+    httpServer = TestBed.get(HttpServer);
+    server = getTestServer();
+  });
 
-    it('should be created', inject([VpcsService], (service: VpcsService) => {
-        expect(service).toBeTruthy();
-    }));
+  afterEach(() => {
+    httpTestingController.verify();
+  });
 
-    it('should update vpcs template', inject([VpcsService], (service: VpcsService) => {
-        const template: VpcsTemplate = {
-            base_script_file: 'vpcs_base_config.txt',
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            default_name_format: 'PC{0}',
-            name: '',
-            symbol: ':/symbols/vpcs_guest.svg',
-            template_id: '1',
-            template_type: 'vpcs'
-        }
+  it('should be created', inject([VpcsService], (service: VpcsService) => {
+    expect(service).toBeTruthy();
+  }));
 
-        service.saveTemplate(server, template).subscribe();
+  it('should update vpcs template', inject([VpcsService], (service: VpcsService) => {
+    const template: VpcsTemplate = {
+      base_script_file: 'vpcs_base_config.txt',
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      default_name_format: 'PC{0}',
+      name: '',
+      symbol: ':/symbols/vpcs_guest.svg',
+      template_id: '1',
+      template_type: 'vpcs',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
-        expect(req.request.method).toEqual('PUT');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.saveTemplate(server, template).subscribe();
 
-    it('should add vpcs template', inject([VpcsService], (service: VpcsService) => {
-        const template: VpcsTemplate = {
-            base_script_file: 'vpcs_base_config.txt',
-            builtin: false,
-            category: 'guest',
-            compute_id: 'local',
-            console_auto_start: false,
-            console_type: 'telnet',
-            default_name_format: 'PC{0}',
-            name: '',
-            symbol: ':/symbols/vpcs_guest.svg',
-            template_id: '',
-            template_type: 'vpcs'
-        }
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates/1');
+    expect(req.request.method).toEqual('PUT');
+    expect(req.request.body).toEqual(template);
+  }));
 
-        service.addTemplate(server, template).subscribe();
+  it('should add vpcs template', inject([VpcsService], (service: VpcsService) => {
+    const template: VpcsTemplate = {
+      base_script_file: 'vpcs_base_config.txt',
+      builtin: false,
+      category: 'guest',
+      compute_id: 'local',
+      console_auto_start: false,
+      console_type: 'telnet',
+      default_name_format: 'PC{0}',
+      name: '',
+      symbol: ':/symbols/vpcs_guest.svg',
+      template_id: '',
+      template_type: 'vpcs',
+    };
 
-        const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
-        expect(req.request.method).toEqual('POST');
-        expect(req.request.body).toEqual(template);
-    }));
+    service.addTemplate(server, template).subscribe();
+
+    const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/templates');
+    expect(req.request.method).toEqual('POST');
+    expect(req.request.body).toEqual(template);
+  }));
 });
diff --git a/src/app/services/vpcs.service.ts b/src/app/services/vpcs.service.ts
index 3f1e2cc9..6398102e 100644
--- a/src/app/services/vpcs.service.ts
+++ b/src/app/services/vpcs.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpServer } from './http-server.service';
 import { Server } from '../models/server';
 import { VpcsTemplate } from '../models/templates/vpcs-template';
@@ -7,21 +7,25 @@ import { HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class VpcsService {
-    constructor(private httpServer: HttpServer) {}
+  constructor(private httpServer: HttpServer) {}
 
-    getTemplates(server: Server): Observable<VpcsTemplate[]> {
-        return this.httpServer.get<VpcsTemplate[]>(server, '/templates') as Observable<VpcsTemplate[]>;
-    }
+  getTemplates(server: Server): Observable<VpcsTemplate[]> {
+    return this.httpServer.get<VpcsTemplate[]>(server, '/templates') as Observable<VpcsTemplate[]>;
+  }
 
-    getTemplate(server: Server, template_id: string): Observable<VpcsTemplate> {
-        return this.httpServer.get<VpcsTemplate>(server, `/templates/${template_id}`) as Observable<VpcsTemplate>;
-    }
+  getTemplate(server: Server, template_id: string): Observable<VpcsTemplate> {
+    return this.httpServer.get<VpcsTemplate>(server, `/templates/${template_id}`) as Observable<VpcsTemplate>;
+  }
 
-    addTemplate(server: Server, vpcsTemplate: VpcsTemplate): Observable<VpcsTemplate> {
-        return this.httpServer.post<VpcsTemplate>(server, `/templates`, vpcsTemplate) as Observable<VpcsTemplate>;
-    }
+  addTemplate(server: Server, vpcsTemplate: VpcsTemplate): Observable<VpcsTemplate> {
+    return this.httpServer.post<VpcsTemplate>(server, `/templates`, vpcsTemplate) as Observable<VpcsTemplate>;
+  }
 
-    saveTemplate(server: Server, vpcsTemplate: VpcsTemplate): Observable<VpcsTemplate> {
-        return this.httpServer.put<VpcsTemplate>(server, `/templates/${vpcsTemplate.template_id}`, vpcsTemplate) as Observable<VpcsTemplate>;
-    }
+  saveTemplate(server: Server, vpcsTemplate: VpcsTemplate): Observable<VpcsTemplate> {
+    return this.httpServer.put<VpcsTemplate>(
+      server,
+      `/templates/${vpcsTemplate.template_id}`,
+      vpcsTemplate
+    ) as Observable<VpcsTemplate>;
+  }
 }
diff --git a/src/app/testing/app-testing/app-testing.module.ts b/src/app/testing/app-testing/app-testing.module.ts
index 33864fe9..0414a25a 100644
--- a/src/app/testing/app-testing/app-testing.module.ts
+++ b/src/app/testing/app-testing/app-testing.module.ts
@@ -5,6 +5,6 @@ import { ServerErrorHandler } from '../../services/http-server.service';
 @NgModule({
   imports: [CommonModule],
   declarations: [],
-  providers: [ServerErrorHandler]
+  providers: [ServerErrorHandler],
 })
 export class AppTestingModule {}
diff --git a/src/app/validators/non-negative-validator.ts b/src/app/validators/non-negative-validator.ts
index 9b2f5f3a..146571bd 100644
--- a/src/app/validators/non-negative-validator.ts
+++ b/src/app/validators/non-negative-validator.ts
@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class NonNegativeValidator {
   get(control) {
-    if (+control.value>=0) {
+    if (+control.value >= 0) {
       return null;
-    } 
+    }
 
     return { negativeValue: true };
   }
diff --git a/src/app/validators/project-name-async-validator.ts b/src/app/validators/project-name-async-validator.ts
index 6d3f1e2d..a0d8e18d 100644
--- a/src/app/validators/project-name-async-validator.ts
+++ b/src/app/validators/project-name-async-validator.ts
@@ -5,10 +5,10 @@ import { map, switchMap } from 'rxjs/operators';
 import { Server } from '../models/server';
 
 export const projectNameAsyncValidator = (server: Server, projectService: ProjectService) => {
-    return (control: FormControl) => {
-        return timer(500).pipe(
-            switchMap(() => projectService.list(server)),
-            map(response => (response.find(n => n.name === control.value) ? {projectExist: true} : null))
-        );
-    }
-}
+  return (control: FormControl) => {
+    return timer(500).pipe(
+      switchMap(() => projectService.list(server)),
+      map((response) => (response.find((n) => n.name === control.value) ? { projectExist: true } : null))
+    );
+  };
+};
diff --git a/src/app/validators/rotation-validator.ts b/src/app/validators/rotation-validator.ts
index a95f3f37..85f33f77 100644
--- a/src/app/validators/rotation-validator.ts
+++ b/src/app/validators/rotation-validator.ts
@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class RotationValidator {
   get(control) {
-    if (+control.value>-360 && +control.value<=360) {
+    if (+control.value > -360 && +control.value <= 360) {
       return null;
-    } 
+    }
 
     return { negativeValue: true };
   }
diff --git a/src/app/validators/template-name-async-validator.ts b/src/app/validators/template-name-async-validator.ts
index 160c10da..05c50475 100644
--- a/src/app/validators/template-name-async-validator.ts
+++ b/src/app/validators/template-name-async-validator.ts
@@ -5,10 +5,10 @@ import { map, switchMap } from 'rxjs/operators';
 import { Server } from '../models/server';
 
 export const templateNameAsyncValidator = (server: Server, templateService: TemplateService) => {
-    return (control: FormControl) => {
-        return timer(500).pipe(
-            switchMap(() => templateService.list(server)),
-            map(response => (response.find(n => n.name === control.value) ? {templateExist: true} : null))
-        );
-    }
-}
+  return (control: FormControl) => {
+    return timer(500).pipe(
+      switchMap(() => templateService.list(server)),
+      map((response) => (response.find((n) => n.name === control.value) ? { templateExist: true } : null))
+    );
+  };
+};
diff --git a/src/environments/environment.electron.prod.ts b/src/environments/environment.electron.prod.ts
index b1de21c8..33e05f14 100644
--- a/src/environments/environment.electron.prod.ts
+++ b/src/environments/environment.electron.prod.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  solarputty_download_url: "",
+  solarputty_download_url: '',
   production: true,
   electron: true,
 };
diff --git a/src/environments/environment.electron.ts b/src/environments/environment.electron.ts
index dd88728a..411afa47 100644
--- a/src/environments/environment.electron.ts
+++ b/src/environments/environment.electron.ts
@@ -1,5 +1,5 @@
 export const environment = {
   production: false,
   electron: true,
-  solarputty_download_url: "",
+  solarputty_download_url: '',
 };
diff --git a/src/environments/environment.github.prod.ts b/src/environments/environment.github.prod.ts
index 2bf4ad5f..732ed166 100644
--- a/src/environments/environment.github.prod.ts
+++ b/src/environments/environment.github.prod.ts
@@ -2,5 +2,5 @@ export const environment = {
   production: true,
   electron: false,
   githubio: true,
-  solarputty_download_url: ""
+  solarputty_download_url: '',
 };
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index cd119730..6258b34c 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -2,5 +2,5 @@ export const environment = {
   production: true,
   electron: false,
   githubio: false,
-  solarputty_download_url: "",
+  solarputty_download_url: '',
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index b4dfd930..cfed224a 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   electron: false,
   githubio: false,
-  solarputty_download_url: ''
+  solarputty_download_url: '',
 };
 
 /*
diff --git a/src/index.html b/src/index.html
index 5e219ee4..0332bc23 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
 
     <script type="application/javascript">
       // Github Pages redirection
-      (function() {
+      (function () {
         var redirect = sessionStorage.redirect;
         delete sessionStorage.redirect;
         if (redirect && redirect != location.href) {
@@ -41,9 +41,9 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D6FZL9923"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag()
-
-      {dataLayer.push(arguments);}
+      function gtag() {
+        dataLayer.push(arguments);
+      }
       gtag('js', new Date());
 
       gtag('config', 'G-5D6FZL9923');
diff --git a/src/main.ts b/src/main.ts
index a9a45d87..d097fcdc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-
 import { enableProdMode, ApplicationRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -11,11 +10,12 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .then(moduleRef => {
+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));
+  .catch((err) => console.log(err));
diff --git a/src/styles.scss b/src/styles.scss
index b8aaec2b..f65fb1dc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,27 +11,27 @@ a.table-link {
 }
 
 .snackabar-success {
-  background:#0097a7!important;
-  color: white!important;
+  background: #0097a7 !important;
+  color: white !important;
 }
 
 .snackbar-warning {
-  background: rgb(197, 199, 64)!important;
-  color: white!important;
+  background: rgb(197, 199, 64) !important;
+  color: white !important;
 }
 
 .snackbar-error {
-  background: #B00020!important;
-  color: white!important;
+  background: #b00020 !important;
+  color: white !important;
 }
 
 .mat-dialog-actions {
-  margin-bottom: -12px!important;
+  margin-bottom: -12px !important;
 }
 
 @-moz-document url-prefix() {
-  .temporaryElement{
-      line-height: 1.4em;
+  .temporaryElement {
+    line-height: 1.4em;
   }
 }
 
diff --git a/src/test.ts b/src/test.ts
index 6d3dea89..b7ea7e6a 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,4 +1,3 @@
-
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
diff --git a/src/theme.scss b/src/theme.scss
index 45eb8e57..45e924fc 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -26,13 +26,13 @@ $mat-dark-theme-background: (
   selected-disabled-button: map_get($mat-grey, 800),
   disabled-button-toggle: black,
   unselected-chip: map_get($mat-grey, 700),
-  disabled-list-option: black
+  disabled-list-option: black,
 );
 
 $dark-theme: map-merge(
   $dark-theme,
   (
-    background: $mat-dark-theme-background
+    background: $mat-dark-theme-background,
   )
 );
 
@@ -68,7 +68,7 @@ $dark-theme: map-merge(
   @include mat-toolbar-theme($dark-background);
   @include mat-tooltip-theme($dark-theme);
   @include mat-snack-bar-theme($dark-theme);
-  color: white!important;
+  color: white !important;
 }
 
 // Light theme
@@ -90,13 +90,13 @@ $mat-light-theme-background: (
   selected-disabled-button: map_get($mat-blue, 800),
   disabled-button-toggle: black,
   unselected-chip: map_get($mat-blue, 700),
-  disabled-list-option: black
+  disabled-list-option: black,
 );
 
 $light-theme: map-merge(
   $light-theme,
   (
-    background: $mat-light-theme-background
+    background: $mat-light-theme-background,
   )
 );