[pve-devel] [PATCH v6 proxmox-widget-toolkit 25/30] notification: add gui for sendmail notification endpoints

[Lukas Wagner <l.wagner@proxmox.com>]

This commit adds a new panel 'NotificationConfigView' that is supposed
to be embedded in the datacenter configuration side-bar.
This new view lists all notification endpoints, allowing to
add/modify/delete/test them.

Furthermore, this commits adds the dialog for adding/modifying
sendmail endpoints. The dialog is 'plugin-in' based, meaning that it
consists of a base window (EndpointEditBase) and a panel that holds
the actual fields for the endpoint type configuration. This will show
be beneficial once the GUI for other endpoint types is added.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---

Notes:
    Changes since v5:
      - Extended commit message
      - Changed width of dialog window to 700px, in preparation for
        future endpoint configuration panels that will contain two panels
    
    Changes since v3:
      - extracted validator function
      - use items/advancedItems  instead of columns

 src/Makefile                         |   4 +
 src/Schema.js                        |   8 ++
 src/data/model/NotificationConfig.js |   8 ++
 src/panel/NotificationConfigView.js  | 196 +++++++++++++++++++++++++++
 src/panel/SendmailEditPanel.js       | 130 ++++++++++++++++++
 src/window/EndpointEditBase.js       |  52 +++++++
 6 files changed, 398 insertions(+)
 create mode 100644 src/data/model/NotificationConfig.js
 create mode 100644 src/panel/NotificationConfigView.js
 create mode 100644 src/panel/SendmailEditPanel.js
 create mode 100644 src/window/EndpointEditBase.js

diff --git a/src/Makefile b/src/Makefile
index baa90ec..e83038f 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -22,6 +22,7 @@ JSSRC=					\
 	data/ObjectStore.js		\
 	data/RRDStore.js		\
 	data/TimezoneStore.js		\
+	data/model/NotificationConfig.js	\
 	data/model/Realm.js		\
 	data/model/Certificates.js	\
 	data/model/ACME.js		\
@@ -59,6 +60,7 @@ JSSRC=					\
 	panel/InfoWidget.js		\
 	panel/LogView.js		\
 	panel/NodeInfoRepoStatus.js	\
+	panel/NotificationConfigView.js	\
 	panel/JournalView.js		\
 	panel/PermissionView.js		\
 	panel/PruneKeepPanel.js		\
@@ -68,6 +70,7 @@ JSSRC=					\
 	panel/ACMEAccount.js		\
 	panel/ACMEPlugin.js		\
 	panel/ACMEDomains.js		\
+	panel/SendmailEditPanel.js	\
 	panel/StatusView.js		\
 	panel/TfaView.js		\
 	panel/NotesView.js		\
@@ -83,6 +86,7 @@ JSSRC=					\
 	window/ACMEAccount.js		\
 	window/ACMEPluginEdit.js	\
 	window/ACMEDomains.js		\
+	window/EndpointEditBase.js		\
 	window/FileBrowser.js		\
 	window/AuthEditBase.js		\
 	window/AuthEditOpenId.js	\
diff --git a/src/Schema.js b/src/Schema.js
index b247b1e..99bb3fa 100644
--- a/src/Schema.js
+++ b/src/Schema.js
@@ -37,6 +37,14 @@ Ext.define('Proxmox.Schema', { // a singleton
 	}
     },
 
+    notificationEndpointTypes: {
+	sendmail: {
+	    name: gettext('Sendmail'),
+	    ipanel: 'pmxSendmailEditPanel',
+	    iconCls: 'fa-envelope-o',
+	},
+    },
+
     pxarFileTypes: {
 	b: { icon: 'cube', label: gettext('Block Device') },
 	c: { icon: 'tty', label: gettext('Character Device') },
diff --git a/src/data/model/NotificationConfig.js b/src/data/model/NotificationConfig.js
new file mode 100644
index 0000000..c2ce843
--- /dev/null
+++ b/src/data/model/NotificationConfig.js
@@ -0,0 +1,8 @@
+Ext.define('proxmox-notification-endpoints', {
+    extend: 'Ext.data.Model',
+    fields: ['name', 'type', 'comment'],
+    proxy: {
+        type: 'proxmox',
+    },
+    idProperty: 'name',
+});
diff --git a/src/panel/NotificationConfigView.js b/src/panel/NotificationConfigView.js
new file mode 100644
index 0000000..9282ccd
--- /dev/null
+++ b/src/panel/NotificationConfigView.js
@@ -0,0 +1,196 @@
+Ext.define('Proxmox.panel.NotificationConfigView', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pmxNotificationConfigView',
+    mixins: ['Proxmox.Mixin.CBind'],
+    layout: {
+	type: 'border',
+    },
+
+    items: [
+	{
+	    region: 'center',
+	    border: false,
+	    xtype: 'pmxNotificationEndpointView',
+	    cbind: {
+		baseUrl: '{baseUrl}',
+	    },
+	},
+    ],
+});
+
+Ext.define('Proxmox.panel.NotificationEndpointView', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.pmxNotificationEndpointView',
+
+    title: gettext('Notification Targets'),
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	openEditWindow: function(endpointType, endpoint) {
+	    let me = this;
+
+	    if (endpoint === 'mail-to-root') {
+		return;
+	    }
+
+	    Ext.create('Proxmox.window.EndpointEditBase', {
+		baseUrl: me.getView().baseUrl,
+		type: endpointType,
+
+		name: endpoint,
+		autoShow: true,
+		listeners: {
+		    destroy: () => me.reload(),
+		},
+	    });
+	},
+
+	openEditForSelectedItem: function() {
+	    let me = this;
+	    let view = me.getView();
+
+	    let selection = view.getSelection();
+	    if (selection.length < 1) {
+		return;
+	    }
+
+	    me.openEditWindow(selection[0].data.type, selection[0].data.name);
+	},
+
+	reload: function() {
+	    let me = this;
+	    let view = me.getView();
+	    view.getStore().rstore.load();
+	},
+
+	testEndpoint: function() {
+	    let me = this;
+	    let view = me.getView();
+
+	    let selection = view.getSelection();
+	    if (selection.length < 1) {
+		return;
+	    }
+
+	    let target = selection[0].data.name;
+
+	    Ext.Msg.confirm(
+		gettext("Notification Target Test"),
+		gettext(`Do you want to send a test notification to '${target}'?`),
+		function(decision) {
+		    if (decision !== "yes") {
+			return;
+		    }
+
+		    Proxmox.Utils.API2Request({
+			method: 'POST',
+			url: `${view.baseUrl}/targets/${target}/test`,
+
+			success: function(response, opt) {
+			    Ext.Msg.show({
+				title: gettext('Notification Target Test'),
+				message: gettext(`Sent test notification to '${target}'.`),
+				buttons: Ext.Msg.OK,
+				icon: Ext.Msg.INFO,
+			    });
+			},
+			autoErrorAlert: true,
+		    });
+	    });
+	},
+    },
+
+    listeners: {
+	itemdblclick: 'openEditForSelectedItem',
+	activate: 'reload',
+    },
+
+    emptyText: gettext('No notification targets configured'),
+
+    columns: [
+	{
+	    dataIndex: 'name',
+	    text: gettext('Target Name'),
+	    renderer: Ext.String.htmlEncode,
+	    flex: 1,
+	},
+	{
+	    dataIndex: 'type',
+	    text: gettext('Type'),
+	    renderer: Ext.String.htmlEncode,
+	    flex: 1,
+	},
+	{
+	    dataIndex: 'comment',
+	    text: gettext('Comment'),
+	    renderer: Ext.String.htmlEncode,
+	    flex: 1,
+	},
+    ],
+
+    store: {
+	type: 'diff',
+	autoDestroy: true,
+	autoDestroyRstore: true,
+	rstore: {
+	    type: 'update',
+	    storeid: 'proxmox-notification-endpoints',
+	    model: 'proxmox-notification-endpoints',
+	    autoStart: true,
+	},
+	sorters: 'name',
+    },
+
+    initComponent: function() {
+	let me = this;
+
+	let menuItems = [];
+	for (const [endpointType, config] of Object.entries(
+	    Proxmox.Schema.notificationEndpointTypes).sort()) {
+	    menuItems.push({
+		text: config.name,
+		iconCls: 'fa fa-fw ' + (config.iconCls || 'fa-bell-o'),
+		handler: () => me.controller.openEditWindow(endpointType),
+	    });
+	}
+
+	Ext.apply(me, {
+	    tbar: [
+		{
+		    text: gettext('Add'),
+		    menu: menuItems,
+		},
+		{
+		    xtype: 'proxmoxButton',
+		    text: gettext('Modify'),
+		    handler: 'openEditForSelectedItem',
+		    enableFn: rec => rec.data.name !== 'mail-to-root',
+		    disabled: true,
+		},
+		{
+		    xtype: 'proxmoxStdRemoveButton',
+		    callback: 'reload',
+		    enableFn: rec => rec.data.name !== 'mail-to-root',
+		    getUrl: function(rec) {
+			if (rec.data.type === 'group') {
+			    return `${me.baseUrl}/groups/${rec.getId()}`;
+			}
+
+			return `${me.baseUrl}/endpoints/${rec.data.type}/${rec.getId()}`;
+		    },
+		},
+		'-',
+		{
+		    xtype: 'proxmoxButton',
+		    text: gettext('Test'),
+		    handler: 'testEndpoint',
+		    disabled: true,
+		},
+	    ],
+	});
+
+	me.callParent();
+	me.store.rstore.proxy.setUrl(`/api2/json/${me.baseUrl}/targets`);
+    },
+});
diff --git a/src/panel/SendmailEditPanel.js b/src/panel/SendmailEditPanel.js
new file mode 100644
index 0000000..33ac482
--- /dev/null
+++ b/src/panel/SendmailEditPanel.js
@@ -0,0 +1,130 @@
+Ext.define('Proxmox.panel.SendmailEditPanel', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pmxSendmailEditPanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    type: 'sendmail',
+
+    mailValidator: function() {
+	let mailto_user = this.down(`[name=mailto-user]`);
+	let mailto = this.down(`[name=mailto]`);
+
+	if (!mailto_user.getValue()?.length && !mailto.getValue()) {
+	    return gettext('Either mailto or mailto-user must be set');
+	}
+
+	return true;
+    },
+
+    items: [
+	{
+	    xtype: 'pmxDisplayEditField',
+	    name: 'name',
+	    cbind: {
+		value: '{name}',
+		editable: '{isCreate}',
+	    },
+	    fieldLabel: gettext('Endpoint Name'),
+	    allowBlank: false,
+	},
+	{
+	    xtype: 'pmxUserSelector',
+	    name: 'mailto-user',
+	    reference: 'mailto-user',
+	    multiSelect: true,
+	    allowBlank: true,
+	    editable: false,
+	    skipEmptyText: true,
+	    fieldLabel: gettext('User(s)'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    validator: function() {
+		return this.up('pmxSendmailEditPanel').mailValidator();
+	    },
+	    listConfig: {
+		width: 600,
+		columns: [
+		    {
+			header: gettext('User'),
+			sortable: true,
+			dataIndex: 'userid',
+			renderer: Ext.String.htmlEncode,
+			flex: 1,
+		    },
+		    {
+			header: gettext('E-Mail'),
+			sortable: true,
+			dataIndex: 'email',
+			renderer: Ext.String.htmlEncode,
+			flex: 1,
+		    },
+		    {
+			header: gettext('Comment'),
+			sortable: false,
+			dataIndex: 'comment',
+			renderer: Ext.String.htmlEncode,
+			flex: 1,
+		    },
+		],
+	    },
+	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    fieldLabel: gettext('Additional Recipient(s)'),
+	    name: 'mailto',
+	    reference: 'mailto',
+	    allowBlank: true,
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    autoEl: {
+		tag: 'div',
+		'data-qtip': gettext(
+		    'Multiple recipients must be separated by spaces, commas or semicolons',
+		),
+	    },
+	    validator: function() {
+		return this.up('pmxSendmailEditPanel').mailValidator();
+	    },
+	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    name: 'comment',
+	    fieldLabel: gettext('Comment'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	},
+    ],
+
+    advancedItems: [
+	{
+	    xtype: 'proxmoxtextfield',
+	    fieldLabel: gettext('Author'),
+	    name: 'author',
+	    allowBlank: true,
+	    emptyText: gettext('Proxmox VE'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    fieldLabel: gettext('From Address'),
+	    name: 'from-address',
+	    allowBlank: true,
+	    emptyText: gettext('Defaults to datacenter configuration, or root@$hostname'),
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	},
+    ],
+
+    onGetValues: (values) => {
+	if (values.mailto) {
+	    values.mailto = values.mailto.split(/[\s,;]+/);
+	}
+	return values;
+    },
+});
diff --git a/src/window/EndpointEditBase.js b/src/window/EndpointEditBase.js
new file mode 100644
index 0000000..7e4c910
--- /dev/null
+++ b/src/window/EndpointEditBase.js
@@ -0,0 +1,52 @@
+Ext.define('Proxmox.window.EndpointEditBase', {
+    extend: 'Proxmox.window.Edit',
+
+    isAdd: true,
+
+    fieldDefaults: {
+	labelWidth: 120,
+    },
+
+    width: 700,
+
+    initComponent: function() {
+	let me = this;
+
+	me.isCreate = !me.name;
+
+	if (!me.baseUrl) {
+	    throw "baseUrl not set";
+	}
+
+	me.url = `/api2/extjs${me.baseUrl}/endpoints/${me.type}`;
+
+	if (me.isCreate) {
+	    me.method = 'POST';
+	} else {
+	    me.url += `/${me.name}`;
+	    me.method = 'PUT';
+	}
+
+	let endpointConfig = Proxmox.Schema.notificationEndpointTypes[me.type];
+	if (!endpointConfig) {
+	    throw 'unknown endpoint type';
+	}
+
+	me.subject = endpointConfig.name;
+
+	Ext.apply(me, {
+	    items: [{
+		name: me.name,
+		xtype: endpointConfig.ipanel,
+		isCreate: me.isCreate,
+		type: me.type,
+	    }],
+	});
+
+	me.callParent();
+
+	if (!me.isCreate) {
+	    me.load();
+	}
+    },
+});
-- 
2.39.2