From 276bb962b733925a49457ba93d6ff62845ec7994 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 21 Feb 2012 19:07:47 -0800
Subject: [PATCH] UI updates/fixes

reviewed-by: jessica

    Navigation organizational changes

    -Rename 'System' -> 'Infrastructure'

    -Rename 'service offering' -> 'compute offering'
     (including all associated labels)

    -Rename 'Configuration' -> 'Service Offerings'

    -Move hypervisor capabilities under global settings

    -Rename 'Compute' -> 'Compute and storage'

    -Make tab width flexible, to support longer labels

    -bug 13920: Fix static NAT rule listing

    -Fix typo
---
 .../classes/resources/messages.properties     |  11 +-
 ui/css/cloudstack3.css                        |   2 +-
 ui/index.jsp                                  |  11 +-
 ui/scripts/configuration.js                   | 104 +---------
 ui/scripts/globalSettings.js                  | 178 ++++++++++++++----
 ui/scripts/instances.js                       |   4 +-
 ui/scripts/network.js                         |   1 +
 ui/scripts/system.js                          |   8 +-
 8 files changed, 169 insertions(+), 150 deletions(-)

diff --git a/client/WEB-INF/classes/resources/messages.properties b/client/WEB-INF/classes/resources/messages.properties
index 55bb04925a9..7671e0e2c20 100644
--- a/client/WEB-INF/classes/resources/messages.properties
+++ b/client/WEB-INF/classes/resources/messages.properties
@@ -1,4 +1,9 @@
 #new labels (begin) **********************************************************************************************
+label.add.compute.offering=Add compute offering
+label.compute.offering=Compute offering
+label.compute.offerings=Compute offerings
+label.select.offering=Select offering
+label.menu.infrastructure=Infrastructure
 label.sticky.tablesize=Table size
 label.sticky.expire=Expires
 label.sticky.cookie-name=Cookie name
@@ -199,7 +204,7 @@ message.disable.vpn=Are you sure you want to disable VPN?
 label.disable.vpn=Disable VPN
 message.enable.vpn=Please confirm that you want VPN access enabled for this IP address.
 label.enable.vpn=Enable VPN
-message.acquire.new.ip=Please confirm that you would like to acquire a net IP for this network.
+message.acquire.new.ip=Please confirm that you would like to acquire a new IP for this network.
 label.elastic=Elastic
 label.my.network=My network
 label.add.vms=Add VMs
@@ -316,7 +321,7 @@ label.guest.type=Guest Type
 label.specify.IP.ranges=Specify IP ranges
 label.conserve.mode=Conserve mode
 label.created.by.system=Created by system
-label.menu.system.service.offerings=System Service Offerings
+label.menu.system.service.offerings=System Offerings
 label.add.system.service.offering=Add System Service Offering
 label.redundant.router.capability=Redundant router capability
 label.supported.source.NAT.type=Supported Source NAT type
@@ -1253,7 +1258,7 @@ message.add.pod=Add a new pod for zone <b><span id="add_pod_zone_name"></span></
 message.add.primary.storage=Add a new Primary Storage for zone <b><span id="zone_name"></span></b>, pod <b><span id="pod_name"></span></b>
 message.add.primary=Please specify the following parameters to add a new primary storage
 message.add.secondary.storage=Add a new storage for zone <b><span id="zone_name"></span></b>
-message.add.service.offering=Please fill in the following data to add a new service offering.
+message.add.service.offering=Please fill in the following data to add a new compute offering.
 message.add.template=Please enter the following data to create your new template
 message.add.volume=Please fill in the following data to add a new volume.
 message.additional.networks.desc=Please select additional network(s) that your virtual instance will be connected to.
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 21f5150106e..3418c30da3d 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1205,7 +1205,7 @@ div.list-view td.state.off span {
 .ui-tabs li a {
   float: left;
   padding: 15px;
-  width: 91px;
+  min-width: 91px;
   text-align: center;
   font-size: 11px;
   margin-right: 1px;
diff --git a/ui/index.jsp b/ui/index.jsp
index 1fafa96598e..059c91903df 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -68,7 +68,7 @@
           <ul>
             <li class="first"><span class="number">1</span><span><fmt:message key="label.setup"/></span><span class="arrow"></span></li>
             <li><span class="number">2</span><span class="multiline"><fmt:message key="label.select.a.template"/></span><span class="arrow"></span></li>
-            <li><span class="number">3</span><span class="multiline"><fmt:message key="label.service.offering"/></span><span class="arrow"></span></li>
+            <li><span class="number">3</span><span class="multiline"><fmt:message key="label.compute.offering"/></span><span class="arrow"></span></li>
             <li><span class="number">4</span><span class="multiline"><fmt:message key="label.data.disk.offering"/></span><span class="arrow"></span></li>
             <li><span class="number">5</span><span><fmt:message key="label.menu.network"/></span><span class="arrow"></span></li>
             <li class="last"><span class="number">6</span><span><fmt:message key="label.review"/></span></li>
@@ -260,7 +260,7 @@
 
                                 <!-- Service offering -->
                                 <div class="select-desc field service-offering hide-if-unselected">
-                                  <div class="name"><fmt:message key="label.service.offering"/></div>
+                                  <div class="name"><fmt:message key="label.compute.offering"/></div>
                                   <div class="desc">
                                     <select name="new-network-networkofferingid">
                                     </select>
@@ -362,7 +362,7 @@
                   <!-- Service offering -->
                   <div class="select odd">
                     <div class="name">
-                      <span><fmt:message key="label.service.offering"/></span>
+                      <span><fmt:message key="label.compute.offering"/></span>
                     </div>
                     <div class="value">
                       <span wizard-field="service-offering"></span>
@@ -1614,6 +1614,11 @@
 
 <script language="javascript">
 dictionary = {
+'label.compute.offering': '<fmt:message key="label.compute.offering"/>',
+'label.add.compute.offering': '<fmt:message key="label.add.compute.offering"/>',
+'label.compute.offerings': '<fmt:message key="label.compute.offerings"/>',
+'label.select.offering': '<fmt:message key="label.select.offering"/>',
+'label.menu.infrastructure': '<fmt:message key="label.menu.infrastructure"/>',
 'label.sticky.domain': '<fmt:message key="label.sticky.domain"/>',
 'label.sticky.postonly': '<fmt:message key="label.sticky.postonly"/>',
 'label.sticky.indirect': '<fmt:message key="label.sticky.indirect"/>',
diff --git a/ui/scripts/configuration.js b/ui/scripts/configuration.js
index a8a4cea3cec..0de26ed9a11 100644
--- a/ui/scripts/configuration.js
+++ b/ui/scripts/configuration.js
@@ -4,15 +4,15 @@
   var networkServiceObjs = [], serviceCheckboxNames = [];
 	
   cloudStack.sections.configuration = {
-    title: 'label.configuration',
+    title: 'label.menu.service.offerings',
     id: 'configuration',
     sectionSelect: {
-      label: 'label.select-view'
+      label: 'label.select.offering'
     },
     sections: {
       serviceOfferings: {
         type: 'select',
-        title: 'label.menu.service.offerings',
+        title: 'label.compute.offerings',
         listView: {
           id: 'serviceOfferings',
           label: 'label.menu.service.offerings',
@@ -25,19 +25,19 @@
 
           actions: {
             add: {
-              label: 'label.add.service.offering',
+              label: 'label.add.compute.offering',
 
               messages: {
                 confirm: function(args) {
                   return 'message.add.service.offering';
                 },
                 notification: function(args) {
-                  return 'label.add.service.offering';
+                  return 'label.add.compute.offering';
                 }
               },
 
               createForm: {
-                title: 'label.add.service.offering',
+                title: 'label.add.compute.offering',
                 fields: {
                   name: {
                     label: 'label.name',
@@ -892,95 +892,7 @@
             }
           }
         }
-      },
-
-      hypervisorCapabilities: {
-        type: 'select',
-        title: 'label.hypervisor.capabilities',
-        listView: {
-          id: 'hypervisorCapabilities',
-          label: 'label.hypervisor.capabilities',
-          fields: {
-            hypervisor: { label: 'label.hypervisor' },
-            hypervisorversion: { label: 'label.hypervisor.version' },
-            maxguestslimit: { label: 'label.max.guest.limit' }
-          },
-          dataProvider: function(args) {					  
-						var array1 = [];  
-						if(args.filterBy != null) {          
-							if(args.filterBy.search != null && args.filterBy.search.by != null && args.filterBy.search.value != null) {
-								switch(args.filterBy.search.by) {
-								case "name":
-									if(args.filterBy.search.value.length > 0)
-										array1.push("&keyword=" + args.filterBy.search.value);
-									break;
-								}
-							}
-						}				
-					
-            $.ajax({
-              url: createURL("listHypervisorCapabilities&page=" + args.page + "&pagesize=" + pageSize + array1.join("")),
-              dataType: "json",
-              async: true,
-              success: function(json) {
-                var items = json.listhypervisorcapabilitiesresponse.hypervisorCapabilities;
-                args.response.success({data:items});
-              },
-              error: function(data) {
-                args.response.error(parseXMLHttpResponse(data));
-              }
-            });
-          },
-
-          detailView: {
-            name: 'label.details',
-            actions: {
-              edit: {
-                label: 'label.edit',
-                action: function(args) {
-                  var array1 = [];
-                  array1.push("&maxguestslimit=" + todb(args.data.maxguestslimit));
-                  $.ajax({
-                    url: createURL("updateHypervisorCapabilities&id=" + args.context.hypervisorCapabilities[0].id + array1.join("")),
-                    dataType: "json",
-                    success: function(json) {
-                      var item = json.updatehypervisorcapabilitiesresponse['null'];
-                      args.response.success({data: item});
-                    },
-                    error: function(data) {
-                      args.response.error(parseXMLHttpResponse(data));
-                    }
-                  });
-                }
-              }
-            },
-
-            tabs: {
-              details: {
-                title: 'label.details',
-                fields: [
-                  {
-                    id: { label: 'label.id' },
-                    hypervisor: { label: 'label.hypervisor' },
-                    hypervisorversion: { label: 'label.hypervisor.version' },
-                    maxguestslimit: {
-                      label: 'label.max.guest.limit',
-                      isEditable: true
-                    }
-                  }
-                ],
-                dataProvider: function(args) {
-                  args.response.success(
-                    {
-                      data:args.context.hypervisorCapabilities[0]
-                    }
-                  );
-                }
-              }
-            }
-          }
-        }
-      },
+      },      
 
       networkOfferings: {
         type: 'select',
@@ -1245,7 +1157,7 @@
 
 									//show or hide upon checked services and selected providers above (begin)
                   serviceOfferingId: {
-                    label: 'label.service.offering',
+                    label: 'label.compute.offering',
                     select: function(args) {
                       $.ajax({
                         url: createURL('listServiceOfferings&issystem=true'),
diff --git a/ui/scripts/globalSettings.js b/ui/scripts/globalSettings.js
index c315ca148fe..fbfa79fc255 100644
--- a/ui/scripts/globalSettings.js
+++ b/ui/scripts/globalSettings.js
@@ -2,58 +2,154 @@
   cloudStack.sections['global-settings'] = {
     title: 'label.menu.global.settings',
     id: 'global-settings',
-    listView: {
-      label: 'label.menu.global.settings',
-      actions: {
-        edit: {
-          label: 'label.change.value',
-          action: function(args) {           
-            var name = args.data.jsonObj.name;
-            var value = args.data.value;
+    sectionSelect: {
+      label: 'label.select-view'
+    },
+    sections: {
+      globalSettings: {
+        type: 'select',
+        title: 'label.menu.global.settings',
+        listView: {
+          label: 'label.menu.global.settings',
+          actions: {
+            edit: {
+              label: 'label.change.value',
+              action: function(args) {           
+                var name = args.data.jsonObj.name;
+                var value = args.data.value;
+
+                $.ajax({
+                  url: createURL(
+                    'updateConfiguration&name=' + name + '&value=' + value
+                  ),
+                  dataType: 'json',
+                  async: true,
+                  success: function(json) {                
+                    var item = json.updateconfigurationresponse.configuration;
+                    cloudStack.dialog.notice({ message: _l('message.restart.mgmt.server') });
+                    args.response.success({data: item});
+                  },
+                  error: function(json) {                
+                    args.response.error(parseXMLHttpResponse(json));
+                  }
+                });
+              }
+            }
+          },
+          fields: {
+            name: { label: 'label.name', id: true },
+            description: { label: 'label.description' },
+            value: { label: 'label.value', editable: true }
+          },
+          dataProvider: function(args) {
+            var data = {
+              page: args.page,
+              pagesize: pageSize
+            };
+
+            if (args.filterBy.search.value) {
+              data.name = args.filterBy.search.value;
+            }
 
             $.ajax({
-              url: createURL(
-                'updateConfiguration&name=' + name + '&value=' + value
-              ),
-              dataType: 'json',
+              url: createURL('listConfigurations'),
+              data: data,
+              dataType: "json",
               async: true,
-              success: function(json) {                
-                var item = json.updateconfigurationresponse.configuration;
-                cloudStack.dialog.notice({ message: _l('message.restart.mgmt.server') });
-                args.response.success({data: item});
-              },
-              error: function(json) {                
-                args.response.error(parseXMLHttpResponse(json));
+              success: function(json) {
+                var items = json.listconfigurationsresponse.configuration;
+                args.response.success({ data: items });
               }
             });
           }
         }
       },
-      fields: {
-        name: { label: 'label.name', id: true },
-        description: { label: 'label.description' },
-        value: { label: 'label.value', editable: true }
-      },
-      dataProvider: function(args) {
-        var data = {
-          page: args.page,
-          pagesize: pageSize
-        };
+      hypervisorCapabilities: {
+        type: 'select',
+        title: 'label.hypervisor.capabilities',
+        listView: {
+          id: 'hypervisorCapabilities',
+          label: 'label.hypervisor.capabilities',
+          fields: {
+            hypervisor: { label: 'label.hypervisor' },
+            hypervisorversion: { label: 'label.hypervisor.version' },
+            maxguestslimit: { label: 'label.max.guest.limit' }
+          },
+          dataProvider: function(args) {					  
+						var array1 = [];  
+						if(args.filterBy != null) {          
+							if(args.filterBy.search != null && args.filterBy.search.by != null && args.filterBy.search.value != null) {
+								switch(args.filterBy.search.by) {
+								case "name":
+									if(args.filterBy.search.value.length > 0)
+										array1.push("&keyword=" + args.filterBy.search.value);
+									break;
+								}
+							}
+						}				
+					  
+            $.ajax({
+              url: createURL("listHypervisorCapabilities&page=" + args.page + "&pagesize=" + pageSize + array1.join("")),
+              dataType: "json",
+              async: true,
+              success: function(json) {
+                var items = json.listhypervisorcapabilitiesresponse.hypervisorCapabilities;
+                args.response.success({data:items});
+              },
+              error: function(data) {
+                args.response.error(parseXMLHttpResponse(data));
+              }
+            });
+          },
 
-        if (args.filterBy.search.value) {
-          data.name = args.filterBy.search.value;
-        }
+          detailView: {
+            name: 'label.details',
+            actions: {
+              edit: {
+                label: 'label.edit',
+                action: function(args) {
+                  var array1 = [];
+                  array1.push("&maxguestslimit=" + todb(args.data.maxguestslimit));
+                  $.ajax({
+                    url: createURL("updateHypervisorCapabilities&id=" + args.context.hypervisorCapabilities[0].id + array1.join("")),
+                    dataType: "json",
+                    success: function(json) {
+                      var item = json.updatehypervisorcapabilitiesresponse['null'];
+                      args.response.success({data: item});
+                    },
+                    error: function(data) {
+                      args.response.error(parseXMLHttpResponse(data));
+                    }
+                  });
+                }
+              }
+            },
 
-        $.ajax({
-          url: createURL('listConfigurations'),
-          data: data,
-          dataType: "json",
-          async: true,
-          success: function(json) {
-            var items = json.listconfigurationsresponse.configuration;
-            args.response.success({ data: items });
+            tabs: {
+              details: {
+                title: 'label.details',
+                fields: [
+                  {
+                    id: { label: 'label.id' },
+                    hypervisor: { label: 'label.hypervisor' },
+                    hypervisorversion: { label: 'label.hypervisor.version' },
+                    maxguestslimit: {
+                      label: 'label.max.guest.limit',
+                      isEditable: true
+                    }
+                  }
+                ],
+                dataProvider: function(args) {
+                  args.response.success(
+                    {
+                      data:args.context.hypervisorCapabilities[0]
+                    }
+                  );
+                }
+              }
+            }
           }
-        });
+        }
       }
     }
   };
diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js
index bb2bcacf963..e1716d34b42 100644
--- a/ui/scripts/instances.js
+++ b/ui/scripts/instances.js
@@ -1183,7 +1183,7 @@
               desc: '',
               fields: {
                 serviceOffering: {
-                  label: 'label.service.offering',
+                  label: 'label.compute.offering',
                   select: function(args) {
                     $.ajax({
                       url: createURL("listServiceOfferings&VirtualMachineId=" + args.context.instances[0].id),
@@ -1522,7 +1522,7 @@
                   }
                 },
 
-                serviceofferingname: { label: 'label.service.offering', isEditable: false },
+                serviceofferingname: { label: 'label.compute.offering', isEditable: false },
                 group: { label: 'label.group', isEditable: true },
                 hostname: { label: 'label.host', isEditable: false},
                 haenable: { label: 'label.ha.enabled', isEditable: false, converter:cloudStack.converters.toBooleanText },
diff --git a/ui/scripts/network.js b/ui/scripts/network.js
index 1590d9f44fc..bfe582f5b10 100644
--- a/ui/scripts/network.js
+++ b/ui/scripts/network.js
@@ -1717,6 +1717,7 @@
                         $.ajax({
                           url: createURL('listIpForwardingRules'),
                           data: {
+                            listAll: true,
                             ipaddressid: args.context.ipAddresses[0].id
                           },
                           dataType: 'json',
diff --git a/ui/scripts/system.js b/ui/scripts/system.js
index 3adc8853940..7c9b62e3bac 100644
--- a/ui/scripts/system.js
+++ b/ui/scripts/system.js
@@ -79,7 +79,7 @@
   };
 
   cloudStack.sections.system = {
-    title: 'label.menu.system',
+    title: 'label.menu.infrastructure',
     id: 'system',
 
     // System dashboard
@@ -2032,7 +2032,7 @@
                           desc: '',
                           fields: {
                             serviceOfferingId: {
-                              label: 'label.service.offering',
+                              label: 'label.compute.offering',
                               select: function(args) {
                                 $.ajax({
                                   url: createURL("listServiceOfferings&issystem=true&systemvmtype=domainrouter"),
@@ -2192,7 +2192,7 @@
                             guestipaddress: { label: 'label.guest.ip' },
                             linklocalip: { label: 'label.linklocal.ip' },
                             hostname: { label: 'label.host' },
-                            serviceofferingname: { label: 'label.service.offering' },
+                            serviceofferingname: { label: 'label.compute.offering' },
                             networkdomain: { label: 'label.network.domain' },
                             domain: { label: 'label.domain' },
                             account: { label: 'label.account' },
@@ -3395,7 +3395,7 @@
                 },
 
                 compute: {
-                  title: 'label.compute',
+                  title: 'label.compute.and.storage',
                   custom: cloudStack.uiCustom.systemChart('compute')
                 },
                 network: {