export default function RequestGraphContainer()

in client/web/src/metrics/RequestGraphContainer.js [31:172]
108 lines of code
3 McCabe index (conditional complexity)

export default function RequestGraphContainer(props) {
  const dispatch = useDispatch();
  const albstats = useSelector((state) =>
    selectMetricResultsById(state, "albstats")
  );

  console.log(`albstats: ${JSON.stringify(albstats)}`);
  useEffect(() => {
    const queryResponse = dispatch(queryMetrics(queryRequest));
    return () => {
      if (queryResponse.PromiseStatus === "pending") {
        console.log("Clean up onboarding list request");
        queryResponse.abort();
      }
      //dispatch(dismissError());
    };
  }, [dispatch]);

  const metrics = new Map();
  if (albstats) {
    albstats.metrics.forEach((metric) => {
      let data = {};
      const datasets = [];

      const metricData = {
        name: metric.dimension.metricName,
      };

      datasets.push({
        label: "P90",
        data: metric.stats.P90,
        borderWidth: 1,
        backgroundColor: "rgba(32,168,216, 0.5)",
        borderColor: "rgba(32,168,216, 0.5)",
        fill: false,
      });

      datasets.push({
        label: "P70",
        data: metric.stats.P70,
        borderWidth: 1,
        backgroundColor: "rgba(164,183,193, 0.5)",
        borderColor: "rgba(164,183,193, 0.5)",
        fill: false,
      });

      datasets.push({
        label: "P50",
        data: metric.stats.P50,
        borderWidth: 1,
        backgroundColor: "rgba(77,189,116, 0.5)",
        borderColor: "rgba(77,189,116, 0.5)",
        fill: false,
      });

      datasets.push({
        label: "Average",
        data: metric.stats.Average,
        borderWidth: 1,
        //backgroundColor: "rgba(248,108,107, 1)",
        borderColor: "rgba(248,108,107, 1)",
        fill: false,
      });

      datasets.push({
        label: "Sum",
        data: metric.stats.Sum,
        borderWidth: 1,
        backgroundColor: "rgba(255,193,7, 0.5)",
        borderColor: "rgba(255,193,7, 0.5)",
        fill: false,
      });

      //if (metric.dimension.metricName === "RequestCount") {
      // metric.topTenants.forEach((dataPoint) => {
      //   dataPoint.forEach((data) => {
      //     if (!tenantMap.has(data.tenantId)) {
      //       tenantMap.set(data.tenantId, []);
      //     }
      //     console.log(`dataPoint: ${JSON.stringify(data)}`);
      //     let existingValues = tenantMap.get(data.tenantId);
      //     existingValues.push(data.value);
      //     tenantMap.set(data.tenantId, existingValues);
      //   });
      // });
      // //}
      // tenantMap.forEach((v, k, m) => {
      //   datasets.push({
      //     label: k,
      //     data: v,
      //   });
      // });
      console.log(`dataset: ${JSON.stringify(datasets)}`);
      const distinctPeriods = [...new Set(albstats.periods)];

      data.labels = distinctPeriods;
      data.datasets = datasets;
      metricData.data = data;

      metrics.set(metricData.name, metricData);
    });
  }
  let metricsToShow = [];

  metricsToShow.push(<GraphComponent loading={true} name={"Request Count"} />);
  metricsToShow.push(
    <GraphComponent loading={true} name={"2XX Request Count"} />
  );
  metricsToShow.push(
    <GraphComponent loading={true} name={"4XX Request Count"} />
  );
  metricsToShow.push(
    <GraphComponent loading={true} name={"5XX Request Count"} />
  );
  metricsToShow.push(
    <GraphComponent loading={true} name={"3XX Request Count"} />
  );

  metrics.forEach((m, k) => {
    console.log(k);
    metricsToShow.push(
      <Col lg="6">
        <Card>
          <CardHeader>{k}</CardHeader>
          <CardBody>
            <Line
              data={m.data}
              options={{
                title: {
                  display: true,
                  text: k,
                  fontSize: 12,
                },
              }}
            />
          </CardBody>
        </Card>
      </Col>
    );
  });
  return metricsToShow;
}