[pve-devel] [PATCH manager v4 6/8] improve tree/grid icons

[Dominik Csapak]

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>
---
 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 eaecc6f6..3efe4e71 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -1032,48 +1032,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 b928f95d..f6422beb 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