[pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget

[pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget

[Dominik Csapak]

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

-- 
2.20.1

[pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve

[Dominik Csapak]

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>&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);
+    }
+
+});
-- 
2.20.1

[pbs-devel] [PATCH widget-toolkit 2/3] InfoWidget: eslint fixes

[Dominik Csapak]

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>&nbsp;<div class="right-aligned">{usage}</div>'
-	    ]
+		'{title}</div>&nbsp;<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

[pbs-devel] [PATCH widget-toolkit 3/3] InfoWidget: add setData, so that we can bind it

[Dominik Csapak]

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

[pbs-devel] applied -series: [PATCH widget-toolkit 0/3] add InfoWidget

[Thomas Lamprecht]

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!