diff options
Diffstat (limited to 'deps/v8/tools/heap-stats/details-selection.js')
| -rw-r--r-- | deps/v8/tools/heap-stats/details-selection.js | 175 |
1 files changed, 116 insertions, 59 deletions
diff --git a/deps/v8/tools/heap-stats/details-selection.js b/deps/v8/tools/heap-stats/details-selection.js index c5117d3165..5e9ffc5f94 100644 --- a/deps/v8/tools/heap-stats/details-selection.js +++ b/deps/v8/tools/heap-stats/details-selection.js @@ -24,7 +24,9 @@ class DetailsSelection extends HTMLElement { this.$('#merge-categories') .addEventListener('change', e => this.notifySelectionChanged(e)); this.$('#category-filter-btn') - .addEventListener('click', e => this.filterCurrentSeclection(e)); + .addEventListener('click', e => this.filterCurrentSelection(e)); + this.$('#category-auto-filter-btn') + .addEventListener('click', e => this.filterTop20Categories(e)); } connectedCallback() { @@ -42,11 +44,34 @@ class DetailsSelection extends HTMLElement { return this._data; } + get selectedIsolate() { + return this._data[this.selection.isolate]; + } + get selectedData() { console.assert(this.data, 'invalid data'); console.assert(this.selection, 'invalid selection'); - return this.data[this.selection.isolate] - .gcs[this.selection.gc][this.selection.data_set]; + return this.selectedIsolate.gcs[this.selection.gc][this.selection.data_set]; + } + + $(id) { + return this.shadowRoot.querySelector(id); + } + + querySelectorAll(query) { + return this.shadowRoot.querySelectorAll(query); + } + + get datasetSelect() { + return this.$('#dataset-select'); + } + + get isolateSelect() { + return this.$('#isolate-select'); + } + + get gcSelect() { + return this.$('#gc-select'); } buildCategory(name) { @@ -77,25 +102,13 @@ class DetailsSelection extends HTMLElement { const innerDiv = document.createElement('div'); div.appendChild(innerDiv); innerDiv.id = name + 'Content'; + const percentDiv = document.createElement('div'); + div.appendChild(percentDiv); + percentDiv.className = 'percentBackground'; + percentDiv.id = name + 'PercentBackground'; return div; } - $(id) { - return this.shadowRoot.querySelector(id); - } - - get datasetSelect() { - return this.$('#dataset-select'); - } - - get isolateSelect() { - return this.$('#isolate-select'); - } - - get gcSelect() { - return this.$('#gc-select'); - } - dataChanged() { this.selection = {categories: {}}; this.resetUI(true); @@ -105,11 +118,11 @@ class DetailsSelection extends HTMLElement { } populateIsolateSelect() { - let entries = Object.entries(this.data); + let isolates = Object.entries(this.data); // Sorty by peak heap memory consumption. - entries.sort((a, b) => b[1].peakMemory - a[1].peakMemory); + isolates.sort((a, b) => b[1].peakMemory - a[1].peakMemory); this.populateSelect( - '#isolate-select', entries, (key, isolate) => isolate.getLabel()); + '#isolate-select', isolates, (key, isolate) => isolate.getLabel()); } resetUI(resetIsolateSelect) { @@ -118,9 +131,14 @@ class DetailsSelection extends HTMLElement { removeAllChildren(this.datasetSelect); removeAllChildren(this.gcSelect); this.clearCategories(); - this.$('#csv-export-btn').disabled = 'disabled'; - this.$('#category-filter-btn').disabled = 'disabled'; - this.$('#category-filter').disabled = 'disabled'; + this.setButtonState('disabled'); + } + + setButtonState(disabled) { + this.$('#csv-export-btn').disabled = disabled; + this.$('#category-filter').disabled = disabled; + this.$('#category-filter-btn').disabled = disabled; + this.$('#category-auto-filter-btn').disabled = disabled; } handleIsolateChange(e) { @@ -131,13 +149,18 @@ class DetailsSelection extends HTMLElement { } this.resetUI(false); this.populateSelect( - '#dataset-select', - this.data[this.selection.isolate].data_sets.entries(), null, 'live'); + '#dataset-select', this.selectedIsolate.data_sets.entries(), null, + 'live'); this.populateSelect( '#gc-select', - Object.keys(this.data[this.selection.isolate].gcs) - .map(v => [v, this.data[this.selection.isolate].gcs[v].time]), - time => time + 'ms'); + Object.keys(this.selectedIsolate.gcs) + .map(id => [id, this.selectedIsolate.gcs[id].time]), + (key, time, index) => { + return (index + ': ').padStart(4, '0') + + formatSeconds(time).padStart(6, '0') + ' ' + + formatBytes(this.selectedIsolate.gcs[key].live.overall) + .padStart(9, '0'); + }); this.populateCategories(); this.notifySelectionChanged(); } @@ -154,24 +177,44 @@ class DetailsSelection extends HTMLElement { this.selection.data_set = this.datasetSelect.value; this.selection.merge_categories = this.$('#merge-categories').checked; this.selection.gc = this.gcSelect.value; - this.$('#csv-export-btn').disabled = false; - this.$('#category-filter-btn').disabled = false; - this.$('#category-filter').disabled = false; + this.setButtonState(false); this.updatePercentagesInCategory(); + this.updatePercentagesInInstanceTypes(); this.dispatchEvent(new CustomEvent( 'change', {bubbles: true, composed: true, detail: this.selection})); } - filterCurrentSeclection(e) { - const filter_value = this.$('#category-filter').value * KB; - if (filter_value === 0) return; + filterCurrentSelection(e) { + const minSize = this.$('#category-filter').value * KB; + this.filterCurrentSelectionWithThresold(minSize); + } + + filterTop20Categories(e) { + // Limit to show top 20 categories only. + let minSize = 0; + let count = 0; + let sizes = this.selectedIsolate.instanceTypePeakMemory; + for (let key in sizes) { + if (count == 20) break; + minSize = sizes[key]; + count++; + } + this.filterCurrentSelectionWithThresold(minSize); + } + + filterCurrentSelectionWithThresold(minSize) { + if (minSize === 0) return; this.selection.category_names.forEach((_, category) => { - for (let checkbox of this.shadowRoot.querySelectorAll( + for (let checkbox of this.querySelectorAll( 'input[name=' + category + 'Checkbox]')) { checkbox.checked = this.selectedData.instance_type_data[checkbox.instance_type] - .overall > filter_value; + .overall > minSize; + console.log( + checkbox.instance_type, checkbox.checked, + this.selectedData.instance_type_data[checkbox.instance_type] + .overall); } }); this.notifySelectionChanged(); @@ -182,7 +225,7 @@ class DetailsSelection extends HTMLElement { let overall = 0; // Reset all categories. this.selection.category_names.forEach((_, category) => { - this.$(`#${category}PercentContent`).innerHTML = '0%'; + overalls[category] = 0; }); // Only update categories that have selections. Object.entries(this.selection.categories).forEach(([category, value]) => { @@ -195,16 +238,30 @@ class DetailsSelection extends HTMLElement { overall += overalls[category]; }); Object.entries(overalls).forEach(([category, category_overall]) => { + let percents = category_overall / overall * 100; this.$(`#${category}PercentContent`).innerHTML = - `${(category_overall / overall * 100).toFixed(1)}%`; + `${percents.toFixed(1)}%`; + this.$('#' + category + 'PercentBackground').style.left = percents + '%'; + }); + } + + updatePercentagesInInstanceTypes() { + const instanceTypeData = this.selectedData.instance_type_data; + const maxInstanceType = this.selectedData.singleInstancePeakMemory; + this.querySelectorAll('.instanceTypeSelectBox input').forEach(checkbox => { + let instanceType = checkbox.value; + let instanceTypeSize = instanceTypeData[instanceType].overall; + let percents = instanceTypeSize / maxInstanceType; + let percentDiv = checkbox.parentNode.querySelector('.percentBackground'); + percentDiv.style.left = (percents * 100) + '%'; + }); } selectedInCategory(category) { - const selected = this.shadowRoot.querySelectorAll( - 'input[name=' + category + 'Checkbox]:checked'); - var tmp = []; - for (var val of selected.values()) tmp.push(val.value); + let tmp = []; + this.querySelectorAll('input[name=' + category + 'Checkbox]:checked') + .forEach(checkbox => tmp.push(checkbox.value)); return tmp; } @@ -224,8 +281,10 @@ class DetailsSelection extends HTMLElement { populateSelect(id, iterable, labelFn = null, autoselect = null) { if (labelFn == null) labelFn = e => e; + let index = 0; for (let [key, value] of iterable) { - const label = labelFn(key, value); + index++; + const label = labelFn(key, value, index); const option = this.createOption(key, label); if (autoselect === key) { option.selected = 'selected'; @@ -250,8 +309,7 @@ class DetailsSelection extends HTMLElement { categories[cat] = []; } - for (let instance_type of this.data[this.selection.isolate] - .non_empty_instance_types) { + for (let instance_type of this.selectedIsolate.non_empty_instance_types) { const category = this.categoryForType(instance_type); categories[category].push(instance_type); } @@ -265,24 +323,20 @@ class DetailsSelection extends HTMLElement { } unselectCategory(category) { - for (let checkbox of this.shadowRoot.querySelectorAll( - 'input[name=' + category + 'Checkbox]')) { - checkbox.checked = false; - } + this.querySelectorAll('input[name=' + category + 'Checkbox]') + .forEach(checkbox => checkbox.checked = false); this.notifySelectionChanged(); } selectCategory(category) { - for (let checkbox of this.shadowRoot.querySelectorAll( - 'input[name=' + category + 'Checkbox]')) { - checkbox.checked = true; - } + this.querySelectorAll('input[name=' + category + 'Checkbox]') + .forEach(checkbox => checkbox.checked = true); this.notifySelectionChanged(); } createCheckBox(instance_type, category) { const div = document.createElement('div'); - div.classList.add('boxDiv'); + div.classList.add('instanceTypeSelectBox'); const input = document.createElement('input'); div.appendChild(input); input.type = 'checkbox'; @@ -296,14 +350,17 @@ class DetailsSelection extends HTMLElement { div.appendChild(label); label.innerText = instance_type; label.htmlFor = instance_type + 'Checkbox'; + const percentDiv = document.createElement('div'); + percentDiv.className = 'percentBackground'; + div.appendChild(percentDiv); return div; } exportCurrentSelection(e) { const data = []; - const selected_data = this.data[this.selection.isolate] - .gcs[this.selection.gc][this.selection.data_set] - .instance_type_data; + const selected_data = + this.selectedIsolate.gcs[this.selection.gc][this.selection.data_set] + .instance_type_data; Object.values(this.selection.categories).forEach(instance_types => { instance_types.forEach(instance_type => { data.push([instance_type, selected_data[instance_type].overall / KB]); |