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

[Nicolas Frey]

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);
+                    }
+                },
+            });
+        }
     },
 });
-- 
2.47.3