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

<p align="center"> <img src="https://avatars.githubusercontent.com/u/10090828?s=200&v=4" width="200px" alt="logo"/> </p> <h1 align="center">Backstage Plugin GitLab</h1>

import React from 'react';
import { Progress, Table } from '@backstage/core-components';
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 { getElapsedTime, getDuration } from '../../utils.esm.js';
import '@gitbeaker/rest';
import 'dayjs';
import { useApi } from '@backstage/core-plugin-api';
import { createStatusColumn, createWebURLColumn } from './columns.esm.js';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { gitlabTranslationRef } from '../../../translation.esm.js';

const PipelineDenseTable = ({
  projectName,
  summary
}) => {
  const { t } = useTranslationRef(gitlabTranslationRef);
  const columns = [
    { title: t("pipelinesTable.columnsTitle.pipelineID"), field: "id" },
    createStatusColumn(t),
    { title: t("pipelinesTable.columnsTitle.branch"), field: "ref" },
    createWebURLColumn(t),
    {
      title: t("pipelinesTable.columnsTitle.createdAt"),
      field: "created_date"
    },
    { title: t("pipelinesTable.columnsTitle.duration"), field: "duration" }
  ];
  const title = t("pipelinesTable.title", { projectName });
  const data = summary.map((pipelineObject) => {
    return {
      id: pipelineObject.id,
      status: pipelineObject.status,
      ref: pipelineObject.ref,
      web_url: pipelineObject.web_url,
      created_date: getElapsedTime(pipelineObject.created_at),
      duration: getDuration(
        pipelineObject.created_at,
        pipelineObject.updated_at
      )
    };
  });
  return /* @__PURE__ */ React.createElement(
    Table,
    {
      title,
      options: { search: true, paging: true },
      columns,
      data: data || []
    }
  );
};
const PipelinesTable = ({}) => {
  const project_id = gitlabProjectId();
  const project_slug = gitlabProjectSlug();
  const gitlab_instance = gitlabInstance();
  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 summary = await GitlabCIAPI.getPipelineSummary(projectDetails.id);
    if (!summary) throw new Error("Merge request summary is undefined!");
    return { summary, projectName: projectDetails.name };
  }, []);
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  } else if (error) {
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
  } else if (!value) {
    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "pipeline value is not defined!");
  }
  return /* @__PURE__ */ React.createElement(PipelineDenseTable, { ...value });
};

export { PipelineDenseTable, PipelinesTable };
//# sourceMappingURL=PipelinesTable.esm.js.map