ROBO UI changes 90/4190/1
authorSrinivasan <srinivasan.s.n@huawei.com>
Fri, 26 Mar 2021 12:44:37 +0000 (18:14 +0530)
committerSrinivasan <srinivasan.s.n@huawei.com>
Fri, 26 Mar 2021 12:45:09 +0000 (18:15 +0530)
Signed-off-by: Srinivasan <srinivasan.s.n@huawei.com>
Change-Id: I6c4c43a9ca898368dd571a912a4256e3a86da0a4

12 files changed:
example-apps/ROBO/RoboUI/package-lock.json
example-apps/ROBO/RoboUI/src/app/app.component.html
example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.html
example-apps/ROBO/RoboUI/src/app/data-fetch/data-fetch.component.ts
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.scss
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts
example-apps/ROBO/RoboUI/src/app/datainterface.ts
example-apps/ROBO/RoboUI/src/app/robo.service.ts
example-apps/ROBO/RoboUI/src/assets/data/inventory.json
example-apps/ROBO/RoboUI/src/assets/images/common-appgridvue.png [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/assets/images/sample.jpg [new file with mode: 0644]

index 0a18af4..2fee7e1 100644 (file)
     "zone.js": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
-      "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==",
-      "dev": true
+      "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
     }
   }
 }
index 5ee3604..66c780b 100644 (file)
@@ -6,8 +6,8 @@
       <h1>ROBO Usecase</h1>
       <span class="menu-spacer"></span>
       <div>
-        <a mat-button [routerLink]="'/dataupload'"> Inventory Data Upload </a>
-        <a mat-button [routerLink]="'/datamonitor'"> Inventory Management </a>
+        <a mat-button [routerLink]="'/dataupload'"> Shelf Data Upload </a>
+        <a mat-button [routerLink]="'/datamonitor'"> Shelf Management </a>
         <a mat-button [routerLink]="'/backuprestore'"> Backup and Restore</a>
   
       </div>
@@ -22,8 +22,8 @@
     <mat-sidenav #sidenav>
       <mat-nav-list>
   
-        <a mat-list-item [routerLink]="'/dataupload'"> Inventory Data Upload </a>
-        <a mat-list-item [routerLink]="'/datamonitor'"> Inventory Management </a>
+        <a mat-list-item [routerLink]="'/dataupload'"> Shelf Data Upload </a>
+        <a mat-list-item [routerLink]="'/datamonitor'"> Shelf Management </a>
         <a mat-list-item [routerLink]="'/backuprestore'"> Backup and Restore </a>
   
       </mat-nav-list>
index aa91015..0ffb5a0 100644 (file)
                             <th mat-header-cell *matHeaderCellDef> NAME </th>
                             <td mat-cell *matCellDef="let apps"> {{apps.name}} </td>
                         </ng-container>
+<!-- 
+                        <ng-container matColumnDef="ready">
+                            <th mat-header-cell *matHeaderCellDef> READY </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.ready}} </td>
+                        </ng-container> -->
 
                         <ng-container matColumnDef="status">
                             <th mat-header-cell *matHeaderCellDef> STATUS </th>
                             <td mat-cell *matCellDef="let apps"> {{apps.status}} </td>
                         </ng-container>
+<!-- 
+                        <ng-container matColumnDef="restarts">
+                            <th mat-header-cell *matHeaderCellDef> RESTARTS </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.restarts}} </td>
+                        </ng-container> -->
+
+                        <!-- <ng-container matColumnDef="age">
+                            <th mat-header-cell *matHeaderCellDef> AGE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.age}} </td>
+                        </ng-container> -->
 
                         <ng-container matColumnDef="ip">
                             <th mat-header-cell *matHeaderCellDef> IP </th>
                             <td mat-cell *matCellDef="let apps"> {{apps.node}} </td>
                         </ng-container>
 
+                        <!-- <ng-container matColumnDef="nominatednode">
+                            <th mat-header-cell *matHeaderCellDef> NOMINATED NODE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.nominatednode}} </td>
+                        </ng-container> -->
+
+                        <!-- <ng-container matColumnDef="readinessgates">
+                            <th mat-header-cell *matHeaderCellDef> READINESS GATES </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.readinessgates}} </td>
+                        </ng-container> -->
+
                         <tr mat-header-row *matHeaderRowDef="appsColumns"></tr>
                         <tr mat-row *matRowDef="let row; columns: appsColumns;"></tr>
                     </table>
                             <td mat-cell *matCellDef="let pvs"> {{pvs.volume}} </td>
                         </ng-container>
 
+                        <!-- <ng-container matColumnDef="capacity">
+                            <th mat-header-cell *matHeaderCellDef> CAPACITY </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.capacity}} </td>
+                        </ng-container> -->
+
+                        <!-- <ng-container matColumnDef="accessmodes">
+                            <th mat-header-cell *matHeaderCellDef> ACCESS MODES </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.accessmodes}} </td>
+                        </ng-container> -->
 
                         <ng-container matColumnDef="storageclass">
                             <th mat-header-cell *matHeaderCellDef> STORAGE CLASS </th>
                             <td mat-cell *matCellDef="let pvs"> {{pvs.storageclass}} </td>
                         </ng-container>
 
+                        <!-- <ng-container matColumnDef="age">
+                            <th mat-header-cell *matHeaderCellDef> AGE </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.age}} </td>
+                        </ng-container> -->
+
                         <ng-container matColumnDef="volumemode">
                             <th mat-header-cell *matHeaderCellDef> VOLUMEMODE </th>
                             <td mat-cell *matCellDef="let pvs"> {{pvs.volumemode}} </td>
 
                 </div>
                 <div class="center">
-                    <button style="margin-right: 05px;" (click)="simulateDisaster()" mat-raised-button color="primary">Disaster</button>
+                    <button style="margin-right: 05px;" (click)="simulateDisaster()" mat-raised-button color="primary">Disaster-Simulator</button>
                 </div>
             </mat-tab>
             <mat-tab label="Backups">
index 5841a0c..58260f7 100644 (file)
@@ -160,6 +160,7 @@ export class DataFetchComponent implements OnInit {
   }
 
   onCameraIDSelection() {
+    console.log("Spotted...")
     var index: number
     console.log("Inside onCameraIDSelection.......")
     debugger;
@@ -172,7 +173,7 @@ export class DataFetchComponent implements OnInit {
       console.log(data)
      },
      error => console.log(error));
-
+     index = null;
   }
 
 
index a983446..36cda5e 100644 (file)
@@ -3,7 +3,7 @@
         <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>
     </div>
     <div style="display:flex; justify-content: center;">
-        <h3>INVENTORY STATUS</h3>
+        <h3>SHELF STATUS</h3>
     </div>
     <div class="tablepage">
         <div class="monitortable">
 
                 <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="totalCount">
-                    <th mat-header-cell *matHeaderCellDef> Total Count </th>
-                    <td mat-cell *matCellDef="let monitor"> {{monitor.totalCount}} </td>
+                <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="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>
 
index 5b4b5e1..62edbf7 100644 (file)
   .image-card {
       padding: 20px;
   }
-}
\ No newline at end of file
+}
+
+// .warn{
+//     color:orange;
+// }
+
+// .success{
+//     color:green;
+// }
\ No newline at end of file
index 64bc2b6..e17ce7d 100644 (file)
@@ -9,6 +9,8 @@ import { RoboService } from './../../app/robo.service';
 
 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
 
+import { timer } from "rxjs"
+
 @Component({
   selector: 'app-data-monitor',
   templateUrl: './data-monitor.component.html',
@@ -16,7 +18,7 @@ import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
 })
 export class DataMonitorComponent implements OnInit {
 
-  monitorColumns: string [] = ['shelfName','objType','currentCount','totalCount','time'];
+  monitorColumns: string [] = ['shelfName','objType','currentCount','maxCount','status','time'];
   monitorDataSource = new MatTableDataSource<monitorinfo>(MONITOR_INFO_LIST);
 
   monitorArrayList = [];
@@ -24,6 +26,7 @@ export class DataMonitorComponent implements OnInit {
   imageBlobUrl : any;
   image: any;
   thumbnail: any;
+  myvar: any
 
   monitorInfo = {} as monitorDetails;
 
@@ -39,22 +42,45 @@ export class DataMonitorComponent implements OnInit {
     this.inventoryDetails();
   }
 
+  timerFunc() {
+    debugger;
+    setInterval(this.refreshPage, 2000);
+    // setTimeout(this.refreshPage , 2000);
+  }
+
   refreshPage() {
+    console.log("Inside refreshPage....")
     this.inventoryDetails();
     this.monitorDetails();
   }
 
   monitorDetails() {
     debugger;
+    // setInterval(function(){ 
+    //   console.log("Oooo Yeaaa!");
+    //   this.roboService.getMonitorImage()
+    //     .subscribe( (data:any) => {
+          
+    //   debugger;
+    //   console.log(data);
+    //   // referred https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular
+      
+    //   let objectURL = 'data:image/jpeg;base64,' + data.image;
+    //   this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
+
+    //  },
+    //  error => console.log(error));
+
+
+    // }, 2000);
     this.roboService.getMonitorImage()
         .subscribe( (data:any) => {
           
       debugger;
-      console.log(data);
-      // referred https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular
       
       let objectURL = 'data:image/jpeg;base64,' + data.image;
       this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
+      debugger;
 
      },
      error => console.log(error));    
@@ -62,6 +88,21 @@ export class DataMonitorComponent implements OnInit {
   }
 
   inventoryDetails() {
+    console.log("inventoryDetails started....")
+
+    // setInterval(function(){ 
+    //   console.log("Oooo!");
+    //   this.roboService.getMonitorInfo()
+    //   .subscribe(data => {
+    //   console.log(data);
+    //   this.monitorInfo = data;
+      
+    //   this.monitorArrayList = data.InventryData;
+    //   this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
+    //   this.monitorDataSource.paginator = this.paginator;
+    //  },
+    //  error => console.log(error));
+    // }, 2000);
     this.roboService.getMonitorInfo()
       .subscribe(data => {
       console.log(data);
@@ -72,10 +113,23 @@ export class DataMonitorComponent implements OnInit {
       this.monitorDataSource.paginator = this.paginator;
      },
      error => console.log(error));
+     console.log("inventoryDetails finished...")
+   }
+
+   getColor(clr) {
+      if(clr == "Mostly Filled"){
+        return "green"
+      }
+      if(clr == "Partially Filled"){
+        return "orange"
+      }
+      if(clr == "Needs Filling"){
+        return "red"
+      }
    }
 
 }
 
 const MONITOR_INFO_LIST: monitorinfo[] = [
-  { shelfName: '', ObjType: '', currentCount: '', totalCount: '', time: '' }
+  { shelfName: '', ObjType: '', currentCount: '', maxCount: '', status: '', time: '' }
 ];
index dad1e26..e244712 100644 (file)
@@ -27,9 +27,10 @@ export interface monitorImage {
 
 export interface monitorinfo {
   shelfName: string;
-       ObjType: string;
+  ObjType: string;
   currentCount: string;
-  totalCount: string;
+  maxCount: string;
+  status: string;
   time: string;
 }
 
index b74e7b7..6546fe7 100644 (file)
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable,throwError } from 'rxjs'
 import { timer, Subscription, pipe } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 import { cameraData, camerainfo, cameraDetails, monitorDetails, monitorinfo, cameraID, appsPvcs, backupRestore, monitorImage } from './datainterface'
 
@@ -20,7 +21,7 @@ export class RoboService {
   private cameraDetailsUrl = this.inventoryBaseUrl + '/v1/monitor/cameras'
   private cameraDetails_url = './../assets/data/sample.json'
 
-  private monitorDetails_url = './../assets/data/sample.json'
+  private monitorDetails_url = './../assets/data/inventory.json'
   private monitorDetailsUrl = this.inventoryBaseUrl + '/v1/inventry/table'
 
   private monitorImageUrl = this.inventoryBaseUrl + '/v1/inventry/image'
@@ -32,7 +33,7 @@ export class RoboService {
 
   private backupRestoreDetailsUrl = this.baseUrl + '/v1/robo/backup-restore'
   
-  //private backupRestoreDetails_url = './../assets/data/backuprestore.json'
+  private backupRestoreDetails_url = './../assets/data/backuprestore.json'
 
   private postBackupDetailsUrl = this.baseUrl + '/v1/robo/backup'
 
@@ -70,8 +71,15 @@ export class RoboService {
     return this.http.get<any>(this.monitorDetailsUrl);
   }
 
+  
+
   getMonitorImage(): Observable<any> {
     debugger;
+    // return timer(0, 2000)
+    //     .pipe(
+          
+    //        switchMap(_ => this.http.get(this.monitorImageUrl)),
+    //     );
     return this.http.get<any>(this.monitorImageUrl);
   }
 
@@ -79,7 +87,9 @@ export class RoboService {
   triggerDetection(data): Observable<any> {
     console.log(data);
     debugger;
+    this.triggerObjUrl = this.inventoryBaseUrl + '/v1/monitor/cameras/';
     this.triggerObjUrl = this.triggerObjUrl + data;
+    
     debugger;
     console.log(this.triggerObjUrl);
     return this.http.get<any>(this.triggerObjUrl)
@@ -89,6 +99,10 @@ export class RoboService {
     return this.http.get<appsPvcs>(this.appsPvcsDetailsUrl);
   }
 
+  // getBackupRestoreInfo(): Observable<backupRestore> {
+    // }
+    //   return this.http.get<backupRestore>(this.backupRestoreDetails_url);
+
   getBackupRestoreInfo(): Observable<any> {
     return this.http.get<any>(this.backupRestoreDetailsUrl);
   }
index 2300278..6806487 100644 (file)
@@ -3,15 +3,20 @@
         {
             "shelfName": "Shelf1",
             "ObjType": "Bottles",
-            "currentCount": "1",
-            "totalCount": "3",
+            "status": "Mostly Filled",
             "time": "Tue Feb 26 12:11:59 2020"
         },
         {
             "shelfName": "Shelf2",
             "ObjType": "Bottles",
-            "currentCount": "3",
-            "totalCount": "3",
+            "time": "Tue Feb 26 12:15:00 2020",
+            "status": "Needs Filling"
+
+        },
+        {
+            "shelfName": "Shelf2",
+            "ObjType": "Bottles",
+            "status": "Partially Filled",
             "time": "Tue Feb 26 12:15:00 2020"
         }
     ]
diff --git a/example-apps/ROBO/RoboUI/src/assets/images/common-appgridvue.png b/example-apps/ROBO/RoboUI/src/assets/images/common-appgridvue.png
new file mode 100644 (file)
index 0000000..e23b89e
Binary files /dev/null and b/example-apps/ROBO/RoboUI/src/assets/images/common-appgridvue.png differ
diff --git a/example-apps/ROBO/RoboUI/src/assets/images/sample.jpg b/example-apps/ROBO/RoboUI/src/assets/images/sample.jpg
new file mode 100644 (file)
index 0000000..0571429
Binary files /dev/null and b/example-apps/ROBO/RoboUI/src/assets/images/sample.jpg differ