/** @jsx React.DOM */

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

var SUM = 0,
    AVG = 1,
    LAST = 2;

var countersUrlFlags = {};

var AllExceptions = React.createClass({
  getInitialState: function() {
    return {}
  },
  fetchExceptionSummary: function() {
    var compName = this.props.info.comp_name ? this.props.info.comp_name : 'All';
    var fetchUrl = './' + this.props.info.topology
        + '/' + compName + '/exceptionsummary.json'
    console.log('fetching url ' + fetchUrl);
    $.ajax({
        url: fetchUrl,
        dataType:  'json',

        success: function(response) {
          this.state.summary = response.result
          console.log('RESPONSE')
          console.log(response)
        }.bind(this),

        error: function() {
        }.bind(this)
      });
  },
  componentWillMount:function() {
    this.fetchExceptionSummary();
  },
  componentDidUpdate: function(prevProps, prevState) {
    if (prevProps.info.comp_name != this.props.info.comp_name) {
      this.fetchExceptionSummary();
    }
  },
  render: function() {
    if (!this.state.summary) {
      return <div></div>
    }
    var compName = this.props.info.comp_name ? this.props.info.comp_name : 'All';
    var exceptionTable = this.state.summary;
    var allExceptionsUrl = './' + this.props.info.topology
        + '/' + compName + '/All/exceptions';
    var allExceptionsStyle = {
      color: 'black',
      background: 'lightblue',
      padding: '5px',
      display: 'inline',
      boxShadow: '1px 2px 2px',
    }
    return (
      <div>
        <div className="widget-header">
          <div className="title">
            <h4>Recent Exception Counts</h4>
          </div>
        </div>
        <table className="table table-striped table-hover no-margin">
          <thead>
            <tr>
              <th>
                Exceptions Summary {
                  (self.aggregate && self.aggregate.length > 0)
                  ? <a href={allExceptionsUrl}> <div style={allExceptionsStyle}>Expand</div> </a>
                  : null
                }
              </th>
              <th>Total Count</th>
            </tr>
          </thead>
          <tbody>
            {exceptionTable.map(
              function (row) {
                return <tr>
                {
                  row.map(function (value) {
                    return <td className="col-md-2">{value}</td>;
                  })
                }</tr>;
              })
            }
          </tbody>
        </table>
      </div>
    );
  },
});

var AllMetrics = React.createClass({
  getInitialState: function () {

    this.supportedMetricNames = {
      "__emit-count/": {
        name: "Emit Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__complete-latency/": {
        name: "Complete Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
      "__ack-count/": {
        name: "Ack Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__execute-count/": {
        name: "Execute Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__fail-count/": {
        name: "Fail Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__execute-latency/": {
        name: "Execute Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
      "__process-latency/": {
        name: "Process Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
      "__jvm-uptime-secs": {
        name: "Uptime (ddd:hh:mm:ss)",
        scaleDevisor: 1,
        aggregationType: LAST
      },
    };

    this.spoutMetrics = {
      "__emit-count/": {
        name: "Emit Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__complete-latency/": {
        name: "Complete Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
      "__ack-count/": {
        name: "Ack Count",
        scaleDevisor: 1,
        aggregationType: SUM
      }
    };

    this.boltMetricsOutput = {
      "__emit-count/": {
        name: "Emit Count",
        scaleDevisor: 1,
        aggregationType: SUM
      }
    };

    this.boltMetricsInput = {
      "__execute-count/": {
        name: "Execute Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__ack-count/": {
        name: "Ack Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__fail-count/": {
        name: "Fail Count",
        scaleDevisor: 1,
        aggregationType: SUM
      },
      "__execute-latency/": {
        name: "Execute Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
      "__process-latency/": {
        name: "Process Latency (ms)",
        scaleDevisor: 1000000,
        aggregationType: AVG
      },
    };

    this.tenMins = "10 mins";
    this.threeHrs = "3 hrs";
    this.oneHr = "1 hr";
    this.allTime = "All Time";

    this.timeRanges = {}
    this.timeRanges[this.tenMins] = 10 * 60;
    this.timeRanges[this.oneHr] = 1 * 60 * 60;
    this.timeRanges[this.threeHrs] = 3 * 60 * 60;
    this.timeRanges[this.allTime] = -1;

    return {
        metrics: {},
        lplan: undefined,
        pplan: undefined
    };
  },

  /**
   * Debounce rendering the table (expensive for large topologies) every time a metrics
   * response is received.
   */
  metrics: {},
  renderMetricsTimeout: null,
  setMetrics: function (metrics) {
    this.metrics = metrics;
    clearTimeout(this.renderMetricsTimeout);
    this.renderMetricsTimeout = setTimeout(function () {
      // perform the expensive operation
      this.setState({metrics: this.metrics});
    }.bind(this), 1000);
  },

  componentWillMount: function () {
    this.fetchLplan();
    this.fetchPplan();
  },

  componentDidUpdate: function(prevProps, prevState) {
    if (prevProps.topology != this.props.topology) {
      this.fetchLplan();
      return;
    }

    if (prevProps.comp_name != this.props.comp_name) {
      this.fetchLplan();
      return;
    }

    if (prevProps.comp_instance != this.props.comp_instance) {
      this.fetchLplan();
    }
  },

  fetchLplan: function () {
    if (this.state.lplan === undefined) {
      var fetch_url = this.props.baseUrl +
       "/topologies/" +
        this.props.cluster + "/" +
        this.props.environ + "/" +
        this.props.topology + "/" +
        "logicalplan.json";
      $.ajax({
        url:       fetch_url,
        dataType:  'json',
        success: function(response) {
          this.state.lplan = response.result;
          var components = [];
          for (var spout in this.state.lplan.spouts) {
            if (this.state.lplan.spouts.hasOwnProperty(spout)) {
              components.push({
                comp: spout,
                type: "spout"
              });
            }
          }
          for (var bolt in this.state.lplan.bolts) {
            if (this.state.lplan.bolts.hasOwnProperty(bolt)) {
              components.push({
                comp: bolt,
                type: "bolt"
              });
            }
          }
          var metrics = this.metrics;
          for (var i = 0; i < components.length; i++) {
            var component = components[i].comp;
            var type = components[i].type;
            if (!metrics.hasOwnProperty(component)) {
              metrics[component] = {};
            }
            for (var timeRange in this.timeRanges) {
              if (this.timeRanges.hasOwnProperty(timeRange)) {
                if (!metrics[component].hasOwnProperty(timeRange)) {
                  metrics[component][timeRange] = {};
                }
                if (type === "spout") {
                  for (var metricname in this.spoutMetrics) {
                    if (this.spoutMetrics.hasOwnProperty(metricname)) {
                      var displayName = this.spoutMetrics[metricname].name;
                      if (!metrics[component][timeRange].hasOwnProperty(displayName)) {
                        metrics[component][timeRange][displayName] = {};
                      }
                      for (var j = 0; j < this.state.lplan.spouts[component].outputs.length; j++) {
                        var streamName = this.state.lplan.spouts[component].outputs[j].stream_name;
                        if (!metrics[component][timeRange][displayName].hasOwnProperty(streamName)) {
                          metrics[component][timeRange][displayName][streamName] = {};
                        }
                      }
                    }
                  }
                } else {
                  for (var metricname in this.boltMetricsOutput) {
                    if (this.boltMetricsOutput.hasOwnProperty(metricname)) {
                      var displayName = this.boltMetricsOutput[metricname].name;
                      if (!metrics[component][timeRange].hasOwnProperty(displayName)) {
                        metrics[component][timeRange][displayName] = {};
                      }
                      for (var j = 0; j < this.state.lplan.bolts[component].outputs.length; j++) {
                        var streamName = this.state.lplan.bolts[component].outputs[j].stream_name;
                        if (!metrics[component][timeRange][displayName].hasOwnProperty(streamName)) {
                          metrics[component][timeRange][displayName][streamName] = {};
                        }
                      }
                    }
                  }
                  for (var metricname in this.boltMetricsInput) {
                    if (this.boltMetricsInput.hasOwnProperty(metricname)) {
                      var displayName = this.boltMetricsInput[metricname].name;
                      if (!metrics[component][timeRange].hasOwnProperty(displayName)) {
                        metrics[component][timeRange][displayName] = {};
                      }
                      for (var j = 0; j < this.state.lplan.bolts[component].inputs.length; j++) {
                        var streamName = this.state.lplan.bolts[component].inputs[j].stream_name;
                        if (!metrics[component][timeRange][displayName].hasOwnProperty(streamName)) {
                          metrics[component][timeRange][displayName][streamName] = {};
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.setState({metrics: metrics});
          this.fetchCounters();
        }.bind(this),

        error: function() {
        }
      });
    } else {
      this.fetchCounters();
    }
  },

  fetchPplan: function () {
    url = this.props.baseUrl +
      "/topologies/" +
      this.props.cluster + "/" +
      this.props.environ + "/" +
      this.props.topology + "/" +
      "physicalplan.json";
    $.ajax({
      url: url,
      dataType: 'json',
      success: function (response) {
        var pplan = response.result;
        this.setState({pplan: pplan});
        this.fetchCounters();
      }.bind(this),

      error: function () {
      }
    });
  },

  fetchCounters: function() {
    var fetch_url = "";
    if (this.props.hasOwnProperty("comp_name")) {
      fetch_url = this.props.baseUrl + "/topologies/metrics?" +
        "cluster=" + this.props.cluster + "&" +
        "environ=" + this.props.environ + "&" +
        "topology=" + this.props.topology + "&" +
        "component=" + this.props.comp_name;
      var metricnames = [];

      // Explicitly add JVM uptime metric since it
      // is unique, in the sense that no stream is
      // associated with it.
      metricnames.push("__jvm-uptime-secs");
      if (this.props.comp_type === "spout") {
        var spout = this.props.comp_name;
        for (var i = 0; i < this.state.lplan.spouts[spout].outputs.length; i++) {
          var streamName = this.state.lplan.spouts[spout].outputs[i].stream_name;
          for (var spoutMetric in this.spoutMetrics) {
            if (this.spoutMetrics.hasOwnProperty(spoutMetric)) {
              var metricname = spoutMetric + streamName;
              metricnames.push(metricname);
            }
          }
        }
      } else {
        var bolt = this.props.comp_name;
        for (var i = 0; i < this.state.lplan.bolts[bolt].outputs.length; i++) {
          var streamName = this.state.lplan.bolts[bolt].outputs[i].stream_name;
          for (var boltMetric in this.boltMetricsOutput) {
            if (this.boltMetricsOutput.hasOwnProperty(boltMetric)) {
              var metricname = boltMetric + streamName;
              metricnames.push(metricname);
            }
          }
        }
        for (var i = 0; i < this.state.lplan.bolts[bolt].inputs.length; i++) {
          var streamName = this.state.lplan.bolts[bolt].inputs[i].stream_name;
          for (var boltMetric in this.boltMetricsInput) {
            if (this.boltMetricsInput.hasOwnProperty(boltMetric)) {
              var metricname = boltMetric + streamName;
              metricnames.push(metricname);
            }
          }
        }
      }
      for (var i = 0; i < metricnames.length; i++) {
        for (var timeRange in this.timeRanges) {
          if (this.timeRanges.hasOwnProperty(timeRange)) {
            var url = fetch_url +
              "&metricname=" + metricnames[i] +
              "&interval=" + this.timeRanges[timeRange];
            this.fetchCountersURL(url, timeRange);
          }
        }
      }
    } else if (!this.props.hasOwnProperty("comp_name")) {
      // Fetch all metrics for all the spouts.
      // Must have pplan and metricnames to continue.
      if (this.state.pplan && this.state.lplan) {
        var spoutNames = [];
        for (var name in this.state.lplan.spouts) {
          if (this.state.lplan.spouts.hasOwnProperty(name)) {
            spoutNames.push(name);
          }
        }
        fetch_url = this.props.baseUrl + "/topologies/metrics?" +
          "cluster=" + this.props.cluster + "&" +
          "environ=" + this.props.environ + "&" +
          "topology=" + this.props.topology;
        for (var i = 0; i < spoutNames.length; i++) {
          var spout = spoutNames[i];
          var url = fetch_url + "&component=" + spout;
          for (var j = 0; j < this.state.lplan.spouts[spout].outputs.length; j++) {
            var streamName = this.state.lplan.spouts[spout].outputs[j].stream_name;
            for (var spoutMetric in this.spoutMetrics) {
              if (this.spoutMetrics.hasOwnProperty(spoutMetric)) {
                var metricname = spoutMetric + streamName;
                for (var timeRange in this.timeRanges) {
                  if (this.timeRanges.hasOwnProperty(timeRange)) {
                    var url = fetch_url +
                      "&component=" + spout +
                      "&metricname=" + metricname +
                      "&interval=" + this.timeRanges[timeRange];
                    this.fetchCountersURL(url, timeRange);
                  }
                }
              }
            }
          }
        }
      }
    }
  },

  fetchCountersURL: function(url, timeRange) {
    // This function might be called multiple times with the same url. Note
    // that the timeRange value is inlcuded in the url so it can be ignored in
    // the check. We check if the request has been made before first and
    // skip if this is a duplicated request.
    if (!countersUrlFlags[url]) {
      countersUrlFlags[url] = true;  // Set the flag

      $.ajax({
        url:       url,
        dataType:  'json',
        success: function(response) {
          if (response.hasOwnProperty("metrics")) {
            var component = response.component;
            var metrics = this.metrics;
            if (!metrics.hasOwnProperty(component)) {
              metrics[response.component] = {};
            }
            if (!metrics[component].hasOwnProperty(timeRange)) {
              metrics[component][timeRange] = {};
            }
            for (var name in response.metrics) {
              if (response.metrics.hasOwnProperty(name)) {
                var metricname = name;
                // Handle __jvm-uptime-secs as a special case.
                if (name !== "__jvm-uptime-secs") {
                  metricname = name.split("/")[0] + "/";
                }
                var displayName = this.supportedMetricNames[metricname].name;
                if (!metrics[component][timeRange].hasOwnProperty(displayName)) {
                  metrics[component][timeRange][displayName] = {};
                }
                var tmpMetrics = {
                  metrics: response.metrics[name],
                  scaleDevisor: this.supportedMetricNames[metricname].scaleDevisor,
                  aggregationType: this.supportedMetricNames[metricname].aggregationType
                };
                if (name === "__jvm-uptime-secs") {
                  metrics[component][timeRange][displayName][""] = tmpMetrics;
                } else {
                  metrics[component][timeRange][displayName][name.split("/")[1]] = tmpMetrics;
                }
              }
            }
            metrics[component][timeRange]["__interval"] = response.interval;
            this.setMetrics(metrics);
          }
        }.bind(this),

        error: function() {
        }
      });
    }
  },

  render: function() {
    if (!this.state.lplan) {
      this.fetchLplan();
      return (<div></div>);
    }
    if (!this.state.pplan) {
      this.fetchPplan();
      return (<div></div>);
    }
    var info = {
      topology: this.props.topology,
      baseUrl: this.props.baseUrl,
      comp_type: this.props.comp_type,
      comp_name: this.props.comp_name,
      comp_spout_type: this.props.comp_spout_type,
      comp_spout_source: this.props.comp_spout_source,
      cluster: this.props.cluster,
      environ: this.props.environ,
      metrics: this.state.metrics,
      lplan: this.state.lplan,
      pplan: this.state.pplan,
      instance: this.props.instance,
    };
    return (
      <div>
        <ComponentCounters info={info} />
        <InstanceCounters info={info} />
      </div>
    );
  }
});

var ComponentCounters = React.createClass({
  capitalize: function(astr) {
    if (astr) {
        return astr.charAt(0).toUpperCase() + astr.slice(1);
    }
    return undefined;
  },

  getTitle: function () {
    if (this.props.info.comp_name) {
      var comp_type = this.capitalize(this.props.info.comp_type);
      var title = " " + comp_type + " Counters - " + this.props.info.comp_name;
      if (this.props.info.comp_spout_type !== undefined
          && this.props.info.comp_spout_type !== "default") {
        title += " - " + this.props.info.comp_spout_type + "/" + this.props.info.comp_spout_source;
      }
      return title;
    }
    return " Topology Counters";
  },

  getComponentMetricsRows: function () {
    var metrics = {};
    if (this.props.info.metrics.hasOwnProperty(this.props.info.comp_name)) {
      metrics = this.props.info.metrics[this.props.info.comp_name];
    }
    var aggregatedMetrics = {};
    var timeRanges = ["10 mins", "1 hr", "3 hrs", "All Time"];

    for (var time in metrics) {
      if (metrics.hasOwnProperty(time)) {
        for (var metricname in metrics[time]) {
          if (metrics[time].hasOwnProperty(metricname) &&
              metricname !== "__interval" &&
              metricname !== "Uptime (ddd:hh:mm:ss)") {
            for (var stream in metrics[time][metricname]) {
              if (metrics[time][metricname].hasOwnProperty(stream)) {
                displayName = metricname + " (" + stream + ")";
                var value = 0;
                var allMetrics = metrics[time][metricname][stream].metrics;
                var aggregationType = metrics[time][metricname][stream].aggregationType;
                var count = 0;
                for (var m in allMetrics) {
                  if (allMetrics.hasOwnProperty(m)) {
                    value += Number(allMetrics[m]);
                    count++;
                  }
                }
                if (aggregationType === AVG && count > 0) {
                  value /= count;
                }
                if (!aggregatedMetrics.hasOwnProperty(displayName)) {
                  aggregatedMetrics[displayName] = {};
                }
                value /= (metrics[time][metricname][stream].scaleDevisor || 1);
                aggregatedMetrics[displayName][time] = value;
              }
            }
          }
        }
      }
    }

    var rows = [];
    for (var name in aggregatedMetrics) {
      if (aggregatedMetrics.hasOwnProperty(name)) {
        var row = [];
        row.push(name);
        for (var i = 0; i < timeRanges.length; i++) {
          var time = timeRanges[i];
          row.push(Number(Number(aggregatedMetrics[name][time] || 0).toFixed(2)));
        }
        rows.push(row);
      }
    }
    return rows;
  },

  getTopologyMetricsRows: function () {
    var metrics = this.props.info.metrics;
    var aggregatedMetrics = {};
    var timeRanges = ["10 mins", "1 hr", "3 hrs", "All Time"];

    // Get spout names.
    var spoutNames = [];
    if (this.props.info.pplan) {
      for (var name in this.props.info.pplan.spouts) {
        if (this.props.info.pplan.spouts.hasOwnProperty(name)) {
          spoutNames.push(name);
        }
      }
    }

    for (var s = 0; s < spoutNames.length; s++) {
      var spoutName = spoutNames[s];
      for (var time in metrics[spoutName]) {
        if (metrics[spoutName].hasOwnProperty(time)) {
          for (var metricname in metrics[spoutName][time]) {
            if (metrics[spoutName][time].hasOwnProperty(metricname)
                && metricname !== "__interval"
                && metricname !== "Uptime (ddd:hh:mm:ss)") {
              var value = 0;
              var count = 0;
              var displayName = metricname;
              for (var stream in metrics[spoutName][time][metricname]) {
                if (metrics[spoutName][time][metricname].hasOwnProperty(stream)) {
                  var allMetrics = metrics[spoutName][time][metricname][stream].metrics;
                  var aggregationType = metrics[spoutName][time][metricname][stream].aggregationType;
                  for (var m in allMetrics) {
                    if (allMetrics.hasOwnProperty(m)) {
                      value += Number(allMetrics[m]);
                      count++;
                    }
                  }
                  value /= (metrics[spoutName][time][metricname][stream].scaleDevisor || 1);
                }
              }
              if (aggregationType === AVG && count > 0) {
                value /= count;
              }
              if (!aggregatedMetrics.hasOwnProperty(displayName)) {
                aggregatedMetrics[displayName] = {};
              }
              aggregatedMetrics[displayName][time] = value;
            }
          }
        }
      }
    }

    var rows = [];
    for (var name in aggregatedMetrics) {
      if (aggregatedMetrics.hasOwnProperty(name)) {
        var row = [];
        row.push(name);
        for (var i = 0; i < timeRanges.length; i++) {
          var time = timeRanges[i];
          row.push(Number(Number(aggregatedMetrics[name][time] || 0).toFixed(2)));
        }
        rows.push(row);
      }
    }
    return rows;
  },

  render: function () {
    var title = this.getTitle();

    var timeRanges = ["10 mins", "1 hr", "3 hrs", "All Time"];
    var headings = ["Metrics"];
    headings.push.apply(headings, timeRanges);

    var rows = [];
    var extraLinks = [];
    if (this.props.info.comp_name) {
      rows = this.getComponentMetricsRows();
      var spoutDetail = this.props.info.lplan.spouts[this.props.info.comp_name];
      if (spoutDetail) {
        extraLinks = spoutDetail.extra_links;
      }
    } else {
      rows = this.getTopologyMetricsRows();
    }

    return (
      <div>
        <div className="widget-header">
          <div className="title">
            <h4 style={{
              "display": "inline-block",
              "float": "left",
              "margin-right": "10px"
            }}>{title}</h4>
            <div style={{
              "padding-top": "10px",
              "padding-bottom": "10px",
            }}>
            {extraLinks.map(function (extraLink) {
              return <a id={extraLink['name']}
                        className="btn btn-primary btn-xs"
                        href={extraLink['url']}
                        target="_blank"
                        style={{"margin-right": "5px"}}>{extraLink['name']}
                     </a>
            })}
            </div>
          </div>
        </div>
        <table className="table table-striped table-hover no-margin">
          <thead>
            <tr>
              {headings.map(function (heading, i) {
                  return <th key={i}>{heading}</th>;
              })}
            </tr>
          </thead>
          <tbody>
            {rows.map(function (row) {
              return <tr key={row[0]}>{
                row.map(function (value, i) {
                  return <td className="col-md-2" key={i}>{value}</td>;
                })}</tr>;
            })}
          </tbody>
        </table>
      </div>
    );
  }
});

var InstanceCounters = React.createClass({
  capitalize: function(astr) {
    if (astr) {
        return astr.charAt(0).toUpperCase() + astr.slice(1);
    }
    return undefined;
  },

  getInitialState: function () {
    return {
      sortBy: 0,
      reverse: false,
      maxRows: 50
    };
  },

  render: function () {
    if (!this.props.info.comp_name) {
      return <div></div>;
    }
    var self = this;
    var metrics = {};
    if (this.props.info.metrics.hasOwnProperty(this.props.info.comp_name)) {
      metrics = this.props.info.metrics[this.props.info.comp_name]["All Time"];
    }
    var comp_type = this.capitalize(this.props.info.comp_type);
    var pplan = this.props.info.pplan;
    var title = " " + comp_type + " Instance Counters - " + this.props.info.comp_name;

    var headings = ["Instances"];
    var metricNames = [];
    var aggregatedMetrics = {};

    // The comp_type is either "spout" or "bolt".
    // Just append a "s" and we can query pplan for that type.
    var instances = pplan[this.props.info.comp_type + "s"][this.props.info.comp_name];

    if (this.props.info.comp_type === "bolt") {
      tenMinMetrics = this.props.info.metrics[this.props.info.comp_name]["10 mins"];
    }

    for (var metricname in metrics) {
      if (metrics.hasOwnProperty(metricname)
          && metricname !== "__interval") {
        metricNames.push(metricname);
        if (!aggregatedMetrics.hasOwnProperty(metricname)) {
          aggregatedMetrics[metricname] = {};
        }
        var value = 0;
        var numStreams = 0;
        // Handle __jvm-uptime-secs separately.
        if (metricname === "Uptime (ddd:hh:mm:ss)") {
          var allMetrics = metrics[metricname][""].metrics;
          for (var m in allMetrics) {
            if (allMetrics.hasOwnProperty(m)) {
              if (instances.indexOf(m) < 0) {
                instances.push(m);
              }
              var secs = Number(allMetrics[m]);
              var ddd = ("000" + Number(secs / (24*60*60)).toFixed(0)).slice(-3);
              secs = secs % (24*60*60);
              var hh = ("00" + Number(secs / (60*60)).toFixed(0)).slice(-2);
              secs = secs % (60*60);
              var mm = ("00" + Number(secs / 60).toFixed(0)).slice(-2);
              ss = ("00" + (secs % 60)).slice(-2);
              aggregatedMetrics[metricname][m] =
                ddd + ":" +
                hh + ":" +
                mm + ":" +
                ss;
            }
          }
        } else {
          for (var stream in metrics[metricname]) {
            if (metrics[metricname].hasOwnProperty(stream)) {
              numStreams++;
              var allMetrics = metrics[metricname][stream].metrics;
              var aggregationType = metrics[metricname][stream].aggregationType;
              for (var m in allMetrics) {
                if (allMetrics.hasOwnProperty(m)) {
                  if (instances.indexOf(m) < 0) {
                    instances.push(m);
                  }
                  if (!aggregatedMetrics[metricname].hasOwnProperty(m)) {
                    aggregatedMetrics[metricname][m] = 0;
                  }
                  aggregatedMetrics[metricname][m] += Number(allMetrics[m]) /
                    (metrics[metricname][stream].scaleDevisor || 1);;
                }
              }
            }
          }
          if (aggregationType === AVG && numStreams > 0) {
            for (var m in aggregatedMetrics[metricname]) {
              if (aggregatedMetrics[metricname].hasOwnProperty(m)) {
                aggregatedMetrics[metricname][m] /= numStreams;
              }
            }
          }
        }
      }
    }

    if (this.props.info.comp_type === "bolt") {
      // Hacky way to calculate last 10 mins capacity
      var tenMinAggregatedMetrics = {};
      for (var metricname in tenMinMetrics) {
        if (tenMinMetrics.hasOwnProperty(metricname)
            && (metricname === "Execute Count"
                || metricname === "Execute Latency (ms)")) {
          if (!tenMinAggregatedMetrics.hasOwnProperty(metricname)) {
            tenMinAggregatedMetrics[metricname] = {};
          }
          var value = 0;
          var numStreams = 0;
          for (var stream in tenMinMetrics[metricname]) {
            if (tenMinMetrics[metricname].hasOwnProperty(stream)) {
              numStreams++;
              var allMetrics = tenMinMetrics[metricname][stream].metrics;
              var aggregationType = tenMinMetrics[metricname][stream].aggregationType;
              for (var m in allMetrics) {
                if (allMetrics.hasOwnProperty(m)) {
                  if (instances.indexOf(m) < 0) {
                    instances.push(m);
                  }
                  if (!tenMinAggregatedMetrics[metricname].hasOwnProperty(m)) {
                    tenMinAggregatedMetrics[metricname][m] = 0;
                  }
                  tenMinAggregatedMetrics[metricname][m] += Number(allMetrics[m]) /
                    (tenMinMetrics[metricname][stream].scaleDevisor || 1);;
                }
              }
            }
          }
          if (aggregationType === AVG && numStreams > 0) {
            for (var m in tenMinAggregatedMetrics[metricname]) {
              if (tenMinAggregatedMetrics[metricname].hasOwnProperty(m)) {
                tenMinAggregatedMetrics[metricname][m] /= numStreams;
              }
            }
          }
        }
      }
    }

    headings.push.apply(headings, metricNames);
    if (this.props.info.comp_type === "bolt") {
      headings.push("Capacity (last 10 mins)");
    }
    headings.push("");

    var rows = [];
    for (var i=0; i<instances.length; i++) {
      var instance = instances[i];
      var row = [];
      row.push(instance);
      for (var m = 0; m < metricNames.length; m++) {
        var name = metricNames[m];
        if (name === "Uptime (ddd:hh:mm:ss)") {
          row.push(aggregatedMetrics[name][instance]|| "000:00:00:00");
        } else {
          row.push(Number(Number(aggregatedMetrics[name][instance] || 0).toFixed(2)));
        }
      }
      if (this.props.info.comp_type === "bolt") {
        var capacity = (Number(tenMinAggregatedMetrics["Execute Count"][instance]));
        capacity *= (Number(tenMinAggregatedMetrics["Execute Latency (ms)"][instance]));
        capacity /= (10 * 60 * 1000);
        row.push(Number(capacity.toFixed(3)) || 0);
      }
      if (pplan) {
        // Get Job url from pplan.
        var instanceInfo = undefined;
        for (var key in pplan.instances) {
          var instInfo = pplan.instances[key];
          if (instInfo.id === instance) {
            instanceInfo = instInfo;
            break;
          }
        }
        if (instanceInfo) {
          var stmgrId = instanceInfo.stmgrId;
          var container = stmgrId.split("-")[1]
          var logfileUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + container + '/file?path=./log-files/' + instanceInfo.id + '.log.0'
          var jobUrl = this.props.info.baseUrl + '/topologies/filestats/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + container;
          var exceptionsUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + this.props.info.comp_name + '/' + instance + '/exceptions';
          var pidUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + instanceInfo.id + '/pid'
          var jstackUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + instanceInfo.id + '/jstack'
          var jmapUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + instanceInfo.id + '/jmap'
          var histoUrl = this.props.info.baseUrl + '/topologies/' + this.props.info.cluster
              + '/' + this.props.info.environ + '/' + this.props.info.topology
              + '/' + instanceInfo.id + '/histo'
          var links = [['Logs', logfileUrl, "_blank"],
                       ['Job', jobUrl, "_blank"],
                       ['Exceptions', exceptionsUrl, "_self"],
                       ['Pid', pidUrl, "_self"],
                       ['Stack', jstackUrl, "_self"],
                       ['MemHistogram', histoUrl, "_self"],
                       ['MemoryDump', jmapUrl, "_self"]];

          // Make them links.
          var linkButton = (<ActionButton links={links}/>)
          row.push(linkButton);
        }
      }
      rows.push(row);
    }
    var headingSortClass = headings.map(function(heading, i) {
      return 'sort-' + i;
    });

    var instanceId = this.props.info.instance;
    var compName = this.props.info.comp_name;
    var reverse = this.state.reverse;
    var sortKey = this.state.sortBy;
    rows.sort(function (a, b) {
      var aVal = a[sortKey];
      var bVal = b[sortKey];
      return (typeof aVal === "string" ? aVal.localeCompare(bVal) : (bVal - aVal)) * (reverse ? 1 : -1);
    });
    var setState = this.setState.bind(this);
    var maxRows = this.state.maxRows;
    var that = this;
    function incrLimit() {
      that.setState({
        maxRows: maxRows + 50
      });
    }
    // only show "show more" button if we are hiding rows
    var showMore;
    if (rows.length - 1 >= maxRows) {
      showMore = <div className="text-center" onClick={incrLimit}>
        <strong>{rows.length - maxRows} instances omitted.  Click for more.</strong>
      </div>;
    } else {
      showMore = null;
    }

    extraRowStyle = {
      minWidth: '100px',
    }
    return (
      <div id="instancecounters">
        <hr/>
        <div className="widget-header">
          <div className="title">
            <h4>{title}</h4>
          </div>
        </div>
        <table className="table table-striped table-hover no-margin">
          <thead>
            <tr>
              {headings.map(function (heading, i) {
                var classNameVals = [
                  'sort',
                  ((sortKey === i) && reverse) ? 'asc' : '',
                  ((sortKey === i) && !reverse) ? 'desc' : ''
                ].join(' ');
                function clicked() {
                  setState({
                    sortBy: i,
                    reverse: i === sortKey ? (!reverse) : true
                  });
                }
                return <th key={i} className={classNameVals} style={extraRowStyle} onClick={clicked}>{heading}</th>;
              })}
            </tr>
          </thead>
          <tbody className="list">
            {rows.slice(0, maxRows).map(function (row) {
              var highlighted = row[0] === instanceId;
              return <InstanceRow key={row[0]} row={row} headings={headingSortClass} highlighted={highlighted}/>;
            })}
          </tbody>
        </table>
        {showMore}
      </div>
    );
  }
});