[pve-devel] [PATCH manager v2 1/7] add new infoWidget component

[Dominik Csapak]

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 at proxmox.com>
---
changes from v1:
 renamed css classes to warning and crtitical
 made thresholds configurable
 www/css/ext6-pve.css             | 17 +++++++++
 www/manager6/panel/InfoWidget.js | 77 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 www/manager6/panel/InfoWidget.js

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index a43d2fb..8ab383c 100644
--- 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
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);
+    }
+
+});
-- 
2.1.4