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

Author: anuragaw

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"
     }
 };

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>

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);

ui/scripts/ui/widgets/listView.js

@@ -88,7 +88,9 @@
 
                 // Make sure the master checkbox is unselected
                 if (multiSelect) {
-                    $instanceRow.closest('.list-view').find('input.multiSelectMasterCheckbox').attr('checked', false);
+                    var $listView = $instanceRow.closest('.list-view');
+                    $listView.find('input.multiSelectMasterCheckbox').prop('checked', false);
+                    toggleMultiSelectActions($listView, false);
                 }
 
                 var externalLinkAction = action.externalLink;
@@ -860,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;
@@ -882,15 +886,15 @@
 
         if (multiSelect) {
             var $th = $('<th>').addClass('multiselect').appendTo($tr);
-            var content = $('<input>')
+            var $multiSelectMaster = $('<input>')
                 .attr('type', 'checkbox')
-                .addClass('multiSelectMasterCheckbox')
-                .appendTo($th);
+                .addClass('multiSelectMasterCheckbox');
+            $multiSelectMaster.appendTo($th);
 
-            content.click(function() {
-                var checked = $(this).is(':checked');
-                $('.multiSelectCheckbox').attr('checked', checked);
-                toggleMultiSelectActions($table.closest('.list-view'), checked);
+            $multiSelectMaster.click(function() {
+                var isMasterChecked = $(this).prop('checked');
+                $('.multiSelectCheckbox').prop('checked', isMasterChecked);
+                toggleMultiSelectActions($table.closest('.list-view'), isMasterChecked);
             });
         }
 
@@ -1203,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) {