@backstage-community/plugin-gitops-profiles/dist/components/ClusterPage/ClusterPage.esm.js

A Backstage plugin that helps you manage GitOps profiles

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { gitOpsApiRef } from '../../api.esm.js';
import { transformRunStatus } from '../ProfileCatalog/ProfileCatalog.esm.js';
import { Page, Header, HeaderLabel, Content, Progress, Table, Link } from '@backstage/core-components';
import { useApi, githubAuthApiRef } from '@backstage/core-plugin-api';

const ClusterPage = () => {
  const params = useParams();
  const [pollingLog, setPollingLog] = useState(true);
  const [runStatus, setRunStatus] = useState([]);
  const [runLink, setRunLink] = useState("");
  const [showProgress, setShowProgress] = useState(true);
  const api = useApi(gitOpsApiRef);
  const githubAuth = useApi(githubAuthApiRef);
  const [githubAccessToken, setGithubAccessToken] = useState(String);
  const [githubUsername, setGithubUsername] = useState(String);
  const columns = [
    { field: "status", title: "Status" },
    { field: "message", title: "Message" }
  ];
  useEffect(() => {
    const fetchGithubUserInfo = async () => {
      const accessToken = await githubAuth.getAccessToken(["repo", "user"]);
      const userInfo = await api.fetchUserInfo({ accessToken });
      setGithubAccessToken(accessToken);
      setGithubUsername(userInfo.login);
    };
    if (!githubAccessToken || !githubUsername) {
      fetchGithubUserInfo();
    } else {
      if (pollingLog) {
        const interval = setInterval(async () => {
          const resp = await api.fetchLog({
            gitHubToken: githubAccessToken,
            gitHubUser: githubUsername,
            targetOrg: params.owner,
            targetRepo: params.repo
          });
          setRunStatus(resp.result);
          setRunLink(resp.link);
          if (resp.status === "completed") {
            setPollingLog(false);
            setShowProgress(false);
          }
        }, 1e4);
        return () => clearInterval(interval);
      }
    }
    return () => {
    };
  }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
    /* @__PURE__ */ jsx(Header, { title: `Cluster ${params.owner}/${params.repo}`, children: /* @__PURE__ */ jsx(HeaderLabel, { label: "Welcome", value: githubUsername }) }),
    /* @__PURE__ */ jsxs(Content, { children: [
      /* @__PURE__ */ jsx(Progress, { hidden: !showProgress }),
      /* @__PURE__ */ jsx(
        Table,
        {
          options: { search: false, paging: false, toolbar: false },
          data: transformRunStatus(runStatus),
          columns
        }
      ),
      /* @__PURE__ */ jsx(Link, { hidden: runLink === "", to: `${runLink}?check_suite_focus=true`, children: "Details" })
    ] })
  ] });
};

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