src/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         peerConnectionElement.appendChild(container);
  60       }
  61       return container;
  62     },
  63
  64     /**
  65      * Ensure the stats table for track specified by |report| of PeerConnection
  66      * |peerConnectionElement| is created.
  67      *
  68      * @param {!Element} peerConnectionElement The root element.
  69      * @param {!Object} report The object containing stats, which is the object
  70      *     containing timestamp and values, which is an array of strings, whose
  71      *     even index entry is the name of the stat, and the odd index entry is
  72      *     the value.
  73      * @return {!Element} The stats table element.
  74      * @private
  75      */
  76      ensureStatsTable_: function(peerConnectionElement, report) {
  77       var tableId = peerConnectionElement.id + '-table-' + report.id;
  78       var table = $(tableId);
  79       if (!table) {
  80         var container = this.ensureStatsTableContainer_(peerConnectionElement);
  81         table = document.createElement('table');
  82         container.appendChild(table);
  83         table.id = tableId;
  84         table.border = 1;
  85
  86         table.innerHTML = '<tr><th colspan=2></th></tr>';
  87         table.rows[0].cells[0].textContent = 'Statistics ' + report.id;
  88         if (report.type == 'ssrc') {
  89             table.insertRow(1);
  90             table.rows[1].innerHTML = '<td colspan=2></td>';
  91             this.ssrcInfoManager_.populateSsrcInfo(
  92                 table.rows[1].cells[0], GetSsrcFromReport(report));
  93         }
  94       }
  95       return table;
  96     },
  97
  98     /**
  99      * Update |statsTable| with |time| and |statsData|.
 100      *
 101      * @param {!Element} statsTable Which table to update.
 102      * @param {number} time The number of miliseconds since epoch.
 103      * @param {Array.<string>} statsData An array of stats name and value pairs.
 104      * @private
 105      */
 106     addStatsToTable_: function(statsTable, time, statsData) {
 107       var date = Date(time);
 108       this.updateStatsTableRow_(statsTable, 'timestamp', date.toLocaleString());
 109       for (var i = 0; i < statsData.length - 1; i = i + 2) {
 110         this.updateStatsTableRow_(statsTable, statsData[i], statsData[i + 1]);
 111       }
 112     },
 113
 114     /**
 115      * Update the value column of the stats row of |rowName| to |value|.
 116      * A new row is created is this is the first report of this stats.
 117      *
 118      * @param {!Element} statsTable Which table to update.
 119      * @param {string} rowName The name of the row to update.
 120      * @param {string} value The new value to set.
 121      * @private
 122      */
 123     updateStatsTableRow_: function(statsTable, rowName, value) {
 124       var trId = statsTable.id + '-' + rowName;
 125       var trElement = $(trId);
 126       if (!trElement) {
 127         trElement = document.createElement('tr');
 128         trElement.id = trId;
 129         statsTable.firstChild.appendChild(trElement);
 130         trElement.innerHTML = '<td>' + rowName + '</td><td></td>';
 131       }
 132       trElement.cells[1].textContent = value;
 133     }
 134   };
 135
 136   return StatsTable;
 137 })();