admin panel: design classes for server nav; select and load first server on page load; inner scrollbox on service check accordeons

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

@@ -1,7 +1,9 @@
-<div class="d-flex">
-  <ul ngbNav #nav="ngbNav" class="nav-pills" orientation="vertical">
-    <li *ngFor="let serverConfig of serverConfigs" ngbNavItem>
-      <a ngbNavLink (click)="fetchServiceChecks(serverConfig.id)">{{ serverConfig.title }}</a>
+<h3>Service Checks</h3>
+
+<div class="d-flex h-100">
+  <ul ngbNav #nav="ngbNav" class="nav-pills h-100" 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)"><fa-icon class="pe-2" [icon]="fa.server"></fa-icon>{{ serverConfig.title }}</a>
       <ng-template ngbNavContent>
         <button class="btn" (click)="addServiceCheck(serverConfig.id)">Add</button>
         <ngb-accordion #acc="ngbAccordion">
@@ -21,5 +23,5 @@
       </ng-template>
     </li>
   </ul>
-  <div [ngbNavOutlet]="nav" class="flex-fill"></div>
+  <div [ngbNavOutlet]="nav" class="flex-fill h-100 overflow-auto"></div>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { 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';
@@ -8,16 +8,23 @@ import { ServiceCheckFormComponent } from '../../components/service-check-form/s
   selector: 'app-admin-panel',
   templateUrl: './admin-panel.component.html',
   styleUrls: ['./admin-panel.component.scss'],
-  host: { class: 'd-flex flex-column h-100 overflow-auto' }
+  host: { class: 'd-flex flex-column h-100' }
 })
 export class AdminPanelComponent implements OnInit {
   @ViewChildren(ServiceCheckFormComponent) formChilds!: QueryList<ServiceCheckFormComponent>;
   public serverConfigs: ServerConfig[] = [];
   public serviceChecks: HttpCheckConfig[] = [];
-  public fa = { save: faSave };
+  public fa = { save: faSave, server: faServer };
+
+  public activeId = 0;
 
   constructor(private serviceApi: ServiceApiService, apiService: ServerApiService) {
-    apiService.serverConfigs$.subscribe(data => (this.serverConfigs = data));
+    apiService.serverConfigs$.subscribe(data => {
+      this.serverConfigs = data;
+      if (data.length > 0) {
+        this.fetchServiceChecks(data[this.activeId].id);
+      }
+    });
   }
 
   ngOnInit(): void {}