pve-manager/www/manager6/qemu/CreateWizard.js
Dominik Csapak ca97f6301a ui: wizards: allow adding tags in the qemu/lxc create wizard
in the general tab in the advanced section.

For that to work, we introduce a new option for the TagEditContainer
named 'editOnly', which controls now the cancel/finish buttons,
automatically enter edit mode and disable enter/escape keypresses.

We also prevent now the loading of tags while in edit mode, so the tags
don't change while editing (this can be jarring and unexpected).

Then we wrap that all in a FieldSet that implements the Field mixin, so
we can easily use that in the wizard. There we set a maxHeight so that
the field can grow so that it still fits in the wizard.

To properly align the input with the '+' button, we have to add a custom
css class there. (In the hbox we could set the alignment, but this is
not possible in the 'column' layout)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
2023-11-06 17:02:08 +01:00

272 lines
5.2 KiB
JavaScript

Ext.define('PVE.qemu.CreateWizard', {
extend: 'PVE.window.Wizard',
alias: 'widget.pveQemuCreateWizard',
mixins: ['Proxmox.Mixin.CBind'],
viewModel: {
data: {
nodename: '',
current: {
scsihw: '',
},
},
formulas: {
cgroupMode: function(get) {
const nodeInfo = PVE.data.ResourceStore.getNodes().find(
node => node.node === get('nodename'),
);
return nodeInfo ? nodeInfo['cgroup-mode'] : 2;
},
},
},
cbindData: {
nodename: undefined,
},
subject: gettext('Virtual Machine'),
items: [
{
xtype: 'inputpanel',
title: gettext('General'),
onlineHelp: 'qm_general_settings',
column1: [
{
xtype: 'pveNodeSelector',
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: [
{
xtype: 'pvePoolSelector',
fieldLabel: gettext('Resource Pool'),
name: 'pool',
value: '',
allowBlank: true,
},
],
advancedColumn1: [
{
xtype: 'proxmoxcheckbox',
name: 'onboot',
uncheckedValue: 0,
defaultValue: 0,
deleteDefaultValue: true,
fieldLabel: gettext('Start at boot'),
},
],
advancedColumn2: [
{
xtype: 'textfield',
name: 'order',
defaultValue: '',
emptyText: 'any',
labelWidth: 120,
fieldLabel: gettext('Start/Shutdown order'),
},
{
xtype: 'textfield',
name: 'up',
defaultValue: '',
emptyText: 'default',
labelWidth: 120,
fieldLabel: gettext('Startup delay'),
},
{
xtype: 'textfield',
name: 'down',
defaultValue: '',
emptyText: 'default',
labelWidth: 120,
fieldLabel: gettext('Shutdown timeout'),
},
],
advancedColumnB: [
{
xtype: 'pveTagFieldSet',
name: 'tags',
maxHeight: 150,
},
],
onGetValues: function(values) {
['name', 'pool', 'onboot', 'agent'].forEach(function(field) {
if (!values[field]) {
delete values[field];
}
});
var res = PVE.Parser.printStartup({
order: values.order,
up: values.up,
down: values.down,
});
if (res) {
values.startup = res;
}
delete values.order;
delete values.up;
delete values.down;
return values;
},
},
{
xtype: 'container',
layout: 'hbox',
defaults: {
flex: 1,
padding: '0 10',
},
title: gettext('OS'),
items: [
{
xtype: 'pveQemuCDInputPanel',
bind: {
nodename: '{nodename}',
},
confid: 'ide2',
insideWizard: true,
},
{
xtype: 'pveQemuOSTypePanel',
insideWizard: true,
},
],
},
{
xtype: 'pveQemuSystemPanel',
title: gettext('System'),
isCreate: true,
insideWizard: true,
},
{
xtype: 'pveMultiHDPanel',
bind: {
nodename: '{nodename}',
},
title: gettext('Disks'),
},
{
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' },
],
},
],
dockedItems: [
{
xtype: 'proxmoxcheckbox',
name: 'start',
dock: 'bottom',
margin: '5 0 0 0',
boxLabel: gettext('Start after created'),
},
],
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 });
});
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);
},
});
},
},
],
});