chrome/browser/resources/net_internals/bandwidth_view.js

// 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.

/** This view displays summary statistics on bandwidth usage. */
var BandwidthView = (function() {
  'use strict';

  // We inherit from DivView.
  var superClass = DivView;

  /**
   * @constructor
   */
  function BandwidthView() {
    assertFirstConstructorCall(BandwidthView);

    // Call superclass's constructor.
    superClass.call(this, BandwidthView.MAIN_BOX_ID);

    g_browser.addSessionNetworkStatsObserver(this, true);
    g_browser.addHistoricNetworkStatsObserver(this, true);

    // Register to receive data reduction proxy info.
    g_browser.addDataReductionProxyInfoObserver(this, true);

    // Register to receive bad proxy info.
    g_browser.addBadProxiesObserver(this, true);

    this.sessionNetworkStats_ = null;
    this.historicNetworkStats_ = null;
  }

  BandwidthView.TAB_ID = 'tab-handle-bandwidth';
  BandwidthView.TAB_NAME = 'Bandwidth';
  BandwidthView.TAB_HASH = '#bandwidth';

  // IDs for special HTML elements in bandwidth_view.html
  BandwidthView.MAIN_BOX_ID = 'bandwidth-view-tab-content';
  BandwidthView.ENABLED_ID = 'data-reduction-proxy-enabled';
  BandwidthView.PROXY_CONFIG_ID = 'data-reduction-proxy-config';
  BandwidthView.PROBE_STATUS_ID = 'data-reduction-proxy-probe-status';
  BandwidthView.BYPASS_STATE_CONTAINER_ID =
      'data-reduction-proxy-bypass-state-container';
  BandwidthView.BYPASS_STATE_ID = 'data-reduction-proxy-bypass-state-details';
  BandwidthView.EVENTS_TBODY_ID = 'data-reduction-proxy-view-events-tbody';
  BandwidthView.EVENTS_UL = 'data-reduction-proxy-view-events-list';
  BandwidthView.STATS_BOX_ID = 'bandwidth-stats-table';

  cr.addSingletonGetter(BandwidthView);

  BandwidthView.prototype = {
    // Inherit the superclass's methods.
    __proto__: superClass.prototype,

    data_reduction_proxy_config_: null,
    last_bypass_: null,
    bad_proxy_config_: null,

    onLoadLogFinish: function(data) {
      return this.onBadProxiesChanged(data.badProxies) &&
          this.onDataReductionProxyInfoChanged(data.dataReductionProxyInfo) &&
          (this.onSessionNetworkStatsChanged(data.sessionNetworkStats) ||
           this.onHistoricNetworkStatsChanged(data.historicNetworkStats));
    },

    /**
     * Retains information on bandwidth usage this session.
     */
    onSessionNetworkStatsChanged: function(sessionNetworkStats) {
      this.sessionNetworkStats_ = sessionNetworkStats;
      return this.updateBandwidthUsageTable_();
    },

    /**
     * Displays information on bandwidth usage this session and over the
     * browser's lifetime.
     */
    onHistoricNetworkStatsChanged: function(historicNetworkStats) {
      this.historicNetworkStats_ = historicNetworkStats;
      return this.updateBandwidthUsageTable_();
    },

    /**
     * Updates the UI based on receiving changes in information about the
     * data reduction proxy summary.
     */
    onDataReductionProxyInfoChanged: function(info) {
      $(BandwidthView.EVENTS_TBODY_ID).innerHTML = '';

      if (!info)
        return false;

      if (info.enabled) {
        $(BandwidthView.ENABLED_ID).innerText = 'Enabled';
        $(BandwidthView.PROBE_STATUS_ID).innerText =
            info.probe != null ? info.probe : 'N/A';
        this.last_bypass_ = info.last_bypass;
        this.data_reduction_proxy_config_ = info.proxy_config.params;
      } else {
        $(BandwidthView.ENABLED_ID).innerText = 'Disabled';
        $(BandwidthView.PROBE_STATUS_ID).innerText = 'N/A';
        this.data_reduction_proxy_config_ = null;
      }

      this.updateDataReductionProxyConfig_();

      for (var eventIndex = info.events.length - 1; eventIndex >= 0;
           --eventIndex) {
        var event = info.events[eventIndex];
        var headerRow = addNode($(BandwidthView.EVENTS_TBODY_ID), 'tr');
        var detailsRow = addNode($(BandwidthView.EVENTS_TBODY_ID), 'tr');

        var timeCell = addNode(headerRow, 'td');
        var actionCell = addNode(headerRow, 'td');
        var detailsCell = addNode(detailsRow, 'td');
        detailsCell.colSpan = 2;
        detailsCell.className = 'data-reduction-proxy-view-events-details';
        var eventTime = timeutil.convertTimeTicksToDate(event.time);
        timeutil.addNodeWithDate(timeCell, eventTime);
        this.buildEventRow_(event, actionCell, detailsCell);
      }

      return true;
    },

    /**
     * Updates the UI based on receiving changes in information about bad
     * proxy servers.
     */
    onBadProxiesChanged: function(badProxies) {
      if (!badProxies)
        return false;

      var newBadProxies = [];
      if (badProxies.length == 0) {
        this.last_bypass_ = null;
      } else {
        for (var i = 0; i < badProxies.length; ++i) {
          var entry = badProxies[i];
          newBadProxies[entry.proxy_uri] = entry.bad_until;
        }
      }
      this.bad_proxy_config_ = newBadProxies;
      this.updateDataReductionProxyConfig_();

      return true;
    },

    /**
     * Update the bandwidth usage table.  Returns false on failure.
     */
    updateBandwidthUsageTable_: function() {
      var sessionNetworkStats = this.sessionNetworkStats_;
      var historicNetworkStats = this.historicNetworkStats_;
      if (!sessionNetworkStats || !historicNetworkStats)
        return false;

      var sessionOriginal = sessionNetworkStats.session_original_content_length;
      var sessionReceived = sessionNetworkStats.session_received_content_length;
      var historicOriginal =
          historicNetworkStats.historic_original_content_length;
      var historicReceived =
          historicNetworkStats.historic_received_content_length;

      var rows = [];
      rows.push({
        title: 'Original (KB)',
        sessionValue: bytesToRoundedKilobytes_(sessionOriginal),
        historicValue: bytesToRoundedKilobytes_(historicOriginal)
      });
      rows.push({
        title: 'Received (KB)',
        sessionValue: bytesToRoundedKilobytes_(sessionReceived),
        historicValue: bytesToRoundedKilobytes_(historicReceived)
      });
      rows.push({
        title: 'Savings (KB)',
        sessionValue:
            bytesToRoundedKilobytes_(sessionOriginal - sessionReceived),
        historicValue:
            bytesToRoundedKilobytes_(historicOriginal - historicReceived)
      });
      rows.push({
        title: 'Savings (%)',
        sessionValue: getPercentSavings_(sessionOriginal, sessionReceived),
        historicValue: getPercentSavings_(historicOriginal, historicReceived)
      });

      var input = new JsEvalContext({rows: rows});
      jstProcess(input, $(BandwidthView.STATS_BOX_ID));
      return true;
    },

    /**
     * Renders a Data Reduction Proxy event into the event tbody
     */
    buildEventRow_: function(event, actionCell, detailsCell) {
      if (event.type == EventType.DATA_REDUCTION_PROXY_ENABLED &&
          event.params.enabled == 0) {
        addTextNode(actionCell, 'DISABLED');
      } else {
        var actionText =
            EventTypeNames[event.type].replace('DATA_REDUCTION_PROXY_', '');
        if (event.phase == EventPhase.PHASE_BEGIN ||
            event.phase == EventPhase.PHASE_END) {
          actionText = actionText + ' (' +
              getKeyWithValue(EventPhase, event.phase).replace('PHASE_', '') +
              ')';
        }

        addTextNode(actionCell, actionText);
        this.createEventTable_(event.params, detailsCell);
      }
    },

    /**
     * Updates the data reduction proxy summary block.
     */
    updateDataReductionProxyConfig_: function() {
      $(BandwidthView.PROXY_CONFIG_ID).innerHTML = '';
      $(BandwidthView.BYPASS_STATE_ID).innerHTML = '';
      setNodeDisplay($(BandwidthView.BYPASS_STATE_CONTAINER_ID), false);

      if (this.data_reduction_proxy_config_) {
        var hasBypassedProxy = false;
        var now = timeutil.getCurrentTimeTicks();

        if (this.last_bypass_ &&
            this.hasTimePassedLogTime_(+this.last_bypass_.params.expiration)) {
          // Best effort on iterating the config to search for a bad proxy.
          // A server could exist in a string member of
          // data_reduction_proxy_config_ or within an array of servers in an
          // array member of data_reduction_proxy_config_. As such, search
          // through all string members and string arrays.
          for (var key in this.data_reduction_proxy_config_) {
            var value = this.data_reduction_proxy_config_[key];
            if (typeof value == 'string') {
              if (this.isMarkedAsBad_(value)) {
                hasBypassedProxy = true;
                break;
              }
            } else if (value instanceof Array) {
              for (var index = 1; index < value.length; index++) {
                if (this.isMarkedAsBad_(value[index])) {
                  hasBypassedProxy = true;
                }
              }

              if (hasBypassedProxy) {
                break;
              }
            }
          }
        }

        if (hasBypassedProxy) {
          this.createEventTable_(
              this.last_bypass_.params, $(BandwidthView.BYPASS_STATE_ID));
        }

        this.createEventTable_(
            this.data_reduction_proxy_config_,
            $(BandwidthView.PROXY_CONFIG_ID));
        setNodeDisplay(
            $(BandwidthView.BYPASS_STATE_CONTAINER_ID), hasBypassedProxy);
      }
    },

    /**
     * Checks to see if a proxy server is in marked as bad.
     */
    isMarkedAsBad_: function(proxy) {
      for (var entry in this.bad_proxy_config_) {
        if (entry == proxy &&
            this.hasTimePassedLogTime_(this.bad_proxy_config_[entry])) {
          return true;
        }
      }

      return false;
    },

    /**
     * Checks to see if a given time in ticks has passed the time of the
     * the log. For real time viewing, this is "now", but for loaded logs, it
     * is the time at which the logs were taken.
     */
    hasTimePassedLogTime_: function(timeTicks) {
      var logTime;
      if (MainView.isViewingLoadedLog() && ClientInfo.numericDate) {
        logTime = ClientInfo.numericDate;
      } else {
        logTime = timeutil.getCurrentTime();
      }

      return timeutil.convertTimeTicksToTime(timeTicks) > logTime;
    },

    /**
     * Creates a table of the object obj. Certain keys are special cased for
     * ease of readability.
     */
    createEventTable_: function(obj, parentNode) {
      if (Object.keys(obj).length > 0) {
        var tableNode = addNode(parentNode, 'table');
        tableNode.className = 'borderless-table';
        for (var key in obj) {
          var value = obj[key];
          if (value != null && value.toString() != '') {
            if (key == 'net_error') {
              if (value == 0) {
                value = 'OK';
              } else {
                value = netErrorToString(value);
              }
            } else if (key == 'bypass_type') {
              value = getKeyWithValue(DataReductionProxyBypassEventType, value);
            } else if (key == 'bypass_action_type') {
              value =
                  getKeyWithValue(DataReductionProxyBypassActionType, value);
            } else if (key == 'expiration') {
              value = timeutil.convertTimeTicksToDate(value);
            }
            var tableRow = addNode(tableNode, 'tr');
            addNodeWithText(tableRow, 'td', key);
            addNodeWithText(tableRow, 'td', value);
          }
        }
      }
    }
  };

  /**
   * Converts bytes to kilobytes rounded to one decimal place.
   */
  function bytesToRoundedKilobytes_(val) {
    return (val / 1024).toFixed(1);
  }

  /**
   * Returns bandwidth savings as a percent rounded to one decimal place.
   */
  function getPercentSavings_(original, received) {
    if (original > 0) {
      return ((original - received) * 100 / original).toFixed(1);
    }
    return '0.0';
  }

  return BandwidthView;
})();