Add 'view all' shortcuts for common zone resources

On the physical resources dashboard, add a button to view all
resources for pods, clusters, and hosts. This will compile a
list view containing the resources across all zones.

In order to be able to add resources when in this zone-inspecific mode,
a zone drop-down had to be added to the create forms for
pods, clusters, and hosts.

ui/css/cloudstack3.css

@@ -3234,6 +3234,37 @@ Dialogs*/
   font-weight: bold;
 }
 
+.button.fetch-latest {
+  font-size: 10px;
+  float: right;
+  clear: none;
+  /*+text-shadow:0px 1px 0px #333E49;*/
+  -moz-text-shadow: 0px 1px 0px #333E49;
+  -webkit-text-shadow: 0px 1px 0px #333E49;
+  -o-text-shadow: 0px 1px 0px #333E49;
+  text-shadow: 0px 1px #333E49;
+  padding: 3px 8px 3px 10px;
+  background: url(../images/bg-gradients.png) repeat-x 0px -411px;
+  border: 1px solid #383838;
+  /*+border-radius:6px;*/
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -khtml-border-radius: 6px;
+  border-radius: 6px 6px 6px 6px;
+  /*+box-shadow:0px 1px 1px #718CA5;*/
+  -moz-box-shadow: 0px 1px 1px #718CA5;
+  -webkit-box-shadow: 0px 1px 1px #718CA5;
+  -o-box-shadow: 0px 1px 1px #718CA5;
+  box-shadow: 0px 1px 1px #718CA5;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.button.fetch-latest:hover {
+  background-position: 0 -132px;
+  border-left: 1px solid #585D60;
+}
+
 .dashboard.admin .dashboard-container.sub .title {
   float: left;
 }
@@ -7215,7 +7246,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   box-shadow: 0px 0px 1px #FFFFFF;
 }
 
-.system-dashboard .head .view-more {
+.system-dashboard .view-more,
+.system-dashboard .view-all {
   float: right;
   padding: 5px 21px 5px 9px;
   margin: -4px 19px 0 0;
@@ -7242,7 +7274,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   text-shadow: 0px 1px 1px #000000;
 }
 
-.system-dashboard .head .view-more:hover {
+.system-dashboard .view-more:hover,
+.system-dashboard .view-all:hover {
   background-position: 0px -763px;
   /*+box-shadow:inset 0px 1px 1px #313131;*/
   -moz-box-shadow: inset 0px 1px 1px #313131;
@@ -7251,6 +7284,17 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   box-shadow: inset 0px 1px 1px #313131;
 }
 
+.system-dashboard .status_box .view-all {
+  /*+placement:shift 18px 136px;*/
+  position: relative;
+  left: 18px;
+  top: 136px;
+  width: 78%;
+  position: absolute;
+  text-align: center;
+  padding: 5px 0 8px;
+}
+
 .system-dashboard .status_box {
   font-size: 14px;
   margin: 28px 0 0;

ui/index.jsp

@@ -951,24 +951,28 @@
         <div class="system-dashboard">
           <div class="head">
             <span><fmt:message key="label.zones"/></span>
-            <div class="view-more"><span><fmt:message key="label.view.more"/></span></div>
+            <div class="view-all zones" view-all-target="zones"><span><fmt:message key="label.view.all"/></span></div>
           </div>
           <ul class="status_box good">
             <li class="block">
               <span class="header"><fmt:message key="label.number.of.zones"/></span>
               <span class="overview total" data-item="zoneCount"></span>
+              <span class="button view-all zones" view-all-target="zones"><fmt:message key="label.view.all"/></span>
             </li>
             <li class="block">
               <span class="header"><fmt:message key="label.number.of.pods"/></span>
               <span class="overview total" data-item="podCount"></span>
+              <span class="button view-all pods" view-all-target="pods"><fmt:message key="label.view.all"/></span>
             </li>
             <li class="block">
               <span class="header"><fmt:message key="label.number.of.clusters"/></span>
               <span class="overview total" data-item="clusterCount"></span>
+              <span class="button view-all clusters" view-all-target="clusters"><fmt:message key="label.view.all"/></span>
             </li>
             <li class="block last">
               <span class="header"><fmt:message key="label.number.of.hosts"/></span>
               <span class="overview total" data-item="hostCount"></span>
+              <span class="button view-all hosts" view-all-target="hosts"><fmt:message key="label.view.all"/></span>
             </li>
           </ul>
         </div>
@@ -977,7 +981,7 @@
         <div class="system-dashboard">
           <div class="head">
             <span><fmt:message key="label.hosts"/></span>
-            <div class="view-more"><span><fmt:message key="label.view.more"/></span></div>
+            <div class="view-more" view-all-target="hosts"><span><fmt:message key="label.view.all"/></span></div>
           </div>
           <ul class="status_box good">
             <li class="block">

ui/scripts/ui-custom/physicalResources.js

@@ -1,6 +1,6 @@
 // Copyright 2012 Citrix Systems, Inc. Licensed under the
 // Apache License, Version 2.0 (the "License"); you may not use this
-// file except in compliance with the License.  Citrix Systems, Inc.
+// file except in compliance with the License. Citrix Systems, Inc.
 // reserves all rights not expressly granted by the License.
 // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 // Unless required by applicable law or agreed to in writing, software
@@ -12,12 +12,12 @@
 // Automatically generated by addcopyright.py at 04/03/2012
 (function(cloudStack, $) {
   cloudStack.uiCustom.physicalResources = function(args) {
-    var listView = function() {
-      return $('<div>').listView(args);
+    var listView = function(targetID) {
+      var target = args.sections.physicalResources.listView[targetID];
+
+      return $('<div>').listView({ listView: $.isFunction(target) ? target() : target });
     };
-
     var $dashboard = $('#template').find('.system-dashboard-view').clone();
-
     var getData = function() {
       // Populate data
       $dashboard.find('[data-item]').hide();
@@ -25,7 +25,6 @@
         response: {
           success: function(args) {
             var data = args.data;
-
             $.each(data, function(key, value) {
               var $elem = $dashboard.find('[data-item=' + key + ']');
               $elem.hide().html(value).fadeIn();
@@ -34,34 +33,30 @@
         }
       });
     };
-
     var resourceChart = function(args) {
       getData();
-
       return $dashboard
         .click(function(event) {
           var $target = $(event.target);
-
-          if ($target.closest('.view-more').size()) {
+          if ($target.closest('[view-all-target]').size()) {
+            var targetID = $target.closest('[view-all-target]').attr('view-all-target');
             args.$browser.cloudBrowser('addPanel', {
-              title: 'Zones',
+              title: targetID.charAt(0).toUpperCase() + targetID.substr(1).toLowerCase(),
               data: '',
               noSelectPanel: true,
               maximizeIfSelected: true,
               complete: function($newPanel) {
-                listView().appendTo($newPanel);
+                listView(targetID).appendTo($newPanel);
               }
             });
           }
         });
     };
-
     $(window).bind('cloudStack.fullRefresh cloudStack.updateResources', function() {
       if ($dashboard.is(':visible')) {
         getData();
       }
     });
-
     return function(args) {
       $dashboard.find('#update_ssl_button').click(function() {
         cloudStack.dialog.createForm({
@@ -77,7 +72,6 @@
           after: function(args) {
             var $loading = $('<div>').addClass('loading-overlay');
             $('.system-dashboard-view:visible').prepend($loading);
-
             $.ajax({
               url: createURL('uploadCustomCertificate'),
               data: {
@@ -94,7 +88,6 @@
                     url: createURL("queryAsyncJobResult&jobId=" + jid),
                     dataType: "json",
                     success: function(json) {
-
                       var result = json.queryasyncjobresultresponse;
                       if (result.jobstatus == 0) {
                         return; //Job has not completed
@@ -102,7 +95,7 @@
                       else {
                         $("body").stopTime(timerKey);
                         if (result.jobstatus == 1) {
-                          cloudStack.dialog.notice({ message: 'Update SSL Certiciate succeeded'	});
+                          cloudStack.dialog.notice({ message: 'Update SSL Certiciate succeeded' });
                         }
                         else if (result.jobstatus == 2) {
                           cloudStack.dialog.notice({ message: 'Failed to update SSL Certificate. ' + _s(result.jobresult.errortext) });
@@ -125,15 +118,12 @@
           },
           context: {}
         });
-
         return false;
       });
       $dashboard.find('#refresh_button').click(function() {
         getData();
-
         return false;
       });
-
       return resourceChart(args);
     };
   };