From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Subject: [pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve
Date: Fri, 23 Oct 2020 16:29:52 +0200 [thread overview]
Message-ID: <20201023142954.27794-2-d.csapak@proxmox.com> (raw)
In-Reply-To: <20201023142954.27794-1-d.csapak@proxmox.com>
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
next prev parent reply other threads:[~2020-10-23 14:29 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2020-10-23 14:29 [pbs-devel] [PATCH widget-toolkit 0/3] add InfoWidget Dominik Csapak
2020-10-23 14:29 ` Dominik Csapak [this message]
2020-10-23 14:29 ` [pbs-devel] [PATCH widget-toolkit 2/3] InfoWidget: eslint fixes 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
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20201023142954.27794-2-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox