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

diff --git a/blueprints/common/eliot-ui/frontend-src/src/app/services/services.component.html b/blueprints/common/eliot-ui/frontend-src/src/app/services/services.component.html
index cf42fb5..d0c0db8 100644
--- a/blueprints/common/eliot-ui/frontend-src/src/app/services/services.component.html
+++ b/blueprints/common/eliot-ui/frontend-src/src/app/services/services.component.html
@@ -1,82 +1,88 @@
 <div class="maindiv">
+    <div class="toolbar">
+        <app-toolbar></app-toolbar>
+    </div>
     <div class="centerdiv">
-        <div class="dropdown">
+        <div class="mat-elevation-z8">
+            <div class="dropdown">
 
-            <div class="options">
+                <div class="options">
 
-                <button color="primary" mat-fab aria-label matTooltip="UPDATE">
+                    <button color="primary" mat-fab aria-label matTooltip="UPDATE">
 
-                    <mat-icon (click)="getServices()">update</mat-icon>
-                </button>
+                        <mat-icon (click)="getServices()">update</mat-icon>
+                    </button>
 
 
-                <mat-form-field class="filter" >
+                    <mat-form-field class="filter">
 
-                    <mat-select placeholder="Edgewise Filter" [(ngModel)]="selectedNode"
-                        (ngModelChange)="onNodeSelection()">
-                        <mat-option *ngFor="let node of nodesArray" [value]="node.value">
-                            {{ node.viewValue }}
-                        </mat-option>
-                    </mat-select>
+                        <mat-select placeholder="Edgewise Filter" [(ngModel)]="selectedNode"
+                            (ngModelChange)="onNodeSelection()">
+                            <mat-option *ngFor="let node of nodesArray" [value]="node.value">
+                                {{ node.viewValue }}
+                            </mat-option>
+                        </mat-select>
 
-                </mat-form-field>
+                    </mat-form-field>
+                </div>
             </div>
-        </div>
 
-        <div class="tablepage">
-            <div>
-                <mat-form-field class="filter">
-                    <input matInput (keyup)="serviceFilter($event.target.value)" placeholder="Filter">
-                </mat-form-field>
-            </div>
+            <div class="tablepage">
+                <div>
+                    <mat-form-field class="filter">
+                        <input matInput (keyup)="serviceFilter($event.target.value)" placeholder="Filter">
+                    </mat-form-field>
+                </div>
 
-            <div class="podtable">
+                <div class="podtable">
 
-                <table mat-table [dataSource]="serviceDataSource">
+                    <table mat-table [dataSource]="serviceDataSource">
 
-                    <ng-container matColumnDef="serviceName">
-                        <th mat-header-cell *matHeaderCellDef> Name </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.serviceName}} </td>
-                    </ng-container>
+                        <ng-container matColumnDef="serviceName">
+                            <th mat-header-cell *matHeaderCellDef> Name </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.serviceName}} </td>
+                        </ng-container>
 
-                    <ng-container matColumnDef="serviceType">
-                        <th mat-header-cell *matHeaderCellDef> Type </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.serviceType}} </td>
-                    </ng-container>
+                        <ng-container matColumnDef="serviceType">
+                            <th mat-header-cell *matHeaderCellDef> Type </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.serviceType}} </td>
+                        </ng-container>
 
-                    <ng-container matColumnDef="clusterIp">
-                        <th mat-header-cell *matHeaderCellDef> Cluster IP </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.clusterIp}} </td>
-                    </ng-container>
+                        <ng-container matColumnDef="clusterIp">
+                            <th mat-header-cell *matHeaderCellDef> Cluster IP </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.clusterIp}} </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="externalIp">
+                            <th mat-header-cell *matHeaderCellDef> External IP </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.externalIp}} </td>
+                        </ng-container>
 
-                    <ng-container matColumnDef="ports">
-                        <th mat-header-cell *matHeaderCellDef> Ports </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.ports}} </td>
-                    </ng-container>
+                        <ng-container matColumnDef="ports">
+                            <th mat-header-cell *matHeaderCellDef> Ports </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.ports}} </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="age">
+                            <th mat-header-cell *matHeaderCellDef> Age </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.age}} </td>
+                        </ng-container>
 
-                    <ng-container matColumnDef="selector">
-                        <th mat-header-cell *matHeaderCellDef> Selector </th>
-                        <td mat-cell *matCellDef="let eliot"> {{eliot.selector}} </td>
-                    </ng-container>
+                        <ng-container matColumnDef="selector">
+                            <th mat-header-cell *matHeaderCellDef> Selector </th>
+                            <td mat-cell *matCellDef="let eliot"> {{eliot.selector}} </td>
+                        </ng-container>
 
 
-                    <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: serviceColumns;"></tr>
-                </table>
+                        <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: serviceColumns;"></tr>
+                    </table>
 
-                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 
+                </div>
+            </div>
         </div>
-    </div>
 
+    </div>
 </div>
\ No newline at end of file