Improved way to load server for server dashboard #131

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "0.3.dev162-2",
+    "version": "0.3.dev162-3",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",

kdb-web/src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ import { AuthGuard } from './modules/shared/guards/auth/auth.guard';
 const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
   { path: 'dashboard', loadChildren: () => import('./modules/view/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },
-  { path: 'server', loadChildren: () => import('./modules/view/server/server.module').then(m => m.ServerModule), canActivate: [AuthGuard] },
+  { path: 'server/:id', loadChildren: () => import('./modules/view/server/server.module').then(m => m.ServerModule), canActivate: [AuthGuard] },
   { path: 'change-password', loadChildren: () => import('./modules/view/change-password/change-password.module').then(m => m.ChangePasswordModule), canActivate: [AuthGuard] },
   { path: 'user-settings', loadChildren: () => import('./modules/view/user-settings/user-settings.module').then(m => m.UserSettingsModule), canActivate: [AuthGuard] },
   { path: 'auth', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule) },

kdb-web/src/app/components/sidebar/sidebar.component.ts

@@ -1,11 +1,10 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
-import { MenuItem } from 'primeng/api';
-import { AuthRoles } from 'src/app/models/auth/auth-roles.enum';
-import { AuthService } from 'src/app/services/auth/auth.service';
-import { ServerService } from 'src/app/services/data/server.service';
-import { ThemeService } from 'src/app/services/theme/theme.service';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { LangChangeEvent, TranslateService } from "@ngx-translate/core";
+import { MenuItem } from "primeng/api";
+import { AuthRoles } from "src/app/models/auth/auth-roles.enum";
+import { AuthService } from "src/app/services/auth/auth.service";
+import { ThemeService } from "src/app/services/theme/theme.service";
 
 @Component({
   selector: 'app-sidebar',
@@ -24,7 +23,6 @@ export class SidebarComponent implements OnInit {
     private translateService: TranslateService,
     private themeService: ThemeService,
     private route: ActivatedRoute,
-    private serverService: ServerService
   ) {
     this.themeService.isSidebarOpen$.subscribe(value => {
       this.isSidebarOpen = value;
@@ -35,14 +33,14 @@ export class SidebarComponent implements OnInit {
       this.setMenu();
     });
 
-    this.serverService.server$.subscribe(server => {
-      if (!server) {
-        return;
-      }
-
-      this.serverId = server.id;
-      this.setMenu();
-    });
+    // this.serverService.server$.subscribe(server => {
+    //   if (!server) {
+    //     return;
+    //   }
+    //
+    //   this.serverId = server.id;
+    //   this.setMenu();
+    // });
   }
 
   ngOnInit(): void {
@@ -56,9 +54,9 @@ export class SidebarComponent implements OnInit {
         { label: this.isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' }
       ];
 
-      if (this.serverId) {
-        this.addServerMenu();
-      }
+      // if (this.serverId) {
+      //   this.addServerMenu();
+      // }
 
       if (hasPermission) {
         this.addAdminMenu();

kdb-web/src/app/models/graphql/queries.model.ts

@@ -1,5 +1,5 @@
 export class Queries {
-  static serverInfoQuery = `
+  static serversListQuery = `
     query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
       serverCount
       servers(filter: $filter, page: $page, sort: $sort) {
@@ -10,4 +10,15 @@ export class Queries {
       }
     }
   `;
+
+  static serversQuery = `
+    query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
+      servers(filter: $filter, page: $page, sort: $sort) {
+        id
+        name
+        iconURL
+        userCount
+      }
+    }
+  `;
 }

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts

@@ -6,7 +6,6 @@ import { LazyLoadEvent } from "primeng/api";
 import { debounceTime, throwError } from "rxjs";
 import { ConfirmationDialogService } from "src/app/services/confirmation-dialog/confirmation-dialog.service";
 import { DataService } from "src/app/services/data/data.service";
-import { ServerService } from "src/app/services/data/server.service";
 import { SpinnerService } from "src/app/services/spinner/spinner.service";
 import { ToastService } from "src/app/services/toast/toast.service";
 import { Server } from "../../../../../models/data/server.model";
@@ -50,7 +49,7 @@ export class DashboardComponent implements OnInit {
     private fb: FormBuilder,
     private translate: TranslateService,
     private router: Router,
-    private serverService: ServerService
+    // private serverService: ServerService
   ) {
   }
 
@@ -85,7 +84,7 @@ export class DashboardComponent implements OnInit {
 
   loadNextPage() {
     this.spinnerService.showSpinner();
-    this.data.query<Query>(Queries.serverInfoQuery,{
+    this.data.query<Query>(Queries.serversListQuery,{
       filter: this.filter,
       page: this.page,
       sort: this.sort,
@@ -122,8 +121,8 @@ export class DashboardComponent implements OnInit {
   }
 
   selectServer(server: Server) {
-    this.serverService.server$.next(server);
-    this.router.navigate(["/server"]);
+    // this.serverService.server$.next(server);
+    this.router.navigate(["/server", server.id]);
   }
 
 }

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html

@@ -1,5 +1,5 @@
 <h1>
-    {{'view.dashboard.header' | translate}}
+    {{'view.server.dashboard.header' | translate}}
 </h1>
 <div class="content-wrapper">
     <div class="content-header">

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts

@@ -2,13 +2,14 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Server } from "src/app/models/data/server.model";
 import { DataService } from "src/app/services/data/data.service";
-import { ServerService } from "src/app/services/data/server.service";
 import { SpinnerService } from "src/app/services/spinner/spinner.service";
+import { Queries } from "../../../../models/graphql/queries.model";
+import { Query } from "../../../../models/graphql/query.model";
 
 @Component({
-  selector: 'app-server-dashboard',
-  templateUrl: './server-dashboard.component.html',
-  styleUrls: ['./server-dashboard.component.scss']
+  selector: "app-server-dashboard",
+  templateUrl: "./server-dashboard.component.html",
+  styleUrls: ["./server-dashboard.component.scss"]
 })
 export class ServerDashboardComponent implements OnInit {
 
@@ -19,20 +20,22 @@ export class ServerDashboardComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private data: DataService,
-    private spinner: SpinnerService,
-    private serverService: ServerService
-  ) { }
+    private spinner: SpinnerService
+  ) {
+  }
 
   ngOnInit(): void {
     this.spinner.showSpinner();
-    if (!this.serverService.server$.value) {
-      this.spinner.hideSpinner();
-      this.router.navigate(['/dashboard']);
-      return;
+    this.data.query<Server>(Queries.serversQuery, {
+        filter: { id: this.route.snapshot.params["id"] }
+      },
+      function(data: Query) {
+        return data.servers.length > 0 ? data.servers[0] : null;
       }
-
-    this.server = this.serverService.server$.value;
+    ).subscribe(server => {
+      this.server = server;
       this.spinner.hideSpinner();
+    });
   }
 
 }

kdb-web/src/app/services/data/data.service.ts

@@ -27,13 +27,14 @@ export class DataService {
   //   );
   // }
 
-  public query<T>(query: string, variables?: Variables): Observable<T> {
+  public query<T>(query: string, variables?: Variables, f?: Function): Observable<T> {
     return this.http
       .post<{ data: T }>(`${this.appsettings.getApiURL()}/api/graphql`, {
         query: query,
         variables: variables
       })
-      .pipe(map((d) => d.data));
+      .pipe(map((d) => d.data))
+      .pipe(map((d) => f ? f(d) : d));
   }
 
 }

kdb-web/src/app/services/data/server.service.spec.ts

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

kdb-web/src/app/services/data/server.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
-import { Server } from "src/app/models/data/server.model";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ServerService {
-
-  private server!: Server;
-  server$ = new BehaviorSubject<Server | null>(null);
-
-  constructor() {
-    this.server$.subscribe(server => {
-      if (!server) {
-        return;
-      }
-      this.server = server;
-    });
-  }
-
-
-}

kdb-web/src/assets/i18n/de.json

@@ -151,7 +151,10 @@
       }
     },
     "server": {
-      "header": "Server"
+      "header": "Server",
+      "dashboard": {
+        "header": "Server dashboard"
+      }
     },
     "user-list": {},
     "change-password": {