[pbs-devel] [PATCH v7 proxmox-backup 26/31] ui: add view with separate grids for pull and push sync jobs

[Christian Ebner]

Show sync jobs in pull and in push direction in two separate grids,
visually separating them to limit possible misconfiguration.

Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
changes since version 6:
- Fix owner header label for sync direction push

 www/Makefile                   |  1 +
 www/config/SyncPullPushView.js | 61 ++++++++++++++++++++++++++++++++++
 www/config/SyncView.js         | 21 ++++++++++--
 www/datastore/DataStoreList.js |  2 +-
 www/datastore/Panel.js         |  2 +-
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 www/config/SyncPullPushView.js

diff --git a/www/Makefile b/www/Makefile
index 609a0ba67..d35e81283 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -61,6 +61,7 @@ JSSRC=							\
 	config/TrafficControlView.js			\
 	config/ACLView.js				\
 	config/SyncView.js				\
+	config/SyncPullPushView.js			\
 	config/VerifyView.js				\
 	config/PruneView.js				\
 	config/GCView.js				\
diff --git a/www/config/SyncPullPushView.js b/www/config/SyncPullPushView.js
new file mode 100644
index 000000000..3460bc662
--- /dev/null
+++ b/www/config/SyncPullPushView.js
@@ -0,0 +1,61 @@
+Ext.define('PBS.config.SyncPullPush', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pbsSyncJobPullPushView',
+    title: gettext('Sync Jobs'),
+
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    layout: {
+	type: 'vbox',
+	align: 'stretch',
+	multi: true,
+	bodyPadding: 5,
+    },
+    defaults: {
+	collapsible: false,
+	margin: 5,
+    },
+    scrollable: true,
+    items: [
+	{
+	    xtype: 'pbsSyncJobView',
+	    itemId: 'syncJobsPull',
+	    syncDirection: 'pull',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	    minHeight: 125, // shows at least one line of content
+	},
+	{
+	    xtype: 'splitter',
+	    performCollapse: false,
+	},
+	{
+	    xtype: 'pbsSyncJobView',
+	    itemId: 'syncJobsPush',
+	    syncDirection: 'push',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	    flex: 1,
+	    minHeight: 125, // shows at least one line of content
+	},
+    ],
+    initComponent: function() {
+	let me = this;
+
+	let subPanelIds = me.items.map(el => el.itemId).filter(id => !!id);
+
+	me.callParent();
+
+	for (const itemId of subPanelIds) {
+	    let component = me.getComponent(itemId);
+	    component.relayEvents(me, ['activate', 'deactivate', 'destroy']);
+	}
+    },
+
+    cbindData: function(initialConfig) {
+        let me = this;
+        me.datastore = initialConfig.datastore ? initialConfig.datastore : undefined;
+    },
+});
diff --git a/www/config/SyncView.js b/www/config/SyncView.js
index 4669a23e2..c1b8fddc2 100644
--- a/www/config/SyncView.js
+++ b/www/config/SyncView.js
@@ -25,11 +25,21 @@ Ext.define('pbs-sync-jobs-status', {
 Ext.define('PBS.config.SyncJobView', {
     extend: 'Ext.grid.GridPanel',
     alias: 'widget.pbsSyncJobView',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     stateful: true,
     stateId: 'grid-sync-jobs-v1',
 
-    title: gettext('Sync Jobs'),
+    title: gettext('Sync Jobs - Pull Direction'),
+    ownerHeader: gettext('Owner'),
+
+    cbindData: function(initialConfig) {
+	let me = this;
+	if (me.syncDirection === 'push') {
+	    me.title = gettext('Sync Jobs - Push Direction');
+	    me.ownerHeader = gettext('Local User');
+	}
+    },
 
     controller: {
 	xclass: 'Ext.app.ViewController',
@@ -39,6 +49,7 @@ Ext.define('PBS.config.SyncJobView', {
 	    let view = me.getView();
             Ext.create('PBS.window.SyncJobEdit', {
 		datastore: view.datastore,
+		syncDirection: view.syncDirection,
 		listeners: {
 		    destroy: function() {
 			me.reload();
@@ -56,6 +67,7 @@ Ext.define('PBS.config.SyncJobView', {
             Ext.create('PBS.window.SyncJobEdit', {
 		datastore: view.datastore,
                 id: selection[0].data.id,
+		syncDirection: view.syncDirection,
 		listeners: {
 		    destroy: function() {
 			me.reload();
@@ -117,6 +129,9 @@ Ext.define('PBS.config.SyncJobView', {
 	    if (view.datastore !== undefined) {
 		params.store = view.datastore;
 	    }
+	    if (view.syncDirection !== undefined) {
+		params["sync-direction"] = view.syncDirection;
+	    }
 	    view.getStore().rstore.getProxy().setExtraParams(params);
 	    Proxmox.Utils.monStoreErrors(view, view.getStore().rstore);
 	},
@@ -230,7 +245,9 @@ Ext.define('PBS.config.SyncJobView', {
 	    sortable: true,
 	},
 	{
-	    header: gettext('Owner'),
+	    cbind: {
+		header: '{ownerHeader}',
+	    },
 	    dataIndex: 'owner',
 	    renderer: 'render_optional_owner',
 	    flex: 2,
diff --git a/www/datastore/DataStoreList.js b/www/datastore/DataStoreList.js
index fc68cfc10..22ef18540 100644
--- a/www/datastore/DataStoreList.js
+++ b/www/datastore/DataStoreList.js
@@ -239,7 +239,7 @@ Ext.define('PBS.datastore.DataStores', {
 	{
 	    iconCls: 'fa fa-refresh',
 	    itemId: 'syncjobs',
-	    xtype: 'pbsSyncJobView',
+	    xtype: 'pbsSyncJobPullPushView',
 	},
 	{
 	    iconCls: 'fa fa-check-circle',
diff --git a/www/datastore/Panel.js b/www/datastore/Panel.js
index ad9fc10fe..e1da7cfac 100644
--- a/www/datastore/Panel.js
+++ b/www/datastore/Panel.js
@@ -68,7 +68,7 @@ Ext.define('PBS.DataStorePanel', {
 	{
 	    iconCls: 'fa fa-refresh',
 	    itemId: 'syncjobs',
-	    xtype: 'pbsSyncJobView',
+	    xtype: 'pbsSyncJobPullPushView',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
-- 
2.39.5