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

<div [cgBusy]="promise">

    <mat-expansion-panel *ngFor="let hostStatus of hostsStatus">
        <mat-expansion-panel-header>
            <mat-panel-title>
                <span [appStatusLed]="hostStatus.status"></span>&nbsp;<strong>{{ hostStatus.name == null ? "Internet" : hostStatus.name }}</strong>
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>

        <table mat-table [dataSource]="hostStatus.hosts" class="mat-elevation-z0">
            <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="ip">
                <th mat-header-cell *matHeaderCellDef> IP </th>
                <td mat-cell *matCellDef="let element"> {{element.ip}} </td>
            </ng-container>
            <ng-container matColumnDef="hostname">
                <th mat-header-cell *matHeaderCellDef> Hostname </th>
                <td mat-cell *matCellDef="let element"> {{element.hostname}} </td>
            </ng-container>
            <ng-container matColumnDef="timesMin">
                <th mat-header-cell *matHeaderCellDef> Min </th>
                <td mat-cell *matCellDef="let element"> {{element.timesMin}} </td>
            </ng-container>
            <ng-container matColumnDef="timesAvg">
                <th mat-header-cell *matHeaderCellDef> Avg </th>
                <td mat-cell *matCellDef="let element"> {{element.timesAvg}} </td>
            </ng-container>
            <ng-container matColumnDef="timesMax">
                <th mat-header-cell *matHeaderCellDef> Max </th>
                <td mat-cell *matCellDef="let element"> {{element.timesMax}} </td>
            </ng-container>
            <ng-container matColumnDef="timesLost">
                <th mat-header-cell *matHeaderCellDef> Lost </th>
                <td mat-cell *matCellDef="let element"> {{element.timesLost}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['status', 'ip', 'hostname', 'timesMin', 'timesAvg', 'timesMax', 'timesLost']"></tr>
            <tr mat-row *matRowDef="let row; columns: ['status', 'ip', 'hostname', 'timesMin', 'timesAvg', 'timesMax', 'timesLost'];"></tr>
        </table>

    </mat-expansion-panel>

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