hostbbq-monitoring/ng/src/app/components/server-metrics-widget/server-metrics-widget.component.html

<div
  class="d-grid"
  style="grid-template-columns: max-content auto"
  [style.grid-template-rows]="'repeat(' + dataTypes.length + ')'"
  [routerLink]="'/srv/' + server.id">
  <ng-container *ngFor="let type of dataTypes; index as i">
    <div class="d-inline text-uppercase flex-grow-0 pe-2" style="grid-column: 1 / span 1" [style.grid-row]="i + 1 + ' / span 1'">
      <fa-icon [icon]="type.type | faType" class="pe-2 status-ok"></fa-icon>{{ type.type }}
    </div>
    <div class="pt-1 pb-1 h-100" style="grid-column: 2 / span 1" [style.grid-row]="i + 1 + ' / span 1'">
      <div *ngIf="type.data; else loading" class="progress position-relative">
        <div *ngIf="type.data.avg" class="progress-bar bg-avg" role="progressbar" [style.width]="type.data.avg + '%'"></div>
        <div *ngIf="type.data.peak" class="progress-bar bg-peak" role="progressbar" [style.width]="type.data.peak - (type.data.avg || 0) + '%'"></div>
        <span *ngIf="type.subtype" class="position-absolute end-0 pe-2">:{{ type.subtype }}</span>
      </div>
    </div>
  </ng-container>
</div>

<ng-template #loading>
  <div class="progress">
    <div class="progress-bar bg-progress progress-bar-striped progress-bar-animated text-primary" role="progressbar" style="width: 100%">
      Loading data
    </div>
  </div>
</ng-template>