www/manager6/dc/ACMEPluginEdit.js

   1 Ext.define('PVE.dc.ACMEPluginEditor', {
   2     extend: 'Proxmox.window.Edit',
   3     xtype: 'pveACMEPluginEditor',
   4     mixins: ['Proxmox.Mixin.CBind'],
   5
   6     isAdd: true,
   7     isCreate: false,
   8
   9     width: 400,
  10     url: '/cluster/acme/plugins/',
  11
  12     subject: gettext('Plugin'),
  13     items: [
  14         {
  15             xtype: 'inputpanel',
  16             // we dynamically create fields from the given schema
  17             // things we have to do here:
  18             // * save which fields we created to remove them again
  19             // * split the data from the generic 'data' field into the boxes
  20             // * on deletion collect those values again
  21             // * save the original values of the data field
  22             createdFields: {},
  23             createdInitially: false,
  24             originalValues: {},
  25             createSchemaFields: function(schema) {
  26                 let me = this;
  27                 // we know where to add because we define it right below
  28                 let container = me.down('container');
  29                 let datafield = me.down('field[name=data]');
  30                 if (!me.createdInitially) {
  31                     [me.originalValues] = PVE.Parser.parseACMEPluginData(datafield.getValue());
  32                 }
  33
  34                 // collect values from custom fields and add it to 'data'',
  35                 // then remove the custom fields
  36                 let data = [];
  37                 for (const [name, field] of Object.entries(me.createdFields)) {
  38                     let value = field.getValue();
  39                     if (value !== undefined && value !== null && value !== '') {
  40                         data.push(`${name}=${value}`);
  41                     }
  42                     container.remove(field);
  43                 }
  44                 let datavalue = datafield.getValue();
  45                 if (datavalue !== undefined && datavalue !== null && datavalue !== '') {
  46                     data.push(datavalue);
  47                 }
  48                 datafield.setValue(data.join('\n'));
  49
  50                 me.createdFields = {};
  51
  52                 if (typeof schema.fields !== 'object') {
  53                     schema.fields = {};
  54                 }
  55                 // create custom fields according to schema
  56                 let gotSchemaField = false;
  57                 for (const [name, definition] of Object.entries(schema.fields).sort((a, b) => a[0].localeCompare(b[0]))) {
  58                     let xtype;
  59                     switch (definition.type) {
  60                         case 'string':
  61                             xtype = 'proxmoxtextfield';
  62                             break;
  63                         case 'integer':
  64                             xtype = 'proxmoxintegerfield';
  65                             break;
  66                         case 'number':
  67                             xtype = 'numberfield';
  68                             break;
  69                         default:
  70                             console.warn(`unknown type '${definition.type}'`);
  71                             xtype = 'proxmoxtextfield';
  72                             break;
  73                     }
  74
  75                     let field = Ext.create({
  76                         xtype,
  77                         name: `custom_${name}`,
  78                         fieldLabel: name,
  79                         width: '100%',
  80                         labelWidth: 120,
  81                         emptyText: definition.default || '',
  82                         autoEl: definition.description ? {
  83                             tag: 'div',
  84                             'data-qtip': definition.description,
  85                         } : undefined,
  86                     });
  87
  88                     me.createdFields[name] = field;
  89                     container.add(field);
  90                     gotSchemaField = true;
  91                 }
  92                 datafield.setHidden(gotSchemaField); // prefer schema-fields
  93
  94                 // parse data from field and set it to the custom ones
  95                 let extradata = [];
  96                 [data, extradata] = PVE.Parser.parseACMEPluginData(datafield.getValue());
  97                 for (const [key, value] of Object.entries(data)) {
  98                     if (me.createdFields[key]) {
  99                         me.createdFields[key].setValue(value);
 100                         me.createdFields[key].originalValue = me.originalValues[key];
 101                     } else {
 102                         extradata.push(`${key}=${value}`);
 103                     }
 104                 }
 105                 datafield.setValue(extradata.join('\n'));
 106                 if (!me.createdInitially) {
 107                     datafield.resetOriginalValue();
 108                     me.createdInitially = true; // save that we initally set that
 109                 }
 110             },
 111             onGetValues: function(values) {
 112                 let me = this;
 113                 let win = me.up('pveACMEPluginEditor');
 114                 if (win.isCreate) {
 115                     values.id = values.plugin;
 116                     values.type = 'dns'; // the only one for now
 117                 }
 118                 delete values.plugin;
 119
 120                 PVE.Utils.delete_if_default(values, 'validation-delay', '30', win.isCreate);
 121
 122                 let data = '';
 123                 for (const [name, field] of Object.entries(me.createdFields)) {
 124                     let value = field.getValue();
 125                     if (value !== null && value !== undefined && value !== '') {
 126                         data += `${name}=${value}\n`;
 127                     }
 128                     delete values[`custom_${name}`];
 129                 }
 130                 values.data = Ext.util.Base64.encode(data + values.data);
 131                 return values;
 132             },
 133             items: [
 134                 {
 135                     xtype: 'pmxDisplayEditField',
 136                     cbind: {
 137                         editable: (get) => get('isCreate'),
 138                         submitValue: (get) => get('isCreate'),
 139                     },
 140                     editConfig: {
 141                         flex: 1,
 142                         xtype: 'proxmoxtextfield',
 143                         allowBlank: false,
 144                     },
 145                     name: 'plugin',
 146                     labelWidth: 120,
 147                     fieldLabel: gettext('Plugin'),
 148                 },
 149                 {
 150                     xtype: 'proxmoxintegerfield',
 151                     name: 'validation-delay',
 152                     labelWidth: 120,
 153                     fieldLabel: gettext('Validation Delay'),
 154                     emptyText: 30,
 155                     cbind: {
 156                         deleteEmpty: '{!isCreate}',
 157                     },
 158                     minValue: 0,
 159                     maxValue: 172800,
 160                 },
 161                 {
 162                     xtype: 'pveACMEApiSelector',
 163                     name: 'api',
 164                     labelWidth: 120,
 165                     listeners: {
 166                         change: function(selector) {
 167                             let schema = selector.getSchema();
 168                             selector.up('inputpanel').createSchemaFields(schema);
 169                         },
 170                     },
 171                 },
 172                 {
 173                     fieldLabel: gettext('API Data'),
 174                     labelWidth: 120,
 175                     xtype: 'textarea',
 176                     name: 'data',
 177                 },
 178             ],
 179         },
 180     ],
 181
 182     initComponent: function() {
 183         var me = this;
 184
 185         me.callParent();
 186
 187         if (!me.isCreate) {
 188             me.load({
 189                 success: function(response, opts) {
 190                     me.setValues(response.result.data);
 191                 },
 192             });
 193         } else {
 194             me.method = 'POST';
 195         }
 196     },
 197 });