Show zone details on dashboard capacity items

ui/css/cloudstack3.css

@@ -3199,12 +3199,17 @@ Dialogs*/
   height: 73px;
   float: left;
   position: relative;
+  cursor: pointer;
+}
+
+.dashboard.admin .zone-stats ul li:hover {
+  background: #FFF2DA;
 }
 
 .dashboard.admin .zone-stats ul li .label {
-  width: 103px;
+  width: 138px;
   float: left;
-  padding: 32px 26px 0 13px;
+  padding: 22px 0px 0 10px;
 }
 
 .dashboard.admin .zone-stats ul li .info {

ui/scripts/dashboard.js

@@ -56,6 +56,48 @@
 
     // Admin dashboard
     admin: {
+      zoneDetailView: {
+        isMaximized: true,
+        tabs: {
+          details: {
+            title: 'Details',
+            fields: [
+              {
+                name: { label: 'Zone', isEditable: true }
+              },
+              {
+                id: { label: 'ID' },
+                allocationstate: { label: 'Allocation State' },
+                dns1: { label: 'DNS 1', isEditable: true },
+                dns2: { label: 'DNS 2', isEditable: true },
+                internaldns1: { label: 'Internal DNS 1', isEditable: true },
+                internaldns2: { label: 'Internal DNS 2', isEditable: true },
+                networktype: { label: 'Network Type' },
+                securitygroupsenabled: {
+                  label: 'Security Groups Enabled',
+                  converter:cloudStack.converters.toBooleanText
+                },
+                domain: {
+                  label: 'Network domain',
+                  isEditable: true
+                }
+              }
+            ],
+            dataProvider: function(args) {
+              $.ajax({
+                url: createURL('listZones'),
+                data: {
+                  id: args.context.physicalResources[0].id
+                },
+                success: function(json) {
+                  args.response.success({ data: json.listzonesresponse.zone[0] });
+                }
+              });
+            }
+          }
+        }
+      },
+      
       dataProvider: function(args) {
         var dataFns = {
           zones: function(data) {
@@ -232,6 +274,7 @@
                 complete($.extend(data, {
                   zoneCapacities: $.map(zoneCapacities.sort(sortFn), function(capacity) {
                     return {
+                      zoneID: capacity.zoneid,
                       zoneName: capacity.zoneName,
                       type: cloudStack.converters.toAlertType(capacity.type),
                       percent: parseInt(capacity.percentused),

ui/scripts/ui-custom/dashboard.js

@@ -9,6 +9,7 @@
       cloudStack.sections.dashboard[dashboardType].dataProvider({
         response: {
           success: function(args) {
+            var $browser = $dashboard.closest('#browser .container');
             var data = args.data;
 
             // Iterate over data; populate corresponding DOM elements
@@ -23,6 +24,26 @@
                   var item = this;
                   var $li = $liTmpl.clone().appendTo($elem).hide();
 
+                  if ($li.is('.zone-stats li')) {
+                    $li.click(function() {
+                      $browser.cloudBrowser('addPanel', {
+                        title: 'Zone details',
+                        parent: $dashboard.closest('.panel'),
+                        complete: function($newPanel) {
+                          $newPanel.detailView($.extend(true, {},
+                            cloudStack.sections.dashboard.admin.zoneDetailView,
+                            {
+                              $browser: $browser,
+                              context: $.extend(true, {}, cloudStack.context, {
+                                physicalResources: [{ id: item.zoneID }]
+                              })
+                            }
+                          ));
+                        }
+                      })
+                    });
+                  }
+
                   $.each(item, function(arrayKey, arrayValue) {
                     var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
 

ui/scripts/ui/widgets/detailView.js

@@ -442,7 +442,8 @@
             viewAllID.custom({
               $browser: $browser,
               context: $detailView.data('view-args').context,
-              listViewArgs: $detailView.data('list-view').data('view-args')
+              listViewArgs: $detailView.data('list-view') ?
+                $detailView.data('list-view').data('view-args') : null
             })
           );
         }