improve tree/grid icons

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@proxmox.com>

www/manager6/Utils.js

@@ -1032,48 +1032,36 @@ Ext.define('PVE.Utils', { utilities: {
 	return PVE.Utils.render_size(value);
     },
 
+    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;
+	}
+
+	var defaults = PVE.tree.ResourceTree.typeDefaults[objType];
+	if (defaults && defaults.iconCls) {
+	    var retVal = defaults.iconCls + ' ' + status;
+	    return retVal;
+	}
+
+	return '';
+    },
+
     render_resource_type: function(value, metaData, record, rowIndex, colIndex, store) {
 
-	var icon = '';
+	var cls = PVE.Utils.get_object_icon_class(value,record.data);
-	var gridcls = '';
 
-	switch (value) {
+	var fa = '<i class="fa-fw x-grid-icon-custom ' + cls  + '"></i> ';
-	    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';
-	    }
-	}
-
-	// overwrite anything else
-	if (record.data.hastate === 'error') {
-	    gridcls = '-offline';
-	}
-
-	var fa = '<i class="fa fa-fw x-fa-grid' + gridcls  +  ' fa-' + icon  + '"></i> ';
 	return fa + value;
     },
 

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'
+		iconCls: 'fa fa-file-o'
-	    },
-	    datacenter: {
-		iconCls: 'fa fa-server x-fa-tree-datacenter'
 	    }
 	}
     },
@@ -102,40 +99,10 @@ Ext.define('PVE.tree.ResourceTree', {
     setIconCls: function(info) {
 	var me = this;
 
-	var defaults = PVE.tree.ResourceTree.typeDefaults[info.type];
+	var cls = PVE.Utils.get_object_icon_class(info.type, info);
-	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;
-	    }
 
+	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();