[pve-devel] [PATCH manager v3 6/7] improve tree/grid icons
Dominik Csapak
d.csapak at proxmox.com
Mon May 8 12:31:50 CEST 2017
we improve the icons in the tree and the resource grid by
differentiating between cluster online/offline status and no rrd data
when we have no rrd data from a node/storage, instead of showing a
red x (which is scary) even if the node is reachable by corosync (which
confused quite a bit of people, because we show all nodes as online in
the datacenter summary), we show the node/storage with a '?'
this signals that something is wrong with this node, even if we can
reach it via cluster methods
this rewrite of the logic includes a refactoring of the method
of getting the icon, because we want the same icons in the tree and the
grid, and an optimization on how we use the css classes
(introducing a x-grid-custom-icon class)
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
after profiling the javascript calls when having/adding/deleting ~5000 containers
i measured that the calculation of the icon classes is insignificant
(one call does not reach the minimum resolution of 5microsecond of
the browsers high precision timer)
extjs uses more time with adding the tree nodes and executing callbacks and
events there (sadly one cannot batch add to a treenode)
so i think without using a completely different approach to add objects
to the tree, we are as good as we are going to get
also, adding that much objects at once will rarely happen i guess
www/manager6/Utils.js | 64 ++++++++++++++++-----------------------
www/manager6/tree/ResourceTree.js | 55 +++++++--------------------------
2 files changed, 37 insertions(+), 82 deletions(-)
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index d1ada771..e7f5e8fc 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -998,48 +998,36 @@ Ext.define('PVE.Utils', { utilities: {
return PVE.Utils.render_size(value);
},
- render_resource_type: function(value, metaData, record, rowIndex, colIndex, store) {
-
- var icon = '';
- var gridcls = '';
-
- switch (value) {
- case 'lxc': icon = 'cube';
- gridcls = '-stopped';
- break;
- case 'qemu': icon = 'desktop';
- gridcls = '-stopped';
- break;
- case 'node': icon = 'building';
- gridcls = '-offline';
- break;
- case 'storage': icon = 'database'; break;
- case 'pool': icon = 'tags'; break;
- default: icon = 'file';
- }
-
- if (value === 'lxc' || value === 'qemu') {
- if (record.data.running && record.data.status !== 'paused') {
- gridcls = '-running';
- } else if (record.data.running) {
- gridcls = '-paused';
- }
- if (record.data.template) {
- icon = 'file-o';
- gridcls = '-template-' + value;
- }
- } else if (value === 'node') {
- if (record.data.running) {
- gridcls = '-online';
- }
+ get_object_icon_class: function(type, record) {
+ var status = '';
+ var objType = type;
+
+ if (type === 'type') {
+ // for folder view
+ objType = record.groupbyid;
+ } else if (record.template) {
+ // templates
+ objType = 'template';
+ status = type;
+ } else {
+ // everything else
+ status = record.status + ' ha-' + record.hastate;
}
- // overwrite anything else
- if (record.data.hastate === 'error') {
- gridcls = '-offline';
+ var defaults = PVE.tree.ResourceTree.typeDefaults[objType];
+ if (defaults && defaults.iconCls) {
+ var retVal = defaults.iconCls + ' ' + status;
+ return retVal;
}
- var fa = '<i class="fa fa-fw x-fa-grid' + gridcls + ' fa-' + icon + '"></i> ';
+ return '';
+ },
+
+ render_resource_type: function(value, metaData, record, rowIndex, colIndex, store) {
+
+ var cls = PVE.Utils.get_object_icon_class(value,record.data);
+
+ var fa = '<i class="fa-fw x-grid-icon-custom ' + cls + '"></i> ';
return fa + value;
},
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index f306e9c5..5d9a636f 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -8,31 +8,28 @@ Ext.define('PVE.tree.ResourceTree', {
statics: {
typeDefaults: {
node: {
- iconCls: 'fa fa-building x-fa-tree',
+ iconCls: 'fa fa-building',
text: gettext('Nodes')
},
pool: {
- iconCls: 'fa fa-tags fa-dark x-fa-tree',
+ iconCls: 'fa fa-tags',
text: gettext('Resource Pool')
},
storage: {
- iconCls: 'fa fa-database fa-dark x-fa-tree',
+ iconCls: 'fa fa-database',
text: gettext('Storage')
},
qemu: {
- iconCls: 'fa fa-desktop x-fa-tree',
+ iconCls: 'fa fa-desktop',
text: gettext('Virtual Machine')
},
lxc: {
//iconCls: 'x-tree-node-lxc',
- iconCls: 'fa fa-cube x-fa-tree',
+ iconCls: 'fa fa-cube',
text: gettext('LXC Container')
},
template: {
- iconCls: 'fa fa-file-o fa-dark x-fa-tree-template'
- },
- datacenter: {
- iconCls: 'fa fa-server x-fa-tree-datacenter'
+ iconCls: 'fa fa-file-o'
}
}
},
@@ -102,40 +99,10 @@ Ext.define('PVE.tree.ResourceTree', {
setIconCls: function(info) {
var me = this;
- var defaults = PVE.tree.ResourceTree.typeDefaults[info.type];
- if (info.id === 'root') {
- defaults = PVE.tree.ResourceTree.typeDefaults.datacenter;
- } else if (info.type === 'type') {
- defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
- }
- if (defaults && defaults.iconCls) {
- var iconClsAdd = '';
-
- if (info.running && info.type === 'node') {
- iconClsAdd = '-online';
- } else if (info.running) {
- iconClsAdd = '-running';
- if (info.status === 'paused') {
- iconClsAdd = '-paused';
- }
- } else if (info.type === 'lxc' || info.type === 'qemu') {
- iconClsAdd = '-stopped';
- } else if (info.type === 'node') {
- iconClsAdd = '-offline';
- }
-
- // overwrite any other class
- if (info.hastate === 'error') {
- iconClsAdd = '-offline';
- }
-
- info.iconCls = defaults.iconCls + iconClsAdd;
-
- if (info.template) {
- iconClsAdd = '-template';
- info.iconCls = PVE.tree.ResourceTree.typeDefaults.template.iconCls + '-' + info.type;
- }
+ var cls = PVE.Utils.get_object_icon_class(info.type, info);
+ if (cls !== '') {
+ info.iconCls = cls;
}
},
@@ -227,7 +194,8 @@ Ext.define('PVE.tree.ResourceTree', {
root: {
expanded: true,
id: 'root',
- text: gettext('Datacenter')
+ text: gettext('Datacenter'),
+ iconCls: 'fa fa-server'
}
});
@@ -239,7 +207,6 @@ Ext.define('PVE.tree.ResourceTree', {
store.suspendEvents();
var rootnode = me.store.getRootNode();
- me.setIconCls(rootnode.data);
// remember selected node (and all parents)
var sm = me.getSelectionModel();
--
2.11.0
More information about the pve-devel
mailing list