Proxmox/pve-manager
5
0
Fork 0
Code Pull Requests Releases Activity

improve tree/grid icons

Browse Source 
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>
This commit is contained in:
Dominik Csapak 2017-11-03 09:51:37 +01:00 committed by Fabian Grünbichler
parent 053babdbb4
commit beeadf93f6
2 changed files with 38 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
www/manager6/Utils.js
View File

@ -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 gridcls = '';
var cls = PVE.Utils.get_object_icon_class(value,record.data);
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';
}
}
// overwrite anything else
if (record.data.hastate === 'error') {
gridcls = '-offline';
}
var fa = '<i class="fa fa-fw x-fa-grid' + gridcls + ' fa-' + icon + '"></i> ';
var fa = '<i class="fa-fw x-grid-icon-custom ' + cls + '"></i> ';
return fa + value;
},

55
www/manager6/tree/ResourceTree.js
View File

@ -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();