[pve-devel] [PATCH manager 5/6] 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

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Utils.js             | 69 ++++++++++++++++++---------------------
 www/manager6/tree/ResourceTree.js | 50 ++++++----------------------
 2 files changed, 42 insertions(+), 77 deletions(-)

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index d1ada771..cc37e3a2 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -998,48 +998,43 @@ 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(grid, type, record) {
+	var cmpCls = ' x-fa-' + (grid?'grid':'tree');
+
+	var objectType = type;
+
+	if (record.id === 'root') {
+	    objectType = 'datacenter';
+	    cmpCls += '-datacenter';
+	} else if (record.template) {
+	    objectType = 'template';
+	    cmpCls += '-template-' + type;
+	} else if (type === 'type') {
+	    objectType = record.groupbyid;
+	} else {
+	    objectType = type;
+	    if (record.status) {
+		cmpCls += '-';
+		cmpCls += (record.hastate === 'error') ? 'offline' : record.status;
+	    } else if(record.type === 'node') {
+		cmpCls += '-';
+		cmpCls += 'unknown';
 	    }
 	}
 
-	// overwrite anything else
-	if (record.data.hastate === 'error') {
-	    gridcls = '-offline';
+	var defaults = PVE.tree.ResourceTree.typeDefaults[objectType];
+	if (defaults && defaults.iconCls) {
+	    return defaults.iconCls + cmpCls;
 	}
 
-	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(true,value,record.data);
+
+	var fa = '<i class="fa-fw ' + cls  + '"></i> ';
 	return fa + value;
     },
 
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 910379ef..e781052f 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -8,31 +8,31 @@ 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 fa-dark',
 		text: gettext('Resource Pool')
 	    },
 	    storage: {
-		iconCls: 'fa fa-database fa-dark  x-fa-tree',
+		iconCls: 'fa fa-database fa-dark',
 		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 fa-dark'
 	    },
 	    datacenter: {
-		iconCls: 'fa fa-server x-fa-tree-datacenter'
+		iconCls: 'fa fa-server'
 	    }
 	}
     },
@@ -102,40 +102,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(false, info.type, info);
 
+	if (cls !== '') {
+	    info.iconCls = cls;
 	}
     },
 
-- 
2.11.0