Release v3.0.0a5

re enable configure dialog

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: Build
 on:
   push:
     branches:
-      - '**'  
+      - '**'
   pull_request:
     branches:
       - master
@@ -10,16 +10,19 @@ on:
 
 jobs:
   build:
-    runs-on: windows-latest
-    
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ 14, 16, 18 ]
+    name: Node ${{ matrix.node }}
     steps:
-      - uses: actions/checkout@v2
-      - name: Setup node 14
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Setup Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
-      - uses: c-hive/gha-yarn-cache@v1
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
       - name: Install JS dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile --immutable
       - name: Test
         run: yarn test

.gitignore

@@ -12,6 +12,7 @@
 /scripts/build
 /scripts/dist
 /env
+/.angular
 
 # dependencies
 /node_modules

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "angular.enable-strict-mode-prompt": false
+}

.yarnclean

@@ -3,11 +3,11 @@ __tests__
 node_modules/*/test
 node_modules/*/tests
 powered-test
-e2e
+#e2e
 
 # asset directories
 docs
-doc
+#doc
 website
 images
 

angular.json

@@ -1,247 +1,234 @@
 {
-	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-	"version": 1,
-	"newProjectRoot": "projects",
-	"projects": {
-		"gns3-web-ui": {
-			"root": "",
-			"sourceRoot": "src",
-			"projectType": "application",
-			"architect": {
-				"build": {
-					"builder": "@angular-devkit/build-angular:browser",
-					"options": {
-						"allowedCommonJsDependencies": [
-							"rxjs",
-							"rxjs-compat",
-							"uuid",
-							"css-tree",
-							"save-svg-as-png",
-							"angular-draggable-droppable",
-							"dom-set",
-							"dom-plane",
-							"mousetrap",
-							"@mattlewis92/dom-autoscroller",
-							"rxjs/Rx",
-							"rxjs/add/operator/map",
-							"rxjs-compat/add/operator/map",
-							"classnames",
-							"stylenames",
-              "ipaddr.js"
-            ],
-						"outputPath": "dist",
-						"index": "src/index.html",
-						"main": "src/main.ts",
-						"tsConfig": "src/tsconfig.app.json",
-						"polyfills": "src/polyfills.ts",
-						"assets": [
-							"src/assets",
-							"src/favicon.ico",
-							"src/ReleaseNotes.txt"
-						],
-						"styles": [
-							"node_modules/bootstrap/dist/css/bootstrap.min.css",
-							"node_modules/notosans-fontface/css/notosans-fontface.min.css",
-							"src/styles.scss",
-							"src/theme.scss"
-						],
-						"scripts": [],
-						"vendorChunk": true,
-						"extractLicenses": false,
-						"buildOptimizer": true,
-						"sourceMap": true,
-						"optimization": false,
-						"namedChunks": true,
-						"aot": true
-					},
-					"configurations": {
-						"production": {
-							"budgets": [
-								{
-									"type": "anyComponentStyle",
-									"maximumWarning": "6kb"
-								}
-							],
-							"optimization": true,
-							"outputHashing": "all",
-							"sourceMap": {
-								"hidden": true,
-								"scripts": true,
-								"styles": false
-							},
-							"namedChunks": false,
-							"extractLicenses": true,
-							"vendorChunk": false,
-							"buildOptimizer": true,
-							"fileReplacements": [
-								{
-									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.prod.ts"
-								}
-							]
-						},
-						"electronProd": {
-							"budgets": [
-								{
-									"type": "anyComponentStyle",
-									"maximumWarning": "6kb"
-								}
-							],
-							"optimization": true,
-							"outputHashing": "all",
-							"sourceMap": false,
-							"namedChunks": false,
-							"extractLicenses": true,
-							"vendorChunk": false,
-							"buildOptimizer": true,
-							"fileReplacements": [
-								{
-									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.electron.prod.ts"
-								}
-							]
-						},
-						"electronDev": {
-							"budgets": [
-								{
-									"type": "anyComponentStyle",
-									"maximumWarning": "6kb"
-								}
-							],
-							"fileReplacements": [
-								{
-									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.electron.ts"
-								}
-							]
-						},
-						"githubProd": {
-							"budgets": [
-								{
-									"type": "anyComponentStyle",
-									"maximumWarning": "6kb"
-								}
-							],
-							"optimization": true,
-							"outputHashing": "all",
-							"sourceMap": false,
-							"namedChunks": false,
-							"extractLicenses": true,
-							"vendorChunk": false,
-							"buildOptimizer": true,
-							"fileReplacements": [
-								{
-									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.github.prod.ts"
-								}
-							]
-						}
-					}
-				},
-				"serve": {
-					"builder": "@angular-devkit/build-angular:dev-server",
-					"options": {
-						"browserTarget": "gns3-web-ui:build"
-					},
-					"configurations": {
-						"production": {
-							"browserTarget": "gns3-web-ui:build:production"
-						},
-						"electronProd": {
-							"browserTarget": "gns3-web-ui:build:electronProd"
-						},
-						"electronDev": {
-							"browserTarget": "gns3-web-ui:build:electronDev"
-						},
-						"githubProd": {
-							"browserTarget": "gns3-web-ui:build:githubProd"
-						}
-					}
-				},
-				"extract-i18n": {
-					"builder": "@angular-devkit/build-angular:extract-i18n",
-					"options": {
-						"browserTarget": "gns3-web-ui:build"
-					}
-				},
-				"test": {
-					"builder": "@angular-devkit/build-angular:karma",
-					"options": {
-						"main": "src/test.ts",
-						"karmaConfig": "./karma.conf.js",
-						"polyfills": "src/polyfills.ts",
-						"tsConfig": "src/tsconfig.spec.json",
-						"scripts": [],
-						"styles": [
-							"node_modules/bootstrap/dist/css/bootstrap.min.css",
-							"node_modules/notosans-fontface/css/notosans-fontface.min.css",
-							"src/styles.scss",
-							"src/theme.scss"
-						],
-						"sourceMap": false,
-						"assets": [
-							"src/assets",
-							"src/favicon.ico"
-						]
-					}
-				},
-				"lint": {
-					"builder": "@angular-devkit/build-angular:tslint",
-					"options": {
-						"tsConfig": [
-							"src/tsconfig.app.json",
-							"src/tsconfig.spec.json"
-						],
-						"exclude": [
-							"**/node_modules/**",
-							"**/*.spec.ts"
-						]
-					}
-				}
-			},
-			"schematics": {
-				"@schematics/angular:component": {
-					"style": "scss"
-				}
-			}
-		},
-		"gns3-web-ui-e2e": {
-			"root": "e2e",
-			"sourceRoot": "e2e",
-			"projectType": "application",
-			"architect": {
-				"e2e": {
-					"builder": "@angular-devkit/build-angular:protractor",
-					"options": {
-						"protractorConfig": "./protractor.conf.js",
-						"devServerTarget": "gns3-web-ui:serve"
-					}
-				},
-				"lint": {
-					"builder": "@angular-devkit/build-angular:tslint",
-					"options": {
-						"tsConfig": [
-							"e2e/tsconfig.e2e.json"
-						],
-						"exclude": [
-							"**/node_modules/**"
-						]
-					}
-				}
-			}
-		}
-	},
-	"defaultProject": "gns3-web-ui",
-	"schematics": {
-		"@schematics/angular:component": {
-			"prefix": "app",
-			"style": "scss"
-		},
-		"@schematics/angular:directive": {
-			"prefix": "app"
-		}
-	},
-	"cli": {
-		"analytics": false
-	}
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "gns3-web-ui": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "allowedCommonJsDependencies": [
+                            "rxjs",
+                            "rxjs-compat",
+                            "uuid",
+                            "css-tree",
+                            "save-svg-as-png",
+                            "angular-draggable-droppable",
+                            "dom-set",
+                            "dom-plane",
+                            "mousetrap",
+                            "@mattlewis92/dom-autoscroller",
+                            "rxjs/Rx",
+                            "rxjs/add/operator/map",
+                            "rxjs-compat/add/operator/map",
+                            "classnames",
+                            "stylenames",
+                            "source-map-js",
+                            "spark-md5",
+                            "xterm",
+                            "xterm-addon-attach",
+                            "xterm-addon-fit"
+                        ],
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "polyfills": "src/polyfills.ts",
+                        "assets": [
+                            "src/assets",
+                            "src/favicon.ico",
+                            "src/ReleaseNotes.txt"
+                        ],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/notosans-fontface/css/notosans-fontface.min.css",
+                            "src/styles.scss",
+                            "src/theme.scss"
+                        ],
+                        "scripts": [],
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": true,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true,
+                        "aot": true
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": {
+                                "hidden": true,
+                                "scripts": true,
+                                "styles": false
+                            },
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }]
+                        },
+                        "electronProd": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.electron.prod.ts"
+                            }]
+                        },
+                        "electronDev": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.electron.ts"
+                            }]
+                        },
+                        "githubProd": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.github.prod.ts"
+                            }]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "gns3-web-ui:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "gns3-web-ui:build:production"
+                        },
+                        "electronProd": {
+                            "browserTarget": "gns3-web-ui:build:electronProd"
+                        },
+                        "electronDev": {
+                            "browserTarget": "gns3-web-ui:build:electronDev"
+                        },
+                        "githubProd": {
+                            "browserTarget": "gns3-web-ui:build:githubProd"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "gns3-web-ui:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "karmaConfig": "./karma.conf.js",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "scripts": [],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/notosans-fontface/css/notosans-fontface.min.css",
+                            "src/styles.scss",
+                            "src/theme.scss"
+                        ],
+                        "sourceMap": false,
+                        "assets": [
+                            "src/assets",
+                            "src/favicon.ico"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/*.spec.ts"
+                        ]
+                    }
+                }
+            },
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            }
+        },
+        "gns3-web-ui-e2e": {
+            "root": "e2e",
+            "sourceRoot": "e2e",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "./protractor.conf.js",
+                        "devServerTarget": "gns3-web-ui:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "e2e/tsconfig.e2e.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "schematics": {
+        "@schematics/angular:component": {
+            "prefix": "app",
+            "style": "scss"
+        },
+        "@schematics/angular:directive": {
+            "prefix": "app"
+        }
+    },
+    "cli": {
+        "analytics": false
+    }
 }

e2e/controllers.e2e-spec.ts

@@ -0,0 +1,43 @@
+import { TestHelper } from './helpers/common.po';
+import { ControllersPage } from './helpers/controller.po';
+
+describe('Controllers page', () => {
+  let page: ControllersPage;
+  let helper: TestHelper;
+
+  beforeEach(() => {
+    page = new ControllersPage();
+    helper = new TestHelper();
+  });
+
+  xit('user should have possibility to add controller', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToControllersPage();
+
+    // act
+    let text = await page.getAddControllerNotificationText();
+
+    // assert
+    expect(text).toBe("We've discovered GNS3 controller on 127.0.0.1:3080, would you like to add to the list?");
+  });
+
+  it('user should see added controller in the list', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToControllersPage();
+    await page.clickAddController();
+    helper.sleep(1000);
+
+    // act
+    let firstRowOfControllersTable = await page.checkControllersTable();
+    let controllerData = [];
+    await helper.asyncForEach(firstRowOfControllersTable, async (element) => {
+      controllerData.push(await element.getText());
+    });
+
+    // assert
+    expect(controllerData).toContain('127.0.0.1');
+    expect(controllerData).toContain('3080');
+  });
+});

e2e/helpers/controller.po.ts

@@ -1,41 +1,41 @@
 import { browser, by } from 'protractor';
 import { TestHelper } from './common.po';
 
-export class ServersPage {
+export class ControllersPage {
   helper = new TestHelper();
 
   maximizeWindow() {
     browser.driver.manage().window().maximize();
   }
 
-  navigateToServersPage() {
-    return browser.get('/servers');
+  navigateToControllersPage() {
+    return browser.get('/controllers');
   }
 
-  getAddServerNotificationText() {
+  getAddControllerNotificationText() {
     return browser.driver.findElement(by.className('mat-card-content')).getText();
   }
 
-  async clickAddServer() {
-    let serversTable = await this.checkServersTable();
-    if (serversTable.length === 0) {
+  async clickAddController() {
+    let controllerTable = await this.checkControllersTable();
+    if (controllerTable.length === 0) {
       let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
       await buttons[3].click();
     }
   }
 
-  checkServersTable() {
+  checkControllersTable() {
     return browser.driver.findElements(by.css('mat-cell'));
   }
 
-  async navigateToServerProjects() {
+  async navigateToControllerProjects() {
     this.helper.sleep(2000);
     let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
-    let serverLink;
+    let controllerLink;
     await this.helper.asyncForEach(hyperlinks, async (element) => {
       let text = await element.getText();
-      if (text === '127.0.0.1') serverLink = element;
+      if (text === '127.0.0.1') controllerLink = element;
     });
-    await serverLink.click();
+    await controllerLink.click();
   }
 }

e2e/project-map.e2e-spec.ts

@@ -1,24 +1,24 @@
 import { TestHelper } from './helpers/common.po';
 import { ProjectMapPage } from './helpers/project-map.po';
 import { ProjectsPage } from './helpers/project.po';
-import { ServersPage } from './helpers/server.po';
+import { ControllersPage } from './helpers/controller.po';
 
 describe('Project map page', () => {
-  let serversPage: ServersPage;
+  let controllersPage: ControllersPage;
   let projectsPage: ProjectsPage;
   let projectMapPage: ProjectMapPage;
   let helper: TestHelper;
 
   beforeEach(async () => {
-    serversPage = new ServersPage();
+    controllersPage = new ControllersPage();
     projectsPage = new ProjectsPage();
     projectMapPage = new ProjectMapPage();
     helper = new TestHelper();
 
-    serversPage.maximizeWindow();
-    await serversPage.navigateToServersPage();
-    await serversPage.clickAddServer();
-    await serversPage.navigateToServerProjects();
+    controllersPage.maximizeWindow();
+    await controllersPage.navigateToControllersPage();
+    await controllersPage.clickAddController();
+    await controllersPage.navigateToControllerProjects();
     await projectsPage.openAddProjectDialog();
     helper.sleep(2000);
     await projectsPage.createProject();

e2e/projects.e2e-spec.ts

@@ -1,24 +1,24 @@
 import { TestHelper } from './helpers/common.po';
 import { ProjectsPage } from './helpers/project.po';
-import { ServersPage } from './helpers/server.po';
+import { ControllersPage } from './helpers/controller.po';
 
 describe('Projects page', () => {
-  let serversPage: ServersPage;
+  let controllersPage: ControllersPage;
   let projectsPage: ProjectsPage;
   let helper: TestHelper;
 
   beforeEach(() => {
-    serversPage = new ServersPage();
+    controllersPage = new ControllersPage();
     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();
+    controllersPage.maximizeWindow();
+    await controllersPage.navigateToControllersPage();
+    await controllersPage.clickAddController();
+    await controllersPage.navigateToControllerProjects();
     helper.sleep(2000);
 
     //act
@@ -28,6 +28,6 @@ describe('Projects page', () => {
     helper.sleep(2000);
 
     //assert
-    expect(helper.getCurrentUrl()).toMatch('server/1/project/');
+    expect(helper.getCurrentUrl()).toMatch('controller/1/project/');
   });
 });

e2e/servers.e2e-spec.ts

@@ -1,43 +0,0 @@
-import { TestHelper } from './helpers/common.po';
-import { ServersPage } from './helpers/server.po';
-
-describe('Servers page', () => {
-  let page: ServersPage;
-  let helper: 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());
-    });
-
-    // assert
-    expect(serverData).toContain('127.0.0.1');
-    expect(serverData).toContain('3080');
-  });
-});

electron-builder.yml

@@ -15,7 +15,7 @@ files:
   - renderer.js
   - sentry.js
   - installed-software.js
-  - local-server.js
+  - local-controller.js
   - console-executor.js
   - package.json
 

karma.conf.js

@@ -19,13 +19,13 @@ module.exports = function (config) {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    
+
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: true
   });
 };

local-controller.js

@@ -8,9 +8,9 @@ const { app } = require('electron')
 
 const isWin = /^win/.test(process.platform);
 
-let runningServers = {};
+let runningControllers = {};
 
-exports.getLocalServerPath = async () => {
+exports.getLocalControllerPath = async () => {
   let binary = isWin ? 'gns3server.exe': 'gns3server';
   return findBinary('exe.', binary);
 }
@@ -20,27 +20,27 @@ exports.getUbridgePath = async () => {
   return findBinary('ubridge', binary);
 }
 
-exports.startLocalServer = async (server) => {
-  return await run(server, {
+exports.startLocalController = async (controller) => {
+  return await run(controller, {
     logStdout: true
   });
 }
 
-exports.stopLocalServer = async (server) => {
-  return await stop(server.name);
+exports.stopLocalController = async (controller) => {
+  return await stop(controller.name);
 }
 
-exports.getRunningServers = () => {
-  return Object.keys(runningServers);
+exports.getRunningControllers = () => {
+  return Object.keys(runningControllers);
 }
 
-exports.stopAllLocalServers = async () => {
+exports.stopAllLocalControllers = async () => {
   return await stopAll();
 }
 
 async function findBinary(binaryDirectory, filename) {
   const lookupDirectories = [
-    __dirname, 
+    __dirname,
     path.dirname(app.getPath('exe'))
   ];
 
@@ -60,7 +60,7 @@ async function findBinaryInDirectory(baseDirectory, binaryDirectory, filename) {
   }
 
   const files = fs.readdirSync(distDirectory);
-  
+
   let binaryPath = null;
 
   files.forEach((directory) => {
@@ -77,33 +77,33 @@ async function findBinaryInDirectory(baseDirectory, binaryDirectory, filename) {
 }
 
 
-function getServerArguments(server, overrides, configPath) {
-  let serverArguments = [];
-  if(server.host) {
-    serverArguments.push('--host');
-    serverArguments.push(server.host);
+function getControllerArguments(controller, overrides, configPath) {
+  let controllerArguments = [];
+  if(controller.host) {
+    controllerArguments.push('--host');
+    controllerArguments.push(controller.host);
   }
-  if(server.port) {
-    serverArguments.push('--port');
-    serverArguments.push(server.port);
+  if(controller.port) {
+    controllerArguments.push('--port');
+    controllerArguments.push(controller.port);
   }
 
-  serverArguments.push('--local');
+  controllerArguments.push('--local');
 
   if(configPath) {
-    serverArguments.push('--config');
-    serverArguments.push(configPath);
+    controllerArguments.push('--config');
+    controllerArguments.push(configPath);
   }
 
-  return serverArguments;
+  return controllerArguments;
 }
 
-function getChannelForServer(server) {
-  return `local-server-run-${server.name}`;
+function getChannelForController(controller) {
+  return `local-controller-run-${controller.name}`;
 }
 
 function notifyStatus(status) {
-  ipcMain.emit('local-server-status-events', status);
+  ipcMain.emit('local-controller-status-events', status);
 }
 
 function filterOutput(line) {
@@ -120,44 +120,44 @@ function filterOutput(line) {
 }
 
 async function stopAll() {
-  for(var serverName in runningServers) {
-    let result, error = await stop(serverName);
+  for(var controllerName in runningControllers) {
+    let result, error = await stop(controllerName);
   }
-  console.log(`Stopped all servers`);
+  console.log(`Stopped all controllers`);
 }
 
-async function stop(serverName) {
+async function stop(controllerName) {
   let pid = undefined;
 
-  const runningServer = runningServers[serverName];
+  const runningController = runningControllers[controllerName];
 
-  if(runningServer !== undefined && runningServer.process) {
-    pid = runningServer.process.pid;
+  if(runningController !== undefined && runningController.process) {
+    pid = runningController.process.pid;
   }
 
-  console.log(`Stopping '${serverName}' with PID='${pid}'`);
-  
+  console.log(`Stopping '${controllerName}' with PID='${pid}'`);
+
   const stopped = new Promise((resolve, reject) => {
     if(pid === undefined) {
-      resolve(`Server '${serverName} is already stopped`);
-      delete runningServers[serverName];
+      resolve(`Controller '${controllerName} is already stopped`);
+      delete runningControllers[controllerName];
       return;
     }
 
     kill(pid, (error) => {
       if(error) {
-        console.error(`Error occured during stopping '${serverName}' with PID='${pid}'`);
+        console.error(`Error occured during stopping '${controllerName}' with PID='${pid}'`);
         reject(error);
       }
       else {
-        delete runningServers[serverName];
-        console.log(`Stopped '${serverName}' with PID='${pid}'`);
-        resolve(`Stopped '${serverName}' with PID='${pid}'`);
+        delete runningControllers[controllerName];
+        console.log(`Stopped '${controllerName}' with PID='${pid}'`);
+        resolve(`Stopped '${controllerName}' with PID='${pid}'`);
 
         notifyStatus({
-          serverName: serverName,
+          controllerName: controllerName,
           status: 'stopped',
-          message: `Server '${serverName}' stopped'`
+          message: `Controller '${controllerName}' stopped'`
         });
       }
     });
@@ -166,11 +166,11 @@ async function stop(serverName) {
   return stopped;
 }
 
-async function getIniFile(server) {
-  return path.join(app.getPath('userData'), `gns3_server_${server.id}.ini`);
+async function getIniFile(controller) {
+  return path.join(app.getPath('userData'), `gns3_controller_${controller.id}.ini`);
 }
 
-async function configure(configPath, server) {
+async function configure(configPath, controller) {
   if(!fs.existsSync(configPath)) {
     fs.closeSync(fs.openSync(configPath, 'w'));
     console.log(`Configuration file '${configPath}' has been created.`);
@@ -178,20 +178,20 @@ async function configure(configPath, server) {
 
   var config = ini.parse(fs.readFileSync(configPath, 'utf-8'));
 
-  if(server.path) {
-    config.path = server.path;
+  if(controller.path) {
+    config.path = controller.path;
   }
-  if(server.host) {
-    config.host = server.host;
+  if(controller.host) {
+    config.host = controller.host;
   }
-  if(server.port) {
-    config.port = server.port;
+  if(controller.port) {
+    config.port = controller.port;
   }
-  if(server.ubridge_path) {
-    config.ubridge_path = server.ubridge_path;
+  if(controller.ubridge_path) {
+    config.ubridge_path = controller.ubridge_path;
   }
 
-  fs.writeFileSync(configPath, ini.stringify(config, { section: 'Server' }));
+  fs.writeFileSync(configPath, ini.stringify(config, { section: 'Controller' }));
 }
 
 async function setPATHEnv() {
@@ -216,7 +216,7 @@ async function setPATHEnv() {
   process.env.PATH = extra.join(";");
 }
 
-async function run(server, options) {
+async function run(controller, options) {
   if(!options) {
     options = {};
   }
@@ -226,34 +226,34 @@ async function run(server, options) {
 
   console.log(`Configuring`);
 
-  const configPath = await getIniFile(server);
-  await configure(configPath, server);
+  const configPath = await getIniFile(controller);
+  await configure(configPath, controller);
 
   console.log(`Setting up PATH`);
   await setPATHEnv();
 
-  console.log(`Running '${server.path}'`);
+  console.log(`Running '${controller.path}'`);
 
-  let serverProcess = spawn(server.path, getServerArguments(server, {}, configPath));
+  let controllerProcess = spawn(controller.path, getControllerArguments(controller, {}, configPath));
 
   notifyStatus({
-    serverName: server.name,
+    controllerName: controller.name,
     status: 'started',
-    message: `Server '${server.name}' started'`
+    message: `Controller '${controller.name}' started'`
   });
-  
-  runningServers[server.name] = {
-    process: serverProcess
+
+  runningControllers[controller.name] = {
+    process: controllerProcess
   };
 
-  serverProcess.stdout.on('data', function(data) {
+  controllerProcess.stdout.on('data', function(data) {
     const line = data.toString();
     const { isCritical, errorMessage } = filterOutput(line);
     if(isCritical) {
       notifyStatus({
-        serverName: server.name,
+        controllerName: controller.name,
         status: 'stderr',
-        message: `Server reported error: '${errorMessage}`
+        message: `Controller reported error: '${errorMessage}`
       });
     }
 
@@ -262,25 +262,25 @@ async function run(server, options) {
     }
   });
 
-  serverProcess.stderr.on('data', function(data) {
+  controllerProcess.stderr.on('data', function(data) {
     if(logSterr) {
       console.log(data.toString());
     }
   });
 
-  serverProcess.on('exit', (code, signal) => {
+  controllerProcess.on('exit', (code, signal) => {
     notifyStatus({
-      serverName: server.name,
+      controllerName: controller.name,
       status: 'errored',
-      message: `Server '${server.name}' has exited with status='${code}'`
+      message: `controller '${controller.name}' has exited with status='${code}'`
     });
   });
 
-  serverProcess.on('error', (err) => {
+  controllerProcess.on('error', (err) => {
     notifyStatus({
-      serverName: server.name,
+      controllerName: controller.name,
       status: 'errored',
-      message: `Server errored: '${err}`
+      message: `Controller errored: '${err}`
     });
   });
 
@@ -297,9 +297,9 @@ async function main() {
 }
 
 if(ipcMain) {
-  ipcMain.on('local-server-run', async function (event, server) {
-    const responseChannel = getChannelForServer();
-    await run(server);
+  ipcMain.on('local-controller-run', async function (event, controller) {
+    const responseChannel = getChannelForController();
+    await run(controller);
     event.sender.send(responseChannel, {
       success: true
     });
@@ -318,4 +318,4 @@ if (require.main === module) {
   });
 
   main();
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.54",
+  "version": "3.0.0a5",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -36,98 +36,100 @@
     "generate-licenses-file": "yarn license-checker --production --csv --out licenses.csv",
     "prebuildforelectron": "node set-variables-in-env.js --set src/environments/environment.electron.prod.ts",
     "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts",
-    "postinstall": "ngcc --properties es5 browser module main --first-only --create-ivy-entry-points && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
-    "snyk-protect": "snyk protect",
+    "postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\" && ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"",
+    "snyk-protect": "snyk-protect",
     "prepare": "yarn run snyk-protect"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.2.12",
-    "@angular/cdk": "^12.2.12",
-    "@angular/common": "^12.2.12",
-    "@angular/compiler": "^12.2.12",
-    "@angular/core": "^12.2.12",
-    "@angular/forms": "^12.2.12",
-    "@angular/material": "^12.2.12",
-    "@angular/platform-browser": "^12.2.12",
-    "@angular/platform-browser-dynamic": "^12.2.12",
-    "@angular/router": "^12.2.12",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@sentry/browser": "^6.14.1",
+    "@snyk/protect": "^1.972.0",
     "@types/jest": "^27.0.2",
-    "@types/mocha": "^9.0.0",
+    "@types/mocha": "^9.1.1",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
-    "angular-draggable-droppable": "^5.0.0",
+    "angular-draggable-droppable": "^6.1.0",
     "angular-resizable-element": "^3.4.0",
+    "autoprefixer": "10.4.5",
     "bootstrap": "^5.1.3",
     "command-exists": "^1.2.9",
-    "core-js": "^3.19.1",
-    "css-tree": "^1.1.3",
+    "core-js": "^3.22.3",
+    "css-tree": "^2.1.0",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
-    "ini": "^2.0.0",
-    "ipaddr.js": "^2.1.0",
+    "ini": "^3.0.0",
+    "marked": "^4.0.14",
     "material-design-icons": "^3.0.1",
     "mousetrap": "^1.6.5",
     "ng-circle-progress": "^1.6.0",
-    "ng2-file-upload": "^1.4.0",
+    "ng2-file-upload": "^3.0.0",
     "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^2.1.1",
+    "ngx-device-detector": "4.0.1",
     "ngx-electron": "^2.2.0",
     "node-fetch": "^3.2.10",
-    "notosans-fontface": "1.2.2",
+    "notosans-fontface": "^1.3.0",
+    "postcss-loader": "^6.2.1",
     "prettier-plugin-organize-imports": "^2.3.4",
     "rxjs": "^6.6.7",
     "rxjs-compat": "^6.6.7",
     "save-svg-as-png": "^1.4.17",
-    "snyk": "^1.1064.0",
     "spark-md5": "^3.0.2",
     "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "typeface-roboto": "^1.1.13",
-    "xterm": "^4.15.0",
+    "xterm": "^4.18.0",
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
-    "yargs": "^17.2.1",
-    "zone.js": "~0.11.4"
+    "yargs": "^17.4.1",
+    "zone.js": "^0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.12",
-    "@angular/cli": "^12.2.12",
-    "@angular/compiler-cli": "^12.2.12",
-    "@angular/language-service": "^12.2.12",
-    "@sentry/cli": "^1.71.0",
-    "@sentry/electron": "^2.5.4",
-    "@types/jasmine": "^3.10.2",
+    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular/cli": "^14.2.12",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
+    "@sentry/cli": "^2.0.4",
+    "@sentry/electron": "^3.0.7",
+    "@types/jasmine": "^4.0.3",
     "@types/jasminewd2": "^2.0.10",
-    "@types/node": "16.11.6",
-    "codelyzer": "^6.0.2",
-    "electron": "^13.6.6",
-    "electron-builder": "^22.9.1",
+    "@types/node": "^17.0.31",
+    "codelyzer": "^0.0.28",
+    "electron": "13.6.6",
+    "electron-builder": "^23.0.3",
     "file-loader": "^6.2.0",
-    "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~7.0.0",
+    "jasmine-core": "^4.1.0",
+    "jasmine-spec-reporter": "^7.0.0",
     "jquery": "^3.6.0",
-    "karma": "^6.3.16",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma": "^6.3.19",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.0.0",
     "karma-jasmine-html-reporter": "^1.7.0",
     "license-checker": "^25.0.1",
     "popper.js": "^1.16.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.6.2",
     "protractor": "^7.0.0",
     "replace": "^1.2.1",
     "rxjs-tslint": "^0.1.8",
     "ts-mockito": "^2.6.1",
-    "ts-node": "~10.4.0",
+    "ts-node": "^10.7.0",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.2.3",
-    "webpack": "5.76.0",
-    "yarn-upgrade-all": "^0.5.4"
+    "typescript": "4.6.4",
+    "webpack": "^5.72.0",
+    "yarn-upgrade-all": "^0.7.1"
   },
   "greenkeeper": {
     "ignore": [

scripts/requirements.txt

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

src/ReleaseNotes.txt

@@ -1,10 +1,9 @@
 GNS3 WebUI is web implementation of user interface for GNS3 software.
 
-Current version: 2.2.32
+Current version: 2.2.24
 
 Bug Fixes & enhancements
-- Fixed generated capture file is not valid
-- Fixed Docker additional directories
+- security fixes
 
 Current version: 2020.4.0-beta.1
 
@@ -68,7 +67,7 @@ GNS3 Web UI 2020.2.0-beta.4
 Bug Fixes
 - New port setting for GNS3 VM preferences
 - Option to auto-hide menu toolbar on the left side
-- Server type in template preferences
+-Controller  type in template preferences
 - Error when selecting existing Docker image
 - Default values in templates
 - TypeError: Cannot read property 'message' of undefined

src/app/app-routing.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
+import { BundledControllerFinderComponent } from './components/bundled-controller-finder/bundled-controller-finder.component';
 import { DirectLinkComponent } from './components/direct-link/direct-link.component';
 import { HelpComponent } from './components/help/help.component';
 import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { LoginComponent } from './components/login/login.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
 import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component';
@@ -23,7 +24,6 @@ import { AddIosTemplateComponent } from './components/preferences/dynamips/add-i
 import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
 import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
 import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
-import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
 import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
@@ -44,157 +44,261 @@ import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs
 import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component';
 import { ProjectMapComponent } from './components/project-map/project-map.component';
 import { ProjectsComponent } from './components/projects/projects.component';
-import { ServersComponent } from './components/servers/servers.component';
+import { ControllersComponent } from './components/controllers/controllers.component';
 import { ConsoleComponent } from './components/settings/console/console.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
 import { SystemStatusComponent } from './components/system-status/system-status.component';
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
 import { ConsoleGuard } from './guards/console-guard';
+import { LoginGuard } from './guards/login-guard';
 import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
-import { ServerResolve } from './resolvers/server-resolve';
+import { ControllerResolve } from './resolvers/controller-resolve';
+import { UserManagementComponent } from './components/user-management/user-management.component';
+import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
+import { ImageManagerComponent } from './components/image-manager/image-manager.component';
+import { UserDetailComponent } from "./components/user-management/user-detail/user-detail.component";
+import { UserDetailResolver } from "./resolvers/user-detail.resolver";
+import { ManagementComponent } from "./components/management/management.component";
+import { UserGroupsResolver } from "./resolvers/user-groups.resolver";
+import { GroupManagementComponent } from "./components/group-management/group-management.component";
+import { RoleManagementComponent } from "./components/role-management/role-management.component";
+import { GroupDetailsComponent } from "./components/group-details/group-details.component";
+import { GroupMembersResolver } from "./resolvers/group-members.resolver";
+import { GroupResolver } from "./resolvers/group.resolver";
+import { GroupRoleResolver } from "./resolvers/group-role.resolver";
+import { RoleDetailComponent } from "./components/role-management/role-detail/role-detail.component";
+import { RoleDetailResolver } from "./resolvers/role-detail.resolver";
+import { AclManagementComponent } from "@components/acl-management/acl-management.component";
+import { ResourcePoolsManagementComponent } from "@components/resource-pools-management/resource-pools-management.component";
+import { ResourcePoolDetailsComponent } from "@components/resource-pool-details/resource-pool-details.component";
+import { ResourcePoolsResolver } from "@resolvers/resource-pools.resolver";
+import { GroupAcesResolver } from "@resolvers/group-ace.resolver.ts.resolver";
+import { UserAcesResolver } from "@resolvers/user-aces.resolver";
 
 const routes: Routes = [
   {
     path: '',
     component: DefaultLayoutComponent,
     children: [
-      { path: '', redirectTo: 'servers', pathMatch: 'full' },
-      { path: 'servers', component: ServersComponent },
-      { path: 'bundled', component: BundledServerFinderComponent },
+      { path: '', redirectTo: 'controllers', pathMatch: 'full' },
+      { path: 'controllers', component: ControllersComponent },
+      { path: 'bundled', component: BundledControllerFinderComponent },
+      { path: 'controller/:controller_id/login', component: LoginComponent },
+      { path: 'controller/:controller_id/loggeduser', component: LoggedUserComponent },
+      {path : 'controller/:controller_id/image-manager', component: ImageManagerComponent},
       {
-        path: 'server/:server_id/projects',
+        path: 'controller/:controller_id/projects',
         component: ProjectsComponent,
-        resolve: { server: ServerResolve },
+        canActivate: [LoginGuard],
+        resolve: { controller: ControllerResolve },
+      },
+      { path: 'controller/:controller_id/help', component: HelpComponent },
+      { path: 'controller/:controller_id/settings', component: SettingsComponent },
+      { path: 'controller/:controller_id/settings/console', component: ConsoleComponent },
+      {
+        path: 'controller/:controller_id/management/users/:user_id',
+        component: UserDetailComponent,
+        canActivate: [LoginGuard],
+        resolve: {
+          user: UserDetailResolver,
+          groups: UserGroupsResolver,
+          aces: UserAcesResolver,
+          controller: ControllerResolve},
+      },
+      {
+        path: 'controller/:controller_id/management/resourcePools/:pool_id',
+        component: ResourcePoolDetailsComponent,
+        canActivate: [LoginGuard],
+        resolve: {
+          pool: ResourcePoolsResolver,
+          controller: ControllerResolve
+        }
       },
-      { path: 'help', component: HelpComponent },
-      { path: 'settings', component: SettingsComponent },
-      { path: 'settings/console', component: ConsoleComponent },
       { path: 'installed-software', component: InstalledSoftwareComponent },
-      { path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
+      { path: 'controller/:controller_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] },
 
-      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent },
+      { path: 'controller/:controller_ip/:controller_port/project/:project_id', component: DirectLinkComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/project/:project_id/snapshots',
+        path: 'controller/:controller_id/project/:project_id/snapshots',
         component: ListOfSnapshotsComponent,
-        resolve: { server: ServerResolve },
+        canActivate: [LoginGuard],
+        resolve: { controller: ControllerResolve },
       },
-      { 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: 'controller/:controller_id/preferences', component: PreferencesComponent, canActivate: [LoginGuard] },
+      // { path: 'controller/:controller_id/preferences/general', component: GeneralPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/builtin', component: BuiltInPreferencesComponent, canActivate: [LoginGuard] },
 
-      { path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent },
+      { path: 'controller/:controller_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate',
+        path: 'controller/:controller_id/preferences/builtin/ethernet-hubs/addtemplate',
         component: EthernetHubsAddTemplateComponent,
+        canActivate: [LoginGuard]
       },
       {
-        path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id',
+        path: 'controller/:controller_id/preferences/builtin/ethernet-hubs/:template_id',
         component: EthernetHubsTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
 
       {
-        path: 'server/:server_id/preferences/builtin/ethernet-switches',
+        path: 'controller/:controller_id/preferences/builtin/ethernet-switches',
         component: EthernetSwitchesTemplatesComponent,
+        canActivate: [LoginGuard]
       },
       {
-        path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate',
+        path: 'controller/:controller_id/preferences/builtin/ethernet-switches/addtemplate',
         component: EthernetSwitchesAddTemplateComponent,
+        canActivate: [LoginGuard]
       },
       {
-        path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id',
+        path: 'controller/:controller_id/preferences/builtin/ethernet-switches/:template_id',
         component: EthernetSwitchesTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
 
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent },
+      { path: 'controller/:controller_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate',
+        path: 'controller/:controller_id/preferences/builtin/cloud-nodes/addtemplate',
         component: CloudNodesAddTemplateComponent,
+        canActivate: [LoginGuard]
       },
       {
-        path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id',
+        path: 'controller/:controller_id/preferences/builtin/cloud-nodes/:template_id',
         component: CloudNodesTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
 
-      //{ 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: 'controller/:controller_id/preferences/dynamips', component: DynamipsPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/dynamips/templates', component: IosTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy',
+        path: 'controller/:controller_id/preferences/dynamips/templates/:template_id/copy',
         component: CopyIosTemplateComponent,
+        canActivate: [LoginGuard]
       },
 
-      // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
-      { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
+      // { path: 'controller/:controller_id/preferences/qemu', component: QemuPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/qemu/templates', component: QemuVmTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/qemu/templates/:template_id/copy',
+        path: 'controller/:controller_id/preferences/qemu/templates/:template_id/copy',
         component: CopyQemuVmTemplateComponent,
+        canActivate: [LoginGuard]
       },
-      { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
+      { path: 'controller/:controller_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent, canActivate: [LoginGuard] },
 
-      // { 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/addtemplate', component: AddVpcsTemplateComponent },
+      // { path: 'controller/:controller_id/preferences/vpcs', component: VpcsPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/vpcs/templates', component: VpcsTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent, canActivate: [LoginGuard] },
 
-      // { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
-      { path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent },
+      // { path: 'controller/:controller_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/virtualbox/templates/:template_id',
+        path: 'controller/:controller_id/preferences/virtualbox/templates/:template_id',
         component: VirtualBoxTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
-      { path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent },
+      { path: 'controller/:controller_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent, canActivate: [LoginGuard] },
 
-      // { path: 'server/:server_id/preferences/vmware', component: VmwarePreferencesComponent },
-      { path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent },
+      // { path: 'controller/:controller_id/preferences/vmware', component: VmwarePreferencesComponent },
+      { path: 'controller/:controller_id/preferences/vmware/templates', component: VmwareTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/vmware/templates/:template_id',
+        path: 'controller/:controller_id/preferences/vmware/templates/:template_id',
         component: VmwareTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
-      { path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent },
+      { path: 'controller/:controller_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent, canActivate: [LoginGuard] },
 
-      // { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
-      // { path: 'server/:server_id/preferences/traceng/templates', component: TracengTemplatesComponent },
-      // { path: 'server/:server_id/preferences/traceng/templates/:template_id', component: TracengTemplateDetailsComponent },
-      // { path: 'server/:server_id/preferences/traceng/addtemplate', component: AddTracengTemplateComponent },
-
-      { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
+      { path: 'controller/:controller_id/preferences/docker/templates', component: DockerTemplatesComponent, canActivate: [LoginGuard] },
       {
-        path: 'server/:server_id/preferences/docker/templates/:template_id',
+        path: 'controller/:controller_id/preferences/docker/templates/:template_id',
         component: DockerTemplateDetailsComponent,
+        canActivate: [LoginGuard]
       },
       {
-        path: 'server/:server_id/preferences/docker/templates/:template_id/copy',
+        path: 'controller/:controller_id/preferences/docker/templates/:template_id/copy',
         component: CopyDockerTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/iou/templates', component: IouTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/iou/templates/:template_id/copy',
+        component: CopyIouTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/management',
+        component: ManagementComponent,
+        children: [
+          {
+            path: 'users',
+            component: UserManagementComponent
+          },
+          {
+            path: 'groups',
+            component: GroupManagementComponent
+          },
+          {
+            path: 'roles',
+            component: RoleManagementComponent
+          },
+          {
+            path: "pools",
+            component: ResourcePoolsManagementComponent
+          },
+          {
+            path: 'ACL',
+            component: AclManagementComponent
+          }
+        ]
+      },
+      {
+        path: 'controller/:controller_id/management/groups/:user_group_id',
+        component: GroupDetailsComponent,
+        resolve: {
+          members: GroupMembersResolver,
+          controller: ControllerResolve,
+          group: GroupResolver,
+          aces: GroupAcesResolver
+        }
+      },
+      {
+        path: 'controller/:controller_id/management/roles/:role_id',
+        component: RoleDetailComponent,
+        resolve: {
+          role: RoleDetailResolver,
+          controller: ControllerResolve
+        }
       },
-      { 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/project/:project_id',
+    path: 'controller/:controller_id/project/:project_id',
     component: ProjectMapComponent,
+    canActivate: [LoginGuard],
     canDeactivate: [ConsoleGuard],
   },
   {
-    path: 'server/:server_id/project/:project_id/nodes/:node_id',
+    path: 'controller/:controller_id/project/:project_id/nodes/:node_id',
     component: WebConsoleFullWindowComponent,
+    canActivate: [LoginGuard]
   },
   {
-    path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id',
+    path: 'static/web-ui/controller/:controller_id/project/:project_id/nodes/:node_id',
     component: WebConsoleFullWindowComponent,
+    canActivate: [LoginGuard]
   },
   {
     path: '**',
     component: PageNotFoundComponent,
-  },
+  }
+
 ];
 
 @NgModule({
@@ -207,4 +311,5 @@ const routes: Routes = [
   ],
   exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/app.component.html

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

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ElectronService, NgxElectronModule } from 'ngx-electron';
@@ -16,8 +16,8 @@ describe('AppComponent', () => {
   let electronService: ElectronService;
   let settingsService: SettingsService;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       declarations: [AppComponent],
       imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
       providers: [SettingsService, ProgressService],
@@ -26,7 +26,7 @@ describe('AppComponent', () => {
 
     electronService = TestBed.inject(ElectronService);
     settingsService = TestBed.inject(SettingsService);
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
@@ -34,29 +34,29 @@ describe('AppComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create the app', async(() => {
+  it('should create the app', async() => {
     const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
+    await expect(app).toBeTruthy();
+  });
 
-  it('should have footer', async(() => {
+  it('should have footer', async() => {
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('router-outlet').textContent).toEqual('');
-  }));
+    await expect(compiled.querySelector('router-outlet').textContent).toEqual('');
+  });
 
-  it('should receive changed settings and forward to electron', async(() => {
-    spyOnProperty(electronService, 'isElectronApp').and.returnValue(true);
+  it('should receive changed settings and forward to electron', async() => {
+    await spyOnProperty(electronService, 'isElectronApp').and.returnValue(true);
     settingsService.setReportsSettings(true);
     component.ngOnInit();
     settingsService.setReportsSettings(false);
-  }));
+  });
 
-  it('should receive changed settings and do not forward to electron', async(() => {
+  it('should receive changed settings and do not forward to electron', async() => {
     const spy = createSpyObj('Electron.IpcRenderer', ['send']);
     spyOnProperty(electronService, 'isElectronApp').and.returnValue(false);
     settingsService.setReportsSettings(true);
     component.ngOnInit();
     settingsService.setReportsSettings(false);
-    expect(spy.send).not.toHaveBeenCalled();
-  }));
+    await expect(spy.send).not.toHaveBeenCalled();
+  });
 });

src/app/app.module.ts

@@ -1,7 +1,8 @@
+/* tslint:disable */
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -29,7 +30,7 @@ import { ProgressDialogService } from './common/progress-dialog/progress-dialog.
 import { ProgressComponent } from './common/progress/progress.component';
 import { ProgressService } from './common/progress/progress.service';
 import { AdbutlerComponent } from './components/adbutler/adbutler.component';
-import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
+import { BundledControllerFinderComponent } from './components/bundled-controller-finder/bundled-controller-finder.component';
 import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
 import { DirectLinkComponent } from './components/direct-link/direct-link.component';
 import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component';
@@ -74,7 +75,6 @@ import { DynamipsPreferencesComponent } from './components/preferences/dynamips/
 import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
 import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
 import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component';
-import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
 import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
@@ -85,10 +85,6 @@ import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-
 import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
 import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
 import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
-import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
-import { TracengPreferencesComponent } from './components/preferences/traceng/traceng-preferences/traceng-preferences.component';
-import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
-import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
 import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
 import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component';
 import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
@@ -117,6 +113,7 @@ import { DeleteActionComponent } from './components/project-map/context-menu/act
 import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
 import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component';
 import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component';
+import { EditLinkStyleActionComponent } from './components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component';
 import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component';
 import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
 import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component';
@@ -134,13 +131,16 @@ import { StartCaptureOnStartedLinkActionComponent } from './components/project-m
 import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component';
 import { StartNodeActionComponent } from './components/project-map/context-menu/actions/start-node-action/start-node-action.component';
 import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
-import { StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component';
+import { IsolateNodeActionComponent } from './components/project-map/context-menu/actions/isolate-node-action/isolate-node-action.component';
+import { UnisolateNodeActionComponent } from './components/project-map/context-menu/actions/unisolate-node-action/unisolate-node-action.component';
+import {StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component';
 import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
 import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component';
 import { ContextMenuComponent } from './components/project-map/context-menu/context-menu.component';
 import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
 import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
 import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component';
+import { LinkStyleEditorDialogComponent } from './components/project-map/drawings-editors/link-style-editor/link-style-editor.component';
 import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component';
 import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component';
 import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
@@ -165,7 +165,6 @@ import { ConfiguratorDialogNatComponent } from './components/project-map/node-ed
 import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
 import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component';
 import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component';
-import { ConfiguratorDialogTracengComponent } from './components/project-map/node-editors/configurator/traceng/configurator-traceng.component';
 import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
 import { ConfiguratorDialogVmwareComponent } from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component';
 import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component';
@@ -175,6 +174,7 @@ import { PacketFiltersDialogComponent } from './components/project-map/packet-ca
 import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { ProjectMapComponent } from './components/project-map/project-map.component';
+import { ProjectReadmeComponent } from './components/project-map/project-readme/project-readme.component';
 import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component';
 import { WebConsoleComponent } from './components/project-map/web-console/web-console.component';
 import { AddBlankProjectDialogComponent } from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component';
@@ -182,15 +182,15 @@ import { ChooseNameDialogComponent } from './components/projects/choose-name-dia
 import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
 import { ConfirmationDialogComponent } from './components/projects/confirmation-dialog/confirmation-dialog.component';
 import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
+import { ReadmeEditorComponent } from './components/projects/edit-project-dialog/readme-editor/readme-editor.component';
 import { ImportProjectDialogComponent } from './components/projects/import-project-dialog/import-project-dialog.component';
 import { ProjectNameValidator } from './components/projects/models/projectNameValidator';
 import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
 import { ProjectsComponent } from './components/projects/projects.component';
 import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
-import { AddServerDialogComponent } from './components/servers/add-server-dialog/add-server-dialog.component';
-import { ConfigureGns3VMDialogComponent } from './components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
-import { ServerDiscoveryComponent } from './components/servers/server-discovery/server-discovery.component';
-import { ServersComponent } from './components/servers/servers.component';
+import { AddControllerDialogComponent } from './components/controllers/add-controller-dialog/add-controller-dialog.component';
+import { ControllerDiscoveryComponent } from './components/controllers/controller-discovery/controller-discovery.component';
+import { ControllersComponent } from './components/controllers/controllers.component';
 import { ConsoleComponent } from './components/settings/console/console.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component';
@@ -204,18 +204,19 @@ import { TemplateComponent } from './components/template/template.component';
 import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
 import { DataSourceFilter } from './filters/dataSourceFilter';
+import { AuthImageFilter } from './filters/authImageFilter';
 import { DateFilter } from './filters/dateFilter.pipe';
 import { NameFilter } from './filters/nameFilter.pipe';
 import { ProjectsFilter } from './filters/projectsFilter.pipe';
 import { SearchFilter } from './filters/searchFilter.pipe';
 import { TemplateFilter } from './filters/templateFilter.pipe';
 import { ConsoleGuard } from './guards/console-guard';
+import { LoginGuard } from './guards/login-guard';
 import { ProjectWebServiceHandler } from './handlers/project-web-service-handler';
 import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
 import { MATERIAL_IMPORTS } from './material.imports';
-import { ServerResolve } from './resolvers/server-resolve';
+import { ControllerResolve } from './resolvers/controller-resolve';
 import { ApplianceService } from './services/appliances.service';
-import { ProtocolHandlerService } from './services/protocol-handler.service';
 import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service';
 import { BuiltInTemplatesService } from './services/built-in-templates.service';
 import { ComputeService } from './services/compute.service';
@@ -223,9 +224,8 @@ import { DockerConfigurationService } from './services/docker-configuration.serv
 import { DockerService } from './services/docker.service';
 import { DrawingService } from './services/drawing.service';
 import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service';
-import { Gns3vmService } from './services/gns3vm.service';
 import { GoogleAnalyticsService } from './services/google-analytics.service';
-import { HttpServer, ServerErrorHandler } from './services/http-server.service';
+import { HttpController, ControllerErrorHandler } from './services/http-controller.service';
 import { InfoService } from './services/info.service';
 import { InstalledSoftwareService } from './services/installed-software.service';
 import { IosConfigurationService } from './services/ios-configuration.service';
@@ -244,10 +244,10 @@ import { ProjectService } from './services/project.service';
 import { QemuConfigurationService } from './services/qemu-configuration.service';
 import { QemuService } from './services/qemu.service';
 import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service';
-import { ServerManagementService } from './services/server-management.service';
-import { ServerSettingsService } from './services/server-settings.service';
-import { ServerDatabase } from './services/server.database';
-import { ServerService } from './services/server.service';
+import { ControllerManagementService } from './services/controller-management.service';
+import { ControllerSettingsService } from './services/controller-settings.service';
+import { ControllerDatabase } from './services/controller.database';
+import { ControllerService } from './services/controller.service';
 import { SettingsService } from './services/settings.service';
 import { ConsoleService } from './services/settings/console.service';
 import { DefaultConsoleService } from './services/settings/default-console.service';
@@ -258,7 +258,6 @@ import { TemplateService } from './services/template.service';
 import { ThemeService } from './services/theme.service';
 import { ToasterService } from './services/toaster.service';
 import { ToolsService } from './services/tools.service';
-import { TracengService } from './services/traceng.service';
 import { UpdatesService } from './services/updates.service';
 import { VersionService } from './services/version.service';
 import { VirtualBoxConfigurationService } from './services/virtual-box-configuration.service';
@@ -269,337 +268,403 @@ import { VpcsConfigurationService } from './services/vpcs-configuration.service'
 import { VpcsService } from './services/vpcs.service';
 import { NonNegativeValidator } from './validators/non-negative-validator';
 import { RotationValidator } from './validators/rotation-validator';
+import { MarkedDirective } from './directives/marked.directive';
+import { LoginComponent } from './components/login/login.component';
+import { LoginService } from './services/login.service';
+import { HttpRequestsInterceptor } from './interceptors/http.interceptor';
+import { UserManagementComponent } from './components/user-management/user-management.component';
+import { UserService } from './services/user.service';
+import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
+import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component';
+import { UserFilterPipe } from './filters/user-filter.pipe';
+import { GroupManagementComponent } from './components/group-management/group-management.component';
+import { GroupFilterPipe } from './filters/group-filter.pipe';
+import { AddGroupDialogComponent } from './components/group-management/add-group-dialog/add-group-dialog.component';
+import { DeleteGroupDialogComponent } from './components/group-management/delete-group-dialog/delete-group-dialog.component';
+import { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component';
+import { GroupDetailsComponent } from './components/group-details/group-details.component';
+import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component';
+import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component';
+import { RemoveToGroupDialogComponent } from '@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component';
+import { PaginatorPipe } from './components/group-details/paginator.pipe';
+import { MembersFilterPipe } from './components/group-details/members-filter.pipe';
+import { ManagementComponent } from './components/management/management.component';
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import { RoleManagementComponent } from './components/role-management/role-management.component';
+import { RoleFilterPipe } from './components/role-management/role-filter.pipe';
+import { AddRoleDialogComponent } from './components/role-management/add-role-dialog/add-role-dialog.component';
+import { DeleteRoleDialogComponent } from './components/role-management/delete-role-dialog/delete-role-dialog.component';
+import { RoleDetailComponent } from './components/role-management/role-detail/role-detail.component';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatAutocompleteModule} from "@angular/material/autocomplete";;
+import { AddRoleToGroupComponent } from './components/group-details/add-role-to-group/add-role-to-group.component';
+import {MatFormFieldModule} from "@angular/material/form-field";
+import { ChangeUserPasswordComponent } from './components/user-management/user-detail/change-user-password/change-user-password.component';
+import {MatMenuModule} from "@angular/material/menu";
+import { ImageManagerComponent } from './components/image-manager/image-manager.component';
+import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component';
+import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component';
+import { UploadingProcessbarComponent } from './common/uploading-processbar/uploading-processbar.component';
+import { ExportPortableProjectComponent } from './components/export-portable-project/export-portable-project.component';
+import { NodesMenuConfirmationDialogComponent } from './components/project-map/nodes-menu/nodes-menu-confirmation-dialog/nodes-menu-confirmation-dialog.component';
+import { ConfirmationDeleteAllProjectsComponent } from './components/projects/confirmation-delete-all-projects/confirmation-delete-all-projects.component';
+import { ProjectMapLockConfirmationDialogComponent } from './components/project-map/project-map-menu/project-map-lock-confirmation-dialog/project-map-lock-confirmation-dialog.component';
+import { AclManagementComponent } from "@components/acl-management/acl-management.component";
+import { AddAceDialogComponent } from './components/acl-management/add-ace-dialog/add-ace-dialog.component';
+import { AutocompleteComponent } from './components/acl-management/add-ace-dialog/autocomplete/autocomplete.component';
+import { DeleteAceDialogComponent } from './components/acl-management/delete-ace-dialog/delete-ace-dialog.component';
+import { AceFilterPipe } from './filters/ace-filter.pipe';
+import { CdkAccordionModule } from "@angular/cdk/accordion";
+import { CdkTreeModule } from "@angular/cdk/tree";
+
+import { PrivilegeComponent } from './components/role-management/role-detail/privilege/privilege.component';
+import { GroupPrivilegesPipe } from './components/role-management/role-detail/privilege/group-privileges.pipe';
+import { ResourcePoolsManagementComponent } from './components/resource-pools-management/resource-pools-management.component';
+import { AddResourcePoolDialogComponent } from './components/resource-pools-management/add-resource-pool-dialog/add-resource-pool-dialog.component';
+import { DeleteResourcePoolComponent } from './components/resource-pools-management/delete-resource-pool/delete-resource-pool.component';
+import { ResourcePoolsFilterPipe } from './components/resource-pools-management/resource-pools-filter.pipe';
+import { ResourcePoolDetailsComponent } from './components/resource-pool-details/resource-pool-details.component';
+import { DeleteResourceConfirmationDialogComponent } from './components/resource-pool-details/delete-resource-confirmation-dialog/delete-resource-confirmation-dialog.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    ProjectMapComponent,
-    ServersComponent,
-    AddServerDialogComponent,
-    CreateSnapshotDialogComponent,
-    SnapshotMenuItemComponent,
-    ProjectsComponent,
-    AddBlankProjectDialogComponent,
-    ImportProjectDialogComponent,
-    ConfirmationDialogComponent,
-    DefaultLayoutComponent,
-    ProgressDialogComponent,
-    ContextMenuComponent,
-    ContextConsoleMenuComponent,
-    StartNodeActionComponent,
-    StopNodeActionComponent,
-    TemplateComponent,
-    TemplateListDialogComponent,
-    MoveLayerDownActionComponent,
-    MoveLayerUpActionComponent,
-    EditStyleActionComponent,
-    EditTextActionComponent,
-    DeleteActionComponent,
-    DuplicateActionComponent,
-    PacketFiltersActionComponent,
-    StartCaptureActionComponent,
-    StopCaptureActionComponent,
-    ResumeLinkActionComponent,
-    SuspendLinkActionComponent,
-    SettingsComponent,
-    PreferencesComponent,
-    BundledServerFinderComponent,
-    ProgressComponent,
-    ServerDiscoveryComponent,
-    NodeSelectInterfaceComponent,
-    DrawLinkToolComponent,
-    InstalledSoftwareComponent,
-    DrawingAddedComponent,
-    DrawingResizedComponent,
-    TextAddedComponent,
-    TextEditedComponent,
-    NodeDraggedComponent,
-    NodeLabelDraggedComponent,
-    DrawingDraggedComponent,
-    LinkCreatedComponent,
-    InterfaceLabelDraggedComponent,
-    InstallSoftwareComponent,
-    StyleEditorDialogComponent,
-    TextEditorDialogComponent,
-    PacketFiltersDialogComponent,
-    QemuPreferencesComponent,
-    QemuVmTemplatesComponent,
-    AddQemuVmTemplateComponent,
-    QemuVmTemplateDetailsComponent,
-    GeneralPreferencesComponent,
-    VpcsPreferencesComponent,
-    VpcsTemplatesComponent,
-    AddVpcsTemplateComponent,
-    VpcsTemplateDetailsComponent,
-    VirtualBoxPreferencesComponent,
-    VirtualBoxTemplatesComponent,
-    VirtualBoxTemplateDetailsComponent,
-    AddVirtualBoxTemplateComponent,
-    BuiltInPreferencesComponent,
-    EthernetHubsTemplatesComponent,
-    EthernetHubsAddTemplateComponent,
-    EthernetHubsTemplateDetailsComponent,
-    CloudNodesTemplatesComponent,
-    CloudNodesAddTemplateComponent,
-    CloudNodesTemplateDetailsComponent,
-    EthernetSwitchesTemplatesComponent,
-    EthernetSwitchesAddTemplateComponent,
-    EthernetSwitchesTemplateDetailsComponent,
-    DynamipsPreferencesComponent,
-    IosTemplatesComponent,
-    IosTemplateDetailsComponent,
-    AddIosTemplateComponent,
-    SymbolsComponent,
-    VmwarePreferencesComponent,
-    VmwareTemplatesComponent,
-    VmwareTemplateDetailsComponent,
-    AddVmwareTemplateComponent,
-    DeleteConfirmationDialogComponent,
-    HelpDialogComponent,
-    StartCaptureDialogComponent,
-    DeleteTemplateComponent,
-    DockerTemplatesComponent,
-    AddDockerTemplateComponent,
-    DockerTemplateDetailsComponent,
-    IouTemplatesComponent,
-    AddIouTemplateComponent,
-    IouTemplateDetailsComponent,
-    CopyQemuVmTemplateComponent,
-    CopyIosTemplateComponent,
-    CopyIouTemplateComponent,
-    CopyDockerTemplateComponent,
-    EmptyTemplatesListComponent,
-    SymbolsMenuComponent,
-    SearchFilter,
-    DateFilter,
-    NameFilter,
-    DataSourceFilter,
-    TemplateFilter,
-    ProjectsFilter,
-    ListOfSnapshotsComponent,
-    CustomAdaptersComponent,
-    NodesMenuComponent,
-    AdbutlerComponent,
-    ConsoleDeviceActionComponent,
-    ShowNodeActionComponent,
-    ConsoleComponent,
-    NodesMenuComponent,
-    ProjectMapMenuComponent,
-    HelpComponent,
-    ConfigEditorDialogComponent,
-    EditConfigActionComponent,
-    LogConsoleComponent,
-    SaveProjectDialogComponent,
-    TopologySummaryComponent,
-    InfoDialogComponent,
-    BringToFrontActionComponent,
-    ExportConfigActionComponent,
-    ImportConfigActionComponent,
-    ConsoleDeviceActionBrowserComponent,
-    ChangeSymbolDialogComponent,
-    ChangeSymbolActionComponent,
-    EditProjectDialogComponent,
-    ReloadNodeActionComponent,
-    SuspendNodeActionComponent,
-    ConfigActionComponent,
-    ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent,
-    ConfiguratorDialogEthernetSwitchComponent,
-    PortsComponent,
-    ConfiguratorDialogSwitchComponent,
-    ConfiguratorDialogVirtualBoxComponent,
-    CustomAdaptersTableComponent,
-    ConfiguratorDialogQemuComponent,
-    ConfiguratorDialogCloudComponent,
-    UdpTunnelsComponent,
-    ConfiguratorDialogAtmSwitchComponent,
-    ConfiguratorDialogVmwareComponent,
-    ConfiguratorDialogIouComponent,
-    ConfiguratorDialogIosComponent,
-    ConfiguratorDialogDockerComponent,
-    ConfiguratorDialogNatComponent,
-    ConfiguratorDialogTracengComponent,
-    AddTracengTemplateComponent,
-    TracengPreferencesComponent,
-    TracengTemplatesComponent,
-    TracengTemplateDetailsComponent,
-    QemuImageCreatorComponent,
-    ChooseNameDialogComponent,
-    StartCaptureOnStartedLinkActionComponent,
-    LockActionComponent,
-    NavigationDialogComponent,
-    ScreenshotDialogComponent,
-    PageNotFoundComponent,
-    AlignHorizontallyActionComponent,
-    AlignVerticallyActionComponent,
-    ConfirmationBottomSheetComponent,
-    ConfigDialogComponent,
-    Gns3vmComponent,
-    ConfigureGns3VMDialogComponent,
-    ImportApplianceComponent,
-    DirectLinkComponent,
-    SystemStatusComponent,
-    StatusInfoComponent,
-    StatusChartComponent,
-    OpenFileExplorerActionComponent,
-    HttpConsoleActionComponent,
-    WebConsoleComponent,
-    ConsoleWrapperComponent,
-    HttpConsoleNewTabActionComponent,
-    WebConsoleFullWindowComponent,
-    NewTemplateDialogComponent,
-    ChangeHostnameActionComponent,
-    ChangeHostnameDialogComponent,
-    ApplianceInfoDialogComponent,
-    InformationDialogComponent,
-    TemplateNameDialogComponent,
-    ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    BrowserAnimationsModule,
-    CdkTableModule,
-    CartographyModule,
-    NgxElectronModule,
-    FileUploadModule,
-    MatSidenavModule,
-    ResizableModule,
-    DragAndDropModule,
-    DragDropModule,
-    NgxChildProcessModule,
-    MATERIAL_IMPORTS,
-    NgCircleProgressModule.forRoot(),
-    OverlayModule,
-  ],
-  providers: [
-    SettingsService,
-    { provide: ErrorHandler, useClass: ToasterErrorHandler },
-    D3Service,
-    VersionService,
-    ProjectService,
-    SymbolService,
-    ServerService,
-    TemplateService,
-    NodeService,
-    LinkService,
-    DrawingService,
-    HttpServer,
-    SnapshotService,
-    ProgressDialogService,
-    ToasterService,
-    ProgressService,
-    ProjectWebServiceHandler,
-    LinksDataSource,
-    NodesDataSource,
-    SymbolsDataSource,
-    LogEventsDataSource,
-    SelectionManager,
-    InRectangleHelper,
-    DrawingsDataSource,
-    ServerErrorHandler,
-    ServerDatabase,
-    ProjectNameValidator,
-    ToolsService,
-    ServerSettingsService,
-    QemuService,
-    VpcsService,
-    TemplateMocksService,
-    VirtualBoxService,
-    BuiltInTemplatesService,
-    IosService,
-    InstalledSoftwareService,
-    ExternalSoftwareDefinitionService,
-    PlatformService,
-    IosConfigurationService,
-    QemuConfigurationService,
-    VirtualBoxConfigurationService,
-    VpcsConfigurationService,
-    BuiltInTemplatesConfigurationService,
-    VmwareService,
-    VmwareConfigurationService,
-    DockerService,
-    DockerConfigurationService,
-    IouService,
-    IouConfigurationService,
-    RecentlyOpenedProjectService,
-    ServerManagementService,
-    MapScaleService,
-    ConsoleService,
-    DefaultConsoleService,
-    NodeCreatedLabelStylesFixer,
-    NonNegativeValidator,
-    RotationValidator,
-    MapSettingsService,
-    InfoService,
-    ComputeService,
-    TracengService,
-    PacketCaptureService,
-    ProtocolHandlerService,
-    NotificationService,
-    Gns3vmService,
-    ThemeService,
-    GoogleAnalyticsService,
-    NodeConsoleService,
-    ServerResolve,
-    ConsoleGuard,
-    Title,
-    ApplianceService,
-    UpdatesService,
-  ],
-  entryComponents: [
-    AddServerDialogComponent,
-    CreateSnapshotDialogComponent,
-    ProgressDialogComponent,
-    TemplateListDialogComponent,
-    AddBlankProjectDialogComponent,
-    ImportProjectDialogComponent,
-    ConfirmationDialogComponent,
-    StyleEditorDialogComponent,
-    PacketFiltersDialogComponent,
-    TextEditorDialogComponent,
-    SymbolsComponent,
-    DeleteConfirmationDialogComponent,
-    HelpDialogComponent,
-    StartCaptureDialogComponent,
-    ConfigEditorDialogComponent,
-    SaveProjectDialogComponent,
-    InfoDialogComponent,
-    ChangeSymbolDialogComponent,
-    EditProjectDialogComponent,
-    ConfigureGns3VMDialogComponent,
-    ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent,
-    ConfiguratorDialogEthernetSwitchComponent,
-    ConfiguratorDialogSwitchComponent,
-    ConfiguratorDialogVirtualBoxComponent,
-    ConfiguratorDialogQemuComponent,
-    ConfiguratorDialogCloudComponent,
-    ConfiguratorDialogAtmSwitchComponent,
-    ConfiguratorDialogVmwareComponent,
-    ConfiguratorDialogIouComponent,
-    ConfiguratorDialogIosComponent,
-    ConfiguratorDialogDockerComponent,
-    ConfiguratorDialogNatComponent,
-    ConfiguratorDialogTracengComponent,
-    QemuImageCreatorComponent,
-    ChooseNameDialogComponent,
-    NavigationDialogComponent,
-    ScreenshotDialogComponent,
-    ConfirmationBottomSheetComponent,
-    ConfigDialogComponent,
-    AdbutlerComponent,
-    NewTemplateDialogComponent,
-    ChangeHostnameDialogComponent,
-    ApplianceInfoDialogComponent,
-    ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent,
-  ],
-  bootstrap: [AppComponent],
+    declarations: [
+        AppComponent,
+        LoggedUserComponent,
+        ProjectMapComponent,
+        LoginComponent,
+        ControllersComponent,
+        AddControllerDialogComponent,
+        CreateSnapshotDialogComponent,
+        SnapshotMenuItemComponent,
+        ProjectsComponent,
+        AddBlankProjectDialogComponent,
+        ImportProjectDialogComponent,
+        ConfirmationDialogComponent,
+        DefaultLayoutComponent,
+        ProgressDialogComponent,
+        ContextMenuComponent,
+        ContextConsoleMenuComponent,
+        StartNodeActionComponent,
+        IsolateNodeActionComponent,
+        UnisolateNodeActionComponent,
+        StopNodeActionComponent,
+        TemplateComponent,
+        TemplateListDialogComponent,
+        MoveLayerDownActionComponent,
+        MoveLayerUpActionComponent,
+        EditStyleActionComponent,
+        EditLinkStyleActionComponent,
+        EditTextActionComponent,
+        DeleteActionComponent,
+        DuplicateActionComponent,
+        PacketFiltersActionComponent,
+        StartCaptureActionComponent,
+        StopCaptureActionComponent,
+        ResumeLinkActionComponent,
+        SuspendLinkActionComponent,
+        SettingsComponent,
+        PreferencesComponent,
+        BundledControllerFinderComponent,
+        ProgressComponent,
+        ControllerDiscoveryComponent,
+        NodeSelectInterfaceComponent,
+        DrawLinkToolComponent,
+        InstalledSoftwareComponent,
+        DrawingAddedComponent,
+        DrawingResizedComponent,
+        TextAddedComponent,
+        TextEditedComponent,
+        NodeDraggedComponent,
+        NodeLabelDraggedComponent,
+        DrawingDraggedComponent,
+        LinkCreatedComponent,
+        InterfaceLabelDraggedComponent,
+        InstallSoftwareComponent,
+        StyleEditorDialogComponent,
+        LinkStyleEditorDialogComponent,
+        TextEditorDialogComponent,
+        PacketFiltersDialogComponent,
+        QemuPreferencesComponent,
+        QemuVmTemplatesComponent,
+        AddQemuVmTemplateComponent,
+        QemuVmTemplateDetailsComponent,
+        GeneralPreferencesComponent,
+        VpcsPreferencesComponent,
+        VpcsTemplatesComponent,
+        AddVpcsTemplateComponent,
+        VpcsTemplateDetailsComponent,
+        VirtualBoxPreferencesComponent,
+        VirtualBoxTemplatesComponent,
+        VirtualBoxTemplateDetailsComponent,
+        AddVirtualBoxTemplateComponent,
+        BuiltInPreferencesComponent,
+        EthernetHubsTemplatesComponent,
+        EthernetHubsAddTemplateComponent,
+        EthernetHubsTemplateDetailsComponent,
+        CloudNodesTemplatesComponent,
+        CloudNodesAddTemplateComponent,
+        CloudNodesTemplateDetailsComponent,
+        EthernetSwitchesTemplatesComponent,
+        EthernetSwitchesAddTemplateComponent,
+        EthernetSwitchesTemplateDetailsComponent,
+        DynamipsPreferencesComponent,
+        IosTemplatesComponent,
+        IosTemplateDetailsComponent,
+        AddIosTemplateComponent,
+        SymbolsComponent,
+        VmwarePreferencesComponent,
+        VmwareTemplatesComponent,
+        VmwareTemplateDetailsComponent,
+        AddVmwareTemplateComponent,
+        DeleteConfirmationDialogComponent,
+        HelpDialogComponent,
+        StartCaptureDialogComponent,
+        DeleteTemplateComponent,
+        DockerTemplatesComponent,
+        AddDockerTemplateComponent,
+        DockerTemplateDetailsComponent,
+        IouTemplatesComponent,
+        AddIouTemplateComponent,
+        IouTemplateDetailsComponent,
+        CopyQemuVmTemplateComponent,
+        CopyIosTemplateComponent,
+        CopyIouTemplateComponent,
+        CopyDockerTemplateComponent,
+        EmptyTemplatesListComponent,
+        SymbolsMenuComponent,
+        SearchFilter,
+        DateFilter,
+        NameFilter,
+        DataSourceFilter,
+        TemplateFilter,
+        ProjectsFilter,
+        AuthImageFilter,
+        ListOfSnapshotsComponent,
+        CustomAdaptersComponent,
+        NodesMenuComponent,
+        AdbutlerComponent,
+        ConsoleDeviceActionComponent,
+        ShowNodeActionComponent,
+        ConsoleComponent,
+        NodesMenuComponent,
+        ProjectMapMenuComponent,
+        HelpComponent,
+        ConfigEditorDialogComponent,
+        EditConfigActionComponent,
+        LogConsoleComponent,
+        SaveProjectDialogComponent,
+        TopologySummaryComponent,
+        InfoDialogComponent,
+        BringToFrontActionComponent,
+        ExportConfigActionComponent,
+        ImportConfigActionComponent,
+        ConsoleDeviceActionBrowserComponent,
+        ChangeSymbolDialogComponent,
+        ChangeSymbolActionComponent,
+        EditProjectDialogComponent,
+        ReloadNodeActionComponent,
+        SuspendNodeActionComponent,
+        ConfigActionComponent,
+        ConfiguratorDialogVpcsComponent,
+        ConfiguratorDialogEthernetHubComponent,
+        ConfiguratorDialogEthernetSwitchComponent,
+        PortsComponent,
+        ConfiguratorDialogSwitchComponent,
+        ConfiguratorDialogVirtualBoxComponent,
+        CustomAdaptersTableComponent,
+        ConfiguratorDialogQemuComponent,
+        ConfiguratorDialogCloudComponent,
+        UdpTunnelsComponent,
+        ConfiguratorDialogAtmSwitchComponent,
+        ConfiguratorDialogVmwareComponent,
+        ConfiguratorDialogIouComponent,
+        ConfiguratorDialogIosComponent,
+        ConfiguratorDialogDockerComponent,
+        ConfiguratorDialogNatComponent,
+        QemuImageCreatorComponent,
+        ChooseNameDialogComponent,
+        StartCaptureOnStartedLinkActionComponent,
+        LockActionComponent,
+        NavigationDialogComponent,
+        ScreenshotDialogComponent,
+        PageNotFoundComponent,
+        AlignHorizontallyActionComponent,
+        AlignVerticallyActionComponent,
+        ConfirmationBottomSheetComponent,
+        ConfigDialogComponent,
+        ImportApplianceComponent,
+        DirectLinkComponent,
+        SystemStatusComponent,
+        StatusInfoComponent,
+        StatusChartComponent,
+        OpenFileExplorerActionComponent,
+        HttpConsoleActionComponent,
+        WebConsoleComponent,
+        ConsoleWrapperComponent,
+        HttpConsoleNewTabActionComponent,
+        WebConsoleFullWindowComponent,
+        NewTemplateDialogComponent,
+        ChangeHostnameActionComponent,
+        ChangeHostnameDialogComponent,
+        ApplianceInfoDialogComponent,
+        ReadmeEditorComponent,
+        MarkedDirective,
+        InformationDialogComponent,
+        TemplateNameDialogComponent,
+        ConfigureCustomAdaptersDialogComponent,
+        EditNetworkConfigurationDialogComponent,
+        UserManagementComponent,
+        ProjectReadmeComponent,
+        AddGroupDialogComponent,
+        GroupFilterPipe,
+        GroupManagementComponent,
+        AddUserDialogComponent,
+        UserFilterPipe,
+        DeleteGroupDialogComponent,
+        DeleteUserDialogComponent,
+        GroupDetailsComponent,
+        UserDetailComponent,
+        AddUserToGroupDialogComponent,
+        RemoveToGroupDialogComponent,
+        PaginatorPipe,
+        MembersFilterPipe,
+        ManagementComponent,
+        RoleManagementComponent,
+        RoleFilterPipe,
+        AddRoleDialogComponent,
+        DeleteRoleDialogComponent,
+        RoleDetailComponent,
+        RemoveToGroupDialogComponent,
+        AddRoleToGroupComponent,
+        ChangeUserPasswordComponent,
+        ChangeUserPasswordComponent,
+        ProjectReadmeComponent,
+        ImageManagerComponent,
+        AddImageDialogComponent,
+        DeleteAllImageFilesDialogComponent,
+        UploadingProcessbarComponent,
+        ExportPortableProjectComponent,
+        NodesMenuConfirmationDialogComponent,
+        ConfirmationDeleteAllProjectsComponent,
+        ProjectMapLockConfirmationDialogComponent,
+        AclManagementComponent,
+        AddAceDialogComponent,
+        AutocompleteComponent,
+        DeleteAceDialogComponent,
+        AceFilterPipe,
+        PrivilegeComponent,
+        GroupPrivilegesPipe,
+        ResourcePoolsManagementComponent,
+        AddResourcePoolDialogComponent,
+        DeleteResourcePoolComponent,
+        ResourcePoolsFilterPipe,
+        ResourcePoolDetailsComponent,
+        DeleteResourceConfirmationDialogComponent,
+    ],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        CdkTableModule,
+        CartographyModule,
+        NgxElectronModule,
+        FileUploadModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatMenuModule,
+        ResizableModule,
+        DragAndDropModule,
+        DragDropModule,
+        NgxChildProcessModule,
+        MATERIAL_IMPORTS,
+        NgCircleProgressModule.forRoot(),
+        OverlayModule,
+        MatSlideToggleModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        CdkAccordionModule,
+        CdkTreeModule,
+    ],
+    providers: [
+        SettingsService,
+        { provide: ErrorHandler, useClass: ToasterErrorHandler },
+        { provide: HTTP_INTERCEPTORS, useClass: HttpRequestsInterceptor, multi: true },
+        VersionService,
+        D3Service,
+        ProjectService,
+        SymbolService,
+        ControllerService,
+        TemplateService,
+        NodeService,
+        LinkService,
+        DrawingService,
+        HttpController,
+        SnapshotService,
+        ProgressDialogService,
+        ToasterService,
+        ProgressService,
+        ProjectWebServiceHandler,
+        LinksDataSource,
+        NodesDataSource,
+        SymbolsDataSource,
+        LogEventsDataSource,
+        SelectionManager,
+        InRectangleHelper,
+        DrawingsDataSource,
+        ControllerErrorHandler,
+        ControllerDatabase,
+        ProjectNameValidator,
+        ToolsService,
+        ControllerSettingsService,
+        QemuService,
+        VpcsService,
+        TemplateMocksService,
+        VirtualBoxService,
+        BuiltInTemplatesService,
+        IosService,
+        InstalledSoftwareService,
+        ExternalSoftwareDefinitionService,
+        PlatformService,
+        IosConfigurationService,
+        QemuConfigurationService,
+        VirtualBoxConfigurationService,
+        VpcsConfigurationService,
+        BuiltInTemplatesConfigurationService,
+        VmwareService,
+        VmwareConfigurationService,
+        DockerService,
+        DockerConfigurationService,
+        IouService,
+        IouConfigurationService,
+        RecentlyOpenedProjectService,
+        ControllerManagementService,
+        MapScaleService,
+        ConsoleService,
+        DefaultConsoleService,
+        NodeCreatedLabelStylesFixer,
+        NonNegativeValidator,
+        RotationValidator,
+        MapSettingsService,
+        InfoService,
+        ComputeService,
+        PacketCaptureService,
+        NotificationService,
+        ThemeService,
+        GoogleAnalyticsService,
+        NodeConsoleService,
+        ControllerResolve,
+        LoginGuard,
+        ConsoleGuard,
+        Title,
+        ApplianceService,
+        UpdatesService,
+        LoginService,
+        UserService
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
   constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {}

src/app/cartography/cartography.module.ts

@@ -5,6 +5,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ANGULAR_MAP_DECLARATIONS } from './angular-map.imports';
 import { D3MapComponent } from './components/d3-map/d3-map.component';
 import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
+import { LinkEditingComponent } from './components/link-editing/link-editing.component';
 import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
 import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
 import { ExperimentalMapComponent } from './components/experimental-map/experimental-map.component';
@@ -73,6 +74,7 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     SelectionControlComponent,
     SelectionSelectComponent,
     DraggableSelectionComponent,
+    LinkEditingComponent,
     MovingCanvasDirective,
     ZoomingCanvasDirective,
   ],

src/app/cartography/components/d3-map/d3-map.component.html

@@ -44,5 +44,6 @@
 <app-drawing-resizing></app-drawing-resizing>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>
-<app-text-editor #textEditor [server]="server" [svg]="svg"></app-text-editor>
+<app-text-editor #textEditor [controller]="controller" [svg]="svg"></app-text-editor>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
+<app-link-editing [svg]="svg"></app-link-editing>

src/app/cartography/components/d3-map/d3-map.component.spec.ts

@@ -1,23 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { D3MapComponent } from './d3-map.component';
 
 describe('D3MapComponent', () => {
   let component: D3MapComponent;
   let fixture: ComponentFixture<D3MapComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [D3MapComponent],
     }).compileComponents();
-  }));
+  });
 
-  // beforeEach(() => {
-  //   fixture = TestBed.createComponent(MapComponent);
-  //   component = fixture.componentInstance;
-  //   fixture.detectChanges();
-  // });
-  //
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component)
+  });
 });

src/app/cartography/components/d3-map/d3-map.component.ts

@@ -13,7 +13,7 @@ import { select, Selection } from 'd3-selection';
 import { Subscription } from 'rxjs';
 import { Link } from '../../../models/link';
 import { Project } from '../../../models/project';
-import { Server } from '../../../models/server';
+import { Controller } from '../../../models/controller';
 import { Symbol } from '../../../models/symbol';
 import { MapScaleService } from '../../../services/mapScale.service';
 import { MapSettingsService } from '../../../services/mapsettings.service';
@@ -43,7 +43,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() drawings: Drawing[] = [];
   @Input() symbols: Symbol[] = [];
   @Input() project: Project;
-  @Input() server: Server;
+  @Input() controller: Controller;
 
   @Input() width = 1500;
   @Input() height = 600;

src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts

@@ -42,7 +42,7 @@ describe('DraggableSelectionComponent', () => {
   let interfaceLabelDragEventEmitter: EventEmitter<DraggableDrag<MapLinkNode>>;
   let interfaceLabelEndEventEmitter: EventEmitter<DraggableEnd<MapLinkNode>>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     mockedGraphDataManager = new MockedGraphDataManager();
 
     nodesStartEventEmitter = new EventEmitter<DraggableStart<MapNode>>();
@@ -110,7 +110,7 @@ describe('DraggableSelectionComponent', () => {
       interfaceDragged: { emit: () => {} },
     };
 
-    TestBed.configureTestingModule({
+   await TestBed.configureTestingModule({
       providers: [
         { provide: NodesWidget, useValue: nodesWidgetStub },
         { provide: DrawingsWidget, useValue: drawingsWidgetStub },
@@ -126,7 +126,7 @@ describe('DraggableSelectionComponent', () => {
       ],
       declarations: [DraggableSelectionComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DraggableSelectionComponent);

src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { Context } from '../../models/context';
@@ -9,8 +9,8 @@ describe('DrawingAddingComponent', () => {
   let fixture: ComponentFixture<DrawingAddingComponent>;
   let drawingsEventSource = new DrawingsEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsEventSource, useValue: drawingsEventSource },
@@ -18,7 +18,7 @@ describe('DrawingAddingComponent', () => {
       ],
       declarations: [DrawingAddingComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingAddingComponent);

src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { ResizingEnd } from '../../events/resizing';
@@ -30,8 +30,8 @@ describe('DrawingResizingComponent', () => {
   let drawingsWidgetMock = new DrawingWidgetMock();
   let drawingsEventSource = new DrawingsEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsWidget, useValue: drawingsWidgetMock },
@@ -39,7 +39,7 @@ describe('DrawingResizingComponent', () => {
       ],
       declarations: [DrawingResizingComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingResizingComponent);

src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts

@@ -1,15 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DraggableComponent } from './draggable.component';
 
 describe('DraggableComponent', () => {
   let component: DraggableComponent;
   let fixture: ComponentFixture<DraggableComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
       declarations: [DraggableComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DraggableComponent);
@@ -17,7 +17,7 @@ describe('DraggableComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawing.component.html

@@ -5,13 +5,13 @@
   (dragging)="OnDragging($event)"
   (dragged)="OnDragged($event)"
 >
-  <svg:g *ngIf="is(drawing.element, 'ellipse')" [app-ellipse]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'ellipse')" [app-ellipse]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'image')" [app-image]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'image')" [app-image]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'line')" [app-line]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'line')" [app-line]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'rect')" [app-rect]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'rect')" [app-rect]="drawing?.element" />
 
-  <svg:g *ngIf="is(drawing.element, 'text')" [app-text]="drawing.element" />
+  <svg:g *ngIf="is(drawing?.element, 'text')" [app-text]="drawing?.element" />
 </svg:g>

src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts

@@ -1,15 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { DrawingsEventSource } from 'app/cartography/events/drawings-event-source';
+import { SvgToDrawingConverter } from 'app/cartography/helpers/svg-to-drawing-converter';
 import { DrawingComponent } from './drawing.component';
 
 describe('DrawingComponent', () => {
   let component: DrawingComponent;
   let fixture: ComponentFixture<DrawingComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       declarations: [DrawingComponent],
+      providers:[SvgToDrawingConverter,DrawingsEventSource]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingComponent);
@@ -17,7 +20,7 @@ describe('DrawingComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawing.component.ts

@@ -21,17 +21,17 @@ export class DrawingComponent implements OnInit {
     private svgToDrawingConverter: SvgToDrawingConverter,
     private drawingsEventSource: DrawingsEventSource,
     private cd: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     try {
       this.drawing.element = this.svgToDrawingConverter.convert(this.drawing.svg);
-    } catch (error) {}
+    } catch (error) { }
   }
 
   OnDragging(evt) {
-    this.drawing.x = evt.x;
-    this.drawing.y = evt.y;
+    this.drawing.x = evt ? evt.x : '';
+    this.drawing.y = evt ? evt.y : '';
     this.cd.detectChanges();
   }
 
@@ -64,6 +64,8 @@ export class DrawingComponent implements OnInit {
   }
 
   get transformation() {
-    return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    if (this.drawing) {
+      return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    }
   }
 }

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.html

@@ -1,12 +1,12 @@
 <svg:ellipse
   class="ellipse_element noselect"
-  [attr.fill]="ellipse.fill"
+  [attr.fill]="ellipse?.fill"
   [attr.fill-opacity]="fill_opacity"
-  [attr.stroke]="ellipse.stroke"
+  [attr.stroke]="ellipse?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.cx]="ellipse.cx"
-  [attr.cy]="ellipse.cy"
-  [attr.rx]="ellipse.rx"
-  [attr.ry]="ellipse.ry"
+  [attr.cx]="ellipse?.cx"
+  [attr.cy]="ellipse?.cy"
+  [attr.rx]="ellipse?.rx"
+  [attr.ry]="ellipse?.ry"
 />

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts

@@ -1,15 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { EllipseComponent } from './ellipse.component';
 
 describe('EllipseComponent', () => {
   let component: EllipseComponent;
   let fixture: ComponentFixture<EllipseComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       declarations: [EllipseComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EllipseComponent);
@@ -17,7 +19,7 @@ describe('EllipseComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts

@@ -15,21 +15,21 @@ export class EllipseComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.ellipse.fill_opacity)) {
+    if (this.ellipse && isFinite(this.ellipse.fill_opacity)) {
       return this.ellipse.fill_opacity;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.ellipse.stroke_width)) {
+    if (this.ellipse && isFinite(this.ellipse.stroke_width)) {
       return this.ellipse.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.ellipse.stroke_dasharray) {
+    if (this.ellipse &&  this.ellipse.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.ellipse.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.html

@@ -1,6 +1,6 @@
 <svg:image
   class="image_element noselect"
-  [attr.xlink:href]="image.data"
-  [attr.width]="image.width"
-  [attr.height]="image.height"
+  [attr.xlink:href]="image?.data"
+  [attr.width]="image?.width"
+  [attr.height]="image?.height"
 />

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts

@@ -1,15 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImageComponent } from './image.component';
 
 describe('ImageComponent', () => {
   let component: ImageComponent;
   let fixture: ComponentFixture<ImageComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [ImageComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ImageComponent);
@@ -17,7 +17,7 @@ describe('ImageComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts

@@ -8,6 +8,7 @@ import { ImageElement } from '../../../../../models/drawings/image-element';
 })
 export class ImageComponent implements OnInit {
   @Input('app-image') image: ImageElement;
+  data:any
 
   constructor() {}
 

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.html

@@ -1,10 +1,10 @@
 <svg:line
   class="line_element noselect"
-  [attr.stroke]="line.stroke"
-  [attr.stroke-width]="stroke_width"
+  [attr.stroke]="line?.stroke"
+  [attr.stroke-width]="stroke_width ?? ''"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.x1]="line.x1"
-  [attr.x2]="line.x2"
-  [attr.y1]="line.y1"
-  [attr.y2]="line.y2"
+  [attr.x1]="line?.x1"
+  [attr.x2]="line?.x2"
+  [attr.y1]="line?.y1"
+  [attr.y2]="line?.y2"
 />

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts

@@ -1,15 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { LineComponent } from './line.component';
 
 describe('LineComponent', () => {
   let component: LineComponent;
   let fixture: ComponentFixture<LineComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
       declarations: [LineComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LineComponent);
@@ -17,7 +19,7 @@ describe('LineComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts

@@ -15,14 +15,14 @@ export class LineComponent implements OnInit {
   ngOnInit() {}
 
   get stroke_width() {
-    if (isFinite(this.line.stroke_width)) {
+    if (this.line && isFinite(this.line.stroke_width)) {
       return this.line.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.line.stroke_dasharray) {
+    if ( this.line && this.line.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.line.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html

@@ -1,12 +1,12 @@
 <svg:rect
   class="rect_element noselect"
-  [attr.fill]="rect.fill"
-  [attr.fill-opacity]="fill_opacity"
-  [attr.stroke]="rect.stroke"
+  [attr.fill]="rect?.fill"
+  [attr.fill-opacity]="fill_opacity ? fill_opacity : '' "
+  [attr.stroke]="rect?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.width]="rect.width"
-  [attr.height]="rect.height"
-  [attr.rx]="rect.rx"
-  [attr.ry]="rect.ry"
+  [attr.width]="rect?.width"
+  [attr.height]="rect?.height"
+  [attr.rx]="rect?.rx"
+  [attr.ry]="rect?.ry"
 />

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts

@@ -1,15 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { RectComponent } from './rect.component';
 
 describe('RectComponent', () => {
   let component: RectComponent;
   let fixture: ComponentFixture<RectComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [RectComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RectComponent);
@@ -17,7 +19,7 @@ describe('RectComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts

@@ -15,21 +15,21 @@ export class RectComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.rect.fill_opacity)) {
-      return this.rect.fill_opacity;
+    if (this.rect && isFinite(this.rect.fill_opacity)) {
+      return this.rect.fill_opacity ? this.rect.fill_opacity : null;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.rect.stroke_width)) {
-      return this.rect.stroke_width;
+    if (this.rect && isFinite(this.rect.stroke_width)) {
+      return this.rect.stroke_width ? this.rect.stroke_width : null;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.rect.stroke_dasharray) {
+    if (this.rect && this.rect.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.rect.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html

@@ -3,7 +3,7 @@
   class="text_element noselect"
   [attr.style]="style"
   [attr.text-decoration]="textDecoration"
-  [attr.fill]="text.fill"
+  [attr.fill]="text?.fill"
   [attr.transform]="transformation"
 >
   <svg:tspan *ngFor="let line of lines; index as i" xml:space="preserve" x="0" [attr.dy]="i == 0 ? '0em' : '1.4em'">

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts

@@ -1,15 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { TextComponent } from './text.component';
 
 describe('TextComponent', () => {
   let component: TextComponent;
   let fixture: ComponentFixture<TextComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       declarations: [TextComponent],
+      providers:[FontFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextComponent);
@@ -17,7 +19,7 @@ describe('TextComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts

@@ -19,10 +19,12 @@ export class TextComponent implements OnInit, DoCheck {
 
   transformation = '';
 
-  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) {}
+  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    this.lines = this.getLines(this.text.text);
+    if (this.text) {
+      this.lines = this.getLines(this.text.text);
+    }
   }
 
   ngDoCheck() {
@@ -30,32 +32,38 @@ export class TextComponent implements OnInit, DoCheck {
   }
 
   get style() {
-    const font = this.fontFixer.fix(this.text);
+    if (this.text) {
+      const font = this.fontFixer.fix(this.text);
 
-    const styles: string[] = [];
-    if (font.font_family) {
-      styles.push(`font-family: "${this.text.font_family}"`);
+      const styles: string[] = [];
+      if (font.font_family) {
+        styles.push(`font-family: "${this.text.font_family}"`);
+      }
+      if (font.font_size) {
+        styles.push(`font-size: ${this.text.font_size}pt`);
+      }
+      if (font.font_weight) {
+        styles.push(`font-weight: ${this.text.font_weight}`);
+      }
+      return this.sanitizer.bypassSecurityTrustStyle(styles.join('; '));
     }
-    if (font.font_size) {
-      styles.push(`font-size: ${this.text.font_size}pt`);
-    }
-    if (font.font_weight) {
-      styles.push(`font-weight: ${this.text.font_weight}`);
-    }
-    return this.sanitizer.bypassSecurityTrustStyle(styles.join('; '));
   }
 
   get textDecoration() {
-    return this.text.text_decoration;
+    if (this.text) {
+      return this.text.text_decoration;
+    }
   }
 
   calculateTransformation() {
-    const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
-    if (tspans.length > 0) {
-      const height = this.textRef.nativeElement.getBBox().height / tspans.length;
-      return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
+    if (this.textRef != undefined) {
+      const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
+      if (tspans.length > 0) {
+        const height = this.textRef.nativeElement.getBBox().height / tspans.length;
+        return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
+      }
+      return '';
     }
-    return '';
   }
 
   getLines(text: string) {

src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts

@@ -1,15 +1,28 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectorRef, ElementRef, Injectable } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
 import { InterfaceLabelComponent } from './interface-label.component';
 
-describe('InterfaceLabelComponent', () => {
+export class MockElementRef extends ElementRef {
+  constructor() { super(null || undefined); }
+  nativeElement={}
+}
+
+
+xdescribe('InterfaceLabelComponent', () => {
   let component: InterfaceLabelComponent;
   let fixture: ComponentFixture<InterfaceLabelComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [InterfaceLabelComponent],
+      providers: [
+        CssFixer,
+        ChangeDetectorRef,
+        { provide: ElementRef, useValue: new MockElementRef() },
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InterfaceLabelComponent);
@@ -17,7 +30,7 @@ describe('InterfaceLabelComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  });
 });

src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts

@@ -30,9 +30,9 @@ export class InterfaceLabelComponent implements OnInit {
     private ref: ChangeDetectorRef,
     private sanitizer: DomSanitizer,
     private cssFixer: CssFixer
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   @Input('x')
   set x(value) {
@@ -89,9 +89,11 @@ export class InterfaceLabelComponent implements OnInit {
   }
 
   get transform() {
-    const bbox = this.elementRef.nativeElement.getBBox();
-    const x = this.label.x;
-    const y = this.label.y + bbox.height;
-    return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+    if (this.elementRef.nativeElement.getBBox) {
+      const bbox = this.elementRef.nativeElement.getBBox()
+      const x = this.label.x;
+      const y = this.label.y + bbox.height;
+      return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+    }
   }
 }

src/app/cartography/components/experimental-map/link/link.component.html

@@ -1,13 +1,13 @@
 <svg:g
   class="link"
-  [attr.link_id]="link.id"
-  [attr.map-source]="link.source.id"
-  [attr.map-target]="link.target.id"
+  [attr.link_id]="link?.id"
+  [attr.map-source]="link?.source?.id"
+  [attr.map-target]="link?.target?.id"
   [attr.transform]="transform"
 >
   <svg:path
     #path
-    *ngIf="link.linkType == 'ethernet'"
+    *ngIf="link?.linkType == 'ethernet'"
     class="ethernet_link"
     stroke="#000"
     stroke-width="2"
@@ -16,7 +16,7 @@
 
   <svg:path
     #path
-    *ngIf="link.linkType == 'serial'"
+    *ngIf="link?.linkType == 'serial'"
     class="serial_link"
     stroke="#B22222"
     fill="none"
@@ -24,27 +24,27 @@
     [attr.d]="d"
   />
 
-  <svg:g [app-status]="link.source.status" [direction]="'source'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.source?.status" [direction]="'source'" [path]="path" [d]="d" />
 
-  <svg:g [app-status]="link.target.status" [direction]="'target'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.target?.status" [direction]="'target'" [path]="path" [d]="d" />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.source.x + link.nodes[0].label.x"
-    [y]="link.source.y + link.nodes[0].label.y"
-    [text]="link.nodes[0].label.text"
-    [style]="link.nodes[0].label.style"
-    [rotation]="link.nodes[0].label.rotation"
+    [x]="link?.source?.x + link?.nodes[0]?.label?.x"
+    [y]="link?.source?.y + link?.nodes[0]?.label?.y"
+    [text]="link?.nodes[0]?.label?.text"
+    [style]="link?.nodes[0]?.label?.style"
+    [rotation]="link?.nodes[0]?.label?.rotation"
   />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.target.x + link.nodes[1].label.x"
-    [y]="link.target.y + link.nodes[1].label.y"
-    [text]="link.nodes[1].label.text"
-    [style]="link.nodes[1].label.style"
-    [rotation]="link.nodes[1].label.rotation"
+    [x]="link?.target?.x + link?.nodes[1]?.label?.x"
+    [y]="link?.target?.y + link?.nodes[1]?.label?.y"
+    [text]="link?.nodes[1]?.label?.text"
+    [style]="link?.nodes[1]?.label?.style"
+    [rotation]="link?.nodes[1]?.label?.rotation"
   />
 </svg:g>

src/app/cartography/components/experimental-map/link/link.component.spec.ts

@@ -1,15 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MultiLinkCalculatorHelper } from 'app/cartography/helpers/multi-link-calculator-helper';
 import { LinkComponent } from './link.component';
 
 describe('LinkComponent', () => {
   let component: LinkComponent;
   let fixture: ComponentFixture<LinkComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [LinkComponent],
+      providers: [
+        { provide: MultiLinkCalculatorHelper, useValue: {} }
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkComponent);
@@ -17,7 +20,7 @@ describe('LinkComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/link/link.component.ts

@@ -33,7 +33,7 @@ export class LinkComponent implements OnInit, OnDestroy {
 
   private nodeChangedSubscription: Subscription;
 
-  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) {}
+  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.ref.detectChanges();
@@ -49,19 +49,21 @@ export class LinkComponent implements OnInit, OnDestroy {
   }
 
   get strategy(): LinkStrategy {
-    if (this.link.linkType === 'serial') {
+    if (this.link && this.link != undefined && this.link.linkType === 'serial') {
       return this.serialLinkStrategy;
     }
     return this.ethernetLinkStrategy;
   }
 
   get transform() {
-    const translation = this.multiLinkCalculatorHelper.linkTranslation(
-      this.link.distance,
-      this.link.source,
-      this.link.target
-    );
-    return `translate (${translation.dx}, ${translation.dy})`;
+    if (this.link) {
+      const translation = this.multiLinkCalculatorHelper.linkTranslation(
+        this.link.distance,
+        this.link.source,
+        this.link.target
+      );
+      return `translate (${translation.dx}, ${translation.dy})`;
+    }
   }
 
   get d() {

src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts

@@ -5,8 +5,9 @@ import { LinkStrategy } from './link-strategy';
 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?.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],
     ];
 
     const line_generator = path();

src/app/cartography/components/experimental-map/node/node.component.html

@@ -1,8 +1,8 @@
-<svg:g class="node" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
+<svg:g class="node" [attr.transform]="'translate(' + node?.x + ',' + node?.y + ')'">
   <svg:image
     #image
-    [attr.width]="node.width"
-    [attr.height]="node.height"
+    [attr.width]="node?.width"
+    [attr.height]="node?.height"
     [attr.x]="0"
     [attr.y]="0"
     [attr.xlink:href]="symbol"
@@ -11,6 +11,6 @@
     (dragged)="OnDragged($event)"
   />
   <svg:text #label class="label" [attr.style]="label_style" [attr.x]="label_x" [attr.y]="label_y">
-    {{ node.label.text }}
+    {{ node?.label?.text }}
   </svg:text>
 </svg:g>

src/app/cartography/components/experimental-map/node/node.component.spec.ts

@@ -1,15 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NodesEventSource } from 'app/cartography/events/nodes-event-source';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { NodeComponent } from './node.component';
 
 describe('NodeComponent', () => {
   let component: NodeComponent;
   let fixture: ComponentFixture<NodeComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       declarations: [NodeComponent],
+      providers:[ 
+        CssFixer,
+        FontFixer,
+        NodesEventSource,
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NodeComponent);
@@ -17,7 +25,7 @@ describe('NodeComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/node/node.component.ts

@@ -49,7 +49,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
     protected element: ElementRef,
     private cd: ChangeDetectorRef,
     private nodesEventSource: NodesEventSource
-  ) {}
+  ) { }
 
   ngOnInit() {
     // this.nodeChangedSubscription = this.nodeChanged.subscribe((node: Node) => {
@@ -85,42 +85,52 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
   }
 
   get symbol(): string {
-    const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
-    if (symbol) {
-      return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+    if (this.symbols) {
+      const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
+      if (symbol) {
+        return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+      }
+      // @todo; we need to have default image
+      return 'data:image/svg+xml;base64,none';
     }
-    // @todo; we need to have default image
-    return 'data:image/svg+xml;base64,none';
   }
 
   get label_style() {
-    let styles = this.cssFixer.fix(this.node.label.style);
-    styles = this.fontFixer.fixStyles(styles);
-    return this.sanitizer.bypassSecurityTrustStyle(styles);
+    if (this.node != undefined) {
+      let styles = this.cssFixer.fix(this.node.label.style);
+      styles = this.fontFixer.fixStyles(styles);
+      return this.sanitizer.bypassSecurityTrustStyle(styles);
+    }
   }
 
   get label_x(): number {
-    if (this.node.label.x === null) {
-      // center
-      const bbox = this.label.nativeElement.getBBox();
+    if (this.node != undefined) {
+      if (this.node.label.x === null) {
+        // center
+        const bbox = this.label.nativeElement.getBBox();
 
-      return -bbox.width / 2;
+        return -bbox.width / 2;
+      }
+      return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
   }
 
   get label_y(): number {
     this.labelHeight = this.getLabelHeight();
 
-    if (this.node.label.x === null) {
-      // center
-      return -this.node.height / 2 - this.labelHeight;
+    if (this.node != undefined) {
+      if (this.node.label.x === null) {
+        // center
+        return -this.node.height / 2 - this.labelHeight;
+      }
+      return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
   }
 
   private getLabelHeight() {
-    const bbox = this.label.nativeElement.getBBox();
-    return bbox.height;
+    if (this.label != undefined) {
+      const bbox = this.label.nativeElement.getBBox();
+      return bbox.height;
+    }
   }
 }

src/app/cartography/components/experimental-map/selection/selection.component.spec.ts

@@ -1,23 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SelectionComponent } from './selection.component';
 
 describe('SelectionComponent', () => {
   let component: SelectionComponent;
   let fixture: ComponentFixture<SelectionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [SelectionComponent],
     }).compileComponents();
-  }));
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(SelectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
+  afterEach(() => {
+    fixture.destroy()
+  })
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/experimental-map/selection/selection.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription} from 'rxjs';
 import { Rectangle } from '../../../models/rectangle';
 
 @Component({
@@ -28,15 +28,14 @@ export class SelectionComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     const down = Observable.fromEvent(this.svg, 'mousedown').do((e: MouseEvent) => e.preventDefault());
-
     down.subscribe((e: MouseEvent) => {
       if (e.target !== this.svg) {
         return;
       }
 
       this.started = true;
-      this.startX = e.clientX + window.scrollX;
-      this.startY = e.clientY + window.scrollY;
+      this.startX = e?.clientX + window?.scrollX;
+      this.startY = e?.clientY + window?.scrollY;
       this.width = 0;
       this.height = 0;
       this.visible = true;
@@ -51,7 +50,7 @@ export class SelectionComponent implements OnInit, AfterViewInit {
 
     const scrollWindow = Observable.fromEvent(document, 'scroll').startWith({});
 
-    const move = Observable.combineLatest(mouseMove, scrollWindow);
+    const move = Observable.combineLatest([mouseMove, scrollWindow]);
 
     const drag = down.mergeMap((md: MouseEvent) => {
       return move
@@ -76,11 +75,11 @@ export class SelectionComponent implements OnInit, AfterViewInit {
             this.visible = false;
             this.started = false;
 
+            
             this.width = e.clientX - this.startX + window.scrollX;
             this.height = e.clientY - this.startY + window.scrollY;
 
             this.ref.detectChanges();
-
             this.selectedEvent([this.startX, this.startY], [this.width, this.height]);
           })
         )

src/app/cartography/components/experimental-map/status/status.component.spec.ts

@@ -1,15 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { StatusComponent } from './status.component';
 
 describe('StatusComponent', () => {
   let component: StatusComponent;
   let fixture: ComponentFixture<StatusComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       declarations: [StatusComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StatusComponent);

src/app/cartography/components/link-editing/link-editing.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { select } from 'd3-selection';
+import { Subscription } from 'rxjs';
+import { LinksEventSource } from '../../events/links-event-source';
+import { MapLink } from '../../models/map/map-link';
+import { LinksWidget } from '../../widgets/links';
+
+@Component({
+  selector: 'app-link-editing',
+  templateUrl: './link-editing.component.html',
+  styleUrls: ['./link-editing.component.scss'],
+})
+export class LinkEditingComponent implements OnInit, OnDestroy {
+  private linkEditedSubscription: Subscription;
+  @Input('svg') svg: SVGSVGElement;
+
+  constructor(
+    private linksWidget: LinksWidget,
+    private linksEventSource: LinksEventSource  ) {}
+
+  ngOnInit() {
+    const svg = select(this.svg);
+    this.linkEditedSubscription = this.linksEventSource.edited.subscribe((link: MapLink) => {
+        this.linksWidget.redrawLink(svg, link);
+    });
+  }
+
+  ngOnDestroy() {
+    this.linkEditedSubscription.unsubscribe();
+  }
+}

src/app/cartography/components/selection-select/selection-select.component.spec.ts

@@ -1,15 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectionManager } from 'app/cartography/managers/selection-manager';
+import { MapChangeDetectorRef } from 'app/cartography/services/map-change-detector-ref';
 import { SelectionSelectComponent } from './selection-select.component';
 
 describe('SelectionSelectComponent', () => {
   let component: SelectionSelectComponent;
   let fixture: ComponentFixture<SelectionSelectComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [SelectionSelectComponent],
+      providers: [MapChangeDetectorRef,SelectionManager]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionSelectComponent);
@@ -17,7 +20,7 @@ describe('SelectionSelectComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/cartography/components/text-editor/text-editor.component.spec.ts

@@ -1,5 +1,5 @@
 import { Renderer2 } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MockedLinkService } from '../../../components/project-map/project-map.component.spec';
 import { LinkService } from '../../../services/link.service';
@@ -18,7 +18,7 @@ describe('TextEditorComponent', () => {
   let fixture: ComponentFixture<TextEditorComponent>;
   let mockedLinkService: MockedLinkService = new MockedLinkService();
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
@@ -35,7 +35,7 @@ describe('TextEditorComponent', () => {
       ],
       declarations: [TextEditorComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextEditorComponent);

src/app/cartography/components/text-editor/text-editor.component.ts

@@ -13,7 +13,7 @@ import { select } from 'd3-selection';
 import { Subscription } from 'rxjs';
 import { StyleProperty } from '../../../components/project-map/drawings-editors/text-editor/text-editor.component';
 import { Link } from '../../../models/link';
-import { Server } from '../../../models/server';
+import { Controller } from '../../../models/controller';
 import { LinkService } from '../../../services/link.service';
 import { MapScaleService } from '../../../services/mapScale.service';
 import { ToolsService } from '../../../services/tools.service';
@@ -37,7 +37,7 @@ import { Node } from '../../models/node';
 export class TextEditorComponent implements OnInit, OnDestroy {
   @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
   @Input('svg') svg: SVGSVGElement;
-  @Input('server') server: Server;
+  @Input('controller') controller: Controller;
 
   leftPosition: string = '0px';
   topPosition: string = '0px';
@@ -185,7 +185,7 @@ export class TextEditorComponent implements OnInit, OnDestroy {
           let link: Link = this.linksDataSource.get(this.editedLink.linkId);
           link.nodes.find((n) => n.node_id === this.editedNode.node_id).label.text = innerText;
 
-          this.linkService.updateLink(this.server, link).subscribe((link: Link) => {
+          this.linkService.updateLink(this.controller, link).subscribe((link: Link) => {
             rootElement
               .selectAll<SVGTextElement, TextElement>('text.editingMode')
               .attr('visibility', 'visible')

src/app/cartography/converters/map/link-to-map-link-converter.ts

@@ -15,6 +15,7 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     mapLink.captureFilePath = link.capture_file_path;
     mapLink.capturing = link.capturing;
     mapLink.filters = link.filters;
+    mapLink.link_style = link.link_style;
     mapLink.linkType = link.link_type;
     mapLink.nodes = link.nodes.map((linkNode) =>
       this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id })

src/app/cartography/converters/map/map-drawing-to-svg-converter.ts

@@ -14,11 +14,11 @@ 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}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`;
+      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />` :`<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}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`}`;
     } 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 = `${mapDrawing.element.stroke_dasharray == '' ? `<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}\"/>` :`<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}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
     } 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}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
     } 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>`;
     } else return '';

src/app/cartography/converters/map/map-link-to-link-converter.ts

@@ -16,6 +16,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
     link.capturing = mapLink.capturing;
     link.filters = mapLink.filters;
     link.link_type = mapLink.linkType;
+    link.link_style = mapLink.link_style;
     link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
     link.project_id = mapLink.projectId;
     link.suspend = mapLink.suspend;

src/app/cartography/directives/moving-canvas.directive.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
@@ -19,8 +19,8 @@ describe('MovingCanvasDirective', () => {
   let fixture: ComponentFixture<DummyComponent>;
   let movingEventSource = new MovingEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: MovingEventSource, useValue: movingEventSource },
@@ -28,7 +28,7 @@ describe('MovingCanvasDirective', () => {
       ],
       declarations: [DummyComponent, MovingCanvasDirective],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DummyComponent);

src/app/cartography/directives/zooming-canvas.directive.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MapScaleService } from '../../services/mapScale.service';
 import { MovingEventSource } from '../events/moving-event-source';
@@ -20,8 +20,8 @@ describe('ZoomingCanvasDirective', () => {
   let fixture: ComponentFixture<DummyComponent>;
   let movingEventSource = new MovingEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: MovingEventSource, useValue: movingEventSource },
@@ -30,7 +30,7 @@ describe('ZoomingCanvasDirective', () => {
       ],
       declarations: [DummyComponent, ZoomingCanvasDirective],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DummyComponent);

src/app/cartography/events/links-event-source.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
+import { MapLink } from '../models/map/map-link';
 import { MapLinkNode } from '../models/map/map-link-node';
 import { DraggedDataEvent } from './event-source';
 import { MapLinkCreated } from './links';
@@ -6,5 +7,6 @@ import { MapLinkCreated } from './links';
 @Injectable()
 export class LinksEventSource {
   public created = new EventEmitter<MapLinkCreated>();
+  public edited = new EventEmitter<MapLink>();
   public interfaceDragged = new EventEmitter<DraggedDataEvent<MapLinkNode>>();
 }

src/app/cartography/helpers/font-fixer.spec.ts

@@ -8,43 +8,47 @@ describe('FontFixer', () => {
     fixer = new FontFixer();
   });
 
-  it('should fix TypeWriter font and 10px size', () => {
+  it("should fix TypeWriter font and 10px size", () => {
     const font: Font = {
-      font_family: 'TypeWriter',
+      font_family: "TypeWriter",
       font_size: 10,
-      font_weight: 'bold',
+      font_weight: "bold",
     };
 
     expect(fixer.fix(font)).toEqual({
-      font_family: 'Arial',
-      font_size: 12,
-      font_weight: 'bold',
+      font_family: "Noto Sans",
+      font_size: 11,
+      font_weight: "bold",
     });
   });
 
-  it('should not fix other fonts', () => {
+  it("should not fix other fonts", () => {
     const font: Font = {
-      font_family: 'OtherFont',
+      font_family: "OtherFont",
       font_size: 11,
-      font_weight: 'bold',
+      font_weight: "bold",
     };
 
     expect(fixer.fix(font)).toEqual({
-      font_family: 'OtherFont',
+      font_family: "OtherFont",
       font_size: 11,
-      font_weight: 'bold',
+      font_weight: "bold",
     });
   });
 
   it('should fix TypeWriter font and 10px size in styles', () => {
-    const styles = 'font-family: TypeWriter; font-size: 10px; font-weight: bold';
+    let typeWriter = "TypeWriter";
+    let notoSans = "Noto Sans";
+    const styles = `font-family:${typeWriter} ; font-size: 10px; font-weight: bold`;
 
-    expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold');
+    expect(fixer.fixStyles(styles)).toEqual(`font-family:${notoSans};font-size:11px;font-weight:bold`);
   });
 
-  it('should fix TypeWriter font and 10px size in styles with quotes', () => {
-    const styles = 'font-family: "TypeWriter"; font-size: 10px; font-weight: bold';
+  it("should fix TypeWriter font and 10px size in styles with quotes", () => {
+    let typeWriter = "TypeWriter";
+    let notoSans = "Noto Sans";
+    const styles = `font-family:${typeWriter}; font-size: 10px; font-weight: bold`;
 
-    expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold');
+    expect(fixer.fixStyles(styles)).toEqual(`font-family:${notoSans};font-size:11px;font-weight:bold`);
   });
 });

src/app/cartography/helpers/font-fixer.ts

@@ -9,8 +9,8 @@ import { Font } from '../models/font';
 export class FontFixer {
   static DEFAULT_FONT = 'TypeWriter';
   static DEFAULT_SIZE = 10;
-  static REPLACE_BY_FONT = 'Arial';
-  static REPLACE_BY_SIZE = 12;
+  static REPLACE_BY_FONT = 'Noto Sans';
+  static REPLACE_BY_SIZE = 11;
 
   public fix(font: Font): Font {
     if (font.font_family === FontFixer.DEFAULT_FONT && font.font_size === FontFixer.DEFAULT_SIZE) {

src/app/cartography/helpers/qt-dasharray-fixer.ts

@@ -7,16 +7,18 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class QtDasharrayFixer {
   static MAPPING = {
-    '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': '10, 2', // Dash
+    '5, 25': '4, 2', // Dot
+    '5, 25, 25': '12, 3, 5, 3', // Dash Dot
+    '25, 25, 5, 25, 5': '12, 3, 5, 3, 5, 3', // Dash Dot Dot
   };
 
   public fix(dasharray: string): string {
+    if(dasharray || dasharray == '' ){
     if (dasharray in QtDasharrayFixer.MAPPING) {
       return QtDasharrayFixer.MAPPING[dasharray];
     }
     return dasharray;
   }
 }
+}

src/app/cartography/managers/graph-data-manager.ts

@@ -45,6 +45,7 @@ export class GraphDataManager {
 
   public setLinks(links: Link[]) {
     if (links) {
+      console.log("from set links");
       const mapLinks = links.map((l) => this.linkToMapLink.convert(l));
       this.mapLinksDataSource.set(mapLinks);
 
@@ -88,6 +89,7 @@ export class GraphDataManager {
   private onDataUpdate() {
     this.layersManager.clear();
     this.layersManager.setNodes(this.getNodes());
+    console.log(this.getLinks());
     this.layersManager.setLinks(this.getLinks());
     this.layersManager.setDrawings(this.getDrawings());
   }

src/app/cartography/managers/layers-manager.ts

@@ -38,6 +38,7 @@ export class LayersManager {
   }
 
   public setLinks(links: MapLink[]) {
+    console.log('from set links 2');
     links
       .filter((link: MapLink) => link.source && link.target)
       .forEach((link: MapLink) => {

src/app/cartography/models/map/map-link.ts

@@ -2,6 +2,7 @@ import { Filter } from '../../../models/filter';
 import { Indexed } from '../../datasources/map-datasource';
 import { MapLinkNode } from './map-link-node';
 import { MapNode } from './map-node';
+import { LinkStyle } from '../../../models/link-style';
 
 export class MapLink implements Indexed {
   id: string;
@@ -13,14 +14,15 @@ export class MapLink implements Indexed {
   nodes: MapLinkNode[];
   projectId: string;
   suspend: boolean;
+  link_style?: LinkStyle;
 
-  distance: number; // this is not from server
-  length: number; // this is not from server
-  source: MapNode; // this is not from server
-  target: MapNode; // this is not from server
+  distance: number; // this is not from controller
+  length: number; // this is not from controller
+  source: MapNode; // this is not from controller
+  target: MapNode; // this is not from controller
 
-  isSelected = false; // this is not from server
-  isMultiplied = false; // this is not from server
-  x: number; // this is not from server
-  y: number; // this is not from server
+  isSelected = false; // this is not from controller
+  isMultiplied = false; // this is not from controller
+  x: number; // this is not from controller
+  y: number; // this is not from controller
 }

src/app/cartography/models/node.ts

@@ -14,7 +14,6 @@ export class Properties {
   headless: boolean;
   linked_clone: boolean;
   on_close: string;
-  aux: number;
   ram: number;
   nvram: number;
   usage: string;
@@ -46,7 +45,6 @@ export class Properties {
   kernel_command_line: string;
   kernel_image: string;
   kernel_image_md5sum?: any;
-  legacy_networking: boolean;
   mac_address: string;
   options: string;
   platform: string;
@@ -54,8 +52,8 @@ export class Properties {
   qemu_path: string;
   environment: string;
   extra_hosts: string;
-  extra_volumes: string[];
   replicate_network_connection_state: boolean;
+  memory: number;
   tpm: boolean;
   uefi: boolean;
 }

src/app/cartography/services/map-change-detector-ref.ts

@@ -7,6 +7,7 @@ export class MapChangeDetectorRef {
   public hasBeenDrawn = false;
 
   public detectChanges() {
+    console.log('from map change detector');
     this.changesDetected.emit(true);
   }
 }

src/app/cartography/widgets/drawings/text-drawing.spec.ts

@@ -42,7 +42,7 @@ describe('TextDrawingWidget', () => {
     const text_element = drew.nodes()[0];
     expect(text_element.innerHTML).toEqual('<tspan xml:space="preserve" x="0" dy="0em">THIS IS TEXT</tspan>');
     expect(text_element.getAttribute('fill')).toEqual('#000000');
-    expect(text_element.getAttribute('style')).toEqual('font-family: "Arial"; font-size: 12pt; font-weight: bold');
+    expect(text_element.getAttribute('style')).toEqual('font-family: "Noto Sans"; font-size: 11pt; font-weight: bold');
     expect(text_element.getAttribute('text-decoration')).toEqual('line-through');
   });
 

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

@@ -52,13 +52,13 @@ export class InterfaceStatusWidget implements Widget {
               new LinkStatus(
                 start_point.x,
                 start_point.y,
-                l.capturing && l.suspend ? 'suspended' : l.source.status,
+               (( !l.capturing && l.suspend) || ( 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,
+                (( !l.capturing && l.suspend) || ( l.capturing && l.suspend)) ? 'suspended' : l.target.status,
                 destinationPort
               ),
             ];
@@ -90,16 +90,16 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_started_enter)
           .attr('class', 'status_started')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 10 + 5;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', '#c7ffdf')
+          .style('fill', 'white')
           .attr('stroke', '#2ecc71')
-          .attr('stroke-width', 2);
+          .attr('stroke-width', 3);
         status_started.exit().remove();
         const status_started_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
@@ -111,7 +111,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `#0e9647`);
+          .attr('fill', `black`);
         status_started_label.exit().remove();
 
         const status_stopped = link_group
@@ -122,16 +122,16 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_stopped_enter)
           .attr('class', 'status_stopped')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 10 + 5;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', '#ffe3e3')
+          .style('fill', 'white')
           .attr('stroke', 'red')
-          .attr('stroke-width', 2);
+          .attr('stroke-width', 3);
         status_stopped.exit().remove();
         const status_stopped_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label')
@@ -143,7 +143,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `red`);
+          .attr('fill', `black`);
         status_stopped_label.exit().remove();
 
         const status_suspended = link_group
@@ -154,7 +154,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_suspended_enter)
           .attr('class', 'status_suspended')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 10 + 5;
+            return ls.port.length * 8 + 10;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -162,8 +162,8 @@ export class InterfaceStatusWidget implements Widget {
           .attr('rx', 8)
           .attr('ry', 8)
           .style('fill', 'white')
-          .attr('stroke', '#fffbc3')
-          .attr('stroke-width', 2);
+          .attr('stroke', '#FFFF00')
+          .attr('stroke-width', 3);
         status_suspended.exit().remove();
         const status_suspended_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label')
@@ -175,7 +175,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `#6b5633`);
+          .attr('fill', `black`);
         status_suspended_label.exit().remove();
       } else {
         const status_started = link_group

src/app/cartography/widgets/link.ts

@@ -22,14 +22,15 @@ export class LinkWidget implements Widget {
     private selectionManager: SelectionManager,
     private ethernetLinkWidget: EthernetLinkWidget,
     private serialLinkWidget: SerialLinkWidget
-  ) {}
+  ) { }
 
   public draw(view: SVGSelection) {
     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_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})`;
     });
@@ -50,9 +51,8 @@ export class LinkWidget implements Widget {
       })
       .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)`;
+        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')
@@ -74,9 +74,8 @@ export class LinkWidget implements Widget {
       })
       .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)`;
+        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')
@@ -100,9 +99,8 @@ export class LinkWidget implements Widget {
       .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)`;
+        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')
@@ -124,9 +122,8 @@ export class LinkWidget implements Widget {
       })
       .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)`;
+        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')

src/app/cartography/widgets/links.ts

@@ -11,6 +11,7 @@ export class LinksWidget implements Widget {
   constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private linkWidget: LinkWidget) {}
 
   public redrawLink(view: SVGSelection, link: MapLink) {
+    console.log('redraw called');
     this.linkWidget.draw(this.selectLink(view, link));
   }
 

src/app/cartography/widgets/links/ethernet-link.ts

@@ -4,21 +4,29 @@ import { LinkContextMenu } from '../../events/event-source';
 import { MapLink } from '../../models/map/map-link';
 import { SVGSelection } from '../../models/types';
 import { Widget } from '../widget';
+import { LinkStyle } from '../../../models/link-style';
+import { StyleTranslator} from './style-translator';
 
 class EthernetLinkPath {
-  constructor(public source: [number, number], public target: [number, number]) {}
+  constructor(public source: [number, number], public target: [number, number], public style: LinkStyle) {}
 }
 
 @Injectable()
 export class EthernetLinkWidget implements Widget {
   public onContextMenu = new EventEmitter<LinkContextMenu>();
+  private defaultEthernetLinkStyle : LinkStyle = {
+    color: "#000",
+    width: 2,
+    type: 0
+  };
 
   constructor() {}
 
   private linktoEthernetLink(link: MapLink) {
     return new EthernetLinkPath(
       [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],
+      link.link_style.color ? link.link_style : this.defaultEthernetLinkStyle
     );
   }
 
@@ -38,15 +46,15 @@ export class EthernetLinkWidget implements Widget {
         let link: MapLink = (datum as unknown) as MapLink;
         const evt = event;
         this.onContextMenu.emit(new LinkContextMenu(evt, link));
-      });
-
-    link_enter
-      .attr('stroke', '#000')
-      .attr('stroke-width', '2')
-      .on('contextmenu', (datum) => {
-        let link: MapLink = (datum as unknown) as MapLink;
-        const evt = event;
-        this.onContextMenu.emit(new LinkContextMenu(evt, link));
+      })
+      .attr('stroke', (datum) => {
+        return datum.style.color;
+      })
+      .attr('stroke-width', (datum) => {
+        return datum.style.width;
+      })
+      .attr('stroke-dasharray', (datum) => {
+        return StyleTranslator.getLinkStyle(datum.style);
       });
 
     const link_merge = link.merge(link_enter);

src/app/cartography/widgets/links/serial-link.ts

@@ -4,19 +4,27 @@ import { LinkContextMenu } from '../../events/event-source';
 import { MapLink } from '../../models/map/map-link';
 import { SVGSelection } from '../../models/types';
 import { Widget } from '../widget';
+import { LinkStyle } from '../../../models/link-style';
+import { StyleTranslator} from './style-translator';
 
 class SerialLinkPath {
   constructor(
     public source: [number, number],
     public source_angle: [number, number],
     public target_angle: [number, number],
-    public target: [number, number]
+    public target: [number, number],
+    public style: LinkStyle
   ) {}
 }
 
 @Injectable()
 export class SerialLinkWidget implements Widget {
   public onContextMenu = new EventEmitter<LinkContextMenu>();
+  private defaultSerialLinkStyle : LinkStyle = {
+    color: "#B22222",
+    width: 2,
+    type: 0
+  };
 
   constructor() {}
 
@@ -47,7 +55,12 @@ export class SerialLinkWidget implements Widget {
       target.y - dy / 2.0 - 15 * vect_rot[1],
     ];
 
-    return new SerialLinkPath([source.x, source.y], angle_source, angle_target, [target.x, target.y]);
+    return new SerialLinkPath(
+      [source.x, source.y], 
+      angle_source, 
+      angle_target, 
+      [target.x, target.y], 
+      link.link_style.color ? link.link_style : this.defaultSerialLinkStyle);
   }
 
   public draw(view: SVGSelection) {
@@ -68,7 +81,16 @@ export class SerialLinkWidget implements Widget {
         this.onContextMenu.emit(new LinkContextMenu(evt, link));
       });
 
-    link_enter.attr('stroke', '#B22222').attr('fill', 'none').attr('stroke-width', '2');
+    link_enter
+      .attr('stroke', (datum) => {
+        return datum.style.color;
+      })
+      .attr('stroke-width', (datum) => {
+        return datum.style.width;
+      })
+      .attr('stroke-dasharray', (datum) => {
+        return StyleTranslator.getLinkStyle(datum.style);
+      });
 
     const link_merge = link.merge(link_enter);
 

src/app/cartography/widgets/links/style-translator.ts

@@ -0,0 +1,16 @@
+import { LinkStyle } from '../../../models/link-style';
+
+export class StyleTranslator {
+    static getLinkStyle(linkStyle: LinkStyle) {
+        if (linkStyle.type == 1) {
+            return `10, 10`
+        }
+        if (linkStyle.type == 2) {
+            return `${linkStyle.width}, ${linkStyle.width}`
+        }
+        if (linkStyle.type == 3) {
+            return `20, 10, ${linkStyle.width}, ${linkStyle.width}, ${linkStyle.width}, 10`
+        }
+        return `0, 0`
+    }
+}

src/app/cartography/widgets/node.spec.ts

@@ -31,19 +31,21 @@ describe('NodesWidget', () => {
       const drew = svg.canvas.selectAll<SVGGElement, MapNode>('g.node');
       const drewNode = drew.nodes()[0];
 
-      drewNode.dispatchEvent(
-        new MouseEvent('mousedown', {
-          clientX: 150,
-          clientY: 250,
-          relatedTarget: drewNode,
-          screenY: 1024,
-          screenX: 1024,
-          view: window,
-        })
-      );
+      if (drewNode != undefined && drewNode != null) {
+        drewNode.dispatchEvent(
+          new MouseEvent('mousedown', {
+            clientX: 150,
+            clientY: 250,
+            relatedTarget: drewNode,
+            screenY: 1024,
+            screenX: 1024,
+            view: window,
+          })
+        );
 
-      window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300, clientY: 300 }));
-      window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300, clientY: 300, view: window }));
+        window.dispatchEvent(new MouseEvent('mousemove', { clientX: 300, clientY: 300 }));
+        window.dispatchEvent(new MouseEvent('mouseup', { clientX: 300, clientY: 300, view: window }));
+      }
     };
 
     beforeEach(() => {
@@ -54,6 +56,9 @@ describe('NodesWidget', () => {
       node.height = 100;
       node.label = new MapLabel();
     });
+    it('draggable behaviour', () => {
+      tryToDrag()
+    })
 
     // it('should be draggable when enabled', () => {
     //   widget.setDraggingEnabled(true);

src/app/cartography/widgets/node.ts

@@ -4,7 +4,6 @@ import { MapSettingsService } from '../../services/mapsettings.service';
 import { ClickedDataEvent } from '../events/event-source';
 import { NodeClicked, NodeContextMenu } from '../events/nodes';
 import { NodesEventSource } from '../events/nodes-event-source';
-import { GraphDataManager } from '../managers/graph-data-manager';
 import { SelectionManager } from '../managers/selection-manager';
 import { MapNode } from '../models/map/map-node';
 import { SVGSelection } from '../models/types';
@@ -18,7 +17,6 @@ export class NodeWidget implements Widget {
   public onNodeClicked = new EventEmitter<NodeClicked>();
 
   constructor(
-    private graphDataManager: GraphDataManager,
     private selectionManager: SelectionManager,
     private labelWidget: LabelWidget,
     private nodesEventSource: NodesEventSource,

src/app/cartography/widgets/nodes.spec.ts

@@ -14,8 +14,12 @@ describe('NodesWidget', () => {
     nodeWidget = instance(mock(NodeWidget));
     widget = new NodesWidget(nodeWidget, new MapSettingsManager());
   });
+  it('draggable behaviour', () => {
+    
+  })
 
   afterEach(() => {
     svg.destroy();
   });
+  
 });

src/app/common/error-handlers/toaster-error-handler.spec.ts

@@ -18,8 +18,8 @@ describe('ToasterErrorHandler', () => {
   let toasterService: MockedToasterService;
   let settingsService: SettingsService;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       providers: [
         { provide: ToasterService, useClass: MockedToasterService },
         { provide: SettingsService},

src/app/common/progress-dialog/progress-dialog.component.spec.ts

@@ -1,15 +1,31 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { ProgressDialogComponent } from './progress-dialog.component';
 
 describe('ProgressDialogComponent', () => {
   let component: ProgressDialogComponent;
   let fixture: ComponentFixture<ProgressDialogComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       declarations: [ProgressDialogComponent],
+      imports:[
+        MatIconModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatCheckboxModule,
+        MatDialogModule
+      ],
+      providers:[
+        { provide: MatDialogRef, useValue: {}},
+        { provide: MAT_DIALOG_DATA, useValue: {}},
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProgressDialogComponent);
@@ -17,7 +33,7 @@ describe('ProgressDialogComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/common/progress-dialog/progress-dialog.service.spec.ts

@@ -1,14 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { inject, TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MockedProgressService } from 'app/components/project-map/project-map.component.spec';
 import { ProgressDialogService } from './progress-dialog.service';
 
 describe('ProgressDialogService', () => {
+  let  mockedProgressService : MockedProgressService
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [ProgressDialogService],
+      // imports:[ProgressDialogService],
+      providers: [
+        { provide: MatDialog, useValue: {} },
+        { provide: ProgressDialogService, useClass:MockedProgressService },
+      ],
     });
   });
 
-  // it('should be created', inject([ProgressDialogService], (service: ProgressDialogService) => {
-  //   expect(service).toBeTruthy();
-  // }));
+  it('should be created', inject([ProgressDialogService], (service: ProgressDialogService) => {
+    expect(service).toBeTruthy();
+  }));
 });

src/app/common/progress/progress.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Router } from '@angular/router';
@@ -23,8 +23,8 @@ describe('ProgressComponent', () => {
   let progressService: ProgressService;
   let router: MockedRouter = new MockedRouter();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       imports: [RouterTestingModule, MatProgressSpinnerModule, MatIconModule],
       providers: [ProgressService, { provide: Router, useValue: router }],
       declarations: [ProgressComponent],
@@ -32,7 +32,7 @@ describe('ProgressComponent', () => {
 
     progressService = TestBed.get(ProgressService);
     router = TestBed.get(Router);
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProgressComponent);

src/app/common/uploading-processbar/upload-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UploadServiceService } from './upload-service.service';
+
+describe('UploadServiceService', () => {
+  let service: UploadServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UploadServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/common/uploading-processbar/upload-service.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UploadServiceService {
+
+  private countSource = new Subject();
+  currentCount = this.countSource.asObservable();
+  private cancelItem = new Subject();
+  currentCancelItemDetails = this.cancelItem.asObservable();
+
+  constructor() { }
+
+  processBarCount(processCount:number) {
+    this.countSource.next(processCount)
+  }
+  cancelFileUploading(isCancel){
+    this.cancelItem.next(isCancel)
+  }
+  
+}

src/app/common/uploading-processbar/uploading-processbar.component.html

@@ -0,0 +1,10 @@
+    <p>{{upload_file_type}} Uploading please wait .... {{uploadProgress}}%</p>
+    <div class="row proccessBar-row ">
+        <div class="col-md-9 proccessBar-col">
+            <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">
+            </mat-progress-bar>
+        </div>
+        <div class="col-md-3 proccessBar-col">
+            <button mat-button color="primary" (click)="cancelItem()" class="file-button">Cancel</button>
+        </div>
+    </div>

src/app/common/uploading-processbar/uploading-processbar.component.scss

@@ -0,0 +1,11 @@
+
+.mat-snack-bar-container{
+   min-width: 450px !important;
+}
+
+.proccessBar-row{
+    display: flex;
+}
+.proccessBar-col{
+    margin: auto;
+}

src/app/common/uploading-processbar/uploading-processbar.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBarModule, MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { UploadServiceService } from './upload-service.service';
+
+import { UploadingProcessbarComponent } from './uploading-processbar.component';
+
+describe('UploadingProcessbarComponent', () => {
+  let component: UploadingProcessbarComponent;
+  let fixture: ComponentFixture<UploadingProcessbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UploadingProcessbarComponent],
+      imports:[MatSnackBarModule],
+      providers: [
+        { provide: MAT_SNACK_BAR_DATA, useValue: {} },
+        { provide: MatSnackBarRef, useValue: {} },
+        { provide:  UploadServiceService, useClass: UploadServiceService },
+
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UploadingProcessbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/uploading-processbar/uploading-processbar.component.ts

@@ -0,0 +1,45 @@
+import { Component, Inject, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { Subscription } from 'rxjs';
+import { UploadServiceService } from './upload-service.service';
+
+@Component({
+  selector: 'app-uploading-processbar',
+  templateUrl: './uploading-processbar.component.html',
+  styleUrls: ['./uploading-processbar.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+
+})
+export class UploadingProcessbarComponent implements OnInit {
+  uploadProgress: number = 0
+  subscription: Subscription;
+  upload_file_type:string
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data,
+    private _snackRef: MatSnackBarRef<UploadingProcessbarComponent>,
+    private _US: UploadServiceService
+  ) { }
+
+  ngOnInit() {
+   this.upload_file_type =  this.data.upload_file_type 
+    this.subscription = this._US.currentCount.subscribe((count:number) => {
+      this.uploadProgress = count;
+      if (this.uploadProgress === 100 || this.uploadProgress == null ) {
+        this.dismiss()
+      }
+    })
+  }
+
+
+
+  dismiss() {
+    this._snackRef.dismiss();
+  }
+  cancelItem() {
+    this._US.cancelFileUploading(true)
+  }
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+}

src/app/components/acl-management/acl-management.component.html

@@ -0,0 +1,98 @@
+<div class="content" *ngIf="isReady; else loading">
+  <div class="default-header">
+    <div class="row">
+      <h1 class="col">Access Control List (ACL)</h1>
+      <button class="col" mat-raised-button color="primary" (click)="deleteMultiple()" class="add-ace-button" [disabled]="selection.selected.length == 0">
+        Delete selected ACEs
+      </button>
+      <button class="col" mat-raised-button color="primary" (click)="addACE()" class="add-ace-button">
+        Add ACE
+      </button>
+    </div>
+  </div>
+
+  <form>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Search by path, user/group or role" [(ngModel)]="searchText"
+             [ngModelOptions]="{ standalone: true }"/>
+    </mat-form-field>
+  </form>
+
+  <div class="default-content">
+    <table mat-table [dataSource]="dataSource | aceFilter: searchText:endpoints " class="mat-elevation-z8" matSort #acesSort="matSort">
+
+      <ng-container matColumnDef="select" >
+        <th mat-header-cell *matHeaderCellDef class="small-col">
+          <mat-checkbox (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row" class="small-col">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null"
+                        [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="path">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
+        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.path)}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="user/group">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>User/Group</th>
+        <td mat-cell *matCellDef="let element">
+          <div *ngIf="element.ace_type === 'user' else groupId">{{getNameByUuidFromEndpoint(element.user_id)}}</div>
+          <ng-template #groupId>{{getNameByUuidFromEndpoint(element.group_id)}}</ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="role">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
+        <td mat-cell *matCellDef="let element"> {{getNameByUuidFromEndpoint(element.role_id)}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="propagate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Propagate</th>
+        <td mat-cell *matCellDef="let element"> {{element.propagate}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="allowed">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Allowed</th>
+        <td mat-cell *matCellDef="let element"> {{element.allowed}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="created_at">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
+        <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="updated_at">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Last update</th>
+        <td mat-cell *matCellDef="let element"> {{element.updated_at}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete(element)"><mat-icon>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-paginator #acesPaginator="matPaginator"
+                   [pageSizeOptions]="[5, 10, 20]"
+                   showFirstLastButtons
+                   aria-label="Select page">
+    </mat-paginator>
+  </div>
+</div>
+<ng-template #loading>
+  <div>
+    <mat-spinner class="loader"></mat-spinner>
+  </div>
+</ng-template>

src/app/components/acl-management/acl-management.component.scss

@@ -0,0 +1,26 @@
+table {
+  width: 100%;
+}
+
+.full-width {
+  width: 940px;
+  margin-left: -470px;
+  left: 50%;
+}
+
+.add-ace-button {
+  height: 40px;
+  width: 160px;
+  margin: 20px;
+}
+
+.loader {
+  position: absolute;
+  margin: auto;
+  height: 175px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  width: 175px;
+}