show storage usage in tree

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@proxmox.com>
Acked-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index cc90d5ba05c01ae12ab7152e1cd163f04e15c1f1..c8fabd6f80acac7a7165453492a91a5cc875b1d4 100644 (file)
--- 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 a4eb18ffdc7277d0890fe4861fc744f0185dad2a..78d4cbb0eff02735c8e96cd1343f8a3278e80eda 100644 (file)
--- 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()) {