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>

diff --git a/src/Makefile b/src/Makefile
index ea71647fa48c522324fb744c6d6b6921a6b0a66a..cd0bf2615198f84a8515bdbcc4472f85d71556a6 100644 (file)
--- a/src/Makefile
+++ b/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               \

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index df5c73d1865c723dc06372a54e0b39c0a2557cc0..7011db31340b8aefd4160105d2ae29b89b811e2a 100644 (file)
--- a/src/css/ext6-pmx.css
+++ b/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;
+}

diff --git a/src/panel/InfoWidget.js b/src/panel/InfoWidget.js
new file mode 100644 (file)
index 0000000..389968e
--- /dev/null
+++ b/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);
+    }
+
+});