control-panel/cp-frontend/src/app/pages/service-list/components/services-table/services-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">Service 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>
    <div>
      <button class="employee-table-wrapper__button" mat-mini-fab (click)="showFilterInput()">
        <mat-icon class="employee-table-wrapper__icon">search</mat-icon>
      </button>
      <app-settings-menu></app-settings-menu>
    </div>
  </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="name">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Service Name</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element">
          {{element.serviceName}} - {{element.version}}
        </td>
      </ng-container>

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

      <ng-container matColumnDef="instances">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Instances</th>

        <td class="employee-table__table-body" mat-cell *matCellDef="let element">
          <a [matTooltip]="element.instancesOverview()" matTooltipClass="tooltipBreakLine">
            {{element.instances.length}}
          </a>
        </td>
      </ng-container>

      <ng-container matColumnDef="relative">
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef>Previous Version</th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element">
          <a [matTooltip]="element.previousVersionsOverview()" matTooltipClass="tooltipBreakLine">
            {{element.previousVersionsNum()}}
          </a>
        </td>
      </ng-container>

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

      <ng-container matColumnDef="kie">
        <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.kieConfOverview()" matTooltipClass="tooltipBreakLine">
            {{2}}
          </a>
        </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>