From 134b38bb2ddd460e86be32bb02bb70cb9f66d682 Mon Sep 17 00:00:00 2001
From: bfederle <bfederle@gmail.com>
Date: Mon, 19 Dec 2011 14:12:01 -0800
Subject: [PATCH] bug 12211

Add system resources, users, alerts to project dashboard
---
 ui/css/cloudstack3.css           |   5 +-
 ui/index.jsp                     | 111 ++++---------------------------
 ui/scripts/projects.js           | 108 ++++++++++++++++++++++++++++++
 ui/scripts/ui-custom/projects.js |  62 +++++++++++++----
 4 files changed, 174 insertions(+), 112 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 156746c1bc2..07b0ecd17f0 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -6837,6 +6837,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 
 .info-boxes .info-box.events {
   margin-top: 4px;
+  min-height: 100px;
+  width: 228px;
 }
 
 .info-boxes .info-box.events ul {
@@ -6854,7 +6856,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 .info-boxes .info-box ul li {
   width: 224px;
   margin: 0 2px 0 0;
-  height: 36px;
+  display: inline-block;
   border-bottom: 1px solid #BDD2DF;
   border-top: 1px solid #FFFFFF;
 }
@@ -6895,6 +6897,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   position: relative;
   left: 0px;
   top: 2px;
+  float: left;
 }
 
 .info-boxes .info-box .title .button {
diff --git a/ui/index.jsp b/ui/index.jsp
index 699f2522f94..e6a600d75c1 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -772,13 +772,13 @@
                   <div class="overview">
                     <!-- Running -->
                     <div class="overview-item running">
-                      <div class="total" data-item="virtualMachinesRunning">12</div>
+                      <div class="total" data-item="runningInstances">5</div>
                       <div class="label">Running</div>
                     </div>
 
                     <!-- Stopped -->
                     <div class="overview-item stopped">
-                      <div class="total" data-item="virtualMachinesStopped">2</div>
+                      <div class="total" data-item="stoppedInstances">10</div>
                       <div class="label">Stopped</div>
                     </div>
                   </div>
@@ -789,27 +789,18 @@
                   <span class="header">Storage</span>
                   <div class="icon"></div>
                   <div class="overview">
-                    <div class="total" data-item="storageCapacityTotal">171</div>
-                    <div class="label">GB/mo</div>
+                    <div class="total" data-item="totalVolumes">10</div>
+                    <div class="label">volumes</div>
                   </div>
                 </li>
 
                 <!-- Bandwidth -->
-                <li class="block bandwidth">
+                <li class="block storage bandwidth">
                   <span class="header">Bandwidth</span>
                   <div class="icon"></div>
                   <div class="overview">
-                    <!-- In -->
-                    <div class="overview-item in">
-                      <div class="total" data-item="virtualMachinesRunning">2.3</div>
-                      <div class="label">In GB</div>
-                    </div>
-
-                    <!-- Out -->
-                    <div class="overview-item out">
-                      <div class="total" data-item="virtualMachinesRunning">1.5</div>
-                      <div class="label">Out GB</div>
-                    </div>
+                    <div class="total" data-item="totalBandwidth">200</div>
+                    <div class="label">mb/s</div>
                   </div>
                 </li>
               </ul>
@@ -822,47 +813,9 @@
               <div class="head">
                 <span>Users</span>
               </div>
-              <ul class="status_box good">
+              <ul class="status_box good" data-item="users">
                 <li class="block user">
-                  <span class="header">Will</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Brian</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Sonny</span>
-                  <div class="icon"></div>
-                </li>
-                <li class="block user">
-                  <span class="header">Will</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Brian</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Sonny</span>
-                  <div class="icon"></div>
-                </li>
-                <li class="block user">
-                  <span class="header">Will</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Brian</span>
-                  <div class="icon"></div>
-                </li>
-
-                <li class="block user">
-                  <span class="header">Sonny</span>
+                  <span class="header" data-list-item="account"></span>
                   <div class="icon"></div>
                 </li>
               </ul>
@@ -923,50 +876,10 @@
                 <span class="arrow"></span>
               </div>
             </div>
-            <ul>
+            <ul data-item="events">
               <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li>
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li>
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li>
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li>
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li>
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
-              </li>
-              <li class="odd">
-                <div class="date"><span>12/01</span></div>
-                <div class="desc">Event</div>
+                <div class="date"><span data-list-item="date"></span></div>
+                <div class="desc" data-list-item="desc"></div>
               </li>
             </ul>
           </div>
diff --git a/ui/scripts/projects.js b/ui/scripts/projects.js
index 3947ba7b965..59f7e20b683 100644
--- a/ui/scripts/projects.js
+++ b/ui/scripts/projects.js
@@ -4,6 +4,114 @@
       return window.g_projectsInviteRequired;
     },
 
+    dashboard: function(args) {
+      var dataFns = {
+        instances: function(data) {
+          $.ajax({
+            url: createURL('listVirtualMachines'),
+            success: function(json) {
+              var instances = json.listvirtualmachinesresponse.virtualmachine ? 
+                    json.listvirtualmachinesresponse.virtualmachine : [];
+              
+              dataFns.storage($.extend(data, {
+                runningInstances: $.grep(instances, function(instance) {
+                  return instance.state == 'Running';
+                }).length,
+                stoppedInstances: $.grep(instances, function(instance) {
+                  return instance.state == 'Stopped';
+                }).length,
+                totalInstances: instances.length
+              }));
+            }
+          });
+        },
+
+        storage: function(data) {
+          $.ajax({
+            url: createURL('listVolumes'),
+            success: function(json) {
+              dataFns.bandwidth($.extend(data, {
+                totalVolumes: json.listvolumesresponse.volume ?
+                  json.listvolumesresponse.volume.count : 0
+              }));
+            }
+          });
+        },
+
+        bandwidth: function(data) {
+          var totalBandwidth = 0;
+          $.ajax({
+            url: createURL('listNetworks'),
+            success: function(json) {
+              var networks = json.listnetworksresponse.network ?
+                    json.listnetworksresponse.network : [];
+              $(networks).each(function() {
+                var network = this;
+                $.ajax({
+                  url: createURL('listNetworkOfferings'),
+                  async: false,
+                  data: {
+                    id: network.networkofferingid
+                  },
+                  success: function(json) {
+                    totalBandwidth += 
+                    json.listnetworkofferingsresponse.networkoffering[0].networkrate;
+                  }
+                });
+              });
+
+              dataFns.users($.extend(data, {
+                totalBandwidth: totalBandwidth
+              }));
+            }
+          });
+        },
+
+        users: function(data) {
+          $.ajax({
+            url: createURL('listProjectAccounts'),
+            success: function(json) {
+              var users = json.listprojectaccountsresponse.projectaccount;
+
+              dataFns.events($.extend(data, {
+                users: $.map(users, function(user) {
+                  return {
+                    account: user.account
+                  };
+                })
+              }));
+            }
+          });
+        },
+
+        events: function(data) {
+          $.ajax({
+            url: createURL('listEvents', { ignoreProject: true }),
+            success: function(json) {
+              var events = json.listeventsresponse.event;
+
+              complete($.extend(data, {
+                events: $.map(events, function(event) {
+                  return {
+                    date: event.created.substr(5, 2) + '/' + event.created.substr(8, 2) + '/' + event.created.substr(2, 2),
+                    desc: event.description
+                  };
+                })
+              }));
+            }
+          });
+        }
+      };
+
+      var complete = function(data) {
+        args.response.success({
+          data: data
+        });
+      };
+
+      dataFns.instances();
+    },
+
     add: function(args) {
       setTimeout(function() {
         $.ajax({
diff --git a/ui/scripts/ui-custom/projects.js b/ui/scripts/ui-custom/projects.js
index a5132411b76..91f9c0c0872 100644
--- a/ui/scripts/ui-custom/projects.js
+++ b/ui/scripts/ui-custom/projects.js
@@ -20,8 +20,55 @@
       var tabs = {
         overview: function() {
           var $dashboard = $('#template').find('.project-dashboard-view').clone();
+          $dashboard.data('tab-title', 'Dashboard');
 
-          $dashboard.data('tab-title', 'Dashboard')
+          var getData = function() {
+            // Populate data
+            $dashboard.find('[data-item]').hide();
+            cloudStack.projects.dashboard({
+              response: {
+                success: function(args) {
+                  var data = args.data;
+
+                  // Iterate over data; populate corresponding DOM elements
+                  $.each(data, function(key, value) {
+                    var $elem = $dashboard.find('[data-item=' + key + ']');
+
+                    // This assumes an array of data
+                    if ($elem.is('ul')) {
+                      $elem.show();
+                      var $liTmpl = $elem.find('li').remove();
+                      $(value).each(function() {
+                        var item = this;
+                        var $li = $liTmpl.clone().appendTo($elem).hide();
+
+                        $.each(item, function(arrayKey, arrayValue) {
+                          var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
+
+                          $arrayElem.html(arrayValue);
+                        });
+
+                        $li.attr({ title: item.description });
+
+                        $li.fadeIn();
+                      });
+                    } else {
+                      $elem.each(function() {
+                        var $item = $(this);
+                        if ($item.hasClass('chart-line')) {
+                          $item.show().animate({ width: value + '%' });
+                        } else {
+                          $item.hide().html(value).fadeIn();
+                        }
+                      }); 
+                    }
+                  });
+                }
+              }
+            });
+          };
+
+          getData();
 
           return $dashboard;
         }
@@ -397,7 +444,6 @@
             dialogClass: 'project-selector-dialog',
             width: 420
           }).closest('.ui-dialog').overlay();
-          showDashboard();
         }
       });
 
@@ -416,6 +462,8 @@
             .filter(function() {
               return $(this).data('json-obj').name == cloudStack.context.projects[0].name;
             }).attr('selected', 'selected');
+          showDashboard();
+
 
           ////
           // Hidden for now
@@ -473,7 +521,6 @@
    */
   cloudStack.uiCustom.projects = function(args) {
     var $dashboardNavItem = $('#navigation li.navigation-item.dashboard');
-    var $projectSelect = args.$projectSelect;
 
     // Use project dashboard
     var event = function() {
@@ -494,15 +541,6 @@
     };
     $dashboardNavItem.bind('click', event);
 
-    // Project selector event
-    $projectSelect.change(function() {
-      cloudStack.context.projects = [
-        $projectSelect.find('option:selected').data('json-obj')
-      ];
-
-      $(window).trigger('cloudStack.fullRefresh');
-    });
-
     pageElems.selector(args);
   };