This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/master by this push:
new 3bf4e5c ui: configurable branding, keyboard list and hide-able
columns through a new config.js file (#3258)
3bf4e5c is described below
commit 3bf4e5c4982178e0d3e3d4a685d8f634cc1f1a23
Author: Anurag Awasthi <[email protected]>
AuthorDate: Thu May 30 15:32:37 2019 +0530
ui: configurable branding, keyboard list and hide-able columns through a
new config.js file (#3258)
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 <[email protected]>
---
ui/config.js | 40 +++++++++++++++++++++++++++++++++++
ui/index.html | 11 ++++++----
ui/l10n/en.js | 1 +
ui/scripts/cloudStack.js | 2 +-
ui/scripts/postLoad.js | 44 +++++++++++++++++++++++++++++++++++++++
ui/scripts/templates.js | 22 ++++++--------------
ui/scripts/ui/core.js | 13 +++++-------
ui/scripts/ui/widgets/listView.js | 4 ++++
8 files changed, 108 insertions(+), 29 deletions(-)
diff --git a/ui/config.js b/ui/config.js
new file mode 100644
index 0000000..f715360
--- /dev/null
+++ 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
index e725b81..7556fbe 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1762,6 +1762,7 @@
<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 @@
// 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 @@
<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
index 7e992e5..7a13a2c 100644
--- 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
index 7faa8c5..3d9ae47 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/postLoad.js b/ui/scripts/postLoad.js
new file mode 100644
index 0000000..9734bcb
--- /dev/null
+++ 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
index a051b2e..f3bed8b 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
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
index 3f8bb44..09a3ebc 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: {
diff --git a/ui/scripts/ui/widgets/listView.js
b/ui/scripts/ui/widgets/listView.js
index 69a5c7a..b5f4b36 100644
--- 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) {
