admin-panel: moved service checks into own component and route; admin-panel has default redirect

ng/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
+import { AdminServiceChecksPageComponent } from './pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { ServerDataPageComponent } from './pages/server-data-page/server-data-page.component';
 import { ServiceCheckDetailPageComponent } from './pages/service-check-detail-page/service-check-detail-page.component';
@@ -9,7 +10,9 @@ const routes: Routes = [
   { path: '', pathMatch: 'full', component: HomePageComponent },
   { path: 'srv/:id', component: ServerDataPageComponent },
   { path: 'svc/:serverID/:serviceID', component: ServiceCheckDetailPageComponent },
-  { path: 'admin', component: AdminPanelComponent }
+  { path: 'admin', component: AdminPanelComponent },
+  { path: 'admin/svc', component: AdminServiceChecksPageComponent },
+  { path: 'admin/svc/:serverID/:serviceID', component: AdminServiceChecksPageComponent }
 ];
 
 @NgModule({

ng/src/app/app.module.ts

@@ -8,7 +8,6 @@ import { NgChartsModule } from 'ng2-charts';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
 import { HeaderComponent } from './components/header/header.component';
 import { ServerDataChartComponent } from './components/server-data-chart/server-data-chart.component';
 import { ServerMetricsWidgetComponent } from './components/server-metrics-widget/server-metrics-widget.component';
@@ -20,6 +19,8 @@ import { ServiceCheckStringComponent } from './components/service-check-editor/s
 import { ServiceCheckFormComponent } from './components/service-check-form/service-check-form.component';
 import { ServiceChecksWidgetComponent } from './components/service-checks-widget/service-checks-widget.component';
 import { StatusTimelineWidgetComponent } from './components/status-timeline-widget/status-timeline-widget.component';
+import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
+import { AdminServiceChecksPageComponent } from './pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { ServerDataPageComponent } from './pages/server-data-page/server-data-page.component';
 import { ServiceCheckDetailPageComponent } from './pages/service-check-detail-page/service-check-detail-page.component';
@@ -32,6 +33,7 @@ import { StatusColorPipe } from './pipes/status-color.pipe';
 @NgModule({
   declarations: [
     AdminPanelComponent,
+    AdminServiceChecksPageComponent,
     AppComponent,
     BytePipe,
     FaByTypePipe,

ng/src/app/pages/admin-panel/admin-panel.component.html

@@ -1,37 +1,5 @@
-<h3>Service Checks</h3>
+<p>Redirecting ...</p>
 
-<div class="border d-flex flex-fill overflow-hidden">
-  <ul ngbNav #nav="ngbNav" class="border-end nav-pills h-100" style="width: 250px" orientation="vertical" [(activeId)]="activeId">
-    <li *ngFor="let serverConfig of serverConfigs; index as s" [ngbNavItem]="s" class="bg-light text-primary">
-      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)" class="d-flex btn btn-toolbar">
-        <fa-icon class="pe-2" [icon]="fa.server"></fa-icon>
-        <span class="flex-fill text-start">{{ serverConfig.title }}</span>
-        <fa-icon class="ps-2" [icon]="fa.angleRight"></fa-icon>
-      </a>
-      <ng-template ngbNavContent>
-        <div class="d-flex flex-column">
-          <div class="btn-group d-block">
-            <button class="btn btn-primary float-end m-1" (click)="addServiceCheck(serverConfig.id)">
-              <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
-            </button>
-          </div>
-          <ngb-accordion #acc="ngbAccordion" className="flex-fill">
-            <ngb-panel *ngFor="let serviceCheck of serviceChecks">
-              <ng-template ngbPanelHeader let-opened="opened">
-                <button class="accordion-button" ngbPanelToggle [class.collapsed]="!opened" [ngClass]="{ 'bg-primary text-white': opened }">
-                  <p class="flex-fill m-0">{{ serviceCheck.title }}</p>
-
-                  <fa-icon class="me-1" (click)="saveServiceCheck($event)" *ngIf="opened" [icon]="fa.save"></fa-icon>
-                </button>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <app-service-check-form [serviceCheck]="serviceCheck"></app-service-check-form>
-              </ng-template>
-            </ngb-panel>
-          </ngb-accordion>
-        </div>
-      </ng-template>
-    </li>
-  </ul>
-  <div [ngbNavOutlet]="nav" class="flex-fill h-100 overflow-auto"></div>
-</div>
+<!-- This Page can be filled with a Admin Dashboard and Links to subsequent admin pages. -->
+<!-- As there are not any more subsequent pages than the "Service Checks" page, this     -->
+<!-- page is redirecting to that page by default. -->

ng/src/app/pages/admin-panel/admin-panel.component.ts

@@ -1,8 +1,5 @@
-import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
-import { faAngleRight, faPlus, faSave, faServer } from '@fortawesome/free-solid-svg-icons';
-import { ServiceApiService } from '../../services/service-api.service';
-import { ServerApiService } from '../../services/server-api.service';
-import { ServiceCheckFormComponent } from '../../components/service-check-form/service-check-form.component';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-admin-panel',
@@ -11,38 +8,9 @@ import { ServiceCheckFormComponent } from '../../components/service-check-form/s
   host: { class: 'd-flex flex-column h-100' }
 })
 export class AdminPanelComponent implements OnInit {
-  @ViewChild(ServiceCheckFormComponent) formRef!: ServiceCheckFormComponent;
-  public serverConfigs: ServerConfig[] = [];
-  public serviceChecks: HttpCheckConfig[] = [];
-  public fa = { save: faSave, server: faServer, angleRight: faAngleRight, plus: faPlus };
+  constructor(private router: Router) {}
 
-  public activeId = 0;
-
-  constructor(private serviceApi: ServiceApiService, apiService: ServerApiService) {
-    apiService.serverConfigs$.subscribe(data => {
-      this.serverConfigs = data;
-      if (data.length > 0) {
-        this.fetchServiceChecks(data[this.activeId].id);
-      }
-    });
-  }
-
-  ngOnInit(): void {}
-
-  async fetchServiceChecks(serverId: number) {
-    try {
-      this.serviceChecks = await this.serviceApi.loadServiceChecks(serverId);
-    } catch (error: any) {
-      console.error(error);
-    }
-  }
-
-  saveServiceCheck(event: Event) {
-    event.stopPropagation();
-    this.formRef?.save();
-  }
-
-  addServiceCheck(serverId: number) {
-    this.serviceChecks.unshift({ serverId, checks: [] as string[] } as HttpCheckConfig);
+  ngOnInit(): void {
+    this.router.navigateByUrl('/admin/svc');
   }
 }

ng/src/app/pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component.html

@@ -0,0 +1,37 @@
+<h3>Service Checks</h3>
+
+<div class="border d-flex flex-fill overflow-hidden">
+  <ul ngbNav #nav="ngbNav" class="border-end nav-pills h-100" style="width: 250px" orientation="vertical" [(activeId)]="activeId">
+    <li *ngFor="let serverConfig of serverConfigs; index as s" [ngbNavItem]="s" class="bg-light text-primary">
+      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)" class="d-flex btn btn-toolbar">
+        <fa-icon class="pe-2" [icon]="fa.server"></fa-icon>
+        <span class="flex-fill text-start">{{ serverConfig.title }}</span>
+        <fa-icon class="ps-2" [icon]="fa.angleRight"></fa-icon>
+      </a>
+      <ng-template ngbNavContent>
+        <div class="d-flex flex-column">
+          <div class="btn-group d-block">
+            <button class="btn btn-primary float-end m-1" (click)="addServiceCheck(serverConfig.id)">
+              <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
+            </button>
+          </div>
+          <ngb-accordion #acc="ngbAccordion" className="flex-fill">
+            <ngb-panel *ngFor="let serviceCheck of serviceChecks">
+              <ng-template ngbPanelHeader let-opened="opened">
+                <button class="accordion-button" ngbPanelToggle [class.collapsed]="!opened" [ngClass]="{ 'bg-primary text-white': opened }">
+                  <p class="flex-fill m-0">{{ serviceCheck.title }}</p>
+
+                  <fa-icon class="me-1" (click)="saveServiceCheck($event)" *ngIf="opened" [icon]="fa.save"></fa-icon>
+                </button>
+              </ng-template>
+              <ng-template ngbPanelContent>
+                <app-service-check-form [serviceCheck]="serviceCheck"></app-service-check-form>
+              </ng-template>
+            </ngb-panel>
+          </ngb-accordion>
+        </div>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="nav" class="flex-fill h-100 overflow-auto"></div>
+</div>

ng/src/app/pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminServiceChecksPageComponent } from './admin-service-checks-page.component';
+
+describe('AdminServiceChecksPageComponent', () => {
+  let component: AdminServiceChecksPageComponent;
+  let fixture: ComponentFixture<AdminServiceChecksPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdminServiceChecksPageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AdminServiceChecksPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng/src/app/pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component.ts

@@ -0,0 +1,49 @@
+import { Component, ViewChild } from '@angular/core';
+import { faAngleRight, faPlus, faSave, faServer } from '@fortawesome/free-solid-svg-icons';
+
+import { ServiceCheckFormComponent } from 'src/app/components/service-check-form/service-check-form.component';
+import { ServiceApiService } from 'src/app/services/service-api.service';
+import { ServerApiService } from 'src/app/services/server-api.service';
+
+@Component({
+  selector: 'app-admin-service-checks-page',
+  templateUrl: './admin-service-checks-page.component.html',
+  styleUrls: ['./admin-service-checks-page.component.scss'],
+  host: { class: 'd-flex flex-column h-100' }
+})
+export class AdminServiceChecksPageComponent {
+  @ViewChild(ServiceCheckFormComponent) formRef!: ServiceCheckFormComponent;
+  public serverConfigs: ServerConfig[] = [];
+  public serviceChecks: HttpCheckConfig[] = [];
+  public fa = { save: faSave, server: faServer, angleRight: faAngleRight, plus: faPlus };
+
+  public activeId = 0;
+
+  constructor(private serviceApi: ServiceApiService, apiService: ServerApiService) {
+    apiService.serverConfigs$.subscribe(data => {
+      this.serverConfigs = data;
+      if (data.length > 0) {
+        this.fetchServiceChecks(data[this.activeId].id);
+      }
+    });
+  }
+
+  ngOnInit(): void {}
+
+  async fetchServiceChecks(serverId: number) {
+    try {
+      this.serviceChecks = await this.serviceApi.loadServiceChecks(serverId);
+    } catch (error: any) {
+      console.error(error);
+    }
+  }
+
+  saveServiceCheck(event: Event) {
+    event.stopPropagation();
+    this.formRef?.save();
+  }
+
+  addServiceCheck(serverId: number) {
+    this.serviceChecks.unshift({ serverId, checks: [] as string[] } as HttpCheckConfig);
+  }
+}