/* 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();