[pve-devel] [PATCH FOLLOW-UP manager/widget-toolkit 0/2] replace SafeDestroy

[pve-devel] [PATCH FOLLOW-UP manager/widget-toolkit 0/2] replace SafeDestroy

[Michael Köppl]

This is a follow-up to another series implementing an additional purge
param for resource removal [0].

The ConfirmRemoveDialog window covers the SafeDestroy window's
functionality, but makes it more general-purpose/flexible. It can be
used for both yes/no dialog as well as the SafeDestroy dialogs already
used for guests/storages. The reason for adding ConfirmRemoveDialog was
that Ext.Msg.MessageBox is not properly extendable and simply adding an
additional dialog would result in duplicate functionality covered in
both SafeDestroy and ConfirmRemoveDialog. Thus, replace SafeDestroy with
ConfirmRemoveDialog.

[0] https://lore.proxmox.com/pve-devel/20250924160747.430018-1-m.koeppl@proxmox.com/

proxmox-widget-toolkit:

Michael Köppl (1):
  window: remove SafeDestroy

 src/Makefile              |   1 -
 src/window/SafeDestroy.js | 207 --------------------------------------
 2 files changed, 208 deletions(-)
 delete mode 100644 src/window/SafeDestroy.js


pve-manager:

Michael Köppl (1):
  ui: replace SafeDestroy with ConfirmRemoveDialog

 www/manager6/window/SafeDestroyGuest.js   | 26 ++++++++++++++++++++++-
 www/manager6/window/SafeDestroyStorage.js | 23 +++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)


Summary over all repositories:
  4 files changed, 47 insertions(+), 210 deletions(-)

-- 
Generated by git-murpp 0.8.0


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

[pve-devel] [PATCH FOLLOW-UP widget-toolkit 1/1] window: remove SafeDestroy

[Michael Köppl]

The SafeDestroy window can be replaced by the ConfirmRemovalDialog,
which allows additional customization of the dialog. This is done
mostly to streamline the implementation, basing removal dialogs that
require additional items (such as the confirmation text field, check
boxes, etc.) on the same component.

Signed-off-by: Michael Köppl <m.koeppl@proxmox.com>
---
 src/Makefile              |   1 -
 src/window/SafeDestroy.js | 207 --------------------------------------
 2 files changed, 208 deletions(-)
 delete mode 100644 src/window/SafeDestroy.js

diff --git a/src/Makefile b/src/Makefile
index a7dfa17..cb576e1 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -83,7 +83,6 @@ JSSRC=					\
 	panel/WebhookEditPanel.js	\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
-	window/SafeDestroy.js		\
 	window/ConfirmRemoveDialog.js		\
 	window/PackageVersions.js	\
 	window/TaskViewer.js		\
diff --git a/src/window/SafeDestroy.js b/src/window/SafeDestroy.js
deleted file mode 100644
index d38f085..0000000
--- a/src/window/SafeDestroy.js
+++ /dev/null
@@ -1,207 +0,0 @@
-// Pop-up a message window where the user has to manually enter the resource ID to enable the
-// destroy confirmation button to ensure that they got the correct resource selected for.
-Ext.define('Proxmox.window.SafeDestroy', {
-    extend: 'Ext.window.Window',
-    alias: 'widget.proxmoxSafeDestroy',
-
-    title: gettext('Confirm'),
-    modal: true,
-    buttonAlign: 'center',
-    bodyPadding: 10,
-    width: 450,
-    layout: { type: 'hbox' },
-    defaultFocus: 'confirmField',
-    showProgress: false,
-
-    additionalItems: [],
-
-    // gets called if we have a progress bar or taskview and it detected that
-    // the task finished. function(success)
-    taskDone: Ext.emptyFn,
-
-    // gets called when the api call is finished, right at the beginning
-    // function(success, response, options)
-    apiCallDone: Ext.emptyFn,
-
-    config: {
-        item: {
-            id: undefined,
-            formattedIdentifier: undefined,
-        },
-        url: undefined,
-        note: undefined,
-        taskName: undefined,
-        params: {},
-    },
-
-    getParams: function () {
-        let me = this;
-
-        if (Ext.Object.isEmpty(me.params)) {
-            return '';
-        }
-        return '?' + Ext.Object.toQueryString(me.params);
-    },
-
-    controller: {
-        xclass: 'Ext.app.ViewController',
-
-        control: {
-            'field[name=confirm]': {
-                change: function (f, value) {
-                    const view = this.getView();
-                    const removeButton = this.lookupReference('removeButton');
-                    if (value === view.getItem().id.toString()) {
-                        removeButton.enable();
-                    } else {
-                        removeButton.disable();
-                    }
-                },
-                specialkey: function (field, event) {
-                    const removeButton = this.lookupReference('removeButton');
-                    if (!removeButton.isDisabled() && event.getKey() === event.ENTER) {
-                        removeButton.fireEvent('click', removeButton, event);
-                    }
-                },
-            },
-            'button[reference=removeButton]': {
-                click: function () {
-                    const view = this.getView();
-                    Proxmox.Utils.API2Request({
-                        url: view.getUrl() + view.getParams(),
-                        method: 'DELETE',
-                        waitMsgTarget: view,
-                        failure: function (response, opts) {
-                            view.apiCallDone(false, response, opts);
-                            view.close();
-                            Ext.Msg.alert('Error', response.htmlStatus);
-                        },
-                        success: function (response, options) {
-                            const hasProgressBar = !!(view.showProgress && response.result.data);
-
-                            view.apiCallDone(true, response, options);
-
-                            if (hasProgressBar) {
-                                // stay around so we can trigger our close events
-                                // when background action is completed
-                                view.hide();
-
-                                const upid = response.result.data;
-                                const win = Ext.create('Proxmox.window.TaskProgress', {
-                                    upid: upid,
-                                    taskDone: view.taskDone,
-                                    listeners: {
-                                        destroy: function () {
-                                            view.close();
-                                        },
-                                    },
-                                });
-                                win.show();
-                            } else {
-                                view.close();
-                            }
-                        },
-                    });
-                },
-            },
-        },
-    },
-
-    buttons: [
-        {
-            reference: 'removeButton',
-            text: gettext('Remove'),
-            disabled: true,
-        },
-    ],
-
-    initComponent: function () {
-        let me = this;
-
-        me.items = [
-            {
-                xtype: 'component',
-                cls: [
-                    Ext.baseCSSPrefix + 'message-box-icon',
-                    Ext.baseCSSPrefix + 'message-box-warning',
-                    Ext.baseCSSPrefix + 'dlg-icon',
-                ],
-            },
-            {
-                xtype: 'container',
-                flex: 1,
-                layout: {
-                    type: 'vbox',
-                    align: 'stretch',
-                },
-                items: [
-                    {
-                        xtype: 'component',
-                        reference: 'messageCmp',
-                    },
-                    {
-                        itemId: 'confirmField',
-                        reference: 'confirmField',
-                        xtype: 'textfield',
-                        name: 'confirm',
-                        labelWidth: 300,
-                        hideTrigger: true,
-                        allowBlank: false,
-                    },
-                ]
-                    .concat(me.additionalItems)
-                    .concat([
-                        {
-                            xtype: 'container',
-                            reference: 'noteContainer',
-                            flex: 1,
-                            hidden: true,
-                            layout: {
-                                type: 'vbox',
-                            },
-                            items: [
-                                {
-                                    xtype: 'component',
-                                    reference: 'noteCmp',
-                                    userCls: 'pmx-hint',
-                                },
-                            ],
-                        },
-                    ]),
-            },
-        ];
-
-        me.callParent();
-
-        const itemId = me.getItem().id;
-        if (!Ext.isDefined(itemId)) {
-            throw 'no ID specified';
-        }
-
-        if (Ext.isDefined(me.getNote())) {
-            me.lookupReference('noteCmp').setHtml(
-                `<span title="${me.getNote()}">${me.getNote()}</span>`,
-            );
-            const noteContainer = me.lookupReference('noteContainer');
-            noteContainer.setHidden(false);
-            noteContainer.setDisabled(false);
-        }
-
-        let taskName = me.getTaskName();
-        if (Ext.isDefined(taskName)) {
-            me.lookupReference('messageCmp').setHtml(
-                Ext.htmlEncode(
-                    Proxmox.Utils.format_task_description(
-                        taskName,
-                        me.getItem().formattedIdentifier ?? itemId,
-                    ),
-                ),
-            );
-        } else {
-            throw 'no task name specified';
-        }
-
-        let label = `${gettext('Please enter the ID to confirm')} (${itemId})`;
-        me.lookupReference('confirmField').setFieldLabel(Ext.htmlEncode(label));
-    },
-});
-- 
2.47.3



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

[pve-devel] [PATCH FOLLOW-UP manager 1/1] ui: replace SafeDestroy with ConfirmRemoveDialog

[Michael Köppl]

The ConfirmRemoveDialog offers additional customization, but covers
SafeDestroy's feature set. This is done mostly to streamline the
implementation, basing dialogs to remove guests, storage, or resources
on the same component.

Signed-off-by: Michael Köppl <m.koeppl@proxmox.com>
---
 www/manager6/window/SafeDestroyGuest.js   | 26 ++++++++++++++++++++++-
 www/manager6/window/SafeDestroyStorage.js | 23 +++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/www/manager6/window/SafeDestroyGuest.js b/www/manager6/window/SafeDestroyGuest.js
index ee0c649c9..291702141 100644
--- a/www/manager6/window/SafeDestroyGuest.js
+++ b/www/manager6/window/SafeDestroyGuest.js
@@ -2,9 +2,14 @@
  * SafeDestroy window with additional checkboxes for removing guests
  */
 Ext.define('PVE.window.SafeDestroyGuest', {
-    extend: 'Proxmox.window.SafeDestroy',
+    extend: 'Proxmox.window.ConfirmRemoveDialog',
     alias: 'widget.pveSafeDestroyGuest',
 
+    confirmButtonText: 'Remove',
+    declineButtonText: null,
+
+    dangerous: true,
+
     additionalItems: [
         {
             xtype: 'proxmoxcheckbox',
@@ -32,8 +37,27 @@ Ext.define('PVE.window.SafeDestroyGuest', {
         },
     ],
 
+    config: {
+        text: undefined,
+        item: {
+            id: undefined,
+            formattedIdentifier: undefined,
+        },
+        taskName: undefined,
+    },
+
     note: gettext('Referenced disks will always be destroyed.'),
 
+    getText: function () {
+        let me = this;
+
+        let identifier = me.getItem().formattedIdentifier ?? me.getItem().id;
+
+        me.text = `${Proxmox.Utils.format_task_description(me.getTaskName(), identifier)}`;
+
+        return me.callParent();
+    },
+
     getParams: function () {
         let me = this;
 
diff --git a/www/manager6/window/SafeDestroyStorage.js b/www/manager6/window/SafeDestroyStorage.js
index 8dcb41317..74cfd5a8c 100644
--- a/www/manager6/window/SafeDestroyStorage.js
+++ b/www/manager6/window/SafeDestroyStorage.js
@@ -2,11 +2,16 @@
  * SafeDestroy window with additional checkboxes for removing a storage on the disk level.
  */
 Ext.define('PVE.window.SafeDestroyStorage', {
-    extend: 'Proxmox.window.SafeDestroy',
+    extend: 'Proxmox.window.ConfirmRemoveDialog',
     alias: 'widget.pveSafeDestroyStorage',
 
     showProgress: true,
 
+    confirmButtonText: 'Remove',
+    declineButtonText: null,
+
+    dangerous: true,
+
     additionalItems: [
         {
             xtype: 'proxmoxcheckbox',
@@ -28,6 +33,22 @@ Ext.define('PVE.window.SafeDestroyStorage', {
         },
     ],
 
+    config: {
+        text: undefined,
+        item: {
+            id: undefined,
+        },
+        taskName: undefined,
+    },
+
+    getText: function () {
+        let me = this;
+
+        me.text = `${Proxmox.Utils.format_task_description(me.getTaskName(), me.getItem().id)}`;
+
+        return me.callParent();
+    },
+
     getParams: function () {
         let me = this;
 
-- 
2.47.3



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

Re: [pve-devel] [PATCH FOLLOW-UP manager 1/1] ui: replace SafeDestroy with ConfirmRemoveDialog

[Daniel Kral]

On Wed Sep 24, 2025 at 6:17 PM CEST, Michael Köppl wrote:
> The ConfirmRemoveDialog offers additional customization, but covers
> SafeDestroy's feature set. This is done mostly to streamline the
> implementation, basing dialogs to remove guests, storage, or resources
> on the same component.
>
> Signed-off-by: Michael Köppl <m.koeppl@proxmox.com>

SafeDestroy is also used in the PBS' web interface, so it should be
adapted there too:

```
$ rg "(Proxmox\.window\.SafeDestroy|proxmoxSafeDestroy)" -tjs .
./pve/proxmox-widget-toolkit/src/window/SafeDestroy.js
3:Ext.define('Proxmox.window.SafeDestroy', {
5:    alias: 'widget.proxmoxSafeDestroy',

./pve/pve-manager/www/manager6/ceph/Pool.js
528:                            Ext.create('Proxmox.window.SafeDestroy', {

./pve/pve-manager/www/manager6/storage/ImageView.js
63:                    var win = Ext.create('Proxmox.window.SafeDestroy', {

./pve/pve-manager/www/manager6/window/SafeDestroyGuest.js
5:    extend: 'Proxmox.window.SafeDestroy',

./pve/pve-manager/www/manager6/window/SafeDestroyStorage.js
5:    extend: 'Proxmox.window.SafeDestroy',

./rust/proxmox-backup/www/DirectoryList.js
43:            Ext.create('Proxmox.window.SafeDestroy', {

./rust/proxmox-backup/www/datastore/Content.js
650:            Ext.create('Proxmox.window.SafeDestroy', {

./rust/proxmox-backup/www/datastore/OptionView.js
2:    extend: 'Proxmox.window.SafeDestroy',

./rust/proxmox-backup/www/window/NamespaceEdit.js
56:    extend: 'Proxmox.window.SafeDestroy',
77:                    let win = field.up('proxmoxSafeDestroy');
```


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

Re: [pve-devel] [PATCH FOLLOW-UP manager 1/1] ui: replace SafeDestroy with ConfirmRemoveDialog

[Michael Köppl]

On Fri Sep 26, 2025 at 4:08 PM CEST, Daniel Kral wrote:
> SafeDestroy is also used in the PBS' web interface, so it should be
> adapted there too:

Thanks, I missed that one. Will send a separate patch to the pbs mailing
list as well!

>
> ```
> $ rg "(Proxmox\.window\.SafeDestroy|proxmoxSafeDestroy)" -tjs .
> ./pve/proxmox-widget-toolkit/src/window/SafeDestroy.js
> 3:Ext.define('Proxmox.window.SafeDestroy', {
> 5:    alias: 'widget.proxmoxSafeDestroy',
>
> ./pve/pve-manager/www/manager6/ceph/Pool.js
> 528:                            Ext.create('Proxmox.window.SafeDestroy', {
>
> ./pve/pve-manager/www/manager6/storage/ImageView.js
> 63:                    var win = Ext.create('Proxmox.window.SafeDestroy', {
>
> ./pve/pve-manager/www/manager6/window/SafeDestroyGuest.js
> 5:    extend: 'Proxmox.window.SafeDestroy',
>
> ./pve/pve-manager/www/manager6/window/SafeDestroyStorage.js
> 5:    extend: 'Proxmox.window.SafeDestroy',
>
> ./rust/proxmox-backup/www/DirectoryList.js
> 43:            Ext.create('Proxmox.window.SafeDestroy', {
>
> ./rust/proxmox-backup/www/datastore/Content.js
> 650:            Ext.create('Proxmox.window.SafeDestroy', {
>
> ./rust/proxmox-backup/www/datastore/OptionView.js
> 2:    extend: 'Proxmox.window.SafeDestroy',
>
> ./rust/proxmox-backup/www/window/NamespaceEdit.js
> 56:    extend: 'Proxmox.window.SafeDestroy',
> 77:                    let win = field.up('proxmoxSafeDestroy');
> ```
>
>
> _______________________________________________
> pve-devel mailing list
> pve-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel



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

Re: [pve-devel] [PATCH FOLLOW-UP manager/widget-toolkit 0/2] replace SafeDestroy

[Thomas Lamprecht]

Am 24.09.25 um 18:17 schrieb Michael Köppl:
> The ConfirmRemoveDialog window covers the SafeDestroy window's
> functionality, but makes it more general-purpose/flexible. It can be
> used for both yes/no dialog as well as the SafeDestroy dialogs already
> used for guests/storages. The reason for adding ConfirmRemoveDialog was
> that Ext.Msg.MessageBox is not properly extendable and simply adding an
> additional dialog would result in duplicate functionality covered in
> both SafeDestroy and ConfirmRemoveDialog. Thus, replace SafeDestroy with
> ConfirmRemoveDialog.

Why not keep SafeDestroy but make it base off the new ConfirmRemoveDialog
so that it's basically just a very thin wrapper that does not cost us
much to have? It's frequently used after all, so going that route would
reduce churn quite a bit.


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

Re: [pve-devel] [PATCH FOLLOW-UP manager/widget-toolkit 0/2] replace SafeDestroy

[Michael Köppl]

On Tue Sep 30, 2025 at 12:00 PM CEST, Thomas Lamprecht wrote:
> Am 24.09.25 um 18:17 schrieb Michael Köppl:
>> The ConfirmRemoveDialog window covers the SafeDestroy window's
>> functionality, but makes it more general-purpose/flexible. It can be
>> used for both yes/no dialog as well as the SafeDestroy dialogs already
>> used for guests/storages. The reason for adding ConfirmRemoveDialog was
>> that Ext.Msg.MessageBox is not properly extendable and simply adding an
>> additional dialog would result in duplicate functionality covered in
>> both SafeDestroy and ConfirmRemoveDialog. Thus, replace SafeDestroy with
>> ConfirmRemoveDialog.
>
> Why not keep SafeDestroy but make it base off the new ConfirmRemoveDialog
> so that it's basically just a very thin wrapper that does not cost us
> much to have? It's frequently used after all, so going that route would
> reduce churn quite a bit.

Dano and I discussed this off-list before and I considered it during the
development process, but wanted to avoid the additional layer because I
thought it might make the implementation more confusing. But now that
I'm working on an updated version of these patches, I also noticed that
it would make things easier. Then I can even skip the follow-up
patches entirely. So I'll do

                ConfirmRemoveDialog
                |                 |
                |                 |
            SafeDestroy     ConfirmRemoveResource
            |         |
            |         |
SafeDestroyGuest    SafeDestroyStorage

Thanks for the feedback, will send an updated series today.


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

Re: [pve-devel] [PATCH FOLLOW-UP manager/widget-toolkit 0/2] replace SafeDestroy

[Michael Köppl]

This is made obsolete by: https://lore.proxmox.com/pve-devel/20250930145848.263162-1-m.koeppl@proxmox.com/

On 9/24/25 6:17 PM, Michael Köppl wrote:
> This is a follow-up to another series implementing an additional purge
> param for resource removal [0].
> 
> The ConfirmRemoveDialog window covers the SafeDestroy window's
> functionality, but makes it more general-purpose/flexible. It can be
> used for both yes/no dialog as well as the SafeDestroy dialogs already
> used for guests/storages. The reason for adding ConfirmRemoveDialog was
> that Ext.Msg.MessageBox is not properly extendable and simply adding an
> additional dialog would result in duplicate functionality covered in
> both SafeDestroy and ConfirmRemoveDialog. Thus, replace SafeDestroy with
> ConfirmRemoveDialog.
> 
> [0] https://lore.proxmox.com/pve-devel/20250924160747.430018-1-m.koeppl@proxmox.com/
> 
> proxmox-widget-toolkit:
> 
> Michael Köppl (1):
>   window: remove SafeDestroy
> 
>  src/Makefile              |   1 -
>  src/window/SafeDestroy.js | 207 --------------------------------------
>  2 files changed, 208 deletions(-)
>  delete mode 100644 src/window/SafeDestroy.js
> 
> 
> pve-manager:
> 
> Michael Köppl (1):
>   ui: replace SafeDestroy with ConfirmRemoveDialog
> 
>  www/manager6/window/SafeDestroyGuest.js   | 26 ++++++++++++++++++++++-
>  www/manager6/window/SafeDestroyStorage.js | 23 +++++++++++++++++++-
>  2 files changed, 47 insertions(+), 2 deletions(-)
> 
> 
> Summary over all repositories:
>   4 files changed, 47 insertions(+), 210 deletions(-)
> 



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