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

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