@immobiliarelabs/backstage-plugin-gitlab/dist/components/widgets/CoverageCard/CoverageCard.esm.js

import React from 'react';
import { Progress, InfoCard } from '@backstage/core-components';
import { makeStyles, Box } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import { useAsync } from 'react-use';
import { gitlabProjectId, gitlabProjectSlug, gitlabInstance } from '../../gitlabAppData.esm.js';
import { GitlabCIApiRef } from '../../../api/GitlabCIApi.esm.js';
import '../../utils.esm.js';
import '@gitbeaker/rest';
import dayjs from 'dayjs';
import { useApi } from '@backstage/core-plugin-api';
import { LineChart } from '@mui/x-charts/LineChart';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { gitlabTranslationRef } from '../../../translation.esm.js';

const useStyles = makeStyles(() => ({
  lineChartContainer: {
    "& .v5-MuiChartsAxis-directionX .v5-MuiChartsAxis-tickLabel": {
      transform: "rotate(90deg)",
      textAnchor: "start"
    },
    "& .v5-MuiLineElement-root, .MuiMarkElement-root": {
      strokeWidth: 1
    }
  }
}));
const CoverageCard = (props) => {
  const project_id = gitlabProjectId();
  const project_slug = gitlabProjectSlug();
  const gitlab_instance = gitlabInstance();
  const { t } = useTranslationRef(gitlabTranslationRef);
  const classes = useStyles();
  const GitlabCIAPI = useApi(GitlabCIApiRef).build(
    gitlab_instance || "gitlab.com"
  );
  const { value, loading, error } = useAsync(async () => {
    const projectDetails = await GitlabCIAPI.getProjectDetails(
      project_slug || project_id
    );
    if (!projectDetails)
      throw new Error("wrong project_slug or project_id");
    const coverageDetails = await GitlabCIAPI.getProjectCoverage(
      projectDetails.path_with_namespace,
      projectDetails.default_branch
    );
    return {
      webUrl: projectDetails.web_url,
      defaultBranch: projectDetails.default_branch,
      coverageDetails: !!coverageDetails ? coverageDetails.data.project.pipelines.nodes : []
    };
  }, []);
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  } else if (error) {
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
  }
  const dataset = value?.coverageDetails ? [
    ...new Map(
      value.coverageDetails.filter((node) => !!node.coverage).sort(
        (a, b) => new Date(a.createdAt) > new Date(b.createdAt) ? 1 : -1
      ).map((node) => ({
        x: dayjs(node.createdAt).format("YYYY-MM-DD"),
        y: node.coverage
      })).map((node) => [`${node.x}_${node.y}`, node])
    ).values()
  ] : [];
  return value ? /* @__PURE__ */ React.createElement(
    InfoCard,
    {
      title: t("coverageCard.title"),
      deepLink: {
        link: `${value.webUrl}/-/graphs/main/charts`,
        title: t("coverageCard.deepLinkTitle"),
        onClick: (e) => {
          e.preventDefault();
          window.open(
            `${value.webUrl}/-/graphs/${value?.defaultBranch}/charts`
          );
        }
      },
      variant: props.variant
    },
    /* @__PURE__ */ React.createElement(Box, { position: "relative" }, /* @__PURE__ */ React.createElement("div", { className: classes.lineChartContainer }, dataset.length > 0 && /* @__PURE__ */ React.createElement(
      LineChart,
      {
        xAxis: [{ scaleType: "point", dataKey: "x" }],
        series: [{ dataKey: "y" }],
        dataset,
        height: 300,
        margin: {
          bottom: 90,
          top: 20,
          left: 40,
          right: 20
        }
      }
    )), /* @__PURE__ */ React.createElement("div", null, " ", /* @__PURE__ */ React.createElement("b", null, t("coverageCard.lastCoverage")), dataset.length > 0 ? `${value.coverageDetails[0].coverage}%` : t("coverageCard.noData")))
  ) : /* @__PURE__ */ React.createElement(InfoCard, { title: t("coverageCard.title") });
};

export { CoverageCard as default };
//# sourceMappingURL=CoverageCard.esm.js.map