import { OCI_PREFIX } from '../../utils/data' ; import isValidURL from '../../utils/isValidURL' ; import ButtonCopyToClipboard from '../common/ButtonCopyToClipboard' ; import styles from './ContainerRegistry.module.css' ; interface Props { url : string ; } enum RegistryType { Amazon = 'amazon' , Azure = 'azure' , Docker = 'docker' , Github = 'github' , Google = 'google' , Quay = 'quay' , BundleBar = 'bundlebar' , Unknown = 'unknown' } interface RegistryInfo { name : string ; icon : string ; url ? : string ; } interface RegistryList { [ key ] : RegistryInfo ; } const REGISTRIES = { [ RegistryType . Amazon ] : { name : 'Amazon ECR' , icon : '/static/media/registries/amazon.svg' , } , [ RegistryType . Azure ] : { name : 'Azure CR' , icon : '/static/media/registries/azure.svg' , } , [ RegistryType . Docker ] : { name : 'Docker Hub' , icon : '/static/media/registries/docker.svg' , } , [ RegistryType . Github ] : { name : 'GitHub Packages CR' , icon : '/static/media/registries/github.svg' , } , [ RegistryType . Google ] : { name : 'Google CR' , icon : '/static/media/registries/google.svg' , } , [ RegistryType . Quay ] : { name : 'Quay' , icon : '/static/media/registries/quay.svg' , } , [ RegistryType . BundleBar ] : { name : 'Bundle Bar' , icon : '/static/media/registries/bundlebar.svg' , } , [ RegistryType . Unknown ] : { name : '' , icon : '/static/media/registries/unknown.svg' , } , } ; const getRegistryData = ( url ) : RegistryInfo => { let registryType = RegistryType . Unknown ; const urlToCheck = url . startsWith ( OCI_PREFIX ) ? url : `${ OCI_PREFIX }${ url }` ; if ( isValidURL ( urlToCheck ) ) { const registryUrl = new URL ( urlToCheck ) ; const hostname = registryUrl . hostname ; switch ( true ) { case /docker\.io/ . test ( hostname ) : registryType = RegistryType . Docker ; break ; case /ecr\.aws/ . test ( hostname ) : registryType = RegistryType . Amazon ; break ; case /azurecr\.io/ . test ( hostname ) : case /microsoft\.com/ . test ( hostname ) : registryType = RegistryType . Azure ; break ; case /ghcr\.io/ . test ( hostname ) : registryType = RegistryType . Github ; break ; case /gcr\.io/ . test ( hostname ) : registryType = RegistryType . Google ; break ; case /quay\.io/ . test ( hostname ) : registryType = RegistryType . Quay ; break ; case /bundle\.bar/ . test ( hostname ) : registryType = RegistryType . BundleBar ; break ; } let registry = { ... REGISTRIES [ registryType ] , url : url . replace ( OCI_PREFIX , '' ) , } ; if ( registryType === RegistryType . Unknown ) { registry . name = `${ hostname }${ registryUrl . port ? `:${ registryUrl . port }` : '' }` ; } return registry ; } else { return { ... REGISTRIES [ registryType ] , name : url , } ; } } ; const ContainerRegistry = ( props ) => { const { name , icon , url } = getRegistryData ( props . url ) ; return ( < div className = "d-flex flex-row align-items-center mw-100" > < img src = { icon } alt = "Registry icon" className = { `me-2 ${ styles . icon } registryIcon` } /> < div className = { `text-truncate text-break ${ styles . url }` } > { name } < /div> { url && ( < ButtonCopyToClipboard text = { url } className = { `btn-link text-dark border-0 position-relative ${ styles . copyBtn }` } label = "Copy registry url to clipboard" / > ) } < /div>); } ; export default ContainerRegistry ;