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

   1 <div class="maindiv">
   2     <app-toolbar></app-toolbar>
   3     <div class="centerdiv">
   4         <div class="tablepage" >
   5         <!-- *ngIf="display"> -->
   6             <div class="mat-elevation-z8">
   7                 <div class="nodetable">
   8                     <mat-form-field>
   9                         <input matInput (keyup)="nodeFilter($event.target.value)" placeholder="Filter">
  10                     </mat-form-field>
  11
  12                     <table mat-table [dataSource]="nodeDataSource">
  13
  14                         <ng-container matColumnDef="nodeName">
  15                             <th mat-header-cell *matHeaderCellDef> Node Name </th>
  16                             <td mat-cell *matCellDef="let eliot"> {{eliot.nodeName}} </td>
  17                         </ng-container>
  18
  19                         <ng-container matColumnDef="nodeStatus">
  20                             <th mat-header-cell *matHeaderCellDef> Status </th>
  21                             <td mat-cell *matCellDef="let eliot"> {{eliot.nodeStatus}} </td>
  22                         </ng-container>
  23
  24                         <ng-container matColumnDef="nodeRole">
  25                             <th mat-header-cell *matHeaderCellDef> Roles </th>
  26                             <td mat-cell *matCellDef="let eliot"> {{eliot.nodeRole}} </td>
  27                         </ng-container>
  28
  29                         <ng-container matColumnDef="age">
  30                             <th mat-header-cell *matHeaderCellDef> age </th>
  31                             <td mat-cell *matCellDef="let eliot"> {{eliot.age}} </td>
  32                         </ng-container>
  33
  34                         <ng-container matColumnDef="version">
  35                             <th mat-header-cell *matHeaderCellDef> version </th>
  36                             <td mat-cell *matCellDef="let eliot"> {{eliot.version}} </td>
  37                         </ng-container>
  38
  39                         <ng-container matColumnDef="internalIp">
  40                             <th mat-header-cell *matHeaderCellDef> Internal IP </th>
  41                             <td mat-cell *matCellDef="let eliot"> {{eliot.internalIp}} </td>
  42                         </ng-container>
  43
  44                         <ng-container matColumnDef="externalIp">
  45                             <th mat-header-cell *matHeaderCellDef> External IP </th>
  46                             <td mat-cell *matCellDef="let eliot"> {{eliot.externalIp}} </td>
  47                         </ng-container>
  48
  49                         <ng-container matColumnDef="osImage">
  50                             <th mat-header-cell *matHeaderCellDef> OS Image </th>
  51                             <td mat-cell *matCellDef="let eliot"> {{eliot.osImage}} </td>
  52                         </ng-container>
  53
  54                         <ng-container matColumnDef="kernel">
  55                             <th mat-header-cell *matHeaderCellDef> Kernel Version </th>
  56                             <td mat-cell *matCellDef="let eliot"> {{eliot.kernel}} </td>
  57                         </ng-container>
  58
  59                         <ng-container matColumnDef="containerRuntime">
  60                             <th mat-header-cell *matHeaderCellDef> Container Runtime </th>
  61                             <td mat-cell *matCellDef="let eliot"> {{eliot.containerRuntime}} </td>
  62                         </ng-container>
  63
  64                         <tr mat-header-row *matHeaderRowDef="nodeColumns"></tr>
  65                         <tr mat-row *matRowDef="let row; columns: nodeColumns;"></tr>
  66                     </table>
  67
  68                     <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  69
  70                 </div>
  71             </div>
  72
  73             <ng-template ngxPermissionsOnly="ADMIN">
  74                 <div class="admin-template">
  75                     <!-- <button mat-raised-button mat-icon-button color="primary" (click)="addNodeDialog()" class="power-button">
  76                         <mat-icon>add</mat-icon>
  77                     </button> -->
  78                     <button mat-fab mat-raised-button color="red" (click)="addNodeDialog()" ><mat-icon>add</mat-icon></button>
  79                     <!-- <button mat-fab  mat-icon-button color="red"><i class="fa fa-plus-square-o" aria-hidden="true"></i></button> -->
  80                     <!-- <ngx-float-button color="darkorange" background-color="black" icon="add">
  81                         <ngx-float-item-button icon="person_add" (click)="addNodeDialog()" content="Add Node">
  82                         </ngx-float-item-button>
  83                         <ngx-float-item-button icon="mode_edit" (click)="editNodeDialog()" content="Edit Node">
  84                         </ngx-float-item-button>
  85                         <ngx-float-item-button icon="delete" (click)="deleteNodeDialog()" content="Delete Node">
  86                         </ngx-float-item-button>
  87                     </ngx-float-button> -->
  88
  89                 </div>
  90             </ng-template>
  91
  92             <!-- <button mat-fab color="primary">Primary</button> -->
  93         </div>
  94
  95     </div>
  96
  97
  98 </div>