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