This commit adds a basic / rudimentary UI integration for custom storage plugins.
Do this by issuing a request to the new `GET plugins/storage/plugin` endpoint and checking whether a plugin is custom or not via its Perl module path. When a user then adds or edits a storage config entry belonging to a custom storage plugin, the new `PVE.storage.CustomInputPanel` opens and builds the form's view from the schemas of the plugin's properties. In other words, the UI is built completely from the information provided by the plugin's SectionConfig schema. It is worth noting that the "Add" dropdown menu button's items are added to the menu on the fly once the request to `plugins/storage/plugin` succeeds. For the short moment that the request is being awaited, the "Add" button is disabled. This is not noticeable at all for regular (i.e. decently fast) connections. Users with (very) slow connections will however notice that the button stays disabled until the request succeeded. If that were not the case, the dropdown menu of the "Add" button would not even show up when clicked. Therefore keep the button disabled (greyed out, unclickable) for the little time that the user cannot do anything with it anyway. Signed-off-by: Max R. Carrara <[email protected]> --- www/manager6/Makefile | 1 + www/manager6/dc/StorageView.js | 131 +++++++++++++++++++++-------- www/manager6/storage/Base.js | 1 + www/manager6/storage/CustomEdit.js | 110 ++++++++++++++++++++++++ 4 files changed, 209 insertions(+), 34 deletions(-) create mode 100644 www/manager6/storage/CustomEdit.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 4558d53e..85401b4f 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -339,6 +339,7 @@ JSSRC= \ storage/Browser.js \ storage/CIFSEdit.js \ storage/CephFSEdit.js \ + storage/CustomEdit.js \ storage/DirEdit.js \ storage/ImageView.js \ storage/IScsiEdit.js \ diff --git a/www/manager6/dc/StorageView.js b/www/manager6/dc/StorageView.js index bcc02ed5..7bcb5637 100644 --- a/www/manager6/dc/StorageView.js +++ b/www/manager6/dc/StorageView.js @@ -11,20 +11,47 @@ Ext.define( stateId: 'grid-dc-storage', createStorageEditWindow: function (type, sid) { - let schema = PVE.Utils.storageSchema[type]; - if (!schema || !schema.ipanel) { - Ext.Msg.alert(gettext('Error'), `No editor registered for storage type '${type}'`); + let me = this; + + const metadata = me.pluginMetadata[type]; + + // Should never happen, but still handle it here just in case + if (!metadata) { + Ext.Msg.alert(gettext('Error'), `Plugin '${type}' has no metadata`); return; } + let isCustom = metadata.module.startsWith('PVE::Storage::Custom'); + + let paneltype; + let canDoBackups; + + if (isCustom) { + paneltype = 'PVE.storage.CustomInputPanel'; + canDoBackups = metadata.content.supported.includes('backup'); + } else { + let schema = PVE.Utils.storageSchema[type]; + if (!schema || !schema.ipanel) { + Ext.Msg.alert( + gettext('Error'), + `No editor registered for storage type '${type}'`, + ); + return; + } + + paneltype = 'PVE.storage.' + schema.ipanel; + canDoBackups = schema.backups; + } + Ext.create('PVE.storage.BaseEdit', { - paneltype: 'PVE.storage.' + schema.ipanel, + paneltype: paneltype, type: type, storageId: sid, - canDoBackups: schema.backups, + canDoBackups: canDoBackups, + metadata: metadata, autoShow: true, listeners: { - destroy: this.reloadStore, + destroy: me.reloadStore, }, }); }, @@ -46,6 +73,69 @@ Ext.define( let sm = Ext.create('Ext.selection.RowModel', {}); + me.pluginMetadata = {}; + + let menuButtonAdd = new Ext.menu.Menu({ + items: [], + }); + + let addBtn = new Ext.Button({ + menu: menuButtonAdd, + text: gettext('Add'), + disabled: true, + }); + + let pushBuiltinPluginsToMenu = function () { + for (const [type, storage] of Object.entries(PVE.Utils.storageSchema)) { + if (storage.hideAdd) { + continue; + } + + menuButtonAdd.add({ + text: PVE.Utils.format_storage_type(type), + iconCls: 'fa fa-fw fa-' + storage.faIcon, + handler: () => me.createStorageEditWindow(type), + }); + } + }; + + let pushCustomPluginsToMenu = function () { + for (const type in me.pluginMetadata) { + if (!Object.hasOwn(me.pluginMetadata, type)) { + continue; + } + + const metadata = me.pluginMetadata[type]; + let isCustom = metadata.module.startsWith('PVE::Storage::Custom'); + + if (isCustom) { + menuButtonAdd.add({ + text: PVE.Utils.format_storage_type(type), + iconCls: 'fa fa-fw fa-folder', + handler: () => me.createStorageEditWindow(type), + }); + } + } + }; + + Proxmox.Utils.API2Request({ + url: `/api2/extjs/plugins/storage/plugin`, + method: 'GET', + success: function ({ result: { data } }) { + data.forEach((metadata) => { + me.pluginMetadata[metadata.type] = metadata; + }); + + pushBuiltinPluginsToMenu(); + pushCustomPluginsToMenu(); + + addBtn.setDisabled(false); + }, + failure: function ({ htmlStatus }) { + Ext.Msg.alert('Error', htmlStatus); + }, + }); + let run_editor = function () { let rec = sm.getSelection()[0]; if (!rec) { @@ -67,24 +157,6 @@ Ext.define( callback: () => store.load(), }); - // else we cannot dynamically generate the add menu handlers - let addHandleGenerator = function (type) { - return function () { - me.createStorageEditWindow(type); - }; - }; - let addMenuItems = []; - for (const [type, storage] of Object.entries(PVE.Utils.storageSchema)) { - if (storage.hideAdd) { - continue; - } - addMenuItems.push({ - text: PVE.Utils.format_storage_type(type), - iconCls: 'fa fa-fw fa-' + storage.faIcon, - handler: addHandleGenerator(type), - }); - } - Ext.apply(me, { store: store, reloadStore: () => store.load(), @@ -92,16 +164,7 @@ Ext.define( viewConfig: { trackOver: false, }, - tbar: [ - { - text: gettext('Add'), - menu: new Ext.menu.Menu({ - items: addMenuItems, - }), - }, - remove_btn, - edit_btn, - ], + tbar: [addBtn, remove_btn, edit_btn], columns: [ { header: 'ID', diff --git a/www/manager6/storage/Base.js b/www/manager6/storage/Base.js index cf89ef6d..43fc70d6 100644 --- a/www/manager6/storage/Base.js +++ b/www/manager6/storage/Base.js @@ -138,6 +138,7 @@ Ext.define('PVE.storage.BaseEdit', { type: me.type, isCreate: me.isCreate, storageId: me.storageId, + metadata: me.metadata, }); Ext.apply(me, { diff --git a/www/manager6/storage/CustomEdit.js b/www/manager6/storage/CustomEdit.js new file mode 100644 index 00000000..a7e7c7e0 --- /dev/null +++ b/www/manager6/storage/CustomEdit.js @@ -0,0 +1,110 @@ +Ext.define('PVE.storage.CustomInputPanel', { + extend: 'PVE.panel.StorageBase', + + buildFormFieldFromProperty: function (propertyName) { + let me = this; + let schema = me.metadata.schema; + + let property = schema[propertyName]; + + if (!property) { + console.warn( + `Tried to create field for unknown property '${propertyName}'` + + ` for storage type '${me.type}'`, + ); + return; + } + + let fieldName = propertyName; + let extraAttributes = { + readonly: property.fixed && !me.isCreate, + sensitive: property.sensitive, + }; + let context = { isCreate: me.isCreate }; + + let fieldDef = Proxmox.Utils.getFieldDefFromPropertySchema( + fieldName, + property, + extraAttributes, + context, + ); + + if (!fieldDef.fieldLabel) { + fieldDef.fieldLabel = Ext.htmlEncode(propertyName); + } + + return fieldDef; + }, + + addWidget: function (widget) { + let me = this; + + me.column1 = me.column1 || []; + me.column2 = me.column2 || []; + + if (me.column2.length >= me.column1.length) { + me.column1.push(widget); + } else { + me.column2.push(widget); + } + }, + + initComponent: function () { + let me = this; + let schema = me.metadata.schema; + + me.column1 = me.column1 || []; + me.column2 = me.column2 || []; + + const reservedFields = new Set([ + // automatically added in PVE.panel.StorageBase + 'storage', + 'nodes', + 'disable', + + // handled separately for consistency + 'content', + 'shared', + + // not an actual property, but used by the UI as an inverse of the 'disable' property + 'enable', + + // handled by the "Backup Retention" panel + 'prune-backups', + 'max-protected-backups', + ]); + + // Add the field for the 'content' property first for consistency's sake + let propertyContent = schema.content; + if (propertyContent) { + let fieldDefContent = { + xtype: 'pveContentTypeSelector', + cts: me.metadata.content.supported, + fieldLabel: gettext('Content'), + name: 'content', + value: me.metadata.content.default, + multiSelect: true, + allowBlank: false, + }; + + me.column1.push(fieldDefContent); + } + + let propertyShared = schema.shared; + if (propertyShared) { + let fieldDefShared = me.buildFormFieldFromProperty('shared'); + me.column1.push(fieldDefShared); + } + + for (const propertyName of Object.keys(schema).sort()) { + if (reservedFields.has(propertyName)) { + continue; + } + + let fieldDef = me.buildFormFieldFromProperty(propertyName); + me.addWidget(fieldDef); + } + + me.callParent(); + }, +}); -- 2.47.3 _______________________________________________ pve-devel mailing list [email protected] https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
