content/browser/resources/media/stats_table.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5
   6 /**
   7  * Maintains the stats table.
   8  * @param {SsrcInfoManager} ssrcInfoManager The source of the ssrc info.
   9  */
  10 var StatsTable = (function(ssrcInfoManager) {
  11   'use strict';
  12
  13   /**
  14    * @param {SsrcInfoManager} ssrcInfoManager The source of the ssrc info.
  15    * @constructor
  16    */
  17   function StatsTable(ssrcInfoManager) {
  18     /**
  19      * @type {SsrcInfoManager}
  20      * @private
  21      */
  22     this.ssrcInfoManager_ = ssrcInfoManager;
  23   }
  24
  25   StatsTable.prototype = {
  26     /**
  27      * Adds |report| to the stats table of |peerConnectionElement|.
  28      *
  29      * @param {!Element} peerConnectionElement The root element.
  30      * @param {!Object} report The object containing stats, which is the object
  31      *     containing timestamp and values, which is an array of strings, whose
  32      *     even index entry is the name of the stat, and the odd index entry is
  33      *     the value.
  34      */
  35     addStatsReport: function(peerConnectionElement, report) {
  36       var statsTable = this.ensureStatsTable_(peerConnectionElement, report);
  37
  38       if (report.stats) {
  39         this.addStatsToTable_(statsTable,
  40                               report.stats.timestamp, report.stats.values);
  41       }
  42     },
  43
  44     /**
  45      * Ensure the DIV container for the stats tables is created as a child of
  46      * |peerConnectionElement|.
  47      *
  48      * @param {!Element} peerConnectionElement The root element.
  49      * @return {!Element} The stats table container.
  50      * @private
  51      */
  52     ensureStatsTableContainer_: function(peerConnectionElement) {
  53       var containerId = peerConnectionElement.id + '-table-container';
  54       var container = $(containerId);
  55       if (!container) {
  56         container = document.createElement('div');
  57         container.id = containerId;
  58         container.className = 'stats-table-container';
  59         var head = document.createElement('div');
  60         head.textContent = 'Stats Tables';
  61         container.appendChild(head);
  62         peerConnectionElement.appendChild(container);
  63       }
  64       return container;
  65     },
  66
  67     /**
  68      * Ensure the stats table for track specified by |report| of PeerConnection
  69      * |peerConnectionElement| is created.
  70      *
  71      * @param {!Element} peerConnectionElement The root element.
  72      * @param {!Object} report The object containing stats, which is the object
  73      *     containing timestamp and values, which is an array of strings, whose
  74      *     even index entry is the name of the stat, and the odd index entry is
  75      *     the value.
  76      * @return {!Element} The stats table element.
  77      * @private
  78      */
  79      ensureStatsTable_: function(peerConnectionElement, report) {
  80       var tableId = peerConnectionElement.id + '-table-' + report.id;
  81       var table = $(tableId);
  82       if (!table) {
  83         var container = this.ensureStatsTableContainer_(peerConnectionElement);
  84         var details = document.createElement('details');
  85         container.appendChild(details);
  86         var summary = document.createElement('summary');
  87         summary.textContent = report.id;
  88         details.appendChild(summary);
  89
  90         table = document.createElement('table');
  91         details.appendChild(table);
  92         table.id = tableId;
  93         table.border = 1;
  94
  95         table.innerHTML = '<tr><th colspan=2></th></tr>';
  96         table.rows[0].cells[0].textContent = 'Statistics ' + report.id;
  97         if (report.type == 'ssrc') {
  98             table.insertRow(1);
  99             table.rows[1].innerHTML = '<td colspan=2></td>';
 100             this.ssrcInfoManager_.populateSsrcInfo(
 101                 table.rows[1].cells[0], GetSsrcFromReport(report));
 102         }
 103       }
 104       return table;
 105     },
 106
 107     /**
 108      * Update |statsTable| with |time| and |statsData|.
 109      *
 110      * @param {!Element} statsTable Which table to update.
 111      * @param {number} time The number of miliseconds since epoch.
 112      * @param {Array.<string>} statsData An array of stats name and value pairs.
 113      * @private
 114      */
 115     addStatsToTable_: function(statsTable, time, statsData) {
 116       var date = Date(time);
 117       this.updateStatsTableRow_(statsTable, 'timestamp', date.toLocaleString());
 118       for (var i = 0; i < statsData.length - 1; i = i + 2) {
 119         this.updateStatsTableRow_(statsTable, statsData[i], statsData[i + 1]);
 120       }
 121     },
 122
 123     /**
 124      * Update the value column of the stats row of |rowName| to |value|.
 125      * A new row is created is this is the first report of this stats.
 126      *
 127      * @param {!Element} statsTable Which table to update.
 128      * @param {string} rowName The name of the row to update.
 129      * @param {string} value The new value to set.
 130      * @private
 131      */
 132     updateStatsTableRow_: function(statsTable, rowName, value) {
 133       var trId = statsTable.id + '-' + rowName;
 134       var trElement = $(trId);
 135       if (!trElement) {
 136         trElement = document.createElement('tr');
 137         trElement.id = trId;
 138         statsTable.firstChild.appendChild(trElement);
 139         trElement.innerHTML = '<td>' + rowName + '</td><td></td>';
 140       }
 141       trElement.cells[1].textContent = value;
 142     }
 143   };
 144
 145   return StatsTable;
 146 })();