[YUNIKORN-1922] show queue pending resources (#134)

The queue shows pending resources besides the already existing
allocated, max and guaranteed resources.

Closes: #134

Signed-off-by: Wilfred Spiegelenburg <wilfreds@apache.org>
diff --git a/json-db.json b/json-db.json
index edbd71f..f713dd4 100644
--- a/json-db.json
+++ b/json-db.json
@@ -19,9 +19,9 @@
     "status": "Active",
     "partition": "default",
     "pendingResource": {
-      "memory": 0,
-      "pods": 0,
-      "vcore": 0
+      "memory": 2147483648,
+      "pods": 10,
+      "vcore": 4000
     },
     "maxResource": {
       "ephemeral-storage": 99833802265,
@@ -130,9 +130,9 @@
         "status": "Active",
         "partition": "",
         "pendingResource": {
-          "memory": 0,
-          "pods": 0,
-          "vcore": 0
+          "memory": 2147483648,
+          "pods": 10,
+          "vcore": 4000
         },
         "maxResource": {
           "memory": 500000000,
diff --git a/src/app/components/queues-view/queues-view.component.html b/src/app/components/queues-view/queues-view.component.html
index 2f769f0..d66af7b 100644
--- a/src/app/components/queues-view/queues-view.component.html
+++ b/src/app/components/queues-view/queues-view.component.html
@@ -71,6 +71,13 @@
               ></div>
             </div>
             <div class="flex-grid item-wrapper">
+              <div class="left-item">Pending:</div>
+              <div
+                class="right-item"
+                [innerHTML]="resourceValueFormatter(selectedQueue.pendingResource)"
+              ></div>
+            </div>
+            <div class="flex-grid item-wrapper">
               <div class="left-item">Max:</div>
               <div
                 class="right-item"
diff --git a/src/app/models/queue-info.model.ts b/src/app/models/queue-info.model.ts
index 827e975..30a83d9 100644
--- a/src/app/models/queue-info.model.ts
+++ b/src/app/models/queue-info.model.ts
@@ -23,6 +23,7 @@
   maxResource: string = '';
   guaranteedResource: string = '';
   allocatedResource: string = '';
+  pendingResource: string='';
   absoluteUsedCapacity: string = '';
   absoluteUsedPercent: number = 0;
   parentQueue: null | QueueInfo = null;
diff --git a/src/app/services/scheduler/scheduler.service.ts b/src/app/services/scheduler/scheduler.service.ts
index edd6759..22174e0 100644
--- a/src/app/services/scheduler/scheduler.service.ts
+++ b/src/app/services/scheduler/scheduler.service.ts
@@ -288,10 +288,12 @@
     const maxResource = data['maxResource'] as SchedulerResourceInfo;
     const guaranteedResource = data['guaranteedResource'] as SchedulerResourceInfo;
     const allocatedResource = data['allocatedResource'] as SchedulerResourceInfo;
+    const pendingResource = data['pendingResource'] as SchedulerResourceInfo;
     const absUsedCapacity = data['absUsedCapacity'] as SchedulerResourceInfo;
     queue.maxResource = this.formatResource(maxResource);
     queue.guaranteedResource = this.formatResource(guaranteedResource);
     queue.allocatedResource = this.formatResource(allocatedResource);
+    queue.pendingResource = this.formatResource(pendingResource);
     queue.absoluteUsedCapacity = this.formatPercent(absUsedCapacity);
     queue.absoluteUsedPercent = this.absUsagePercent(absUsedCapacity);
   }