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

[anuragaw]

Description

We want to support hiding selective columns in metrics tables for "users" through a config file so that admins can make the relevant information hidden as per their organization needs.

Current PR code will supports metrics tables 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 along with future extension.

(#3217 was merged with this PR)
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 customize 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. It will also allow defining which columns need to be hidden.

Types of changes

• Breaking change (fix or feature that would cause existing functionality to change)
• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Enhancement (improves an existing feature and functionality)
• Cleanup (Code refactoring and cleanup, that may add test cases)

Screenshots (if appropriate):

How Has This Been Tested?

Testing and further documentation in progress and will be updated with proper notes.

Image with all columns showing up -

Change in config.js file -

// 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": ["memused"], // Options - "name", "state", "ipaddress", "zonename", "cpuused", "memused", "network", "disk"
        "metrics.volumes": [] // Options - "name", "state", "vmname", "sizegb", "physicalsize", "utilization", "storagetype", "storage"
    }
};

View after change in config file -

Post Merge Update:

Please note that Admins can still see all information and only Users cannot see the columns that are specified. Consequently metrics tables that users don't see have no relevance in the config file. These include zone, clusters, hosts.

[yadvr]

At some point, let's merge this with PR #3217 otherwise this will lead to merge conflicts for related features extending/using config.js

[anuragaw]

@blueorangutan package

[blueorangutan]

@anuragaw a Jenkins job has been kicked to build packages. I'll keep you posted as I make progress.

[blueorangutan]

Packaging result: ✔centos6 ✔centos7 ✔debian. JID-2678

[yadvr]

Put some after-loaded method/js file that does something looping over sections minimizing changes to the listview/widget/library:

            $.each(cloudStack.sections, function(idx, section) {                   
                if (section.listView) {                                            
                    section.listView.preFilter = function(args) {                  
                        const original = section.listView.preFilter(args);         
                        return ['name'] + original;                                                                                                                     
                    };                                                             
                    console.log(Object.keys(section.listView.fields));             
                }                                                                  
            }); 

[yadvr]

Closed #3217 in favour of this one

[anuragaw]

This was broken in existing code and needed fixing. If an upper field is hidden we must not draw it's containing columns.

[anuragaw]

@rhtyd I have updated the PR with the changes we discussed.

[borisstoyanov]

@blueorangutan package

[blueorangutan]

@borisstoyanov a Jenkins job has been kicked to build packages. I'll keep you posted as I make progress.

[blueorangutan]

Packaging result: ✔centos6 ✔centos7 ✔debian. JID-2708

[borisstoyanov]

LGTM, manually checked all the changes

[PaulAngus]

Background: show/hide column feature enables cloud operator to hide 'sensitive' infrastructure data from users.

• Columns hidden from users are also hidden from administrator

Consolidation of keyboard types:

• keyboard list on console proxy does not reflect the configured (in config.js) keyboard types.

[anuragaw]

@PaulAngus - addressed all the comments in the latest commit. There are 5 keyboards specified in the config.js. I get first 4 of them. I wanted to confirm if the keyboard options you get were only missing "Simplified Chinese Keyboard" or any more?

[yadvr]

@blueorangutan package

[blueorangutan]

@rhtyd a Jenkins job has been kicked to build packages. I'll keep you posted as I make progress.

[blueorangutan]

Packaging result: ✔centos6 ✔centos7 ✔debian. JID-2765

[yadvr]

Purely UI changes, merging based on tests and reviews.

[anuragaw]

Created PR #3429 to clean up config file with redundant columns.