blueprints/common/eliot-ui/frontend-src/src/app/services/services.component.html

   1 <div class="maindiv">
   2     <div class="centerdiv">
   3         <div class="dropdown">
   4
   5             <div class="options">
   6
   7                 <button color="primary" mat-fab aria-label matTooltip="UPDATE">
   8
   9                     <mat-icon (click)="getServices()">update</mat-icon>
  10                 </button>
  11
  12
  13                 <mat-form-field class="filter" >
  14
  15                     <mat-select placeholder="Edgewise Filter" [(ngModel)]="selectedNode"
  16                         (ngModelChange)="onNodeSelection()">
  17                         <mat-option *ngFor="let node of nodesArray" [value]="node.value">
  18                             {{ node.viewValue }}
  19                         </mat-option>
  20                     </mat-select>
  21
  22                 </mat-form-field>
  23             </div>
  24         </div>
  25
  26         <div class="tablepage">
  27             <div>
  28                 <mat-form-field class="filter">
  29                     <input matInput (keyup)="serviceFilter($event.target.value)" placeholder="Filter">
  30                 </mat-form-field>
  31             </div>
  32
  33             <div class="podtable">
  34
  35                 <table mat-table [dataSource]="serviceDataSource">
  36
  37                     <ng-container matColumnDef="serviceName">
  38                         <th mat-header-cell *matHeaderCellDef> Name </th>
  39                         <td mat-cell *matCellDef="let eliot"> {{eliot.serviceName}} </td>
  40                     </ng-container>
  41
  42                     <ng-container matColumnDef="serviceType">
  43                         <th mat-header-cell *matHeaderCellDef> Type </th>
  44                         <td mat-cell *matCellDef="let eliot"> {{eliot.serviceType}} </td>
  45                     </ng-container>
  46
  47                     <ng-container matColumnDef="clusterIp">
  48                         <th mat-header-cell *matHeaderCellDef> Cluster IP </th>
  49                         <td mat-cell *matCellDef="let eliot"> {{eliot.clusterIp}} </td>
  50                     </ng-container>
  51
  52                     <ng-container matColumnDef="externalIp">
  53                         <th mat-header-cell *matHeaderCellDef> External IP </th>
  54                         <td mat-cell *matCellDef="let eliot"> {{eliot.externalIp}} </td>
  55                     </ng-container>
  56
  57                     <ng-container matColumnDef="ports">
  58                         <th mat-header-cell *matHeaderCellDef> Ports </th>
  59                         <td mat-cell *matCellDef="let eliot"> {{eliot.ports}} </td>
  60                     </ng-container>
  61
  62                     <ng-container matColumnDef="age">
  63                         <th mat-header-cell *matHeaderCellDef> Age </th>
  64                         <td mat-cell *matCellDef="let eliot"> {{eliot.age}} </td>
  65                     </ng-container>
  66
  67                     <ng-container matColumnDef="selector">
  68                         <th mat-header-cell *matHeaderCellDef> Selector </th>
  69                         <td mat-cell *matCellDef="let eliot"> {{eliot.selector}} </td>
  70                     </ng-container>
  71
  72
  73                     <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
  74                     <tr mat-row *matRowDef="let row; columns: serviceColumns;"></tr>
  75                 </table>
  76
  77                 <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  78
  79         </div>
  80     </div>
  81
  82 </div>