* [pbs-devel] [PATCH proxmox-backup 2/2] ui: add TaskButton in header
2020-07-09 11:38 [pbs-devel] [PATCH proxmox-backup 1/2] ui: add RunningTasksStore Dominik Csapak
@ 2020-07-09 11:38 ` Dominik Csapak
2020-07-09 12:30 ` [pbs-devel] applied: [PATCH proxmox-backup 1/2] ui: add RunningTasksStore Dietmar Maurer
1 sibling, 0 replies; 3+ messages in thread
From: Dominik Csapak @ 2020-07-09 11:38 UTC (permalink / raw)
To: pbs-devel
opens a grid with the running tasks and a shortcut the the node tasks
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
i am not set on the text/icon or colors, but it seemed somewhat sensible
www/MainView.js | 4 ++
www/Makefile | 1 +
www/button/TaskButton.js | 92 +++++++++++++++++++++++++++++++++++
www/css/ext6-pbs.css | 19 ++++++++
www/dashboard/RunningTasks.js | 2 +
5 files changed, 118 insertions(+)
create mode 100644 www/button/TaskButton.js
diff --git a/www/MainView.js b/www/MainView.js
index cb7a81d..1dd315b 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -224,6 +224,10 @@ Ext.define('PBS.MainView', {
href: '/docs/index.html',
margin: '0 5 0 0',
},
+ {
+ xtype: 'pbsTaskButton',
+ margin: '0 5 0 0',
+ },
{
reference: 'logoutButton',
xtype: 'button',
diff --git a/www/Makefile b/www/Makefile
index b205f67..f75082b 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -9,6 +9,7 @@ JSSRC= \
form/RemoteSelector.js \
form/DataStoreSelector.js \
data/RunningTasksStore.js \
+ button/TaskButton.js \
config/UserView.js \
config/RemoteView.js \
config/ACLView.js \
diff --git a/www/button/TaskButton.js b/www/button/TaskButton.js
new file mode 100644
index 0000000..67cc147
--- /dev/null
+++ b/www/button/TaskButton.js
@@ -0,0 +1,92 @@
+Ext.define('PBS.TaskButton', {
+ extend: 'Ext.button.Button',
+ alias: 'widget.pbsTaskButton',
+
+ config: {
+ badgeText: '0',
+ badgeCls: '',
+ },
+
+ iconCls: 'fa fa-list',
+ userCls: 'pmx-has-badge',
+ text: gettext('Tasks'),
+
+ setText: function(value) {
+ let me = this;
+ me.realText = value;
+ let badgeText = me.getBadgeText();
+ let badgeCls = me.getBadgeCls();
+ let text = `${value} <span class="pmx-button-badge ${badgeCls}">${badgeText}</span>`;
+ return me.callParent([text]);
+ },
+
+ getText: function() {
+ let me = this;
+ return me.realText;
+ },
+
+ setBadgeText: function(value) {
+ let me = this;
+ me.badgeText = value.toString();
+ return me.setText(me.getText());
+ },
+
+ setBadgeCls: function(value) {
+ let me = this;
+ let res = me.callParent([value]);
+ let badgeText = me.getBadgeText();
+ me.setBadgeText(badgeText);
+ return res;
+ },
+
+ handler: function() {
+ let me = this;
+ if (me.grid.isVisible()) {
+ me.grid.setVisible(false);
+ } else {
+ me.grid.showBy(me, 'tr-br');
+ }
+ },
+
+ initComponent: function() {
+ let me = this;
+
+ me.grid = Ext.create({
+ xtype: 'pbsRunningTasks',
+ title: '',
+ hideHeaders: false,
+ floating: true,
+
+ width: 600,
+
+ bbar: [
+ '->',
+ {
+ xtype: 'button',
+ text: gettext('Show All Tasks'),
+ handler: function() {
+ var mainview = me.up('mainview');
+ mainview.getController().redirectTo('pbsServerAdministration:tasks');
+ me.grid.hide();
+ },
+ },
+ ],
+
+ listeners: {
+ 'taskopened': function() {
+ me.grid.hide();
+ },
+ },
+ });
+ me.callParent();
+ me.mon(me.grid.getStore().rstore, 'load', function(store, records, success) {
+ if (!success) return;
+
+ let count = records.length;
+ let text = count > 9 ? '9+' : count.toString();
+ let cls = count > 0 ? 'active': '';
+ me.setBadgeText(text);
+ me.setBadgeCls(cls);
+ });
+ },
+});
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index e634cfc..551d1d1 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -190,3 +190,22 @@ p.logs {
visibility: hidden;
width: 5px;
}
+
+.pmx-has-badge .x-btn-inner {
+ padding: 0 0 0 5px;
+ min-width: 24px;
+}
+
+.pmx-button-badge {
+ display: inline-block;
+ font-weight: bold;
+ border-radius: 20px;
+ background-color: #AAA;
+ padding: 2px 3px;
+ min-width: 24px;
+ line-height: 1em;
+}
+
+.pmx-button-badge.active {
+ background-color: #F00;
+}
diff --git a/www/dashboard/RunningTasks.js b/www/dashboard/RunningTasks.js
index e31218e..4c1d4d1 100644
--- a/www/dashboard/RunningTasks.js
+++ b/www/dashboard/RunningTasks.js
@@ -18,6 +18,8 @@ Ext.define('PBS.RunningTasks', {
upid: record.data.upid,
endtime: record.data.endtime,
}).show();
+
+ view.fireEvent('taskopened', view, record.data.upid);
},
openTaskItemDblClick: function(grid, record) {
--
2.20.1
^ permalink raw reply [flat|nested] 3+ messages in thread* [pbs-devel] applied: [PATCH proxmox-backup 1/2] ui: add RunningTasksStore
2020-07-09 11:38 [pbs-devel] [PATCH proxmox-backup 1/2] ui: add RunningTasksStore Dominik Csapak
2020-07-09 11:38 ` [pbs-devel] [PATCH proxmox-backup 2/2] ui: add TaskButton in header Dominik Csapak
@ 2020-07-09 12:30 ` Dietmar Maurer
1 sibling, 0 replies; 3+ messages in thread
From: Dietmar Maurer @ 2020-07-09 12:30 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Dominik Csapak
applied both patches
> On 07/09/2020 1:38 PM Dominik Csapak <d.csapak@proxmox.com> wrote:
>
>
> so that we have a global store for running tasks
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> www/MainView.js | 1 +
> www/Makefile | 1 +
> www/dashboard/RunningTasks.js | 14 +-------------
> www/data/RunningTasksStore.js | 21 +++++++++++++++++++++
> 4 files changed, 24 insertions(+), 13 deletions(-)
> create mode 100644 www/data/RunningTasksStore.js
>
> diff --git a/www/MainView.js b/www/MainView.js
> index 062d78e..cb7a81d 100644
> --- a/www/MainView.js
> +++ b/www/MainView.js
> @@ -133,6 +133,7 @@ Ext.define('PBS.MainView', {
> init: function(view) {
> var me = this;
>
> + PBS.data.RunningTasksStore.startUpdate();
> me.lookupReference('usernameinfo').update({username:Proxmox.UserName});
>
> // show login on requestexception
> diff --git a/www/Makefile b/www/Makefile
> index 29a3561..b205f67 100644
> --- a/www/Makefile
> +++ b/www/Makefile
> @@ -8,6 +8,7 @@ JSSRC= \
> form/UserSelector.js \
> form/RemoteSelector.js \
> form/DataStoreSelector.js \
> + data/RunningTasksStore.js \
> config/UserView.js \
> config/RemoteView.js \
> config/ACLView.js \
> diff --git a/www/dashboard/RunningTasks.js b/www/dashboard/RunningTasks.js
> index 9b53d1b..e31218e 100644
> --- a/www/dashboard/RunningTasks.js
> +++ b/www/dashboard/RunningTasks.js
> @@ -54,20 +54,8 @@ Ext.define('PBS.RunningTasks', {
> store: {
> type: 'diff',
> autoDestroy: true,
> - autoDestroyRstore: true,
> sorters: 'starttime',
> - rstore: {
> - type: 'update',
> - autoStart: true,
> - interval: 3000,
> - storeid: 'pbs-running-tasks-dash',
> - model: 'proxmox-tasks',
> - proxy: {
> - type: 'proxmox',
> - // maybe separate api call?
> - url: '/api2/json/nodes/localhost/tasks?running=1'
> - },
> - },
> + rstore: PBS.data.RunningTasksStore,
> },
>
> columns: [
> diff --git a/www/data/RunningTasksStore.js b/www/data/RunningTasksStore.js
> new file mode 100644
> index 0000000..d78c44e
> --- /dev/null
> +++ b/www/data/RunningTasksStore.js
> @@ -0,0 +1,21 @@
> +Ext.define('PBS.data.RunningTasksStore', {
> + extend: 'Proxmox.data.UpdateStore',
> +
> + singleton: true,
> +
> + constructor: function(config) {
> + let me = this;
> + config = config || {};
> + Ext.apply(config, {
> + interval: 3000,
> + storeid: 'pbs-running-tasks-dash',
> + model: 'proxmox-tasks',
> + proxy: {
> + type: 'proxmox',
> + // maybe separate api call?
> + url: '/api2/json/nodes/localhost/tasks?running=1',
> + },
> + });
> + me.callParent([config]);
> + },
> +});
> --
> 2.20.1
>
>
>
> _______________________________________________
> pbs-devel mailing list
> pbs-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel
^ permalink raw reply [flat|nested] 3+ messages in thread