pve-manager/www/manager6/form/IPRefSelector.js

Ext.define('PVE.form.IPRefSelector', {
    extend: 'Proxmox.form.ComboGrid',
    alias: ['widget.pveIPRefSelector'],

    base_url: undefined,

    preferredValue: '', // hack: else Form sets dirty flag?

    ref_type: undefined, // undefined = any [undefined, 'ipset' or 'alias']

    valueField: 'scopedref',
    displayField: 'ref',
    notFoundIsValid: true,

    initComponent: function() {
	var me = this;

	if (!me.base_url) {
	    throw "no base_url specified";
	}

	var url = "/api2/json" + me.base_url;
	if (me.ref_type) {
	    url += "?type=" + me.ref_type;
	}

	var store = Ext.create('Ext.data.Store', {
	    autoLoad: true,
	    fields: [
		'type',
		'name',
		'ref',
		'comment',
		'scope',
		{
		    name: 'scopedref',
		    calculate: function(v) {
			if (v.type === 'alias') {
			    return `${v.scope}/${v.name}`;
			} else if (v.type === 'ipset') {
			    return `+${v.scope}/${v.name}`;
			} else {
			    return v.ref;
			}
		    },
		},
	    ],
	    idProperty: 'ref',
	    proxy: {
		type: 'proxmox',
		url: url,
	    },
	    sorters: {
		property: 'ref',
		direction: 'ASC',
	    },
	});

	var columns = [];

	if (!me.ref_type) {
	    columns.push({
		header: gettext('Type'),
		dataIndex: 'type',
		hideable: false,
		width: 60,
	    });
	}

	let scopes = {
	    'dc': gettext("Datacenter"),
	    'guest': gettext("Guest"),
	    'sdn': gettext("SDN"),
	};

	columns.push(
	    {
		header: gettext('Name'),
		dataIndex: 'ref',
		hideable: false,
		width: 140,
	    },
	    {
		header: gettext('Scope'),
		dataIndex: 'scope',
		hideable: false,
		width: 140,
		renderer: function(value) {
		    return scopes[value] ?? "unknown scope";
		},
	    },
	    {
		header: gettext('Comment'),
		dataIndex: 'comment',
		renderer: Ext.String.htmlEncode,
		minWidth: 60,
		flex: 1,
	    },
	);

	Ext.apply(me, {
	    store: store,
            listConfig: {
		columns: columns,
		width: 500,
	    },
	});

	me.on('beforequery', function(queryPlan) {
	    return !(queryPlan.query === null || queryPlan.query.match(/^\d/));
	});

        me.callParent();
    },
});