ui: form: add USBMapSelector

similar to PCIMapSelector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 8de983aab65f43853208cc62b4936478b068370f..40a606392de0963f6c37198cf46137ce70e29061 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -69,6 +69,7 @@ JSSRC=                                                        \
        form/TFASelector.js                             \
        form/TokenSelector.js                           \
        form/USBSelector.js                             \
+       form/USBMapSelector.js                          \
        form/UserSelector.js                            \
        form/VLanField.js                               \
        form/VMCPUFlagSelector.js                       \

diff --git a/www/manager6/form/USBMapSelector.js b/www/manager6/form/USBMapSelector.js
new file mode 100644 (file)
index 0000000..990ef30
--- /dev/null
+++ b/www/manager6/form/USBMapSelector.js
@@ -0,0 +1,98 @@
+Ext.define('PVE.form.USBMapSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.pveUSBMapSelector',
+
+    store: {
+       fields: ['name', 'vendor', 'device', 'path'],
+       filterOnLoad: true,
+       sorters: [
+           {
+               property: 'name',
+               direction: 'ASC',
+           },
+       ],
+    },
+
+    allowBlank: false,
+    autoSelect: false,
+    displayField: 'id',
+    valueField: 'id',
+
+    listConfig: {
+       width: 800,
+       columns: [
+           {
+               header: gettext('Name'),
+               dataIndex: 'id',
+               flex: 1,
+           },
+           {
+               header: gettext('Status'),
+               dataIndex: 'errors',
+               flex: 2,
+               renderer: function(value) {
+                   let me = this;
+
+                   if (!Ext.isArray(value) || !value?.length) {
+                       return `<i class="fa fa-check-circle good"></i> ${gettext('Mapping OK')}`;
+                   }
+
+                   let errors = [];
+
+                   value.forEach((error) => {
+                       let iconCls;
+                       switch (error?.severity) {
+                           case 'warning':
+                               iconCls = 'fa-exclamation-circle warning';
+                               break;
+                           case 'error':
+                               iconCls = 'fa-times-circle critical';
+                               break;
+                       }
+
+                       let message = error?.message;
+                       let icon = `<i class="fa ${iconCls}"></i>`;
+                       if (iconCls !== undefined) {
+                           errors.push(`${icon} ${message}`);
+                       }
+                   });
+
+                   return errors.join('<br>');
+               },
+           },
+           {
+               header: gettext('Comment'),
+               dataIndex: 'description',
+               flex: 1,
+           },
+       ],
+    },
+
+    setNodename: function(nodename) {
+       var me = this;
+
+       if (!nodename || me.nodename === nodename) {
+           return;
+       }
+
+       me.nodename = nodename;
+
+       me.store.setProxy({
+           type: 'proxmox',
+           url: `/api2/json/cluster/mapping/usb?check-node=${nodename}`,
+       });
+
+       me.store.load();
+    },
+
+    initComponent: function() {
+       var me = this;
+
+       var nodename = me.nodename;
+       me.nodename = undefined;
+
+        me.callParent();
+
+       me.setNodename(nodename);
+    },
+});