ui: Make the page title, help URL and about popup configurable

This helps brands in setting up relevant resources in their deployement.

Author: Anurag Awasthi

ui/config.js

@@ -15,11 +15,17 @@
 // specific language governing permissions and limitations
 // under the License.
 
-// Define Keyboard Options for the UI
-var keyboardOptions = {
-    "us": "label.standard.us.keyboard",
-    "uk": "label.uk.keyboard",
-    "fr": "label.french.azerty.keyboard",
-    "jp": "label.japanese.keyboard",
-    "sc": "label.simplified.chinese.keyboard"
-}
+// Define custom options configurable by admins for UI
+cloudStackOptions = {
+    aboutText: "label.app.name",
+    aboutTitle: "label.about.app",
+    docTitle: "label.app.name",
+    helpURL: "http://docs.cloudstack.apache.org/",
+    keyboardOptions: {
+        "us": "label.standard.us.keyboard",
+        "uk": "label.uk.keyboard",
+        "fr": "label.french.azerty.keyboard",
+        "jp": "label.japanese.keyboard",
+        "sc": "label.simplified.chinese.keyboard"
+    }
+};

ui/index.html

@@ -1804,8 +1804,8 @@ <h3><translate key="label.set.up.zone.type"/></h3>
 
             // Inject translated keyboard options
             var keyboardDropdown = $($.find('#keyboard-options'));
-            for (var key in keyboardOptions) {
-                keyboardDropdown.append($('<option>', {value: key, text: translate(keyboardOptions[key])}));
+            for (var key in cloudStackOptions.keyboardOptions) {
+                keyboardDropdown.append($('<option>', {value: key, text: translate(cloudStackOptions.keyboardOptions[key])}));
             }
         </script>
 

ui/scripts/cloudStack.js

@@ -482,6 +482,6 @@
 
         cloudStack.uiCustom.login(loginArgs);
 
-        document.title = _l('label.app.name');
+        document.title = _l(cloudStackOptions.docTitle);
     });
 })(cloudStack, jQuery);

ui/scripts/templates.js

@@ -449,10 +449,10 @@
                                                 id: "",
                                                 description: ""
                                             });
-                                            for (var key in keyboardOptions) {
+                                            for (var key in cloudStackOptions.keyboardOptions) {
                                                 items.push({
                                                     id: key,
-                                                    description: _l(keyboardOptions[key])
+                                                    description: _l(cloudStackOptions.keyboardOptions[key])
                                                 });
                                             }
                                             args.response.success({

ui/scripts/ui/core.js

@@ -317,23 +317,20 @@
 
             if (this == 'label.help') {
                 $link.addClass('help').click(function() {
-                    var helpURL = 'http://cloudstack.apache.org/';
-
-                    window.open(helpURL, '_blank');
-
+                    window.open(cloudStackOptions.helpURL, '_blank');
                     return false;
                 });
             }
             if (this == 'label.about') {
                 $link.addClass('about').click(function() {
-                    var $logo = $('<div>').addClass('logo').text(_l('label.app.name')),
-                        $version = $('<div>').addClass('version').text(g_cloudstackversion),
+                    var $logo = $('<div>').addClass('logo').text(_l(cloudStackOptions.aboutText)),
+                        $version = $('<div>').addClass('version').text(_l(g_cloudstackversion)),
                         $about = $('<div>').addClass('about').append($logo).append($version);
-                    
+
                     var $aboutDialog = $about.dialog({
                         modal: true,
                         width: 300,
-                        title: _l('label.about.app'),
+                        title: _l(cloudStackOptions.aboutTitle),
                         closeOnEscape: false,
                         dialogClass: 'dialog-about',
                         buttons: {