notification: allow to select filter for notification targets

This commit adds a new selector field for existing endpoint
configuration where one is able to select a notification filter.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>

src/Makefile

@@ -44,6 +44,7 @@ JSSRC=					\
 	form/RoleSelector.js		\
 	form/DiskSelector.js		\
 	form/MultiDiskSelector.js	\
+	form/NotificationFilterSelector.js	\
 	form/TaskTypeSelector.js	\
 	form/ACME.js			\
 	form/UserSelector.js		\

src/form/NotificationFilterSelector.js

@@ -0,0 +1,58 @@
+Ext.define('Proxmox.form.NotificationFilterSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: ['widget.pmxNotificationFilterSelector'],
+
+    // set default value to empty array, else it inits it with
+    // null and after the store load it is an empty array,
+    // triggering dirtychange
+    value: [],
+    valueField: 'name',
+    displayField: 'name',
+    deleteEmpty: true,
+    skipEmptyText: true,
+    allowBlank: true,
+    editable: false,
+    autoSelect: false,
+
+    listConfig: {
+	columns: [
+	    {
+		header: gettext('Filter'),
+		dataIndex: 'name',
+		sortable: true,
+		hideable: false,
+		flex: 1,
+	    },
+	    {
+		header: gettext('Comment'),
+		dataIndex: 'comment',
+		sortable: true,
+		hideable: false,
+		flex: 2,
+	    },
+	],
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	Ext.apply(me, {
+	    store: {
+		fields: ['name', 'comment'],
+		proxy: {
+		    type: 'proxmox',
+		    url: `/api2/json/${me.baseUrl}/filters`,
+		},
+		sorters: [
+		    {
+			property: 'name',
+			direction: 'ASC',
+		    },
+		],
+		autoLoad: true,
+	    },
+	});
+
+	me.callParent();
+    },
+});

src/panel/GotifyEditPanel.js

@@ -32,6 +32,15 @@ Ext.define('Proxmox.panel.GotifyEditPanel', {
 		allowBlank: '{!isCreate}',
 	    },
 	},
+	{
+	    xtype: 'pmxNotificationFilterSelector',
+	    name: 'filter',
+	    fieldLabel: gettext('Filter'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+		baseUrl: '{baseUrl}',
+	    },
+	},
 	{
 	    xtype: 'proxmoxtextfield',
 	    name: 'comment',

src/panel/NotificationConfigView.js

@@ -145,6 +145,10 @@ Ext.define('Proxmox.panel.NotificationEndpointView', {
     initComponent: function() {
 	let me = this;
 
+	if (!me.baseUrl) {
+	    throw "baseUrl is not set!";
+	}
+
 	let menuItems = [];
 	for (const [endpointType, config] of Object.entries(
 	    Proxmox.Schema.notificationEndpointTypes).sort()) {

src/panel/NotificationGroupEditPanel.js

@@ -21,6 +21,15 @@ Ext.define('Proxmox.panel.NotificationGroupEditPanel', {
 	    name: 'endpoint',
 	    allowBlank: false,
 	},
+	{
+	    xtype: 'pmxNotificationFilterSelector',
+	    name: 'filter',
+	    fieldLabel: gettext('Filter'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+		baseUrl: '{baseUrl}',
+	    },
+	},
 	{
 	    xtype: 'proxmoxtextfield',
 	    name: 'comment',

src/panel/SendmailEditPanel.js

@@ -88,6 +88,15 @@ Ext.define('Proxmox.panel.SendmailEditPanel', {
 		return this.up('pmxSendmailEditPanel').mailValidator();
 	    },
 	},
+	{
+	    xtype: 'pmxNotificationFilterSelector',
+	    name: 'filter',
+	    fieldLabel: gettext('Filter'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+		baseUrl: '{baseUrl}',
+	    },
+	},
 	{
 	    xtype: 'proxmoxtextfield',
 	    name: 'comment',

src/window/EndpointEditBase.js

@@ -43,6 +43,7 @@ Ext.define('Proxmox.window.EndpointEditBase', {
 		name: me.name,
 		xtype: endpointConfig.ipanel,
 		isCreate: me.isCreate,
+		baseUrl: me.baseUrl,
 		type: me.type,
 	    }],
 	});