[pve-devel] [PATCH manager 1/3] gui: refactor snapshot window
Dominik Csapak
d.csapak at proxmox.com
Thu Jan 30 16:58:51 CET 2020
using an Proxmox.window.Edit, which does many of the things we did
manually, also rewrite is in such way that we can use it for qemu
and lxc
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/manager6/Makefile | 3 +-
www/manager6/lxc/Snapshot.js | 206 ----------------------------
www/manager6/lxc/SnapshotTree.js | 4 +
www/manager6/qemu/Snapshot.js | 215 ------------------------------
www/manager6/qemu/SnapshotTree.js | 4 +
www/manager6/window/Snapshot.js | 131 ++++++++++++++++++
6 files changed, 140 insertions(+), 423 deletions(-)
delete mode 100644 www/manager6/lxc/Snapshot.js
delete mode 100644 www/manager6/qemu/Snapshot.js
create mode 100644 www/manager6/window/Snapshot.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index d232e635..3c99ec6c 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -127,6 +127,7 @@ JSSRC= \
window/Migrate.js \
window/BulkAction.js \
window/Clone.js \
+ window/Snapshot.js \
qemu/Monitor.js \
qemu/OSTypeEdit.js \
qemu/OSDefaults.js \
@@ -146,7 +147,6 @@ JSSRC= \
qemu/ScsiHwEdit.js \
qemu/QemuBiosEdit.js \
qemu/Options.js \
- qemu/Snapshot.js \
qemu/SnapshotTree.js \
qemu/Config.js \
qemu/CreateWizard.js \
@@ -168,7 +168,6 @@ JSSRC= \
lxc/Config.js \
lxc/CreateWizard.js \
lxc/SnapshotTree.js \
- lxc/Snapshot.js \
lxc/ResourceEdit.js \
lxc/MPResize.js \
lxc/MPEdit.js \
diff --git a/www/manager6/lxc/Snapshot.js b/www/manager6/lxc/Snapshot.js
deleted file mode 100644
index bdb99018..00000000
--- a/www/manager6/lxc/Snapshot.js
+++ /dev/null
@@ -1,206 +0,0 @@
-Ext.define('PVE.window.LxcSnapshot', {
- extend: 'Ext.window.Window',
-
- resizable: false,
-
- // needed for finding the reference to submitbutton
- // because we do not have a controller
- referenceHolder: true,
- defaultButton: 'submitbutton',
- defaultFocus: 'field',
-
- take_snapshot: function(snapname, descr, vmstate) {
- var me = this;
- var params = { snapname: snapname };
- if (descr) {
- params.description = descr;
- }
-
- Proxmox.Utils.API2Request({
- params: params,
- url: '/nodes/' + me.nodename + '/lxc/' + me.vmid + "/snapshot",
- waitMsgTarget: me,
- method: 'POST',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- },
- success: function(response, options) {
- var upid = response.result.data;
- var win = Ext.create('Proxmox.window.TaskProgress', { upid: upid });
- win.show();
- me.close();
- }
- });
- },
-
- update_snapshot: function(snapname, descr) {
- var me = this;
- Proxmox.Utils.API2Request({
- params: { description: descr },
- url: '/nodes/' + me.nodename + '/lxc/' + me.vmid + "/snapshot/" +
- snapname + '/config',
- waitMsgTarget: me,
- method: 'PUT',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- },
- success: function(response, options) {
- me.close();
- }
- });
- },
-
- initComponent : function() {
- var me = this;
-
- if (!me.nodename) {
- throw "no node name specified";
- }
-
- if (!me.vmid) {
- throw "no VM ID specified";
- }
-
- var summarystore = Ext.create('Ext.data.Store', {
- model: 'KeyValue',
- sorters: [
- {
- property : 'key',
- direction: 'ASC'
- }
- ]
- });
-
- var items = [
- {
- xtype: me.snapname ? 'displayfield' : 'textfield',
- name: 'snapname',
- value: me.snapname,
- fieldLabel: gettext('Name'),
- vtype: 'ConfigId',
- allowBlank: false
- }
- ];
-
- if (me.snapname) {
- items.push({
- xtype: 'displayfield',
- name: 'snaptime',
- renderer: PVE.Utils.render_timestamp_human_readable,
- fieldLabel: gettext('Timestamp')
- });
- }
-
- items.push({
- xtype: 'textareafield',
- grow: true,
- name: 'description',
- fieldLabel: gettext('Description')
- });
-
- if (me.snapname) {
- items.push({
- title: gettext('Settings'),
- xtype: 'grid',
- height: 200,
- store: summarystore,
- columns: [
- {header: gettext('Key'), width: 150, dataIndex: 'key'},
- {header: gettext('Value'), flex: 1, dataIndex: 'value'}
- ]
- });
- }
-
- me.formPanel = Ext.create('Ext.form.Panel', {
- bodyPadding: 10,
- border: false,
- fieldDefaults: {
- labelWidth: 100,
- anchor: '100%'
- },
- items: items
- });
-
- var form = me.formPanel.getForm();
-
- var submitBtn;
-
- if (me.snapname) {
- me.title = gettext('Edit') + ': ' + gettext('Snapshot');
- submitBtn = Ext.create('Ext.Button', {
- text: gettext('Update'),
- handler: function() {
- if (form.isValid()) {
- var values = form.getValues();
- me.update_snapshot(me.snapname, values.description);
- }
- }
- });
- } else {
- me.title ="VM " + me.vmid + ': ' + gettext('Take Snapshot');
- submitBtn = Ext.create('Ext.Button', {
- text: gettext('Take Snapshot'),
- reference: 'submitbutton',
- handler: function() {
- if (form.isValid()) {
- var values = form.getValues();
- me.take_snapshot(values.snapname, values.description);
- }
- }
- });
- }
-
- Ext.apply(me, {
- modal: true,
- width: 450,
- border: false,
- layout: 'fit',
- buttons: [ submitBtn ],
- items: [ me.formPanel ]
- });
-
- if (me.snapname) {
- Ext.apply(me, {
- width: 620,
- height: 420
- });
- }
-
- me.callParent();
-
- if (!me.snapname) {
- return;
- }
-
- // else load data
- Proxmox.Utils.API2Request({
- url: '/nodes/' + me.nodename + '/lxc/' + me.vmid + "/snapshot/" +
- me.snapname + '/config',
- waitMsgTarget: me,
- method: 'GET',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- me.close();
- },
- success: function(response, options) {
- var data = response.result.data;
- var kvarray = [];
- Ext.Object.each(data, function(key, value) {
- if (key === 'description' || key === 'snaptime') {
- return;
- }
- kvarray.push({ key: key, value: value });
- });
-
- summarystore.suspendEvents();
- summarystore.add(kvarray);
- summarystore.sort();
- summarystore.resumeEvents();
- summarystore.fireEvent('refresh', summarystore);
-
- form.findField('snaptime').setValue(data.snaptime);
- form.findField('description').setValue(data.description);
- }
- });
- }
-});
diff --git a/www/manager6/lxc/SnapshotTree.js b/www/manager6/lxc/SnapshotTree.js
index d9414fef..0c1d9a6b 100644
--- a/www/manager6/lxc/SnapshotTree.js
+++ b/www/manager6/lxc/SnapshotTree.js
@@ -136,6 +136,7 @@ Ext.define('PVE.lxc.SnapshotTree', {
var rec = sm.getSelection()[0];
if (valid_snapshot(rec)) {
var win = Ext.create('PVE.window.LxcSnapshot', {
+ type: 'lxc',
snapname: rec.data.name,
nodename: me.nodename,
vmid: me.vmid
@@ -238,6 +239,9 @@ Ext.define('PVE.lxc.SnapshotTree', {
disabled: true,
handler: function() {
var win = Ext.create('PVE.window.LxcSnapshot', {
+ type: 'lxc',
+ isCreate: true,
+ submitText: gettext('Take Snapshot'),
nodename: me.nodename,
vmid: me.vmid
});
diff --git a/www/manager6/qemu/Snapshot.js b/www/manager6/qemu/Snapshot.js
deleted file mode 100644
index 59fae1a2..00000000
--- a/www/manager6/qemu/Snapshot.js
+++ /dev/null
@@ -1,215 +0,0 @@
-Ext.define('PVE.window.Snapshot', {
- extend: 'Ext.window.Window',
-
- resizable: false,
-
- // needed for finding the reference to submitbutton
- // because we do not have a controller
- referenceHolder: true,
- defaultButton: 'submitbutton',
- defaultFocus: 'field',
-
- take_snapshot: function(snapname, descr, vmstate) {
- var me = this;
- var params = { snapname: snapname, vmstate: vmstate ? 1 : 0 };
- if (descr) {
- params.description = descr;
- }
-
- Proxmox.Utils.API2Request({
- params: params,
- url: '/nodes/' + me.nodename + '/qemu/' + me.vmid + "/snapshot",
- waitMsgTarget: me,
- method: 'POST',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- },
- success: function(response, options) {
- var upid = response.result.data;
- var win = Ext.create('Proxmox.window.TaskProgress', { upid: upid });
- win.show();
- me.close();
- }
- });
- },
-
- update_snapshot: function(snapname, descr) {
- var me = this;
- Proxmox.Utils.API2Request({
- params: { description: descr },
- url: '/nodes/' + me.nodename + '/qemu/' + me.vmid + "/snapshot/" +
- snapname + '/config',
- waitMsgTarget: me,
- method: 'PUT',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- },
- success: function(response, options) {
- me.close();
- }
- });
- },
-
- initComponent : function() {
- var me = this;
-
- if (!me.nodename) {
- throw "no node name specified";
- }
-
- if (!me.vmid) {
- throw "no VM ID specified";
- }
-
- var summarystore = Ext.create('Ext.data.Store', {
- model: 'KeyValue',
- sorters: [
- {
- property : 'key',
- direction: 'ASC'
- }
- ]
- });
-
- var items = [
- {
- xtype: me.snapname ? 'displayfield' : 'textfield',
- name: 'snapname',
- value: me.snapname,
- fieldLabel: gettext('Name'),
- vtype: 'ConfigId',
- allowBlank: false
- }
- ];
-
- if (me.snapname) {
- items.push({
- xtype: 'displayfield',
- name: 'snaptime',
- renderer: PVE.Utils.render_timestamp_human_readable,
- fieldLabel: gettext('Timestamp')
- });
- } else {
- items.push({
- xtype: 'proxmoxcheckbox',
- name: 'vmstate',
- uncheckedValue: 0,
- defaultValue: 0,
- checked: 1,
- fieldLabel: gettext('Include RAM')
- });
- }
-
- items.push({
- xtype: 'textareafield',
- grow: true,
- name: 'description',
- fieldLabel: gettext('Description')
- });
-
- if (me.snapname) {
- items.push({
- title: gettext('Settings'),
- xtype: 'grid',
- height: 200,
- store: summarystore,
- columns: [
- {header: gettext('Key'), width: 150, dataIndex: 'key'},
- {header: gettext('Value'), flex: 1, dataIndex: 'value'}
- ]
- });
- }
-
- me.formPanel = Ext.create('Ext.form.Panel', {
- bodyPadding: 10,
- border: false,
- fieldDefaults: {
- labelWidth: 100,
- anchor: '100%'
- },
- items: items
- });
-
- var form = me.formPanel.getForm();
-
- var submitBtn;
-
- if (me.snapname) {
- me.title = gettext('Edit') + ': ' + gettext('Snapshot');
- submitBtn = Ext.create('Ext.Button', {
- text: gettext('Update'),
- handler: function() {
- if (form.isValid()) {
- var values = form.getValues();
- me.update_snapshot(me.snapname, values.description);
- }
- }
- });
- } else {
- me.title ="VM " + me.vmid + ': ' + gettext('Take Snapshot');
- submitBtn = Ext.create('Ext.Button', {
- text: gettext('Take Snapshot'),
- reference: 'submitbutton',
- handler: function() {
- if (form.isValid()) {
- var values = form.getValues();
- me.take_snapshot(values.snapname, values.description, values.vmstate);
- }
- }
- });
- }
-
- Ext.apply(me, {
- modal: true,
- width: 450,
- border: false,
- layout: 'fit',
- buttons: [ submitBtn ],
- items: [ me.formPanel ]
- });
-
- if (me.snapname) {
- Ext.apply(me, {
- width: 620,
- height: 420
- });
- }
-
- me.callParent();
-
- if (!me.snapname) {
- return;
- }
-
- // else load data
- Proxmox.Utils.API2Request({
- url: '/nodes/' + me.nodename + '/qemu/' + me.vmid + "/snapshot/" +
- me.snapname + '/config',
- waitMsgTarget: me,
- method: 'GET',
- failure: function(response, opts) {
- Ext.Msg.alert(gettext('Error'), response.htmlStatus);
- me.close();
- },
- success: function(response, options) {
- var data = response.result.data;
- var kvarray = [];
- Ext.Object.each(data, function(key, value) {
- if (key === 'description' || key === 'snaptime') {
- return;
- }
- kvarray.push({ key: key, value: value });
- });
-
- summarystore.suspendEvents();
- summarystore.add(kvarray);
- summarystore.sort();
- summarystore.resumeEvents();
- summarystore.fireEvent('refresh', summarystore);
-
- form.findField('snaptime').setValue(data.snaptime);
- form.findField('description').setValue(data.description);
- }
- });
- }
-});
diff --git a/www/manager6/qemu/SnapshotTree.js b/www/manager6/qemu/SnapshotTree.js
index 9b7c1fb6..a3891433 100644
--- a/www/manager6/qemu/SnapshotTree.js
+++ b/www/manager6/qemu/SnapshotTree.js
@@ -134,6 +134,7 @@ Ext.define('PVE.qemu.SnapshotTree', {
var rec = sm.getSelection()[0];
if (valid_snapshot(rec)) {
var win = Ext.create('PVE.window.Snapshot', {
+ type: 'qemu',
snapname: rec.data.name,
nodename: me.nodename,
vmid: me.vmid
@@ -228,6 +229,9 @@ Ext.define('PVE.qemu.SnapshotTree', {
disabled: true,
handler: function() {
var win = Ext.create('PVE.window.Snapshot', {
+ isCreate: true,
+ type: 'qemu',
+ submitText: gettext('Take Snapshot'),
nodename: me.nodename,
vmid: me.vmid
});
diff --git a/www/manager6/window/Snapshot.js b/www/manager6/window/Snapshot.js
new file mode 100644
index 00000000..64de9293
--- /dev/null
+++ b/www/manager6/window/Snapshot.js
@@ -0,0 +1,131 @@
+Ext.define('PVE.window.Snapshot', {
+ extend: 'Proxmox.window.Edit',
+
+ onGetValues: function(values) {
+ let me = this;
+
+ if (me.type === 'lxc') {
+ delete values.vmstate;
+ }
+
+ return values;
+ },
+
+ initComponent : function() {
+ var me = this;
+
+ if (!me.nodename) {
+ throw "no node name specified";
+ }
+
+ if (!me.vmid) {
+ throw "no VM ID specified";
+ }
+
+ if (!me.type) {
+ throw "no VM ID specified";
+ }
+
+ me.items = [
+ {
+ xtype: me.snapname ? 'displayfield' : 'textfield',
+ name: 'snapname',
+ value: me.snapname,
+ fieldLabel: gettext('Name'),
+ vtype: 'ConfigId',
+ allowBlank: false
+ },
+ {
+ xtype: 'displayfield',
+ hidden: !me.snapname,
+ disabled: !me.snapname,
+ name: 'snaptime',
+ renderer: PVE.Utils.render_timestamp_human_readable,
+ fieldLabel: gettext('Timestamp')
+ },
+ {
+ xtype: 'proxmoxcheckbox',
+ hidden: me.type !== 'qemu' || me.snapname,
+ disabled: me.type !== 'qemu' || me.snapname,
+ name: 'vmstate',
+ uncheckedValue: 0,
+ defaultValue: 0,
+ checked: 1,
+ fieldLabel: gettext('Include RAM')
+ },
+ {
+ xtype: 'textareafield',
+ grow: true,
+ editable: !me.viewonly,
+ name: 'description',
+ fieldLabel: gettext('Description')
+ },
+ {
+ title: gettext('Settings'),
+ hidden: !me.snapname,
+ xtype: 'grid',
+ itemId: 'summary',
+ border: true,
+ height: 200,
+ store: {
+ model: 'KeyValue',
+ sorters: [
+ {
+ property : 'key',
+ direction: 'ASC'
+ }
+ ]
+ },
+ columns: [
+ {header: gettext('Key'), width: 150, dataIndex: 'key'},
+ {header: gettext('Value'), flex: 1, dataIndex: 'value'}
+ ]
+ }
+ ];
+
+ me.url = `/nodes/${me.nodename}/${me.type}/${me.vmid}/snapshot`;
+
+ let subject;
+ if (me.snapname) {
+ subject = gettext('Snapshot') + ` ${me.snapname}`;
+ me.url += `/${me.snapname}/config`;
+ } else {
+ subject = (me.type === 'qemu' ? 'VM' : 'CT') + me.vmid + ' ' + gettext('Snapshot');
+ me.method = 'POST';
+ me.showProgress = true;
+ }
+
+ Ext.apply(me, {
+ subject: subject,
+ width: me.snapname ? 620 : 450,
+ height: me.snapname ? 420 : undefined,
+ });
+
+ me.callParent();
+
+ if (!me.snapname) {
+ return;
+ }
+
+ me.load({
+ success: function(response) {
+ let kvarray = [];
+ Ext.Object.each(response.result.data, function(key, value) {
+ if (key === 'description' || key === 'snaptime') {
+ return;
+ }
+ kvarray.push({ key: key, value: value });
+ });
+
+ let summarystore = me.down('#summary').getStore();
+ summarystore.suspendEvents();
+ summarystore.add(kvarray);
+ summarystore.sort();
+ summarystore.resumeEvents();
+ summarystore.fireEvent('refresh', summarystore);
+
+ me.setValues(response.result.data);
+ }
+ });
+ }
+});
--
2.20.1
More information about the pve-devel
mailing list