| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> |
| <script src='https://unpkg.com/vue-select'></script> |
| <script src='http://underscorejs.org/underscore-min.js'></script> |
| <script src='metrics_parser.js'></script> |
| <link rel='stylesheet' href='filter.css'> |
| </head> |
| |
| <body> |
| <style> |
| body { |
| font-family: Helvetica, sans-serif; |
| } |
| </style> |
| |
| <div class='menuLeft' id='menu'> |
| |
| <div id='filterItem'> |
| <sup>Memory metrics</sup> |
| <v-select placeholder='browser' |
| :options='browserOptions' |
| v-model='browser' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='subprocess' |
| :options='subprocessOptions' |
| v-model='subprocess' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='probe' |
| :options='probeOptions' |
| v-model='probe' |
| id='filterBox' |
| ></v-select> |
| <v-select placeholder='component' |
| :options='componentOptions' |
| v-model='component' |
| id='filterBox' |
| ></v-select> |
| |
| |
| <v-select placeholder='subcomponent' |
| id='subcomponentBox' |
| v-model='subcomponent' |
| :options='firstSubcompOptions' |
| v-if='seen' |
| ></v-select> |
| <v-select placeholder='subcomponent' |
| id='subcomponentBox_' |
| v-model='subcomponent_' |
| :options='secondSubcompOptions' |
| v-if='seen_' |
| ></v-select> |
| |
| |
| <v-select placeholder='size' |
| :options='sizeOptions' |
| v-model='size' |
| id='filterBox' |
| ></v-select> |
| <button v-on:click='apply' |
| id='apply_button'> |
| Apply</button> |
| <textarea v-model='text' |
| id='teaxtarea' |
| rows='6' |
| cols='80' |
| ></textarea> |
| </div> |
| </div> |
| |
| |
| |
| <script> |
| 'use strict'; |
| const MiB = 1024 * 1024; |
| Vue.component('v-select', VueSelect.VueSelect); |
| |
| const menu = new Vue({ |
| el: '#menu', |
| data: { |
| sampleArr: null, |
| guidValueInfo: null, |
| |
| browser: null, |
| subprocess: null, |
| probe: null, |
| component: null, |
| size: null, |
| metricNames: null, |
| |
| browserOptions: [], |
| subprocessOptions: [], |
| probeOptions: [], |
| |
| componentObject: null, |
| sizeObject: null, |
| |
| subcomponent: null, |
| subcomponent_: null, |
| |
| text: null |
| }, |
| |
| computed: { |
| // Compute size options depending on the type of probe. |
| sizeOptions() { |
| if (this.sizeObject !== null) { |
| if (this.probe === 'reported_by_chrome') { |
| return this.sizeObject.sizeChrome; |
| } |
| return this.sizeObject.sizeOs; |
| } |
| return undefined; |
| }, |
| // The components are different depending on the type of probe. |
| componentOptions() { |
| if (this.componentObject !== null) { |
| if (this.probe === 'reported_by_chrome') { |
| const component = []; |
| for (const [key, value] of this.componentObject |
| .componentByChrome.entries()) { |
| component.push(key); |
| } |
| return component; |
| } |
| const component = []; |
| for (const [key, value] of this.componentObject |
| .componentByOs.entries()) { |
| component.push(key); |
| } |
| return component; |
| } |
| return undefined; |
| }, |
| |
| // Compute the options for the first subcomponent depending on the probes. |
| // When the user chooses a component, it might be a hierarchical one. |
| firstSubcompOptions() { |
| if (this.component !== null) { |
| if (this.probe === 'reported_by_chrome') { |
| if (this.componentObject.componentByChrome |
| .get(this.component) !== undefined) { |
| const map = this.componentObject |
| .componentByChrome.get(this.component); |
| const array = []; |
| for (const [key, value] of map.entries()) { |
| array.push(key); |
| } |
| return array; |
| } |
| return undefined; |
| } |
| return this.componentObject.componentByOs.get(this.component); |
| } |
| return undefined; |
| }, |
| |
| // In case when the component is from Chrome, the hierarchy might have more |
| // levels. |
| secondSubcompOptions() { |
| if (this.probe === 'reported_by_chrome' && this.subcomponent !== null) { |
| const map = this.componentObject.componentByChrome.get(this.component); |
| return map.get(this.subcomponent); |
| } |
| return undefined; |
| }, |
| seen() { |
| return this.component !== null; |
| }, |
| seen_() { |
| return this.subcomponent !== null; |
| } |
| }, |
| watch: { |
| probe() { |
| this.component = null; |
| this.subcomponent = null; |
| this.subcomponent_ = null; |
| this.size = null; |
| }, |
| |
| component() { |
| this.subcomponent = null; |
| this.subcomponent_ = null; |
| }, |
| |
| subcomponent() { |
| this.subcomponent_ = null; |
| }, |
| |
| }, |
| methods: { |
| // Build the available metrics upon the chosen items. |
| // The method applies an intersection for all of them and |
| // return the result as a collection of metrics that matched. |
| apply() { |
| const metrics = []; |
| for (const name of this.metricNames) { |
| if (this.browser !== null && name.includes(this.browser) && |
| this.subprocess !== null && name.includes(this.subprocess) && |
| this.component !== null && name.includes(this.component) && |
| this.size !== null && name.includes(this.size) && |
| this.probe !== null && name.includes(this.probe)) { |
| if (this.subcomponent === null) { |
| metrics.push(name); |
| } else { |
| if (name.includes(this.subcomponent)) { |
| if (this.subcomponent_ === null) { |
| metrics.push(name); |
| } else { |
| if (name.includes(this.subcomponent_)) { |
| metrics.push(name); |
| } |
| } |
| } |
| } |
| } |
| } |
| if (_.uniq(metrics).length === 0) { |
| alert('No metrics found'); |
| } else { |
| this.text = _.uniq(metrics); |
| } |
| } |
| } |
| }); |
| |
| const metricNames = |
| ['memory:chrome:renderer_processes:' + |
| 'reported_by_chrome:discardable:effective_size', |
| 'memory:chrome:renderer_processes:reported_by_chrome:' + |
| 'partition_alloc:allocated_objects_size', |
| 'memory:chrome:browser_process:reported_by_chrome:omnibox:' + |
| 'effective_size', |
| 'memory:chrome:all_processes:reported_by_chrome:v8:' + |
| 'heap:old_space:effective_size', |
| 'memory:chrome:browser_process:reported_by_os:' + |
| 'system_memory:ashmem:proportional_resident_size', |
| 'memory:chrome:all_processes:' + |
| 'reported_by_chrome:tracing:effective_size', |
| 'memory:chrome:renderer_processes:reported_by_chrome:' + |
| 'v8:allocated_by_malloc:peak_size', |
| 'memory:chrome:all_processes:' + |
| 'reported_by_chrome:discardable:effective_size', |
| 'memory:chrome:renderer_processes:reported_by_chrome:' + |
| 'v8:heap:map_space:allocated_objects_size', |
| 'memory:chrome:all_processes:reported_by_os:' + |
| 'system_memory:native_heap:private_dirty_size', |
| 'memory:chrome:renderer_processes:reported_by_chrome:' + |
| 'v8:allocated_by_malloc:effective_size', |
| 'memory:chrome:gpu_process:reported_by_os' + |
| ':system_memory:private_footprint_size', |
| 'memory:chrome:all_processes:reported_by_chrome:' + |
| 'net:effective_size', |
| 'memory:chrome:renderer_processes:' + |
| 'reported_by_chrome:v8:heap:effective_size', |
| 'memory:chrome:gpu_process:reported_by_chrome:' + |
| 'allocated_objects_size', |
| 'memory:chrome:renderer_processes:' + |
| 'reported_by_os:system_memory:stack:proportional_resident_size', |
| 'memory:chrome:renderer_processes:' + |
| 'reported_by_chrome:shared_memory:effective_size', |
| 'memory:chrome:all_processes:reported_by_os' + |
| ':system_memory:stack:proportional_resident_size', |
| 'memory:chrome:all_processes:reported_by_os:' + |
| 'private_dirty_size', |
| 'memory:chrome:all_processes:reported_by_chrome:sqli' + |
| 'te:effective_size', |
| 'memory:chrome:browser_process:reported_by_os' + |
| ':system_memory:java_heap:proportional_resident_size', |
| 'memory:chrome:browser_process:reported_b' + |
| 'y_chrome:effective_size', |
| 'memory:chrome:all_processes:reported_by_chrome:' + |
| 'discardable:locked_size', |
| 'memory:chrome:browser_process:reported_by_os:' + |
| 'system_memory:private_dirty_size', |
| 'memory:chrome:renderer_processes:reported_by_os:s' + |
| 'ystem_memory:native_heap:private_dirty_size', |
| 'memory:chrome:all_processes:reported_by_os:sy' + |
| 'stem_memory:stack:private_dirty_size', |
| 'memory:chrome:all_processes:reported_by_chrome:v8:he' + |
| 'ap:code_space:allocated_objects_size', |
| 'memory:chrome:gpu_process:reported_by_os:system' + |
| 'memory:native_heap:proportional_resident_size', |
| 'memory:chrome:all_processes:reported_by_chrome:' + |
| 'partition_alloc:allocated_objects_size', |
| 'memory:chrome:renderer_processes:reported_by' + |
| '_chrome:allocated_objects_size', |
| 'memory:chrome:renderer_processes:reported_by_ch' + |
| 'rome:cc:effective_size', |
| 'memory:chrome:all_processes:reported_by' + |
| '_chrome:locked_size', |
| 'memory:chrome:browser_process:reported_by_ch' + |
| 'rome:shared_memory:effective_size', |
| 'memory:chrome:browser_process:reporte' + |
| 'd_by_chrome:tracing:effective_size', |
| 'memory:chrome:browser_process:reported_by' + |
| '_chrome:sharedbitmap:effective_size']; |
| |
| |
| const result = parseAllMetrics(metricNames); |
| menu.browserOptions = result.browsers; |
| menu.subprocessOptions = result.subprocesses; |
| menu.probeOptions = result.probes; |
| |
| menu.componentObject = result.components; |
| menu.sizeObject = result.sizes; |
| |
| menu.metricNames = result.names; |
| |
| </script> |
| |
| </body> |
| </html> |
