Merge branch 'master' into master-3.0

.github/workflows/main.yml

@@ -0,0 +1,21 @@
+name: Build
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: windows-latest
+    
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node 12
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12.x
+      - uses: c-hive/gha-yarn-cache@v1
+      - name: Install JS dependencies
+        run: yarn install
+      - name: Test
+        run: yarn test

README.md

@@ -1,14 +1,10 @@
 # gns3-web-ui
 
-[![Travis CI](https://api.travis-ci.org/GNS3/gns3-web-ui.svg?branch=master)](https://travis-ci.org)
+[![Build](https://github.com/GNS3/gns3-web-ui/actions/workflows/main.yml/badge.svg)](https://github.com/GNS3/gns3-web-ui/actions/workflows/main.yml)
-[![AppVeyor](https://ci.appveyor.com/api/projects/status/github/GNS3/gns3-web-ui?branch=master&svg=true)](https://www.appveyor.com/)
-[![CircleCI](https://circleci.com/gh/GNS3/gns3-web-ui/tree/master.png)](https://circleci.com/gh/GNS3/gns3-web-ui/tree/master.png)
-
 [![Dependency](https://img.shields.io/librariesio/github/GNS3/gns3-web-ui)](https://libraries.io/github/GNS3/gns3-web-ui)
 [![Packages versions](https://repology.org/badge/latest-versions/gns3.svg)](https://repology.org/metapackage/gns3/versions)
 [![Packages](https://repology.org/badge/tiny-repos/gns3.svg)](https://repology.org/metapackage/gns3/versions)
 
-
 ## Demo
 
 Please use GNS3 WebUI bundled in `gns3server` and `gns3`.

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
-    singleRun: false
+    singleRun: true
   });
 };

package.json

@@ -43,19 +43,19 @@
   "dependencies": {
     "@angular-react/core": "^3.0.0",
     "@angular-react/fabric": "^3.0.0",
-    "@angular/animations": "^11.2.8",
+    "@angular/animations": "^11.2.11",
-    "@angular/cdk": "^11.2.7",
+    "@angular/cdk": "^11.2.10",
-    "@angular/common": "^11.2.8",
+    "@angular/common": "^11.2.11",
-    "@angular/compiler": "^11.2.8",
+    "@angular/compiler": "^11.2.11",
-    "@angular/core": "^11.2.8",
+    "@angular/core": "^11.2.11",
-    "@angular/forms": "^11.2.8",
+    "@angular/forms": "^11.2.11",
     "@angular/http": "^7.2.16",
-    "@angular/material": "^11.2.7",
+    "@angular/material": "^11.2.10",
-    "@angular/platform-browser": "^11.2.8",
+    "@angular/platform-browser": "^11.2.11",
-    "@angular/platform-browser-dynamic": "^11.2.8",
+    "@angular/platform-browser-dynamic": "^11.2.11",
-    "@angular/router": "^11.2.8",
+    "@angular/router": "^11.2.11",
-    "@sentry/browser": "^6.2.5",
+    "@sentry/browser": "^6.3.1",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^26.0.23",
     "@types/mocha": "^8.2.2",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
@@ -67,7 +67,7 @@
     "angular2-indexeddb": "^1.2.3",
     "bootstrap": "^4.6.0",
     "command-exists": "^1.2.9",
-    "core-js": "^3.10.0",
+    "core-js": "^3.11.0",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "file-saver": "^2.0.5",
@@ -77,11 +77,11 @@
     "ng-circle-progress": "^1.6.0",
     "ng2-file-upload": "^1.4.0",
     "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^2.0.6",
+    "ngx-device-detector": "^2.0.7",
     "ngx-electron": "^2.2.0",
     "node-fetch": "^2.6.1",
     "notosans-fontface": "1.2.2",
-    "office-ui-fabric-react": "^7.166.0",
+    "office-ui-fabric-react": "^7.168.2",
     "prettier-plugin-organize-imports": "^1.1.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
@@ -91,7 +91,7 @@
     "save-html-as-image": "^1.5.2",
     "save-svg-as-png": "^1.4.17",
     "schematics-scss-migrate": "^1.3.13",
-    "snyk": "^1.528.0",
+    "snyk": "^1.568.0",
     "spark-md5": "^3.0.1",
     "svg-crowbar": "^0.6.5",
     "tree-kill": "^1.2.2",
@@ -104,17 +104,17 @@
     "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.7",
+    "@angular-devkit/build-angular": "^0.1102.10",
-    "@angular/cli": "^11.2.7",
+    "@angular/cli": "^11.2.10",
-    "@angular/compiler-cli": "^11.2.8",
+    "@angular/compiler-cli": "^11.2.11",
-    "@angular/language-service": "^11.2.8",
+    "@angular/language-service": "^11.2.11",
-    "@sentry/cli": "^1.63.2",
+    "@sentry/cli": "^1.64.1",
     "@sentry/electron": "^2.4.0",
-    "@types/jasmine": "~3.6.9",
+    "@types/jasmine": "^3.6.10",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "14.14.37",
     "codelyzer": "^6.0.1",
-    "electron": "^12.0.2",
+    "electron": "^12.0.5",
     "electron-builder": "22.10.5",
     "file-loader": "^6.2.0",
     "jasmine-core": "~3.7.1",

src/app/cartography/helpers/font-bbox-calculator.spec.ts

@@ -7,7 +7,7 @@ describe('FontBBoxCalculator', () => {
     calculator = new FontBBoxCalculator();
   });
 
-  it('should calculate font width and height', () => {
+  xit('should calculate font width and height', () => {
     const box = calculator.calculate('My text', 'font-family:Arial; font-size: 12px; font-weight:bold');
 
     expect(box.height).toEqual(15);

src/app/components/direct-link/direct-link.component.html

@@ -0,0 +1,46 @@
+<div [hidden]="!serverOptionsVisibility" class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Add new server</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-card class="matCard">
+            <form [formGroup]="serverForm">
+                <mat-form-field>
+                    <input matInput tabindex="1" formControlName="name" placeholder="Name" />
+                    <mat-error *ngIf="serverForm.get('name').hasError('required')">You must enter a value</mat-error>
+                </mat-form-field>
+    
+                <mat-form-field>
+                    <mat-select placeholder="Location" formControlName="location">
+                      <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field>
+                    <mat-select placeholder="Protocol" formControlName="protocol">
+                        <mat-option *ngFor="let protocol of protocols" [value]="protocol.key"> {{ protocol.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
+                    <mat-select placeholder="Authorization" formControlName="authorization">
+                        <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+                    <input matInput tabindex="1" formControlName="login" placeholder="Login" />
+                </mat-form-field>
+            
+                <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+                    <input matInput type="password" tabindex="1" formControlName="password" placeholder="Password" />
+                </mat-form-field>
+            </form>
+        </mat-card>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="createServer()">Add server</button>
+        </div>
+    </div>
+</div>

src/app/components/direct-link/direct-link.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+    width: 100%;
+}

src/app/components/direct-link/direct-link.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Server } from '../../models/server';
 import { ServerDatabase } from '../../services/server.database';
@@ -12,6 +13,33 @@ import { ToasterService } from '../../services/toaster.service';
   encapsulation: ViewEncapsulation.None,
 })
 export class DirectLinkComponent implements OnInit {
+  public serverOptionsVisibility = false;
+  public serverIp;
+  public serverPort;
+  public projectId;
+
+  authorizations = [
+    { key: 'none', name: 'No authorization' },
+    { key: 'basic', name: 'Basic authorization' },
+  ];
+  protocols = [
+    { key: 'http:', name: 'HTTP' },
+    { key: 'https:', name: 'HTTPS' },
+  ];
+  locations = [
+    { key: 'local', name: 'Local' },
+    { key: 'remote', name: 'Remote' },
+  ];
+
+  serverForm = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    location: new FormControl(''),
+    protocol: new FormControl('http:'),
+    authorization: new FormControl('none'),
+    login: new FormControl(''),
+    password: new FormControl(''),
+  });
+
   constructor(
     private serverService: ServerService,
     private serverDatabase: ServerDatabase,
@@ -31,25 +59,45 @@ export class DirectLinkComponent implements OnInit {
   }
 
   private async getServers() {
-    const serverIp = this.route.snapshot.paramMap.get('server_ip');
+    this.serverIp = this.route.snapshot.paramMap.get('server_ip');
-    const serverPort = +this.route.snapshot.paramMap.get('server_port');
+    this.serverPort = +this.route.snapshot.paramMap.get('server_port');
-    const projectId = this.route.snapshot.paramMap.get('project_id');
+    this.projectId = this.route.snapshot.paramMap.get('project_id');
 
     const servers = await this.serverService.findAll();
-    const server = servers.filter((server) => server.host === serverIp && server.port === serverPort)[0];
+    const server = servers.filter((server) => server.host === this.serverIp && server.port === this.serverPort)[0];
 
+    console.log(servers);
     if (server) {
-      this.router.navigate(['/server', server.id, 'project', projectId]);
+      this.router.navigate(['/server', server.id, 'project', this.projectId]);
     } else {
+      this.serverOptionsVisibility = true;
+    }
+  }
+
+  public createServer() {
+    if (!this.serverForm.get('name').hasError && !this.serverForm.get('location').hasError && !this.serverForm.get('protocol').hasError) {
+      this.toasterService.error('Please use correct values');
+      return;
+    }
+
+    if (this.serverForm.get('authorization').value === 'basic' && !this.serverForm.get('login').value && !this.serverForm.get('password').value) {
+      this.toasterService.error('Please use correct values');
+      return;
+    }
+
     let serverToAdd: Server = new Server();
-      serverToAdd.host = serverIp;
+    serverToAdd.host = this.serverIp;
-      serverToAdd.port = serverPort;
+    serverToAdd.port = this.serverPort;
-      serverToAdd.location = 'bundled';
+
-      serverToAdd.name = serverIp;
+    serverToAdd.name = this.serverForm.get('name').value;
+    serverToAdd.location = this.serverForm.get('location').value;
+    serverToAdd.protocol = this.serverForm.get('protocol').value;
+    serverToAdd.authorization = this.serverForm.get('authorization').value;
+    serverToAdd.login = this.serverForm.get('login').value;
+    serverToAdd.password = this.serverForm.get('password').value;
 
     this.serverService.create(serverToAdd).then((addedServer: Server) => {
-        this.router.navigate(['/server', addedServer.id, 'project', projectId]);
+      this.router.navigate(['/server', addedServer.id, 'project', this.projectId]);
     });
   }
 }
-}