we set new icons for the tree and grid
changes:
* new icons
* wider type column (bigger icons)
* use arrows true (uses arrows instead of +/- and gets rid of the
ugly lines in the tree)
* datacenter has icon instead of folder open/close
* "folder view" gets type icons for folders
Signed-off-by: Dominik Csapak <d.csa...@proxmox.com>
---
www/manager6/Utils.js | 41 +++++++++++++++++++++++------
www/manager6/data/ResourceStore.js | 2 +-
www/manager6/tree/ResourceTree.js | 53 +++++++++++++++++++++++++++++++-------
3 files changed, 77 insertions(+), 19 deletions(-)
diff --git a/www/manager6/Utils.js b/www/manager6/Utils.js
index 07fd0f4..d1cbe4e 100644
--- a/www/manager6/Utils.js
+++ b/www/manager6/Utils.js
@@ -898,17 +898,42 @@ Ext.define('PVE.Utils', { statics: {
render_resource_type: function(value, metaData, record, rowIndex,
colIndex, store) {
- var cls = 'pve-itype-icon-' + value;
+ 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 (record.data.running) {
- metaData.tdCls = cls + "-running";
- } else if (record.data.template) {
- metaData.tdCls = cls + "-template";
- } else {
- metaData.tdCls = cls;
+ 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'
+ }
}
- return value;
+ var fa = '<i class="fa fa-fw x-fa-grid' + gridcls + ' fa-' + icon +
'"></i> '
+ return fa + value;
},
render_uptime: function(value, metaData, record, rowIndex, colIndex,
store) {
diff --git a/www/manager6/data/ResourceStore.js
b/www/manager6/data/ResourceStore.js
index c757a46..4c409de 100644
--- a/www/manager6/data/ResourceStore.js
+++ b/www/manager6/data/ResourceStore.js
@@ -23,7 +23,7 @@ Ext.define('PVE.data.ResourceStore', {
renderer: PVE.Utils.render_resource_type,
sortable: true,
hideable: false,
- width: 80
+ width: 100
},
id: {
header: 'ID',
diff --git a/www/manager6/tree/ResourceTree.js
b/www/manager6/tree/ResourceTree.js
index 556975e..9b703a0 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -8,28 +8,37 @@ Ext.define('PVE.tree.ResourceTree', {
statics: {
typeDefaults: {
node: {
- iconCls: 'x-tree-node-server',
+ iconCls: 'fa fa-building x-fa-tree',
text: gettext('Nodes')
},
pool: {
- iconCls: 'x-tree-node-pool',
+ iconCls: 'fa fa-tags fa-dark x-fa-tree',
text: gettext('Resource Pool')
},
storage: {
- iconCls: 'x-tree-node-harddisk',
+ iconCls: 'fa fa-database fa-dark x-fa-tree',
text: gettext('Storage')
},
qemu: {
- iconCls: 'x-tree-node-computer',
+ iconCls: 'fa fa-desktop x-fa-tree',
text: gettext('Virtual Machine')
},
lxc: {
- iconCls: 'x-tree-node-lxc',
+ //iconCls: 'x-tree-node-lxc',
+ iconCls: 'fa fa-cube x-fa-tree',
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',
+ }
}
},
+ useArrows: true,
+
// private
nodeSortFn: function(node1, node2) {
var n1 = node1.data;
@@ -94,10 +103,34 @@ Ext.define('PVE.tree.ResourceTree', {
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 running = info.running ? '-running' : '';
- var template = info.template ? '-template' : '';
- info.iconCls = defaults.iconCls + running + template;
+ 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';
+ }
+
+ info.iconCls = defaults.iconCls + iconClsAdd;
+
+ if (info.template) {
+ iconClsAdd = '-template';
+ info.iconCls =
PVE.tree.ResourceTree.typeDefaults['template'].iconCls + '-' + info.type;
+ }
+
}
},
@@ -201,7 +234,7 @@ Ext.define('PVE.tree.ResourceTree', {
// fixme: suspend events ?
var rootnode = me.store.getRootNode();
-
+ me.setIconCls(rootnode.data);
// remember selected node (and all parents)
var sm = me.getSelectionModel();
--
2.1.4
_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
http://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
