[pve-devel] [PATCH manager v2 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>
---
 www/css/ext6-pve.css              | 22 ++++++++++++++++++++++
 www/manager6/tree/ResourceTree.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

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..bf2fd960 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -66,6 +66,8 @@ Ext.define('PVE.tree.ResourceTree', {
 		if ((tcmp = v1 > v2 ? 1 : (v1 < v2 ? -1 : 0)) != 0) {
 		    return tcmp;
 		}
+	    } else if (v1 === 'storage' && v2 === 'storage') {
+		return n1.id > n2.id ? 1 : (n1.id < n2.id ? -1 : 0);
 	    }
 
 	    return n1.text > n2.text ? 1 : (n1.text < n2.text ? -1 : 0);
@@ -106,11 +108,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 +304,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