219 lines
8.2 KiB
JavaScript
219 lines
8.2 KiB
JavaScript
// Derived from Chromium WebRTC Internals Dashboard - see Acknowledgements for full license details
|
|
|
|
import {$} from './util.js';
|
|
|
|
import {generateStatsLabel} from './stats_helper.js';
|
|
|
|
/**
|
|
* Maintains the stats table.
|
|
*/
|
|
export class StatsTable {
|
|
constructor() {}
|
|
|
|
/**
|
|
* Adds |report| to the stats table of |peerConnectionElement|.
|
|
*
|
|
* @param {!Element} peerConnectionElement The root element.
|
|
* @param {!Object} report The object containing stats, which is the object
|
|
* containing timestamp and values, which is an array of strings, whose
|
|
* even index entry is the name of the stat, and the odd index entry is
|
|
* the value.
|
|
*/
|
|
addStatsReport(peerConnectionElement, report) {
|
|
const statsTable = this.ensureStatsTable_(peerConnectionElement, report);
|
|
|
|
// Update the label since information may have changed.
|
|
statsTable.parentElement.firstElementChild.innerText =
|
|
generateStatsLabel(report);
|
|
|
|
if (report.stats) {
|
|
this.addStatsToTable_(
|
|
statsTable, report.stats.timestamp, report.stats.values);
|
|
}
|
|
}
|
|
|
|
clearStatsLists(peerConnectionElement) {
|
|
const containerId = peerConnectionElement.id + '-table-container';
|
|
// Disable getElementById restriction here, since |containerId| is not
|
|
// always a valid selector.
|
|
// eslint-disable-next-line no-restricted-properties
|
|
const container = document.getElementById(containerId);
|
|
if (container) {
|
|
peerConnectionElement.removeChild(container);
|
|
this.ensureStatsTableContainer_(peerConnectionElement);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ensure the DIV container for the stats tables is created as a child of
|
|
* |peerConnectionElement|.
|
|
*
|
|
* @param {!Element} peerConnectionElement The root element.
|
|
* @return {!Element} The stats table container.
|
|
* @private
|
|
*/
|
|
ensureStatsTableContainer_(peerConnectionElement) {
|
|
const containerId = peerConnectionElement.id + '-table-container';
|
|
// Disable getElementById restriction here, since |containerId| is not
|
|
// always a valid selector.
|
|
// eslint-disable-next-line no-restricted-properties
|
|
let container = document.getElementById(containerId);
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.id = containerId;
|
|
container.className = 'stats-table-container';
|
|
const head = document.createElement('div');
|
|
head.textContent = 'Stats Tables';
|
|
container.appendChild(head);
|
|
const label = document.createElement('label');
|
|
label.innerText = 'Filter statistics by type including ';
|
|
container.appendChild(label);
|
|
const input = document.createElement('input');
|
|
input.placeholder = 'separate multiple values by `,`';
|
|
input.size = 25;
|
|
input.oninput = (e) => this.filterStats(e, container);
|
|
container.appendChild(input);
|
|
peerConnectionElement.appendChild(container);
|
|
}
|
|
return container;
|
|
}
|
|
|
|
/**
|
|
* Ensure the stats table for track specified by |report| of PeerConnection
|
|
* |peerConnectionElement| is created.
|
|
*
|
|
* @param {!Element} peerConnectionElement The root element.
|
|
* @param {!Object} report The object containing stats, which is the object
|
|
* containing timestamp and values, which is an array of strings, whose
|
|
* even index entry is the name of the stat, and the odd index entry is
|
|
* the value.
|
|
* @return {!Element} The stats table element.
|
|
* @private
|
|
*/
|
|
ensureStatsTable_(peerConnectionElement, report) {
|
|
const tableId = peerConnectionElement.id + '-table-' + report.id;
|
|
// Disable getElementById restriction here, since |tableId| is not
|
|
// always a valid selector.
|
|
// eslint-disable-next-line no-restricted-properties
|
|
let table = document.getElementById(tableId);
|
|
if (!table) {
|
|
const container = this.ensureStatsTableContainer_(peerConnectionElement);
|
|
const details = document.createElement('details');
|
|
details.attributes['data-statsType'] = report.type;
|
|
container.appendChild(details);
|
|
|
|
const summary = document.createElement('summary');
|
|
summary.textContent = generateStatsLabel(report);
|
|
details.appendChild(summary);
|
|
|
|
table = document.createElement('table');
|
|
details.appendChild(table);
|
|
table.id = tableId;
|
|
table.border = 1;
|
|
|
|
table.appendChild($('trth-template').content.cloneNode(true));
|
|
table.rows[0].cells[0].textContent = 'Statistics ' + report.id;
|
|
}
|
|
return table;
|
|
}
|
|
|
|
/**
|
|
* Update |statsTable| with |time| and |statsData|.
|
|
*
|
|
* @param {!Element} statsTable Which table to update.
|
|
* @param {number} time The number of milliseconds since epoch.
|
|
* @param {Array<string>} statsData An array of stats name and value pairs.
|
|
* @private
|
|
*/
|
|
addStatsToTable_(statsTable, time, statsData) {
|
|
const definedMetrics = new Set();
|
|
for (let i = 0; i < statsData.length - 1; i = i + 2) {
|
|
definedMetrics.add(statsData[i]);
|
|
}
|
|
// For any previously reported metric that is no longer defined, replace its
|
|
// now obsolete value with the magic string "(removed)".
|
|
const metricsContainer = statsTable.firstChild;
|
|
for (let i = 0; i < metricsContainer.children.length; ++i) {
|
|
const metricElement = metricsContainer.children[i];
|
|
// `metricElement` IDs have the format `bla-bla-bla-bla-${metricName}`.
|
|
let metricName =
|
|
metricElement.id.substring(metricElement.id.lastIndexOf('-') + 1);
|
|
if (metricName.endsWith(']')) {
|
|
// Computed metrics may contain the '-' character (e.g.
|
|
// `DifferenceCalculator` based metrics) in which case `metricName` will
|
|
// not have been parsed correctly. Instead look for starting '['.
|
|
metricName =
|
|
metricElement.id.substring(metricElement.id.indexOf('['));
|
|
}
|
|
if (metricName && metricName != 'timestamp' &&
|
|
!definedMetrics.has(metricName)) {
|
|
this.updateStatsTableRow_(statsTable, metricName, '(removed)');
|
|
}
|
|
}
|
|
// Add or update all "metric: value" that have a defined value.
|
|
const date = new Date(time);
|
|
this.updateStatsTableRow_(statsTable, 'timestamp', date.toLocaleString());
|
|
for (let i = 0; i < statsData.length - 1; i = i + 2) {
|
|
this.updateStatsTableRow_(statsTable, statsData[i], statsData[i + 1]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the value column of the stats row of |rowName| to |value|.
|
|
* A new row is created is this is the first report of this stats.
|
|
*
|
|
* @param {!Element} statsTable Which table to update.
|
|
* @param {string} rowName The name of the row to update.
|
|
* @param {string} value The new value to set.
|
|
* @private
|
|
*/
|
|
updateStatsTableRow_(statsTable, rowName, value) {
|
|
const trId = statsTable.id + '-' + rowName;
|
|
// Disable getElementById restriction here, since |trId| is not always
|
|
// a valid selector.
|
|
// eslint-disable-next-line no-restricted-properties
|
|
let trElement = document.getElementById(trId);
|
|
const activeConnectionClass = 'stats-table-active-connection';
|
|
if (!trElement) {
|
|
trElement = document.createElement('tr');
|
|
trElement.id = trId;
|
|
statsTable.firstChild.appendChild(trElement);
|
|
const item = $('td2-template').content.cloneNode(true);
|
|
item.querySelector('td').textContent = rowName;
|
|
trElement.appendChild(item);
|
|
}
|
|
trElement.cells[1].textContent = value;
|
|
|
|
// Highlights the table for the active connection.
|
|
if (rowName === 'googActiveConnection') {
|
|
if (value === true) {
|
|
statsTable.parentElement.classList.add(activeConnectionClass);
|
|
} else {
|
|
statsTable.parentElement.classList.remove(activeConnectionClass);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply a filter to the stats table
|
|
* @param event InputEvent from the filter input field.
|
|
* @param container stats table container element.
|
|
* @private
|
|
*/
|
|
filterStats(event, container) {
|
|
const filter = event.target.value;
|
|
const filters = filter.split(',');
|
|
container.childNodes.forEach(node => {
|
|
if (node.nodeName !== 'DETAILS') {
|
|
return;
|
|
}
|
|
const statsType = node.attributes['data-statsType'];
|
|
if (!filter || filters.includes(statsType) ||
|
|
filters.find(f => statsType.includes(f))) {
|
|
node.style.display = 'block';
|
|
} else {
|
|
node.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
}
|