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.24",
+  "version": "2.2.26",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -41,26 +41,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.2.2",
-    "@angular/cdk": "^12.2.2",
-    "@angular/common": "^12.2.2",
-    "@angular/compiler": "^12.2.2",
-    "@angular/core": "^12.2.2",
-    "@angular/forms": "^12.2.2",
-    "@angular/material": "^12.2.2",
-    "@angular/platform-browser": "^12.2.2",
-    "@angular/platform-browser-dynamic": "^12.2.2",
-    "@angular/router": "^12.2.2",
-    "@sentry/browser": "^6.11.0",
-    "@types/jest": "^27.0.1",
+    "@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.19",
+    "@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.1.0",
+    "bootstrap": "^5.1.2",
     "command-exists": "^1.2.9",
-    "core-js": "^3.16.2",
+    "core-js": "^3.18.2",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "ini": "^2.0.0",
@@ -71,34 +71,34 @@
     "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",
+    "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.687.0",
-    "spark-md5": "^3.0.1",
+    "snyk": "^1.731.0",
+    "spark-md5": "^3.0.2",
     "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
     "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.1.1",
+    "yargs": "^17.2.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.2",
-    "@angular/cli": "^12.2.2",
-    "@angular/compiler-cli": "^12.2.2",
-    "@angular/language-service": "^12.2.2",
-    "@sentry/cli": "^1.68.0",
-    "@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.7.1",
+    "@types/node": "16.10.3",
     "codelyzer": "^6.0.2",
     "electron": "^13.2.2",
     "electron-builder": "^22.9.1",
@@ -114,7 +114,7 @@
     "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",
@@ -123,7 +123,7 @@
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "4.3.5",
-    "webpack": "5.51.1",
+    "webpack": "5.57.1",
     "yarn-upgrade-all": "^0.5.4"
   },
   "greenkeeper": {

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/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() {