ui: guest import: add value-dependent warning for live-import

Use a similar text than we do for the live-restore warning and make it
use the pmx-hint CSS class.

Note that the CSS class order is important here as ExtJS automatically
uses the last one in the list here to add a XYZ-default and XYZ-after
class, so if the hint one is the last in the string, then layout gets
broken.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/window/GuestImport.js b/www/manager6/window/GuestImport.js
index 12e7788101219e745ea02d13a5c21f9e4425a182..6fa2e93a297aea155135ac82e525c6e5a300db07 100644 (file)
--- a/www/manager6/window/GuestImport.js
+++ b/www/manager6/window/GuestImport.js
@@ -120,6 +120,7 @@ Ext.define('PVE.window.GuestImport', {
        data: {
            coreCount: 1,
            socketCount: 1,
+           liveImport: false,
            warnings: [],
        },
 
@@ -128,6 +129,8 @@ Ext.define('PVE.window.GuestImport', {
            hideWarnings: get => get('warnings').length === 0,
            warningsText: get => '<ul style="margin: 0; padding-left: 20px;">'
                + get('warnings').map(w => `<li>${w}</li>`).join('') + '</ul>',
+           liveImportNote: get => !get('liveImport') ? ''
+               : gettext('Note: If anything goes wrong during the live-import, new data written by the VM may be lost.'),
        },
     },
 
@@ -344,7 +347,11 @@ Ext.define('PVE.window.GuestImport', {
                            fieldLabel: gettext('Live Import'),
                            reference: 'liveimport',
                            isFormField: false,
-                           boxLabel: gettext('Experimental'),
+                           boxLabelCls: 'pmx-hint black x-form-cb-label',
+                           bind: {
+                               value: '{liveImport}',
+                               boxLabel: '{liveImportNote}',
+                           },
                        },
                        {
                            xtype: 'displayfield',