| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <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> |