| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| cr.define('performance_monitor', function() { |
| 'use strict'; |
| |
| /** |
| * Map of available time resolutions. |
| * @type {Object.<string, PerformanceMonitor.TimeResolution>} |
| * @private |
| */ |
| var TimeResolutions_ = { |
| // Prior 15 min, resolution of 15 seconds. |
| minutes: {id: 0, i18nKey: 'timeLastFifteenMinutes', timeSpan: 900 * 1000, |
| pointResolution: 1000 * 15}, |
| |
| // Prior hour, resolution of 1 minute. |
| // Labels at 5 point (5 min) intervals. |
| hour: {id: 1, i18nKey: 'timeLastHour', timeSpan: 3600 * 1000, |
| pointResolution: 1000 * 60}, |
| |
| // Prior day, resolution of 24 min. |
| // Labels at 5 point (2 hour) intervals. |
| day: {id: 2, i18nKey: 'timeLastDay', timeSpan: 24 * 3600 * 1000, |
| pointResolution: 1000 * 60 * 24}, |
| |
| // Prior week, resolution of 2.8 hours (168 min). |
| // Labels at ~8.5 point (daily) intervals. |
| week: {id: 3, i18nKey: 'timeLastWeek', timeSpan: 7 * 24 * 3600 * 1000, |
| pointResolution: 1000 * 60 * 168}, |
| |
| // Prior month (30 days), resolution of 12 hours. |
| // Labels at 14 point (weekly) intervals. |
| month: {id: 4, i18nKey: 'timeLastMonth', timeSpan: 30 * 24 * 3600 * 1000, |
| pointResolution: 1000 * 3600 * 12}, |
| |
| // Prior quarter (90 days), resolution of 36 hours. |
| // Labels at ~9.3 point (fortnightly) intervals. |
| quarter: {id: 5, i18nKey: 'timeLastQuarter', |
| timeSpan: 90 * 24 * 3600 * 1000, |
| pointResolution: 1000 * 3600 * 36}, |
| }; |
| |
| /** |
| * Map of available date formats in Flot-style format strings. |
| * @type {Object.<string, string>} |
| * @private |
| */ |
| var TimeFormats_ = { |
| time: '%h:%M %p', |
| monthDayTime: '%b %d<br/>%h:%M %p', |
| monthDay: '%b %d', |
| yearMonthDay: '%y %b %d', |
| }; |
| |
| /* |
| * Table of colors to use for metrics and events. Basically boxing the |
| * colorwheel, but leaving out yellows and fully saturated colors. |
| * @type {Array.<string>} |
| * @private |
| */ |
| var ColorTable_ = [ |
| 'rgb(255, 128, 128)', 'rgb(128, 255, 128)', 'rgb(128, 128, 255)', |
| 'rgb(128, 255, 255)', 'rgb(255, 128, 255)', // No bright yellow |
| 'rgb(255, 64, 64)', 'rgb( 64, 255, 64)', 'rgb( 64, 64, 255)', |
| 'rgb( 64, 255, 255)', 'rgb(255, 64, 255)', // No medium yellow either |
| 'rgb(128, 64, 64)', 'rgb( 64, 128, 64)', 'rgb( 64, 64, 128)', |
| 'rgb( 64, 128, 128)', 'rgb(128, 64, 128)', 'rgb(128, 128, 64)' |
| ]; |
| |
| /* |
| * Offset, in ms, by which to subtract to convert GMT to local time. |
| * @type {number} |
| * @private |
| */ |
| var timezoneOffset_ = new Date().getTimezoneOffset() * 60000; |
| |
| /* |
| * Additional range multiplier to ensure that points don't hit the top of |
| * the graph. |
| * @type {number} |
| * @private |
| */ |
| var yAxisMargin_ = 1.05; |
| |
| /* |
| * Number of time resolution periods to wait between automated update of |
| * graphs. |
| * @type {number} |
| * @private |
| */ |
| var intervalMultiple_ = 2; |
| |
| /* |
| * Number of milliseconds to wait before deciding that the most recent |
| * resize event is not going to be followed immediately by another, and |
| * thus needs handling. |
| * @type {number} |
| * @private |
| */ |
| var resizeDelay_ = 500; |
| |
| /* |
| * The value of the 'No Aggregation' option enum (AGGREGATION_METHOD_NONE) on |
| * the C++ side. We use this to warn the user that selecting this aggregation |
| * option will be slow. |
| */ |
| var aggregationMethodNone = 0; |
| |
| /* |
| * The value of the default aggregation option, 'Median Aggregation' |
| * (AGGREGATION_METHOD_MEDIAN), on the C++ side. |
| */ |
| var aggregationMethodMedian = 1; |
| |
| /** @constructor */ |
| function PerformanceMonitor() { |
| this.__proto__ = PerformanceMonitor.prototype; |
| |
| /** Information regarding a certain time resolution option, including an |
| * enumerative id, a readable name, the timespan in milliseconds prior to |
| * |now|, data point resolution in milliseconds, and time-label frequency |
| * in data points per label. |
| * @typedef {{ |
| * id: number, |
| * name: string, |
| * timeSpan: number, |
| * pointResolution: number, |
| * labelEvery: number, |
| * }} |
| */ |
| PerformanceMonitor.TimeResolution; |
| |
| /** |
| * Detailed information on a metric in the UI. |metricId| is a unique |
| * identifying number for the metric, provided by the webui, and assumed to |
| * be densely populated. |description| is a localized string description |
| * suitable for mouseover on the metric. |category| corresponds to a |
| * category object to which the metric belongs (see |metricCategoryMap_|). |
| * |color| is the color in which the metric is displayed on the graphs. |
| * |maxValue| is a value by which to scale the y-axis, in order to avoid |
| * constant resizing to fit the present data. |checkbox| is the HTML element |
| * for the checkbox which toggles the metric's display. |enabled| indicates |
| * whether or not the metric is being actively displayed. |data| is the |
| * collection of data for the metric. |
| * |
| * For |data|, the inner-most array represents a point in a pair of numbers, |
| * representing time and value (this will always be of length 2). The |
| * array above is the collection of points within a series, which is an |
| * interval for which PerformanceMonitor was active. The outer-most array |
| * is the collection of these series. |
| * |
| * @typedef {{ |
| * metricId: number, |
| * description: string, |
| * category: !Object, |
| * color: string, |
| * maxValue: number, |
| * checkbox: HTMLElement, |
| * enabled: boolean, |
| * data: ?Array.<Array<Array<number> > > |
| * }} |
| */ |
| PerformanceMonitor.MetricDetails; |
| |
| /** |
| * Similar data for events as for metrics, though no y-axis info is needed |
| * since events are simply labeled markers at X locations. |
| * |
| * The |data| field follows a special rule not describable in |
| * JSDoc: Aside from the |time| key, each event type has varying other |
| * properties, with unknown key names, which properties must still be |
| * displayed. Such properties always have value of form |
| * {label: 'some label', value: 'some value'}, with label and value |
| * internationalized. |
| * |
| * @typedef {{ |
| * eventId: number, |
| * name: string, |
| * popupTitle: string, |
| * description: string, |
| * color: string, |
| * checkbox: HTMLElement, |
| * enabled: boolean |
| * data: ?Array.<{time: number}> |
| * }} |
| */ |
| PerformanceMonitor.EventDetails; |
| |
| /** |
| * The collection of divs that compose a chart on the UI, plus the metricIds |
| * of any metric which should be shown on the chart (whether the metric is |
| * enabled or not). The |mainDiv| is the full element, under which all other |
| * divs are nested. The |grid| is the div into which the |plot| (which is |
| * the core of the graph, including the axis, gridlines, dataseries, etc) |
| * goes. The |yaxisLabel| is nested under the mainDiv, and shows the units |
| * for the chart. |
| * |
| * @typedef {{ |
| * mainDiv: HTMLDivElement, |
| * grid: HTMLDivElement, |
| * plot: HTMLDivElement, |
| * yaxisLabel: HTMLDivElement, |
| * metricIds: ?Array.<number> |
| */ |
| PerformanceMonitor.Chart; |
| |
| /** |
| * The time range which we are currently viewing, with the start and end of |
| * the range, the TimeResolution, and an appropriate for display (this |
| * format is the string structure which Flot expects for its setting). |
| * @typedef {{ |
| * @type {{ |
| * start: number, |
| * end: number, |
| * resolution: PerformanceMonitor.TimeResolution |
| * format: string |
| * }} |
| * @private |
| */ |
| this.range_ = { 'start': 0, 'end': 0, 'resolution': undefined }; |
| |
| /** |
| * The map containing the available TimeResolutions and the radio button to |
| * which each corresponds. The key is the id field from the TimeResolution |
| * object. |
| * @type {Object.<string, { |
| * option: PerformanceMonitor.TimeResolution, |
| * element: HTMLElement |
| * }>} |
| * @private |
| */ |
| this.timeResolutionRadioMap_ = {}; |
| |
| /** |
| * The map containing the available Aggregation Methods and the radio button |
| * to which each corresponds. The different methods are retrieved from the |
| * WebUI, and the information about the method is stored in the 'option' |
| * field. The key to the map is the id of the aggregation method. |
| * |
| * @type {Object.<string, { |
| * option: { |
| * id: number, |
| * name: string, |
| * description: string, |
| * }, |
| * element: HTMLElement |
| * }>} |
| * @private |
| */ |
| this.aggregationRadioMap_ = {}; |
| |
| /** |
| * Metrics fall into categories that have common units and thus may |
| * share a common graph, or share y-axes within a multi-y-axis graph. |
| * Each category has a unique identifying metricCategoryId; a localized |
| * name, mouseover description, and unit; and an array of all the metrics |
| * which are in this category. The key is |metricCategoryId|. |
| * |
| * @type {Object.<string, { |
| * metricCategoryId: number, |
| * name: string, |
| * description: string, |
| * unit: string, |
| * details: Array.<{!PerformanceMonitor.MetricDetails}>, |
| * }>} |
| * @private |
| */ |
| this.metricCategoryMap_ = {}; |
| |
| /** |
| * Comprehensive map from metricId to MetricDetails. |
| * @type {Object.<string, {PerformanceMonitor.MetricDetails}>} |
| * @private |
| */ |
| this.metricDetailsMap_ = {}; |
| |
| /** |
| * Events fall into categories just like metrics, above. This category |
| * grouping is not as important as that for metrics, since events |
| * needn't share maxima, y-axes, nor units, and since events appear on |
| * all charts. But grouping of event categories in the event-selection |
| * UI is still useful. The key is the id of the event category. |
| * |
| * @type {Object.<string, { |
| * eventCategoryId: number, |
| * name: string, |
| * description: string, |
| * details: !Array.<!PerformanceMonitor.EventDetails>, |
| * }>} |
| * @private |
| */ |
| this.eventCategoryMap_ = {}; |
| |
| /** |
| * Comprehensive map from eventId to EventDetails. |
| * @type {Object.<string, {PerformanceMonitor.EventDetails}>} |
| * @private |
| */ |
| this.eventDetailsMap_ = {}; |
| |
| /** |
| * Time periods in which the browser was active and collecting metrics |
| * and events. |
| * @type {!Array.<{start: number, end: number}>} |
| * @private |
| */ |
| this.intervals_ = []; |
| |
| /** |
| * The record of all the warnings which are currently active (or empty if no |
| * warnings are being displayed). |
| * @type {!Array.<string>} |
| * @private |
| */ |
| this.activeWarnings_ = []; |
| |
| /** |
| * Handle of timer interval function used to update charts |
| * @type {Object} |
| * @private |
| */ |
| this.updateTimer_ = null; |
| |
| /** |
| * Handle of timer interval function used to check for resizes. Nonnull |
| * only when resize events are coming steadily. |
| * @type {Object} |
| * @private |
| */ |
| this.resizeTimer_ = null; |
| |
| /** |
| * The status of all calls for data, stored in order to keep track of the |
| * internal state. This stores an attribute for each type of repeated data |
| * call (for now, only metrics and events), which will be true if we are |
| * awaiting data and false otherwise. |
| * @type {Object.<string, boolean>} |
| * @private |
| */ |
| this.awaitingDataCalls_ = {}; |
| |
| /** |
| * The progress into the initialization process. This must be stored, since |
| * certain tasks must be performed in a specific order which cannot be |
| * statically determined. Mainly, we must not request any data until the |
| * metrics, events, aggregation method, and time range have all been set. |
| * This object contains an attribute for each stage of the initialization |
| * process, which is set to true if the stage has been completed. |
| * @type {Object.<string, boolean>} |
| * @private |
| */ |
| this.initProgress_ = { 'aggregation': false, |
| 'events': false, |
| 'metrics': false, |
| 'timeRange': false }; |
| |
| /** |
| * All PerformanceMonitor.Chart objects available in the display, whether |
| * hidden or visible. |
| * @type {Array.<PerformanceMonitor.Chart>} |
| * @private |
| */ |
| this.charts_ = []; |
| |
| this.setupStaticControlPanelFeatures_(); |
| chrome.send('getFlagEnabled'); |
| chrome.send('getAggregationTypes'); |
| chrome.send('getEventTypes'); |
| chrome.send('getMetricTypes'); |
| } |
| |
| PerformanceMonitor.prototype = { |
| /** |
| * Display the appropriate warning at the top of the page. |
| * @param {string} warningId the id of the HTML element with the warning |
| * to display; this does not include the '#'. |
| */ |
| showWarning: function(warningId) { |
| if (this.activeWarnings_.indexOf(warningId) != -1) |
| return; |
| |
| if (this.activeWarnings_.length == 0) |
| $('#warnings-box')[0].style.display = 'block'; |
| $('#' + warningId)[0].style.display = 'block'; |
| this.activeWarnings_.push(warningId); |
| }, |
| |
| /** |
| * Hide the warning, and, if that was the only warning showing, the entire |
| * warnings box. |
| * @param {string} warningId the id of the HTML element with the warning |
| * to display; this does not include the '#'. |
| */ |
| hideWarning: function(warningId) { |
| var index = this.activeWarnings_.indexOf(warningId); |
| if (index == -1) |
| return; |
| $('#' + warningId)[0].style.display = 'none'; |
| this.activeWarnings_.splice(index, 1); |
| |
| if (this.activeWarnings_.length == 0) |
| $('#warnings-box')[0].style.display = 'none'; |
| }, |
| |
| /** |
| * Receive an indication of whether or not the kPerformanceMonitorGathering |
| * flag has been enabled and, if not, warn the user of such. |
| * @param {boolean} flagEnabled indicates whether or not the flag has been |
| * enabled. |
| */ |
| getFlagEnabledCallback: function(flagEnabled) { |
| if (!flagEnabled) |
| this.showWarning('flag-not-enabled-warning'); |
| }, |
| |
| /** |
| * Return true if we are not awaiting any returning data calls, and false |
| * otherwise. |
| * @return {boolean} The value indicating whether or not we are actively |
| * fetching data. |
| */ |
| fetchingData_: function() { |
| return this.awaitingDataCalls_.metrics == true || |
| this.awaitingDataCalls_.events == true; |
| }, |
| |
| /** |
| * Return true if the main steps of initialization prior to the first draw |
| * are complete, and false otherwise. |
| * @return {boolean} The value indicating whether or not the initialization |
| * process has finished. |
| */ |
| isInitialized_: function() { |
| return this.initProgress_.aggregation == true && |
| this.initProgress_.events == true && |
| this.initProgress_.metrics == true && |
| this.initProgress_.timeRange == true; |
| }, |
| |
| /** |
| * Refresh all data areas. |
| */ |
| refreshAll: function() { |
| this.refreshMetrics(); |
| this.refreshEvents(); |
| }, |
| |
| /** |
| * Receive a list of all the aggregation methods. Populate |
| * |this.aggregationRadioMap_| to reflect said list. Create the section of |
| * radio buttons for the aggregation methods, and choose the first method |
| * by default. |
| * @param {Array<{ |
| * id: number, |
| * name: string, |
| * description: string |
| * }>} methods All aggregation methods needing radio buttons. |
| */ |
| getAggregationTypesCallback: function(methods) { |
| methods.forEach(function(method) { |
| this.aggregationRadioMap_[method.id] = { 'option': method }; |
| }, this); |
| |
| this.setupRadioButtons_($('#choose-aggregation')[0], |
| this.aggregationRadioMap_, |
| this.setAggregationMethod, |
| aggregationMethodMedian, |
| 'aggregation-methods'); |
| this.setAggregationMethod(aggregationMethodMedian); |
| this.initProgress_.aggregation = true; |
| if (this.isInitialized_()) |
| this.refreshAll(); |
| }, |
| |
| /** |
| * Receive a list of all metric categories, each with its corresponding |
| * list of metric details. Populate |this.metricCategoryMap_| and |
| * |this.metricDetailsMap_| to reflect said list. Reconfigure the |
| * checkbox set for metric selection. |
| * @param {Array.<{ |
| * metricCategoryId: number, |
| * name: string, |
| * unit: string, |
| * description: string, |
| * details: Array.<{ |
| * metricId: number, |
| * name: string, |
| * description: string |
| * }> |
| * }>} categories All metric categories needing charts and checkboxes. |
| */ |
| getMetricTypesCallback: function(categories) { |
| categories.forEach(function(category) { |
| this.addCategoryChart_(category); |
| this.metricCategoryMap_[category.metricCategoryId] = category; |
| |
| category.details.forEach(function(metric) { |
| metric.color = ColorTable_[metric.metricId % ColorTable_.length]; |
| metric.maxValue = 1; |
| metric.divs = []; |
| metric.data = null; |
| metric.category = category; |
| this.metricDetailsMap_[metric.metricId] = metric; |
| }, this); |
| }, this); |
| |
| this.setupCheckboxes_($('#choose-metrics')[0], |
| this.metricCategoryMap_, 'metricId', this.addMetric, this.dropMetric); |
| |
| for (var metric in this.metricDetailsMap_) { |
| this.metricDetailsMap_[metric].checkbox.checked = true; |
| this.metricDetailsMap_[metric].enabled = true; |
| } |
| |
| this.initProgress_.metrics = true; |
| if (this.isInitialized_()) |
| this.refreshAll(); |
| }, |
| |
| /** |
| * Receive a list of all event categories, each with its correspoinding |
| * list of event details. Populate |this.eventCategoryMap_| and |
| * |this.eventDetailsMap| to reflect said list. Reconfigure the |
| * checkbox set for event selection. |
| * @param {Array.<{ |
| * eventCategoryId: number, |
| * name: string, |
| * description: string, |
| * details: Array.<{ |
| * eventId: number, |
| * name: string, |
| * description: string |
| * }> |
| * }>} categories All event categories needing charts and checkboxes. |
| */ |
| getEventTypesCallback: function(categories) { |
| categories.forEach(function(category) { |
| this.eventCategoryMap_[category.eventCategoryId] = category; |
| |
| category.details.forEach(function(event) { |
| event.color = ColorTable_[event.eventId % ColorTable_.length]; |
| event.divs = []; |
| event.data = null; |
| this.eventDetailsMap_[event.eventId] = event; |
| }, this); |
| }, this); |
| |
| this.setupCheckboxes_($('#choose-events')[0], this.eventCategoryMap_, |
| 'eventId', this.addEventType, this.dropEventType); |
| |
| this.initProgress_.events = true; |
| if (this.isInitialized_()) |
| this.refreshAll(); |
| }, |
| |
| /** |
| * Set up the aspects of the control panel which are not dependent upon the |
| * information retrieved from PerformanceMonitor's database; this includes |
| * the Time Resolutions and Aggregation Methods radio sections. |
| * @private |
| */ |
| setupStaticControlPanelFeatures_: function() { |
| // Initialize the options in the |timeResolutionRadioMap_| and set the |
| // localized names for the time resolutions. |
| for (var key in TimeResolutions_) { |
| var resolution = TimeResolutions_[key]; |
| this.timeResolutionRadioMap_[resolution.id] = { 'option': resolution }; |
| resolution.name = loadTimeData.getString(resolution.i18nKey); |
| } |
| |
| // Setup the Time Resolution radio buttons, and select the default option |
| // of minutes (finer resolution in order to ensure that the user sees |
| // something at startup). |
| this.setupRadioButtons_($('#choose-time-range')[0], |
| this.timeResolutionRadioMap_, |
| this.changeTimeResolution_, |
| TimeResolutions_.minutes.id, |
| 'time-resolutions'); |
| |
| // Set the default selection to 'Minutes' and set the time range. |
| this.setTimeRange(TimeResolutions_.minutes, |
| Date.now(), |
| true); // Auto-refresh the chart. |
| |
| var forwardButton = $('#forward-time')[0]; |
| forwardButton.addEventListener('click', this.forwardTime.bind(this)); |
| var backButton = $('#back-time')[0]; |
| backButton.addEventListener('click', this.backTime.bind(this)); |
| |
| this.initProgress_.timeRange = true; |
| if (this.isInitialized_()) |
| this.refreshAll(); |
| }, |
| |
| /** |
| * Change the current time resolution. The visible range will stay centered |
| * around the current center unless the latest edge crosses now(), in which |
| * case it will be pinned there and start auto-updating. |
| * @param {number} mapId the index into the |timeResolutionRadioMap_| of the |
| * selected resolution. |
| */ |
| changeTimeResolution_: function(mapId) { |
| var newEnd; |
| var now = Date.now(); |
| var newResolution = this.timeResolutionRadioMap_[mapId].option; |
| |
| // If we are updating the timer, then we know that we are already ending |
| // at the perceived current time (which may be different than the actual |
| // current time, since we don't update continuously). |
| newEnd = this.updateTimer_ ? now : |
| Math.min(now, this.range_.end + (newResolution.timeSpan - |
| this.range_.resolution.timeSpan) / 2); |
| |
| this.setTimeRange(newResolution, newEnd, newEnd == now); |
| }, |
| |
| /** |
| * Generalized function to create checkboxes for either events |
| * or metrics, given a |div| into which to put the checkboxes, and a |
| * |optionCategoryMap| describing the checkbox structure. |
| * |
| * For instance, |optionCategoryMap| might be metricCategoryMap_, with |
| * contents thus: |
| * |
| * optionCategoryMap : { |
| * 1: { |
| * name: 'CPU', |
| * details: [ |
| * { |
| * metricId: 1, |
| * name: 'CPU Usage', |
| * description: |
| * 'The combined CPU usage of all processes related to Chrome', |
| * color: 'rgb(255, 128, 128)' |
| * } |
| * ], |
| * 2: { |
| * name : 'Memory', |
| * details: [ |
| * { |
| * metricId: 2, |
| * name: 'Private Memory Usage', |
| * description: |
| * 'The combined private memory usage of all processes related |
| * to Chrome', |
| * color: 'rgb(128, 255, 128)' |
| * }, |
| * { |
| * metricId: 3, |
| * name: 'Shared Memory Usage', |
| * description: |
| * 'The combined shared memory usage of all processes related |
| * to Chrome', |
| * color: 'rgb(128, 128, 255)' |
| * } |
| * ] |
| * } |
| * |
| * and we would call setupCheckboxes_ thus: |
| * |
| * this.setupCheckboxes_(<parent div>, this.metricCategoryMap_, 'metricId', |
| * this.addMetric, this.dropMetric); |
| * |
| * MetricCategoryMap_'s values each have a |name| and |details| property. |
| * SetupCheckboxes_ creates one major header for each such value, with title |
| * given by the |name| field. Under each major header are checkboxes, |
| * one for each element in the |details| property. The checkbox titles |
| * come from the |name| property of each |details| object, |
| * and they each have an associated colored icon matching the |color| |
| * property of the details object. |
| * |
| * So, for the example given, the generated HTML looks thus: |
| * |
| * <div> |
| * <h3 class="category-heading">CPU</h3> |
| * <div class="checkbox-group"> |
| * <div> |
| * <label class="input-label" title= |
| * "The combined CPU usage of all processes related to Chrome"> |
| * <input type="checkbox"> |
| * <span>CPU</span> |
| * </label> |
| * </div> |
| * </div> |
| * </div> |
| * <div> |
| * <h3 class="category-heading">Memory</h3> |
| * <div class="checkbox-group"> |
| * <div> |
| * <label class="input-label" title= "The combined private memory \ |
| * usage of all processes related to Chrome"> |
| * <input type="checkbox"> |
| * <span>Private Memory</span> |
| * </label> |
| * </div> |
| * <div> |
| * <label class="input-label" title= "The combined shared memory \ |
| * usage of all processes related to Chrome"> |
| * <input type="checkbox"> |
| * <span>Shared Memory</span> |
| * </label> |
| * </div> |
| * </div> |
| * </div> |
| * |
| * The checkboxes for each details object call addMetric or |
| * dropMetric as they are checked and unchecked, passing the relevant |
| * |metricId| value. Parameter 'metricId' identifies key |metricId| as the |
| * identifying property to pass to the methods. So, for instance, checking |
| * the CPU Usage box results in a call to this.addMetric(1), since |
| * metricCategoryMap_[1].details[0].metricId == 1. |
| * |
| * In general, |optionCategoryMap| must have values that each include |
| * a property |name|, and a property |details|. The |details| value must |
| * be an array of objects that in turn each have an identifying property |
| * with key given by parameter |idKey|, plus a property |name| and a |
| * property |color|. |
| * |
| * @param {!HTMLDivElement} div A <div> into which to put checkboxes. |
| * @param {!Object} optionCategoryMap A map of metric/event categories. |
| * @param {string} idKey The key of the id property. |
| * @param {!function(this:Controller, Object)} check |
| * The function to select an entry (metric or event). |
| * @param {!function(this:Controller, Object)} uncheck |
| * The function to deselect an entry (metric or event). |
| * @private |
| */ |
| setupCheckboxes_: function(div, optionCategoryMap, idKey, check, uncheck) { |
| var categoryTemplate = $('#category-template')[0]; |
| var checkboxTemplate = $('#checkbox-template')[0]; |
| |
| for (var c in optionCategoryMap) { |
| var category = optionCategoryMap[c]; |
| var template = categoryTemplate.cloneNode(true); |
| template.id = ''; |
| |
| var heading = template.querySelector('.category-heading'); |
| heading.innerText = category.name; |
| heading.title = category.description; |
| |
| var checkboxGroup = template.querySelector('.checkbox-group'); |
| category.details.forEach(function(details) { |
| var checkbox = checkboxTemplate.cloneNode(true); |
| checkbox.id = ''; |
| var input = checkbox.querySelector('input'); |
| |
| details.checkbox = input; |
| input.checked = false; |
| input.option = details[idKey]; |
| input.addEventListener('change', function(e) { |
| (e.target.checked ? check : uncheck).call(this, e.target.option); |
| }.bind(this)); |
| |
| checkbox.querySelector('span').innerText = details.name; |
| checkbox.querySelector('.input-label').title = details.description; |
| |
| checkboxGroup.appendChild(checkbox); |
| }, this); |
| |
| div.appendChild(template); |
| } |
| }, |
| |
| /** |
| * Generalized function to create radio buttons in a collection of |
| * |collectionName|, given a |div| into which the radio buttons are placed |
| * and a |optionMap| describing the radio buttons' options. |
| * |
| * optionMaps have two guaranteed fields - 'option' and 'element'. The |
| * 'option' field corresponds to the item which the radio button will be |
| * representing (e.g., a particular aggregation method). |
| * - Each 'option' is guaranteed to have a 'value', a 'name', and a |
| * 'description'. 'Value' holds the id of the option, while 'name' and |
| * 'description' are internationalized strings for the radio button's |
| * content. |
| * - 'Element' is the field devoted to the HTMLElement for the radio |
| * button corresponding to that entry; this will be set in this |
| * function. |
| * |
| * Assume that |optionMap| is |aggregationRadioMap_|, as follows: |
| * optionMap: { |
| * 0: { |
| * option: { |
| * id: 0 |
| * name: 'Median' |
| * description: 'Aggregate using median calculations to reduce |
| * noisiness in reporting' |
| * }, |
| * element: null |
| * }, |
| * 1: { |
| * option: { |
| * id: 1 |
| * name: 'Mean' |
| * description: 'Aggregate using mean calculations for the most |
| * accurate average in reporting' |
| * }, |
| * element: null |
| * } |
| * } |
| * |
| * and we would call setupRadioButtons_ with: |
| * this.setupRadioButtons_(<parent_div>, this.aggregationRadioMap_, |
| * this.setAggregationMethod, 0, 'aggregation-methods'); |
| * |
| * The resultant HTML would be: |
| * <div class="radio"> |
| * <label class="input-label" title="Aggregate using median \ |
| * calculations to reduce noisiness in reporting"> |
| * <input type="radio" name="aggregation-methods" value=0> |
| * <span>Median</span> |
| * </label> |
| * </div> |
| * <div class="radio"> |
| * <label class="input-label" title="Aggregate using mean \ |
| * calculations for the most accurate average in reporting"> |
| * <input type="radio" name="aggregation-methods" value=1> |
| * <span>Mean</span> |
| * </label> |
| * </div> |
| * |
| * If a radio button is selected, |onSelect| is called with the radio |
| * button's value. The |defaultKey| is used to choose which radio button |
| * to select at startup; the |onSelect| method is not called on this |
| * selection. |
| * |
| * @param {!HTMLDivElement} div A <div> into which we place the radios. |
| * @param {!Object} optionMap A map containing the radio button information. |
| * @param {!function(this:Controller, Object)} onSelect |
| * The function called when a radio is selected. |
| * @param {string} defaultKey The key to the radio which should be selected |
| * initially. |
| * @param {string} collectionName The name of the radio button collection. |
| * @private |
| */ |
| setupRadioButtons_: function(div, |
| optionMap, |
| onSelect, |
| defaultKey, |
| collectionName) { |
| var radioTemplate = $('#radio-template')[0]; |
| for (var key in optionMap) { |
| var entry = optionMap[key]; |
| var radio = radioTemplate.cloneNode(true); |
| radio.id = ''; |
| var input = radio.querySelector('input'); |
| |
| input.name = collectionName; |
| input.enumerator = entry.option.id; |
| input.option = entry; |
| radio.querySelector('span').innerText = entry.option.name; |
| if (entry.option.description != undefined) |
| radio.querySelector('.input-label').title = entry.option.description; |
| div.appendChild(radio); |
| entry.element = input; |
| } |
| |
| optionMap[defaultKey].element.click(); |
| |
| div.addEventListener('click', function(e) { |
| if (!e.target.webkitMatchesSelector('input[type="radio"]')) |
| return; |
| |
| onSelect.call(this, e.target.enumerator); |
| }.bind(this)); |
| }, |
| |
| /** |
| * Add a new chart for |category|, making it initially hidden, |
| * with no metrics displayed in it. |
| * @param {!Object} category The metric category for which to create |
| * the chart. Category is a value from metricCategoryMap_. |
| * @private |
| */ |
| addCategoryChart_: function(category) { |
| var chartParent = $('#charts')[0]; |
| var mainDiv = $('#chart-template')[0].cloneNode(true); |
| mainDiv.id = ''; |
| |
| var yaxisLabel = mainDiv.querySelector('h4'); |
| yaxisLabel.innerText = category.unit; |
| |
| // Rotation is weird in html. The length of the text affects the x-axis |
| // placement of the label. We shift it back appropriately. |
| var width = -1 * (yaxisLabel.offsetWidth / 2) + 20; |
| var widthString = width.toString() + 'px'; |
| yaxisLabel.style.webkitMarginStart = widthString; |
| |
| var grid = mainDiv.querySelector('.grid'); |
| |
| mainDiv.hidden = true; |
| chartParent.appendChild(mainDiv); |
| |
| grid.hovers = []; |
| |
| // Set the various fields for the PerformanceMonitor.Chart object, and |
| // add the new object to |charts_|. |
| var chart = {}; |
| chart.mainDiv = mainDiv; |
| chart.yaxisLabel = yaxisLabel; |
| chart.grid = grid; |
| chart.metricIds = []; |
| |
| category.details.forEach(function(details) { |
| chart.metricIds.push(details.metricId); |
| }); |
| |
| this.charts_.push(chart); |
| |
| // Receive hover events from Flot. |
| // Attached to chart will be properties 'hovers', a list of {x, div} |
| // pairs. As pos events arrive, check each hover to see if it should |
| // be hidden or made visible. |
| $(grid).bind('plothover', function(event, pos, item) { |
| var tolerance = this.range_.resolution.pointResolution; |
| |
| grid.hovers.forEach(function(hover) { |
| hover.div.hidden = hover.x < pos.x - tolerance || |
| hover.x > pos.x + tolerance; |
| }); |
| |
| }.bind(this)); |
| |
| $(window).resize(function() { |
| if (this.resizeTimer_ != null) |
| clearTimeout(this.resizeTimer_); |
| this.resizeTimer_ = setTimeout(this.checkResize_.bind(this), |
| resizeDelay_); |
| }.bind(this)); |
| }, |
| |
| /** |
| * |resizeDelay_| ms have elapsed since the last resize event, and the timer |
| * for redrawing has triggered. Clear it, and redraw all the charts. |
| * @private |
| */ |
| checkResize_: function() { |
| clearTimeout(this.resizeTimer_); |
| this.resizeTimer_ = null; |
| |
| this.drawCharts(); |
| }, |
| |
| /** |
| * Set the time range for which to display metrics and events. For |
| * now, the time range always ends at 'now', but future implementations |
| * may allow time ranges not so anchored. Also set the format string for |
| * Flot. |
| * |
| * @param {TimeResolution} resolution |
| * The time resolution at which to display the data. |
| * @param {number} end Ending time, in ms since epoch, to which to |
| * set the new time range. |
| * @param {boolean} autoRefresh Indicates whether we should restart the |
| * range-update timer. |
| */ |
| setTimeRange: function(resolution, end, autoRefresh) { |
| // If we have a timer and we are no longer updating, or if we need a timer |
| // for a different resolution, disable the current timer. |
| if (this.updateTimer_ && |
| (this.range_.resolution != resolution || !autoRefresh)) { |
| clearInterval(this.updateTimer_); |
| this.updateTimer_ = null; |
| } |
| |
| if (autoRefresh && !this.updateTimer_) { |
| this.updateTimer_ = setInterval( |
| this.forwardTime.bind(this), |
| intervalMultiple_ * resolution.pointResolution); |
| } |
| |
| this.range_.resolution = resolution; |
| this.range_.end = Math.floor(end / resolution.pointResolution) * |
| resolution.pointResolution; |
| this.range_.start = this.range_.end - resolution.timeSpan; |
| this.setTimeFormat_(); |
| |
| if (this.isInitialized_()) |
| this.refreshAll(); |
| }, |
| |
| /** |
| * Set the format string for Flot. For time formats, we display the time |
| * if we are showing data only for the current day; we display the month, |
| * day, and time if we are showing data for multiple days at a fine |
| * resolution; we display the month and day if we are showing data for |
| * multiple days within the same year at course resolution; and we display |
| * the year, month, and day if we are showing data for multiple years. |
| * @private |
| */ |
| setTimeFormat_: function() { |
| // If the range is set to a week or less, then we will need to show times. |
| if (this.range_.resolution.id <= TimeResolutions_['week'].id) { |
| var dayStart = new Date(); |
| dayStart.setHours(0); |
| dayStart.setMinutes(0); |
| |
| if (this.range_.start >= dayStart.getTime()) |
| this.range_.format = TimeFormats_['time']; |
| else |
| this.range_.format = TimeFormats_['monthDayTime']; |
| } else { |
| var yearStart = new Date(); |
| yearStart.setMonth(0); |
| yearStart.setDate(0); |
| |
| if (this.range_.start >= yearStart.getTime()) |
| this.range_.format = TimeFormats_['monthDay']; |
| else |
| this.range_.format = TimeFormats_['yearMonthDay']; |
| } |
| }, |
| |
| /** |
| * Back up the time range by 1/2 of its current span, and cause chart |
| * redraws. |
| */ |
| backTime: function() { |
| this.setTimeRange(this.range_.resolution, |
| this.range_.end - this.range_.resolution.timeSpan / 2, |
| false); |
| }, |
| |
| /** |
| * Advance the time range by 1/2 of its current span, or up to the point |
| * where it ends at the present time, whichever is less. |
| */ |
| forwardTime: function() { |
| var now = Date.now(); |
| var newEnd = |
| Math.min(now, this.range_.end + this.range_.resolution.timeSpan / 2); |
| |
| this.setTimeRange(this.range_.resolution, newEnd, newEnd == now); |
| }, |
| |
| /** |
| * Set the aggregation method. |
| * @param {number} methodId The id of the aggregation method. |
| */ |
| setAggregationMethod: function(methodId) { |
| if (methodId != aggregationMethodNone) |
| this.hideWarning('no-aggregation-warning'); |
| else |
| this.showWarning('no-aggregation-warning'); |
| |
| this.aggregationMethod = methodId; |
| if (this.isInitialized_()) |
| this.refreshMetrics(); |
| }, |
| |
| /** |
| * Add a new metric to the display, fetching its data and triggering a |
| * chart redraw. |
| * @param {number} metricId The id of the metric to start displaying. |
| */ |
| addMetric: function(metricId) { |
| var metric = this.metricDetailsMap_[metricId]; |
| metric.enabled = true; |
| this.refreshMetrics(); |
| }, |
| |
| /** |
| * Remove a metric from its homechart, triggering a chart redraw. |
| * @param {number} metricId The metric to stop displaying. |
| */ |
| dropMetric: function(metricId) { |
| var metric = this.metricDetailsMap_[metricId]; |
| metric.enabled = false; |
| this.drawCharts(); |
| }, |
| |
| /** |
| * Refresh all metrics which are active on the graph in one call to the |
| * webui. Results will be returned in getMetricsCallback(). |
| */ |
| refreshMetrics: function() { |
| var metrics = []; |
| |
| for (var metric in this.metricDetailsMap_) { |
| if (this.metricDetailsMap_[metric].enabled) |
| metrics.push(this.metricDetailsMap_[metric].metricId); |
| } |
| |
| if (!metrics.length) |
| return; |
| |
| this.awaitingDataCalls_.metrics = true; |
| chrome.send('getMetrics', |
| [metrics, |
| this.range_.start, this.range_.end, |
| this.range_.resolution.pointResolution, |
| this.aggregationMethod]); |
| }, |
| |
| /** |
| * The callback from refreshing the metrics. The resulting metrics will be |
| * returned in a list, containing for each active metric a list of data |
| * point series, representing the time periods for which PerformanceMonitor |
| * was active. These data will be in sorted order, and will be aggregated |
| * according to |aggregationMethod_|. These data are put into a Flot-style |
| * series, with each point stored in an array of length 2, comprised of the |
| * time and the value of the point. |
| * @param Array<{ |
| * metricId: number, |
| * data: Array<{time: number, value: number}>, |
| * maxValue: number |
| * }> results The data for the requested metrics. |
| */ |
| getMetricsCallback: function(results) { |
| results.forEach(function(metric) { |
| var metricDetails = this.metricDetailsMap_[metric.metricId]; |
| |
| metricDetails.data = []; |
| |
| // Each data series sent back represents a interval for which |
| // PerformanceMonitor was active. Iterate through the points of each |
| // series, converting them to Flot standard (an array of time, value |
| // pairs). |
| metric.metrics.forEach(function(series) { |
| var seriesData = []; |
| series.forEach(function(point) { |
| seriesData.push([point.time - timezoneOffset_, point.value]); |
| }); |
| metricDetails.data.push(seriesData); |
| }); |
| |
| metricDetails.maxValue = Math.max(metricDetails.maxValue, |
| metric.maxValue); |
| }, this); |
| |
| this.awaitingDataCalls_.metrics = false; |
| this.drawCharts(); |
| }, |
| |
| /** |
| * Add a new event to the display, fetching its data and triggering a |
| * redraw. |
| * @param {number} eventType The type of event to start displaying. |
| */ |
| addEventType: function(eventId) { |
| this.eventDetailsMap_[eventId].enabled = true; |
| this.refreshEvents(); |
| }, |
| |
| /* |
| * Remove an event from the display, triggering a redraw. |
| * @param {number} eventId The type of event to stop displaying. |
| */ |
| dropEventType: function(eventId) { |
| this.eventDetailsMap_[eventId].enabled = false; |
| this.drawCharts(); |
| }, |
| |
| /** |
| * Refresh all events which are active on the graph in one call to the |
| * webui. Results will be returned in getEventsCallback(). |
| */ |
| refreshEvents: function() { |
| var events = []; |
| for (var eventType in this.eventDetailsMap_) { |
| if (this.eventDetailsMap_[eventType].enabled) |
| events.push(this.eventDetailsMap_[eventType].eventId); |
| } |
| if (!events.length) |
| return; |
| |
| this.awaitingDataCalls_.events = true; |
| chrome.send('getEvents', [events, this.range_.start, this.range_.end]); |
| }, |
| |
| /** |
| * The callback from refreshing events. Resulting events are stored in a |
| * list object, which contains for each event type requested a series |
| * of event points. Each event point contains a time and an arbitrary list |
| * of additional properties to be displayed as a tooltip message for the |
| * event. |
| * @param Array.<{ |
| * eventId: number, |
| * Array.<{time: number}> |
| * }> results The collection of events for the requested types. |
| */ |
| getEventsCallback: function(results) { |
| results.forEach(function(eventSet) { |
| var eventType = this.eventDetailsMap_[eventSet.eventId]; |
| |
| eventSet.events.forEach(function(eventData) { |
| eventData.time -= timezoneOffset_; |
| }); |
| eventType.data = eventSet.events; |
| }, this); |
| |
| this.awaitingDataCalls_.events = false; |
| this.drawCharts(); |
| }, |
| |
| /** |
| * Create and return an array of 'markings' (per Flot), representing |
| * vertical lines at the event time, in the event's color. Also add |
| * (not per Flot) a |popupTitle| property to each, to be used for |
| * labeling description popups. |
| * @return {!Array.<{ |
| * color: string, |
| * popupContent: string, |
| * xaxis: {from: number, to: number} |
| * }>} A marks data structure for Flot to use. |
| * @private |
| */ |
| getEventMarks_: function() { |
| var enabledEvents = []; |
| var markings = []; |
| var explanation; |
| var date; |
| |
| for (var eventType in this.eventDetailsMap_) { |
| if (this.eventDetailsMap_[eventType].enabled) |
| enabledEvents.push(this.eventDetailsMap_[eventType]); |
| } |
| |
| enabledEvents.forEach(function(eventValue) { |
| eventValue.data.forEach(function(point) { |
| if (point.time >= this.range_.start - timezoneOffset_ && |
| point.time <= this.range_.end - timezoneOffset_) { |
| date = new Date(point.time + timezoneOffset_); |
| explanation = '<b>' + eventValue.popupTitle + '<br/>' + |
| date.toLocaleString() + '</b><br/>'; |
| |
| for (var key in point) { |
| if (key != 'time') { |
| var datum = point[key]; |
| |
| // We display all fields with a label-value pair. |
| if ('label' in datum && 'value' in datum) { |
| explanation = explanation + '<b>' + datum.label + ': </b>' + |
| datum.value + ' <br/>'; |
| } |
| } |
| } |
| markings.push({ |
| color: eventValue.color, |
| popupContent: explanation, |
| xaxis: { from: point.time, to: point.time } |
| }); |
| } else { |
| console.log('Event out of time range ' + this.range_.start + |
| ' -> ' + this.range_.end + ' at: ' + point.time); |
| } |
| }, this); |
| }, this); |
| |
| return markings; |
| }, |
| |
| /** |
| * Return an object containing an array of series for Flot to chart, as well |
| * as a series of axes (currently this will only be one axis). |
| * @param {Array.<PerformanceMonitor.MetricDetails>} activeMetrics |
| * The metrics for which we are generating series. |
| * @return {!{ |
| * series: !Array.<{ |
| * color: string, |
| * data: !Array<{time: number, value: number}, |
| * yaxis: {min: number, max: number, labelWidth: number} |
| * }, |
| * yaxes: !Array.<{min: number, max: number, labelWidth: number}> |
| * }} |
| * @private |
| */ |
| getChartSeriesAndAxes_: function(activeMetrics) { |
| var seriesList = []; |
| var axisList = []; |
| var axisMap = {}; |
| activeMetrics.forEach(function(metric) { |
| var categoryId = metric.category.metricCategoryId; |
| var yaxisNumber = axisMap[categoryId]; |
| |
| // Add a new y-axis if we are encountering this category of metric |
| // for the first time. Otherwise, update the existing y-axis with |
| // a new max value if needed. (Presently, we expect only one category |
| // of metric per chart, but this design permits more in the future.) |
| if (yaxisNumber === undefined) { |
| axisList.push({min: 0, |
| max: metric.maxValue * yAxisMargin_, |
| labelWidth: 60}); |
| axisMap[categoryId] = yaxisNumber = axisList.length; |
| } else { |
| axisList[yaxisNumber - 1].max = |
| Math.max(axisList[yaxisNumber - 1].max, |
| metric.maxValue * yAxisMargin_); |
| } |
| |
| // Create a Flot-style series for each data series in the metric. |
| for (var i = 0; i < metric.data.length; ++i) { |
| seriesList.push({ |
| color: metric.color, |
| data: metric.data[i], |
| label: i == 0 ? metric.name : null, |
| yaxis: yaxisNumber |
| }); |
| } |
| }, this); |
| |
| return { series: seriesList, yaxes: axisList }; |
| }, |
| |
| /** |
| * Draw each chart which has at least one enabled metric, along with all |
| * the event markers, if and only if we do not have outstanding calls for |
| * data. |
| */ |
| drawCharts: function() { |
| // If we are currently waiting for data, do nothing - the callbacks will |
| // re-call drawCharts when they are done. This way, we can avoid any |
| // conflicts. |
| if (this.fetchingData_()) |
| return; |
| |
| // All charts will share the same xaxis and events. |
| var eventMarks = this.getEventMarks_(); |
| var xaxis = { |
| mode: 'time', |
| timeformat: this.range_.format, |
| min: this.range_.start - timezoneOffset_, |
| max: this.range_.end - timezoneOffset_ |
| }; |
| |
| this.charts_.forEach(function(chart) { |
| var activeMetrics = []; |
| chart.metricIds.forEach(function(id) { |
| if (this.metricDetailsMap_[id].enabled) |
| activeMetrics.push(this.metricDetailsMap_[id]); |
| }, this); |
| |
| if (!activeMetrics.length) { |
| chart.hidden = true; |
| return; |
| } |
| |
| chart.mainDiv.hidden = false; |
| |
| var chartData = this.getChartSeriesAndAxes_(activeMetrics); |
| |
| // There is the possibility that we have no data for this particular |
| // time window and metric, but Flot will not draw the grid without at |
| // least one data point (regardless of whether that datapoint is |
| // displayed). Thus, we will add the point (-1, -1) (which is guaranteed |
| // not to show with our axis bounds), and force Flot to show the chart. |
| if (chartData.series.length == 0) |
| chartData.series = [[-1, -1]]; |
| |
| chart.plot = $.plot(chart.grid, chartData.series, { |
| yaxes: chartData.yaxes, |
| xaxis: xaxis, |
| points: { show: true, radius: 1}, |
| lines: { show: true}, |
| grid: { |
| markings: eventMarks, |
| hoverable: true, |
| autoHighlight: true, |
| backgroundColor: { colors: ['#fff', '#f0f6fc'] }, |
| }, |
| }); |
| |
| // For each event in |eventMarks|, create also a label div, with left |
| // edge colinear with the event vertical line. Top of label is |
| // presently a hack-in, putting labels in three tiers of 25px height |
| // each to avoid overlap. Will need something better. |
| var labelTemplate = $('#label-template')[0]; |
| for (var i = 0; i < eventMarks.length; i++) { |
| var mark = eventMarks[i]; |
| var point = chart.plot.pointOffset( |
| {x: mark.xaxis.to, y: chartData.yaxes[0].max, yaxis: 1}); |
| var labelDiv = labelTemplate.cloneNode(true); |
| labelDiv.innerHTML = mark.popupContent; |
| labelDiv.style.left = point.left + 'px'; |
| labelDiv.style.top = (point.top + 100 * (i % 3)) + 'px'; |
| |
| chart.grid.appendChild(labelDiv); |
| labelDiv.hidden = true; |
| chart.grid.hovers.push({x: mark.xaxis.to, div: labelDiv}); |
| } |
| }, this); |
| }, |
| }; |
| return { |
| PerformanceMonitor: PerformanceMonitor |
| }; |
| }); |
| |
| var PerformanceMonitor = new performance_monitor.PerformanceMonitor(); |
