From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 5457F61FC8
for <pbs-devel@lists.proxmox.com>; Fri, 23 Oct 2020 16:29:57 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 52A6B28EF9
for <pbs-devel@lists.proxmox.com>; Fri, 23 Oct 2020 16:29:57 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[212.186.127.180])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS id B6F7828ED5
for <pbs-devel@lists.proxmox.com>; Fri, 23 Oct 2020 16:29:55 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 83A2345E96
for <pbs-devel@lists.proxmox.com>; Fri, 23 Oct 2020 16:29:55 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pbs-devel@lists.proxmox.com
Date: Fri, 23 Oct 2020 16:29:52 +0200
Message-Id: <20201023142954.27794-2-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.20.1
In-Reply-To: <20201023142954.27794-1-d.csapak@proxmox.com>
References: <20201023142954.27794-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.470 Adjusted score from AWL reputation of From: address
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/,
medium trust
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [pbs-devel] [PATCH widget-toolkit 1/3] add info widget from pve
X-BeenThere: pbs-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Backup Server development discussion
<pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Fri, 23 Oct 2020 14:29:57 -0000
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