Release 2.2.26

Bump nth-check from 2.0.0 to 2.0.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.23",
+  "version": "2.2.26",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -41,26 +41,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.1.4",
-    "@angular/cdk": "^12.1.4",
-    "@angular/common": "^12.1.4",
-    "@angular/compiler": "^12.1.4",
-    "@angular/core": "^12.1.4",
-    "@angular/forms": "^12.1.4",
-    "@angular/material": "^12.1.4",
-    "@angular/platform-browser": "^12.1.4",
-    "@angular/platform-browser-dynamic": "^12.1.4",
-    "@angular/router": "^12.1.4",
-    "@sentry/browser": "^6.10.0",
-    "@types/jest": "^26.0.24",
+    "@angular/animations": "^12.2.8",
+    "@angular/cdk": "^12.2.8",
+    "@angular/common": "^12.2.8",
+    "@angular/compiler": "^12.2.8",
+    "@angular/core": "^12.2.8",
+    "@angular/forms": "^12.2.8",
+    "@angular/material": "^12.2.8",
+    "@angular/platform-browser": "^12.2.8",
+    "@angular/platform-browser-dynamic": "^12.2.8",
+    "@angular/router": "^12.2.8",
+    "@sentry/browser": "^6.13.2",
+    "@types/jest": "^27.0.2",
     "@types/mocha": "^9.0.0",
-    "@types/react": "^17.0.15",
+    "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
-    "angular-draggable-droppable": "^4.6.0",
+    "angular-draggable-droppable": "^5.0.0",
     "angular-resizable-element": "^3.4.0",
-    "bootstrap": "^5.0.2",
+    "bootstrap": "^5.1.2",
     "command-exists": "^1.2.9",
-    "core-js": "^3.16.0",
+    "core-js": "^3.18.2",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "ini": "^2.0.0",
@@ -71,39 +71,39 @@
     "ngx-childprocess": "^0.0.6",
     "ngx-device-detector": "^2.1.1",
     "ngx-electron": "^2.2.0",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.0.0",
     "notosans-fontface": "1.2.2",
-    "prettier-plugin-organize-imports": "^2.3.3",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
+    "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.671.0",
-    "spark-md5": "^3.0.1",
-    "svg-crowbar": "^0.6.5",
+    "snyk": "^1.731.0",
+    "spark-md5": "^3.0.2",
+    "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.1",
     "typeface-roboto": "^1.1.13",
-    "xterm": "^4.13.0",
+    "xterm": "^4.14.1",
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
-    "yargs": "^17.0.1",
+    "yargs": "^17.2.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.1.4",
-    "@angular/cli": "^12.1.4",
-    "@angular/compiler-cli": "^12.1.4",
-    "@angular/language-service": "^12.1.4",
-    "@sentry/cli": "^1.67.2",
-    "@sentry/electron": "^2.5.1",
-    "@types/jasmine": "^3.8.2",
+    "@angular-devkit/build-angular": "^12.2.8",
+    "@angular/cli": "^12.2.8",
+    "@angular/compiler-cli": "^12.2.8",
+    "@angular/language-service": "^12.2.8",
+    "@sentry/cli": "^1.69.1",
+    "@sentry/electron": "^2.5.4",
+    "@types/jasmine": "^3.9.1",
     "@types/jasminewd2": "^2.0.10",
-    "@types/node": "16.4.7",
+    "@types/node": "16.10.3",
     "codelyzer": "^6.0.2",
-    "electron": "^13.1.7",
-    "electron-builder": "22.11.7",
+    "electron": "^13.2.2",
+    "electron-builder": "^22.9.1",
     "file-loader": "^6.2.0",
-    "jasmine-core": "~3.8.0",
+    "jasmine-core": "~3.9.0",
     "jasmine-spec-reporter": "~7.0.0",
     "jquery": "^3.6.0",
     "karma": "^6.3.4",
@@ -114,16 +114,16 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "license-checker": "^25.0.1",
     "popper.js": "^1.16.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "protractor": "^7.0.0",
     "replace": "^1.2.1",
     "rxjs-tslint": "^0.1.8",
     "ts-mockito": "^2.6.1",
-    "ts-node": "~10.1.0",
+    "ts-node": "~10.2.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "4.3.5",
-    "webpack": "5.47.1",
+    "webpack": "5.57.1",
     "yarn-upgrade-all": "^0.5.4"
   },
   "greenkeeper": {
@@ -132,4 +132,4 @@
     ]
   },
   "snyk": true
-}
+}

src/ReleaseNotes.txt

@@ -1,6 +1,9 @@
 GNS3 WebUI is web implementation of user interface for GNS3 software.
 
-Current version: 2.2.22
+Current version: 2.2.24
+
+Bug Fixes & enhancements
+- security fixes
 
 Current version: 2020.4.0-beta.1
 

src/app/components/projects/projects.component.html

@@ -2,6 +2,7 @@
   <div class="default-header">
     <div class="row">
       <h1 class="col">Projects</h1>
+      <button class="col" mat-raised-button (click)="goToSystemStatus()" class="add-button">Go to system status</button>
       <button class="col" mat-raised-button (click)="goToPreferences()" class="add-button">Go to preferences</button>
       <button class="col" mat-raised-button color="primary" (click)="addBlankProject()" class="add-button">
         Add blank project

src/app/components/projects/projects.component.ts

@@ -89,6 +89,12 @@ export class ProjectsComponent implements OnInit {
       .catch((error) => this.toasterService.error('Cannot navigate to the preferences'));
   }
 
+  goToSystemStatus() {
+    this.router
+      .navigate(['/server', this.server.id, 'systemstatus'])
+      .catch((error) => this.toasterService.error('Cannot navigate to the system status'));
+  }
+
   refresh() {
     this.projectService.list(this.server).subscribe(
       (projects: Project[]) => {

src/app/components/settings/settings.component.html

@@ -11,6 +11,7 @@
 
           <div>
             <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br />
+            <mat-checkbox [(ngModel)]="settings.anonymous_statistics">Send anonymous usage statistics</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="openConsolesInWidget">Open consoles in the widget instead of in new tabs after clicking start consoles for all nodes</mat-checkbox>
           </div>

src/app/components/settings/settings.component.spec.ts

@@ -69,6 +69,7 @@ describe('SettingsComponent', () => {
     const settings = {
       crash_reports: true,
       experimental_features: true,
+      anonymous_statistics: true,
       angular_map: false,
       console_command: '',
     };

src/app/components/template/template.component.html

@@ -45,25 +45,25 @@
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 1].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 2].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 3].name }}</div>
           </span>
         </span>
       </mat-list-item>

src/app/components/template/template.component.scss

@@ -49,6 +49,11 @@
   word-wrap: break-word;
 }
 
+.lightTemplateText {
+  word-wrap: break-word;
+  color: black;
+}
+
 .templateIcon {
   width: 80px !important;
   padding: 10px;

src/app/components/template/template.component.ts

@@ -1,5 +1,7 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
 import { Project } from '../../models/project';
 import { Server } from '../../models/server';
@@ -18,7 +20,7 @@ export class TemplateComponent implements OnInit, OnDestroy {
   @Input() server: Server;
   @Input() project: Project;
   @Output() onNodeCreation = new EventEmitter<any>();
-
+  overlay;
   templates: Template[] = [];
   filteredTemplates: Template[] = [];
   searchText: string = '';
@@ -45,13 +47,19 @@ export class TemplateComponent implements OnInit, OnDestroy {
   startY: number;
 
   private subscription: Subscription;
+  private themeSubscription: Subscription;
+  private isLightThemeEnabled: boolean = false;
 
   constructor(
     private dialog: MatDialog,
     private templateService: TemplateService,
     private scaleService: MapScaleService,
-    private symbolService: SymbolService
-  ) {}
+    private symbolService: SymbolService,
+    private themeService: ThemeService,
+    private overlayContainer: OverlayContainer, 
+  ) {
+    this.overlay = overlayContainer.getContainerElement();
+  }
 
   ngOnInit() {
     this.subscription = this.templateService.newTemplateCreated.subscribe((template: Template) => {
@@ -64,6 +72,23 @@ export class TemplateComponent implements OnInit, OnDestroy {
       this.templates = listOfTemplates;
     });
     this.symbolService.list(this.server);
+    if (this.themeService.getActualTheme()  === 'light') this.isLightThemeEnabled = true;
+    this.themeSubscription = this.themeService.themeChanged.subscribe((value: string) => {
+      if (value === 'light-theme') this.isLightThemeEnabled = true;
+      this.toggleTheme();
+    });
+  }
+
+  toggleTheme(): void {
+    if (this.overlay.classList.contains("dark-theme")) {
+        this.overlay.classList.remove("dark-theme");
+        this.overlay.classList.add("light-theme");
+    } else if (this.overlay.classList.contains("light-theme")) {
+        this.overlay.classList.remove("light-theme");
+        this.overlay.classList.add("dark-theme");
+    } else {
+        this.overlay.classList.add("light-theme");
+    }
   }
 
   sortTemplates() {

src/app/services/google-analytics.service.ts

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { environment } from '../../environments/environment';
+import { SettingsService } from './settings.service';
 declare var gtag: Function;
 
 @Injectable()
 export class GoogleAnalyticsService {
-  constructor(router: Router) {
+  private settingsService: SettingsService;
+
+  constructor(router: Router, settingsService: SettingsService) {
     if (!environment.production) return;
     router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
+      if (settingsService.getStatisticsSettings() && event instanceof NavigationEnd) {
         gtag('set', 'page', event.url);
         gtag('send', 'pageview');
       }

src/app/services/settings.service.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs';
 export interface Settings {
   crash_reports: boolean;
   console_command: string;
+  anonymous_statistics: boolean;
 }
 
 @Injectable({
@@ -13,10 +14,12 @@ export class SettingsService {
   private settings: Settings = {
     crash_reports: true,
     console_command: undefined,
+    anonymous_statistics: true
   };
 
   private readonly reportsSettings: string = 'crash_reports';
   private readonly consoleSettings: string = 'console_command';
+  private readonly statisticsSettings: string = 'statistics_command';
 
   constructor() {
     if (this.getItem(this.reportsSettings))
@@ -24,6 +27,9 @@ export class SettingsService {
 
     if (this.getItem(this.consoleSettings))
       this.settings.console_command = this.getItem(this.consoleSettings);
+
+    if (this.getItem(this.statisticsSettings))
+      this.settings.anonymous_statistics = this.getItem(this.statisticsSettings) === 'true' ? true : false;
   }
 
   setReportsSettings(value: boolean) {
@@ -36,10 +42,24 @@ export class SettingsService {
     }
   }
 
+  setStatisticsSettings(value: boolean) {
+    this.settings.anonymous_statistics = value;
+    this.removeItem(this.statisticsSettings);
+    if (value) {
+      this.setItem(this.statisticsSettings, 'true');
+    } else {
+      this.setItem(this.statisticsSettings, 'false');
+    }
+  }
+
   getReportsSettings() {
     return this.getItem(this.reportsSettings) === 'true' ? true : false;
   }
 
+  getStatisticsSettings() {
+    return this.getItem(this.statisticsSettings) === 'true' ? true : false;
+  }
+
   setConsoleSettings(value: string) {
     this.settings.console_command = value;
     this.removeItem(this.consoleSettings);
@@ -70,5 +90,6 @@ export class SettingsService {
     this.settings = settings;
     this.setConsoleSettings(settings.console_command);
     this.setReportsSettings(settings.crash_reports);
+    this.setStatisticsSettings(settings.anonymous_statistics);
   }
 }