[pve-devel] [PATCH manager 2/2] show storage usage in tree

[Dominik Csapak]

this adds a little usage indicator in the tree for all storage definitions,
so that one can easily see how much of a storage is used

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
the change to sort after the id instead of text is necessary,
since we change the text of the tree (so the storages would not be correctly
sorted)

the id has the same information, so it should result in the same ordering
 www/css/ext6-pve.css              | 22 ++++++++++++++++++++++
 www/manager6/tree/ResourceTree.js | 29 ++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index cc90d5ba..c8fabd6f 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -514,3 +514,25 @@ table.osds td:first-of-type {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+
+.usage-wrapper {
+    margin-left: -7px;
+    vertical-align: text-bottom;
+    display: inline-block;
+    width: 8px;
+    height: 1.2em;
+    border: 1px solid #555;
+    border-radius: 1px;
+    padding: 1px;
+}
+
+.usage-negative {
+    left: 0px;
+    right:0px;
+}
+
+.usage {
+    left: 0px;
+    right: 0px;
+    background-color: #555;
+}
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index a4eb18ff..78d4cbb0 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -68,7 +68,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		}
 	    }
 
-	    return n1.text > n2.text ? 1 : (n1.text < n2.text ? -1 : 0);
+	    return n1.id > n2.id ? 1 : (n1.id < n2.id ? -1 : 0);
 	} else if (n1.groupbyid) {
 	    return -1;
 	} else if (n2.groupbyid) {
@@ -106,11 +106,37 @@ Ext.define('PVE.tree.ResourceTree', {
 	}
     },
 
+    // add additional elements to text
+    // at the moment only the usage indicator for storages
+    setText: function(info) {
+	var me = this;
+
+	var status = '';
+	if (info.type === 'storage') {
+	    var maxdisk = info.maxdisk;
+	    var disk = info.disk;
+	    var usage = disk/maxdisk;
+	    var cls = '';
+	    if (usage <= 1.0 && usage >= 0.0) {
+		var height = (usage*100).toFixed(0);
+		var neg_height = (100-usage*100).toFixed(0);
+		status = '<div class="usage-wrapper">';
+		status += '<div class="usage-negative" style="height: ';
+		status += neg_height + '%"></div>';
+		status += '<div class="usage" style="height: '+ height +'%"></div>';
+		status += '</div> ';
+	    }
+	}
+
+	info.text = status + info.text;
+    },
+
     // private
     addChildSorted: function(node, info) {
 	var me = this;
 
 	me.setIconCls(info);
+	me.setText(info);
 
 	var defaults;
 	if (info.groupbyid) {
@@ -276,6 +302,7 @@ Ext.define('PVE.tree.ResourceTree', {
 			var info = olditem.data;
 			Ext.apply(info, item.data);
 			me.setIconCls(info);
+			me.setText(info);
 			olditem.commit();
 		    }
 		    if ((!item || moved) && olditem.isLeaf()) {
-- 
2.11.0