[pbs-devel] [PATCH proxmox-backup 1/2] ui: add RunningTasksStore

[pbs-devel] [PATCH proxmox-backup 1/2] ui: add RunningTasksStore

[Dominik Csapak]

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] [PATCH proxmox-backup 2/2] ui: add TaskButton in header

[Dominik Csapak]

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

[pbs-devel] applied: [PATCH proxmox-backup 1/2] ui: add RunningTasksStore

[Dietmar Maurer]

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