menu, disable management entry if no server was selected

src/app/components/management/management.component.ts

@@ -1,3 +1,15 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
 import { Component, OnInit } from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {Server} from "@models/server";

src/app/layouts/default-layout/default-layout.component.html

@@ -23,7 +23,9 @@
         <mat-icon>settings</mat-icon>
         <span>Settings</span>
       </button>
-      <button mat-menu-item (click)="goToManagement()">
+      <button mat-menu-item
+              [disabled]="!serverId"
+              [routerLink]="['server', serverId, 'management', 'users']">
         <mat-icon>groups</mat-icon>
         <span>Management</span>
       </button>
@@ -35,15 +37,18 @@
         <mat-icon>help</mat-icon>
         <span>Help</span>
       </button>
-      <button mat-menu-item (click)="goToUserInfo()">
+      <button
+        [disabled]="!serverId"
+        [routerLink]="['/server', serverId, 'loggeduser']"
+        mat-menu-item>
         <mat-icon>person</mat-icon>
         <span>User info</span>
       </button>
-      <button mat-menu-item (click)="goToDocumentation()">
+      <button [disabled]="!serverId" mat-menu-item (click)="goToDocumentation()">
         <mat-icon>person</mat-icon>
         <span>API documentation</span>
       </button>
-      <button mat-menu-item (click)="logout()">
+      <button mat-menu-item [disabled]="!serverId" (click)="logout()">
         <mat-icon>highlight_off</mat-icon>
         <span>Logout</span>
       </button>

src/app/layouts/default-layout/default-layout.component.ts

@@ -1,15 +1,15 @@
-import { Component, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
-import { NavigationEnd } from '@angular/router';
+import {NavigationEnd} from '@angular/router';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
-import { ServerService } from '../../services/server.service';
+import {ServerService} from '../../services/server.service';
-import { ElectronService } from 'ngx-electron';
+import {ElectronService} from 'ngx-electron';
-import { Subscription } from 'rxjs';
+import {Subscription} from 'rxjs';
-import { ProgressService } from '../../common/progress/progress.service';
+import {ProgressService} from '../../common/progress/progress.service';
-import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
+import {RecentlyOpenedProjectService} from '../../services/recentlyOpenedProject.service';
-import { ServerManagementService } from '../../services/server-management.service';
+import {ServerManagementService} from '../../services/server-management.service';
-import { ToasterService } from '../../services/toaster.service';
+import {ToasterService} from '../../services/toaster.service';
-import { version } from './../../version';
+import {version} from './../../version';
-import { Server } from '../../models/server';
+import {Server} from '../../models/server';
 
 @Component({
   selector: 'app-default-layout',
@@ -29,6 +29,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   recentlyOpenedServerId: string;
   recentlyOpenedProjectId: string;
   serverIdProjectList: string;
+  serverId: string | undefined | null;
 
   constructor(
     private electronService: ElectronService,
@@ -37,8 +38,15 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     private toasterService: ToasterService,
     private progressService: ProgressService,
     private router: Router,
+    private route: ActivatedRoute,
     private serverService: ServerService
-  ) {}
+  ) {
+    this.router.events.subscribe((data) => {
+      if (data instanceof NavigationEnd) {
+        this.serverId = this.route.children[0].snapshot.paramMap.get("server_id");
+      }
+    });
+  }
 
   ngOnInit() {
     this.checkIfUserIsLoginPage();
@@ -68,16 +76,8 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.shouldStopServersOnClosing = this.electronService.isElectronApp;
   }
 
-  goToUserInfo() {
-    let serverId = this.router.url.split("/server/")[1].split("/")[0];
-    this.serverService.get(+serverId).then((server: Server) => {
-      this.router.navigate(['/server', server.id, 'loggeduser']);
-    });
-  }
-
   goToDocumentation() {
-    let serverId = this.router.url.split("/server/")[1].split("/")[0];
+    this.serverService.get(+this.serverId).then((server: Server) => {
-    this.serverService.get(+serverId).then((server: Server) => {
       (window as any).open(`http://${server.host}:${server.port}/docs`);
     });
   }
@@ -91,8 +91,7 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
   }
 
   logout() {
-    let serverId = this.router.url.split("/server/")[1].split("/")[0];
+    this.serverService.get(+this.serverId).then((server: Server) => {
-    this.serverService.get(+serverId).then((server: Server) => {
       server.authToken = null;
       this.serverService.update(server).then(val => this.router.navigate(['/server', server.id, 'login']));
     });
@@ -129,11 +128,4 @@ export class DefaultLayoutComponent implements OnInit, OnDestroy {
     this.serverStatusSubscription.unsubscribe();
     this.routeSubscription.unsubscribe();
   }
-
-  goToManagement() {
-    let serverId = this.router.url.split("/server/")[1].split("/")[0];
-    this.serverService.get(+serverId).then((server: Server) => {
-      this.router.navigate(['/server', server.id, 'management', 'users']);
-    });
-  }
 }