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         var me = this,
 468             spinnerTrigger = me.getTrigger('spinner');
 469
 470         me.callParent();
 471
 472         // Init up/down arrow keys
 473         if (me.keyNavEnabled) {
 474             me.spinnerKeyNav = new Ext.util.KeyNav({
 475                 target: me.inputEl,
 476                 scope: me,
 477                 up: me.spinUp,
 478                 down: me.spinDown,
 479             });
 480
 481             me.inputEl.on({
 482                 keyup: me.onInputElKeyUp,
 483                 scope: me,
 484             });
 485         }
 486
 487         // Init mouse wheel
 488         if (me.mouseWheelEnabled) {
 489             me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me);
 490         }
 491
 492         // in v4 spinUpEl/spinDownEl were childEls, now they are children of the trigger.
 493         // create references for compatibility
 494         me.spinUpEl = spinnerTrigger.upEl;
 495         me.spinDownEl = spinnerTrigger.downEl;
 496     },
 497
 498     onMouseWheel: function(e) {
 499         var me = this,
 500             delta;
 501         if (me.hasFocus) {
 502             delta = e.getWheelDelta();
 503             if (delta > 0) {
 504                 me.spinDown();
 505             } else if (delta < 0) {
 506                 me.spinUp();
 507             }
 508             e.stopEvent();
 509             me.onSpinEnd();
 510         }
 511     },
 512 });
 513
 514 // add '@' to the valid id
 515 Ext.define('Proxmox.validIdReOverride', {
 516     override: 'Ext.Component',
 517     validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
 518 });
 519
 520 Ext.define('Proxmox.selection.CheckboxModel', {
 521     override: 'Ext.selection.CheckboxModel',
 522
 523     // [P] use whole checkbox cell to multiselect, not only the checkbox
 524     checkSelector: '.x-grid-cell-row-checker',
 525
 526     // TODO: remove all optimizations below to an override for parent 'Ext.selection.Model' ??
 527
 528     // [ P: optimized to remove all records at once as single remove is O(n^3) slow ]
 529     // records can be an index, a record or an array of records
 530     doDeselect: function(records, suppressEvent) {
 531         var me = this,
 532             selected = me.selected,
 533             i = 0,
 534             len, record,
 535             commit;
 536         if (me.locked || !me.store) {
 537             return false;
 538         }
 539         if (typeof records === "number") {
 540             // No matching record, jump out
 541             record = me.store.getAt(records);
 542             if (!record) {
 543                 return false;
 544             }
 545             records = [
 546                 record,
 547             ];
 548         } else if (!Ext.isArray(records)) {
 549             records = [
 550                 records,
 551             ];
 552         }
 553         // [P] a beforedeselection, triggered by me.onSelectChange below, can block removal by
 554         // returning false, thus the original implementation removed only here in the commit fn,
 555         // which has an abysmal performance O(n^3). As blocking removal is not the norm, go do the
 556         // reverse, record blocked records and remove them from the to-be-removed array before
 557         // applying it. A FF86 i9-9900K on 10k records goes from >40s to ~33ms for >90% deselection
 558         let committed = false;
 559         commit = function() {
 560             committed = true;
 561             if (record === me.selectionStart) {
 562                 me.selectionStart = null;
 563             }
 564         };
 565         let removalBlocked = [];
 566         len = records.length;
 567         me.suspendChanges();
 568         for (; i < len; i++) {
 569             record = records[i];
 570             if (me.isSelected(record)) {
 571                 committed = false;
 572                 me.onSelectChange(record, false, suppressEvent, commit);
 573                 if (!committed) {
 574                     removalBlocked.push(record);
 575                 }
 576                 if (me.destroyed) {
 577                     return false;
 578                 }
 579             }
 580         }
 581         if (removalBlocked.length > 0) {
 582             records.remove(removalBlocked);
 583         }
 584         selected.remove(records); // [P] FAST(er)
 585         me.lastSelected = selected.last();
 586         me.resumeChanges();
 587         // fire selchange if there was a change and there is no suppressEvent flag
 588         me.maybeFireSelectionChange(records.length > 0 && !suppressEvent);
 589         return records.length;
 590     },
 591
 592
 593     doMultiSelect: function(records, keepExisting, suppressEvent) {
 594         var me = this,
 595             selected = me.selected,
 596             change = false,
 597             result, i, len, record, commit;
 598
 599         if (me.locked) {
 600             return;
 601         }
 602
 603         records = !Ext.isArray(records) ? [records] : records;
 604         len = records.length;
 605         if (!keepExisting && selected.getCount() > 0) {
 606             result = me.deselectDuringSelect(records, suppressEvent);
 607             if (me.destroyed) {
 608                 return;
 609             }
 610             if (result[0]) {
 611                 // We had a failure during selection, so jump out
 612                 // Fire selection change if we did deselect anything
 613                 me.maybeFireSelectionChange(result[1] > 0 && !suppressEvent);
 614                 return;
 615             } else {
 616                 // Means something has been deselected, so we've had a change
 617                 change = result[1] > 0;
 618             }
 619         }
 620
 621         let gotBlocked, blockedRecords = [];
 622         commit = function() {
 623             if (!selected.getCount()) {
 624                 me.selectionStart = record;
 625             }
 626             gotBlocked = false;
 627             change = true;
 628         };
 629
 630         for (i = 0; i < len; i++) {
 631             record = records[i];
 632             if (me.isSelected(record)) {
 633                 continue;
 634             }
 635
 636             gotBlocked = true;
 637             me.onSelectChange(record, true, suppressEvent, commit);
 638             if (me.destroyed) {
 639                 return;
 640             }
 641             if (gotBlocked) {
 642                 blockedRecords.push(record);
 643             }
 644         }
 645         if (blockedRecords.length > 0) {
 646             records.remove(blockedRecords);
 647         }
 648         selected.add(records);
 649         me.lastSelected = record;
 650
 651         // fire selchange if there was a change and there is no suppressEvent flag
 652         me.maybeFireSelectionChange(change && !suppressEvent);
 653     },
 654     deselectDuringSelect: function(toSelect, suppressEvent) {
 655         var me = this,
 656             selected = me.selected.getRange(),
 657             changed = 0,
 658             failed = false;
 659         // Prevent selection change events from firing, will happen during select
 660         me.suspendChanges();
 661         me.deselectingDuringSelect = true;
 662         let toDeselect = selected.filter(item => !Ext.Array.contains(toSelect, item));
 663         if (toDeselect.length > 0) {
 664             changed = me.doDeselect(toDeselect, suppressEvent);
 665             if (!changed) {
 666                 failed = true;
 667             }
 668             if (me.destroyed) {
 669                 failed = true;
 670                 changed = 0;
 671             }
 672         }
 673         me.deselectingDuringSelect = false;
 674         me.resumeChanges();
 675         return [
 676             failed,
 677             changed,
 678         ];
 679     },
 680 });
 681
 682 // stop nulling of properties
 683 Ext.define('Proxmox.Component', {
 684     override: 'Ext.Component',
 685     clearPropertiesOnDestroy: false,
 686 });
 687
 688 // Fix drag&drop for vms and desktops that detect 'pen' pointerType
 689 Ext.define('Proxmox.view.DragZone', {
 690     override: 'Ext.view.DragZone',
 691
 692     onItemMouseDown: function(view, record, item, index, e) {
 693         // Ignore touchstart.
 694         // For touch events, we use longpress.
 695         if (e.pointerType !== 'touch') {
 696             this.onTriggerGesture(view, record, item, index, e);
 697         }
 698     },
 699 });
 700
 701 // force alert boxes to be rendered with an Error Icon
 702 // since Ext.Msg is an object and not a prototype, we need to override it
 703 // after the framework has been initiated
 704 Ext.onReady(function() {
 705     Ext.override(Ext.Msg, {
 706         alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
 707             if (Ext.isString(title)) {
 708                 let config = {
 709                     title: title,
 710                     message: message,
 711                     icon: this.ERROR,
 712                     buttons: this.OK,
 713                     fn: fn,
 714                     scope: scope,
 715                     minWidth: this.minWidth,
 716                 };
 717             return this.show(config);
 718             }
 719         },
 720     });
 721 });
 722 Ext.define('Ext.ux.IFrame', {
 723     extend: 'Ext.Component',
 724
 725     alias: 'widget.uxiframe',
 726
 727     loadMask: 'Loading...',
 728
 729     src: 'about:blank',
 730
 731     renderTpl: [
 732         '<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
 733     ],
 734     childEls: ['iframeEl'],
 735
 736     initComponent: function() {
 737         this.callParent();
 738
 739         this.frameName = this.frameName || this.id + '-frame';
 740     },
 741
 742     initEvents: function() {
 743         let me = this;
 744         me.callParent();
 745         me.iframeEl.on('load', me.onLoad, me);
 746     },
 747
 748     initRenderData: function() {
 749         return Ext.apply(this.callParent(), {
 750             src: this.src,
 751             frameName: this.frameName,
 752         });
 753     },
 754
 755     getBody: function() {
 756         let doc = this.getDoc();
 757         return doc.body || doc.documentElement;
 758     },
 759
 760     getDoc: function() {
 761         try {
 762             return this.getWin().document;
 763         } catch (ex) {
 764             return null;
 765         }
 766     },
 767
 768     getWin: function() {
 769         let me = this,
 770             name = me.frameName,
 771             win = Ext.isIE
 772                 ? me.iframeEl.dom.contentWindow
 773                 : window.frames[name];
 774         return win;
 775     },
 776
 777     getFrame: function() {
 778         let me = this;
 779         return me.iframeEl.dom;
 780     },
 781
 782     beforeDestroy: function() {
 783         this.cleanupListeners(true);
 784         this.callParent();
 785     },
 786
 787     cleanupListeners: function(destroying) {
 788         let doc, prop;
 789
 790         if (this.rendered) {
 791             try {
 792                 doc = this.getDoc();
 793                 if (doc) {
 794                     Ext.get(doc).un(this._docListeners);
 795                     if (destroying && doc.hasOwnProperty) {
 796                         for (prop in doc) {
 797                             if (Object.prototype.hasOwnProperty.call(doc, prop)) {
 798                                 delete doc[prop];
 799                             }
 800                         }
 801                     }
 802                 }
 803             } catch (e) {
 804                 // do nothing
 805             }
 806         }
 807     },
 808
 809     onLoad: function() {
 810         let me = this,
 811             doc = me.getDoc(),
 812             fn = me.onRelayedEvent;
 813
 814         if (doc) {
 815             try {
 816                 // These events need to be relayed from the inner document (where they stop
 817                 // bubbling) up to the outer document. This has to be done at the DOM level so
 818                 // the event reaches listeners on elements like the document body. The effected
 819                 // mechanisms that depend on this bubbling behavior are listed to the right
 820                 // of the event.
 821                 Ext.get(doc).on(
 822                     me._docListeners = {
 823                         mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
 824                         mousemove: fn, // window resize drag detection
 825                         mouseup: fn, // window resize termination
 826                         click: fn, // not sure, but just to be safe
 827                         dblclick: fn, // not sure again
 828                         scope: me,
 829                     },
 830                 );
 831             } catch (e) {
 832                 // cannot do this xss
 833             }
 834
 835             // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
 836             Ext.get(this.getWin()).on('beforeunload', me.cleanupListeners, me);
 837
 838             this.el.unmask();
 839             this.fireEvent('load', this);
 840         } else if (me.src) {
 841             this.el.unmask();
 842             this.fireEvent('error', this);
 843         }
 844     },
 845
 846     onRelayedEvent: function(event) {
 847         // relay event from the iframe's document to the document that owns the iframe...
 848
 849         let iframeEl = this.iframeEl,
 850
 851             // Get the left-based iframe position
 852             iframeXY = iframeEl.getTrueXY(),
 853             originalEventXY = event.getXY(),
 854
 855             // Get the left-based XY position.
 856             // This is because the consumer of the injected event will
 857             // perform its own RTL normalization.
 858             eventXY = event.getTrueXY();
 859
 860         // the event from the inner document has XY relative to that document's origin,
 861         // so adjust it to use the origin of the iframe in the outer document:
 862         event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
 863
 864         event.injectEvent(iframeEl); // blame the iframe for the event...
 865
 866         event.xy = originalEventXY; // restore the original XY (just for safety)
 867     },
 868
 869     load: function(src) {
 870         let me = this,
 871             text = me.loadMask,
 872             frame = me.getFrame();
 873
 874         if (me.fireEvent('beforeload', me, src) !== false) {
 875             if (text && me.el) {
 876                 me.el.mask(text);
 877             }
 878
 879             frame.src = me.src = src || me.src;
 880         }
 881     },
 882 });