[pve-devel] [PATCH manager v3 1/3] ui: backup job edit: move notification related settings to separate tab

* [pve-devel] [PATCH manager v3 1/3] ui: backup job edit: move notification related settings to separate tab
@ 2025-06-24 12:00 Lukas Wagner
  2025-06-24 12:00 ` [pve-devel] [PATCH manager v3 2/3] ui: one-shot backup: remove 'auto' notification mode for clarity Lukas Wagner
                   ` (3 more replies)
  0 siblings, 4 replies; 5+ messages in thread
From: Lukas Wagner @ 2025-06-24 12:00 UTC (permalink / raw)
  To: pve-devel

The notification settings in the 'General' tab were unfortunately a
source of regular confusion for many people. This was primarily due to
the behavior of the 'notification mode'. The notification mode can
one of the following:
  - notification-system: Emit a notification event to the global
    notification system, where it can be matched on by notification
    matchers and then sent to one or more targets.
  - legacy-sendmail: Old-style notifications, where one can directly
    enter some email address. The system uses 'sendmail' to
    send the notification to the specified address, circumventing
    the regular notification stack.
  - auto: Use legacy-sendmail if an email is entered and the
    notification system if not

The 'auto' mode was originally intended to ease migration between the
old and the new system. From a user's perspective however, 'auto' is
quite surprising and unintuitive. The UI preselected 'auto' as a
default, which would, as explained above, favor the new notification
stack with the 'mailto' field empty. However, the UI would still invite
the user to enter their email address, which would then entail the
'legacy-sendmail' mode. Some users were led to believe that this email
address would then be used for a configured email target of the new
notification stack. As a consequence, 'auto' is now completely hidden in
the UI.

In the new 'Notifications' tab one can now choose between
  ( ) Use global notification settings
  (x) Use sendmail to send an email
      Recipients: [              ]
      When:       [Always/On Error]

'Recipients' and 'When' are disabled if the first radio box is selected.

The new tab can later also be used to house other controls. For example,
we could display all matchers that could potentially match this backup
job, or maybe even allow to create a new matcher with a pre-populated
match-field rule.

The term 'Notification System' is altogether from the UI. It is not
necessarily clear to a user that this refers to the settings in
Datacenter > Notifications.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
Tested-by: Michael Köppl <m.koeppl@proxmox.com>
Reviewed-by: Michael Köppl <m.koeppl@proxmox.com>
---

Notes:
    Changelog:
    v3:
      - Rebase onto latest master, reformat with biome
    
    v2:
      - Use gettext for the radiogroup box labels
      - Include '(legacy)' in the legacy-sendmail options
        (While we are not going to remove the option in the near future,
         I still want to gently nudge users to use the new stack)
      - Clarified in rephrased parts of the commit message

 www/manager6/Makefile                         |   1 +
 www/manager6/dc/Backup.js                     |  67 ++----------
 .../panel/BackupNotificationOptions.js        | 103 ++++++++++++++++++
 3 files changed, 111 insertions(+), 60 deletions(-)
 create mode 100644 www/manager6/panel/BackupNotificationOptions.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index ca641e34..ec648368 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -100,6 +100,7 @@ JSSRC= 							\
 	grid/ResourceGrid.js				\
 	panel/ConfigPanel.js				\
 	panel/BackupAdvancedOptions.js			\
+	panel/BackupNotificationOptions.js		\
 	panel/BackupJobPrune.js				\
 	panel/HealthWidget.js				\
 	panel/IPSet.js					\
diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js
index 3808aa25..888e4e0f 100644
--- a/www/manager6/dc/Backup.js
+++ b/www/manager6/dc/Backup.js
@@ -223,25 +223,12 @@ Ext.define('PVE.dc.BackupEdit', {
     viewModel: {
         data: {
             selMode: 'include',
-            notificationMode: '__default__',
-            mailto: '',
-            mailNotification: 'always',
         },
 
         formulas: {
             poolMode: (get) => get('selMode') === 'pool',
             disableVMSelection: (get) =>
                 get('selMode') !== 'include' && get('selMode') !== 'exclude',
-            showMailtoFields: (get) =>
-                ['auto', 'legacy-sendmail', '__default__'].includes(get('notificationMode')),
-            enableMailnotificationField: (get) => {
-                let mode = get('notificationMode');
-                let mailto = get('mailto');
-
-                return (
-                    (['auto', '__default__'].includes(mode) && mailto) || mode === 'legacy-sendmail'
-                );
-            },
         },
     },
 
@@ -331,53 +318,6 @@ Ext.define('PVE.dc.BackupEdit', {
                                 },
                             ],
                             column2: [
-                                {
-                                    xtype: 'proxmoxKVComboBox',
-                                    comboItems: [
-                                        [
-                                            '__default__',
-                                            Ext.String.format(
-                                                gettext('{0} (Auto)'),
-                                                Proxmox.Utils.defaultText,
-                                            ),
-                                        ],
-                                        ['auto', gettext('Auto')],
-                                        ['legacy-sendmail', gettext('Email (legacy)')],
-                                        ['notification-system', gettext('Notification system')],
-                                    ],
-                                    fieldLabel: gettext('Notification mode'),
-                                    name: 'notification-mode',
-                                    value: '__default__',
-                                    cbind: {
-                                        deleteEmpty: '{!isCreate}',
-                                    },
-                                    bind: {
-                                        value: '{notificationMode}',
-                                    },
-                                },
-                                {
-                                    xtype: 'textfield',
-                                    fieldLabel: gettext('Send email to'),
-                                    name: 'mailto',
-                                    bind: {
-                                        hidden: '{!showMailtoFields}',
-                                        value: '{mailto}',
-                                    },
-                                },
-                                {
-                                    xtype: 'pveEmailNotificationSelector',
-                                    fieldLabel: gettext('Send email'),
-                                    name: 'mailnotification',
-                                    cbind: {
-                                        value: (get) => (get('isCreate') ? 'always' : ''),
-                                        deleteEmpty: '{!isCreate}',
-                                    },
-                                    bind: {
-                                        hidden: '{!showMailtoFields}',
-                                        disabled: '{!enableMailnotificationField}',
-                                        value: '{mailNotification}',
-                                    },
-                                },
                                 {
                                     xtype: 'pveBackupCompressionSelector',
                                     reference: 'compressionSelector',
@@ -440,6 +380,13 @@ Ext.define('PVE.dc.BackupEdit', {
                         },
                     ],
                 },
+                {
+                    xtype: 'pveBackupNotificationOptionsPanel',
+                    title: gettext('Notifications'),
+                    cbind: {
+                        isCreate: '{isCreate}',
+                    },
+                },
                 {
                     xtype: 'pveBackupJobPrunePanel',
                     title: gettext('Retention'),
diff --git a/www/manager6/panel/BackupNotificationOptions.js b/www/manager6/panel/BackupNotificationOptions.js
new file mode 100644
index 00000000..583e143b
--- /dev/null
+++ b/www/manager6/panel/BackupNotificationOptions.js
@@ -0,0 +1,103 @@
+/*
+ * Input panel for notification options of backup jobs.
+ */
+Ext.define('PVE.panel.BackupNotificationOptions', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pveBackupNotificationOptionsPanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    onlineHelp: 'chapter_notifications',
+
+    cbindData: function () {
+        let me = this;
+        me.isCreate = !!me.isCreate;
+        return {};
+    },
+
+    viewModel: {
+        data: {
+            notificationMode: undefined,
+        },
+        formulas: {
+            showMailtoFields: (get) => {
+                let mode = get('notificationMode');
+                return mode['notification-mode'] === 'legacy-sendmail';
+            },
+        },
+    },
+
+    onSetValues: function (values) {
+        let me = this;
+
+        let mode = values['notification-mode'] ?? 'auto';
+        let mailto = values.mailto;
+
+        let mappedMode = 'legacy-sendmail';
+
+        // The 'auto' mode is a bit annoying and confusing, so we try
+        // to map it to the equivalent behavior.
+        if ((mode === 'auto' && !mailto) || mode === 'notification-system') {
+            mappedMode = 'notification-system';
+        }
+
+        me.getViewModel().set('notificationMode', { 'notification-mode': mappedMode });
+
+        values['notification-mode'] = mappedMode;
+        return values;
+    },
+
+    items: [
+        {
+            xtype: 'radiogroup',
+            height: '15px',
+            layout: {
+                type: 'vbox',
+            },
+            bind: {
+                value: '{notificationMode}',
+            },
+            items: [
+                {
+                    xtype: 'radiofield',
+                    name: 'notification-mode',
+                    inputValue: 'notification-system',
+                    boxLabel: gettext('Use global notification settings'),
+                    cbind: {
+                        checked: '{isCreate}',
+                    },
+                },
+                {
+                    xtype: 'radiofield',
+                    name: 'notification-mode',
+                    inputValue: 'legacy-sendmail',
+                    boxLabel: gettext('Use sendmail to send an email (legacy)'),
+                },
+            ],
+        },
+        {
+            xtype: 'textfield',
+            fieldLabel: gettext('Recipients'),
+            emptyText: 'test@example.com, ...',
+            name: 'mailto',
+            padding: '0 0 0 50',
+            disabled: true,
+            bind: {
+                disabled: '{!showMailtoFields}',
+            },
+        },
+        {
+            xtype: 'pveEmailNotificationSelector',
+            fieldLabel: gettext('When'),
+            name: 'mailnotification',
+            padding: '0 0 0 50',
+            disabled: true,
+            value: 'always',
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+            bind: {
+                disabled: '{!showMailtoFields}',
+            },
+        },
+    ],
+});
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel

^ permalink raw reply	[flat|nested] 5+ messages in thread