ui: configurable branding, keyboard list and hide-able columns through a new config.js file (#3258)

anuragaw · yadvr · commit 3bf4e5c49821 · 2019-05-30T15:32:37.000+05:30
We want to support hiding table columns, specifically in metrics table, through config file so that users can make the relevant bits hidden as per their organization. Current work will support the metrics table but can be extended to any table with minimal work in future.

Config file will take the key of the metrics column from metrics.js file for the sake of minimal changes and simplicity of development.

Problem: The keyboard list in the UI is not consistent across views such as in the instance wizard and in the register template form. There is also no way to custom about url/text and doc title and help URL in the UI.
Root Cause: The list is hardcoded in the UI allowing no centralised configuration.
Solution: Introduce a new config.js file installed at the /usr/share/cloudstackmanagement/webapp/config.js location. The config.js allows configurable keyboard list, about url/text, doc title, and help URL.

Signed-off-by: Rohit Yadav &lt;rohit.yadav@shapeblue.com&gt;
diff --git a/ui/config.js b/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"
+    }
+};
diff --git a/ui/index.html b/ui/index.html
@@ -1762,6 +1762,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">
@@ -1824,10 +1825,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>
@@ -1920,5 +1920,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>
diff --git a/ui/l10n/en.js b/ui/l10n/en.js
@@ -789,6 +789,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",
diff --git a/ui/scripts/cloudStack.js b/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);
diff --git a/ui/scripts/postLoad.js b/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);
diff --git a/ui/scripts/templates.js b/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
                                             });
diff --git a/ui/scripts/ui/core.js b/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: {
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
@@ -862,6 +862,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;
@@ -1205,6 +1207,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) {
