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 over 60% and
over 90% (i added some css classes to make it yellow and red
respectively)
this will be used in a new version of the statusview
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/css/ext6-pve.css | 17 +++++++++
www/manager6/panel/InfoWidget.js | 75 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 92 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..9988a77 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.above-90 .x-progress-bar{
+ background-color: #FF8888;
+}
+
+.x-progress.above-60 .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..da789c1
--- /dev/null
+++ b/www/manager6/panel/InfoWidget.js
@@ -0,0 +1,75 @@
+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
+ }
+ ],
+
+ 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, '');
+ progressBar.removeCls('above-90');
+ if (usage > 0.9) {
+ progressBar.removeCls('above-60');
+ progressBar.addCls('above-90');
+ } else if (usage > 0.6) {
+ progressBar.removeCls('above-90');
+ progressBar.addCls('above-60');
+ } else {
+ progressBar.removeCls('above-60');
+ progressBar.removeCls('above-90');
+ }
+ }
+ },
+
+ 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