[pve-devel] [PATCH v6 proxmox-widget-toolkit 25/30] notification: add gui for sendmail notification endpoints
Lukas Wagner
l.wagner at proxmox.com
Thu Aug 3 14:17:14 CEST 2023
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 at 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
More information about the pve-devel
mailing list