mirror of https://github.com/portainer/portainer
refactor(ui/image-config): create react component [EE-5342] (#8856)
Chaim Lev-Ari
1 year ago
committed by
GitHub
parent
bf51f1b6c9
commit
10014ae171
@ -0,0 +1,41 @@
|
||||
import { FormikErrors, useFormikContext } from 'formik';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Input } from '@@/form-components/Input';
|
||||
import { TextTip } from '@@/Tip/TextTip';
|
||||
|
||||
import { Values } from './types';
|
||||
|
||||
export function AdvancedForm({
|
||||
values,
|
||||
errors,
|
||||
fieldNamespace,
|
||||
}: {
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
fieldNamespace?: string;
|
||||
}) {
|
||||
const { setFieldValue } = useFormikContext<Values>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextTip color="blue">
|
||||
When using advanced mode, image and repository <b>must be</b> publicly
|
||||
available.
|
||||
</TextTip>
|
||||
<FormControl label="Image" inputId="image-field" errors={errors?.image}>
|
||||
<Input
|
||||
id="image-field"
|
||||
value={values.image}
|
||||
onChange={(e) => setFieldValue(namespaced('image'), e.target.value)}
|
||||
placeholder="e.g. registry:port/my-image:my-tag"
|
||||
required
|
||||
/>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
|
||||
function namespaced(field: string) {
|
||||
return fieldNamespace ? `${fieldNamespace}.${field}` : field;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import { Database, Globe } from 'lucide-react';
|
||||
import { FormikErrors, useFormikContext } from 'formik';
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import { Button } from '@@/buttons';
|
||||
|
||||
import { SimpleForm } from './SimpleForm';
|
||||
import { Values } from './types';
|
||||
import { AdvancedForm } from './AdvancedForm';
|
||||
import { RateLimits } from './RateLimits';
|
||||
|
||||
export function ImageConfigFieldset({
|
||||
checkRateLimits,
|
||||
children,
|
||||
autoComplete,
|
||||
setValidity,
|
||||
fieldNamespace,
|
||||
values,
|
||||
errors,
|
||||
}: PropsWithChildren<{
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
fieldNamespace?: string;
|
||||
checkRateLimits?: boolean;
|
||||
autoComplete?: boolean;
|
||||
setValidity: (error?: string) => void;
|
||||
}>) {
|
||||
const { setFieldValue } = useFormikContext<Values>();
|
||||
|
||||
const Component = values.useRegistry ? SimpleForm : AdvancedForm;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<Component
|
||||
autoComplete={autoComplete}
|
||||
fieldNamespace={fieldNamespace}
|
||||
values={values}
|
||||
errors={errors}
|
||||
/>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
{values.useRegistry ? (
|
||||
<Button
|
||||
size="small"
|
||||
color="link"
|
||||
icon={Globe}
|
||||
className="!ml-0 p-0 hover:no-underline"
|
||||
onClick={() => setFieldValue(namespaced('useRegistry'), false)}
|
||||
>
|
||||
Advanced mode
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="small"
|
||||
color="link"
|
||||
icon={Database}
|
||||
className="!ml-0 p-0 hover:no-underline"
|
||||
onClick={() => setFieldValue(namespaced('useRegistry'), true)}
|
||||
>
|
||||
Simple mode
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
|
||||
{checkRateLimits && values.useRegistry && (
|
||||
<RateLimits registryId={values.registryId} setValidity={setValidity} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
function namespaced(field: string) {
|
||||
return fieldNamespace ? `${fieldNamespace}.${field}` : field;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import { AutomationTestingProps } from '@/types';
|
||||
|
||||
import { Option } from '@@/form-components/PortainerSelect';
|
||||
import { Select } from '@@/form-components/ReactSelect';
|
||||
|
||||
export function InputSearch({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
placeholder,
|
||||
'data-cy': dataCy,
|
||||
inputId,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: Option<string>[];
|
||||
placeholder?: string;
|
||||
inputId?: string;
|
||||
} & AutomationTestingProps) {
|
||||
const selectValue = options.find((option) => option.value === value) || {
|
||||
value: '',
|
||||
label: value,
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
options={options}
|
||||
value={selectValue}
|
||||
onChange={(option) => option && onChange(option.value)}
|
||||
placeholder={placeholder}
|
||||
data-cy={dataCy}
|
||||
inputId={inputId}
|
||||
onInputChange={(value, actionMeta) => {
|
||||
if (
|
||||
actionMeta.action !== 'input-change' &&
|
||||
actionMeta.action !== 'set-value'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(value);
|
||||
}}
|
||||
openMenuOnClick={false}
|
||||
openMenuOnFocus={false}
|
||||
components={{ DropdownIndicator: () => null }}
|
||||
onBlur={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,240 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
import { buildUrl } from '@/react/portainer/environments/environment.service/utils';
|
||||
import {
|
||||
Environment,
|
||||
EnvironmentType,
|
||||
} from '@/react/portainer/environments/types';
|
||||
import {
|
||||
isAgentEnvironment,
|
||||
isLocalEnvironment,
|
||||
} from '@/react/portainer/environments/utils';
|
||||
import { RegistryId } from '@/react/portainer/registries/types/registry';
|
||||
import { useRegistry } from '@/react/portainer/registries/queries/useRegistry';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
import { TextTip } from '@@/Tip/TextTip';
|
||||
|
||||
import { getIsDockerHubRegistry } from './utils';
|
||||
|
||||
export function RateLimits({
|
||||
registryId,
|
||||
setValidity,
|
||||
}: {
|
||||
registryId?: RegistryId;
|
||||
setValidity: (error?: string) => void;
|
||||
}) {
|
||||
const registryQuery = useRegistry(registryId);
|
||||
|
||||
const registry = registryQuery.data;
|
||||
|
||||
const isDockerHubRegistry = getIsDockerHubRegistry(registry);
|
||||
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
if (
|
||||
!environmentQuery.data ||
|
||||
registryQuery.isLoading ||
|
||||
!isDockerHubRegistry
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<RateLimitsInner
|
||||
isAuthenticated={registry?.Authentication}
|
||||
registryId={registryId}
|
||||
setValidity={setValidity}
|
||||
environment={environmentQuery.data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function RateLimitsInner({
|
||||
isAuthenticated = false,
|
||||
registryId = 0,
|
||||
setValidity,
|
||||
environment,
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
registryId?: RegistryId;
|
||||
setValidity: (error?: string) => void;
|
||||
environment: Environment;
|
||||
}) {
|
||||
const pullRateLimits = useRateLimits(registryId, environment, setValidity);
|
||||
const { isAdmin } = useCurrentUser();
|
||||
|
||||
if (!pullRateLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
{pullRateLimits.remaining > 0 ? (
|
||||
<TextTip color="blue">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
You are currently using a free account to pull images from
|
||||
DockerHub and will be limited to 200 pulls every 6 hours.
|
||||
Remaining pulls:
|
||||
<span className="font-bold">
|
||||
{pullRateLimits.remaining}/{pullRateLimits.limit}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{isAdmin ? (
|
||||
<>
|
||||
You are currently using an anonymous account to pull images
|
||||
from DockerHub and will be limited to 100 pulls every 6
|
||||
hours. You can configure DockerHub authentication in the{' '}
|
||||
<Link to="portainer.registries">Registries View</Link>.
|
||||
Remaining pulls:{' '}
|
||||
<span className="font-bold">
|
||||
{pullRateLimits.remaining}/{pullRateLimits.limit}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
You are currently using an anonymous account to pull images
|
||||
from DockerHub and will be limited to 100 pulls every 6
|
||||
hours. Contact your administrator to configure DockerHub
|
||||
authentication. Remaining pulls:{' '}
|
||||
<span className="font-bold">
|
||||
{pullRateLimits.remaining}/{pullRateLimits.limit}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TextTip>
|
||||
) : (
|
||||
<TextTip>
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
Your authorized pull count quota as a free user is now exceeded.
|
||||
You will not be able to pull any image from the DockerHub
|
||||
registry.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Your authorized pull count quota as an anonymous user is now
|
||||
exceeded. You will not be able to pull any image from the
|
||||
DockerHub registry.
|
||||
</>
|
||||
)}
|
||||
</TextTip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PullRateLimits {
|
||||
remaining: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
function useRateLimits(
|
||||
registryId: RegistryId,
|
||||
environment: Environment,
|
||||
setValidity: (error?: string) => void
|
||||
) {
|
||||
const isValidForPull =
|
||||
isAgentEnvironment(environment.Type) || isLocalEnvironment(environment);
|
||||
|
||||
const query = useQuery(
|
||||
['dockerhub', environment.Id, registryId],
|
||||
() => getRateLimits(environment, registryId),
|
||||
{
|
||||
enabled: isValidForPull,
|
||||
onError(e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('Failed loading DockerHub pull rate limits', e);
|
||||
setValidity();
|
||||
},
|
||||
onSuccess(data) {
|
||||
setValidity(
|
||||
data.limit === 0 || data.remaining >= 0
|
||||
? undefined
|
||||
: 'Rate limit exceeded'
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isValidForPull) {
|
||||
setValidity();
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValidForPull) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return query.data;
|
||||
}
|
||||
|
||||
function getRateLimits(environment: Environment, registryId: RegistryId) {
|
||||
if (isLocalEnvironment(environment)) {
|
||||
return getLocalEnvironmentRateLimits(environment.Id, registryId);
|
||||
}
|
||||
|
||||
const envType = getEnvType(environment.Type);
|
||||
|
||||
return getAgentEnvironmentRateLimits(environment.Id, envType, registryId);
|
||||
}
|
||||
|
||||
async function getLocalEnvironmentRateLimits(
|
||||
environmentId: Environment['Id'],
|
||||
registryId: RegistryId
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<PullRateLimits>(
|
||||
buildUrl(environmentId, `dockerhub/${registryId}`)
|
||||
);
|
||||
return data;
|
||||
} catch (e) {
|
||||
throw parseAxiosError(
|
||||
e as Error,
|
||||
'Unable to retrieve DockerHub pull rate limits'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getEnvType(type: Environment['Type']) {
|
||||
switch (type) {
|
||||
case EnvironmentType.AgentOnKubernetes:
|
||||
case EnvironmentType.EdgeAgentOnKubernetes:
|
||||
return 'kubernetes';
|
||||
|
||||
case EnvironmentType.AgentOnDocker:
|
||||
case EnvironmentType.EdgeAgentOnDocker:
|
||||
default:
|
||||
return 'docker';
|
||||
}
|
||||
}
|
||||
|
||||
async function getAgentEnvironmentRateLimits(
|
||||
environmentId: Environment['Id'],
|
||||
envType: 'kubernetes' | 'docker',
|
||||
registryId: RegistryId
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<PullRateLimits>(
|
||||
buildUrl(environmentId, `${envType}/v2/dockerhub/${registryId}`)
|
||||
);
|
||||
return data;
|
||||
} catch (e) {
|
||||
throw parseAxiosError(
|
||||
e as Error,
|
||||
'Unable to retrieve DockerHub pull rate limits'
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,257 @@
|
||||
import { FormikErrors, useFormikContext } from 'formik';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import DockerIcon from '@/assets/ico/vendor/docker.svg?c';
|
||||
import { useImages } from '@/react/docker/images/queries/useImages';
|
||||
import {
|
||||
imageContainsURL,
|
||||
getUniqueTagListFromImages,
|
||||
} from '@/react/docker/images/utils';
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import { useEnvironmentRegistries } from '@/react/portainer/environments/queries/useEnvironmentRegistries';
|
||||
import {
|
||||
Registry,
|
||||
RegistryId,
|
||||
RegistryTypes,
|
||||
} from '@/react/portainer/registries/types/registry';
|
||||
import { useRegistry } from '@/react/portainer/registries/queries/useRegistry';
|
||||
|
||||
import { Button } from '@@/buttons';
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { InputGroup } from '@@/form-components/InputGroup';
|
||||
import { PortainerSelect } from '@@/form-components/PortainerSelect';
|
||||
import { Input } from '@@/form-components/Input';
|
||||
|
||||
import { Values } from './types';
|
||||
import { InputSearch } from './InputSearch';
|
||||
import { getIsDockerHubRegistry } from './utils';
|
||||
|
||||
export function SimpleForm({
|
||||
autoComplete,
|
||||
values,
|
||||
errors,
|
||||
fieldNamespace,
|
||||
}: {
|
||||
autoComplete?: boolean;
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
fieldNamespace?: string;
|
||||
}) {
|
||||
const { setFieldValue } = useFormikContext<Values>();
|
||||
|
||||
const registryQuery = useRegistry(values.registryId);
|
||||
|
||||
const registry = registryQuery.data;
|
||||
|
||||
const registryUrl = getRegistryURL(registry) || 'docker.io';
|
||||
const isDockerHubRegistry = getIsDockerHubRegistry(registry);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormControl
|
||||
label="Registry"
|
||||
inputId="registry-field"
|
||||
errors={errors?.registryId}
|
||||
>
|
||||
<RegistrySelector
|
||||
onChange={(value) => setFieldValue(namespaced('registryId'), value)}
|
||||
value={values.registryId}
|
||||
inputId="registry-field"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl label="Image" inputId="image-field" errors={errors?.image}>
|
||||
<InputGroup>
|
||||
<InputGroup.Addon>{registryUrl}</InputGroup.Addon>
|
||||
|
||||
<ImageField
|
||||
onChange={(value) => setFieldValue(namespaced('image'), value)}
|
||||
value={values.image}
|
||||
registry={registry}
|
||||
autoComplete={autoComplete}
|
||||
inputId="image-field"
|
||||
/>
|
||||
|
||||
{isDockerHubRegistry && (
|
||||
<InputGroup.ButtonWrapper>
|
||||
<Button
|
||||
as="a"
|
||||
title="Search image on Docker Hub"
|
||||
color="default"
|
||||
props={{
|
||||
href: 'https://hub.docker.com/search?type=image&q={ $ctrl.model.Image | trimshasum | trimversiontag }',
|
||||
target: '_blank',
|
||||
rel: 'noreferrer',
|
||||
}}
|
||||
icon={DockerIcon}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
</InputGroup.ButtonWrapper>
|
||||
)}
|
||||
</InputGroup>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
|
||||
function namespaced(field: string) {
|
||||
return fieldNamespace ? `${fieldNamespace}.${field}` : field;
|
||||
}
|
||||
}
|
||||
|
||||
function getImagesForRegistry(
|
||||
images: string[],
|
||||
registries: Array<Registry>,
|
||||
registry?: Registry
|
||||
) {
|
||||
if (isKnownRegistry(registry)) {
|
||||
const url = getRegistryURL(registry);
|
||||
const registryImages = images.filter((image) => image.includes(url));
|
||||
return registryImages.map((image) =>
|
||||
image.replace(new RegExp(`${url}/?`), '')
|
||||
);
|
||||
}
|
||||
|
||||
const knownRegistries = registries.filter((reg) => isKnownRegistry(reg));
|
||||
const registryImages = knownRegistries.flatMap((registry) =>
|
||||
images.filter((image) => image.includes(registry.URL))
|
||||
);
|
||||
return _.difference(images, registryImages).filter(
|
||||
(image) => !imageContainsURL(image)
|
||||
);
|
||||
}
|
||||
|
||||
function RegistrySelector({
|
||||
value,
|
||||
onChange,
|
||||
inputId,
|
||||
}: {
|
||||
value: RegistryId | undefined;
|
||||
onChange: (value: RegistryId | undefined) => void;
|
||||
inputId?: string;
|
||||
}) {
|
||||
const environmentId = useEnvironmentId();
|
||||
|
||||
const registriesQuery = useEnvironmentRegistries(environmentId, {
|
||||
select: (registries) =>
|
||||
registries
|
||||
.sort((a, b) => a.Name.localeCompare(b.Name))
|
||||
.map((registry) => ({
|
||||
label: registry.Name,
|
||||
value: registry.Id,
|
||||
})),
|
||||
});
|
||||
|
||||
return (
|
||||
<PortainerSelect
|
||||
inputId={inputId}
|
||||
options={registriesQuery.data || []}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
data-cy="component-registrySelect"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ImageField({
|
||||
value,
|
||||
onChange,
|
||||
registry,
|
||||
autoComplete,
|
||||
inputId,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
registry?: Registry;
|
||||
autoComplete?: boolean;
|
||||
inputId?: string;
|
||||
}) {
|
||||
return autoComplete ? (
|
||||
<ImageFieldAutoComplete
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
registry={registry}
|
||||
inputId={inputId}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
id={inputId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ImageFieldAutoComplete({
|
||||
value,
|
||||
onChange,
|
||||
registry,
|
||||
inputId,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
registry?: Registry;
|
||||
inputId?: string;
|
||||
}) {
|
||||
const environmentId = useEnvironmentId();
|
||||
|
||||
const registriesQuery = useEnvironmentRegistries(environmentId);
|
||||
|
||||
const imagesQuery = useImages(environmentId, {
|
||||
select: (images) => getUniqueTagListFromImages(images),
|
||||
});
|
||||
|
||||
const imageOptions = useMemo(() => {
|
||||
const images = getImagesForRegistry(
|
||||
imagesQuery.data || [],
|
||||
registriesQuery.data || [],
|
||||
registry
|
||||
);
|
||||
return images.map((image) => ({
|
||||
label: image,
|
||||
value: image,
|
||||
}));
|
||||
}, [registry, imagesQuery.data, registriesQuery.data]);
|
||||
|
||||
return (
|
||||
<InputSearch
|
||||
value={value}
|
||||
onChange={(value) => onChange(value)}
|
||||
data-cy="component-imageInput"
|
||||
placeholder="e.g. my-image:my-tag"
|
||||
options={imageOptions}
|
||||
inputId={inputId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function isKnownRegistry(registry?: Registry) {
|
||||
return registry && registry.Type !== RegistryTypes.ANONYMOUS && registry.URL;
|
||||
}
|
||||
|
||||
function getRegistryURL(registry?: Registry) {
|
||||
if (!registry) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (
|
||||
registry.Type !== RegistryTypes.GITLAB &&
|
||||
registry.Type !== RegistryTypes.GITHUB
|
||||
) {
|
||||
return registry.URL;
|
||||
}
|
||||
|
||||
if (registry.Type === RegistryTypes.GITLAB) {
|
||||
return `${registry.URL}/${registry.Gitlab?.ProjectPath}`;
|
||||
}
|
||||
|
||||
if (registry.Type === RegistryTypes.GITHUB) {
|
||||
const namespace = registry.Github?.UseOrganisation
|
||||
? registry.Github?.OrganisationName
|
||||
: registry.Username;
|
||||
return `${registry.URL}/${namespace}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export { ImageConfigFieldset } from './ImageConfigFieldset';
|
||||
export { type Values as ImageConfigValues } from './types';
|
||||
export { validation as imageConfigValidation } from './validation';
|
||||
@ -0,0 +1,7 @@
|
||||
import { Registry } from '@/react/portainer/registries/types/registry';
|
||||
|
||||
export interface Values {
|
||||
useRegistry: boolean;
|
||||
registryId?: Registry['Id'];
|
||||
image: string;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import {
|
||||
Registry,
|
||||
RegistryTypes,
|
||||
} from '@/react/portainer/registries/types/registry';
|
||||
|
||||
export function getIsDockerHubRegistry(registry?: Registry | null) {
|
||||
return (
|
||||
!registry ||
|
||||
registry.Type === RegistryTypes.DOCKERHUB ||
|
||||
registry.Type === RegistryTypes.ANONYMOUS
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { bool, number, object, SchemaOf, string } from 'yup';
|
||||
|
||||
import { Values } from './types';
|
||||
|
||||
export function validation(): SchemaOf<Values> {
|
||||
return object({
|
||||
image: string().required('Image is required'),
|
||||
registryId: number().default(0),
|
||||
useRegistry: bool().default(false),
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { Registry } from '@/react/portainer/registries/types/registry';
|
||||
|
||||
/**
|
||||
* Encodes the registry credentials in base64
|
||||
* @param registryId
|
||||
* @returns
|
||||
*/
|
||||
export function encodeRegistryCredentials(registryId: Registry['Id']) {
|
||||
const credentials = {
|
||||
registryId,
|
||||
};
|
||||
|
||||
const buf = Buffer.from(JSON.stringify(credentials));
|
||||
return buf.toString('base64url');
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { queryKeys as dockerQueryKeys } from '../../queries/utils';
|
||||
|
||||
export const queryKeys = {
|
||||
base: (environmentId: EnvironmentId) =>
|
||||
[dockerQueryKeys.root(environmentId), 'images'] as const,
|
||||
list: (environmentId: EnvironmentId) => queryKeys.base(environmentId),
|
||||
};
|
||||
@ -0,0 +1,124 @@
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { buildUrl } from '../../proxy/queries/build-url';
|
||||
|
||||
import { queryKeys } from './queryKeys';
|
||||
|
||||
interface ImageSummary {
|
||||
/**
|
||||
* Number of containers using this image. Includes both stopped and running containers.
|
||||
*
|
||||
* This size is not calculated by default, and depends on which API endpoint is used.
|
||||
* `-1` indicates that the value has not been set / calculated.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
Containers: number;
|
||||
|
||||
/**
|
||||
* Date and time at which the image was created as a Unix timestamp
|
||||
* (number of seconds sinds EPOCH).
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
Created: number;
|
||||
|
||||
/**
|
||||
* ID is the content-addressable ID of an image.
|
||||
*
|
||||
* This identifier is a content-addressable digest calculated from the
|
||||
* image's configuration (which includes the digests of layers used by
|
||||
* the image).
|
||||
*
|
||||
* Note that this digest differs from the `RepoDigests` below, which
|
||||
* holds digests of image manifests that reference the image.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
Id: string;
|
||||
|
||||
/**
|
||||
* User-defined key/value metadata.
|
||||
* Required: true
|
||||
*/
|
||||
Labels: { [key: string]: string };
|
||||
|
||||
/**
|
||||
* ID of the parent image.
|
||||
*
|
||||
* Depending on how the image was created, this field may be empty and
|
||||
* is only set for images that were built/created locally. This field
|
||||
* is empty if the image was pulled from an image registry.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
ParentId: string;
|
||||
|
||||
/**
|
||||
* List of content-addressable digests of locally available image manifests
|
||||
* that the image is referenced from. Multiple manifests can refer to the
|
||||
* same image.
|
||||
*
|
||||
* These digests are usually only available if the image was either pulled
|
||||
* from a registry, or if the image was pushed to a registry, which is when
|
||||
* the manifest is generated and its digest calculated.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
RepoDigests: string[];
|
||||
|
||||
/**
|
||||
* List of image names/tags in the local image cache that reference this
|
||||
* image.
|
||||
*
|
||||
* Multiple image tags can refer to the same image, and this list may be
|
||||
* empty if no tags reference the image, in which case the image is
|
||||
* "untagged", in which case it can still be referenced by its ID.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
RepoTags: string[];
|
||||
|
||||
/**
|
||||
* Total size of image layers that are shared between this image and other
|
||||
* images.
|
||||
*
|
||||
* This size is not calculated by default. `-1` indicates that the value
|
||||
* has not been set / calculated.
|
||||
*
|
||||
* Required: true
|
||||
*/
|
||||
SharedSize: number;
|
||||
Size: number;
|
||||
VirtualSize: number;
|
||||
}
|
||||
|
||||
type ImagesListResponse = ImageSummary[];
|
||||
|
||||
export function useImages<T = ImagesListResponse>(
|
||||
environmentId: EnvironmentId,
|
||||
{
|
||||
select,
|
||||
enabled,
|
||||
}: { select?(data: ImagesListResponse): T; enabled?: boolean } = {}
|
||||
) {
|
||||
return useQuery(
|
||||
queryKeys.list(environmentId),
|
||||
() => getImages(environmentId),
|
||||
{ select, enabled }
|
||||
);
|
||||
}
|
||||
|
||||
async function getImages(environmentId: EnvironmentId) {
|
||||
try {
|
||||
const { data } = await axios.get<ImagesListResponse>(
|
||||
buildUrl(environmentId, 'images', 'json')
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve images');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import { DockerImageResponse } from './types/response';
|
||||
|
||||
type Status = 'outdated' | 'updated' | 'inprocess' | string;
|
||||
|
||||
export enum ResourceType {
|
||||
CONTAINER,
|
||||
SERVICE,
|
||||
}
|
||||
|
||||
export interface ImageStatus {
|
||||
Status: Status;
|
||||
Message: string;
|
||||
}
|
||||
|
||||
export type ResourceID = string;
|
||||
|
||||
type DecoratedDockerImage = {
|
||||
Used: boolean;
|
||||
};
|
||||
|
||||
export type DockerImage = DecoratedDockerImage &
|
||||
Omit<DockerImageResponse, keyof DecoratedDockerImage>;
|
||||
@ -0,0 +1,12 @@
|
||||
export type DockerImageResponse = {
|
||||
Containers: number;
|
||||
Created: number;
|
||||
Id: string;
|
||||
Labels: { [key: string]: string };
|
||||
ParentId: string;
|
||||
RepoDigests: string[];
|
||||
RepoTags: string[];
|
||||
SharedSize: number;
|
||||
Size: number;
|
||||
VirtualSize: number;
|
||||
};
|
||||
@ -0,0 +1,101 @@
|
||||
import _ from 'lodash';
|
||||
|
||||
import { trimSHA } from '@/docker/filters/utils';
|
||||
import {
|
||||
Registry,
|
||||
RegistryTypes,
|
||||
} from '@/react/portainer/registries/types/registry';
|
||||
|
||||
import { DockerImage } from './types';
|
||||
import { DockerImageResponse } from './types/response';
|
||||
|
||||
export function parseViewModel(response: DockerImageResponse): DockerImage {
|
||||
return {
|
||||
...response,
|
||||
Used: false,
|
||||
RepoTags:
|
||||
response.RepoTags ??
|
||||
response.RepoDigests.map((digest) => `${trimSHA(digest)}:<none>`),
|
||||
};
|
||||
}
|
||||
|
||||
export function getUniqueTagListFromImages(
|
||||
images: Array<{ RepoTags?: string[] }>
|
||||
) {
|
||||
return _.uniq(
|
||||
images.flatMap((image) =>
|
||||
image.RepoTags
|
||||
? image.RepoTags.filter((item) => !item.includes('<none>'))
|
||||
: []
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export function imageContainsURL(image: string) {
|
||||
const split = image.split('/');
|
||||
const url = split[0];
|
||||
if (split.length > 1) {
|
||||
return url.includes('.') || url.includes(':');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* builds the complete uri for an image based on its registry
|
||||
* @param {PorImageRegistryModel} imageModel
|
||||
*/
|
||||
export function buildImageFullURI(image: string, registry?: Registry) {
|
||||
if (!registry) {
|
||||
return ensureTag(image);
|
||||
}
|
||||
|
||||
const imageName = buildImageFullURIWithRegistry(image, registry);
|
||||
|
||||
return ensureTag(imageName);
|
||||
|
||||
function ensureTag(image: string, defaultTag = 'latest') {
|
||||
return image.includes(':') ? image : `${image}:${defaultTag}`;
|
||||
}
|
||||
}
|
||||
|
||||
function buildImageFullURIWithRegistry(image: string, registry: Registry) {
|
||||
switch (registry.Type) {
|
||||
case RegistryTypes.GITHUB:
|
||||
return buildImageURIForGithub(image, registry);
|
||||
case RegistryTypes.GITLAB:
|
||||
return buildImageURIForGitLab(image, registry);
|
||||
case RegistryTypes.QUAY:
|
||||
return buildImageURIForQuay(image, registry);
|
||||
case RegistryTypes.ANONYMOUS:
|
||||
return image;
|
||||
default:
|
||||
return buildImageURIForOtherRegistry(image, registry);
|
||||
}
|
||||
|
||||
function buildImageURIForGithub(image: string, registry: Registry) {
|
||||
const imageName = image.split('/').pop();
|
||||
|
||||
const namespace = registry.Github.UseOrganisation
|
||||
? registry.Github.OrganisationName
|
||||
: registry.Username;
|
||||
return `${registry.URL}/${namespace}/${imageName}`;
|
||||
}
|
||||
|
||||
function buildImageURIForGitLab(image: string, registry: Registry) {
|
||||
const slash = image.startsWith(':') ? '' : '/';
|
||||
return `${registry.URL}/${registry.Gitlab.ProjectPath}${slash}${image}`;
|
||||
}
|
||||
|
||||
function buildImageURIForQuay(image: string, registry: Registry) {
|
||||
const name = registry.Quay.UseOrganisation
|
||||
? registry.Quay.OrganisationName
|
||||
: registry.Username;
|
||||
const url = registry.URL ? `${registry.URL}/` : '';
|
||||
return `${url}${name}/${image}`;
|
||||
}
|
||||
|
||||
function buildImageURIForOtherRegistry(image: string, registry: Registry) {
|
||||
const url = registry.URL ? `${registry.URL}/` : '';
|
||||
return url + image;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
export function buildUrl(
|
||||
environmentId: EnvironmentId,
|
||||
action: string,
|
||||
subAction = ''
|
||||
) {
|
||||
let url = `/endpoints/${environmentId}/docker/${action}`;
|
||||
|
||||
if (subAction) {
|
||||
url += `/${subAction}`;
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { buildUrl } from '../environment.service/utils';
|
||||
import { EnvironmentId } from '../types';
|
||||
import { Registry } from '../../registries/types/registry';
|
||||
import { useGenericRegistriesQuery } from '../../registries/queries/useRegistries';
|
||||
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useEnvironmentRegistries<T = Array<Registry>>(
|
||||
environmentId: EnvironmentId,
|
||||
queryOptions: { select?(data: Array<Registry>): T; enabled?: boolean } = {}
|
||||
) {
|
||||
return useGenericRegistriesQuery(
|
||||
queryKeys.registries(environmentId),
|
||||
() => getEnvironmentRegistries(environmentId),
|
||||
queryOptions
|
||||
);
|
||||
}
|
||||
|
||||
async function getEnvironmentRegistries(environmentId: EnvironmentId) {
|
||||
try {
|
||||
const { data } = await axios.get<Array<Registry>>(
|
||||
buildUrl(environmentId, 'registries')
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve registries');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { RegistryId } from '../types/registry';
|
||||
|
||||
export function buildUrl(registryId: RegistryId) {
|
||||
const base = '/registries';
|
||||
|
||||
if (registryId) {
|
||||
return `${base}/${registryId}`;
|
||||
}
|
||||
|
||||
return base;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import { RegistryId } from '../types/registry';
|
||||
|
||||
export const queryKeys = {
|
||||
base: () => ['registries'] as const,
|
||||
item: (registryId: RegistryId) => [...queryKeys.base(), registryId] as const,
|
||||
};
|
||||
@ -1,20 +1,82 @@
|
||||
import { useQuery } from 'react-query';
|
||||
import { QueryKey, useQuery } from 'react-query';
|
||||
|
||||
import { withError } from '@/react-tools/react-query';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { Registry } from '../types';
|
||||
import { Registry, RegistryTypes } from '../types/registry';
|
||||
import { usePublicSettings } from '../../settings/queries';
|
||||
|
||||
import { queryKeys } from './queryKeys';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useRegistries() {
|
||||
return useQuery(queryKeys.registries(), getRegistries);
|
||||
export function useRegistries<T = Registry[]>(
|
||||
queryOptions: {
|
||||
enabled?: boolean;
|
||||
select?: (registries: Registry[]) => T;
|
||||
onSuccess?: (data: T) => void;
|
||||
} = {}
|
||||
) {
|
||||
return useGenericRegistriesQuery(
|
||||
queryKeys.base(),
|
||||
getRegistries,
|
||||
queryOptions
|
||||
);
|
||||
}
|
||||
|
||||
async function getRegistries() {
|
||||
export function useGenericRegistriesQuery<T = Registry[]>(
|
||||
queryKey: QueryKey,
|
||||
fetcher: () => Promise<Array<Registry>>,
|
||||
{
|
||||
enabled,
|
||||
select,
|
||||
onSuccess,
|
||||
}: {
|
||||
enabled?: boolean;
|
||||
select?: (registries: Registry[]) => T;
|
||||
onSuccess?: (data: T) => void;
|
||||
} = {}
|
||||
) {
|
||||
const hideDefaultRegistryQuery = usePublicSettings({
|
||||
select: (settings) => settings.DefaultRegistry?.Hide,
|
||||
enabled,
|
||||
});
|
||||
|
||||
const hideDefault = !!hideDefaultRegistryQuery.data;
|
||||
|
||||
return useQuery(
|
||||
queryKey,
|
||||
async () => {
|
||||
const registries = await fetcher();
|
||||
|
||||
if (
|
||||
hideDefault ||
|
||||
registries.some((r) => r.Type === RegistryTypes.DOCKERHUB)
|
||||
) {
|
||||
return registries;
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
Name: 'Docker Hub (anonymous)',
|
||||
Id: 0,
|
||||
Type: RegistryTypes.DOCKERHUB,
|
||||
} as Registry,
|
||||
...registries,
|
||||
];
|
||||
},
|
||||
{
|
||||
select,
|
||||
...withError('Unable to retrieve registries'),
|
||||
enabled: hideDefaultRegistryQuery.isSuccess && enabled,
|
||||
onSuccess,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export async function getRegistries() {
|
||||
try {
|
||||
const response = await axios.get<Array<Registry>>('/registries');
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve registries');
|
||||
const { data } = await axios.get<Registry[]>('/registries');
|
||||
return data;
|
||||
} catch (e) {
|
||||
throw parseAxiosError(e as Error, 'Unable to retrieve registries');
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { Registry } from '../types/registry';
|
||||
|
||||
import { buildUrl } from './build-url';
|
||||
import { queryKeys } from './query-keys';
|
||||
|
||||
export function useRegistry(registryId?: Registry['Id']) {
|
||||
return useQuery(
|
||||
registryId ? queryKeys.item(registryId) : [],
|
||||
() => (registryId ? getRegistry(registryId) : undefined),
|
||||
{
|
||||
enabled: !!registryId,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function getRegistry(registryId: Registry['Id']) {
|
||||
try {
|
||||
const { data } = await axios.get<Registry>(buildUrl(registryId));
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve registry');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
import { Catalog, Repository } from './types/registry';
|
||||
|
||||
export async function listRegistryCatalogs(registryId: number) {
|
||||
try {
|
||||
const { data } = await axios.get<Catalog>(
|
||||
`/registries/${registryId}/v2/_catalog`
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Failed to get catalog of registry');
|
||||
}
|
||||
}
|
||||
|
||||
export async function listRegistryCatalogsRepository(
|
||||
registryId: number,
|
||||
repositoryName: string
|
||||
) {
|
||||
try {
|
||||
const { data } = await axios.get<Repository>(
|
||||
`/registries/${registryId}/v2/${repositoryName}/tags/list`,
|
||||
{}
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(
|
||||
err as Error,
|
||||
'Failed to get catelog repository of regisry'
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
import { TeamId } from '@/react/portainer/users/teams/types';
|
||||
import { UserId } from '@/portainer/users/types';
|
||||
|
||||
export type Catalog = {
|
||||
repositories: string[];
|
||||
};
|
||||
|
||||
export type Repository = {
|
||||
name: string;
|
||||
tags: string[];
|
||||
};
|
||||
|
||||
export enum RegistryTypes {
|
||||
ANONYMOUS,
|
||||
QUAY,
|
||||
AZURE,
|
||||
CUSTOM,
|
||||
GITLAB,
|
||||
PROGET,
|
||||
DOCKERHUB,
|
||||
ECR,
|
||||
GITHUB,
|
||||
}
|
||||
|
||||
export type RoleId = number;
|
||||
interface AccessPolicy {
|
||||
RoleId: RoleId;
|
||||
}
|
||||
|
||||
type UserAccessPolicies = Record<UserId, AccessPolicy>; // map[UserID]AccessPolicy
|
||||
type TeamAccessPolicies = Record<TeamId, AccessPolicy>;
|
||||
|
||||
export interface RegistryAccess {
|
||||
UserAccessPolicies: UserAccessPolicies;
|
||||
TeamAccessPolicies: TeamAccessPolicies;
|
||||
Namespaces: string[];
|
||||
}
|
||||
|
||||
export interface RegistryAccesses {
|
||||
[key: string]: RegistryAccess;
|
||||
}
|
||||
|
||||
export interface Gitlab {
|
||||
ProjectId: number;
|
||||
InstanceURL: string;
|
||||
ProjectPath: string;
|
||||
}
|
||||
|
||||
export interface Quay {
|
||||
UseOrganisation: boolean;
|
||||
OrganisationName: string;
|
||||
}
|
||||
|
||||
export interface Github {
|
||||
UseOrganisation: boolean;
|
||||
OrganisationName: string;
|
||||
}
|
||||
|
||||
export interface Ecr {
|
||||
Region: string;
|
||||
}
|
||||
|
||||
export type RegistryId = number;
|
||||
export interface Registry {
|
||||
Id: RegistryId;
|
||||
Type: number;
|
||||
Name: string;
|
||||
URL: string;
|
||||
BaseURL: string;
|
||||
Authentication: boolean;
|
||||
Username: string;
|
||||
Password: string;
|
||||
RegistryAccesses: RegistryAccesses;
|
||||
Checked: boolean;
|
||||
Gitlab: Gitlab;
|
||||
Quay: Quay;
|
||||
Github: Github;
|
||||
Ecr: Ecr;
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
import { Registry, RegistryId, RegistryTypes } from '../types/registry';
|
||||
|
||||
import { findBestMatchRegistry } from './findRegistryMatch';
|
||||
|
||||
function buildTestRegistry(
|
||||
id: RegistryId,
|
||||
type: RegistryTypes,
|
||||
name: string,
|
||||
url: string
|
||||
): Registry {
|
||||
return {
|
||||
Id: id,
|
||||
Type: type,
|
||||
URL: url,
|
||||
Name: name,
|
||||
Username: '',
|
||||
Authentication: false,
|
||||
Password: '',
|
||||
BaseURL: '',
|
||||
Checked: false,
|
||||
Ecr: { Region: '' },
|
||||
Github: { OrganisationName: '', UseOrganisation: false },
|
||||
Quay: { OrganisationName: '', UseOrganisation: false },
|
||||
Gitlab: { InstanceURL: '', ProjectId: 0, ProjectPath: '' },
|
||||
RegistryAccesses: {},
|
||||
};
|
||||
}
|
||||
|
||||
describe('findBestMatchRegistry', () => {
|
||||
const registries: Array<Registry> = [
|
||||
buildTestRegistry(
|
||||
1,
|
||||
RegistryTypes.DOCKERHUB,
|
||||
'DockerHub',
|
||||
'hub.docker.com'
|
||||
),
|
||||
buildTestRegistry(
|
||||
2,
|
||||
RegistryTypes.DOCKERHUB,
|
||||
'DockerHub2',
|
||||
'https://registry2.com'
|
||||
),
|
||||
buildTestRegistry(
|
||||
3,
|
||||
RegistryTypes.GITHUB,
|
||||
'GitHub',
|
||||
'https://registry3.com'
|
||||
),
|
||||
];
|
||||
|
||||
it('should return the registry with the given ID', () => {
|
||||
const registryId = 2;
|
||||
const result = findBestMatchRegistry('repository', registries, registryId);
|
||||
expect(result).toEqual(registries[1]);
|
||||
});
|
||||
|
||||
it('should return the DockerHub registry with matching username and URL', () => {
|
||||
const repository = 'user1/repository';
|
||||
const result = findBestMatchRegistry(repository, registries);
|
||||
expect(result).toEqual(registries[0]);
|
||||
});
|
||||
|
||||
it('should return the registry with a matching URL', () => {
|
||||
const repository = 'https://registry2.com/repository';
|
||||
const result = findBestMatchRegistry(repository, registries);
|
||||
expect(result).toEqual(registries[1]);
|
||||
});
|
||||
|
||||
it('should return the default DockerHub registry if no matches are found', () => {
|
||||
const repository = 'repository';
|
||||
const result = findBestMatchRegistry(repository, registries);
|
||||
expect(result).toEqual(registries[0]);
|
||||
});
|
||||
|
||||
it('when using something:latest, shouldn\'t choose "tes" docker', () => {
|
||||
const repository = 'something:latest';
|
||||
const result = findBestMatchRegistry(repository, [
|
||||
...registries,
|
||||
buildTestRegistry(4, RegistryTypes.CUSTOM, 'Test', 'tes'),
|
||||
]);
|
||||
expect(result).toEqual(registries[0]);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,40 @@
|
||||
import { Registry, RegistryId, RegistryTypes } from '../types/registry';
|
||||
|
||||
import { getURL } from './getUrl';
|
||||
|
||||
/**
|
||||
* findBestMatchRegistry finds out the best match registry for repository
|
||||
* matching precedence:
|
||||
* 1. registryId matched
|
||||
* 2. both domain name and username matched (for dockerhub only)
|
||||
* 3. only URL matched
|
||||
* 4. pick up the first dockerhub registry
|
||||
*/
|
||||
export function findBestMatchRegistry(
|
||||
repository: string,
|
||||
registries: Array<Registry>,
|
||||
registryId?: RegistryId
|
||||
) {
|
||||
if (registryId) {
|
||||
return registries.find((r) => r.Id === registryId);
|
||||
}
|
||||
|
||||
const matchDockerByUserAndUrl = registries.find(
|
||||
(r) =>
|
||||
r.Type === RegistryTypes.DOCKERHUB &&
|
||||
(repository.startsWith(`${r.Username}/`) ||
|
||||
repository.startsWith(`${getURL(r)}/${r.Username}/`))
|
||||
);
|
||||
|
||||
if (matchDockerByUserAndUrl) {
|
||||
return matchDockerByUserAndUrl;
|
||||
}
|
||||
|
||||
const matchByUrl = registries.find((r) => repository.startsWith(getURL(r)));
|
||||
|
||||
if (matchByUrl) {
|
||||
return matchByUrl;
|
||||
}
|
||||
|
||||
return registries.find((r) => r.Type === RegistryTypes.DOCKERHUB);
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import { imageContainsURL } from '@/react/docker/images/utils';
|
||||
|
||||
import { ImageConfigValues } from '@@/ImageConfigFieldset';
|
||||
|
||||
import { Registry, RegistryId } from '../types/registry';
|
||||
|
||||
import { findBestMatchRegistry } from './findRegistryMatch';
|
||||
import { getURL } from './getUrl';
|
||||
|
||||
export function getDefaultImageConfig(): ImageConfigValues {
|
||||
return {
|
||||
registryId: 0,
|
||||
image: '',
|
||||
useRegistry: true,
|
||||
};
|
||||
}
|
||||
|
||||
export function getImageConfig(
|
||||
repository: string,
|
||||
registries: Registry[],
|
||||
registryId?: RegistryId
|
||||
): ImageConfigValues {
|
||||
const registry = findBestMatchRegistry(repository, registries, registryId);
|
||||
if (registry) {
|
||||
const url = getURL(registry);
|
||||
let lastIndex = repository.lastIndexOf(url);
|
||||
lastIndex = lastIndex === -1 ? 0 : lastIndex + url.length;
|
||||
let image = repository.substring(lastIndex);
|
||||
if (image.startsWith('/')) {
|
||||
image = image.substring(1);
|
||||
}
|
||||
|
||||
return {
|
||||
useRegistry: true,
|
||||
image,
|
||||
registryId: registry.Id,
|
||||
};
|
||||
}
|
||||
return {
|
||||
image: repository,
|
||||
useRegistry: imageContainsURL(repository),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import { Registry, RegistryTypes } from '../types/registry';
|
||||
|
||||
export function getURL(registry: Registry) {
|
||||
switch (registry.Type) {
|
||||
case RegistryTypes.GITLAB:
|
||||
return `${registry.URL}/${registry.Gitlab.ProjectPath}`;
|
||||
|
||||
case RegistryTypes.QUAY:
|
||||
return getQuayUrl(registry);
|
||||
|
||||
case RegistryTypes.GITHUB:
|
||||
return getGithubUrl(registry);
|
||||
|
||||
default:
|
||||
return registry.URL;
|
||||
}
|
||||
|
||||
function getGithubUrl(registry: Registry) {
|
||||
const name = registry.Github.UseOrganisation
|
||||
? registry.Github.OrganisationName
|
||||
: registry.Username;
|
||||
return `${registry.URL}/${name}`;
|
||||
}
|
||||
|
||||
function getQuayUrl(registry: Registry) {
|
||||
const name = registry.Quay.UseOrganisation
|
||||
? registry.Quay.OrganisationName
|
||||
: registry.Username;
|
||||
return `${registry.URL}/${name}`;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue