Add data reduction proxy debug info to net-internals#bandwidth

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);
 
+    // This map should match the DataReductionProxyBypassType enum.

[mmenke, 2014/12/09 21:58:52]

Sorry for not saying this in the first place, but rather than have magic
numbers, better to get the map from the browser process, added to the constants
array.  That way, don't have to keep two lists of enums in sync, and can load
logs across chrome versions.

See, for example, how LoadFlags are handled.

[jeremyim, 2014/12/09 23:14:28]

Done.

+    this.bypassTypeLookup_ = {};
+    this.bypassTypeLookup_[0] = 'Bypass current request';
+    this.bypassTypeLookup_[1] = 'Bypass for short period';
+    this.bypassTypeLookup_[2] = 'Bypass for medium period';
+    this.bypassTypeLookup_[3] = 'Bypass for long period';
+    this.bypassTypeLookup_[4] = 'Missing Via Header 4xx';
+    this.bypassTypeLookup_[5] = 'Missing Via Header non-4xx';
+    this.bypassTypeLookup_[6] = '407';
+    this.bypassTypeLookup_[7] = '500';
+    this.bypassTypeLookup_[8] = '502';
+    this.bypassTypeLookup_[9] = '503';
+    this.bypassTypeLookup_[10] = 'Network error';
+
     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 proxy settings.
+    g_browser.addProxySettingsObserver(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.PRIMARY_PROXY_ID = 'data-reduction-proxy-primary';
+  BandwidthView.SECONDARY_PROXY_ID = 'data-reduction-proxy-secondary';
+  BandwidthView.CANARY_STATUS_ID = 'data-reduction-proxy-canary-status';
+  BandwidthView.BYPASS_STATE_ID = 'data-reduction-proxy-bypass-state';
+  BandwidthView.BYPASS_STATE_CONTAINER_ID =
+      'data-reduction-proxy-bypass-state-container';
+  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_event_: null,
+    proxy_config_: null,
+    bad_proxy_config_: null,
+
     onLoadLogFinish: function(data) {
       // Even though this information is included in log dumps, there's no real
       // reason to display it when debugging a loaded log file.
       return false;

[mmenke, 2014/12/09 21:58:52]

Note that this will hide the tab when loading log dumps from earlier versions of
Chrome.

If you want to support loading data, this should be:

return this.onSessionNetworkStatsChanged(data.sessionNetworkStats) &&
    this.onHistoricNetworkStatsChanged(data.historicNetworkStats) &&
    this.onDataReductionProxyInfoChanged(data.dataReductionProxyInfo) &&
    ...

[jeremyim, 2014/12/09 23:14:28]

Done. I had this in a separate CL, but pulled that in.

     },
 
     /**
      * 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';
+        if (info.canary != null)
+          $(BandwidthView.CANARY_STATUS_ID).innerText = info.canary;

[mmenke, 2014/12/09 21:58:52]

If canary info is null, we just keep whatever we were already displaying?  That
seems wrong.

[jeremyim, 2014/12/09 23:14:28]

Done.

+        if (info.last_bypass != null)
+          this.last_bypass_ = this.parseBypassEvent_(info.last_bypass);

[mmenke, 2014/12/09 21:58:52]

As above, should to something with last_bypass_ if info.last_bypass is NULL, if
that can happen.  If it can't, of course, shouldn't be checking for that case.

[jeremyim, 2014/12/09 23:14:28]

Done.

+        this.data_reduction_proxy_config_ = info.proxy_config.params;
+      } else {
+        $(BandwidthView.ENABLED_ID).innerText = 'Disabled';
+        $(BandwidthView.CANARY_STATUS_ID).innerText = 'N/A';
+        this.data_reduction_proxy_config_ = null;
+      }
+
+      this.updateDataReductionProxyConfig_();
+
+      for (var eventIndex = info.events.length; eventIndex > 0; --eventIndex) {
+        var event = info.events[eventIndex - 1];

[mmenke, 2014/12/09 21:58:52]

This is kinda weird...better to make the eventIndex the actual index of the
event, and start at length-1.

[jeremyim, 2014/12/09 23:14:28]

Done.

+        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);
+
+        switch (event.type) {
+          case EventType.DATA_REDUCTION_PROXY_ENABLED:
+            this.buildEnabledRow_(event, actionCell, detailsCell);
+            break;
+          case EventType.DATA_REDUCTION_PROXY_CANARY_REQUEST:
+            this.buildCanaryRow_(event, actionCell, detailsCell);
+            break;
+          case EventType.DATA_REDUCTION_PROXY_CANARY_RESPONSE_RECEIVED:
+            this.buildCanaryResponseRow_(event, actionCell, detailsCell);
+            break;
+          case EventType.DATA_REDUCTION_PROXY_BYPASS_REQUESTED:
+            this.buildBypassRow_(event, actionCell, detailsCell);
+            break;
+          case EventType.DATA_REDUCTION_PROXY_FALLBACK:
+            this.buildFallbackRow_(event, actionCell, detailsCell);
+            break;
+        }
+      }
+    },
+
+    /**
+     * Updates the UI based on receiving changes in information about the
+     * proxy settings.
+     */
+    onProxySettingsChanged: function(proxySettings) {
+      var newProxySettings = [];
+      var effectiveSettings = proxySettings.effective;
+      if (effectiveSettings && effectiveSettings.proxy_per_scheme) {
+        for (var scheme in effectiveSettings.proxy_per_scheme) {
+          var schemeSettings = effectiveSettings.proxy_per_scheme[scheme];
+          if (scheme != 'fallback') {
+            for (var i = 0; i < schemeSettings.length; ++i) {
+              var proxyUri = schemeSettings[i];
+              if (proxyUri != 'direct://')
+                newProxySettings.push(proxyUri);
+            }
+          }
+        }
+      }
+      this.proxy_config_ = newProxySettings;
+      this.updateDataReductionProxyConfig_();
+    },
+
+    /**
+     * Updates the UI based on receiving changes in information about bad
+     * proxy servers.
+     */
+    onBadProxiesChanged: function(badProxies) {
+      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_();
+    },
+
+    /**
      * 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;
@@ skipping 21 matching lines @@
               bytesToRoundedKilobytes_(historicOriginal - historicReceived)
       });
       rows.push({
           title: 'Savings (%)',
           sessionValue: getPercentSavings_(sessionOriginal, sessionReceived),
           historicValue: getPercentSavings_(historicOriginal,
                                             historicReceived)
       });
 
       var input = new JsEvalContext({rows: rows});
-      jstProcess(input, $(BandwidthView.MAIN_BOX_ID));
+      jstProcess(input, $(BandwidthView.STATS_BOX_ID));
       return true;
+    },
+
+    /**
+     * Renders a data reduction proxy enabled/disabled event into the event
+     * tbody.
+     */
+    buildEnabledRow_: function(event, actionCell, detailsCell) {
+      if (event.params.enabled == 1) {
+        addTextNode(actionCell, 'Proxy: Enabled');
+        var proxyWrapper = addNode(detailsCell, 'div');
+        addNodeWithText(proxyWrapper, 'div', 'Proxy configuration:');
+
+        if (event.params.primary_origin != null &&
+            event.params.primary_origin.trim() != '') {
+          var proxyText = 'Primary: ' + event.params.primary_origin;
+          if (event.params.primary_restricted != null &&
+              event.params.primary_restricted)
+            proxyText += ' (restricted)';

[mmenke, 2014/12/09 21:58:52]

use braces when condition of the if takes more than one line.

[jeremyim, 2014/12/09 23:14:28]

Done.

+          addNodeWithText(proxyWrapper, 'div', proxyText);
+        }
+
+        if (event.params.fallback_origin != null &&
+            event.params.fallback_origin.trim() != '') {
+          var proxyText = 'Fallback: ' + event.params.fallback_origin;
+          if (event.params.fallback_restricted != null &&
+              event.params.fallback_restricted)
+            proxyText += ' (restricted)';

[mmenke, 2014/12/09 21:58:52]

use braces when condition of the if takes more than one line.

[jeremyim, 2014/12/09 23:14:28]

Done.

+          addNodeWithText(proxyWrapper, 'div', proxyText);
+        }
+
+        if (event.params.ssl_origin != null &&
+            event.params.ssl_origin.trim() != '')
+          addNodeWithText(proxyWrapper, 'div',
+              'SSL: ' + event.params.ssl_origin);

[mmenke, 2014/12/09 21:58:52]

use braces when body of the if takes more than one line.

[jeremyim, 2014/12/09 23:14:28]

Done.

+      } else {
+        addTextNode(actionCell, 'Proxy: Disabled');
+      }
+    },
+
+    /**
+     * Renders a data reduction proxy canary request event into the event
+     * tbody.
+     */
+    buildCanaryRow_: function(event, actionCell, detailsCell) {
+      if (event.phase == EventPhase.PHASE_BEGIN) {
+        addTextNode(actionCell, 'Canary request sent');
+        addTextNode(detailsCell, 'URL: ' + event.params.url);
+      } else if (event.phase == EventPhase.PHASE_END) {
+        addTextNode(actionCell, 'Canary request completed');
+        if (event.params.net_error == 0) {
+          addTextNode(detailsCell, 'Result: OK');
+        } else {
+          addTextNode(detailsCell,
+                      'Result: ' + netErrorToString(event.params.net_error));
+        }
+      }
+    },
+
+    /**
+     * Renders a data reduction proxy canary response event into the event
+     * tbody.
+     */
+    buildCanaryResponseRow_: function(event, actionCell, detailsCell) {
+      addTextNode(actionCell, 'Canary response received');
+    },
+
+    /**
+     * Renders a data reduction proxy bypass event into the event tbody.
+     */
+    buildBypassRow_: function(event, actionCell, detailsCell) {
+      var parsedBypass = this.parseBypassEvent_(event);
+
+      addTextNode(actionCell,
+                  'Bypass received (' + parsedBypass.bypass_reason + ')');
+      var bypassWrapper = addNode(detailsCell, 'div');
+      addNodeWithText(bypassWrapper, 'div', 'URL: ' + parsedBypass.origin_url);
+      addNodeWithText(
+          bypassWrapper, 'div',
+          'Bypassed for ' + parsedBypass.bypass_duration_seconds + ' seconds.');
+    },
+
+    /**
+     * Renders a data reduction proxy fallback event into the event tbody.
+     */
+    buildFallbackRow_: function(event, actionCell, detailsCell) {
+      addTextNode(actionCell, 'Proxy fallback');
+    },
+
+    /**
+     * Parses a data reduction proxy bypass event for use in the summary and
+     * in the event tbody.
+     */
+    parseBypassEvent_: function(event) {
+      var reason;
+      if (event.params.action != null) {
+        reason = event.params.action;
+      } else {
+        reason = this.bypassTypeLookup_[event.params.bypass_type];
+        if (reason == null)
+          reason = 'Unknown error';
+      }
+
+      var parsedBypass = {
+        bypass_reason: reason,
+        origin_url: event.params.url,
+        bypass_duration_seconds: event.params.bypass_duration_seconds,
+        bypass_expiration: event.params.expiration,
+      };
+
+      return parsedBypass;
+    },
+
+    /**
+     * Updates the data reduction proxy summary block.
+     */
+    updateDataReductionProxyConfig_: function() {
+      $(BandwidthView.PRIMARY_PROXY_ID).innerHTML = '';
+      $(BandwidthView.SECONDARY_PROXY_ID).innerHTML = '';
+      setNodeDisplay($(BandwidthView.BYPASS_STATE_CONTAINER_ID), false);
+
+      if (this.data_reduction_proxy_config_) {
+        var primaryProxy = '';
+        var secondaryProxy = '';
+        var hasBypassedProxy = false;
+        var now = timeutil.getCurrentTimeTicks();
+
+        if (this.last_bypass_ && +this.last_bypass_.bypass_expiration > now) {
+          var input = new JsEvalContext(this.last_bypass_);
+          jstProcess(input, $(BandwidthView.BYPASS_STATE_CONTAINER_ID));
+        } else {
+          var input = new JsEvalContext();
+          jstProcess(input, $(BandwidthView.BYPASS_STATE_CONTAINER_ID));
+        }
+
+        if (this.data_reduction_proxy_config_.ssl_origin) {
+          if (this.isMarkedAsBad_(this.data_reduction_proxy_config_.ssl_origin))
+            hasBypassedProxy = true;
+
+          primaryProxy = 'HTTPS Tunnel: ' + this.buildProxyString_(
+              this.data_reduction_proxy_config_.ssl_origin, false);
+        }
+
+        if (this.data_reduction_proxy_config_.primary_origin) {
+          if (this.isMarkedAsBad_(
+              this.data_reduction_proxy_config_.primary_origin))
+            hasBypassedProxy = true;
+
+          var proxyString = this.buildProxyString_(
+              this.data_reduction_proxy_config_.primary_origin,
+              this.data_reduction_proxy_config_.primary_restricted);
+
+          if (primaryProxy == '')
+            primaryProxy = proxyString;
+          else
+            secondaryProxy = proxyString;
+        }
+
+        if (this.data_reduction_proxy_config_.fallback_origin) {
+          if (this.isMarkedAsBad_(
+              this.data_reduction_proxy_config_.fallback_origin))
+            hasBypassedProxy = true;
+
+          var proxyString = this.buildProxyString_(
+              this.data_reduction_proxy_config_.fallback_origin,
+              this.data_reduction_proxy_config_.fallback_restricted);
+
+          if (primaryProxy == '')
+            primaryProxy = proxyString;
+          else if (secondaryProxy == '')
+            secondaryProxy = proxyString;
+        }
+
+        $(BandwidthView.PRIMARY_PROXY_ID).innerText = primaryProxy;
+        $(BandwidthView.SECONDARY_PROXY_ID).innerText = secondaryProxy;
+        if (hasBypassedProxy)
+          setNodeDisplay($(BandwidthView.BYPASS_STATE_CONTAINER_ID), true);
+      }
+    },
+
+    /**
+     * Takes a data reduction proxy configuration and renders to a friendly
+     * string.
+     */
+    buildProxyString_: function(proxy, restricted) {
+      var configured = this.isConfigured_(proxy);
+      var markedAsBad = this.isMarkedAsBad_(proxy);
+      var proxyString = '';
+      if (restricted) {
+        proxyString += proxy + ' (RESTRICTED)';
+      } else if (configured) {
+        proxyString += proxy;
+        if (markedAsBad) {
+          proxyString += ' (BYPASSED)';
+        } else {
+          proxyString += ' (ACTIVE)';
+        }
+      }
+
+      return proxyString;
+    },
+
+    /**
+     * Checks to see if a proxy server is in the current configuration.
+     */
+    isConfigured_: function(proxy) {
+      for (var index in this.proxy_config_) {
+        var entry = this.proxy_config_[index];
+        if (entry == proxy)
+          return true;
+      }
+
+      return false;
+    },
+
+    /**
+     * Checks to see if a proxy server is in marked as bad.
+     */
+    isMarkedAsBad_: function(proxy) {
+      var now = timeutil.getCurrentTimeTicks();
+      for (var entry in this.bad_proxy_config_) {
+        if (entry == proxy && this.bad_proxy_config_[entry] > now)
+          return true;
+      }
+
+      return false;
     }
   };
 
   /**
    * 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;
 })();