@janus-idp/backstage-plugin-jfrog-artifactory/dist/esm/index-BB2QHDw1.esm.js

The Jfrog Artifactory plugin displays information about your container images within the Jfrog Artifactory registry.

import React, { useState } from 'react';
import { useEntity } from '@backstage/plugin-catalog-react';
import { useAsync } from 'react-use';
import { Progress, Table, Link } from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { makeStyles as makeStyles$1, Box, Chip } from '@material-ui/core';
import { formatDate, formatByteSize } from '@janus-idp/shared-react';
import { j as jfrogArtifactoryApiRef, u as useJfrogArtifactoryAppData } from './index-B4M_Q8c2.esm.js';
import makeStyles from '@material-ui/core/styles/makeStyles';

const columns = [
  {
    title: "Version",
    field: "name",
    type: "string",
    highlight: true
  },
  {
    title: "Repositories",
    field: "repositories",
    type: "string"
  },
  {
    title: "Manifest",
    field: "manifest_digest",
    type: "string"
  },
  {
    title: "Modified",
    field: "last_modified",
    type: "date"
  },
  {
    title: "Size",
    field: "size",
    type: "string"
  }
];
const useStyles = makeStyles((theme) => ({
  empty: {
    padding: theme.spacing(2),
    display: "flex",
    justifyContent: "center"
  }
}));

const useLocalStyles = makeStyles$1({
  chip: {
    margin: 0,
    marginRight: ".2em",
    height: "1.5em",
    "& > span": {
      padding: ".3em"
    }
  }
});
function JfrogArtifactoryRepository({ image }) {
  const jfrogArtifactoryClient = useApi(jfrogArtifactoryApiRef);
  const classes = useStyles();
  const localClasses = useLocalStyles();
  const [edges, setEdges] = useState([]);
  const titleprop = `Jfrog Artifactory repository: ${image}`;
  const { loading } = useAsync(async () => {
    const tagsResponse = await jfrogArtifactoryClient.getTags(image);
    setEdges(tagsResponse.data.versions.edges);
    return tagsResponse;
  });
  if (loading) {
    return /* @__PURE__ */ React.createElement(Progress, null);
  }
  const data = edges == null ? void 0 : edges.map((edge) => {
    var _a;
    const shortHash = (_a = edge.node.files.find((manifest) => manifest.name === "manifest.json")) == null ? void 0 : _a.sha256.substring(0, 12);
    return {
      name: edge.node.name,
      last_modified: formatDate(edge.node.modified),
      size: formatByteSize(Number(edge.node.size)),
      manifest_digest: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Chip, { label: "sha256", className: localClasses.chip }), shortHash),
      repositories: `${edge.node.repos.length} | ${edge.node.repos.map((repo) => repo.name).join("| ")}`
    };
  });
  return /* @__PURE__ */ React.createElement("div", { style: { border: "1px solid #ddd" } }, /* @__PURE__ */ React.createElement(
    Table,
    {
      title: titleprop,
      options: { paging: true, padding: "dense" },
      data,
      columns,
      emptyContent: /* @__PURE__ */ React.createElement("div", { className: classes.empty }, "No data was added yet,\xA0", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/" }, "learn how to add data"), ".")
    }
  ));
}

const JfrogArtifactoryDashboardPage = () => {
  const { entity } = useEntity();
  const { imageName } = useJfrogArtifactoryAppData({ entity });
  return /* @__PURE__ */ React.createElement(JfrogArtifactoryRepository, { image: imageName });
};

export { JfrogArtifactoryDashboardPage };
//# sourceMappingURL=index-BB2QHDw1.esm.js.map