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

<h3>Service Checks</h3>

<div *ngIf="serverConfigs?.length; else loadingServerConfs" 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 [routerLink]="'/admin/svc/' + 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>
        <ng-container *ngIf="!loadingServiceChecks; else loadingServerConfs">
          <div class="d-flex flex-column">
            <div class="btn-group d-block">
              <button class="btn btn-primary float-end m-1" [disabled]="params?.checkID === -1" (click)="addServiceCheck(serverConfig.id)">
                <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
              </button>
            </div>
            <ngb-accordion
              #acc="ngbAccordion"
              [closeOthers]="true"
              className="flex-fill"
              [activeIds]="params?.activeIds ?? []"
              (panelChange)="onAccordeonChange($event)">
              <ngb-panel *ngFor="let serviceCheck of serviceChecks" [id]="PANEL_ID_PFX + serviceCheck.id">
                <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="btn btn-sm btn-outline-light me-4"
                      title="Save configuration"
                      (click)="saveServiceCheck($event)"
                      *ngIf="opened"
                      [icon]="fa.save"></fa-icon>
                    <fa-icon
                      class="btn btn-sm btn-outline-danger me-4"
                      title="Delete this Service Check"
                      (click)="removeServiceCheck($event, serviceCheck.id)"
                      *ngIf="opened"
                      [icon]="fa.trash"></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-container>
      </ng-template>
    </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="flex-fill h-100 overflow-auto"></div>
</div>
<ng-template #loadingServerConfs>
  <app-status-timeline-widget></app-status-timeline-widget>
</ng-template>