ui: guest import: make window wider

[pve-manager.git] / www / manager6 / window / Backup.js

diff --git a/www/manager6/window/Backup.js b/www/manager6/window/Backup.js
index 7048c3665a9dd89e5f2f036a2318447447d11227..4418a9c7e51fc41ee1b05f79d0913c3f34dc4897 100644 (file)
--- a/www/manager6/window/Backup.js
+++ b/www/manager6/window/Backup.js
@@ -18,7 +18,7 @@ Ext.define('PVE.window.Backup', {
            throw "no VM type specified";
        }
 
-       let compressionSelector = Ext.create('PVE.form.CompressionSelector', {
+       let compressionSelector = Ext.create('PVE.form.BackupCompressionSelector', {
            name: 'compress',
            value: 'zstd',
            fieldLabel: gettext('Compression'),
@@ -36,6 +36,23 @@ Ext.define('PVE.window.Backup', {
            emptyText: Proxmox.Utils.noneText,
        });
 
+       let notificationModeSelector = Ext.create({
+           xtype: 'proxmoxKVComboBox',
+           comboItems: [
+               ['auto', gettext('Auto')],
+               ['legacy-sendmail', gettext('Email (legacy)')],
+               ['notification-system', gettext('Notification system')],
+           ],
+           fieldLabel: gettext('Notification mode'),
+           name: 'notification-mode',
+           value: 'auto',
+           listeners: {
+               change: function(field, value) {
+                   mailtoField.setDisabled(value === 'notification-system');
+               },
+           },
+       });
+
        const keepNames = [
            ['keep-last', gettext('Keep Last')],
            ['keep-hourly', gettext('Keep Hourly')],
@@ -65,6 +82,7 @@ Ext.define('PVE.window.Backup', {
            },
            handler: function(checkbox, value) {
                pruneSettings.forEach(field => field.setHidden(!value));
+               me.down('label[name="pruneLabel"]').setHidden(!value);
            },
        });
 
@@ -109,9 +127,17 @@ Ext.define('PVE.window.Backup', {
                            if (!initialDefaults && data.mailto !== undefined) {
                                mailtoField.setValue(data.mailto);
                            }
+                           if (!initialDefaults && data['notification-mode'] !== undefined) {
+                               notificationModeSelector.setValue(data['notification-mode']);
+                           }
                            if (!initialDefaults && data.mode !== undefined) {
                                modeSelector.setValue(data.mode);
                            }
+                           if (!initialDefaults && (data['notes-template'] ?? false)) {
+                               me.down('field[name=notes-template]').setValue(
+                                   PVE.Utils.unEscapeNotesTemplate(data['notes-template']),
+                               );
+                           }
 
                            initialDefaults = true;
 
@@ -141,6 +167,11 @@ Ext.define('PVE.window.Backup', {
                        },
                        failure: function(response, opts) {
                            initialDefaults = true;
+
+                           removeCheckbox.setHidden(true);
+                           removeCheckbox.setValue(false);
+                           pruneSettings.forEach(field => field.reset());
+
                            Ext.Msg.alert(gettext('Error'), response.htmlStatus);
                        },
                    });
@@ -148,51 +179,86 @@ Ext.define('PVE.window.Backup', {
            },
        });
 
+       let protectedCheckbox = Ext.create('Proxmox.form.Checkbox', {
+           name: 'protected',
+           checked: false,
+           uncheckedValue: 0,
+           fieldLabel: gettext('Protected'),
+       });
+
        me.formPanel = Ext.create('Proxmox.panel.InputPanel', {
            bodyPadding: 10,
            border: false,
            column1: [
                storagesel,
                modeSelector,
-               removeCheckbox,
+               protectedCheckbox,
            ],
            column2: [
                compressionSelector,
+               notificationModeSelector,
                mailtoField,
+               removeCheckbox,
            ],
-           columnB: [{
-               layout: 'hbox',
-               border: false,
-               defaults: {
-                   border: false,
-                   layout: 'anchor',
-                   flex: 1,
+           columnB: [
+               {
+                   xtype: 'textareafield',
+                   name: 'notes-template',
+                   fieldLabel: gettext('Notes'),
+                   anchor: '100%',
+                   value: '{{guestname}}',
                },
-               items: [
-                   {
-                       padding: '0 10 0 0',
-                       defaults: {
-                           labelWidth: 110,
-                       },
-                       items: [
-                           pruneSettings[0],
-                           pruneSettings[2],
-                           pruneSettings[4],
-                       ],
+               {
+                   xtype: 'box',
+                   style: {
+                       margin: '8px 0px',
+                       'line-height': '1.5em',
                    },
-                   {
-                       padding: '0 0 0 10',
-                       defaults: {
-                           labelWidth: 110,
-                       },
-                       items: [
-                           pruneSettings[1],
-                           pruneSettings[3],
-                           pruneSettings[5],
-                       ],
+                   html: Ext.String.format(
+                       gettext('Possible template variables are: {0}'),
+                       PVE.Utils.notesTemplateVars.map(v => `<code>{{${v}}}</code>`).join(', '),
+                   ),
+               },
+               {
+                   xtype: 'label',
+                   name: 'pruneLabel',
+                   text: gettext('Storage Retention Configuration') + ':',
+                   hidden: true,
+               },
+               {
+                   layout: 'hbox',
+                   border: false,
+                   defaults: {
+                       border: false,
+                       layout: 'anchor',
+                       flex: 1,
                    },
-               ],
-           }],
+                   items: [
+                       {
+                           padding: '0 10 0 0',
+                           defaults: {
+                               labelWidth: 110,
+                           },
+                           items: [
+                               pruneSettings[0],
+                               pruneSettings[2],
+                               pruneSettings[4],
+                           ],
+                       },
+                       {
+                           padding: '0 0 0 10',
+                           defaults: {
+                               labelWidth: 110,
+                           },
+                           items: [
+                               pruneSettings[1],
+                               pruneSettings[3],
+                               pruneSettings[5],
+                           ],
+                       },
+                   ],
+               },
+           ],
        });
 
        var submitBtn = Ext.create('Ext.Button', {
@@ -211,10 +277,23 @@ Ext.define('PVE.window.Backup', {
                    params.mailto = values.mailto;
                }
 
+               if (values['notification-mode']) {
+                   params['notification-mode'] = values['notification-mode'];
+               }
+
                if (values.compress) {
                    params.compress = values.compress;
                }
 
+               if (values.protected) {
+                   params.protected = values.protected;
+               }
+
+               if (values['notes-template']) {
+                   params['notes-template'] = PVE.Utils.escapeNotesTemplate(
+                       values['notes-template']);
+               }
+
                Proxmox.Utils.API2Request({
                    url: '/nodes/' + me.nodename + '/vzdump',
                    params: params,
@@ -258,6 +337,7 @@ Ext.define('PVE.window.Backup', {
            modal: true,
            layout: 'auto',
            border: false,
+           width: 600,
            items: [me.formPanel],
            buttons: [helpBtn, '->', submitBtn],
            listeners: {