* [pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve
2020-10-23 14:29 [pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget Dominik Csapak
@ 2020-10-23 14:29 ` Dominik Csapak
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 2/3] InfoWidget: eslint fixes Dominik Csapak
` (2 subsequent siblings)
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2020-10-23 14:29 UTC (permalink / raw)
To: pbs-devel
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 | 1 +
src/css/ext6-pmx.css | 17 ++++++++
src/panel/InfoWidget.js | 96 +++++++++++++++++++++++++++++++++++++++++
3 files changed, 114 insertions(+)
create mode 100644 src/panel/InfoWidget.js
diff --git a/src/Makefile b/src/Makefile
index ea71647..cd0bf26 100644
--- 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 df5c73d..7011db3 100644
--- 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
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> <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);
+ }
+
+});
--
2.20.1
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] [PATCH widget-toolkit 2/3] InfoWidget: eslint fixes
2020-10-23 14:29 [pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget Dominik Csapak
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve Dominik Csapak
@ 2020-10-23 14:29 ` Dominik Csapak
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 3/3] InfoWidget: add setData, so that we can bind it Dominik Csapak
2020-10-23 18:34 ` [pbs-devel] applied -series: [PATCH widget-toolkit 0/3] add InfoWidget Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2020-10-23 14:29 UTC (permalink / raw)
To: pbs-devel
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/InfoWidget.js | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/panel/InfoWidget.js b/src/panel/InfoWidget.js
index 389968e..8005fa8 100644
--- a/src/panel/InfoWidget.js
+++ b/src/panel/InfoWidget.js
@@ -4,7 +4,7 @@ Ext.define('Proxmox.widget.Info', {
layout: {
type: 'vbox',
- align: 'stretch'
+ align: 'stretch',
},
value: 0,
@@ -17,27 +17,27 @@ Ext.define('Proxmox.widget.Info', {
data: {
title: '',
usage: '',
- iconCls: undefined
+ iconCls: undefined,
},
tpl: [
'<div class="left-aligned">',
'<tpl if="iconCls">',
'<i class="{iconCls}"></i> ',
'</tpl>',
- '{title}</div> <div class="right-aligned">{usage}</div>'
- ]
+ '{title}</div> <div class="right-aligned">{usage}</div>',
+ ],
},
{
height: 2,
- border: 0
+ border: 0,
},
{
xtype: 'progressbar',
itemId: 'progress',
height: 5,
value: 0,
- animate: true
- }
+ animate: true,
+ },
],
warningThreshold: 0.6,
@@ -57,7 +57,7 @@ Ext.define('Proxmox.widget.Info', {
updateValue: function(text, usage) {
var me = this;
var label = me.getComponent('label');
- label.update(Ext.apply(label.data, {title: me.title, usage:text}));
+ label.update(Ext.apply(label.data, { title: me.title, usage: text }));
if (usage !== undefined &&
me.printBar &&
@@ -91,6 +91,6 @@ Ext.define('Proxmox.widget.Info', {
me.updateValue(me.text, me.value);
me.setIconCls(me.iconCls);
- }
+ },
});
--
2.20.1
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] [PATCH widget-toolkit 3/3] InfoWidget: add setData, so that we can bind it
2020-10-23 14:29 [pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget Dominik Csapak
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve Dominik Csapak
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 2/3] InfoWidget: eslint fixes Dominik Csapak
@ 2020-10-23 14:29 ` Dominik Csapak
2020-10-23 18:34 ` [pbs-devel] applied -series: [PATCH widget-toolkit 0/3] add InfoWidget Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Dominik Csapak @ 2020-10-23 14:29 UTC (permalink / raw)
To: pbs-devel
with a setData function that calls our updateValue, we can now use
viewModel bind to update those widgets
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/InfoWidget.js | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/panel/InfoWidget.js b/src/panel/InfoWidget.js
index 8005fa8..53c2ec7 100644
--- a/src/panel/InfoWidget.js
+++ b/src/panel/InfoWidget.js
@@ -54,6 +54,10 @@ Ext.define('Proxmox.widget.Info', {
me.getComponent('label').data.iconCls = iconCls;
},
+ setData: function(data) {
+ this.updateValue(data.text, data.usage);
+ },
+
updateValue: function(text, usage) {
var me = this;
var label = me.getComponent('label');
--
2.20.1
^ permalink raw reply [flat|nested] 5+ messages in thread
* [pbs-devel] applied -series: [PATCH widget-toolkit 0/3] add InfoWidget
2020-10-23 14:29 [pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget Dominik Csapak
` (2 preceding siblings ...)
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 3/3] InfoWidget: add setData, so that we can bind it Dominik Csapak
@ 2020-10-23 18:34 ` Thomas Lamprecht
3 siblings, 0 replies; 5+ messages in thread
From: Thomas Lamprecht @ 2020-10-23 18:34 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Dominik Csapak
On 23.10.20 16:29, Dominik Csapak wrote:
> sending it now, i'll need that for pbs datastore summary
>
> Dominik Csapak (3):
> add info widget from pve
> InfoWidget: eslint fixes
> InfoWidget: add setData, so that we can bind it
>
> src/Makefile | 1 +
> src/css/ext6-pmx.css | 17 +++++++
> src/panel/InfoWidget.js | 100 ++++++++++++++++++++++++++++++++++++++++
> 3 files changed, 118 insertions(+)
> create mode 100644 src/panel/InfoWidget.js
>
applied series, thanks!
^ permalink raw reply [flat|nested] 5+ messages in thread