observe-front-ui/app/scripts/components/metric-selector.js

import React from 'react';
import { connect } from 'react-redux';

import { unhoverMetric } from '../actions/app-actions';
import { availableMetricsSelector } from '../selectors/node-metric';
import MetricSelectorItem from './metric-selector-item';

class MetricSelector extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.onMouseOut = this.onMouseOut.bind(this);
  }

  onMouseOut() {
    this.props.unhoverMetric();
  }

  render() {
    const { availableMetrics } = this.props;
    const hasMetrics = !availableMetrics.isEmpty();
    //默认选中第一个指标，Apdex 方式2
    // let defaultMetric;
    // hasMetrics && availableMetrics.map(metric => {
    //   if (!defaultMetric) {
    //     defaultMetric = metric.get('label')
    //   }
    // })
    return (
      <div className="metric-selector">
        {hasMetrics
          && (
            <div className="metric-selector-wrapper" onMouseLeave={this.onMouseOut}>
              {availableMetrics.map(metric => (
                <MetricSelectorItem
                  key={metric.get('id')}
                  metric={metric}
                // defaultMetric={defaultMetric}
                />
              ))}
            </div>
          )
        }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    availableMetrics: availableMetricsSelector(state),
  };
}

export default connect(
  mapStateToProps,
  { unhoverMetric }
)(MetricSelector);