chrome/browser/resources/net_internals/bandwidth_view.js

   1 // Copyright (c) 2012 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 /** This view displays summary statistics on bandwidth usage. */
   6 var BandwidthView = (function() {
   7   'use strict';
   8
   9   // We inherit from DivView.
  10   var superClass = DivView;
  11
  12   /**
  13    * @constructor
  14    */
  15   function BandwidthView() {
  16     assertFirstConstructorCall(BandwidthView);
  17
  18     // Call superclass's constructor.
  19     superClass.call(this, BandwidthView.MAIN_BOX_ID);
  20
  21     g_browser.addSessionNetworkStatsObserver(this, true);
  22     g_browser.addHistoricNetworkStatsObserver(this, true);
  23
  24     // Register to receive data reduction proxy info.
  25     g_browser.addDataReductionProxyInfoObserver(this, true);
  26
  27     // Register to receive bad proxy info.
  28     g_browser.addBadProxiesObserver(this, true);
  29
  30     this.sessionNetworkStats_ = null;
  31     this.historicNetworkStats_ = null;
  32   }
  33
  34   BandwidthView.TAB_ID = 'tab-handle-bandwidth';
  35   BandwidthView.TAB_NAME = 'Bandwidth';
  36   BandwidthView.TAB_HASH = '#bandwidth';
  37
  38   // IDs for special HTML elements in bandwidth_view.html
  39   BandwidthView.MAIN_BOX_ID = 'bandwidth-view-tab-content';
  40   BandwidthView.ENABLED_ID = 'data-reduction-proxy-enabled';
  41   BandwidthView.PROXY_CONFIG_ID = 'data-reduction-proxy-config';
  42   BandwidthView.PROBE_STATUS_ID = 'data-reduction-proxy-probe-status';
  43   BandwidthView.BYPASS_STATE_CONTAINER_ID =
  44       'data-reduction-proxy-bypass-state-container';
  45   BandwidthView.BYPASS_STATE_ID = 'data-reduction-proxy-bypass-state-details';
  46   BandwidthView.EVENTS_TBODY_ID = 'data-reduction-proxy-view-events-tbody';
  47   BandwidthView.EVENTS_UL = 'data-reduction-proxy-view-events-list';
  48   BandwidthView.STATS_BOX_ID = 'bandwidth-stats-table';
  49
  50   cr.addSingletonGetter(BandwidthView);
  51
  52   BandwidthView.prototype = {
  53     // Inherit the superclass's methods.
  54     __proto__: superClass.prototype,
  55
  56     data_reduction_proxy_config_: null,
  57     last_bypass_: null,
  58     bad_proxy_config_: null,
  59
  60     onLoadLogFinish: function(data) {
  61       return this.onBadProxiesChanged(data.badProxies) &&
  62           this.onDataReductionProxyInfoChanged(data.dataReductionProxyInfo) &&
  63           (this.onSessionNetworkStatsChanged(data.sessionNetworkStats) ||
  64               this.onHistoricNetworkStatsChanged(data.historicNetworkStats));
  65     },
  66
  67     /**
  68      * Retains information on bandwidth usage this session.
  69      */
  70     onSessionNetworkStatsChanged: function(sessionNetworkStats) {
  71       this.sessionNetworkStats_ = sessionNetworkStats;
  72       return this.updateBandwidthUsageTable_();
  73     },
  74
  75     /**
  76      * Displays information on bandwidth usage this session and over the
  77      * browser's lifetime.
  78      */
  79     onHistoricNetworkStatsChanged: function(historicNetworkStats) {
  80       this.historicNetworkStats_ = historicNetworkStats;
  81       return this.updateBandwidthUsageTable_();
  82     },
  83
  84     /**
  85      * Updates the UI based on receiving changes in information about the
  86      * data reduction proxy summary.
  87      */
  88     onDataReductionProxyInfoChanged: function(info) {
  89       $(BandwidthView.EVENTS_TBODY_ID).innerHTML = '';
  90
  91       if (!info)
  92         return false;
  93
  94       if (info.enabled) {
  95         $(BandwidthView.ENABLED_ID).innerText = 'Enabled';
  96         $(BandwidthView.PROBE_STATUS_ID).innerText =
  97             info.probe != null ? info.probe : 'N/A';
  98         this.last_bypass_ = info.last_bypass;
  99         this.data_reduction_proxy_config_ = info.proxy_config.params;
 100       } else {
 101         $(BandwidthView.ENABLED_ID).innerText = 'Disabled';
 102         $(BandwidthView.PROBE_STATUS_ID).innerText = 'N/A';
 103         this.data_reduction_proxy_config_ = null;
 104       }
 105
 106       this.updateDataReductionProxyConfig_();
 107
 108       for (var eventIndex = info.events.length - 1; eventIndex >= 0;
 109           --eventIndex) {
 110         var event = info.events[eventIndex];
 111         var headerRow = addNode($(BandwidthView.EVENTS_TBODY_ID), 'tr');
 112         var detailsRow = addNode($(BandwidthView.EVENTS_TBODY_ID), 'tr');
 113
 114         var timeCell = addNode(headerRow, 'td');
 115         var actionCell = addNode(headerRow, 'td');
 116         var detailsCell = addNode(detailsRow, 'td');
 117         detailsCell.colSpan = 2;
 118         detailsCell.className = 'data-reduction-proxy-view-events-details';
 119         var eventTime = timeutil.convertTimeTicksToDate(event.time);
 120         timeutil.addNodeWithDate(timeCell, eventTime);
 121         this.buildEventRow_(event, actionCell, detailsCell);
 122       }
 123
 124       return true;
 125     },
 126
 127     /**
 128      * Updates the UI based on receiving changes in information about bad
 129      * proxy servers.
 130      */
 131     onBadProxiesChanged: function(badProxies) {
 132       if (!badProxies)
 133         return false;
 134
 135       var newBadProxies = [];
 136       if (badProxies.length == 0) {
 137         this.last_bypass_ = null;
 138       } else {
 139         for (var i = 0; i < badProxies.length; ++i) {
 140           var entry = badProxies[i];
 141           newBadProxies[entry.proxy_uri] = entry.bad_until;
 142         }
 143       }
 144       this.bad_proxy_config_ = newBadProxies;
 145       this.updateDataReductionProxyConfig_();
 146
 147       return true;
 148     },
 149
 150     /**
 151      * Update the bandwidth usage table.  Returns false on failure.
 152      */
 153     updateBandwidthUsageTable_: function() {
 154       var sessionNetworkStats = this.sessionNetworkStats_;
 155       var historicNetworkStats = this.historicNetworkStats_;
 156       if (!sessionNetworkStats || !historicNetworkStats)
 157         return false;
 158
 159       var sessionOriginal = sessionNetworkStats.session_original_content_length;
 160       var sessionReceived = sessionNetworkStats.session_received_content_length;
 161       var historicOriginal =
 162           historicNetworkStats.historic_original_content_length;
 163       var historicReceived =
 164           historicNetworkStats.historic_received_content_length;
 165
 166       var rows = [];
 167       rows.push({
 168           title: 'Original (KB)',
 169           sessionValue: bytesToRoundedKilobytes_(sessionOriginal),
 170           historicValue: bytesToRoundedKilobytes_(historicOriginal)
 171       });
 172       rows.push({
 173           title: 'Received (KB)',
 174           sessionValue: bytesToRoundedKilobytes_(sessionReceived),
 175           historicValue: bytesToRoundedKilobytes_(historicReceived)
 176       });
 177       rows.push({
 178           title: 'Savings (KB)',
 179           sessionValue:
 180               bytesToRoundedKilobytes_(sessionOriginal - sessionReceived),
 181           historicValue:
 182               bytesToRoundedKilobytes_(historicOriginal - historicReceived)
 183       });
 184       rows.push({
 185           title: 'Savings (%)',
 186           sessionValue: getPercentSavings_(sessionOriginal, sessionReceived),
 187           historicValue: getPercentSavings_(historicOriginal,
 188                                             historicReceived)
 189       });
 190
 191       var input = new JsEvalContext({rows: rows});
 192       jstProcess(input, $(BandwidthView.STATS_BOX_ID));
 193       return true;
 194     },
 195
 196     /**
 197      * Renders a Data Reduction Proxy event into the event tbody
 198      */
 199     buildEventRow_: function(event, actionCell, detailsCell) {
 200       if (event.type == EventType.DATA_REDUCTION_PROXY_ENABLED &&
 201           event.params.enabled == 0) {
 202         addTextNode(actionCell, 'DISABLED');
 203       } else {
 204         var actionText =
 205             EventTypeNames[event.type].replace('DATA_REDUCTION_PROXY_', '');
 206         if (event.phase == EventPhase.PHASE_BEGIN ||
 207             event.phase == EventPhase.PHASE_END) {
 208           actionText = actionText + ' (' +
 209               getKeyWithValue(EventPhase, event.phase)
 210                   .replace('PHASE_', '') + ')';
 211         }
 212
 213         addTextNode(actionCell, actionText);
 214         this.createEventTable_(event.params, detailsCell);
 215       }
 216     },
 217
 218     /**
 219      * Updates the data reduction proxy summary block.
 220      */
 221     updateDataReductionProxyConfig_: function() {
 222       $(BandwidthView.PROXY_CONFIG_ID).innerHTML = '';
 223       $(BandwidthView.BYPASS_STATE_ID).innerHTML = '';
 224       setNodeDisplay($(BandwidthView.BYPASS_STATE_CONTAINER_ID), false);
 225
 226       if (this.data_reduction_proxy_config_) {
 227         var hasBypassedProxy = false;
 228         var now = timeutil.getCurrentTimeTicks();
 229
 230         if (this.last_bypass_ &&
 231             this.hasTimePassedLogTime_(+this.last_bypass_.params.expiration)) {
 232           // Best effort on iterating the config to search for a bad proxy.
 233           // A server could exist in a string member of
 234           // data_reduction_proxy_config_ or within an array of servers in an
 235           // array member of data_reduction_proxy_config_. As such, search
 236           // through all string members and string arrays.
 237           for (var key in this.data_reduction_proxy_config_) {
 238             var value = this.data_reduction_proxy_config_[key];
 239             if (typeof value == 'string') {
 240               if (this.isMarkedAsBad_(value)) {
 241                 hasBypassedProxy = true;
 242                 break;
 243               }
 244             } else if (value instanceof Array) {
 245               for (var index = 1; index < value.length; index++) {
 246                 if (this.isMarkedAsBad_(value[index])) {
 247                   hasBypassedProxy = true;
 248                 }
 249               }
 250
 251               if (hasBypassedProxy) {
 252                 break;
 253               }
 254             }
 255           }
 256         }
 257
 258         if (hasBypassedProxy) {
 259           this.createEventTable_(this.last_bypass_.params,
 260                                  $(BandwidthView.BYPASS_STATE_ID));
 261         }
 262
 263         this.createEventTable_(this.data_reduction_proxy_config_,
 264                                $(BandwidthView.PROXY_CONFIG_ID));
 265         setNodeDisplay($(BandwidthView.BYPASS_STATE_CONTAINER_ID),
 266                        hasBypassedProxy);
 267       }
 268     },
 269
 270     /**
 271      * Checks to see if a proxy server is in marked as bad.
 272      */
 273     isMarkedAsBad_: function(proxy) {
 274       for (var entry in this.bad_proxy_config_) {
 275         if (entry == proxy &&
 276             this.hasTimePassedLogTime_(this.bad_proxy_config_[entry])) {
 277           return true;
 278         }
 279       }
 280
 281       return false;
 282     },
 283
 284     /**
 285      * Checks to see if a given time in ticks has passed the time of the
 286      * the log. For real time viewing, this is "now", but for loaded logs, it
 287      * is the time at which the logs were taken.
 288      */
 289     hasTimePassedLogTime_: function(timeTicks) {
 290       var logTime;
 291       if (MainView.isViewingLoadedLog() && ClientInfo.numericDate) {
 292         logTime = ClientInfo.numericDate;
 293       } else {
 294         logTime = timeutil.getCurrentTime();
 295       }
 296
 297       return timeutil.convertTimeTicksToTime(timeTicks) > logTime;
 298     },
 299
 300     /**
 301      * Creates a table of the object obj. Certain keys are special cased for
 302      * ease of readability.
 303      */
 304     createEventTable_: function(obj, parentNode) {
 305       if (Object.keys(obj).length > 0) {
 306         var tableNode = addNode(parentNode, 'table');
 307         tableNode.className = 'borderless-table';
 308         for (var key in obj) {
 309           var value = obj[key];
 310           if (value != null && value.toString() != '') {
 311             if (key == 'net_error') {
 312               if (value == 0) {
 313                 value = 'OK';
 314               } else {
 315                 value = netErrorToString(value);
 316               }
 317             } else if (key == 'bypass_type') {
 318               value = getKeyWithValue(DataReductionProxyBypassEventType, value);
 319             } else if (key == 'bypass_action_type') {
 320               value = getKeyWithValue(DataReductionProxyBypassActionType,
 321                                       value);
 322             } else if (key == 'expiration') {
 323               value = timeutil.convertTimeTicksToDate(value);
 324             }
 325             var tableRow = addNode(tableNode, 'tr');
 326             addNodeWithText(tableRow, 'td', key);
 327             addNodeWithText(tableRow, 'td', value);
 328           }
 329         }
 330       }
 331     }
 332   };
 333
 334   /**
 335    * Converts bytes to kilobytes rounded to one decimal place.
 336    */
 337   function bytesToRoundedKilobytes_(val) {
 338     return (val / 1024).toFixed(1);
 339   }
 340
 341   /**
 342    * Returns bandwidth savings as a percent rounded to one decimal place.
 343    */
 344   function getPercentSavings_(original, received) {
 345     if (original > 0) {
 346       return ((original - received) * 100 / original).toFixed(1);
 347     }
 348     return '0.0';
 349   }
 350
 351   return BandwidthView;
 352 })();