X-Git-Url: https://gerrit.akraino.org/r/gitweb?a=blobdiff_plain;f=blueprints%2Fcommon%2Feliot-ui%2Ffrontend-src%2Fsrc%2Fapp%2Fnodes%2Fnodes.component.html;h=d095f2b6c2dbf18b17b657dbb5beb0d66dccbde0;hb=5c2048d4d3e672783eea4f306aa9a03f33a1a9f2;hp=3f337452775f57dd442bc0c62b50ade7ec8c2c6f;hpb=59f512662c02a16c1d5c45b090b185d2e773310f;p=eliot.git

diff --git a/blueprints/common/eliot-ui/frontend-src/src/app/nodes/nodes.component.html b/blueprints/common/eliot-ui/frontend-src/src/app/nodes/nodes.component.html
index 3f33745..d095f2b 100644
--- a/blueprints/common/eliot-ui/frontend-src/src/app/nodes/nodes.component.html
+++ b/blueprints/common/eliot-ui/frontend-src/src/app/nodes/nodes.component.html
@@ -1,75 +1,98 @@
 <div class="maindiv">
-
+    <app-toolbar></app-toolbar>
     <div class="centerdiv">
-        <div class="tablepage" *ngIf="display">
-
-            <div class="nodetable">
-                <mat-form-field >
-                      <input matInput (keyup)="nodeFilter($event.target.value)" placeholder="Filter">
-                </mat-form-field>
-
-                <table mat-table [dataSource]="nodeDataSource">
-
-                    <ng-container matColumnDef="nodeName">
-                        <th mat-header-cell *matHeaderCellDef> Node Name </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.nodeName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="nodeStatus">
-                        <th mat-header-cell *matHeaderCellDef> Status </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.nodeStatus}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="nodeRole">
-                        <th mat-header-cell *matHeaderCellDef> Roles </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.nodeRole}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="age">
-                        <th mat-header-cell *matHeaderCellDef> age </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.age}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="version">
-                        <th mat-header-cell *matHeaderCellDef> version </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.version}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="internalIp">
-                        <th mat-header-cell *matHeaderCellDef> Internal IP </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.internalIp}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="externalIp">
-                        <th mat-header-cell *matHeaderCellDef> External IP </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.externalIp}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="osImage">
-                        <th mat-header-cell *matHeaderCellDef> OS Image </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.osImage}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="kernel">
-                        <th mat-header-cell *matHeaderCellDef> Kernel Version </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.kernel}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="containerRuntime">
-                        <th mat-header-cell *matHeaderCellDef> Container Runtime </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.containerRuntime}} </td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="nodeColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: nodeColumns;"></tr>
-                </table>
-
-                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
-
+        <div class="tablepage" >
+        <!-- *ngIf="display"> -->
+            <div class="mat-elevation-z8">
+                <div class="nodetable">
+                    <mat-form-field>
+                        <input matInput (keyup)="nodeFilter($event.target.value)" placeholder="Filter">
+                    </mat-form-field>
+
+                    <table mat-table [dataSource]="nodeDataSource">
+                        
+                        <ng-container matColumnDef="nodeName">
+                            <th mat-header-cell *matHeaderCellDef> Node Name </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.nodeName}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="nodeStatus">
+                            <th mat-header-cell *matHeaderCellDef> Status </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.nodeStatus}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="nodeRole">
+                            <th mat-header-cell *matHeaderCellDef> Roles </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.nodeRole}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="age">
+                            <th mat-header-cell *matHeaderCellDef> age </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.age}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="version">
+                            <th mat-header-cell *matHeaderCellDef> version </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.version}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="internalIp">
+                            <th mat-header-cell *matHeaderCellDef> Internal IP </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.internalIp}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="externalIp">
+                            <th mat-header-cell *matHeaderCellDef> External IP </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.externalIp}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="osImage">
+                            <th mat-header-cell *matHeaderCellDef> OS Image </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.osImage}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="kernel">
+                            <th mat-header-cell *matHeaderCellDef> Kernel Version </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.kernel}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="containerRuntime">
+                            <th mat-header-cell *matHeaderCellDef> Container Runtime </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.containerRuntime}} </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="nodeColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: nodeColumns;"></tr>
+                    </table>
+
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+                </div>
             </div>
 
+            <ng-template ngxPermissionsOnly="ADMIN">
+                <div class="admin-template">
+                    <!-- <button mat-raised-button mat-icon-button color="primary" (click)="addNodeDialog()" class="power-button">
+                        <mat-icon>add</mat-icon>
+                    </button> -->
+                    <button mat-fab mat-raised-button color="red" (click)="addNodeDialog()" ><mat-icon>add</mat-icon></button>
+                    <!-- <button mat-fab  mat-icon-button color="red"><i class="fa fa-plus-square-o" aria-hidden="true"></i></button> -->
+                    <!-- <ngx-float-button color="darkorange" background-color="black" icon="add">
+                        <ngx-float-item-button icon="person_add" (click)="addNodeDialog()" content="Add Node">
+                        </ngx-float-item-button>
+                        <ngx-float-item-button icon="mode_edit" (click)="editNodeDialog()" content="Edit Node">
+                        </ngx-float-item-button>
+                        <ngx-float-item-button icon="delete" (click)="deleteNodeDialog()" content="Delete Node">
+                        </ngx-float-item-button>
+                    </ngx-float-button> -->
+                    
+                </div>
+            </ng-template>
+            
+            <!-- <button mat-fab color="primary">Primary</button> -->
         </div>
-
-
+        
     </div>
+
+   
 </div>
\ No newline at end of file