hostbbq-monitoring/ng/src/app/pages/home-page/home-page.component.html

<ng-container *ngIf="!!servers?.length; else nothing">
  <ul>
    <li *ngFor="let server of servers; index as t" class="list-unstyled">
      <button
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="collapse"
        [attr.data-bs-target]="'#data-types-' + t"
        aria-expanded="false">
        {{ server.title }}
      </button>
      <ul *ngIf="server.types?.length" class="collapse" [id]="'data-types-' + t">
        <li *ngFor="let type of server.types; index as i" class="list-unstyled">
          <button
            class="btn btn-primary dropdown-toggle"
            type="button"
            data-bs-toggle="collapse"
            [attr.data-bs-target]="'#data-table-' + i"
            aria-expanded="false">
            {{ type.type }}
          </button>
          <ul *ngIf="type.subtypes?.length; else data" class="collapse" [id]="'data-table-' + i">
            <li *ngFor="let sub of type.subtypes; index as j" class="list-unstyled">
              <button
                class="btn btn-primary dropdown-toggle"
                type="button"
                data-bs-toggle="collapse"
                [attr.data-bs-target]="'#data-table-sub-' + j"
                aria-expanded="false">
                {{ sub.type }}
              </button>
              <div *ngIf="sub.data?.length" class="collapse" [id]="'data-table-sub-' + j">
                <table class="table table-striped">
                  <tbody>
                    <tr>
                      <th>Time</th>
                      <th>∅ avg</th>
                      <th>∧ peak</th>
                      <th>Ω avail</th>
                    </tr>
                    <tr *ngFor="let dataset of sub.data">
                      <td>{{ dataset.time | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
                      <td>{{ dataset.avg | number }}</td>
                      <td>{{ dataset.peak | number }}</td>
                      <td>{{ dataset.max | number }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </li>
          </ul>
          <ng-template #data>
            <div *ngIf="type.data?.length" class="collapse" [id]="'data-table-' + i">
              <table class="table table-striped">
                <tbody>
                  <tr>
                    <th>Time</th>
                    <th>∅ avg</th>
                    <th>∧ peak</th>
                    <th *ngIf="type.data?.[0]?.max">Ω avail</th>
                  </tr>
                  <tr *ngFor="let dataset of type.data">
                    <td>{{ dataset.time | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
                    <td>{{ dataset.avg | number }}</td>
                    <td>{{ dataset.peak | number }}</td>
                    <td *ngIf="dataset.max">{{ dataset.max | number }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </ng-template>
        </li>
      </ul>
    </li>
  </ul>
</ng-container>
<ng-template #nothing> Nothing to display </ng-template>