Improved way to load server for server dashboard #131
This commit is contained in:
parent
a6df06f13a
commit
4822348e01
39460
kdb-web/package-lock.json
generated
39460
kdb-web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
@ -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) },
|
||||
|
@ -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();
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -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]);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
<h1>
|
||||
{{'view.dashboard.header' | translate}}
|
||||
{{'view.server.dashboard.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header">
|
||||
|
@ -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.data.query<Server>(Queries.serversQuery, {
|
||||
filter: { id: this.route.snapshot.params["id"] }
|
||||
},
|
||||
function(data: Query) {
|
||||
return data.servers.length > 0 ? data.servers[0] : null;
|
||||
}
|
||||
).subscribe(server => {
|
||||
this.server = server;
|
||||
this.spinner.hideSpinner();
|
||||
this.router.navigate(['/dashboard']);
|
||||
return;
|
||||
}
|
||||
|
||||
this.server = this.serverService.server$.value;
|
||||
this.spinner.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -151,7 +151,10 @@
|
||||
}
|
||||
},
|
||||
"server": {
|
||||
"header": "Server"
|
||||
"header": "Server",
|
||||
"dashboard": {
|
||||
"header": "Server dashboard"
|
||||
}
|
||||
},
|
||||
"user-list": {},
|
||||
"change-password": {
|
||||
|
6297
kdb-web/src/styles/themes/theme.css
Normal file
6297
kdb-web/src/styles/themes/theme.css
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user