[pve-devel] [PATCH manager 3/6 v2] gui: add form/PCISelector

[Thomas Lamprecht]

On 11/20/18 5:13 PM, Dominik Csapak wrote:
> this adds a form field for selecting a pci device
> 

looks OK in general, some nits inline.

> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
> changes from v1:
> * updated field names
>  www/manager6/Makefile            |  1 +
>  www/manager6/form/PCISelector.js | 89 ++++++++++++++++++++++++++++++++++++++++
>  2 files changed, 90 insertions(+)
>  create mode 100644 www/manager6/form/PCISelector.js
> 
> diff --git a/www/manager6/Makefile b/www/manager6/Makefile
> index f5667f32..03fc93e0 100644
> --- a/www/manager6/Makefile
> +++ b/www/manager6/Makefile
> @@ -41,6 +41,7 @@ JSSRC= 				                 	\
>  	form/StorageSelector.js				\
>  	form/DiskStorageSelector.js			\
>  	form/BridgeSelector.js				\
> +	form/PCISelector.js				\
>  	form/SecurityGroupSelector.js			\
>  	form/IPRefSelector.js				\
>  	form/IPProtocolSelector.js			\
> diff --git a/www/manager6/form/PCISelector.js b/www/manager6/form/PCISelector.js
> new file mode 100644
> index 00000000..86115cf6
> --- /dev/null
> +++ b/www/manager6/form/PCISelector.js
> @@ -0,0 +1,89 @@
> +Ext.define('PVE.form.PCISelector', {
> +    extend: 'Proxmox.form.ComboGrid',
> +    xtype: 'pvePCISelector',
> +
> +    store: {
> +	fields: [ 'id','vendor_name', 'device_name', 'vendor', 'device', 'iommugroup', 'mdev' ],
> +	filterOnLoad: true,
> +	sorters: [
> +	    {
> +		property : 'id',
> +		direction: 'ASC'
> +	    }
> +	]
> +    },
> +
> +    autoSelect: false,
> +    valueField: 'id',
> +    displayField: 'id',
> +
> +    // can contain a load callback for the store
> +    // useful to determine the state of the IOMMU
> +    onLoadCallBack: undefined,
> +
> +    listConfig: {
> +	width: 800,
> +	columns: [
> +	    {
> +		header: 'ID',
> +		dataIndex: 'id',
> +		width: 80
> +	    },
> +	    {
> +		header: gettext('IOMMU group'),

s/group/Group/

> +		dataIndex: 'iommugroup',
> +		width: 50
> +	    },
> +	    {
> +		header: gettext('Vendor'),
> +		dataIndex: 'vendor_name',
> +		flex: 1

Device column is to small, IMO, I received better results with following
flex divisions:
flex: 2

> +	    },
> +	    {
> +		header: gettext('Device'),
> +		dataIndex: 'device_name',
> +		flex: 1.5

flex: 6

> +	    },
> +	    {
> +		header: gettext('Mediated Devices'),

flex: 1

> +		dataIndex: 'mdev',
> +		renderer: function(val) {
> +		    return Proxmox.Utils.format_boolean(!!val);
> +		}
> +	    }
> +	]
> +    },
> +
> +    setNodename: function(nodename) {
> +	var me = this;
> +
> +	if (!nodename || (me.nodename === nodename)) {
> +	    return;
> +	}
> +
> +	me.nodename = nodename;
> +
> +	me.store.setProxy({
> +	    type: 'proxmox',
> +	    url: '/api2/json/nodes/' + me.nodename + '/scan/pci'
> +	});
> +
> +	me.store.load();
> +    },
> +
> +    initComponent: function() {
> +	var me = this;
> +
> +	var nodename = me.nodename;
> +	me.nodename = undefined;
> +
> +        me.callParent();
> +
> +	if (me.onLoadCallBack !== undefined) {
> +	    me.mon(me.getStore(), 'load', me.onLoadCallBack);
> +	}
> +
> +	me.setNodename(nodename);
> +    }
> +});
> +
>