docker-sites-status-server/frontend/SiteStatus/src/app/views/dns-status-component/dns-status.component.html

<div [cgBusy]="promise">

    <mat-form-field>
        <mat-select placeholder="View by" [(value)]="viewType">
            <mat-option *ngFor="let viewType of viewTypes" [value]="viewType.value">
                {{ viewType.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <div *ngIf="viewType === viewTypes[0].value">
        <div *ngFor="let view of (dnsStatus$ | async)?.views;trackBy: trackViewByName">

            <h3>{{ view.name }}</h3>

            <mat-expansion-panel *ngFor="let zoneStatus of view.zones;trackBy: trackZoneByZone">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        <span [appStatusLed]="zoneStatus.status"></span>&nbsp;<strong>{{ zoneStatus.zone }}</strong>
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <table mat-table [dataSource]="zoneStatus.serverStatus" class="mat-elevation-z0" [trackBy]="trackZoneServerByServer">
                    <ng-container matColumnDef="status">
                        <th mat-header-cell *matHeaderCellDef> Status </th>
                        <td mat-cell *matCellDef="let element">  <span [appStatusLed]="element.status"></span> </td>
                    </ng-container>
                    <ng-container matColumnDef="server">
                        <th mat-header-cell *matHeaderCellDef> Server </th>
                        <td mat-cell *matCellDef="let element"> {{element.server}} </td>
                    </ng-container>
                    <ng-container matColumnDef="soa">
                        <th mat-header-cell *matHeaderCellDef> SOA </th>
                        <td mat-cell *matCellDef="let element"> {{element.soa}} </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="['status', 'server', 'soa']"></tr>
                    <tr mat-row *matRowDef="let row; columns: ['status', 'server', 'soa'];"></tr>
                </table>

            </mat-expansion-panel>
        </div>
    </div>

    <div *ngIf="viewType === viewTypes[1].value">
        <div *ngFor="let view of (dnsStatusPerServer$ | async)?.views;trackBy: trackViewPerServerByName">

            <h3>{{ view.name }}</h3>

            <mat-expansion-panel *ngFor="let server of view.servers;trackBy: trackServerByIp">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        <span [appStatusLed]="server.status"></span>&nbsp;<strong>{{ server.ip }}</strong>
                    </mat-panel-title>
                    <mat-panel-description>
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <table mat-table [dataSource]="server.zones" class="mat-elevation-z0" [trackBy]="trackZonePerServerByZone">
                    <ng-container matColumnDef="status">
                        <th mat-header-cell *matHeaderCellDef> Status </th>
                        <td mat-cell *matCellDef="let element">  <span [appStatusLed]="element.status"></span> </td>
                    </ng-container>
                    <ng-container matColumnDef="zone">
                        <th mat-header-cell *matHeaderCellDef> Zone </th>
                        <td mat-cell *matCellDef="let element"> {{element.zone}} </td>
                    </ng-container>
                    <ng-container matColumnDef="soa">
                        <th mat-header-cell *matHeaderCellDef> SOA </th>
                        <td mat-cell *matCellDef="let element"> {{element.soa}} </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="['status', 'zone', 'soa']"></tr>
                    <tr mat-row *matRowDef="let row; columns: ['status', 'zone', 'soa'];"></tr>
                </table>

            </mat-expansion-panel>
        </div>
    </div>

    <button (click)="onclick()" mat-button mat-raised-button>Reload</button>
</div>