[pve-devel] [RFC pve-manager master v2 10/10] ui: storage: add basic UI integration for custom storage plugins

["Max R. Carrara" <m.carrara@proxmox.com>]

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 <m.carrara@proxmox.com>
---
 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
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel