ui/sdn: better spelling and code cleanup

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2020-04-22 15:06:30 +02:00
parent 78fcb4947d
commit 43d65515e0
6 changed files with 199 additions and 215 deletions

View File

@ -1,6 +1,5 @@
Ext.define('PVE.sdn.ControllerView', { Ext.define('PVE.sdn.ControllerView', {
extend: 'Ext.grid.GridPanel', extend: 'Ext.grid.GridPanel',
alias: ['widget.pveSDNControllerView'], alias: ['widget.pveSDNControllerView'],
stateful: true, stateful: true,

View File

@ -58,12 +58,12 @@ Ext.define('PVE.sdn.StatusView', {
}, },
columns: [ columns: [
{ {
header: gettext('sdn'), header: 'SDN',
width: 80, width: 80,
dataIndex: 'sdn' dataIndex: 'sdn'
}, },
{ {
header: gettext('node'), header: gettext('Node'),
width: 80, width: 80,
dataIndex: 'node' dataIndex: 'node'
}, },

View File

@ -1,10 +1,9 @@
Ext.define('PVE.sdn.VnetInputPanel', { Ext.define('PVE.sdn.VnetInputPanel', {
extend: 'Proxmox.panel.InputPanel', extend: 'Proxmox.panel.InputPanel',
mixins: ['Proxmox.Mixin.CBind'],
vnet: undefined,
onGetValues: function(values) { onGetValues: function(values) {
var me = this; let me = this;
if (me.isCreate) { if (me.isCreate) {
values.type = 'vnet'; values.type = 'vnet';
@ -13,11 +12,9 @@ Ext.define('PVE.sdn.VnetInputPanel', {
if (!values.ipv6) { if (!values.ipv6) {
delete values.ipv6; delete values.ipv6;
} }
if (!values.ipv4) { if (!values.ipv4) {
delete values.ipv4; delete values.ipv4;
} }
if (!values.mac) { if (!values.mac) {
delete values.mac; delete values.mac;
} }
@ -25,44 +22,42 @@ Ext.define('PVE.sdn.VnetInputPanel', {
return values; return values;
}, },
initComponent : function() { items: [
var me = this;
me.items = [
{ {
xtype: me.isCreate ? 'proxmoxtextfield' : 'displayfield', xtype: 'pmxDisplayEditField',
name: 'vnet', name: 'vnet',
value: me.vnet, cbind: {
editable: '{isCreate}',
},
maxLength: 10, maxLength: 10,
allowBlank: false, allowBlank: false,
fieldLabel: gettext('Name') fieldLabel: gettext('Name'),
}, },
{ {
xtype: 'textfield', xtype: 'textfield',
name: 'alias', name: 'alias',
fieldLabel: gettext('alias'), fieldLabel: gettext('Alias'),
allowBlank: true allowBlank: true,
}, },
{ {
xtype: 'pveSDNZoneSelector', xtype: 'pveSDNZoneSelector',
fieldLabel: gettext('Zone'), fieldLabel: gettext('Zone'),
name: 'zone', name: 'zone',
value: '', value: '',
allowBlank: false allowBlank: false,
}, },
{ {
xtype: 'proxmoxintegerfield', xtype: 'proxmoxintegerfield',
name: 'tag', name: 'tag',
minValue: 1, minValue: 1,
maxValue: 16000000, maxValue: 16000000,
fieldLabel: gettext('tag'), fieldLabel: gettext('Tag'),
allowBlank: false allowBlank: false,
}, },
{ {
xtype: 'textfield', xtype: 'textfield',
name: 'ipv4', name: 'ipv4',
vtype: 'IPCIDRAddress', vtype: 'IPCIDRAddress',
fieldLabel: gettext('ipv4'),
fieldLabel: 'IPv4/CIDR', // do not localize fieldLabel: 'IPv4/CIDR', // do not localize
skipEmptyText: true, skipEmptyText: true,
allowBlank: true, allowBlank: true,
@ -78,27 +73,26 @@ Ext.define('PVE.sdn.VnetInputPanel', {
{ {
xtype: 'textfield', xtype: 'textfield',
name: 'mac', name: 'mac',
fieldLabel: gettext('MAC address'), fieldLabel: gettext('MAC Address'),
vtype: 'MacAddress', vtype: 'MacAddress',
skipEmptyText: true, skipEmptyText: true,
allowBlank: true, allowBlank: true,
emptyText: 'auto' emptyText: 'auto',
}, },
]; ],
me.callParent();
}
}); });
Ext.define('PVE.sdn.VnetEdit', { Ext.define('PVE.sdn.VnetEdit', {
extend: 'Proxmox.window.Edit', extend: 'Proxmox.window.Edit',
subject: gettext('VNet'),
vnet: undefined, vnet: undefined,
initComponent : function() { initComponent: function() {
var me = this; var me = this;
me.isCreate = !me.vnet; me.isCreate = me.vnet === undefined;
if (me.isCreate) { if (me.isCreate) {
me.url = '/api2/extjs/cluster/sdn/vnets'; me.url = '/api2/extjs/cluster/sdn/vnets';
@ -108,14 +102,14 @@ Ext.define('PVE.sdn.VnetEdit', {
me.method = 'PUT'; me.method = 'PUT';
} }
var ipanel = Ext.create('PVE.sdn.VnetInputPanel', { let ipanel = Ext.create('PVE.sdn.VnetInputPanel', {
isCreate: me.isCreate, isCreate: me.isCreate,
vnet: me.vnet
}); });
Ext.apply(me, { Ext.apply(me, {
subject: gettext('Vnet'), items: [
items: [ ipanel ] ipanel,
],
}); });
me.callParent(); me.callParent();
@ -123,11 +117,10 @@ Ext.define('PVE.sdn.VnetEdit', {
if (!me.isCreate) { if (!me.isCreate) {
me.load({ me.load({
success: function(response, options) { success: function(response, options) {
var values = response.result.data; let values = response.result.data;
ipanel.setValues(values); ipanel.setValues(values);
} },
}); });
} }
} },
}); });

View File

@ -7,9 +7,9 @@ Ext.define('PVE.sdn.VnetView', {
stateId: 'grid-sdn-vnet', stateId: 'grid-sdn-vnet',
initComponent : function() { initComponent : function() {
var me = this; let me = this;
var store = new Ext.data.Store({ let store = new Ext.data.Store({
model: 'pve-sdn-vnet', model: 'pve-sdn-vnet',
proxy: { proxy: {
type: 'proxmox', type: 'proxmox',
@ -20,31 +20,28 @@ Ext.define('PVE.sdn.VnetView', {
order: 'DESC' order: 'DESC'
} }
}); });
let reload = () => store.load();
var reload = function() { let sm = Ext.create('Ext.selection.RowModel', {});
store.load();
};
var sm = Ext.create('Ext.selection.RowModel', {}); let run_editor = function() {
let rec = sm.getSelection()[0];
var run_editor = function() { let win = Ext.create('PVE.sdn.VnetEdit',{
var rec = sm.getSelection()[0]; autoShow: true,
vnet: rec.data.vnet,
var win = Ext.create('PVE.sdn.VnetEdit',{
vnet: rec.data.vnet
}); });
win.on('destroy', reload); win.on('destroy', reload);
win.show();
}; };
var edit_btn = new Proxmox.button.Button({ let edit_btn = new Proxmox.button.Button({
text: gettext('Edit'), text: gettext('Edit'),
disabled: true, disabled: true,
selModel: sm, selModel: sm,
handler: run_editor handler: run_editor,
}); });
var remove_btn = Ext.create('Proxmox.button.StdRemoveButton', { let remove_btn = Ext.create('Proxmox.button.StdRemoveButton', {
selModel: sm, selModel: sm,
baseurl: '/cluster/sdn/vnets/', baseurl: '/cluster/sdn/vnets/',
callback: reload callback: reload
@ -61,11 +58,11 @@ Ext.define('PVE.sdn.VnetView', {
{ {
text: gettext('Create'), text: gettext('Create'),
handler: function() { handler: function() {
var win = Ext.create('PVE.sdn.VnetEdit',{ let win = Ext.create('PVE.sdn.VnetEdit', {
type: 'vnet' autoShow: true,
type: 'vnet',
}); });
win.on('destroy', reload); win.on('destroy', reload);
win.show();
} }
}, },
remove_btn, remove_btn,
@ -86,55 +83,46 @@ Ext.define('PVE.sdn.VnetView', {
}); });
} }
}, },
], ],
columns: [ columns: [
{ {
header: 'ID', header: 'ID',
flex: 2, flex: 2,
sortable: true,
dataIndex: 'vnet' dataIndex: 'vnet'
}, },
{ {
header: gettext('alias'), header: gettext('Alias'),
flex: 1, flex: 1,
sortable: true,
dataIndex: 'alias', dataIndex: 'alias',
}, },
{ {
header: gettext('zone'), header: gettext('Zone'),
flex: 1, flex: 1,
sortable: true,
dataIndex: 'zone', dataIndex: 'zone',
}, },
{ {
header: gettext('tag'), header: gettext('Tag'),
flex: 1, flex: 1,
sortable: true,
dataIndex: 'tag', dataIndex: 'tag',
}, },
{ {
header: gettext('ipv4'), header: 'IPv4/CIDR',
flex: 1, flex: 1,
sortable: true,
dataIndex: 'ipv4', dataIndex: 'ipv4',
}, },
{ {
header: gettext('ipv6'), header: 'IPv6/CIDR',
flex: 1, flex: 1,
sortable: true,
dataIndex: 'ipv6', dataIndex: 'ipv6',
}, },
{ {
header: gettext('mac'), header: 'MAC',
flex: 1, flex: 1,
sortable: true,
dataIndex: 'mac', dataIndex: 'mac',
}, },
{ {
header: gettext('mtu'), header: 'MTU',
flex: 1, flex: 1,
sortable: true,
dataIndex: 'mtu', dataIndex: 'mtu',
}, },
], ],
@ -151,7 +139,15 @@ Ext.define('PVE.sdn.VnetView', {
Ext.define('pve-sdn-vnet', { Ext.define('pve-sdn-vnet', {
extend: 'Ext.data.Model', extend: 'Ext.data.Model',
fields: [ fields: [
'type' 'alias',
'ipv4',
'ipv6',
'mac',
'mtu',
'tag',
'type',
'vnet',
'zone',
], ],
idProperty: 'vnet' idProperty: 'vnet'
}); });

View File

@ -1,6 +1,5 @@
Ext.define('PVE.sdn.ZoneContentView', { Ext.define('PVE.sdn.ZoneContentView', {
extend: 'Ext.grid.GridPanel', extend: 'Ext.grid.GridPanel',
alias: 'widget.pveSDNZoneContentView', alias: 'widget.pveSDNZoneContentView',
stateful: true, stateful: true,
@ -57,7 +56,7 @@ Ext.define('PVE.sdn.ZoneContentView', {
], ],
columns: [ columns: [
{ {
header: gettext('Vnet'), header: 'VNet',
flex: 1, flex: 1,
sortable: true, sortable: true,
dataIndex: 'vnet' dataIndex: 'vnet'
@ -68,7 +67,7 @@ Ext.define('PVE.sdn.ZoneContentView', {
dataIndex: 'status', dataIndex: 'status',
}, },
{ {
header: gettext('Status details'), header: gettext('Details'),
width: 20, width: 20,
dataIndex: 'statusmsg', dataIndex: 'statusmsg',
}, },

View File

@ -7,7 +7,7 @@ Ext.define('PVE.sdn.ZoneView', {
stateId: 'grid-sdn-zone', stateId: 'grid-sdn-zone',
createSDNEditWindow: function(type, sid) { createSDNEditWindow: function(type, sid) {
var schema = PVE.Utils.sdnzoneSchema[type]; let schema = PVE.Utils.sdnzoneSchema[type];
if (!schema || !schema.ipanel) { if (!schema || !schema.ipanel) {
throw "no editor registered for zone type: " + type; throw "no editor registered for zone type: " + type;
} }
@ -24,9 +24,9 @@ Ext.define('PVE.sdn.ZoneView', {
}, },
initComponent : function() { initComponent : function() {
var me = this; let me = this;
var store = new Ext.data.Store({ let store = new Ext.data.Store({
model: 'pve-sdn-zone', model: 'pve-sdn-zone',
proxy: { proxy: {
type: 'proxmox', type: 'proxmox',
@ -38,45 +38,45 @@ Ext.define('PVE.sdn.ZoneView', {
}, },
}); });
var reload = function() { let reload = function() {
store.load(); store.load();
}; };
var sm = Ext.create('Ext.selection.RowModel', {}); let sm = Ext.create('Ext.selection.RowModel', {});
var run_editor = function() { let run_editor = function() {
var rec = sm.getSelection()[0]; let rec = sm.getSelection()[0];
if (!rec) { if (!rec) {
return; return;
} }
var type = rec.data.type, let type = rec.data.type,
zone = rec.data.zone; zone = rec.data.zone;
me.createSDNEditWindow(type, zone); me.createSDNEditWindow(type, zone);
}; };
var edit_btn = new Proxmox.button.Button({ let edit_btn = new Proxmox.button.Button({
text: gettext('Edit'), text: gettext('Edit'),
disabled: true, disabled: true,
selModel: sm, selModel: sm,
handler: run_editor handler: run_editor
}); });
var remove_btn = Ext.create('Proxmox.button.StdRemoveButton', { let remove_btn = Ext.create('Proxmox.button.StdRemoveButton', {
selModel: sm, selModel: sm,
baseurl: '/cluster/sdn/zones/', baseurl: '/cluster/sdn/zones/',
callback: reload callback: reload
}); });
// else we cannot dynamically generate the add menu handlers // else we cannot dynamically generate the add menu handlers
var addHandleGenerator = function(type) { let addHandleGenerator = function(type) {
return function() { me.createSDNEditWindow(type); }; return function() { me.createSDNEditWindow(type); };
}; };
var addMenuItems = [], type; let addMenuItems = [], type;
/*jslint forin: true */ /*jslint forin: true */
for (type in PVE.Utils.sdnzoneSchema) { for (type in PVE.Utils.sdnzoneSchema) {
var zone = PVE.Utils.sdnzoneSchema[type]; let zone = PVE.Utils.sdnzoneSchema[type];
if (zone.hideAdd) { if (zone.hideAdd) {
continue; continue;
} }
@ -124,20 +124,17 @@ Ext.define('PVE.sdn.ZoneView', {
{ {
header: 'ID', header: 'ID',
flex: 2, flex: 2,
sortable: true,
dataIndex: 'zone' dataIndex: 'zone'
}, },
{ {
header: gettext('Type'), header: gettext('Type'),
flex: 1, flex: 1,
sortable: true,
dataIndex: 'type', dataIndex: 'type',
renderer: PVE.Utils.format_sdnzone_type renderer: PVE.Utils.format_sdnzone_type
}, },
{ {
header: gettext('Nodes'), header: gettext('Nodes'),
flex: 1, flex: 3,
sortable: true,
dataIndex: 'nodes', dataIndex: 'nodes',
}, },
], ],