ui: add view with separate grids for pull and push sync jobs

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@proxmox.com>

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				\

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;
+    },
+});

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,

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',

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}',
 	    },