[pve-devel] [PATCH v2 manager] ui: acme: switch cluster view items over to those from widget-toolkit

Filip Schauer f.schauer at proxmox.com
Tue Apr 30 13:17:58 CEST 2024


The pmxACMEAccountView & pmxACMEPluginView in proxmox-widget-toolkit
were copied from pve-manager in commits 5df894de and 658bfdff. This
makes pveACMEAccountView & pveACMEPluginView redundant, hence remove
them and use pmxACMEAccountView & pmxACMEPluginView instead.

This leaves PVE.node.ACMEAccountView & pveACMEPluginEditor unused, so
remove them too.

Signed-off-by: Filip Schauer <f.schauer at proxmox.com>
---
Changes since v1:
* Also switch over account view
* Correct acmeUrl (/config/acme -> /cluster/acme)
* Reference introduction of pmxACMEAccountView & pmxACMEPluginView in
  commit message
* Remove ACMEPluginEdit.js from the Makefile

 www/manager6/Makefile              |   1 -
 www/manager6/dc/ACMEClusterView.js | 204 +-------------------------
 www/manager6/dc/ACMEPluginEdit.js  | 223 -----------------------------
 www/manager6/node/ACME.js          |  66 ---------
 4 files changed, 4 insertions(+), 490 deletions(-)
 delete mode 100644 www/manager6/dc/ACMEPluginEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2c3a822b..a1ad4698 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -148,7 +148,6 @@ JSSRC= 							\
 	ha/StatusView.js				\
 	dc/ACLView.js					\
 	dc/ACMEClusterView.js				\
-	dc/ACMEPluginEdit.js				\
 	dc/AuthEditBase.js				\
 	dc/AuthEditAD.js				\
 	dc/AuthEditLDAP.js				\
diff --git a/www/manager6/dc/ACMEClusterView.js b/www/manager6/dc/ACMEClusterView.js
index d02aeef0..d2ffde17 100644
--- a/www/manager6/dc/ACMEClusterView.js
+++ b/www/manager6/dc/ACMEClusterView.js
@@ -18,204 +18,6 @@ Ext.define('pve-acme-plugins', {
     idProperty: 'plugin',
 });
 
-Ext.define('PVE.dc.ACMEAccountView', {
-    extend: 'Ext.grid.Panel',
-    alias: 'widget.pveACMEAccountView',
-
-    title: gettext('Accounts'),
-
-    controller: {
-	xclass: 'Ext.app.ViewController',
-
-	addAccount: function() {
-	    let me = this;
-	    let view = me.getView();
-	    let defaultExists = view.getStore().findExact('name', 'default') !== -1;
-	    Ext.create('PVE.node.ACMEAccountCreate', {
-		defaultExists,
-		taskDone: function() {
-		    me.reload();
-		},
-	    }).show();
-	},
-
-	viewAccount: function() {
-	    let me = this;
-	    let view = me.getView();
-	    let selection = view.getSelection();
-	    if (selection.length < 1) return;
-	    Ext.create('PVE.node.ACMEAccountView', {
-		accountname: selection[0].data.name,
-	    }).show();
-	},
-
-	reload: function() {
-	    let me = this;
-	    let view = me.getView();
-	    view.getStore().rstore.load();
-	},
-
-	showTaskAndReload: function(options, success, response) {
-	    let me = this;
-	    if (!success) return;
-
-	    let upid = response.result.data;
-	    Ext.create('Proxmox.window.TaskProgress', {
-		upid,
-		taskDone: function() {
-		    me.reload();
-		},
-	    }).show();
-	},
-    },
-
-    minHeight: 150,
-    emptyText: gettext('No Accounts configured'),
-
-    columns: [
-	{
-	    dataIndex: 'name',
-	    text: gettext('Name'),
-	    renderer: Ext.String.htmlEncode,
-	    flex: 1,
-	},
-    ],
-
-    tbar: [
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Add'),
-	    selModel: false,
-	    handler: 'addAccount',
-	},
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('View'),
-	    handler: 'viewAccount',
-	    disabled: true,
-	},
-	{
-	    xtype: 'proxmoxStdRemoveButton',
-	    baseurl: '/cluster/acme/account',
-	    callback: 'showTaskAndReload',
-	},
-    ],
-
-    listeners: {
-	itemdblclick: 'viewAccount',
-    },
-
-    store: {
-	type: 'diff',
-	autoDestroy: true,
-	autoDestroyRstore: true,
-	rstore: {
-	    type: 'update',
-	    storeid: 'pve-acme-accounts',
-	    model: 'pve-acme-accounts',
-	    autoStart: true,
-	},
-	sorters: 'name',
-    },
-});
-
-Ext.define('PVE.dc.ACMEPluginView', {
-    extend: 'Ext.grid.Panel',
-    alias: 'widget.pveACMEPluginView',
-
-    title: gettext('Challenge Plugins'),
-
-    controller: {
-	xclass: 'Ext.app.ViewController',
-
-	addPlugin: function() {
-	    let me = this;
-	    Ext.create('PVE.dc.ACMEPluginEditor', {
-		isCreate: true,
-		apiCallDone: function() {
-		    me.reload();
-		},
-	    }).show();
-	},
-
-	editPlugin: function() {
-	    let me = this;
-	    let view = me.getView();
-	    let selection = view.getSelection();
-	    if (selection.length < 1) return;
-	    let plugin = selection[0].data.plugin;
-	    Ext.create('PVE.dc.ACMEPluginEditor', {
-		url: `/cluster/acme/plugins/${plugin}`,
-		apiCallDone: function() {
-		    me.reload();
-		},
-	    }).show();
-	},
-
-	reload: function() {
-	    let me = this;
-	    let view = me.getView();
-	    view.getStore().rstore.load();
-	},
-    },
-
-    minHeight: 150,
-    emptyText: gettext('No Plugins configured'),
-
-    columns: [
-	{
-	    dataIndex: 'plugin',
-	    text: gettext('Plugin'),
-	    renderer: Ext.String.htmlEncode,
-	    flex: 1,
-	},
-	{
-	    dataIndex: 'api',
-	    text: 'API',
-	    renderer: Ext.String.htmlEncode,
-	    flex: 1,
-	},
-    ],
-
-    tbar: [
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Add'),
-	    handler: 'addPlugin',
-	    selModel: false,
-	},
-	{
-	    xtype: 'proxmoxButton',
-	    text: gettext('Edit'),
-	    handler: 'editPlugin',
-	    disabled: true,
-	},
-	{
-	    xtype: 'proxmoxStdRemoveButton',
-	    baseurl: '/cluster/acme/plugins',
-	    callback: 'reload',
-	},
-    ],
-
-    listeners: {
-	itemdblclick: 'editPlugin',
-    },
-
-    store: {
-	type: 'diff',
-	autoDestroy: true,
-	autoDestroyRstore: true,
-	rstore: {
-	    type: 'update',
-	    storeid: 'pve-acme-plugins',
-	    model: 'pve-acme-plugins',
-	    autoStart: true,
-	    filters: item => !!item.data.api,
-	},
-	sorters: 'plugin',
-    },
-});
-
 Ext.define('PVE.dc.ACMEClusterView', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.pveACMEClusterView',
@@ -226,12 +28,14 @@ Ext.define('PVE.dc.ACMEClusterView', {
 	{
 	    region: 'north',
 	    border: false,
-	    xtype: 'pveACMEAccountView',
+	    xtype: 'pmxACMEAccountView',
+	    acmeUrl: '/cluster/acme',
 	},
 	{
 	    region: 'center',
 	    border: false,
-	    xtype: 'pveACMEPluginView',
+	    xtype: 'pmxACMEPluginView',
+	    acmeUrl: '/cluster/acme',
 	},
     ],
 });
diff --git a/www/manager6/dc/ACMEPluginEdit.js b/www/manager6/dc/ACMEPluginEdit.js
deleted file mode 100644
index 570b4dd2..00000000
--- a/www/manager6/dc/ACMEPluginEdit.js
+++ /dev/null
@@ -1,223 +0,0 @@
-Ext.define('PVE.dc.ACMEPluginEditor', {
-    extend: 'Proxmox.window.Edit',
-    xtype: 'pveACMEPluginEditor',
-    mixins: ['Proxmox.Mixin.CBind'],
-
-    onlineHelp: 'sysadmin_certs_acme_plugins',
-
-    isAdd: true,
-    isCreate: false,
-
-    width: 550,
-    url: '/cluster/acme/plugins/',
-
-    subject: 'ACME DNS Plugin',
-
-    items: [
-	{
-	    xtype: 'inputpanel',
-	    // we dynamically create fields from the given schema
-	    // things we have to do here:
-	    // * save which fields we created to remove them again
-	    // * split the data from the generic 'data' field into the boxes
-	    // * on deletion collect those values again
-	    // * save the original values of the data field
-	    createdFields: {},
-	    createdInitially: false,
-	    originalValues: {},
-	    createSchemaFields: function(schema) {
-		let me = this;
-		// we know where to add because we define it right below
-		let container = me.down('container');
-		let datafield = me.down('field[name=data]');
-		let hintfield = me.down('field[name=hint]');
-		if (!me.createdInitially) {
-		    [me.originalValues] = PVE.Parser.parseACMEPluginData(datafield.getValue());
-		}
-
-		// collect values from custom fields and add it to 'data'',
-		// then remove the custom fields
-		let data = [];
-		for (const [name, field] of Object.entries(me.createdFields)) {
-		    let value = field.getValue();
-		    if (value !== undefined && value !== null && value !== '') {
-			data.push(`${name}=${value}`);
-		    }
-		    container.remove(field);
-		}
-		let datavalue = datafield.getValue();
-		if (datavalue !== undefined && datavalue !== null && datavalue !== '') {
-		    data.push(datavalue);
-		}
-		datafield.setValue(data.join('\n'));
-
-		me.createdFields = {};
-
-		if (typeof schema.fields !== 'object') {
-		    schema.fields = {};
-		}
-		// create custom fields according to schema
-		let gotSchemaField = false;
-		let cmp = (a, b) => a[0].localeCompare(b[0]);
-		for (const [name, definition] of Object.entries(schema.fields).sort(cmp)) {
-		    let xtype;
-		    switch (definition.type) {
-			case 'string':
-			    xtype = 'proxmoxtextfield';
-			    break;
-			case 'integer':
-			    xtype = 'proxmoxintegerfield';
-			    break;
-			case 'number':
-			    xtype = 'numberfield';
-			    break;
-			default:
-			    console.warn(`unknown type '${definition.type}'`);
-			    xtype = 'proxmoxtextfield';
-			    break;
-		    }
-
-		    let label = name;
-		    if (typeof definition.name === "string") {
-			label = definition.name;
-		    }
-
-		    let field = Ext.create({
-			xtype,
-			name: `custom_${name}`,
-			fieldLabel: label,
-			width: '100%',
-			labelWidth: 150,
-			labelSeparator: '=',
-			emptyText: definition.default || '',
-			autoEl: definition.description ? {
-			    tag: 'div',
-			    'data-qtip': definition.description,
-			} : undefined,
-		    });
-
-		    me.createdFields[name] = field;
-		    container.add(field);
-		    gotSchemaField = true;
-		}
-		datafield.setHidden(gotSchemaField); // prefer schema-fields
-
-		if (schema.description) {
-		    hintfield.setValue(schema.description);
-		    hintfield.setHidden(false);
-		} else {
-		    hintfield.setValue('');
-		    hintfield.setHidden(true);
-		}
-
-		// parse data from field and set it to the custom ones
-		let extradata = [];
-		[data, extradata] = PVE.Parser.parseACMEPluginData(datafield.getValue());
-		for (const [key, value] of Object.entries(data)) {
-		    if (me.createdFields[key]) {
-			me.createdFields[key].setValue(value);
-			me.createdFields[key].originalValue = me.originalValues[key];
-		    } else {
-			extradata.push(`${key}=${value}`);
-		    }
-		}
-		datafield.setValue(extradata.join('\n'));
-		if (!me.createdInitially) {
-		    datafield.resetOriginalValue();
-		    me.createdInitially = true; // save that we initally set that
-		}
-	    },
-	    onGetValues: function(values) {
-		let me = this;
-		let win = me.up('pveACMEPluginEditor');
-		if (win.isCreate) {
-		    values.id = values.plugin;
-		    values.type = 'dns'; // the only one for now
-		}
-		delete values.plugin;
-
-		PVE.Utils.delete_if_default(values, 'validation-delay', '30', win.isCreate);
-
-		let data = '';
-		for (const [name, field] of Object.entries(me.createdFields)) {
-		    let value = field.getValue();
-		    if (value !== null && value !== undefined && value !== '') {
-			data += `${name}=${value}\n`;
-		    }
-		    delete values[`custom_${name}`];
-		}
-		values.data = Ext.util.Base64.encode(data + values.data);
-		return values;
-	    },
-	    items: [
-		{
-		    xtype: 'pmxDisplayEditField',
-		    cbind: {
-			editable: (get) => get('isCreate'),
-			submitValue: (get) => get('isCreate'),
-		    },
-		    editConfig: {
-			flex: 1,
-			xtype: 'proxmoxtextfield',
-			allowBlank: false,
-		    },
-		    name: 'plugin',
-		    labelWidth: 150,
-		    fieldLabel: gettext('Plugin ID'),
-		},
-		{
-		    xtype: 'proxmoxintegerfield',
-		    name: 'validation-delay',
-		    labelWidth: 150,
-		    fieldLabel: gettext('Validation Delay'),
-		    emptyText: 30,
-		    cbind: {
-			deleteEmpty: '{!isCreate}',
-		    },
-		    minValue: 0,
-		    maxValue: 48*60*60,
-		},
-		{
-		    xtype: 'pveACMEApiSelector',
-		    name: 'api',
-		    labelWidth: 150,
-		    listeners: {
-			change: function(selector) {
-			    let schema = selector.getSchema();
-			    selector.up('inputpanel').createSchemaFields(schema);
-			},
-		    },
-		},
-		{
-		    xtype: 'textarea',
-		    fieldLabel: gettext('API Data'),
-		    labelWidth: 150,
-		    name: 'data',
-		},
-		{
-		    xtype: 'displayfield',
-		    fieldLabel: gettext('Hint'),
-		    labelWidth: 150,
-		    name: 'hint',
-		    hidden: true,
-		},
-	    ],
-	},
-    ],
-
-    initComponent: function() {
-	var me = this;
-
-	me.callParent();
-
-	if (!me.isCreate) {
-	    me.load({
-		success: function(response, opts) {
-		    me.setValues(response.result.data);
-		},
-	    });
-	} else {
-	    me.method = 'POST';
-	}
-    },
-});
diff --git a/www/manager6/node/ACME.js b/www/manager6/node/ACME.js
index 7fe49171..8fd9ae22 100644
--- a/www/manager6/node/ACME.js
+++ b/www/manager6/node/ACME.js
@@ -233,72 +233,6 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 
 });
 
-Ext.define('PVE.node.ACMEAccountView', {
-    extend: 'Proxmox.window.Edit',
-
-    width: 600,
-    fieldDefaults: {
-	labelWidth: 140,
-    },
-
-    title: gettext('Account'),
-
-    items: [
-	{
-	    xtype: 'displayfield',
-	    fieldLabel: gettext('E-Mail'),
-	    name: 'email',
-	},
-	{
-	    xtype: 'displayfield',
-	    fieldLabel: gettext('Created'),
-	    name: 'createdAt',
-	},
-	{
-	    xtype: 'displayfield',
-	    fieldLabel: gettext('Status'),
-	    name: 'status',
-	},
-	{
-	    xtype: 'displayfield',
-	    fieldLabel: gettext('Directory'),
-	    renderer: PVE.Utils.render_optional_url,
-	    name: 'directory',
-	},
-	{
-	    xtype: 'displayfield',
-	    fieldLabel: gettext('Terms of Services'),
-	    renderer: PVE.Utils.render_optional_url,
-	    name: 'tos',
-	},
-    ],
-
-    initComponent: function() {
-	var me = this;
-
-	if (!me.accountname) {
-	    throw "no account name defined";
-	}
-
-	me.url = '/cluster/acme/account/' + me.accountname;
-
-	me.callParent();
-
-	// hide OK/Reset button, because we just want to show data
-	me.down('toolbar[dock=bottom]').setVisible(false);
-
-	me.load({
-	    success: function(response) {
-		var data = response.result.data;
-		data.email = data.account.contact[0];
-		data.createdAt = data.account.createdAt;
-		data.status = data.account.status;
-		me.setValues(data);
-	    },
-	});
-    },
-});
-
 Ext.define('PVE.node.ACMEDomainEdit', {
     extend: 'Proxmox.window.Edit',
     alias: 'widget.pveACMEDomainEdit',
-- 
2.39.2





More information about the pve-devel mailing list