From ffa34b03e190b2367b716f3ca8efed21caf5fb81 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Mon, 17 Aug 2020 18:25:31 +0200
Subject: [PATCH] B #5014: Fix cloud view widget with group vms (#155)

(cherry picked from commit d4337e91bdbf66736b32b7dc8957e436f51f2b8a)
---
 src/sunstone/public/app/tabs/provision-tab.js |  11 ++
 .../provision-tab/dashboard/group-vms.hbs     | 181 +++++++++---------
 2 files changed, 103 insertions(+), 89 deletions(-)

diff --git a/src/sunstone/public/app/tabs/provision-tab.js b/src/sunstone/public/app/tabs/provision-tab.js
index 2cf1334910..9c73f1c6af 100644
--- a/src/sunstone/public/app/tabs/provision-tab.js
+++ b/src/sunstone/public/app/tabs/provision-tab.js
@@ -397,6 +397,17 @@ define(function(require) {
           "start_time": start_time,
           "end_time": end_time
         };
+        
+        OpenNebula.VM.accounting({
+          //timeout: true,
+          success: function(req, response){
+            var context = $("#provision_group_vms_dashboard");
+            Accounting.fillAccounting(context, req, response, false);
+          },
+          error: Notifier.onError,
+          data: options
+        });
+
         OpenNebula.VM.list({
           timeout: true,
           success: function (request, item_list){
diff --git a/src/sunstone/public/app/tabs/provision-tab/dashboard/group-vms.hbs b/src/sunstone/public/app/tabs/provision-tab/dashboard/group-vms.hbs
index 018a1cb1d6..80ee339c86 100644
--- a/src/sunstone/public/app/tabs/provision-tab/dashboard/group-vms.hbs
+++ b/src/sunstone/public/app/tabs/provision-tab/dashboard/group-vms.hbs
@@ -13,104 +13,107 @@
 {{! See the License for the specific language governing permissions and        }}
 {{! limitations under the License.                                             }}
 {{! -------------------------------------------------------------------------- }}
-<div class="row" id="provision_group_vms_dashboard">
-  <div class="large-12 columns">
-    <h4>{{tr "Group Virtual Machines"}}</h4>
-    <div class="row">
-      <div class="large-3 medium-4 columns text-center">
-        <div class="row">
-          <div class="large-12 columns">
-            <h2>
-              <span  id="provision_dashboard_group_total"> <i class="fas fa-spinner fa-spin"></i>
-              </span>
-              <br>
-              <small class="subheader">{{tr "TOTAL"}}</small>
-            </h2>
-          </div>
-        </div>
-        <div class="row">
-          <div class="large-12 columns">
-            <a href"#" class="medium button success provision_create_vm_button"> <i class="fas fa-lg fa-plus-square"/></a>
-            <a href"#" class="medium button provision_vms_list_button">
-              <i class="fas fa-lg fa-th"/></a>
-          </div>
-        </div>
-      </div>
-      <div class="large-9 medium-8 columns text-center">
-        <div class="large-10 medium-12 large-centered columns">
-        <div class="large-3 medium-3 small-6 columns">
-          <h4>
-            <span id="provision_dashboard_group_running">
-              <i class="fas fa-spinner fa-spin"></i>
-            </span><br>
-            <small class="subheader">{{tr "RUNNING"}}</small>
-          </h4>
-        </div>
-        <div class="large-3 medium-3 small-6 columns ">
-          <h4>
-            <span id="provision_dashboard_group_deploying" >
-              <i class="fas fa-spinner fa-spin"></i>
-            </span><br>
-            <small class="subheader">{{tr "DEPLOYING"}}</small>
-          </h4>
-        </div>
-        <div class="large-3 medium-3 small-6 columns">
-          <h4>
-            <span  id="provision_dashboard_group_off">
-              <i class="fas fa-spinner fa-spin"></i>
-            </span><br>
-            <small class="subheader">{{tr "OFF"}}</small>
-          </h4>
-        </div>
-        <div class="large-3 medium-3 small-6 columns ">
-          <h4>
-            <span  id="provision_dashboard_group_error">
-              <i class="fas fa-spinner fa-spin"></i>
-            </span><br>
-            <small class="subheader">{{tr "ERROR"}}</small>
-          </h4>
-        </div>
-        <br>
-        </div>
-        <div class="large-12 columns" id="dashboard_group_vm_accounting">
-          <div class="large-4 medium-12 columns text-center">
-            <input style="display:none;" value="vm" id="acct_group_by"/>
-            <div class="row">
-              <div class="large-12 columns graph_legend">
-                <span class="subheader">
-                  <span>{{tr "CPU hours"}}</span>
+<fieldset class="large-12 columns dashboard-fieldset" id="provision_group_vms_dashboard">
+  <div class="row">
+    <div class="large-12 columns">
+      <h4>{{tr "Group Virtual Machines"}}</h4>
+      <div class="row">
+        <div class="large-3 medium-4 columns text-center">
+          <div class="row">
+            <div class="large-12 columns">
+              <h2>
+                <span  id="provision_dashboard_group_total"> <i class="fas fa-spinner fa-spin"></i>
                 </span>
-              </div>
-              <div class="large-12 columns">
-                <div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
-              </div>
+                <br>
+                <small class="subheader">{{tr "TOTAL"}}</small>
+              </h2>
             </div>
           </div>
-          <div class="large-4 medium-12 columns text-center">
-            <div class="row">
-              <div class="large-12 columns graph_legend">
-                <span class="subheader">
-                  <span>{{tr "Memory GB hours"}}</span>
-                </span>
-              </div>
-              <div class="large-12 columns">
-                <div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
-              </div>
+          <div class="row">
+            <div class="large-12 columns">
+              <a href"#" class="medium button success provision_create_vm_button"> <i class="fas fa-lg fa-plus-square"/></a>
+              <a href"#" class="medium button provision_vms_list_button">
+                <i class="fas fa-lg fa-th"/></a>
             </div>
           </div>
-          <div class="large-4 medium-12 columns text-center">
-            <div class="row">
-              <div class="large-12 columns graph_legend">
-                <span class="subheader">
-                  <span>{{tr "Disk MB hours"}}</span>
-                </span>
+        </div>
+        <div class="large-9 medium-8 columns text-center">
+          <div class="large-10 medium-12 large-centered columns">
+          <div class="large-3 medium-3 small-6 columns">
+            <h4>
+              <span id="provision_dashboard_group_running">
+                <i class="fas fa-spinner fa-spin"></i>
+              </span><br>
+              <small class="subheader">{{tr "RUNNING"}}</small>
+            </h4>
+          </div>
+          <div class="large-3 medium-3 small-6 columns ">
+            <h4>
+              <span id="provision_dashboard_group_deploying" >
+                <i class="fas fa-spinner fa-spin"></i>
+              </span><br>
+              <small class="subheader">{{tr "DEPLOYING"}}</small>
+            </h4>
+          </div>
+          <div class="large-3 medium-3 small-6 columns">
+            <h4>
+              <span  id="provision_dashboard_group_off">
+                <i class="fas fa-spinner fa-spin"></i>
+              </span><br>
+              <small class="subheader">{{tr "OFF"}}</small>
+            </h4>
+          </div>
+          <div class="large-3 medium-3 small-6 columns ">
+            <h4>
+              <span  id="provision_dashboard_group_error">
+                <i class="fas fa-spinner fa-spin"></i>
+              </span><br>
+              <small class="subheader">{{tr "ERROR"}}</small>
+            </h4>
+          </div>
+          <br>
+          </div>
+          <div class="large-12 columns" id="dashboard_group_vm_accounting">
+            <div class="large-4 medium-12 columns text-center">
+              <input style="display:none;" value="vm" id="acct_group_by"/>
+              <div class="row">
+                <div class="large-12 columns graph_legend">
+                  <span class="subheader">
+                    <span>{{tr "CPU"}}</span>
+                  </span>
+                </div>
+                <div class="large-12 columns">
+                  <div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
+                </div>
               </div>
-              <div class="large-12 columns">
-                <div class="large-12 columns centered graph" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
+            </div>
+            <div class="large-4 medium-12 columns text-center">
+              <div class="row">
+                <div class="large-12 columns graph_legend">
+                  <span class="subheader">
+                    <span>{{tr "Memory GB"}}</span>
+                  </span>
+                </div>
+                <div class="large-12 columns">
+                  <div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
+                </div>
+              </div>
+            </div>
+            <div class="large-4 medium-12 columns text-center">
+              <div class="row">
+                <div class="large-12 columns graph_legend">
+                  <span class="subheader">
+                    <span>{{tr "Disk MB"}}</span>
+                  </span>
+                </div>
+                <div class="large-12 columns">
+                  <div class="large-12 columns centered graph" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</fieldset>