control-panel/cp-frontend/src/app/pages/instance-list/components/instances-table/instances-table.component.html

<mat-card class="employee-table-wrapper">
  <mat-card-title class="employee-table-wrapper__header">
    <p *ngIf="!isShowFilterInput" class="employee-table-wrapper__title">Instance List</p>
    <div *ngIf="isShowFilterInput" class="employee-table-wrapper__search">
      <div class="employee-table-wrapper__icon-wrapper">
        <mat-icon class="employee-table-wrapper__icon">search</mat-icon>
      </div>
      <input matInput class="employee-table-wrapper__search-input" (keyup)="applyFilter($event)">
      <button class="employee-table-wrapper__button" mat-mini-fab (click)="showFilterInput()">
        <mat-icon class="employee-table-wrapper__icon">close</mat-icon>
      </button>
    </div>
    <button class="employee-table-wrapper__button" mat-mini-fab (click)="showFilterInput()">
      <mat-icon class="employee-table-wrapper__icon">search</mat-icon>
    </button>
  </mat-card-title>
  <mat-card-content class="employee-table__content">
    <table class="employee-table__table" mat-table [dataSource]="dataSource">

      <!-- Checkbox Column -->
      <ng-container matColumnDef="select">
        <th class="employee-table__table-checkbox" mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            color="primary"
            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
            [aria-label]="checkboxLabel()">
          </mat-checkbox>
        </th>
        <td class="employee-table__table-checkbox" mat-cell *matCellDef="let row">
          <mat-checkbox
            color="primary"
            (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)"
            [aria-label]="checkboxLabel(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="id">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Instance Id</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.instanceId}} </td>
      </ng-container>

      <ng-container matColumnDef="serviceName">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Service</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.service.serviceName}}
          - {{element.service.version}} </td>
      </ng-container>

      <ng-container matColumnDef="host">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Host</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.hostName}}</td>
      </ng-container>

      <ng-container matColumnDef="endPoint">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Endpoint</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element">
          <a [matTooltip]="element.endpointsOverview()" matTooltipClass="tooltipBreakLine">
            {{element.endpointsSimple()}}
          </a>
        </td>
      </ng-container>

      <ng-container matColumnDef="kieConf">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Kie Conf</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element">
          <a [matTooltip]="element.endpointsOverview()" matTooltipClass="tooltipBreakLine">
            2
          </a>
        </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Status</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element">

          <div class="employee-table__content-badge" [ngClass]="element.status">
            {{element.status}}
          </div>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
          (click)="selection.toggle(row)">
      </tr>
    </table>
  </mat-card-content>
  <div class="pagination">
    <mat-paginator [pageSizeOptions]="[30, 100]" showFirstLastButtons></mat-paginator>
  </div>
</mat-card>