From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id B0AF793CA1 for ; Tue, 20 Sep 2022 14:51:20 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 1CF231C102 for ; Tue, 20 Sep 2022 14:51:09 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Tue, 20 Sep 2022 14:51:01 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 4DC6B44414 for ; Tue, 20 Sep 2022 14:50:47 +0200 (CEST) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Tue, 20 Sep 2022 14:50:36 +0200 Message-Id: <20220920125041.3636561-31-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20220920125041.3636561-1-d.csapak@proxmox.com> References: <20220920125041.3636561-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.078 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [rec.data, data.id] Subject: [pve-devel] [PATCH manager v3 08/13] ui: form: add MultiPCISelector X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 20 Sep 2022 12:51:20 -0000 this is a grid field for selecting multiple pci devices at once, like we need for the mapped pci ui. There we want to be able to select multiple devices such that one gets selected automatically we can select a whole slot here, but that disables selecting the individual functions of that device. we can also not select multiple devices with different properties (e.g. vendor) so that the user cannot select a set of pci devices which are not similar Signed-off-by: Dominik Csapak --- www/css/ext6-pve.css | 4 + www/manager6/Makefile | 1 + www/manager6/form/MultiPCISelector.js | 289 ++++++++++++++++++++++++++ 3 files changed, 294 insertions(+) create mode 100644 www/manager6/form/MultiPCISelector.js diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css index dadb84a9..84205c11 100644 --- a/www/css/ext6-pve.css +++ b/www/css/ext6-pve.css @@ -651,3 +651,7 @@ table.osds td:first-of-type { background-color: rgb(245, 245, 245); color: #000; } + +.x-grid-item .x-item-disabled { + opacity: 0.3; +} diff --git a/www/manager6/Makefile b/www/manager6/Makefile index f5ae5364..c189af92 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -45,6 +45,7 @@ JSSRC= \ form/IPRefSelector.js \ form/MDevSelector.js \ form/MemoryField.js \ + form/MultiPCISelector.js \ form/NetworkCardSelector.js \ form/NodeSelector.js \ form/PCISelector.js \ diff --git a/www/manager6/form/MultiPCISelector.js b/www/manager6/form/MultiPCISelector.js new file mode 100644 index 00000000..9da3300a --- /dev/null +++ b/www/manager6/form/MultiPCISelector.js @@ -0,0 +1,289 @@ +Ext.define('PVE.form.MultiPCISelector', { + extend: 'Ext.grid.Panel', + alias: 'widget.pveMultiPCISelector', + + mixins: { + field: 'Ext.form.field.Field', + }, + + getValue: function() { + let me = this; + + return (me.value ?? []).join(';'); + }, + + setValue: function(value) { + let me = this; + + value ??= []; + + if (!Ext.isArray(value)) { + value = value.split(';').filter((v) => !!v); + me.value = value; + } + + me.updateSelectedDevices(value); + + return me.mixins.field.setValue.call(me, value); + }, + + getErrors: function() { + let me = this; + + + let error; + let value = me.getValue().split(';').filter((v) => !!v); + let store = me.getStore(); + + let fields = [ + 'vendor', + 'device', + 'subsystem-vendor', + 'subsystem-device', + 'mdev', + ]; + + let props = {}; + + if (value.length < 1) { + error = gettext("Must choose at least one device"); + } + + value.forEach((id) => { + let rec = store.findRecord('id', id); + if (!rec) { + return; + } + for (const field of fields) { + props[field] ??= rec.data[field]; + + if (props[field] !== rec.data[field]) { + error = gettext('Cannot choose devices with different properties'); + } + } + }); + + let el = me.getActionEl(); + let errorCls = ['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']; + + if (error !== undefined) { + me.addCls(errorCls); + if (el) { + el.dom.setAttribute('data-errorqtip', error); + } + + return [error]; + } + + me.removeCls(errorCls); + if (el) { + el.dom.setAttribute('data-errorqtip', ""); + } + + return []; + }, + + viewConfig: { + getRowClass: function(record) { + if (record.data.disabled === true) { + return 'x-item-disabled'; + } + return ''; + }, + }, + + updateSelectedDevices: function(list = []) { + let me = this; + + let recs = []; + let store = me.getStore(); + + store.each((rec) => { + if (list.indexOf(rec.data.id) !== -1) { + recs.push(rec); + } + }); + + me.suspendEvent('change'); + me.setSelection(recs); + me.resumeEvent('change'); + }, + + setNodename: function(nodename) { + var me = this; + + if (!nodename || me.nodename === nodename) { + return; + } + + me.nodename = nodename; + + me.getStore().setProxy({ + type: 'proxmox', + url: '/api2/json/nodes/' + me.nodename + '/hardware/pci?pci-class-blacklist=', + }); + + me.getStore().load({ + callback: (recs, op, success) => me.addSlotRecords(recs, op, success), + }); + }, + + // adds the virtual 'slot' records (e.g. '0000:01:00') to the store + addSlotRecords: function(records, _op, success) { + let me = this; + if (!success) { + return; + } + + let slots = {}; + records.forEach((rec) => { + let slotname = rec.data.id.slice(0, -2); // remove function + rec.set('slot', slotname); + if (slots[slotname] !== undefined) { + slots[slotname].count++; + return; + } + + slots[slotname] = { + count: 1, + }; + + if (rec.data.id.endsWith('.0')) { + slots[slotname].device = rec.data; + } + }); + + let store = me.getStore(); + + for (const [slot, { count, device }] of Object.entries(slots)) { + if (count === 1) { + continue; + } + store.add(Ext.apply({}, { + id: slot, + mdev: undefined, + device_name: gettext('Pass through all functions as one device'), + }, device)); + } + + me.updateSelectedDevices(me.value); + }, + + selectionChange: function(_grid, selection) { + let me = this; + + let ids = {}; + selection + .filter(rec => rec.data.id.indexOf('.') === -1) + .forEach((rec) => { ids[rec.data.id] = true; }); + + let to_disable = []; + + me.getStore().each(rec => { + let id = rec.data.id; + rec.set('disabled', false); + if (id.indexOf('.') === -1) { + return; + } + let slot = id.slice(0, -2); // remove function + + if (ids[slot]) { + to_disable.push(rec); + rec.set('disabled', true); + } + }); + + me.suspendEvent('selectionchange'); + me.getSelectionModel().deselect(to_disable); + me.resumeEvent('selectionchange'); + + me.value = me.getSelection().map((rec) => rec.data.id); + me.checkChange(); + }, + + selModel: { + type: 'checkboxmodel', + mode: 'SIMPLE', + }, + + columns: [ + { + header: 'ID', + dataIndex: 'id', + width: 150, + }, + { + header: gettext('IOMMU Group'), + dataIndex: 'iommugroup', + renderer: (v, _md, rec) => { + console.log(rec.data); + return rec.data.slot === rec.data.id ? '' : v === -1 ? '-' : v; + }, + width: 50, + }, + { + header: gettext('Vendor'), + dataIndex: 'vendor_name', + flex: 3, + }, + { + header: gettext('Device'), + dataIndex: 'device_name', + flex: 6, + }, + { + header: gettext('Mediated Devices'), + dataIndex: 'mdev', + flex: 1, + renderer: function(val) { + return Proxmox.Utils.format_boolean(!!val); + }, + }, + ], + + listeners: { + selectionchange: function() { + this.selectionChange(...arguments); + }, + }, + + store: { + fields: [ + 'id', 'vendor_name', 'device_name', 'vendor', 'device', 'iommugroup', 'mdev', + 'subsystem_vendor', 'subsystem_device', 'disabled', + { + name: 'subsystem-vendor', + calculate: function(data) { + return data.subsystem_vendor; + }, + }, + { + name: 'subsystem-device', + calculate: function(data) { + return data.subsystem_device; + }, + }, + ], + sorters: [ + { + property: 'id', + direction: 'ASC', + }, + ], + }, + + initComponent: function() { + let me = this; + + var nodename = me.nodename; + me.nodename = undefined; + + me.callParent(); + + Proxmox.Utils.monStoreErrors(me, me.getStore(), true); + + me.setNodename(nodename); + + me.initField(); + }, +}); -- 2.30.2