use NetworkView/NetworkEdit from widget toolkit

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Reviewed-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Dominik Csapak 2018-01-15 15:17:54 +01:00
parent 939edd73c9
commit 13ff8209f8
4 changed files with 3 additions and 679 deletions

View File

@ -123,8 +123,6 @@ JSSRC= \
node/StatusView.js \
node/Summary.js \
node/ServiceView.js \
node/NetworkEdit.js \
node/NetworkView.js \
node/Tasks.js \
node/Subscription.js \
node/APT.js \

View File

@ -165,7 +165,9 @@ Ext.define('PVE.node.Config', {
iconCls: 'fa fa-exchange',
itemId: 'network',
groups: ['services'],
xtype: 'pveNodeNetworkView'
nodename: nodename,
onlineHelp: 'sysadmin_network_configuration',
xtype: 'proxmoxNodeNetworkView'
},
{
title: gettext('DNS'),

View File

@ -1,325 +0,0 @@
Ext.define('PVE.node.NetworkEdit', {
extend: 'PVE.window.Edit',
alias: ['widget.pveNodeNetworkEdit'],
initComponent : function() {
var me = this;
var nodename = me.pveSelNode.data.node;
if (!nodename) {
throw "no node name specified";
}
if (!me.iftype) {
throw "no network device type specified";
}
me.isCreate = !me.iface;
var iface_vtype;
if (me.iftype === 'bridge') {
iface_vtype = 'BridgeName';
} else if (me.iftype === 'bond') {
iface_vtype = 'BondName';
} else if (me.iftype === 'eth' && !me.isCreate) {
iface_vtype = 'InterfaceName';
} else if (me.iftype === 'vlan' && !me.isCreate) {
iface_vtype = 'InterfaceName';
} else if (me.iftype === 'OVSBridge') {
iface_vtype = 'BridgeName';
} else if (me.iftype === 'OVSBond') {
iface_vtype = 'BondName';
} else if (me.iftype === 'OVSIntPort') {
iface_vtype = 'InterfaceName';
} else if (me.iftype === 'OVSPort') {
iface_vtype = 'InterfaceName';
} else {
console.log(me.iftype);
throw "unknown network device type specified";
}
me.subject = PVE.Utils.render_network_iface_type(me.iftype);
var column2 = [];
if (!(me.iftype === 'OVSIntPort' || me.iftype === 'OVSPort' ||
me.iftype === 'OVSBond')) {
column2.push({
xtype: 'pvecheckbox',
fieldLabel: gettext('Autostart'),
name: 'autostart',
uncheckedValue: 0,
checked: me.isCreate ? true : undefined
});
}
if (me.iftype === 'bridge') {
column2.push({
xtype: 'pvecheckbox',
fieldLabel: gettext('VLAN aware'),
name: 'bridge_vlan_aware',
deleteEmpty: !me.isCreate
});
column2.push({
xtype: 'textfield',
fieldLabel: gettext('Bridge ports'),
name: 'bridge_ports'
});
} else if (me.iftype === 'OVSBridge') {
column2.push({
xtype: 'textfield',
fieldLabel: gettext('Bridge ports'),
name: 'ovs_ports'
});
column2.push({
xtype: 'textfield',
fieldLabel: gettext('OVS options'),
name: 'ovs_options'
});
} else if (me.iftype === 'OVSPort' || me.iftype === 'OVSIntPort') {
column2.push({
xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
fieldLabel: PVE.Utils.render_network_iface_type('OVSBridge'),
allowBlank: false,
nodename: nodename,
bridgeType: 'OVSBridge',
name: 'ovs_bridge'
});
column2.push({
xtype: 'pveVlanField',
deleteEmpty: !me.isCreate,
name: 'ovs_tag',
value: ''
});
column2.push({
xtype: 'textfield',
fieldLabel: gettext('OVS options'),
name: 'ovs_options'
});
} else if (me.iftype === 'bond') {
column2.push({
xtype: 'textfield',
fieldLabel: gettext('Slaves'),
name: 'slaves'
});
var policySelector = Ext.createWidget('bondPolicySelector', {
fieldLabel: gettext('Hash policy'),
name: 'bond_xmit_hash_policy',
deleteEmpty: !me.isCreate,
disabled: true
});
column2.push({
xtype: 'bondModeSelector',
fieldLabel: gettext('Mode'),
name: 'bond_mode',
value: me.isCreate ? 'balance-rr' : undefined,
listeners: {
change: function(f, value) {
if (value === 'balance-xor' ||
value === '802.3ad') {
policySelector.setDisabled(false);
} else {
policySelector.setDisabled(true);
policySelector.setValue('');
}
}
},
allowBlank: false
});
column2.push(policySelector);
} else if (me.iftype === 'OVSBond') {
column2.push({
xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
fieldLabel: PVE.Utils.render_network_iface_type('OVSBridge'),
allowBlank: false,
nodename: nodename,
bridgeType: 'OVSBridge',
name: 'ovs_bridge'
});
column2.push({
xtype: 'pveVlanField',
deleteEmpty: !me.isCreate,
name: 'ovs_tag',
value: ''
});
column2.push({
xtype: 'textfield',
fieldLabel: gettext('OVS options'),
name: 'ovs_options'
});
}
column2.push({
xtype: 'textfield',
fieldLabel: gettext('Comment'),
allowBlank: true,
nodename: nodename,
name: 'comments'
});
var url;
var method;
if (me.isCreate) {
url = "/api2/extjs/nodes/" + nodename + "/network";
method = 'POST';
} else {
url = "/api2/extjs/nodes/" + nodename + "/network/" + me.iface;
method = 'PUT';
}
var column1 = [
{
xtype: 'hiddenfield',
name: 'type',
value: me.iftype
},
{
xtype: me.isCreate ? 'textfield' : 'displayfield',
fieldLabel: gettext('Name'),
name: 'iface',
value: me.iface,
vtype: iface_vtype,
allowBlank: false
}
];
if (me.iftype === 'OVSBond') {
column1.push(
{
xtype: 'bondModeSelector',
fieldLabel: gettext('Mode'),
name: 'bond_mode',
openvswitch: true,
value: me.isCreate ? 'active-backup' : undefined,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: gettext('Slaves'),
name: 'ovs_bonds'
}
);
} else {
column1.push(
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('IP address'),
vtype: 'IPAddress',
name: 'address'
},
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('Subnet mask'),
vtype: 'IPAddress',
name: 'netmask',
validator: function(value) {
/*jslint confusion: true */
if (!me.items) {
return true;
}
var address = me.down('field[name=address]').getValue();
if (value !== '') {
if (address === '') {
return "Subnet mask requires option 'IP address'";
}
} else {
if (address !== '') {
return "Option 'IP address' requires a subnet mask";
}
}
return true;
}
},
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('Gateway'),
vtype: 'IPAddress',
name: 'gateway'
},
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('IPv6 address'),
vtype: 'IP6Address',
name: 'address6'
},
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('Prefix length'),
vtype: 'IP6PrefixLength',
name: 'netmask6',
value: '',
allowBlank: true,
validator: function(value) {
/*jslint confusion: true */
if (!me.items) {
return true;
}
var address = me.down('field[name=address6]').getValue();
if (value !== '') {
if (address === '') {
return "IPv6 prefix length requires option 'IPv6 address'";
}
} else {
if (address !== '') {
return "Option 'IPv6 address' requires an IPv6 prefix length";
}
}
return true;
}
},
{
xtype: 'proxmoxtextfield',
deleteEmpty: !me.isCreate,
fieldLabel: gettext('Gateway'),
vtype: 'IP6Address',
name: 'gateway6'
}
);
}
Ext.applyIf(me, {
url: url,
method: method,
items: {
xtype: 'inputpanel',
column1: column1,
column2: column2
}
});
me.callParent();
if (me.isCreate) {
me.down('field[name=iface]').setValue(me.iface_default);
} else {
me.load({
success: function(response, options) {
var data = response.result.data;
if (data.type !== me.iftype) {
var msg = "Got unexpected device type";
Ext.Msg.alert(gettext('Error'), msg, function() {
me.close();
});
return;
}
me.setValues(data);
me.isValid(); // trigger validation
}
});
}
}
});

View File

@ -1,351 +0,0 @@
Ext.define('PVE.node.NetworkView', {
extend: 'Ext.panel.Panel',
alias: ['widget.pveNodeNetworkView'],
onlineHelp: 'sysadmin_network_configuration',
initComponent : function() {
var me = this;
var nodename = me.pveSelNode.data.node;
if (!nodename) {
throw "no node name specified";
}
var store = Ext.create('Ext.data.Store', {
model: 'pve-networks',
proxy: {
type: 'pve',
url: "/api2/json/nodes/" + nodename + "/network"
},
sorters: [
{
property : 'iface',
direction: 'ASC'
}
]
});
var reload = function() {
var changeitem = me.down('#changes');
PVE.Utils.API2Request({
url: '/nodes/' + nodename + '/network',
failure: function(response, opts) {
changeitem.update(gettext('Error') + ': ' + response.htmlStatus);
store.loadData({});
},
success: function(response, opts) {
var result = Ext.decode(response.responseText);
store.loadData(result.data);
var changes = result.changes;
if (changes === undefined || changes === '') {
changes = gettext("No changes");
}
changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
}
});
};
var run_editor = function() {
var grid = me.down('gridpanel');
var sm = grid.getSelectionModel();
var rec = sm.getSelection()[0];
if (!rec) {
return;
}
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iface: rec.data.iface,
iftype: rec.data.type
});
win.show();
win.on('destroy', reload);
};
var edit_btn = new Ext.Button({
text: gettext('Edit'),
disabled: true,
handler: run_editor
});
var del_btn = new Ext.Button({
text: gettext('Remove'),
disabled: true,
handler: function(){
var grid = me.down('gridpanel');
var sm = grid.getSelectionModel();
var rec = sm.getSelection()[0];
if (!rec) {
return;
}
var iface = rec.data.iface;
PVE.Utils.API2Request({
url: '/nodes/' + nodename + '/network/' + iface,
method: 'DELETE',
waitMsgTarget: me,
callback: function() {
reload();
},
failure: function(response, opts) {
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
}
});
}
});
var set_button_status = function() {
var grid = me.down('gridpanel');
var sm = grid.getSelectionModel();
var rec = sm.getSelection()[0];
edit_btn.setDisabled(!rec);
del_btn.setDisabled(!rec);
};
PVE.Utils.monStoreErrors(me, store);
var render_ports = function(value, metaData, record) {
if (value === 'bridge') {
return record.data.bridge_ports;
} else if (value === 'bond') {
return record.data.slaves;
} else if (value === 'OVSBridge') {
return record.data.ovs_ports;
} else if (value === 'OVSBond') {
return record.data.ovs_bonds;
}
};
var find_next_iface_id = function(prefix) {
var next;
for (next = 0; next <= 9999; next++) {
if (!store.getById(prefix + next.toString())) {
break;
}
}
return prefix + next.toString();
};
Ext.apply(me, {
layout: 'border',
tbar: [
{
text: gettext('Create'),
menu: new Ext.menu.Menu({
plain: true,
items: [
{
text: PVE.Utils.render_network_iface_type('bridge'),
handler: function() {
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iftype: 'bridge',
iface_default: find_next_iface_id('vmbr')
});
win.on('destroy', reload);
win.show();
}
},
{
text: PVE.Utils.render_network_iface_type('bond'),
handler: function() {
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iftype: 'bond',
iface_default: find_next_iface_id('bond')
});
win.on('destroy', reload);
win.show();
}
}, '-',
{
text: PVE.Utils.render_network_iface_type('OVSBridge'),
handler: function() {
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iftype: 'OVSBridge',
iface_default: find_next_iface_id('vmbr')
});
win.on('destroy', reload);
win.show();
}
},
{
text: PVE.Utils.render_network_iface_type('OVSBond'),
handler: function() {
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iftype: 'OVSBond',
iface_default: find_next_iface_id('bond')
});
win.on('destroy', reload);
win.show();
}
},
{
text: PVE.Utils.render_network_iface_type('OVSIntPort'),
handler: function() {
var win = Ext.create('PVE.node.NetworkEdit', {
pveSelNode: me.pveSelNode,
iftype: 'OVSIntPort'
});
win.on('destroy', reload);
win.show();
}
}
]
})
}, ' ',
{
text: gettext('Revert'),
handler: function() {
PVE.Utils.API2Request({
url: '/nodes/' + nodename + '/network',
method: 'DELETE',
waitMsgTarget: me,
callback: function() {
reload();
},
failure: function(response, opts) {
Ext.Msg.alert(gettext('Error'), response.htmlStatus);
}
});
}
},
edit_btn,
del_btn
],
items: [
{
xtype: 'gridpanel',
stateful: true,
stateId: 'grid-node-network',
store: store,
region: 'center',
border: false,
columns: [
{
header: gettext('Name'),
width: 100,
sortable: true,
dataIndex: 'iface'
},
{
header: gettext('Type'),
width: 100,
sortable: true,
renderer: PVE.Utils.render_network_iface_type,
dataIndex: 'type'
},
{
xtype: 'booleancolumn',
header: gettext('Active'),
width: 80,
sortable: true,
dataIndex: 'active',
trueText: 'Yes',
falseText: 'No',
undefinedText: 'No'
},
{
xtype: 'booleancolumn',
header: gettext('Autostart'),
width: 80,
sortable: true,
dataIndex: 'autostart',
trueText: 'Yes',
falseText: 'No',
undefinedText: 'No'
},
{
header: gettext('Ports/Slaves'),
dataIndex: 'type',
renderer: render_ports
},
{
header: gettext('IP address'),
sortable: true,
dataIndex: 'address',
renderer: function(value, metaData, rec) {
if (rec.data.address && rec.data.address6) {
return rec.data.address + "<br>"
+ rec.data.address6 + '/' + rec.data.netmask6;
} else if (rec.data.address6) {
return rec.data.address6 + '/' + rec.data.netmask6;
} else {
return rec.data.address;
}
}
},
{
header: gettext('Subnet mask'),
sortable: true,
dataIndex: 'netmask'
},
{
header: gettext('Gateway'),
sortable: true,
dataIndex: 'gateway',
renderer: function(value, metaData, rec) {
if (rec.data.gateway && rec.data.gateway6) {
return rec.data.gateway + "<br>" + rec.data.gateway6;
} else if (rec.data.gateway6) {
return rec.data.gateway6;
} else {
return rec.data.gateway;
}
}
},
{
header: gettext('Comment'),
dataIndex: 'comments',
renderer: Ext.String.htmlEncode
}
],
listeners: {
selectionchange: set_button_status,
itemdblclick: run_editor
}
},
{
border: false,
region: 'south',
autoScroll: true,
itemId: 'changes',
tbar: [
gettext('Pending changes') + ' (' +
gettext('Please reboot to activate changes') + ')'
],
split: true,
bodyPadding: 5,
flex: 0.6,
html: gettext("No changes")
}
],
listeners: {
activate: reload
}
});
me.callParent();
}
}, function() {
Ext.define('pve-networks', {
extend: 'Ext.data.Model',
fields: [
'iface', 'type', 'active', 'autostart',
'bridge_ports', 'slaves',
'address', 'netmask', 'gateway',
'address6', 'netmask6', 'gateway6',
'comments'
],
idProperty: 'iface'
});
});