www/manager6/dc/OptionView.js

   1 Ext.define('PVE.dc.OptionView', {
   2     extend: 'Proxmox.grid.ObjectGrid',
   3     alias: ['widget.pveDcOptionView'],
   4
   5     onlineHelp: 'datacenter_configuration_file',
   6
   7     monStoreErrors: true,
   8     userCls: 'proxmox-tags-full',
   9
  10     add_inputpanel_row: function(name, text, opts) {
  11         var me = this;
  12
  13         opts = opts || {};
  14         me.rows = me.rows || {};
  15
  16         let canEdit = !Object.prototype.hasOwnProperty.call(opts, 'caps') || opts.caps;
  17         me.rows[name] = {
  18             required: true,
  19             defaultValue: opts.defaultValue,
  20             header: text,
  21             renderer: opts.renderer,
  22             editor: canEdit ? {
  23                 xtype: 'proxmoxWindowEdit',
  24                 width: opts.width || 350,
  25                 subject: text,
  26                 onlineHelp: opts.onlineHelp,
  27                 fieldDefaults: {
  28                     labelWidth: opts.labelWidth || 100,
  29                 },
  30                 setValues: function(values) {
  31                     var edit_value = values[name];
  32
  33                     if (opts.parseBeforeSet) {
  34                         edit_value = PVE.Parser.parsePropertyString(edit_value);
  35                     }
  36
  37                     Ext.Array.each(this.query('inputpanel'), function(panel) {
  38                         panel.setValues(edit_value);
  39                     });
  40                 },
  41                 url: opts.url,
  42                 items: [{
  43                     xtype: 'inputpanel',
  44                     onGetValues: function(values) {
  45                         if (values === undefined || Object.keys(values).length === 0) {
  46                             return { 'delete': name };
  47                         }
  48                         var ret_val = {};
  49                         ret_val[name] = PVE.Parser.printPropertyString(values);
  50                         return ret_val;
  51                     },
  52                     items: opts.items,
  53                 }],
  54             } : undefined,
  55         };
  56     },
  57
  58     render_bwlimits: function(value) {
  59         if (!value) {
  60             return gettext("None");
  61         }
  62
  63         let parsed = PVE.Parser.parsePropertyString(value);
  64         return Object.entries(parsed)
  65             .map(([k, v]) => k + ": " + Proxmox.Utils.format_size(v * 1024) + "/s")
  66             .join(',');
  67     },
  68
  69     initComponent: function() {
  70         var me = this;
  71
  72         me.add_combobox_row('keyboard', gettext('Keyboard Layout'), {
  73             renderer: PVE.Utils.render_kvm_language,
  74             comboItems: Object.entries(PVE.Utils.kvm_keymaps),
  75             defaultValue: '__default__',
  76             deleteEmpty: true,
  77         });
  78         me.add_text_row('http_proxy', gettext('HTTP proxy'), {
  79             defaultValue: Proxmox.Utils.noneText,
  80             vtype: 'HttpProxy',
  81             deleteEmpty: true,
  82         });
  83         me.add_combobox_row('console', gettext('Console Viewer'), {
  84             renderer: PVE.Utils.render_console_viewer,
  85             comboItems: Object.entries(PVE.Utils.console_map),
  86             defaultValue: '__default__',
  87             deleteEmpty: true,
  88         });
  89         me.add_text_row('email_from', gettext('Email from address'), {
  90             deleteEmpty: true,
  91             vtype: 'proxmoxMail',
  92             defaultValue: 'root@$hostname',
  93         });
  94         me.add_text_row('mac_prefix', gettext('MAC address prefix'), {
  95             deleteEmpty: true,
  96             vtype: 'MacPrefix',
  97             defaultValue: Proxmox.Utils.noneText,
  98         });
  99         me.add_inputpanel_row('migration', gettext('Migration Settings'), {
 100             renderer: PVE.Utils.render_as_property_string,
 101             labelWidth: 120,
 102             url: "/api2/extjs/cluster/options",
 103             defaultKey: 'type',
 104             items: [{
 105                 xtype: 'displayfield',
 106                 name: 'type',
 107                 fieldLabel: gettext('Type'),
 108                 value: 'secure',
 109                 submitValue: true,
 110             }, {
 111                 xtype: 'proxmoxNetworkSelector',
 112                 name: 'network',
 113                 fieldLabel: gettext('Network'),
 114                 value: null,
 115                 emptyText: Proxmox.Utils.defaultText,
 116                 autoSelect: false,
 117                 skipEmptyText: true,
 118             }],
 119         });
 120         me.add_inputpanel_row('ha', gettext('HA Settings'), {
 121             renderer: PVE.Utils.render_dc_ha_opts,
 122             labelWidth: 120,
 123             url: "/api2/extjs/cluster/options",
 124             onlineHelp: 'ha_manager_shutdown_policy',
 125             items: [{
 126                 xtype: 'proxmoxKVComboBox',
 127                 name: 'shutdown_policy',
 128                 fieldLabel: gettext('Shutdown Policy'),
 129                 deleteEmpty: false,
 130                 value: '__default__',
 131                 comboItems: [
 132                     ['__default__', Proxmox.Utils.defaultText + ' (conditional)'],
 133                     ['freeze', 'freeze'],
 134                     ['failover', 'failover'],
 135                     ['migrate', 'migrate'],
 136                     ['conditional', 'conditional'],
 137                 ],
 138                 defaultValue: '__default__',
 139             }],
 140         });
 141         me.add_inputpanel_row('crs', gettext('Cluster Resource Scheduling'), {
 142             renderer: PVE.Utils.render_as_property_string,
 143             width: 450,
 144             labelWidth: 120,
 145             url: "/api2/extjs/cluster/options",
 146             onlineHelp: 'ha_manager_crs',
 147             items: [{
 148                 xtype: 'proxmoxKVComboBox',
 149                 name: 'ha',
 150                 fieldLabel: gettext('HA Scheduling'),
 151                 deleteEmpty: false,
 152                 value: '__default__',
 153                 comboItems: [
 154                     ['__default__', Proxmox.Utils.defaultText + ' (basic)'],
 155                     ['basic', 'Basic (Resource Count)'],
 156                     ['static', 'Static Load'],
 157                 ],
 158                 defaultValue: '__default__',
 159             }, {
 160                 xtype: 'proxmoxcheckbox',
 161                 name: 'ha-rebalance-on-start',
 162                 fieldLabel: gettext('Rebalance on Start'),
 163                 boxLabel: gettext('Use CRS to select the least loaded node when starting an HA service'),
 164                 value: 0,
 165             }],
 166         });
 167         me.add_inputpanel_row('u2f', gettext('U2F Settings'), {
 168             renderer: v => !v ? Proxmox.Utils.NoneText : PVE.Parser.printPropertyString(v),
 169             width: 450,
 170             url: "/api2/extjs/cluster/options",
 171             onlineHelp: 'pveum_configure_u2f',
 172             items: [{
 173                 xtype: 'textfield',
 174                 name: 'appid',
 175                 fieldLabel: gettext('U2F AppID URL'),
 176                 emptyText: gettext('Defaults to origin'),
 177                 value: '',
 178                 deleteEmpty: true,
 179                 skipEmptyText: true,
 180                 submitEmptyText: false,
 181             }, {
 182                 xtype: 'textfield',
 183                 name: 'origin',
 184                 fieldLabel: gettext('U2F Origin'),
 185                 emptyText: gettext('Defaults to requesting host URI'),
 186                 value: '',
 187                 deleteEmpty: true,
 188                 skipEmptyText: true,
 189                 submitEmptyText: false,
 190             },
 191             {
 192                 xtype: 'box',
 193                 height: 25,
 194                 html: `<span class='pmx-hint'>${gettext('Note:')}</span> `
 195                     + Ext.String.format(gettext('{0} is deprecated, use {1}'), 'U2F', 'WebAuthn'),
 196             },
 197             {
 198                 xtype: 'displayfield',
 199                 userCls: 'pmx-hint',
 200                 value: gettext('NOTE: Changing an AppID breaks existing U2F registrations!'),
 201             }],
 202         });
 203         me.add_inputpanel_row('webauthn', gettext('WebAuthn Settings'), {
 204             renderer: v => !v ? Proxmox.Utils.NoneText : PVE.Parser.printPropertyString(v),
 205             width: 450,
 206             url: "/api2/extjs/cluster/options",
 207             onlineHelp: 'pveum_configure_webauthn',
 208             items: [{
 209                 xtype: 'textfield',
 210                 fieldLabel: gettext('Name'),
 211                 name: 'rp', // NOTE: relying party consists of name and id, this is the name
 212                 allowBlank: false,
 213             },
 214             {
 215                 xtype: 'textfield',
 216                 fieldLabel: gettext('Origin'),
 217                 emptyText: Ext.String.format(gettext("Domain Lockdown (e.g., {0})"), document.location.origin),
 218                 name: 'origin',
 219                 allowBlank: true,
 220             },
 221             {
 222                 xtype: 'textfield',
 223                 fieldLabel: 'ID',
 224                 name: 'id',
 225                 allowBlank: false,
 226                 listeners: {
 227                     dirtychange: (f, isDirty) =>
 228                         f.up('panel').down('box[id=idChangeWarning]').setHidden(!f.originalValue || !isDirty),
 229                 },
 230             },
 231             {
 232                 xtype: 'container',
 233                 layout: 'hbox',
 234                 items: [
 235                     {
 236                         xtype: 'box',
 237                         flex: 1,
 238                     },
 239                     {
 240                         xtype: 'button',
 241                         text: gettext('Auto-fill'),
 242                         iconCls: 'fa fa-fw fa-pencil-square-o',
 243                         handler: function(button, ev) {
 244                             let panel = this.up('panel');
 245                             let fqdn = document.location.hostname;
 246
 247                             panel.down('field[name=rp]').setValue(fqdn);
 248
 249                             let idField = panel.down('field[name=id]');
 250                             let currentID = idField.getValue();
 251                             if (!currentID || currentID.length === 0) {
 252                                 idField.setValue(fqdn);
 253                             }
 254                         },
 255                     },
 256                 ],
 257             },
 258             {
 259                 xtype: 'box',
 260                 height: 25,
 261                 html: `<span class='pmx-hint'>${gettext('Note:')}</span> `
 262                     + gettext('WebAuthn requires using a trusted certificate.'),
 263             },
 264             {
 265                 xtype: 'box',
 266                 id: 'idChangeWarning',
 267                 hidden: true,
 268                 padding: '5 0 0 0',
 269                 html: '<i class="fa fa-exclamation-triangle warning"></i> '
 270                     + gettext('Changing the ID breaks existing WebAuthn TFA entries.'),
 271             }],
 272         });
 273         me.add_inputpanel_row('bwlimit', gettext('Bandwidth Limits'), {
 274             renderer: me.render_bwlimits,
 275             width: 450,
 276             url: "/api2/extjs/cluster/options",
 277             parseBeforeSet: true,
 278             labelWidth: 120,
 279             items: [{
 280                 xtype: 'pveBandwidthField',
 281                 name: 'default',
 282                 fieldLabel: gettext('Default'),
 283                 emptyText: gettext('none'),
 284                 backendUnit: "KiB",
 285             },
 286             {
 287                 xtype: 'pveBandwidthField',
 288                 name: 'restore',
 289                 fieldLabel: gettext('Backup Restore'),
 290                 emptyText: gettext('default'),
 291                 backendUnit: "KiB",
 292             },
 293             {
 294                 xtype: 'pveBandwidthField',
 295                 name: 'migration',
 296                 fieldLabel: gettext('Migration'),
 297                 emptyText: gettext('default'),
 298                 backendUnit: "KiB",
 299             },
 300             {
 301                 xtype: 'pveBandwidthField',
 302                 name: 'clone',
 303                 fieldLabel: gettext('Clone'),
 304                 emptyText: gettext('default'),
 305                 backendUnit: "KiB",
 306             },
 307             {
 308                 xtype: 'pveBandwidthField',
 309                 name: 'move',
 310                 fieldLabel: gettext('Disk Move'),
 311                 emptyText: gettext('default'),
 312                 backendUnit: "KiB",
 313             }],
 314         });
 315         me.add_integer_row('max_workers', gettext('Maximal Workers/bulk-action'), {
 316             deleteEmpty: true,
 317             defaultValue: 4,
 318             minValue: 1,
 319             maxValue: 64, // arbitrary but generous limit as limits are good
 320         });
 321         me.add_inputpanel_row('next-id', gettext('Next Free VMID Range'), {
 322             renderer: PVE.Utils.render_as_property_string,
 323             url: "/api2/extjs/cluster/options",
 324             items: [{
 325                 xtype: 'proxmoxintegerfield',
 326                 name: 'lower',
 327                 fieldLabel: gettext('Lower'),
 328                 emptyText: '100',
 329                 minValue: 100,
 330                 maxValue: 1000 * 1000 * 1000 - 1,
 331                 submitValue: true,
 332             }, {
 333                 xtype: 'proxmoxintegerfield',
 334                 name: 'upper',
 335                 fieldLabel: gettext('Upper'),
 336                 emptyText: '1.000.000',
 337                 minValue: 100,
 338                 maxValue: 1000 * 1000 * 1000 - 1,
 339                 submitValue: true,
 340             }],
 341         });
 342         me.rows['tag-style'] = {
 343             required: true,
 344             renderer: (value) => {
 345                 if (value === undefined) {
 346                     return gettext('No Overrides');
 347                 }
 348                 let colors = PVE.UIOptions.parseTagOverrides(value?.['color-map']);
 349                 let shape = value.shape;
 350                 let shapeText = PVE.UIOptions.tagTreeStyles[shape ?? '__default__'];
 351                 let txt = Ext.String.format(gettext("Tree Shape: {0}"), shapeText);
 352                 let orderText = PVE.UIOptions.tagOrderOptions[value.ordering ?? '__default__'];
 353                 txt += `, ${Ext.String.format(gettext("Ordering: {0}"), orderText)}`;
 354                 if (value['case-sensitive']) {
 355                     txt += `, ${gettext('Case-Sensitive')}`;
 356                 }
 357                 if (Object.keys(colors).length > 0) {
 358                     txt += `, ${gettext('Color Overrides')}: `;
 359                     for (const tag of Object.keys(colors)) {
 360                         txt += Proxmox.Utils.getTagElement(tag, colors);
 361                     }
 362                 }
 363                 return txt;
 364             },
 365             header: gettext('Tag Style Override'),
 366             editor: {
 367                 xtype: 'proxmoxWindowEdit',
 368                 width: 800,
 369                 subject: gettext('Tag Color Override'),
 370                 onlineHelp: 'datacenter_configuration_file',
 371                 fieldDefaults: {
 372                     labelWidth: 100,
 373                 },
 374                 url: '/api2/extjs/cluster/options',
 375                 items: [
 376                     {
 377                         xtype: 'inputpanel',
 378                         setValues: function(values) {
 379                             if (values === undefined) {
 380                                 return undefined;
 381                             }
 382                             values = values?.['tag-style'] ?? {};
 383                             values.shape = values.shape || '__default__';
 384                             values.colors = values['color-map'];
 385                             return Proxmox.panel.InputPanel.prototype.setValues.call(this, values);
 386                         },
 387                         onGetValues: function(values) {
 388                             let style = {};
 389                             if (values.colors) {
 390                                 style['color-map'] = values.colors;
 391                             }
 392                             if (values.shape && values.shape !== '__default__') {
 393                                 style.shape = values.shape;
 394                             }
 395                             if (values.ordering) {
 396                                 style.ordering = values.ordering;
 397                             }
 398                             if (values['case-sensitive']) {
 399                                 style['case-sensitive'] = 1;
 400                             }
 401                             let value = PVE.Parser.printPropertyString(style);
 402                             if (value === '') {
 403                                 return {
 404                                     'delete': 'tag-style',
 405                                 };
 406                             }
 407                             return {
 408                                 'tag-style': value,
 409                             };
 410                         },
 411                         items: [
 412                             {
 413
 414                                 name: 'shape',
 415                                 xtype: 'proxmoxComboGrid',
 416                                 fieldLabel: gettext('Tree Shape'),
 417                                 valueField: 'value',
 418                                 displayField: 'display',
 419                                 allowBlank: false,
 420                                 listConfig: {
 421                                     columns: [
 422                                         {
 423                                             header: gettext('Option'),
 424                                             dataIndex: 'display',
 425                                             flex: 1,
 426                                         },
 427                                         {
 428                                             header: gettext('Preview'),
 429                                             dataIndex: 'value',
 430                                             renderer: function(value) {
 431                                                 let cls = value ?? '__default__';
 432                                                 if (value === '__default__') {
 433                                                     cls = 'circle';
 434                                                 }
 435                                                 let tags = PVE.Utils.renderTags('preview');
 436                                                 return `<div class="proxmox-tags-${cls}">${tags}</div>`;
 437                                             },
 438                                             flex: 1,
 439                                         },
 440                                     ],
 441                                 },
 442                                 store: {
 443                                     data: Object.entries(PVE.UIOptions.tagTreeStyles).map(v => ({
 444                                         value: v[0],
 445                                         display: v[1],
 446                                     })),
 447                                 },
 448                                 deleteDefault: true,
 449                                 defaultValue: '__default__',
 450                                 deleteEmpty: true,
 451                             },
 452                             {
 453                                 name: 'ordering',
 454                                 xtype: 'proxmoxKVComboBox',
 455                                 fieldLabel: gettext('Ordering'),
 456                                 comboItems: Object.entries(PVE.UIOptions.tagOrderOptions),
 457                                 defaultValue: '__default__',
 458                                 value: '__default__',
 459                                 deleteEmpty: true,
 460                             },
 461                             {
 462                                 name: 'case-sensitive',
 463                                 xtype: 'proxmoxcheckbox',
 464                                 fieldLabel: gettext('Case-Sensitive'),
 465                                 boxLabel: gettext('Applies to new edits'),
 466                                 value: 0,
 467                             },
 468                             {
 469                                 xtype: 'displayfield',
 470                                 fieldLabel: gettext('Color Overrides'),
 471                             },
 472                             {
 473                                 name: 'colors',
 474                                 xtype: 'pveTagColorGrid',
 475                                 deleteEmpty: true,
 476                                 height: 300,
 477                             },
 478                         ],
 479                     },
 480                 ],
 481             },
 482         };
 483
 484         me.rows['user-tag-access'] = {
 485             required: true,
 486             renderer: (value) => {
 487                 if (value === undefined) {
 488                     return Ext.String.format(gettext('Mode: {0}'), 'free');
 489                 }
 490                 let mode = value?.['user-allow'] ?? 'free';
 491                 let list = value?.['user-allow-list']?.join(',') ?? '';
 492                 let modeTxt = Ext.String.format(gettext('Mode: {0}'), mode);
 493                 let overrides = PVE.UIOptions.tagOverrides;
 494                 let tags = PVE.Utils.renderTags(list, overrides);
 495                 let listTxt = tags !== '' ? `, ${gettext('Pre-defined:')} ${tags}` : '';
 496                 return `${modeTxt}${listTxt}`;
 497             },
 498             header: gettext('User Tag Access'),
 499             editor: {
 500                 xtype: 'pveUserTagAccessEdit',
 501             },
 502         };
 503
 504         me.rows['registered-tags'] = {
 505             required: true,
 506             renderer: (value) => {
 507                 if (value === undefined) {
 508                     return gettext('No Registered Tags');
 509                 }
 510                 let overrides = PVE.UIOptions.tagOverrides;
 511                 return PVE.Utils.renderTags(value.join(','), overrides);
 512             },
 513             header: gettext('Registered Tags'),
 514             editor: {
 515                 xtype: 'pveRegisteredTagEdit',
 516             },
 517         };
 518
 519         me.selModel = Ext.create('Ext.selection.RowModel', {});
 520
 521         Ext.apply(me, {
 522             tbar: [{
 523                 text: gettext('Edit'),
 524                 xtype: 'proxmoxButton',
 525                 disabled: true,
 526                 handler: function() { me.run_editor(); },
 527                 selModel: me.selModel,
 528             }],
 529             url: "/api2/json/cluster/options",
 530             editorConfig: {
 531                 url: "/api2/extjs/cluster/options",
 532             },
 533             interval: 5000,
 534             cwidth1: 200,
 535             listeners: {
 536                 itemdblclick: me.run_editor,
 537             },
 538         });
 539
 540         me.callParent();
 541
 542         // set the new value for the default console
 543         me.mon(me.rstore, 'load', function(store, records, success) {
 544             if (!success) {
 545                 return;
 546             }
 547
 548             var rec = store.getById('console');
 549             PVE.UIOptions.options.console = rec.data.value;
 550             if (rec.data.value === '__default__') {
 551                 delete PVE.UIOptions.options.console;
 552             }
 553
 554             PVE.UIOptions.options['tag-style'] = store.getById('tag-style')?.data?.value;
 555             PVE.UIOptions.updateTagSettings(PVE.UIOptions.options['tag-style']);
 556             PVE.UIOptions.fireUIConfigChanged();
 557         });
 558
 559         me.on('activate', me.rstore.startUpdate);
 560         me.on('destroy', me.rstore.stopUpdate);
 561         me.on('deactivate', me.rstore.stopUpdate);
 562     },
 563 });