From 68dc9092207f8e77fffc7fc77252316b8d23ba5a Mon Sep 17 00:00:00 2001 From: Thomas Lamprecht Date: Wed, 22 Apr 2020 15:06:30 +0200 Subject: [PATCH] ui/sdn: better spelling and code cleanup Signed-off-by: Thomas Lamprecht --- www/manager6/sdn/ControllerView.js | 33 +++--- www/manager6/sdn/StatusView.js | 34 +++--- www/manager6/sdn/VnetEdit.js | 165 +++++++++++++--------------- www/manager6/sdn/VnetView.js | 114 ++++++++++--------- www/manager6/sdn/ZoneContentView.js | 5 +- www/manager6/sdn/ZoneView.js | 63 +++++------ 6 files changed, 199 insertions(+), 215 deletions(-) diff --git a/www/manager6/sdn/ControllerView.js b/www/manager6/sdn/ControllerView.js index 68a1bb5b..0d32c282 100644 --- a/www/manager6/sdn/ControllerView.js +++ b/www/manager6/sdn/ControllerView.js @@ -1,6 +1,5 @@ Ext.define('PVE.sdn.ControllerView', { extend: 'Ext.grid.GridPanel', - alias: ['widget.pveSDNControllerView'], stateful: true, @@ -103,22 +102,22 @@ Ext.define('PVE.sdn.ControllerView', { }, remove_btn, edit_btn, - { - text: gettext('Revert'), - handler: function() { - Proxmox.Utils.API2Request({ - url: '/cluster/sdn/controllers/', - method: 'DELETE', - waitMsgTarget: me, - callback: function() { - reload(); - }, - failure: function(response, opts) { - Ext.Msg.alert(gettext('Error'), response.htmlStatus); - } - }); - } - }, + { + text: gettext('Revert'), + handler: function() { + Proxmox.Utils.API2Request({ + url: '/cluster/sdn/controllers/', + method: 'DELETE', + waitMsgTarget: me, + callback: function() { + reload(); + }, + failure: function(response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + } + }); + } + }, ], columns: [ { diff --git a/www/manager6/sdn/StatusView.js b/www/manager6/sdn/StatusView.js index b0fc903e..6fb377b7 100644 --- a/www/manager6/sdn/StatusView.js +++ b/www/manager6/sdn/StatusView.js @@ -38,32 +38,32 @@ Ext.define('PVE.sdn.StatusView', { Ext.apply(me, { store: store, stateful: false, - tbar: [ - { - text: gettext('Apply'), - handler: function() { - Proxmox.Utils.API2Request({ - url: '/cluster/sdn/', - method: 'PUT', - waitMsgTarget: me, - failure: function(response, opts) { - Ext.Msg.alert(gettext('Error'), response.htmlStatus); - } - }); - } - }, - ], + tbar: [ + { + text: gettext('Apply'), + handler: function() { + Proxmox.Utils.API2Request({ + url: '/cluster/sdn/', + method: 'PUT', + waitMsgTarget: me, + failure: function(response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + } + }); + } + }, + ], viewConfig: { trackOver: false }, columns: [ { - header: gettext('sdn'), + header: 'SDN', width: 80, dataIndex: 'sdn' }, { - header: gettext('node'), + header: gettext('Node'), width: 80, dataIndex: 'node' }, diff --git a/www/manager6/sdn/VnetEdit.js b/www/manager6/sdn/VnetEdit.js index afe89264..a54b3d7d 100644 --- a/www/manager6/sdn/VnetEdit.js +++ b/www/manager6/sdn/VnetEdit.js @@ -1,10 +1,9 @@ Ext.define('PVE.sdn.VnetInputPanel', { extend: 'Proxmox.panel.InputPanel', - - vnet: undefined, + mixins: ['Proxmox.Mixin.CBind'], onGetValues: function(values) { - var me = this; + let me = this; if (me.isCreate) { values.type = 'vnet'; @@ -13,11 +12,9 @@ Ext.define('PVE.sdn.VnetInputPanel', { if (!values.ipv6) { delete values.ipv6; } - if (!values.ipv4) { delete values.ipv4; } - if (!values.mac) { delete values.mac; } @@ -25,109 +22,105 @@ Ext.define('PVE.sdn.VnetInputPanel', { return values; }, - initComponent : function() { - var me = this; - - me.items = [ - { - xtype: me.isCreate ? 'proxmoxtextfield' : 'displayfield', - name: 'vnet', - value: me.vnet, - maxLength: 10, - allowBlank: false, - fieldLabel: gettext('Name') - }, - { - xtype: 'textfield', - name: 'alias', - fieldLabel: gettext('alias'), - allowBlank: true - }, - { - xtype: 'pveSDNZoneSelector', - fieldLabel: gettext('Zone'), - name: 'zone', - value: '', - allowBlank: false - }, - { - xtype: 'proxmoxintegerfield', - name: 'tag', - minValue: 1, - maxValue: 16000000, - fieldLabel: gettext('tag'), - allowBlank: false - }, - { - xtype: 'textfield', - name: 'ipv4', - vtype: 'IPCIDRAddress', - fieldLabel: gettext('ipv4'), - fieldLabel: 'IPv4/CIDR', // do not localize - skipEmptyText: true, - allowBlank: true, - }, - { - xtype: 'textfield', - name: 'ipv6', - vtype: 'IP6CIDRAddress', - fieldLabel: 'IPv6/CIDR', // do not localize - skipEmptyText: true, - allowBlank: true, - }, - { - xtype: 'textfield', - name: 'mac', - fieldLabel: gettext('MAC address'), - vtype: 'MacAddress', - skipEmptyText: true, - allowBlank: true, - emptyText: 'auto' - }, - ]; - - me.callParent(); - } + items: [ + { + xtype: 'pmxDisplayEditField', + name: 'vnet', + cbind: { + editable: '{isCreate}', + }, + maxLength: 10, + allowBlank: false, + fieldLabel: gettext('Name'), + }, + { + xtype: 'textfield', + name: 'alias', + fieldLabel: gettext('Alias'), + allowBlank: true, + }, + { + xtype: 'pveSDNZoneSelector', + fieldLabel: gettext('Zone'), + name: 'zone', + value: '', + allowBlank: false, + }, + { + xtype: 'proxmoxintegerfield', + name: 'tag', + minValue: 1, + maxValue: 16000000, + fieldLabel: gettext('Tag'), + allowBlank: false, + }, + { + xtype: 'textfield', + name: 'ipv4', + vtype: 'IPCIDRAddress', + fieldLabel: 'IPv4/CIDR', // do not localize + skipEmptyText: true, + allowBlank: true, + }, + { + xtype: 'textfield', + name: 'ipv6', + vtype: 'IP6CIDRAddress', + fieldLabel: 'IPv6/CIDR', // do not localize + skipEmptyText: true, + allowBlank: true, + }, + { + xtype: 'textfield', + name: 'mac', + fieldLabel: gettext('MAC Address'), + vtype: 'MacAddress', + skipEmptyText: true, + allowBlank: true, + emptyText: 'auto', + }, + ], }); Ext.define('PVE.sdn.VnetEdit', { extend: 'Proxmox.window.Edit', + subject: gettext('VNet'), + vnet: undefined, - initComponent : function() { + initComponent: function() { var me = this; - me.isCreate = !me.vnet; + me.isCreate = me.vnet === undefined; - if (me.isCreate) { - me.url = '/api2/extjs/cluster/sdn/vnets'; - me.method = 'POST'; - } else { - me.url = '/api2/extjs/cluster/sdn/vnets/' + me.vnet; - me.method = 'PUT'; - } + if (me.isCreate) { + me.url = '/api2/extjs/cluster/sdn/vnets'; + me.method = 'POST'; + } else { + me.url = '/api2/extjs/cluster/sdn/vnets/' + me.vnet; + me.method = 'PUT'; + } - var ipanel = Ext.create('PVE.sdn.VnetInputPanel', { + let ipanel = Ext.create('PVE.sdn.VnetInputPanel', { isCreate: me.isCreate, - vnet: me.vnet }); Ext.apply(me, { - subject: gettext('Vnet'), - items: [ ipanel ] + items: [ + ipanel, + ], }); me.callParent(); if (!me.isCreate) { me.load({ - success: function(response, options) { - var values = response.result.data; - + success: function(response, options) { + let values = response.result.data; ipanel.setValues(values); - } + }, }); } - } + }, }); diff --git a/www/manager6/sdn/VnetView.js b/www/manager6/sdn/VnetView.js index 8ef25fae..8827ce9f 100644 --- a/www/manager6/sdn/VnetView.js +++ b/www/manager6/sdn/VnetView.js @@ -7,9 +7,9 @@ Ext.define('PVE.sdn.VnetView', { stateId: 'grid-sdn-vnet', initComponent : function() { - var me = this; + let me = this; - var store = new Ext.data.Store({ + let store = new Ext.data.Store({ model: 'pve-sdn-vnet', proxy: { type: 'proxmox', @@ -20,31 +20,28 @@ Ext.define('PVE.sdn.VnetView', { order: 'DESC' } }); + let reload = () => store.load(); - var reload = function() { - store.load(); - }; + let sm = Ext.create('Ext.selection.RowModel', {}); - var sm = Ext.create('Ext.selection.RowModel', {}); + let run_editor = function() { + let rec = sm.getSelection()[0]; - var run_editor = function() { - var rec = sm.getSelection()[0]; - - var win = Ext.create('PVE.sdn.VnetEdit',{ - vnet: rec.data.vnet - }); - win.on('destroy', reload); - win.show(); + let win = Ext.create('PVE.sdn.VnetEdit',{ + autoShow: true, + vnet: rec.data.vnet, + }); + win.on('destroy', reload); }; - var edit_btn = new Proxmox.button.Button({ + let edit_btn = new Proxmox.button.Button({ text: gettext('Edit'), disabled: true, 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, baseurl: '/cluster/sdn/vnets/', callback: reload @@ -58,83 +55,74 @@ Ext.define('PVE.sdn.VnetView', { trackOver: false }, tbar: [ - { - text: gettext('Create'), - handler: function() { - var win = Ext.create('PVE.sdn.VnetEdit',{ - type: 'vnet' + { + text: gettext('Create'), + handler: function() { + let win = Ext.create('PVE.sdn.VnetEdit', { + autoShow: true, + type: 'vnet', }); - win.on('destroy', reload); - win.show(); - } - }, + win.on('destroy', reload); + } + }, remove_btn, edit_btn, - { - text: gettext('Revert'), - handler: function() { - Proxmox.Utils.API2Request({ - url: '/cluster/sdn/vnets/', - method: 'DELETE', - waitMsgTarget: me, - callback: function() { - reload(); - }, - failure: function(response, opts) { - Ext.Msg.alert(gettext('Error'), response.htmlStatus); - } - }); - } - }, - + { + text: gettext('Revert'), + handler: function() { + Proxmox.Utils.API2Request({ + url: '/cluster/sdn/vnets/', + method: 'DELETE', + waitMsgTarget: me, + callback: function() { + reload(); + }, + failure: function(response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + } + }); + } + }, ], columns: [ { header: 'ID', flex: 2, - sortable: true, dataIndex: 'vnet' }, { - header: gettext('alias'), + header: gettext('Alias'), flex: 1, - sortable: true, dataIndex: 'alias', }, { - header: gettext('zone'), + header: gettext('Zone'), flex: 1, - sortable: true, dataIndex: 'zone', }, { - header: gettext('tag'), + header: gettext('Tag'), flex: 1, - sortable: true, dataIndex: 'tag', }, { - header: gettext('ipv4'), + header: 'IPv4/CIDR', flex: 1, - sortable: true, dataIndex: 'ipv4', }, { - header: gettext('ipv6'), + header: 'IPv6/CIDR', flex: 1, - sortable: true, dataIndex: 'ipv6', }, { - header: gettext('mac'), + header: 'MAC', flex: 1, - sortable: true, dataIndex: 'mac', }, { - header: gettext('mtu'), + header: 'MTU', flex: 1, - sortable: true, dataIndex: 'mtu', }, ], @@ -151,7 +139,15 @@ Ext.define('PVE.sdn.VnetView', { Ext.define('pve-sdn-vnet', { extend: 'Ext.data.Model', fields: [ - 'type' + 'alias', + 'ipv4', + 'ipv6', + 'mac', + 'mtu', + 'tag', + 'type', + 'vnet', + 'zone', ], idProperty: 'vnet' }); diff --git a/www/manager6/sdn/ZoneContentView.js b/www/manager6/sdn/ZoneContentView.js index 29f79a17..20a5fe1e 100644 --- a/www/manager6/sdn/ZoneContentView.js +++ b/www/manager6/sdn/ZoneContentView.js @@ -1,6 +1,5 @@ Ext.define('PVE.sdn.ZoneContentView', { extend: 'Ext.grid.GridPanel', - alias: 'widget.pveSDNZoneContentView', stateful: true, @@ -57,7 +56,7 @@ Ext.define('PVE.sdn.ZoneContentView', { ], columns: [ { - header: gettext('Vnet'), + header: 'VNet', flex: 1, sortable: true, dataIndex: 'vnet' @@ -68,7 +67,7 @@ Ext.define('PVE.sdn.ZoneContentView', { dataIndex: 'status', }, { - header: gettext('Status details'), + header: gettext('Details'), width: 20, dataIndex: 'statusmsg', }, diff --git a/www/manager6/sdn/ZoneView.js b/www/manager6/sdn/ZoneView.js index 951a02cb..f432e6a2 100644 --- a/www/manager6/sdn/ZoneView.js +++ b/www/manager6/sdn/ZoneView.js @@ -7,7 +7,7 @@ Ext.define('PVE.sdn.ZoneView', { stateId: 'grid-sdn-zone', createSDNEditWindow: function(type, sid) { - var schema = PVE.Utils.sdnzoneSchema[type]; + let schema = PVE.Utils.sdnzoneSchema[type]; if (!schema || !schema.ipanel) { throw "no editor registered for zone type: " + type; } @@ -24,9 +24,9 @@ Ext.define('PVE.sdn.ZoneView', { }, initComponent : function() { - var me = this; + let me = this; - var store = new Ext.data.Store({ + let store = new Ext.data.Store({ model: 'pve-sdn-zone', proxy: { type: 'proxmox', @@ -38,45 +38,45 @@ Ext.define('PVE.sdn.ZoneView', { }, }); - var reload = function() { + let reload = function() { store.load(); }; - var sm = Ext.create('Ext.selection.RowModel', {}); + let sm = Ext.create('Ext.selection.RowModel', {}); - var run_editor = function() { - var rec = sm.getSelection()[0]; + let run_editor = function() { + let rec = sm.getSelection()[0]; if (!rec) { return; } - var type = rec.data.type, + let type = rec.data.type, zone = rec.data.zone; me.createSDNEditWindow(type, zone); }; - var edit_btn = new Proxmox.button.Button({ + let edit_btn = new Proxmox.button.Button({ text: gettext('Edit'), disabled: true, selModel: sm, handler: run_editor }); - var remove_btn = Ext.create('Proxmox.button.StdRemoveButton', { + let remove_btn = Ext.create('Proxmox.button.StdRemoveButton', { selModel: sm, baseurl: '/cluster/sdn/zones/', callback: reload }); // else we cannot dynamically generate the add menu handlers - var addHandleGenerator = function(type) { + let addHandleGenerator = function(type) { return function() { me.createSDNEditWindow(type); }; }; - var addMenuItems = [], type; + let addMenuItems = [], type; /*jslint forin: true */ for (type in PVE.Utils.sdnzoneSchema) { - var zone = PVE.Utils.sdnzoneSchema[type]; + let zone = PVE.Utils.sdnzoneSchema[type]; if (zone.hideAdd) { continue; } @@ -103,41 +103,38 @@ Ext.define('PVE.sdn.ZoneView', { }, remove_btn, edit_btn, - { - text: gettext('Revert'), - handler: function() { - Proxmox.Utils.API2Request({ - url: '/cluster/sdn/zones/', - method: 'DELETE', - waitMsgTarget: me, - callback: function() { - reload(); - }, - failure: function(response, opts) { - Ext.Msg.alert(gettext('Error'), response.htmlStatus); - } - }); - } - }, + { + text: gettext('Revert'), + handler: function() { + Proxmox.Utils.API2Request({ + url: '/cluster/sdn/zones/', + method: 'DELETE', + waitMsgTarget: me, + callback: function() { + reload(); + }, + failure: function(response, opts) { + Ext.Msg.alert(gettext('Error'), response.htmlStatus); + } + }); + } + }, ], columns: [ { header: 'ID', flex: 2, - sortable: true, dataIndex: 'zone' }, { header: gettext('Type'), flex: 1, - sortable: true, dataIndex: 'type', renderer: PVE.Utils.format_sdnzone_type }, { header: gettext('Nodes'), - flex: 1, - sortable: true, + flex: 3, dataIndex: 'nodes', }, ],