add new infoWidget component

this adds a new component, which is 2 labels
(left the title and right the text) with a
small progressbar

it has a method updateValue, where it takes a string and
a value from 0 to 1 and updates the right label
and the progressbar

the progressbar gets a different css class at >60% and
>90% (i added some css classes to make it yellow and red
respectively)

the warning and critical thresholds are customizable

this will be used in a new version of the statusview

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index a43d2fbab6c845499d692d8598f5028e0ca4d11b..8ab383c7a3b722b14e196ec091c42ecde2c6d09b 100644 (file)
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -375,3 +375,20 @@
 .pve-help-button .x-btn-inner {
     color: black;
 }
+
+/* for info widget */
+div.left-aligned {
+    float: left;
+}
+
+div.right-aligned {
+    float: right;
+}
+
+.x-progress.critical .x-progress-bar{
+    background-color: #FF8888;
+}
+
+.x-progress.warning .x-progress-bar{
+    background-color: #FFCC00;
+}

diff --git a/www/manager6/panel/InfoWidget.js b/www/manager6/panel/InfoWidget.js
new file mode 100644 (file)
index 0000000..3152b6f
--- /dev/null
+++ b/www/manager6/panel/InfoWidget.js
@@ -0,0 +1,77 @@
+Ext.define('PVE.widget.Info',{
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveInfoWidget',
+
+    layout: {
+       type: 'vbox',
+       align: 'stretch'
+    },
+
+    value: 0,
+    maximum: 1,
+    printBar: true,
+    items: [
+       {
+           xtype: 'component',
+           itemId: 'label',
+           data: {
+               title: '',
+               usage: ''
+           },
+           tpl: '<div class="left-aligned">{title}</div><div class="right-aligned">{usage}</div>'
+       },
+       {
+           height: 2,
+           border: 0
+       },
+       {
+           xtype: 'progressbar',
+           itemId: 'progress',
+           height: 5,
+           value: 0,
+           animate: true
+       }
+    ],
+
+    warningThreshold: 0.6,
+    criticalThreshold: 0.9,
+
+    updateValue: function(text, usage) {
+       var me = this;
+       var label = me.getComponent('label');
+       label.update(Ext.apply(label.data, {title: me.title, usage:text}));
+
+       if (usage !== undefined &&
+           me.printBar &&
+           Ext.isNumeric(usage) &&
+           usage >= 0) {
+           var progressBar = me.getComponent('progress');
+           progressBar.updateProgress(usage, '');
+           if (usage > me.criticalThreshold) {
+               progressBar.removeCls('warning');
+               progressBar.addCls('critical');
+           } else if (usage > me.warningThreshold) {
+               progressBar.removeCls('critical');
+               progressBar.addCls('warning');
+           } else {
+               progressBar.removeCls('warning');
+               progressBar.removeCls('critical');
+           }
+       }
+    },
+
+    initComponent: function() {
+       var me = this;
+
+       if (!me.title) {
+           throw "no title defined";
+       }
+
+       me.callParent();
+
+       me.getComponent('progress').setVisible(me.printBar);
+
+       me.updateValue(me.text, me.value);
+    }
+
+});