From 94ed94c3fb214c923b84e34884dbc10d824dfeb7 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian@cloud.com>
Date: Wed, 14 Dec 2011 14:55:50 -0800
Subject: [PATCH] Implement dashboard capacity section

---
 ui/css/cloudstack3.css       |   6 +-
 ui/index-test.html           |  40 ++++++++-----
 ui/index.jsp                 |  32 +++++------
 ui/scripts-test/dashboard.js |  60 ++++++++++++++++++--
 ui/scripts/dashboard.js      | 107 +++++++++++++++++++++++++++++++----
 5 files changed, 195 insertions(+), 50 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 4335b98d9c3..4e41c2159f8 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -3128,15 +3128,15 @@ Dialogs*/
 }
 
 .dashboard.admin .dashboard-container .stats ul li .name {
-  width: 132px;
+  width: 121px;
   float: left;
-  margin: 19px 40px 0 0;
+  margin: 19px 15px 0 0;
 }
 
 .dashboard.admin .dashboard-container .stats ul li div.value {
   float: left;
   background: url(../images/bg-gradients.png) 0px -51px;
-  width: 179px;
+  width: 212px;
   height: 100%;
   border-left: 1px solid #C8C2C2;
   border-right: 1px solid #C8C2C2;
diff --git a/ui/index-test.html b/ui/index-test.html
index 0e78c496aa7..388bdab7785 100644
--- a/ui/index-test.html
+++ b/ui/index-test.html
@@ -510,6 +510,16 @@
                     </div>
                   </div>
 
+                  <!-- Network domain-->
+                  <div class="field odd">
+                    <div class="name">
+                      <span>Network domain</span>
+                    </div>
+                    <div class="value">
+                      <input type="text" name="networkdomain" />
+                    </div>
+                  </div>
+
                   <div class="conditional vlan">
                     <!-- Guest CIDR -->
                     <div class="field">
@@ -524,7 +534,7 @@
                   </div>
 
                   <!-- Public -->
-                  <div class="field odd">
+                  <div class="field">
                     <div class="name">
                       <span>Public</span>
                     </div>
@@ -535,7 +545,7 @@
 
                   <div class="conditional public">
                     <!-- Domain -->
-                    <div class="field">
+                    <div class="field odd">
                       <div class="name">
                         <span>Domain</span>
                       </div>
@@ -889,7 +899,7 @@
             <div class="title">
               <span>System-wide capacity</span>
             </div>
-            <div class="selects">
+            <div class="selects" style="display:none;">
               <div class="select">
                 <label>Zone:</label>
                 <select>
@@ -908,49 +918,49 @@
                 <div class="name">Public IP Addresses</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="publicIPAllocated">0</span> / <span class="total" data-item="publicIPTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="publicIPPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="publicIPPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">Private IP Addresses</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="privateIPAllocated"></span> / <span class="total" data-item="privateIPTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="privateIPPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="privateIPPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">Memory Allocated</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0mb</span> / <span class="total">0mb</span>
+                    Allocated: <span class="allocated" data-item="memoryAllocated"></span> / <span class="total" data-item="memoryTotal"></span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="memoryPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="memoryPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">CPU Allocated</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="cpuAllocated"></span> / <span class="total" data-item="cpuTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="cpuPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="cpuPercentage"></span>%</div>
               </li>
             </ul>
           </div>
diff --git a/ui/index.jsp b/ui/index.jsp
index 5d73040fa72..85f5a5fd117 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -509,7 +509,7 @@
                       <input type="text" name="internaldns2" />
                     </div>
                   </div>
-                  
+
                   <!-- Network domain-->
                   <div class="field odd">
                     <div class="name">
@@ -518,8 +518,8 @@
                     <div class="value">
                       <input type="text" name="networkdomain" />
                     </div>
-                  </div>  
-                  
+                  </div>
+
                   <div class="conditional vlan">
                     <!-- Guest CIDR -->
                     <div class="field">
@@ -899,7 +899,7 @@
             <div class="title">
               <span>System-wide capacity</span>
             </div>
-            <div class="selects">
+            <div class="selects" style="display:none;">
               <div class="select">
                 <label>Zone:</label>
                 <select>
@@ -918,49 +918,49 @@
                 <div class="name">Public IP Addresses</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="publicIPAllocated">0</span> / <span class="total" data-item="publicIPTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="publicIPPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="publicIPPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">Private IP Addresses</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="privateIPAllocated"></span> / <span class="total" data-item="privateIPTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="privateIPPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="privateIPPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">Memory Allocated</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0mb</span> / <span class="total">0mb</span>
+                    Allocated: <span class="allocated" data-item="memoryAllocated"></span> / <span class="total" data-item="memoryTotal"></span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="memoryPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="memoryPercentage"></span>%</div>
               </li>
               <li>
                 <div class="name">CPU Allocated</div>
                 <div class="value">
                   <div class="content">
-                    Allocated: <span class="allocated">0</span> / <span class="total">0</span>
+                    Allocated: <span class="allocated" data-item="cpuAllocated"></span> / <span class="total" data-item="cpuTotal">0</span>
                   </div>
                 </div>
                 <div class="chart">
-                  <div class="chart-line" style="width: 0%;"></div>
+                  <div class="chart-line" style="width: 0%;" data-item="cpuPercentage"></div>
                 </div>
-                <div class="percentage"><span class="value">0</span>%</div>
+                <div class="percentage"><span class="value" data-item="cpuPercentage"></span>%</div>
               </li>
             </ul>
           </div>
diff --git a/ui/scripts-test/dashboard.js b/ui/scripts-test/dashboard.js
index 70e56f4eb44..705cf3cd425 100644
--- a/ui/scripts-test/dashboard.js
+++ b/ui/scripts-test/dashboard.js
@@ -1,11 +1,61 @@
-(function(cloudStack) {
+(function(cloudStack, testData) {
   // Admin dashboard
   cloudStack.sections.dashboard = {
     title: 'Dashboard',
     show: function() {
-      return $('<img>').attr({
-        src: 'images/screens/Dashboard2.jpg'
+      var $dashboard = $('#template').find('div.dashboard.admin').clone();
+
+      $dashboard.find('.view-all').click(function() {
+        $('#navigation li.events').click();
+      });
+
+      var getData = function() {
+        // Populate data
+        $dashboard.find('[data-item]').hide();
+        cloudStack.sections.dashboard.dataProvider({
+          response: {
+            success: function(args) {
+              var data = args.data;
+
+              $.each(data, function(key, value) {
+                var $elem = $dashboard.find('[data-item=' + key + ']');
+
+                $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;
+    },
+
+    dataProvider: function(args) {
+      args.response.success({
+        data: {
+          publicIPAllocated: 50,
+          publicIPTotal: 100,
+          publicIPPercentage: 50,
+          privateIPAllocated: 50,
+          privateIPTotal: 100,
+          privateIPPercentage: (100 / 50) * 10,
+          memoryAllocated: 256,
+          memoryTotal: 1024,
+          memoryPercentage: (1024 / 256) * 10,
+          cpuAllocated: 500,
+          cpuTotal: 1200,
+          cpuPercentage: (1200 / 500) * 10
+        }
       });
     }
-  }; 
-})(cloudStack);
+  };
+})(cloudStack, testData);
diff --git a/ui/scripts/dashboard.js b/ui/scripts/dashboard.js
index 5b7a2b28f75..0de0544312e 100644
--- a/ui/scripts/dashboard.js
+++ b/ui/scripts/dashboard.js
@@ -9,18 +9,103 @@
         $('#navigation li.events').click();
       });
 
-      return $dashboard;
-    }
-  };
+      var getData = function() {
+        // Populate data
+        $dashboard.find('[data-item]').hide();
+        cloudStack.sections.dashboard.dataProvider({
+          response: {
+            success: function(args) {
+              var data = args.data;
 
-  // User dashboard
-  /*
-  cloudStack.sections['dashboard-user'] = {
-    title: 'Dashboard (user)',
-    show: function() {
-      return $('#template').find('div.dashboard.user').clone();
+              $.each(data, function(key, value) {
+                var $elem = $dashboard.find('[data-item=' + key + ']');
+
+                $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;
+    },
+
+    dataProvider: function(args) {
+      var dataFns = {
+        zones: function(data) {
+          $.ajax({
+            url: createURL('listZones'),
+            success: function(json) {
+              dataFns.capacity({
+                zones: json.listzonesresponse.zone
+              });
+            }
+          });
+        },
+        capacity: function(data) {
+          if (data.zones) {
+            $.ajax({
+              url: createURL('listCapacity'),
+              success: function(json) {
+                var capacities = json.listcapacityresponse.capacity;
+
+                var capacity = function(id, converter) {
+                  return $.grep(capacities, function(capacity) {
+                    return capacity.type == id;
+                  })[0];
+                };
+
+                complete($.extend(data, {
+                  publicIPAllocated: capacity(8).capacityused,
+                  publicIPTotal: capacity(8).capacitytotal,
+                  publicIPPercentage: parseInt(capacity(8).percentused),
+                  privateIPAllocated: capacity(5).capacityused,
+                  privateIPTotal: capacity(5).capacitytotal,
+                  privateIPPercentage: parseInt(capacity(8).percentused),
+                  memoryAllocated: cloudStack.converters.convertBytes(capacity(0).capacityused),
+                  memoryTotal: cloudStack.converters.convertBytes(capacity(0).capacitytotal),
+                  memoryPercentage: parseInt(capacity(0).percentused),
+                  cpuAllocated: cloudStack.converters.convertHz(capacity(1).capacityused),
+                  cpuTotal: cloudStack.converters.convertHz(capacity(1).capacitytotal),
+                  cpuPercentage: parseInt(capacity(1).percentused)
+                }));
+              }
+            });
+          } else {
+            complete($.extend(data, {
+              publicIPAllocated: 0,
+              publicIPTotal: 0,
+              publicIPPercentage: 0,
+              privateIPAllocated: 0,
+              privateIPTotal: 0,
+              privateIPPercentage: 0,
+              memoryAllocated: 0,
+              memoryTotal: 0,
+              memoryPercentage: 0,
+              cpuAllocated: 0,
+              cpuTotal: 0,
+              cpuPercentage: 0
+            }));
+          }
+        }
+      };
+
+      var complete = function(data) {
+        args.response.success({
+          data: data
+        });
+      };
+
+      dataFns.zones({});
     }
   };
-  */
-  
 })(cloudStack, testData);