export default function MetricTopTenantsContainer()

in client/web/src/metrics/MetricTopTenantsContainer.js [29:144]
110 lines of code
5 McCabe index (conditional complexity)

export default function MetricTopTenantsContainer(props) {
  const {
    id,
    name,
    metric,
    timePeriodName,
    stat = "Sum",
    nameSpace = "AWS/ApplicationELB",
    tenants,
  } = props;
  const QUERY_ID = id;

  let data = {
    datasets: [],
    labels: [],
  };

  let chartOpts = {
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [
        {
          ticks: { beginAtZero: true, suggestedMin: 0, suggestedMax: 100 },
        },
      ],
      yAxes: [],
    },
  };
  const dispatch = useDispatch();
  const albstats = useSelector((state) =>
    selectMetricResultsById(state, QUERY_ID)
  );
  const queryState = useSelector((state) => selectQueryState(state, QUERY_ID));
  if (albstats) {
    let tenantLabels = [];
    let tenantVals = [];

    if (stat === "Average") {
      chartOpts.scales.yAxes.push({
        ticks: { suggestedMin: 0, suggestedMax: 100 },
      });
    }
    albstats.metrics[0].topTenants.forEach((m, i) => {
      tenantVals.push(m.value);
      tenantLabels.push(m.id);
    });
    data.datasets.push({
      data: tenantVals,
      borderWidth: 1,
      backgroundColor: _colors,
      borderColor: _colors,
      fill: false,
    });

    data.labels = _tenantLabels(tenantLabels, tenants);
  }
  const queryRequest = {
    id: QUERY_ID,
    timeRangeName: timePeriodName,
    stat: stat,
    dimensions: [{ metricName: metric, nameSpace: nameSpace }],
    topTenants: true,
    statsMap: false,
  };
  const refreshGraph = () => {
    return dispatch(queryMetrics(queryRequest));
  };

  useEffect(() => {
    const queryResponse = refreshGraph();
    return () => {
      if (queryResponse.PromiseStatus === "pending") {
        queryResponse.abort();
      }
    };
  }, [dispatch, QUERY_ID, metric, nameSpace, stat, timePeriodName]);

  return (
    <Col sm="12" md="6" lg="6">
      <Card>
        <CardBody>
          <Row>
            <Col sm="10">
              <CardTitle className="mb-0">{name}</CardTitle>
              <div className="small text-muted">&nbsp;</div>
            </Col>
            <Col sm="2" className="d-flex justify-content-end">
              <div className="mr-3">
                <CircleLoader
                  size={20}
                  loading={queryState.loading === "pending"}
                />
                {queryState.loading === "idle" && (
                  <a href="#" onClick={refreshGraph}>
                    <i className="fa fa-refresh text-muted" />
                  </a>
                )}
              </div>
            </Col>
          </Row>
          <div className="chart-wrapper" style={{ height: 300 + "px" }}>
            <HorizontalBar
              data={data}
              options={chartOpts}
              height={300}
              redraw={true}
            />
          </div>
        </CardBody>
      </Card>
    </Col>
  );
}