/* * Copyright 2024 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { useEffect, useMemo, useRef, useState } from 'react'; import { useAsync } from 'react-use'; import { Entity } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; import { useEntity } from '@backstage/plugin-catalog-react'; import { Flex, Tag, TagGroup, Text } from '@backstage/ui'; import { quayApiRef } from '../api'; import { Layer, Tag as QuayTag, QuayTagData } from '../types'; import { formatByteSize, formatDate } from '../utils'; export const useTags = ( instanceName: string | undefined, organization: string, repository: string, ) => { const quayClient = useApi(quayApiRef); const requestIdRef = useRef(0); const [tags, setTags] = useState([]); const [tagManifestLayers, setTagManifestLayers] = useState< Record >({}); const [tagManifestStatuses, setTagManifestStatuses] = useState< Record >({}); useEffect(() => { requestIdRef.current += 1; setTags([]); setTagManifestLayers({}); setTagManifestStatuses({}); }, [instanceName, organization, repository]); const fetchSecurityDetails = async (tag: QuayTag) => { const securityDetails = await quayClient.getSecurityDetails( instanceName, organization, repository, tag.manifest_digest, ); return securityDetails; }; const { loading } = useAsync(async () => { const requestId = requestIdRef.current; const tagsResponse = await quayClient.getTags( instanceName, organization, repository, undefined, undefined, ); if (requestId !== requestIdRef.current) { return tagsResponse; } setTags(tagsResponse.tags); void Promise.all( tagsResponse.tags.map(async tag => { const securityDetails = await fetchSecurityDetails(tag); if (requestId !== requestIdRef.current) { return; } const securityData = securityDetails.data; const securityStatus = securityDetails.status; setTagManifestStatuses(prevState => ({ ...prevState, [tag.manifest_digest]: securityStatus, })); if (securityData) { setTagManifestLayers(prevState => ({ ...prevState, [tag.manifest_digest]: securityData.Layer, })); } }), ); return tagsResponse; }, [instanceName, organization, repository]); const data: QuayTagData[] = useMemo(() => { return Object.values(tags)?.map(tag => { const hashFunc = tag.manifest_digest.substring(0, 6); const shortHash = tag.manifest_digest.substring(7, 19); return { id: `${tag.manifest_digest}-${tag.name}`, name: tag.name, last_modified: formatDate(tag.last_modified), size: formatByteSize(tag.size), rawSize: tag.size, manifest_digest: ( {hashFunc} {shortHash} ), expiration: tag.expiration ? formatDate(tag.expiration) : tag.expiration, securityDetails: tagManifestLayers[tag.manifest_digest], securityStatus: tagManifestStatuses[tag.manifest_digest], manifest_digest_raw: tag.manifest_digest, }; }); }, [tags, tagManifestLayers, tagManifestStatuses]); return { loading, data }; }; export const QUAY_ANNOTATION_REPOSITORY = 'quay.io/repository-slug'; export const QUAY_ANNOTATION_INSTANCE = 'quay.io/instance-name'; export const useQuayAppData = ({ entity }: { entity: Entity }) => { const instanceSlug = entity?.metadata.annotations?.[QUAY_ANNOTATION_INSTANCE]; const repositorySlug = entity?.metadata.annotations?.[QUAY_ANNOTATION_REPOSITORY] ?? ''; if (!repositorySlug) { throw new Error("'Quay' annotations are missing"); } return { instanceSlug, repositorySlug }; }; export const useRepository = () => { const { entity } = useEntity(); const { instanceSlug: instanceName, repositorySlug } = useQuayAppData({ entity, }); const info = repositorySlug.split('/'); const organization = info.shift() as 'string'; const repository = info.join('/'); return { instanceName, organization, repository, }; }; export const useTagDetails = ( instanceName: string | undefined, org: string, repo: string, digest: string, ) => { const quayClient = useApi(quayApiRef); const result = useAsync(async () => { const manifestLayer = await quayClient.getSecurityDetails( instanceName, org, repo, digest, ); return manifestLayer; }); return result; };