src/Toolkit.js

   1 // ExtJS related things
   2
   3  // do not send '_dc' parameter
   4 Ext.Ajax.disableCaching = false;
   5
   6 // custom Vtypes
   7 Ext.apply(Ext.form.field.VTypes, {
   8     IPAddress: function(v) {
   9         return Proxmox.Utils.IP4_match.test(v);
  10     },
  11     IPAddressText: gettext('Example') + ': 192.168.1.1',
  12     IPAddressMask: /[\d.]/i,
  13
  14     IPCIDRAddress: function(v) {
  15         let result = Proxmox.Utils.IP4_cidr_match.exec(v);
  16         // limits according to JSON Schema see
  17         // pve-common/src/PVE/JSONSchema.pm
  18         return result !== null && result[1] >= 8 && result[1] <= 32;
  19     },
  20     IPCIDRAddressText: gettext('Example') + ': 192.168.1.1/24<br>' + gettext('Valid CIDR Range') + ': 8-32',
  21     IPCIDRAddressMask: /[\d./]/i,
  22
  23     IP6Address: function(v) {
  24         return Proxmox.Utils.IP6_match.test(v);
  25     },
  26     IP6AddressText: gettext('Example') + ': 2001:DB8::42',
  27     IP6AddressMask: /[A-Fa-f0-9:]/,
  28
  29     IP6CIDRAddress: function(v) {
  30         let result = Proxmox.Utils.IP6_cidr_match.exec(v);
  31         // limits according to JSON Schema see
  32         // pve-common/src/PVE/JSONSchema.pm
  33         return result !== null && result[1] >= 8 && result[1] <= 128;
  34     },
  35     IP6CIDRAddressText: gettext('Example') + ': 2001:DB8::42/64<br>' + gettext('Valid CIDR Range') + ': 8-128',
  36     IP6CIDRAddressMask: /[A-Fa-f0-9:/]/,
  37
  38     IP6PrefixLength: function(v) {
  39         return v >= 0 && v <= 128;
  40     },
  41     IP6PrefixLengthText: gettext('Example') + ': X, where 0 <= X <= 128',
  42     IP6PrefixLengthMask: /[0-9]/,
  43
  44     IP64Address: function(v) {
  45         return Proxmox.Utils.IP64_match.test(v);
  46     },
  47     IP64AddressText: gettext('Example') + ': 192.168.1.1 2001:DB8::42',
  48     IP64AddressMask: /[A-Fa-f0-9.:]/,
  49
  50     IP64CIDRAddress: function(v) {
  51         let result = Proxmox.Utils.IP64_cidr_match.exec(v);
  52         if (result === null) {
  53             return false;
  54         }
  55         if (result[1] !== undefined) {
  56             return result[1] >= 8 && result[1] <= 128;
  57         } else if (result[2] !== undefined) {
  58             return result[2] >= 8 && result[2] <= 32;
  59         } else {
  60             return false;
  61         }
  62     },
  63     IP64CIDRAddressText: gettext('Example') + ': 192.168.1.1/24 2001:DB8::42/64',
  64     IP64CIDRAddressMask: /[A-Fa-f0-9.:/]/,
  65
  66     MacAddress: function(v) {
  67         return (/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/).test(v);
  68     },
  69     MacAddressMask: /[a-fA-F0-9:]/,
  70     MacAddressText: gettext('Example') + ': 01:23:45:67:89:ab',
  71
  72     MacPrefix: function(v) {
  73         return (/^[a-f0-9][02468ace](?::[a-f0-9]{2}){0,2}:?$/i).test(v);
  74     },
  75     MacPrefixMask: /[a-fA-F0-9:]/,
  76     MacPrefixText: gettext('Example') + ': 02:8f - ' + gettext('only unicast addresses are allowed'),
  77
  78     BridgeName: function(v) {
  79         return (/^vmbr\d{1,4}$/).test(v);
  80     },
  81     VlanName: function(v) {
  82        if (Proxmox.Utils.VlanInterface_match.test(v)) {
  83          return true;
  84        } else if (Proxmox.Utils.Vlan_match.test(v)) {
  85          return true;
  86        }
  87        return true;
  88     },
  89     BridgeNameText: gettext('Format') + ': vmbr<b>N</b>, where 0 <= <b>N</b> <= 9999',
  90
  91     BondName: function(v) {
  92         return (/^bond\d{1,4}$/).test(v);
  93     },
  94     BondNameText: gettext('Format') + ': bond<b>N</b>, where 0 <= <b>N</b> <= 9999',
  95
  96     InterfaceName: function(v) {
  97         return (/^[a-z][a-z0-9_]{1,20}$/).test(v);
  98     },
  99     InterfaceNameText: gettext("Allowed characters") + ": 'a-z', '0-9', '_'<br />" +
 100                        gettext("Minimum characters") + ": 2<br />" +
 101                        gettext("Maximum characters") + ": 21<br />" +
 102                        gettext("Must start with") + ": 'a-z'",
 103
 104     StorageId: function(v) {
 105         return (/^[a-z][a-z0-9\-_.]*[a-z0-9]$/i).test(v);
 106     },
 107     StorageIdText: gettext("Allowed characters") + ":  'A-Z', 'a-z', '0-9', '-', '_', '.'<br />" +
 108                    gettext("Minimum characters") + ": 2<br />" +
 109                    gettext("Must start with") + ": 'A-Z', 'a-z'<br />" +
 110                    gettext("Must end with") + ": 'A-Z', 'a-z', '0-9'<br />",
 111
 112     ConfigId: function(v) {
 113         return (/^[a-z][a-z0-9_]+$/i).test(v);
 114     },
 115     ConfigIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '_'<br />" +
 116                   gettext("Minimum characters") + ": 2<br />" +
 117                   gettext("Must start with") + ": " + gettext("letter"),
 118
 119     HttpProxy: function(v) {
 120         return (/^http:\/\/.*$/).test(v);
 121     },
 122     HttpProxyText: gettext('Example') + ": http://username:password&#64;host:port/",
 123
 124     DnsName: function(v) {
 125         return Proxmox.Utils.DnsName_match.test(v);
 126     },
 127     DnsNameText: gettext('This is not a valid DNS name'),
 128
 129     DnsNameOrWildcard: function(v) {
 130         return Proxmox.Utils.DnsName_or_Wildcard_match.test(v);
 131     },
 132     DnsNameOrWildcardText: gettext('This is not a valid DNS name'),
 133
 134     // workaround for https://www.sencha.com/forum/showthread.php?302150
 135     proxmoxMail: function(v) {
 136         return (/^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,63}$/).test(v);
 137     },
 138     proxmoxMailText: gettext('Example') + ": user@example.com",
 139
 140     DnsOrIp: function(v) {
 141         if (!Proxmox.Utils.DnsName_match.test(v) &&
 142             !Proxmox.Utils.IP64_match.test(v)) {
 143             return false;
 144         }
 145
 146         return true;
 147     },
 148     DnsOrIpText: gettext('Not a valid DNS name or IP address.'),
 149
 150     HostPort: function(v) {
 151         return Proxmox.Utils.HostPort_match.test(v) ||
 152                 Proxmox.Utils.HostPortBrackets_match.test(v) ||
 153                 Proxmox.Utils.IP6_dotnotation_match.test(v);
 154     },
 155     HostPortText: gettext('Host/IP address or optional port is invalid'),
 156
 157     HostList: function(v) {
 158         let list = v.split(/[ ,;]+/);
 159         let i;
 160         for (i = 0; i < list.length; i++) {
 161             if (list[i] === '') {
 162                 continue;
 163             }
 164
 165             if (!Proxmox.Utils.HostPort_match.test(list[i]) &&
 166                 !Proxmox.Utils.HostPortBrackets_match.test(list[i]) &&
 167                 !Proxmox.Utils.IP6_dotnotation_match.test(list[i])) {
 168                 return false;
 169             }
 170         }
 171
 172         return true;
 173     },
 174     HostListText: gettext('Not a valid list of hosts'),
 175
 176     password: function(val, field) {
 177         if (field.initialPassField) {
 178             let pwd = field.up('form').down(`[name=${field.initialPassField}]`);
 179             return val === pwd.getValue();
 180         }
 181         return true;
 182     },
 183
 184     passwordText: gettext('Passwords do not match'),
 185
 186     email: function(value) {
 187         let emailre = /^[\w+~-]+(\.[\w+~-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/;
 188         return emailre.test(value);
 189     },
 190 });
 191
 192 // we always want the number in x.y format and never in, e.g., x,y
 193 Ext.define('PVE.form.field.Number', {
 194     override: 'Ext.form.field.Number',
 195     submitLocaleSeparator: false,
 196 });
 197
 198 // avois spamming the console and if we ever use this avoid a CORS block error too
 199 Ext.define('PVE.draw.Container', {
 200     override: 'Ext.draw.Container',
 201     defaultDownloadServerUrl: document.location.origin, // avoid that pointing to http://svg.sencha.io
 202     applyDownloadServerUrl: function(url) { // avoid noisy warning, we don't really use that anyway
 203         url = url || this.defaultDownloadServerUrl;
 204         return url;
 205     },
 206 });
 207
 208 // ExtJs 5-6 has an issue with caching
 209 // see https://www.sencha.com/forum/showthread.php?308989
 210 Ext.define('Proxmox.UnderlayPool', {
 211     override: 'Ext.dom.UnderlayPool',
 212
 213     checkOut: function() {
 214         let cache = this.cache,
 215             len = cache.length,
 216             el;
 217
 218         // do cleanup because some of the objects might have been destroyed
 219         while (len--) {
 220             if (cache[len].destroyed) {
 221                 cache.splice(len, 1);
 222             }
 223         }
 224         // end do cleanup
 225
 226         el = cache.shift();
 227
 228         if (!el) {
 229             el = Ext.Element.create(this.elementConfig);
 230             el.setVisibilityMode(2);
 231             //<debug>
 232             // tell the spec runner to ignore this element when checking if the dom is clean
 233             el.dom.setAttribute('data-sticky', true);
 234             //</debug>
 235         }
 236
 237         return el;
 238     },
 239 });
 240
 241 // if the order of the values are not the same in originalValue and value
 242 // extjs will not overwrite value, but marks the field dirty and thus
 243 // the reset button will be enabled (but clicking it changes nothing)
 244 // so if the arrays are not the same after resetting, we
 245 // clear and set it
 246 Ext.define('Proxmox.form.ComboBox', {
 247     override: 'Ext.form.field.ComboBox',
 248
 249     reset: function() {
 250         // copied from combobox
 251         let me = this;
 252         me.callParent();
 253
 254         // clear and set when not the same
 255         let value = me.getValue();
 256         if (Ext.isArray(me.originalValue) && Ext.isArray(value) &&
 257             !Ext.Array.equals(value, me.originalValue)) {
 258             me.clearValue();
 259             me.setValue(me.originalValue);
 260         }
 261     },
 262
 263     // we also want to open the trigger on editable comboboxes by default
 264     initComponent: function() {
 265         let me = this;
 266         me.callParent();
 267
 268         if (me.editable) {
 269             // The trigger.picker causes first a focus event on the field then
 270             // toggles the selection picker. Thus skip expanding in this case,
 271             // else our focus listener expands and the picker.trigger then
 272             // collapses it directly afterwards.
 273             Ext.override(me.triggers.picker, {
 274                 onMouseDown: function(e) {
 275                     // copied "should we focus" check from Ext.form.trigger.Trigger
 276                     if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
 277                         me.skip_expand_on_focus = true;
 278                     }
 279                     this.callParent(arguments);
 280                 },
 281             });
 282
 283             me.on("focus", function(combobox) {
 284                 if (!combobox.isExpanded && !combobox.skip_expand_on_focus) {
 285                     combobox.expand();
 286                 }
 287                 combobox.skip_expand_on_focus = false;
 288             });
 289         }
 290     },
 291 });
 292
 293 // when refreshing a grid/tree view, restoring the focus moves the view back to
 294 // the previously focused item. Save scroll position before refocusing.
 295 Ext.define(null, {
 296     override: 'Ext.view.Table',
 297
 298     jumpToFocus: false,
 299
 300     saveFocusState: function() {
 301         var me = this,
 302             store = me.dataSource,
 303             actionableMode = me.actionableMode,
 304             navModel = me.getNavigationModel(),
 305             focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true),
 306             activeElement = Ext.fly(Ext.Element.getActiveElement()),
 307             focusCell = focusPosition && focusPosition.view === me &&
 308             Ext.fly(focusPosition.getCell(true)),
 309             refocusRow, refocusCol, record;
 310
 311         // The navModel may return a position that is in a locked partner, so check that
 312         // the focusPosition's cell contains the focus before going forward.
 313         // The skipSaveFocusState is set by Actionables which actively control
 314         // focus destination. See CellEditing#activateCell.
 315         if (!me.skipSaveFocusState && focusCell && focusCell.contains(activeElement)) {
 316             // Separate this from the instance that the nav model is using.
 317             focusPosition = focusPosition.clone();
 318
 319             // While we deactivate the focused element, suspend focus processing on it.
 320             activeElement.suspendFocusEvents();
 321
 322             // Suspend actionable mode.
 323             // Each Actionable must silently save its state ready to resume when focus
 324             // can be restored but should only do that if the activeElement is not the cell itself,
 325             // this happens when the grid is refreshed while one of the actionables is being
 326             // deactivated (e.g. Calling  view refresh inside CellEditor 'edit' event listener).
 327             if (actionableMode && focusCell.dom !== activeElement.dom) {
 328                 me.suspendActionableMode();
 329             } else {
 330                 // Clear position, otherwise the setPosition on the other side
 331                 // will be rejected as a no-op if the resumption position is logically
 332                 // equivalent.
 333                 actionableMode = false;
 334                 navModel.setPosition();
 335             }
 336
 337             // Do not leave the element in that state in case refresh fails, and restoration
 338             // closure not called.
 339             activeElement.resumeFocusEvents();
 340
 341             // if the store is expanding or collapsing, we should never scroll the view.
 342             if (store.isExpandingOrCollapsing) {
 343                 return Ext.emptyFn;
 344             }
 345
 346             // The following function will attempt to refocus back in the same mode to the same cell
 347             // as it was at before based upon the previous record (if it's still in the store),
 348             // or the row index.
 349             return function() {
 350                 var all;
 351
 352                 // May have changed due to reconfigure
 353                 store = me.dataSource;
 354
 355                 // If we still have data, attempt to refocus in the same mode.
 356                 if (store.getCount()) {
 357                     all = me.all;
 358
 359                     // Adjust expectations of where we are able to refocus according to
 360                     // what kind of destruction might have been wrought on this view's DOM
 361                     // during focus save.
 362                     refocusRow =
 363                         Math.min(Math.max(focusPosition.rowIdx, all.startIndex), all.endIndex);
 364
 365                     refocusCol = Math.min(
 366                         focusPosition.colIdx,
 367                         me.getVisibleColumnManager().getColumns().length - 1,
 368                     );
 369
 370                     record = focusPosition.record;
 371
 372                     focusPosition = new Ext.grid.CellContext(me).setPosition(
 373                         record && store.contains(record) && !record.isCollapsedPlaceholder
 374                         ? record
 375                         : refocusRow,
 376                         refocusCol,
 377                     );
 378
 379                     // Maybe there are no cells. eg: all groups collapsed.
 380                     if (focusPosition.getCell(true)) {
 381                         if (actionableMode) {
 382                             me.resumeActionableMode(focusPosition);
 383                         } else {
 384                             // we sometimes want to scroll back to where we are
 385
 386                             let x = me.getScrollX();
 387                             let y = me.getScrollY();
 388
 389                             // Pass "preventNavigation" as true
 390                             // so that that does not cause selection.
 391                             navModel.setPosition(focusPosition, null, null, null, true);
 392
 393                             if (!navModel.getPosition()) {
 394                                 focusPosition.column.focus();
 395                             }
 396
 397                             if (!me.jumpToFocus) {
 398                                 me.scrollTo(x, y);
 399                             }
 400                         }
 401                     }
 402                 } else { // No rows - focus associated column header
 403                     focusPosition.column.focus();
 404                 }
 405             };
 406         }
 407         return Ext.emptyFn;
 408     },
 409 });
 410
 411 // ExtJS 6.0.1 has no setSubmitValue() (although you find it in the docs).
 412 // Note: this.submitValue is a boolean flag, whereas getSubmitValue() returns
 413 // data to be submitted.
 414 Ext.define('Proxmox.form.field.Text', {
 415     override: 'Ext.form.field.Text',
 416
 417     setSubmitValue: function(v) {
 418         this.submitValue = v;
 419     },
 420 });
 421
 422 // make mousescrolling work in firefox in the containers overflowhandler,
 423 // by using only the 'wheel' event not 'mousewheel'(fixed in 7.3)
 424 // also reverse the scrolldirection (fixed in 7.3)
 425 // and reduce the default increment
 426 Ext.define(null, {
 427     override: 'Ext.layout.container.boxOverflow.Scroller',
 428
 429     wheelIncrement: 1,
 430
 431     getWheelDelta: function(e) {
 432         return -e.getWheelDelta(e);
 433     },
 434
 435     onOwnerRender: function(owner) {
 436         var me = this,
 437             scrollable = {
 438                 isBoxOverflowScroller: true,
 439                 x: false,
 440                 y: false,
 441                 listeners: {
 442                     scrollend: this.onScrollEnd,
 443                     scope: this,
 444                 },
 445             };
 446
 447         // If no obstrusive scrollbars, allow natural scrolling on mobile touch devices
 448         if (!Ext.scrollbar.width() && !Ext.platformTags.desktop) {
 449             scrollable[owner.layout.horizontal ? 'x' : 'y'] = true;
 450         } else {
 451             me.wheelListener = me.layout.innerCt.on(
 452                 'wheel', me.onMouseWheel, me, { destroyable: true },
 453             );
 454         }
 455
 456         owner.setScrollable(scrollable);
 457     },
 458 });
 459
 460 // extj 6.7 reversed mousewheel direction... (fixed in 7.3)
 461 // https://forum.sencha.com/forum/showthread.php?472517-Mousewheel-scroll-direction-in-numberfield-with-spinners
 462 // also use the 'wheel' event instead of 'mousewheel' (fixed in 7.3)
 463 Ext.define('Proxmox.form.field.Spinner', {
 464     override: 'Ext.form.field.Spinner',
 465
 466     onRender: function() {
 467         let me = this;
 468
 469         me.callParent();
 470
 471         // Init mouse wheel
 472         if (me.mouseWheelEnabled) {
 473             // Unlisten Ext generated listener ('mousewheel' is deprecated anyway)
 474             me.mun(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
 475
 476             me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me);
 477         }
 478     },
 479
 480     onMouseWheel: function(e) {
 481         var me = this,
 482             delta;
 483         if (me.hasFocus) {
 484             delta = e.getWheelDelta();
 485             if (delta > 0) {
 486                 me.spinDown();
 487             } else if (delta < 0) {
 488                 me.spinUp();
 489             }
 490             e.stopEvent();
 491             me.onSpinEnd();
 492         }
 493     },
 494 });
 495
 496 // add '@' to the valid id
 497 Ext.define('Proxmox.validIdReOverride', {
 498     override: 'Ext.Component',
 499     validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
 500 });
 501
 502 Ext.define('Proxmox.selection.CheckboxModel', {
 503     override: 'Ext.selection.CheckboxModel',
 504
 505     // [P] use whole checkbox cell to multiselect, not only the checkbox
 506     checkSelector: '.x-grid-cell-row-checker',
 507
 508     // TODO: remove all optimizations below to an override for parent 'Ext.selection.Model' ??
 509
 510     // [ P: optimized to remove all records at once as single remove is O(n^3) slow ]
 511     // records can be an index, a record or an array of records
 512     doDeselect: function(records, suppressEvent) {
 513         var me = this,
 514             selected = me.selected,
 515             i = 0,
 516             len, record,
 517             commit;
 518         if (me.locked || !me.store) {
 519             return false;
 520         }
 521         if (typeof records === "number") {
 522             // No matching record, jump out
 523             record = me.store.getAt(records);
 524             if (!record) {
 525                 return false;
 526             }
 527             records = [
 528                 record,
 529             ];
 530         } else if (!Ext.isArray(records)) {
 531             records = [
 532                 records,
 533             ];
 534         }
 535         // [P] a beforedeselection, triggered by me.onSelectChange below, can block removal by
 536         // returning false, thus the original implementation removed only here in the commit fn,
 537         // which has an abysmal performance O(n^3). As blocking removal is not the norm, go do the
 538         // reverse, record blocked records and remove them from the to-be-removed array before
 539         // applying it. A FF86 i9-9900K on 10k records goes from >40s to ~33ms for >90% deselection
 540         let committed = false;
 541         commit = function() {
 542             committed = true;
 543             if (record === me.selectionStart) {
 544                 me.selectionStart = null;
 545             }
 546         };
 547         let removalBlocked = [];
 548         len = records.length;
 549         me.suspendChanges();
 550         for (; i < len; i++) {
 551             record = records[i];
 552             if (me.isSelected(record)) {
 553                 committed = false;
 554                 me.onSelectChange(record, false, suppressEvent, commit);
 555                 if (!committed) {
 556                     removalBlocked.push(record);
 557                 }
 558                 if (me.destroyed) {
 559                     return false;
 560                 }
 561             }
 562         }
 563         if (removalBlocked.length > 0) {
 564             records.remove(removalBlocked);
 565         }
 566         selected.remove(records); // [P] FAST(er)
 567         me.lastSelected = selected.last();
 568         me.resumeChanges();
 569         // fire selchange if there was a change and there is no suppressEvent flag
 570         me.maybeFireSelectionChange(records.length > 0 && !suppressEvent);
 571         return records.length;
 572     },
 573
 574
 575     doMultiSelect: function(records, keepExisting, suppressEvent) {
 576         var me = this,
 577             selected = me.selected,
 578             change = false,
 579             result, i, len, record, commit;
 580
 581         if (me.locked) {
 582             return;
 583         }
 584
 585         records = !Ext.isArray(records) ? [records] : records;
 586         len = records.length;
 587         if (!keepExisting && selected.getCount() > 0) {
 588             result = me.deselectDuringSelect(records, suppressEvent);
 589             if (me.destroyed) {
 590                 return;
 591             }
 592             if (result[0]) {
 593                 // We had a failure during selection, so jump out
 594                 // Fire selection change if we did deselect anything
 595                 me.maybeFireSelectionChange(result[1] > 0 && !suppressEvent);
 596                 return;
 597             } else {
 598                 // Means something has been deselected, so we've had a change
 599                 change = result[1] > 0;
 600             }
 601         }
 602
 603         let gotBlocked, blockedRecords = [];
 604         commit = function() {
 605             if (!selected.getCount()) {
 606                 me.selectionStart = record;
 607             }
 608             gotBlocked = false;
 609             change = true;
 610         };
 611
 612         for (i = 0; i < len; i++) {
 613             record = records[i];
 614             if (me.isSelected(record)) {
 615                 continue;
 616             }
 617
 618             gotBlocked = true;
 619             me.onSelectChange(record, true, suppressEvent, commit);
 620             if (me.destroyed) {
 621                 return;
 622             }
 623             if (gotBlocked) {
 624                 blockedRecords.push(record);
 625             }
 626         }
 627         if (blockedRecords.length > 0) {
 628             records.remove(blockedRecords);
 629         }
 630         selected.add(records);
 631         me.lastSelected = record;
 632
 633         // fire selchange if there was a change and there is no suppressEvent flag
 634         me.maybeFireSelectionChange(change && !suppressEvent);
 635     },
 636     deselectDuringSelect: function(toSelect, suppressEvent) {
 637         var me = this,
 638             selected = me.selected.getRange(),
 639             changed = 0,
 640             failed = false;
 641         // Prevent selection change events from firing, will happen during select
 642         me.suspendChanges();
 643         me.deselectingDuringSelect = true;
 644         let toDeselect = selected.filter(item => !Ext.Array.contains(toSelect, item));
 645         if (toDeselect.length > 0) {
 646             changed = me.doDeselect(toDeselect, suppressEvent);
 647             if (!changed) {
 648                 failed = true;
 649             }
 650             if (me.destroyed) {
 651                 failed = true;
 652                 changed = 0;
 653             }
 654         }
 655         me.deselectingDuringSelect = false;
 656         me.resumeChanges();
 657         return [
 658             failed,
 659             changed,
 660         ];
 661     },
 662 });
 663
 664 // stop nulling of properties
 665 Ext.define('Proxmox.Component', {
 666     override: 'Ext.Component',
 667     clearPropertiesOnDestroy: false,
 668 });
 669
 670 // Fix drag&drop for vms and desktops that detect 'pen' pointerType
 671 // NOTE: this part has been rewritten in ExtJS 7.4, so re-check once we can upgrade
 672 Ext.define('Proxmox.view.DragZone', {
 673     override: 'Ext.view.DragZone',
 674
 675     onItemMouseDown: function(view, record, item, index, e) {
 676         // Ignore touchstart.
 677         // For touch events, we use longpress.
 678         if (e.pointerType !== 'touch') {
 679             this.onTriggerGesture(view, record, item, index, e);
 680         }
 681     },
 682 });
 683
 684 // force alert boxes to be rendered with an Error Icon
 685 // since Ext.Msg is an object and not a prototype, we need to override it
 686 // after the framework has been initiated
 687 Ext.onReady(function() {
 688     Ext.override(Ext.Msg, {
 689         alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
 690             if (Ext.isString(title)) {
 691                 let config = {
 692                     title: title,
 693                     message: message,
 694                     icon: this.ERROR,
 695                     buttons: this.OK,
 696                     fn: fn,
 697                     scope: scope,
 698                     minWidth: this.minWidth,
 699                 };
 700             return this.show(config);
 701             }
 702         },
 703     });
 704 });
 705 Ext.define('Ext.ux.IFrame', {
 706     extend: 'Ext.Component',
 707
 708     alias: 'widget.uxiframe',
 709
 710     loadMask: 'Loading...',
 711
 712     src: 'about:blank',
 713
 714     renderTpl: [
 715         '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
 716     ],
 717     childEls: ['iframeEl'],
 718
 719     initComponent: function() {
 720         this.callParent();
 721
 722         this.frameName = this.frameName || this.id + '-frame';
 723     },
 724
 725     initEvents: function() {
 726         let me = this;
 727         me.callParent();
 728         me.iframeEl.on('load', me.onLoad, me);
 729     },
 730
 731     initRenderData: function() {
 732         return Ext.apply(this.callParent(), {
 733             src: this.src,
 734             frameName: this.frameName,
 735         });
 736     },
 737
 738     getBody: function() {
 739         let doc = this.getDoc();
 740         return doc.body || doc.documentElement;
 741     },
 742
 743     getDoc: function() {
 744         try {
 745             return this.getWin().document;
 746         } catch (ex) {
 747             return null;
 748         }
 749     },
 750
 751     getWin: function() {
 752         let me = this,
 753             name = me.frameName,
 754             win = Ext.isIE
 755                 ? me.iframeEl.dom.contentWindow
 756                 : window.frames[name];
 757         return win;
 758     },
 759
 760     getFrame: function() {
 761         let me = this;
 762         return me.iframeEl.dom;
 763     },
 764
 765     beforeDestroy: function() {
 766         this.cleanupListeners(true);
 767         this.callParent();
 768     },
 769
 770     cleanupListeners: function(destroying) {
 771         let doc, prop;
 772
 773         if (this.rendered) {
 774             try {
 775                 doc = this.getDoc();
 776                 if (doc) {
 777                     Ext.get(doc).un(this._docListeners);
 778                     if (destroying && doc.hasOwnProperty) {
 779                         for (prop in doc) {
 780                             if (Object.prototype.hasOwnProperty.call(doc, prop)) {
 781                                 delete doc[prop];
 782                             }
 783                         }
 784                     }
 785                 }
 786             } catch (e) {
 787                 // do nothing
 788             }
 789         }
 790     },
 791
 792     onLoad: function() {
 793         let me = this,
 794             doc = me.getDoc(),
 795             fn = me.onRelayedEvent;
 796
 797         if (doc) {
 798             try {
 799                 // These events need to be relayed from the inner document (where they stop
 800                 // bubbling) up to the outer document. This has to be done at the DOM level so
 801                 // the event reaches listeners on elements like the document body. The effected
 802                 // mechanisms that depend on this bubbling behavior are listed to the right
 803                 // of the event.
 804                 Ext.get(doc).on(
 805                     me._docListeners = {
 806                         mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
 807                         mousemove: fn, // window resize drag detection
 808                         mouseup: fn, // window resize termination
 809                         click: fn, // not sure, but just to be safe
 810                         dblclick: fn, // not sure again
 811                         scope: me,
 812                     },
 813                 );
 814             } catch (e) {
 815                 // cannot do this xss
 816             }
 817
 818             // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
 819             Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
 820
 821             this.el.unmask();
 822             this.fireEvent('load', this);
 823         } else if (me.src) {
 824             this.el.unmask();
 825             this.fireEvent('error', this);
 826         }
 827     },
 828
 829     onRelayedEvent: function(event) {
 830         // relay event from the iframe's document to the document that owns the iframe...
 831
 832         let iframeEl = this.iframeEl,
 833
 834             // Get the left-based iframe position
 835             iframeXY = iframeEl.getTrueXY(),
 836             originalEventXY = event.getXY(),
 837
 838             // Get the left-based XY position.
 839             // This is because the consumer of the injected event will
 840             // perform its own RTL normalization.
 841             eventXY = event.getTrueXY();
 842
 843         // the event from the inner document has XY relative to that document's origin,
 844         // so adjust it to use the origin of the iframe in the outer document:
 845         event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
 846
 847         event.injectEvent(iframeEl); // blame the iframe for the event...
 848
 849         event.xy = originalEventXY; // restore the original XY (just for safety)
 850     },
 851
 852     load: function(src) {
 853         let me = this,
 854             text = me.loadMask,
 855             frame = me.getFrame();
 856
 857         if (me.fireEvent('beforeload', me, src) !== false) {
 858             if (text && me.el) {
 859                 me.el.mask(text);
 860             }
 861
 862             frame.src = me.src = src || me.src;
 863         }
 864     },
 865 });