message: Show charts for TCP metrics
diff: @@ -34,6 +34,10 @@ type ServiceMetricsState = {
  requestDurationOut?: Histogram;
  responseSizeIn?: Histogram;
  responseSizeOut?: Histogram;
  + tcpReceivedIn?: MetricGroup;
  + tcpReceivedOut?: MetricGroup;
  + tcpSentIn?: MetricGroup;
  + tcpSentOut?: MetricGroup;
  grafanaLinkIn?: string;
  grafanaLinkOut?: string;
  pollMetrics?: number;
  @@ -44,10 +48,14 @@ const chartDefinitions = {
  requestDurationIn: { familyName: 'Request duration (seconds)', isInput: true, component: HistogramChart },
  requestSizeIn: { familyName: 'Request size (bytes)', isInput: true, component: HistogramChart },
  responseSizeIn: { familyName: 'Response size (bytes)', isInput: true, component: HistogramChart },
  + tcpReceivedIn: { familyName: 'TCP received (bps)', isInput: true, component: MetricChart },
  + tcpSentIn: { familyName: 'TCP sent (bps)', isInput: true, component: MetricChart },
  requestCountOut: { familyName: 'Request volume (ops)', isInput: false, component: MetricChart },
  requestDurationOut: { familyName: 'Request duration (seconds)', isInput: false, component: HistogramChart },
  requestSizeOut: { familyName: 'Request size (bytes)', isInput: false, component: HistogramChart },
  - responseSizeOut: { familyName: 'Response size (bytes)', isInput: false, component: HistogramChart }
  + responseSizeOut: { familyName: 'Response size (bytes)', isInput: false, component: HistogramChart },
  + tcpSentOut: { familyName: 'TCP sent (bps)', isInput: false, component: MetricChart },
  + tcpReceivedOut: { familyName: 'TCP received (bps)', isInput: false, component: MetricChart }
  };
  class ServiceMetrics extends React.Component<ServiceId, ServiceMetricsState> {
  @@ -70,7 +78,14 @@ class ServiceMetrics extends React.Component<ServiceId, ServiceMetricsState> {
  onOptionsChanged = (options: MetricsOptions) => {
  this.options = options;
  - options.filters = ['request_count', 'request_size', 'request_duration', 'response_size'];
  + options.filters = [
  + 'request_count',
  + 'request_size',
  + 'request_duration',
  + 'response_size',
  + 'tcp_received',
  + 'tcp_sent'
  + ];
  const intervalOpts = computePrometheusQueryInterval(options.duration!);
  options.step = intervalOpts.step;
  options.rateInterval = intervalOpts.rateInterval;
  @@ -100,7 +115,11 @@ class ServiceMetrics extends React.Component<ServiceId, ServiceMetricsState> {
  requestDurationIn: metrics.histograms['request_duration_in'],
  requestDurationOut: metrics.histograms['request_duration_out'],
  responseSizeIn: metrics.histograms['response_size_in'],
  - responseSizeOut: metrics.histograms['response_size_out']
  + responseSizeOut: metrics.histograms['response_size_out'],
  + tcpReceivedIn: metrics.metrics['tcp_received_in'],
  + tcpReceivedOut: metrics.metrics['tcp_received_out'],
  + tcpSentIn: metrics.metrics['tcp_sent_in'],
  + tcpSentOut: metrics.metrics['tcp_sent_out']
  });
  })
  .catch(error => {
  