X-Git-Url: https://gerrit.akraino.org/r/gitweb?a=blobdiff_plain;f=example-apps%2FROBO%2FRoboUI%2Fsrc%2Fapp%2Fdata-monitor%2Fdata-monitor.component.html;h=36cda5eb4a6c4363fad58018b86efe29083f4576;hb=e6d40ddb2640f434a9d7d7ed99566e5e8fa60cc1;hp=9ac8d51ec0c51f7a63965abb23d7babd90096e12;hpb=85ef2c5c9325797279cdcaf5cc7e58b0eacfcaaa;p=ealt-edge.git

diff --git a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html
index 9ac8d51..36cda5e 100644
--- a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html
+++ b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html
@@ -1,4 +1,10 @@
 <div class="maindiv">
+    <div class="refresh">
+        <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>
+    </div>
+    <div style="display:flex; justify-content: center;">
+        <h3>SHELF STATUS</h3>
+    </div>
     <div class="tablepage">
         <div class="monitortable">
 
@@ -6,30 +12,36 @@
 
                 <ng-container matColumnDef="shelfName">
                     <th mat-header-cell *matHeaderCellDef> Shelf Name </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.shelfName}} </td>
+                    <td  mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}" > {{monitor.shelfName}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="objType">
                     <th mat-header-cell *matHeaderCellDef> Object Type </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.ObjType}} </td>
+                    <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.ObjType}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="currentCount">
                     <th mat-header-cell *matHeaderCellDef> Current Count </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.currentCount}} </td>
+                    <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.currentCount}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="maxCount">
+                    <th mat-header-cell *matHeaderCellDef> Max Count </th>
+                    <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.maxCount}} </td>
                 </ng-container>
 
-                <ng-container matColumnDef="totalCount">
-                    <th mat-header-cell *matHeaderCellDef> Total Count </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.totalCount}} </td>
+                <ng-container matColumnDef="status">
+                    <th mat-header-cell *matHeaderCellDef> Status </th>
+                    <td  mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.status}}
+                    </td>
                 </ng-container>
 
                 <ng-container matColumnDef="time">
                     <th mat-header-cell *matHeaderCellDef> Time </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.time}} </td>
+                    <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}" > {{monitor.time}} </td>
                 </ng-container>
 
-                <tr mat-header-row *matHeaderRowDef="monitorColumns"></tr>
+                <tr  mat-header-row *matHeaderRowDef="monitorColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: monitorColumns;"></tr>
             </table>
 
@@ -39,8 +51,7 @@
     </div>
     <div class="image-card">
         <mat-card>
-            <img id="myimage" [src]='thumbnail' />
-            <!-- <p>Backend image</p> -->
+            <img id="myimage" [src]="thumbnail" style="display:block; margin-left: auto; margin-right: auto;" />
         </mat-card>
     </div>