<tabset>
  <tab i18n-heading
       heading="Hosts List">
    <cd-table [data]="hosts"
              [columns]="columns"
              columnMode="flex"
              (fetchData)="getHosts($event)"
              selectionType="single"
              [hasDetails]="true"
              (setExpandedRow)="setExpandedRow($event)"
              (updateSelection)="updateSelection($event)">
      <div class="table-actions btn-toolbar">
        <cd-table-actions [permission]="permissions.hosts"
                          [selection]="selection"
                          class="btn-group"
                          id="host-actions"
                          [tableActions]="tableActions">
        </cd-table-actions>
      </div>
      <ng-template #servicesTpl
                   let-value="value">
        <span *ngFor="let service of value; last as isLast">
          <a class="service-link"
             [routerLink]="[service.cdLink]"
             [queryParams]="cdParams"
             *ngIf="service.canRead">{{ service.type }}.{{ service.id }}</a>
          <span *ngIf="!service.canRead">
            {{ service.type }}.{{ service.id }}
          </span>
          <ng-container *ngIf="!isLast">, </ng-container>
        </span>
      </ng-template>
      <cd-host-details cdTableDetail
                       [permissions]="permissions"
                       [selection]="expandedRow">
      </cd-host-details>
    </cd-table>
  </tab>
  <tab i18n-heading
       *ngIf="permissions.grafana.read"
       heading="Overall Performance">
    <cd-grafana [grafanaPath]="'host-overview?'"
                uid="y0KGL0iZz"
                grafanaStyle="two">
    </cd-grafana>
  </tab>
</tabset>
