add info widget from pve

we want to reuse that, so copy it here and rename it to pmxInfoWidget

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

src/Makefile

@@ -37,6 +37,7 @@ JSSRC=					\
 	grid/PendingObjectGrid.js	\
 	grid/DiskList.js		\
 	panel/InputPanel.js		\
+	panel/InfoWidget.js		\
 	panel/LogView.js		\
 	panel/JournalView.js		\
 	panel/RRDChart.js		\

src/css/ext6-pmx.css

@@ -52,3 +52,20 @@
 	left: 0.5em;
 	top: 0.6em;
 }
+
+/* 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;
+}

src/panel/InfoWidget.js

@@ -0,0 +1,96 @@
+Ext.define('Proxmox.widget.Info', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pmxInfoWidget',
+
+    layout: {
+	type: 'vbox',
+	align: 'stretch'
+    },
+
+    value: 0,
+    maximum: 1,
+    printBar: true,
+    items: [
+	{
+	    xtype: 'component',
+	    itemId: 'label',
+	    data: {
+		title: '',
+		usage: '',
+		iconCls: undefined
+	    },
+	    tpl: [
+		'<div class="left-aligned">',
+		'<tpl if="iconCls">',
+		'<i class="{iconCls}"></i> ',
+		'</tpl>',
+		'{title}</div>&nbsp;<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,
+
+    setPrintBar: function(enable) {
+	var me = this;
+	me.printBar = enable;
+	me.getComponent('progress').setVisible(enable);
+    },
+
+    setIconCls: function(iconCls) {
+	var me = this;
+	me.getComponent('label').data.iconCls = iconCls;
+    },
+
+    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);
+	me.setIconCls(me.iconCls);
+    }
+
+});