mirror of
https://git.proxmox.com/git/pve-manager
synced 2025-05-31 01:05:38 +00:00
qemu/wizard: move to declarative syntax
Use a ViewModel directly, instead of emulating its behaviour with a ViewController. The rest consists mostly of indentation changes, moving some components directly inside their parent declaration. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht
Dominik Csapak
parent
bd2118c6ed
commit
8cdfb23faa
@ -1,191 +1,190 @@
|
|||||||
|
/*jslint confusion: true*/
|
||||||
Ext.define('PVE.qemu.CreateWizard', {
|
Ext.define('PVE.qemu.CreateWizard', {
|
||||||
extend: 'PVE.window.Wizard',
|
extend: 'PVE.window.Wizard',
|
||||||
alias: 'widget.pveQemuCreateWizard',
|
alias: 'widget.pveQemuCreateWizard',
|
||||||
|
mixins: ['Proxmox.Mixin.CBind'],
|
||||||
|
|
||||||
controller: {
|
viewModel: {
|
||||||
|
data: {
|
||||||
xclass: 'Ext.app.ViewController',
|
nodename: ''
|
||||||
|
|
||||||
control: {
|
|
||||||
'field[name=nodename]': {
|
|
||||||
change: function(f, value) {
|
|
||||||
var me = this;
|
|
||||||
['networkpanel', 'hdpanel', 'cdpanel'].forEach(function(reference) {
|
|
||||||
me.lookup(reference).setNodename(value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
initComponent: function() {
|
cbindData: {
|
||||||
var me = this;
|
nodename: undefined
|
||||||
|
},
|
||||||
|
|
||||||
var summarystore = Ext.create('Ext.data.Store', {
|
subject: gettext('Virtual Machine'),
|
||||||
model: 'KeyValue',
|
|
||||||
sorters: [
|
items: [
|
||||||
|
{
|
||||||
|
xtype: 'inputpanel',
|
||||||
|
title: gettext('General'),
|
||||||
|
onlineHelp: 'qm_general_settings',
|
||||||
|
column1: [
|
||||||
{
|
{
|
||||||
property : 'key',
|
xtype: 'pveNodeSelector',
|
||||||
direction: 'ASC'
|
name: 'nodename',
|
||||||
|
cbind: {
|
||||||
|
selectCurNode: '{!nodename}',
|
||||||
|
preferredValue: '{nodename}'
|
||||||
|
},
|
||||||
|
bind: {
|
||||||
|
value: '{nodename}'
|
||||||
|
},
|
||||||
|
fieldLabel: gettext('Node'),
|
||||||
|
allowBlank: false,
|
||||||
|
onlineValidator: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'pveGuestIDSelector',
|
||||||
|
name: 'vmid',
|
||||||
|
guestType: 'qemu',
|
||||||
|
value: '',
|
||||||
|
loadNextFreeID: true,
|
||||||
|
validateExists: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'textfield',
|
||||||
|
name: 'name',
|
||||||
|
vtype: 'DnsName',
|
||||||
|
value: '',
|
||||||
|
fieldLabel: gettext('Name'),
|
||||||
|
allowBlank: true
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
});
|
column2: [
|
||||||
|
{
|
||||||
Ext.applyIf(me, {
|
xtype: 'pvePoolSelector',
|
||||||
subject: gettext('Virtual Machine'),
|
fieldLabel: gettext('Resource Pool'),
|
||||||
|
name: 'pool',
|
||||||
|
value: '',
|
||||||
|
allowBlank: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
onGetValues: function(values) {
|
||||||
|
if (!values.name) {
|
||||||
|
delete values.name;
|
||||||
|
}
|
||||||
|
if (!values.pool) {
|
||||||
|
delete values.pool;
|
||||||
|
}
|
||||||
|
return values;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'container',
|
||||||
|
layout: 'hbox',
|
||||||
|
defaults: {
|
||||||
|
flex: 1,
|
||||||
|
padding: '0 10'
|
||||||
|
},
|
||||||
|
title: gettext('OS'),
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
xtype: 'inputpanel',
|
xtype: 'pveQemuCDInputPanel',
|
||||||
title: gettext('General'),
|
bind: {
|
||||||
onlineHelp: 'qm_general_settings',
|
nodename: '{nodename}'
|
||||||
column1: [
|
|
||||||
{
|
|
||||||
xtype: 'pveNodeSelector',
|
|
||||||
name: 'nodename',
|
|
||||||
selectCurNode: !me.nodename,
|
|
||||||
preferredValue: me.nodename,
|
|
||||||
fieldLabel: gettext('Node'),
|
|
||||||
allowBlank: false,
|
|
||||||
onlineValidator: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'pveGuestIDSelector',
|
|
||||||
name: 'vmid',
|
|
||||||
guestType: 'qemu',
|
|
||||||
value: '',
|
|
||||||
loadNextFreeID: true,
|
|
||||||
validateExists: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'textfield',
|
|
||||||
name: 'name',
|
|
||||||
vtype: 'DnsName',
|
|
||||||
value: '',
|
|
||||||
fieldLabel: gettext('Name'),
|
|
||||||
allowBlank: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
column2: [
|
|
||||||
{
|
|
||||||
xtype: 'pvePoolSelector',
|
|
||||||
fieldLabel: gettext('Resource Pool'),
|
|
||||||
name: 'pool',
|
|
||||||
value: '',
|
|
||||||
allowBlank: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
onGetValues: function(values) {
|
|
||||||
if (!values.name) {
|
|
||||||
delete values.name;
|
|
||||||
}
|
|
||||||
if (!values.pool) {
|
|
||||||
delete values.pool;
|
|
||||||
}
|
|
||||||
return values;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'container',
|
|
||||||
layout: 'hbox',
|
|
||||||
defaults: {
|
|
||||||
flex: 1,
|
|
||||||
padding: '0 10'
|
|
||||||
},
|
},
|
||||||
title: gettext('OS'),
|
confid: 'ide2',
|
||||||
items: [
|
|
||||||
{
|
|
||||||
xtype: 'pveQemuCDInputPanel',
|
|
||||||
reference: 'cdpanel',
|
|
||||||
confid: 'ide2',
|
|
||||||
insideWizard: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'pveQemuOSTypePanel',
|
|
||||||
insideWizard: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'pveQemuHDInputPanel',
|
|
||||||
reference: 'hdpanel',
|
|
||||||
title: gettext('Hard Disk'),
|
|
||||||
isCreate: true,
|
|
||||||
insideWizard: true
|
insideWizard: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
xtype: 'pveQemuProcessorPanel',
|
xtype: 'pveQemuOSTypePanel',
|
||||||
insideWizard: true,
|
|
||||||
title: gettext('CPU')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'pveQemuMemoryPanel',
|
|
||||||
insideWizard: true,
|
|
||||||
title: gettext('Memory')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
xtype: 'pveQemuNetworkInputPanel',
|
|
||||||
reference: 'networkpanel',
|
|
||||||
title: gettext('Network'),
|
|
||||||
insideWizard: true
|
insideWizard: true
|
||||||
},
|
|
||||||
{
|
|
||||||
title: gettext('Confirm'),
|
|
||||||
layout: 'fit',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
xtype: 'grid',
|
|
||||||
store: summarystore,
|
|
||||||
columns: [
|
|
||||||
{header: 'Key', width: 150, dataIndex: 'key'},
|
|
||||||
{header: 'Value', flex: 1, dataIndex: 'value'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
listeners: {
|
|
||||||
show: function(panel) {
|
|
||||||
var kv = me.getValues();
|
|
||||||
var data = [];
|
|
||||||
Ext.Object.each(kv, function(key, value) {
|
|
||||||
if (key === 'delete') { // ignore
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
data.push({ key: key, value: value });
|
|
||||||
});
|
|
||||||
summarystore.suspendEvents();
|
|
||||||
summarystore.removeAll();
|
|
||||||
summarystore.add(data);
|
|
||||||
summarystore.sort();
|
|
||||||
summarystore.resumeEvents();
|
|
||||||
summarystore.fireEvent('refresh');
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSubmit: function() {
|
|
||||||
var kv = me.getValues();
|
|
||||||
delete kv['delete'];
|
|
||||||
|
|
||||||
var nodename = kv.nodename;
|
|
||||||
delete kv.nodename;
|
|
||||||
|
|
||||||
Proxmox.Utils.API2Request({
|
|
||||||
url: '/nodes/' + nodename + '/qemu',
|
|
||||||
waitMsgTarget: me,
|
|
||||||
method: 'POST',
|
|
||||||
params: kv,
|
|
||||||
success: function(response){
|
|
||||||
me.close();
|
|
||||||
},
|
|
||||||
failure: function(response, opts) {
|
|
||||||
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
},
|
||||||
|
{
|
||||||
|
xtype: 'pveQemuHDInputPanel',
|
||||||
|
bind: {
|
||||||
|
nodename: '{nodename}'
|
||||||
|
},
|
||||||
|
title: gettext('Hard Disk'),
|
||||||
|
isCreate: true,
|
||||||
|
insideWizard: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'pveQemuProcessorPanel',
|
||||||
|
insideWizard: true,
|
||||||
|
title: gettext('CPU')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'pveQemuMemoryPanel',
|
||||||
|
insideWizard: true,
|
||||||
|
title: gettext('Memory')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xtype: 'pveQemuNetworkInputPanel',
|
||||||
|
bind: {
|
||||||
|
nodename: '{nodename}'
|
||||||
|
},
|
||||||
|
title: gettext('Network'),
|
||||||
|
insideWizard: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: gettext('Confirm'),
|
||||||
|
layout: 'fit',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
xtype: 'grid',
|
||||||
|
store: {
|
||||||
|
model: 'KeyValue',
|
||||||
|
sorters: [{
|
||||||
|
property : 'key',
|
||||||
|
direction: 'ASC'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{header: 'Key', width: 150, dataIndex: 'key'},
|
||||||
|
{header: 'Value', flex: 1, dataIndex: 'value'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
listeners: {
|
||||||
|
show: function(panel) {
|
||||||
|
var kv = this.up('window').getValues();
|
||||||
|
var data = [];
|
||||||
|
Ext.Object.each(kv, function(key, value) {
|
||||||
|
if (key === 'delete') { // ignore
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
data.push({ key: key, value: value });
|
||||||
|
});
|
||||||
|
|
||||||
me.callParent();
|
var summarystore = panel.down('grid').getStore();
|
||||||
}
|
summarystore.suspendEvents();
|
||||||
|
summarystore.removeAll();
|
||||||
|
summarystore.add(data);
|
||||||
|
summarystore.sort();
|
||||||
|
summarystore.resumeEvents();
|
||||||
|
summarystore.fireEvent('refresh');
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSubmit: function() {
|
||||||
|
var wizard = this.up('window');
|
||||||
|
var kv = wizard.getValues();
|
||||||
|
delete kv['delete'];
|
||||||
|
|
||||||
|
var nodename = kv.nodename;
|
||||||
|
delete kv.nodename;
|
||||||
|
|
||||||
|
Proxmox.Utils.API2Request({
|
||||||
|
url: '/nodes/' + nodename + '/qemu',
|
||||||
|
waitMsgTarget: wizard,
|
||||||
|
method: 'POST',
|
||||||
|
params: kv,
|
||||||
|
success: function(response){
|
||||||
|
wizard.close();
|
||||||
|
},
|
||||||
|
failure: function(response, opts) {
|
||||||
|
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user