[pve-devel] [PATCH pve-manager v4] ui: fix #6209: create snapshots and backups from context menu

[Shannon Sterz]

On Tue Oct 7, 2025 at 2:13 PM CEST, Nicolas Frey wrote:
> The original feature request only specified the ability to take
> snapshots. I added the manual backup shortcut as well, since
> navigating through the menu for this action felt unnecessarily
> cumbersome when performing just a quick backup.
>
> Changes since v3:
> * replace anonymous functions with arrow style functions
> * reverted approach from v2 after some experimentation, simulating
>     latency using chrome dev tools + traffic control
> * uses the same approach as in v1/v2 to match behaviour seen in the
>     Snapshot tab
>
> Changes since v2:
> * rebased
> * use autoShow on snapshot and backup windows
> * improve UX and account for slow connections by only making API
>   calls for snapshot feature on button click
>
> changes since v1, thanks @Fiona Ebner
> * clarified commit message
> * addressed several issues in the added menu options, namely:
>   * correctly handle disabled state with async
>   * fixed negation logic and cleaned up minor nits
>
> Fixes: https://bugzilla.proxmox.com/show_bug.cgi?id=6209
> Signed-off-by: Nicolas Frey <n.frey at proxmox.com>
> ---
>  www/manager6/lxc/CmdMenu.js  | 49 ++++++++++++++++++++++++++++++++++++
>  www/manager6/qemu/CmdMenu.js | 49 ++++++++++++++++++++++++++++++++++++
>  2 files changed, 98 insertions(+)
>
> diff --git a/www/manager6/lxc/CmdMenu.js b/www/manager6/lxc/CmdMenu.js
> index cd60c967..a7940e04 100644
> --- a/www/manager6/lxc/CmdMenu.js
> +++ b/www/manager6/lxc/CmdMenu.js
> @@ -134,6 +134,40 @@ Ext.define('PVE.lxc.CmdMenu', {
>                  },
>              },
>              { xtype: 'menuseparator' },
> +            {
> +                text: gettext('Take Snapshot'),
> +                iconCls: 'fa fa-fw fa-history',
> +                itemId: 'takeSnapshotBtn',
> +                disabled: true,
> +                handler: () => {
> +                    Ext.create('PVE.window.Snapshot', {
> +                        nodename: info.node,
> +                        vmid: info.vmid,
> +                        vmname: info.name,
> +                        viewonly: false,
> +                        type: info.type,
> +                        isCreate: true,
> +                        submitText: gettext('Take Snapshot'),
> +                        autoShow: true,
> +                        running: running,
> +                    });
> +                },
> +            },
> +            {
> +                text: gettext('Backup now'),
> +                iconCls: 'fa fa-fw fa-floppy-o',
> +                disabled: !caps.vms['VM.Backup'],
> +                handler: () => {
> +                    Ext.create('PVE.window.Backup', {
> +                        nodename: info.node,
> +                        vmid: info.vmid,
> +                        vmtype: info.type,
> +                        vmname: info.name,
> +                        autoShow: true,
> +                    });
> +                },
> +            },
> +            { xtype: 'menuseparator' },
>              {
>                  text: gettext('Console'),
>                  iconCls: 'fa fa-fw fa-terminal',
> @@ -149,5 +183,20 @@ Ext.define('PVE.lxc.CmdMenu', {
>          ];
>
>          me.callParent();
> +
> +        if (caps.vms['VM.Snapshot']) {
> +            Proxmox.Utils.API2Request({
> +                url: `/nodes/${info.node}/${info.type}/${info.vmid}/feature`,
> +                params: { feature: 'snapshot' },
> +                method: 'GET',
> +                success: (response) => {
> +                    let hasFeature = response.result.data.hasFeature;
> +                    let btn = me.down('#takeSnapshotBtn');
> +                    if (btn) {
> +                        btn.setDisabled(!hasFeature);
> +                    }
> +                },
> +            });
> +        }
>      },
>  });
> diff --git a/www/manager6/qemu/CmdMenu.js b/www/manager6/qemu/CmdMenu.js
> index adf64672..df6045bf 100644
> --- a/www/manager6/qemu/CmdMenu.js
> +++ b/www/manager6/qemu/CmdMenu.js
> @@ -169,6 +169,40 @@ Ext.define('PVE.qemu.CmdMenu', {
>                  },
>              },
>              { xtype: 'menuseparator' },
> +            {
> +                text: gettext('Take Snapshot'),
> +                iconCls: 'fa fa-fw fa-history',
> +                itemId: 'takeSnapshotBtn',
> +                disabled: true,
> +                handler: () => {
> +                    Ext.create('PVE.window.Snapshot', {
> +                        nodename: info.node,
> +                        vmid: info.vmid,
> +                        vmname: info.name,
> +                        viewonly: false,
> +                        type: info.type,
> +                        isCreate: true,
> +                        submitText: gettext('Take Snapshot'),
> +                        autoShow: true,
> +                        running: running,
> +                    });
> +                },
> +            },
> +            {
> +                text: gettext('Backup now'),
> +                iconCls: 'fa fa-fw fa-floppy-o',
> +                disabled: !caps.vms['VM.Backup'],
> +                handler: () => {
> +                    Ext.create('PVE.window.Backup', {
> +                        nodename: info.node,
> +                        vmid: info.vmid,
> +                        vmtype: info.type,
> +                        vmname: info.name,
> +                        autoShow: true,
> +                    });
> +                },
> +            },
> +            { xtype: 'menuseparator' },
>              {
>                  text: gettext('Console'),
>                  iconCls: 'fa fa-fw fa-terminal',
> @@ -194,5 +228,20 @@ Ext.define('PVE.qemu.CmdMenu', {
>          ];
>
>          me.callParent();
> +
> +        if (caps.vms['VM.Snapshot']) {
> +            Proxmox.Utils.API2Request({
> +                url: `/nodes/${info.node}/${info.type}/${info.vmid}/feature`,
> +                params: { feature: 'snapshot' },
> +                method: 'GET',
> +                success: (response) => {
> +                    let hasFeature = response.result.data.hasFeature;
> +                    let btn = me.down('#takeSnapshotBtn');
> +                    if (btn) {
> +                        btn.setDisabled(!hasFeature);
> +                    }
> +                },
> +            });
> +        }
>      },
>  });

looks good to me now, so consider this:

Reviewed-by: Shannon Sterz <s.sterz at proxmox.com>