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>

diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index eaecc6f68a0db15647b08a363aef3e546f4fd88b..3efe4e710c6bf059185286517d24abce518ad478 100644 (file)
--- 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 b928f95d3a95faf405148f25ca86a44129ddfb12..f6422beb8fd0b8b09e9ac2d53afd65cbefed402f 100644 (file)
--- 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();