From c68bc10b3912b529790c038ee14a8029df7eb5e7 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Tue, 12 Mar 2019 15:47:11 +0530
Subject: [PATCH 1/4] ui: introduce new UI config file

This introduces a new UI `config.js` file using which the UI could be
configured by the admin from a single config/js file.

In the first commit this allows for easy configuration of list of
keyboards.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/config.js            | 25 +++++++++++++++++++++++++
 ui/index.html           |  8 ++++----
 ui/l10n/en.js           |  1 +
 ui/scripts/templates.js | 22 ++++++----------------
 4 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 ui/config.js

diff --git a/ui/config.js b/ui/config.js
new file mode 100644
index 000000000000..a3d1190d2698
--- /dev/null
+++ b/ui/config.js
@@ -0,0 +1,25 @@
+// 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 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"
+}
diff --git a/ui/index.html b/ui/index.html
index 6e33598ed9c4..9b4cb78b9760 100644
--- a/ui/index.html
+++ b/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 keyboardOptions) {
+                keyboardDropdown.append($('<option>', {value: key, text: translate(keyboardOptions[key])}));
+            }
         </script>
 
         <script src="lib/excanvas.js" type="text/javascript"></script>
diff --git a/ui/l10n/en.js b/ui/l10n/en.js
index eb7b82250891..35de8664b90d 100644
--- a/ui/l10n/en.js
+++ b/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",
diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js
index 96660fac6804..006ed16bad39 100755
--- 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 keyboardOptions) {
+                                                items.push({
+                                                    id: key,
+                                                    description: _l(keyboardOptions[key])
+                                                });
+                                            }
                                             args.response.success({
                                                 data: items
                                             });

From 96cd9d9f0d36dc11adb4d03e3a10313c8a295667 Mon Sep 17 00:00:00 2001
From: Anurag Awasthi <anurag.awasthi@shapeblue.com>
Date: Tue, 12 Mar 2019 15:55:24 +0530
Subject: [PATCH 2/4] ui: Make the page title, help URL and about popup
 configurable

This helps brands in setting up relevant resources in their deployement.
---
 ui/config.js             | 22 ++++++++++++++--------
 ui/index.html            |  4 ++--
 ui/scripts/cloudStack.js |  2 +-
 ui/scripts/templates.js  |  4 ++--
 ui/scripts/ui/core.js    | 13 +++++--------
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/ui/config.js b/ui/config.js
index a3d1190d2698..13a9dd17d588 100644
--- a/ui/config.js
+++ b/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"
+    }
+};
diff --git a/ui/index.html b/ui/index.html
index 9b4cb78b9760..15e58fcc091b 100644
--- a/ui/index.html
+++ b/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>
 
diff --git a/ui/scripts/cloudStack.js b/ui/scripts/cloudStack.js
index 7faa8c590ca0..3d9ae472f5cb 100644
--- 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/templates.js b/ui/scripts/templates.js
index 006ed16bad39..b6e2d7bb364b 100755
--- a/ui/scripts/templates.js
+++ b/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({
diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js
index 3f8bb445343c..09a3ebcbc70f 100644
--- 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: {

From 37abd92dd468e2d77f56652cc4bca806027f5e23 Mon Sep 17 00:00:00 2001
From: Anurag Awasthi <anuraga.iitk@gmail.com>
Date: Thu, 4 Apr 2019 12:51:31 +0530
Subject: [PATCH 3/4] Support hiding columns through config file

We want users to be able to hide some columns in metrics tables
that may not be necessary for their organizations. The current
commit will start supporting metrics table and it can be extended
to any table with similar logic

Added all options to the config file for ease of use
---
 ui/config.js                      |  8 ++++++
 ui/index.html                     |  3 +++
 ui/scripts/postLoad.js            | 43 +++++++++++++++++++++++++++++++
 ui/scripts/ui/widgets/listView.js |  4 +++
 4 files changed, 58 insertions(+)
 create mode 100644 ui/scripts/postLoad.js

diff --git a/ui/config.js b/ui/config.js
index 13a9dd17d588..33a71eec1222 100644
--- a/ui/config.js
+++ b/ui/config.js
@@ -27,5 +27,13 @@ cloudStackOptions = {
         "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
index 15e58fcc091b..686fb09f0278 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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>
diff --git a/ui/scripts/postLoad.js b/ui/scripts/postLoad.js
new file mode 100644
index 000000000000..1440d394ef41
--- /dev/null
+++ b/ui/scripts/postLoad.js
@@ -0,0 +1,43 @@
+// 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() {
+                        var hiddenFields = 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/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 99f68311d8f3..2f7bc1798722 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/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) {

From 59a39d640ca3d9503dc3b19018904cde1c3b6fc2 Mon Sep 17 00:00:00 2001
From: Anurag Awasthi <anurag.awasthi@shapeblue.com>
Date: Wed, 1 May 2019 14:35:41 +0530
Subject: [PATCH 4/4] Hide columns only for Users and add some documentation

---
 ui/config.js           | 9 +++++----
 ui/scripts/postLoad.js | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/config.js b/ui/config.js
index 33a71eec1222..f715360fd0da 100644
--- a/ui/config.js
+++ b/ui/config.js
@@ -17,10 +17,11 @@
 
 // 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/",
+    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",
diff --git a/ui/scripts/postLoad.js b/ui/scripts/postLoad.js
index 1440d394ef41..9734bcb8de4a 100644
--- a/ui/scripts/postLoad.js
+++ b/ui/scripts/postLoad.js
@@ -25,7 +25,8 @@
                 if (cloudStackOptions.hiddenFields[prefix]) {
                     var oldPreFilter = data.listView.preFilter;
                     data.listView.preFilter = function() {
-                        var hiddenFields = cloudStackOptions.hiddenFields[prefix];
+                        // Hide config specified fields only for users.
+                        var hiddenFields = isUser() ? cloudStackOptions.hiddenFields[prefix] : [];
                         if (oldPreFilter) {
                             return hiddenFields.concat(oldPreFilter());
                         }