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                 for (const [name, definition] of Object.entries(schema.fields)) {
  57                     let xtype;
  58                     switch (definition.type) {
  59                         case 'string':
  60                             xtype = 'proxmoxtextfield';
  61                             break;
  62                         case 'integer':
  63                             xtype = 'proxmoxintegerfield';
  64                             break;
  65                         case 'number':
  66                             xtype = 'numberfield';
  67                             break;
  68                         default:
  69                             console.warn(`unknown type '${definition.type}'`);
  70                             xtype = 'proxmoxtextfield';
  71                             break;
  72                     }
  73
  74                     let field = Ext.create({
  75                         xtype,
  76                         name: `custom_${name}`,
  77                         fieldLabel: name,
  78                         width: '100%',
  79                         labelWidth: 120,
  80                         autoEl: definition.description ? {
  81                             tag: 'div',
  82                             'data-qtip': definition.description,
  83                         } : undefined,
  84                     });
  85
  86                     me.createdFields[name] = field;
  87                     container.add(field);
  88                 }
  89
  90                 // parse data from field and set it to the custom ones
  91                 let extradata = [];
  92                 [data, extradata] = PVE.Parser.parseACMEPluginData(datafield.getValue());
  93                 for (const [key, value] of Object.entries(data)) {
  94                     if (me.createdFields[key]) {
  95                         me.createdFields[key].setValue(value);
  96                         me.createdFields[key].originalValue = me.originalValues[key];
  97                     } else {
  98                         extradata.push(`${key}=${value}`);
  99                     }
 100                 }
 101                 datafield.setValue(extradata.join('\n'));
 102                 if (!me.createdInitially) {
 103                     datafield.resetOriginalValue();
 104                     me.createdInitially = true; // save that we initally set that
 105                 }
 106             },
 107             onGetValues: function(values) {
 108                 let me = this;
 109                 let win = me.up('pveACMEPluginEditor');
 110                 if (win.isCreate) {
 111                     values.id = values.plugin;
 112                     values.type = 'dns'; // the only one for now
 113                 }
 114                 delete values.plugin;
 115
 116                 PVE.Utils.delete_if_default(values, 'validation-delay', '30', win.isCreate);
 117
 118                 let data = '';
 119                 for (const [name, field] of Object.entries(me.createdFields)) {
 120                     let value = field.getValue();
 121                     if (value !== null && value !== undefined && value !== '') {
 122                         data += `${name}=${value}\n`;
 123                     }
 124                     delete values[`custom_${name}`];
 125                 }
 126                 values.data = Ext.util.Base64.encode(data + values.data);
 127                 return values;
 128             },
 129             items: [
 130                 {
 131                     xtype: 'pmxDisplayEditField',
 132                     cbind: {
 133                         editable: (get) => get('isCreate'),
 134                         submitValue: (get) => get('isCreate'),
 135                     },
 136                     editConfig: {
 137                         flex: 1,
 138                         xtype: 'proxmoxtextfield',
 139                         allowBlank: false,
 140                     },
 141                     name: 'plugin',
 142                     labelWidth: 120,
 143                     fieldLabel: gettext('Plugin'),
 144                 },
 145                 {
 146                     xtype: 'proxmoxintegerfield',
 147                     name: 'validation-delay',
 148                     labelWidth: 120,
 149                     fieldLabel: gettext('Validation Delay'),
 150                     emptyText: 30,
 151                     cbind: {
 152                         deleteEmpty: '{!isCreate}',
 153                     },
 154                     minValue: 0,
 155                     maxValue: 172800,
 156                 },
 157                 {
 158                     xtype: 'pveACMEApiSelector',
 159                     name: 'api',
 160                     labelWidth: 120,
 161                     listeners: {
 162                         change: function(selector) {
 163                             let schema = selector.getSchema();
 164                             selector.up('inputpanel').createSchemaFields(schema);
 165                         },
 166                     },
 167                 },
 168                 {
 169                     fieldLabel: gettext('API Data'),
 170                     labelWidth: 120,
 171                     xtype: 'textarea',
 172                     name: 'data',
 173                 },
 174             ],
 175         },
 176     ],
 177
 178     initComponent: function() {
 179         var me = this;
 180
 181         me.callParent();
 182
 183         if (!me.isCreate) {
 184             me.load({
 185                 success: function(response, opts) {
 186                     me.setValues(response.result.data);
 187                 },
 188             });
 189         } else {
 190             me.method = 'POST';
 191         }
 192     },
 193 });