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

<div
  class="d-grid"
  [style.grid-template-columns]="'250px repeat(' + (grid.columns - 1) + ', 1fr)'"
  [style.grid-template-rows]="'repeat(' + grid.rows + ', max-content)'">
  <div class="card-header btn btn-toolbar bg-light text-primary" routerLink="/" style="grid-column: 1 / span 1; grid-row: 1 / span 1">
    <fa-icon [icon]="fa.faChalkboard" class="pe-2"></fa-icon>
    <span class="flex-fill text-start">Dashboard</span>
    <fa-icon [icon]="fa.faAngleRight" class="ps-2"></fa-icon>
  </div>
  <div class="card-header bg-primary text-light text-center" style="grid-column: 2 / span 1; grid-row: 1 / span 1">
    <fa-icon [icon]="fa.faChartBar" class="pe-2"></fa-icon>
    <span class="flex-fill">Server Metrics (24h)</span>
  </div>
  <div class="card-header bg-primary text-light text-center" style="grid-column: 3 / span 1; grid-row: 1 / span 1">
    <fa-icon [icon]="fa.faTheaterMasks" class="pe-2"></fa-icon>
    <span class="flex-fill">Service Status (24h)</span>
  </div>

  <ng-container *ngFor="let server of serverConfigs; index as i">
    <div class="card-header bg-primary text-light" style="grid-column: 1 / span 1" [style.grid-row]="i + 2 + ' / span 1'">
      <fa-icon [icon]="fa.faServer" class="pe-2"></fa-icon>
      <span class="flex-fill text-start">{{ server.title }}</span>
    </div>

    <app-server-metrics-widget
      class="d-block p-1 border-end border-bottom text-primary pointer link-panel-highlight"
      style="grid-column: 2 / span 1"
      [style.grid-row]="i + 2 + ' / span 1'"
      [server]="server"
      [routerLink]="'/srv/' + server.id">
    </app-server-metrics-widget>

    <app-service-checks-widget
      [server]="server"
      class="d-block p-1 border-end border-bottom"
      style="grid-column: 3 / span 1"
      [style.grid-row]="i + 2 + ' / span 1'"></app-service-checks-widget>
  </ng-container>
</div>