Configurable UI branding, keyboard list and hide-able columns through a new config.js file

ui/config.js

@@ -0,0 +1,40 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with 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 distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+// Define custom options configurable by admins for UI
+cloudStackOptions = {
+    aboutText: "label.app.name", // This is the text shown in the 'About' box
+    aboutTitle: "label.about.app", // This is the Application 'Title' shown in the 'About' box
+    docTitle: "label.app.name", // This is the Application 'Title' shown on browser tab.
+
+    helpURL: "http://docs.cloudstack.apache.org/", // This is the URL that opens when users click Help
+    keyboardOptions: {
+        "us": "label.standard.us.keyboard",
+        "uk": "label.uk.keyboard",
+        "fr": "label.french.azerty.keyboard",
+        "jp": "label.japanese.keyboard",
+        "sc": "label.simplified.chinese.keyboard"
+    },
+    hiddenFields: {
+        "metrics.zones":[], // Options - "name", "state", "clusters", "cpuused", "cpuallocated", "memused", "memallocated"
+        "metrics.clusters": [], // Options - "name", "state", "hosts", "cpuused", "cpuallocated", "memused", "memallocated"
+        "metrics.hosts": [], // Options - "name", "state", "powerstate", "instances", "cpuused", "memused", "network"
+        "metrics.storagepool": [], // Options - "name", "property", "disk",
+        "metrics.instances": [], // Options - "name", "state", "ipaddress", "zonename", "cpuused", "memused", "network", "disk"
+        "metrics.volumes": [] // Options - "name", "state", "vmname", "sizegb", "physicalsize", "utilization", "storagetype", "storage"
+    }
+};

ui/index.html

@@ -1741,6 +1741,7 @@ <h3><translate key="label.set.up.zone.type"/></h3>
         <script src="lib/jquery.cookies.js" type="text/javascript"></script>
         <script src="lib/jquery.md5.js" type="text/javascript" ></script>
         <script src="lib/require.js" type="text/javascript"></script>
+        <script type="text/javascript" src="config.js"></script>
 
         <!-- localized messages -->
         <script type="text/javascript">
@@ -1803,10 +1804,9 @@ <h3><translate key="label.set.up.zone.type"/></h3>
 
             // Inject translated keyboard options
             var keyboardDropdown = $($.find('#keyboard-options'));
-            keyboardDropdown.append($('<option>', {value: 'us', text: 'Standard (US) keyboard'}));
-            keyboardDropdown.append($('<option>', {value: 'uk', text: 'UK keyboard'}));
-            keyboardDropdown.append($('<option>', {value: 'jp', text: '日本語キーボード'}));
-            keyboardDropdown.append($('<option>', {value: 'sc', text: '简体中文键盘'}));
+            for (var key in cloudStackOptions.keyboardOptions) {
+                keyboardDropdown.append($('<option>', {value: key, text: translate(cloudStackOptions.keyboardOptions[key])}));
+            }
         </script>
 
         <script src="lib/excanvas.js" type="text/javascript"></script>
@@ -1900,5 +1900,8 @@ <h3><translate key="label.set.up.zone.type"/></h3>
         <script type="text/javascript" src="plugins/plugins.js"></script>
         <script type="text/javascript" src="modules/modules.js"></script>
         <script type="text/javascript" src="scripts/plugins.js"></script>
+
+        <!-- Load this script after all scripts have executed to populate data -->
+        <script type="text/javascript" src="scripts/postLoad.js"></script>
     </body>
 </html>

ui/l10n/en.js

@@ -787,6 +787,7 @@ var dictionary = {
 "label.format":"Format",
 "label.format.lower":"format",
 "label.friday":"Friday",
+"label.french.azerty.keyboard":"French AZERTY keyboard",
 "label.full":"Full",
 "label.full.path":"Full path",
 "label.gateway":"Gateway",

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/postLoad.js

@@ -0,0 +1,44 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with 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 distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+// Load this script after all scripts have executed to populate data
+(function(cloudStack) {
+
+    var loadListViewPreFilters = function(data, prefix) {
+        $.each(Object.keys(data), function(idx, key)  {
+            if (key == "listView") {
+                // Load config flags
+                if (cloudStackOptions.hiddenFields[prefix]) {
+                    var oldPreFilter = data.listView.preFilter;
+                    data.listView.preFilter = function() {
+                        // Hide config specified fields only for users.
+                        var hiddenFields = isUser() ? cloudStackOptions.hiddenFields[prefix] : [];
+                        if (oldPreFilter) {
+                            return hiddenFields.concat(oldPreFilter());
+                        }
+                        return hiddenFields;
+                    }
+                }
+            } else if (data[key] && $.type(data[key]) == "object") {
+                loadListViewPreFilters(data[key], (prefix != null && prefix.length > 0) ? prefix + "." + key : key);
+            }
+        });
+    }
+
+    loadListViewPreFilters(cloudStack.sections, "");
+
+})(cloudStack);

ui/scripts/templates.js

@@ -449,22 +449,12 @@
                                                 id: "",
                                                 description: ""
                                             });
-                                            items.push({
-                                                id: "us",
-                                                description: "US Keboard"
-                                            });
-                                            items.push({
-                                                id: "uk",
-                                                description: "UK Keyboard"
-                                            });
-                                            items.push({
-                                                id: "jp",
-                                                description: "Japanese Keyboard"
-                                            });
-                                            items.push({
-                                                id: "sc",
-                                                description: "Simplified Chinese"
-                                            });
+                                            for (var key in cloudStackOptions.keyboardOptions) {
+                                                items.push({
+                                                    id: key,
+                                                    description: _l(cloudStackOptions.keyboardOptions[key])
+                                                });
+                                            }
                                             args.response.success({
                                                 data: items
                                             });

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: {

ui/scripts/ui/widgets/listView.js

@@ -860,6 +860,8 @@
         if (groupableColumns) {
             $tr.addClass('groupable-header-columns').addClass('groupable-header');
             $.each(fields, function(key) {
+                if ($.inArray(key, hiddenFields) != -1)
+                    return true;
                 var field = this;
                 if (field.columns) {
                     var colspan = Object.keys(field.columns).length;
@@ -1203,6 +1205,8 @@
             var reducedFields = {};
             var idx = 0;
             $.each(fields, function(key) {
+                if ($.inArray(key, hiddenFields) != -1)
+                    return true;
                 var field = this;
                 if (field.columns) {
                     $.each(field.columns, function(innerKey) {