[pve-devel] [PATCH pve-manager v3 1/1] fix #4228: ui: add automatic restarting to snapshot rollback dialog

[Stefan Hanreich <s.hanreich@proxmox.com>]

Added a new component, Confirm. It acts similar to a messagebox, except it
can contain form elements. It also automatically calls an API endpoint
when the user confirms the message.
This component was then used for implementing the new rollback dialog window.

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 www/manager6/Makefile             |   1 +
 www/manager6/tree/SnapshotTree.js |  42 +++++++---
 www/manager6/window/Confirm.js    | 135 ++++++++++++++++++++++++++++++
 3 files changed, 165 insertions(+), 13 deletions(-)
 create mode 100644 www/manager6/window/Confirm.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index d16770b1..a1d179f5 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -97,6 +97,7 @@ JSSRC= 							\
 	window/BulkAction.js				\
 	window/CephInstall.js				\
 	window/Clone.js					\
+	window/Confirm.js					\
 	window/FirewallEnableEdit.js			\
 	window/FirewallLograteEdit.js			\
 	window/LoginWindow.js				\
diff --git a/www/manager6/tree/SnapshotTree.js b/www/manager6/tree/SnapshotTree.js
index 97268072..856126c5 100644
--- a/www/manager6/tree/SnapshotTree.js
+++ b/www/manager6/tree/SnapshotTree.js
@@ -61,7 +61,7 @@ Ext.define('PVE.guest.SnapshotTree', {
 	    me.mon(win, 'destroy', me.reload, me);
 	},
 
-	snapshotAction: function(action, method) {
+	remove: function() {
 	    let me = this;
 	    let view = me.getView();
 	    let vm = me.getViewModel();
@@ -73,8 +73,8 @@ Ext.define('PVE.guest.SnapshotTree', {
 	    let vmid = vm.get('vmid');
 
 	    Proxmox.Utils.API2Request({
-		url: `/nodes/${nodename}/${type}/${vmid}/snapshot/${snapname}/${action}`,
-		method: method,
+		url: `/nodes/${nodename}/${type}/${vmid}/snapshot/${snapname}`,
+		method: 'DELETE',
 		waitMsgTarget: view,
 		callback: function() {
 		    me.reload();
@@ -90,12 +90,6 @@ Ext.define('PVE.guest.SnapshotTree', {
 	    });
 	},
 
-	rollback: function() {
-	    this.snapshotAction('rollback', 'POST');
-	},
-	remove: function() {
-	    this.snapshotAction('', 'DELETE');
-	},
 	cancel: function() {
 	    this.load_task.cancel();
 	},
@@ -255,14 +249,36 @@ Ext.define('PVE.guest.SnapshotTree', {
 	    bind: {
 		disabled: '{!canRollback}',
 	    },
-	    confirmMsg: function() {
+	    handler: function() {
 		let view = this.up('treepanel');
+		let viewModel = view.getViewModel();
+
 		let rec = view.getSelection()[0];
-		let vmid = view.getViewModel().get('vmid');
-		return Proxmox.Utils.format_task_description('qmrollback', vmid) +
+		let vmid = viewModel.get('vmid');
+		let label = Proxmox.Utils.format_task_description('qmrollback', vmid) +
 		    ` '${rec.data.name}'? ${gettext("Current state will be lost.")}`;
+
+		let nodename = viewModel.get('nodename');
+		let type = viewModel.get('type');
+		let snapname = viewModel.get('selected');
+		if (!snapname) { return; }
+
+		Ext.create({
+		    xtype: 'proxmoxConfirmWindow',
+		    autoShow: true,
+		    message: label,
+		    url: `/nodes/${nodename}/${type}/${vmid}/snapshot/${snapname}/rollback`,
+		    hasProgress: true,
+		    formItems: [
+			{
+			    xtype: 'proxmoxcheckbox',
+			    name: 'start',
+			    margin: '5 0 0 0',
+			    boxLabel: gettext('Start guest after rollback'),
+			},
+		    ],
+		});
 	    },
-	    handler: 'rollback',
 	},
 	'-',
 	{
diff --git a/www/manager6/window/Confirm.js b/www/manager6/window/Confirm.js
new file mode 100644
index 00000000..98a0ba0f
--- /dev/null
+++ b/www/manager6/window/Confirm.js
@@ -0,0 +1,135 @@
+Ext.define('PVE.window.Confirm', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.proxmoxConfirmWindow',
+
+    layout: {
+	type: 'hbox',
+	align: 'center',
+    },
+
+    bodyPadding: 10,
+
+    modal: true,
+    resizable: false,
+
+    buttonAlign: 'center',
+
+    hasProgress: false,
+
+    message: null,
+
+    VALID_ICON_TYPES: ['info', 'warning', 'question', 'error'],
+
+    ICON_CLASS_PREFIX: Ext.baseCSSPrefix + 'message-box-',
+
+    /**
+     * can be one of VALID_ICON_TYPES
+     */
+    iconType: 'question',
+
+    /**
+     * The components that should be rendered to this component's InputPanel
+     */
+    formItems: [],
+
+    showProgress: function(response) {
+	let upid = response.result.data;
+
+	if (!upid) {
+	    return;
+	}
+
+	Ext.create('Proxmox.window.TaskProgress', {
+	    autoShow: true,
+	    upid: upid,
+	});
+    },
+
+    yesHandler: function() {
+	Proxmox.Utils.API2Request({
+	    method: 'POST',
+	    url: this.url,
+	    params: this.inputPanel.getValues(),
+	    success: (response, options) => {
+		if (this.hasProgress) {
+		    this.showProgress(response);
+		}
+	    },
+	    failure: (response, options) => {
+		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+	    },
+	});
+
+	this.close();
+    },
+
+    noHandler: function() {
+	this.close();
+    },
+
+    initButtons: function() {
+	return [
+	    {
+		text: 'Yes',
+		handler: () => this.yesHandler(),
+	    },
+	    {
+		text: 'No',
+		handler: () => this.noHandler(),
+	    },
+	];
+    },
+
+    initIcon: function() {
+	return {
+	    xtype: 'component',
+	    docked: 'left',
+	    width: 40,
+	    height: 40,
+	    cls: this.ICON_CLASS_PREFIX + this.iconType,
+	};
+    },
+
+    initInputPanel: function() {
+	return Ext.create({
+	    xtype: 'inputpanel',
+	    items: this.formItems,
+	});
+    },
+
+    initLabel: function() {
+	return {
+	    xtype: 'label',
+	    html: this.message,
+	};
+    },
+
+    initComponent: function() {
+	if (!this.url) {
+	    throw 'URL parameter required!';
+	}
+
+	if (!this.VALID_ICON_TYPES.includes(this.iconType)) {
+	    throw 'Invalid icon type specified!';
+	}
+
+	this.title = this.title || gettext('Confirm');
+
+	this.buttons = this.initButtons();
+
+	if (this.message) {
+	    this.formItems.unshift(
+		this.initLabel(),
+	    );
+	}
+
+	this.inputPanel = this.initInputPanel();
+
+	this.items = [
+	    this.initIcon(),
+	    this.inputPanel,
+	];
+
+	this.callParent();
+    },
+});
-- 
2.30.2