Dashboard updates

-Implement general and host alert listings

-Move dashboard UI code to ui-custom/dashbaord.js

ui/css/cloudstack3.css

@@ -3207,6 +3207,8 @@ Dialogs*/
 .dashboard.admin .dashboard-container.sub.alerts {
   float: left;
   margin: 0 17px 0 0;
+  height: 313px;
+  overflow: auto;
 }
 
 .dashboard.admin .dashboard-container.sub.alerts.last {
@@ -3214,6 +3216,9 @@ Dialogs*/
 }
 
 .dashboard.admin .dashboard-container.sub.alerts ul {
+  width: 362px;
+  height: 294px;
+  overflow: auto;
 }
 
 .dashboard.admin .dashboard-container.sub.alerts ul li {

ui/index-test.html

@@ -1442,6 +1442,7 @@
     <script src="scripts-test/installWizard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/installWizard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/projects.js" type="text/javascript"></script>
+    <script src="scripts/ui-custom/dashboard.js" type="text/javascript"></script>
     <script src="scripts-test/projects.js" type="text/javascript"></script>
     <script src="scripts-test/dashboard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/instanceWizard.js" type="text/javascript"></script>

ui/index.jsp

@@ -972,29 +972,11 @@
             <div class="title"><span>General Alerts</span></div>
             <div class="button view-all">view all</div>
           </div>
-          <ul>
+          <ul data-item="alerts">
             <li class="error">
               <div class="content">
-                <span class="title">Alert 1</span>
-                <p>Alert 1</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 2</span>
-                <p>Alert 2</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 3</span>
-                <p>Alert 3</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 4</span>
-                <p>Alert 4</p>
+                <span class="title" data-list-item="name">Alert 1</span>
+                <p data-list-item="description">Alert 1</p>
               </div>
             </li>
           </ul>
@@ -1006,29 +988,11 @@
             <div class="title"><span>Host Alerts</span></div>
             <div class="button view-all">view all</div>
           </div>
-          <ul>
+          <ul data-item="hostAlerts">
             <li class="error">
               <div class="content">
-                <span class="title">Alert 1</span>
-                <p>Alert 1</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 2</span>
-                <p>Alert 2</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 3</span>
-                <p>Alert 3</p>
-              </div>
-            </li>
-            <li class="error">
-              <div class="content">
-                <span class="title">Alert 4</span>
-                <p>Alert 4</p>
+                <span class="title" data-list-item="name">Alert 1</span>
+                <p data-list-item="description">Alert 1</p>
               </div>
             </li>
           </ul>
@@ -1447,6 +1411,7 @@
     <script src="scripts/ui-custom/login.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/projects.js" type="text/javascript"></script>
     <script src="scripts/cloudStack.js" type="text/javascript"></script>
+    <script src="scripts/ui-custom/dashboard.js" type="text/javascript"></script>
     <script src="scripts/installWizard.js" type="text/javascript"></script>
     <script src="scripts/ui-custom/installWizard.js" type="text/javascript"></script>
     <script src="scripts/projects.js" type="text/javascript"></script>

ui/scripts-test/dashboard.js

@@ -2,42 +2,7 @@
   // Admin dashboard
   cloudStack.sections.dashboard = {
     title: 'Dashboard',
-    show: function() {
-      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;
-    },
+    show: cloudStack.uiCustom.dashboard,
 
     dataProvider: function(args) {
       args.response.success({

ui/scripts/dashboard.js

@@ -1,43 +1,8 @@
-(function(cloudStack, testData) {
+(function($, cloudStack, testData) {
   // Admin dashboard
   cloudStack.sections.dashboard = {
     title: 'Dashboard',
-    show: function() {
-      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;
-    },
+    show: cloudStack.uiCustom.dashboard,
 
     dataProvider: function(args) {
       var dataFns = {
@@ -64,7 +29,7 @@
                   })[0];
                 };
 
-                complete($.extend(data, {
+                dataFns.alerts($.extend(data, {
                   publicIPAllocated: capacity(8).capacityused,
                   publicIPTotal: capacity(8).capacitytotal,
                   publicIPPercentage: parseInt(capacity(8).percentused),
@@ -81,7 +46,7 @@
               }
             });
           } else {
-            complete($.extend(data, {
+            dataFns.alerts($.extend(data, {
               publicIPAllocated: 0,
               publicIPTotal: 0,
               publicIPPercentage: 0,
@@ -96,6 +61,47 @@
               cpuPercentage: 0
             }));
           }
+        },
+
+        alerts: function(data) {
+          $.ajax({
+            url: createURL('listAlerts'),
+            data: {
+              page: 1,
+              pageSize: 4
+            },
+            success: function(json) {
+              dataFns.hostAlerts($.extend(data, {
+                alerts: $.map(json.listalertsresponse.alert, function(alert) {
+                  return {
+                    name: cloudStack.converters.toAlertType(alert.type),
+                    description: alert.description
+                  };
+                })
+              }));
+            }
+          });
+        },
+
+        hostAlerts: function(data) {
+          $.ajax({
+            url: createURL('listHosts'),
+            data: {
+              state: 'Alert',
+              page: 1,
+              pageSize: 4
+            },
+            success: function(json) {
+              complete($.extend(data, {
+                hostAlerts: $.map(json.listhostsresponse.host, function(host) {
+                  return {
+                    name: host.name,
+                    description: 'Alert state detected for ' + host.name
+                  };
+                })
+              }));
+            }
+          });
         }
       };
 
@@ -108,4 +114,4 @@
       dataFns.zones({});
     }
   };
-})(cloudStack, testData);
+})(jQuery, cloudStack, testData);

ui/scripts/ui-custom/dashboard.js

@@ -0,0 +1,57 @@
+(function($, cloudStack) {
+  cloudStack.uiCustom.dashboard = function() {
+    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 + ']');
+
+              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.substring(0, 50).concat('...'));
+                  });
+
+                  $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;
+  }
+}(jQuery, cloudStack));