chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,42 @@
|
||||
import { FormikErrors } 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,
|
||||
onChangeImage,
|
||||
setFieldValue,
|
||||
}: {
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
onChangeImage?: (name: string) => void;
|
||||
setFieldValue: <T>(field: string, value: T) => void;
|
||||
}) {
|
||||
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) => {
|
||||
const { value } = e.target;
|
||||
setFieldValue('image', value);
|
||||
setTimeout(() => onChangeImage?.(value), 0);
|
||||
}}
|
||||
placeholder="e.g. registry:port/my-image:my-tag"
|
||||
required
|
||||
data-cy="image-config-advanced-input"
|
||||
/>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { FormikErrors } from 'formik';
|
||||
import { ComponentProps } from 'react';
|
||||
import { HttpResponse } from 'msw';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
|
||||
import { http, server } from '@/setup-tests/server';
|
||||
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
||||
import { createMockEnvironment } from '@/react-tools/test-mocks';
|
||||
|
||||
import { ImageConfigFieldset } from './ImageConfigFieldset';
|
||||
import { Values } from './types';
|
||||
|
||||
vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
|
||||
...(await importOriginal()),
|
||||
useCurrentStateAndParams: vi.fn(() => ({
|
||||
params: { endpointId: 1 },
|
||||
})),
|
||||
}));
|
||||
|
||||
it('should render SimpleForm when useRegistry is true', () => {
|
||||
const { getByText } = renderComponent({ values: { useRegistry: true } });
|
||||
|
||||
expect(getByText('Advanced mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render AdvancedForm when useRegistry is false', () => {
|
||||
const { getByText } = renderComponent({ values: { useRegistry: false } });
|
||||
|
||||
expect(getByText('Simple mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call setFieldValue with useRegistry set to false when "Advanced mode" button is clicked', () => {
|
||||
const setFieldValue = vi.fn();
|
||||
const { getByText } = renderComponent({
|
||||
values: { useRegistry: true },
|
||||
setFieldValue,
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('Advanced mode'));
|
||||
|
||||
expect(setFieldValue).toHaveBeenCalledWith('useRegistry', false);
|
||||
});
|
||||
|
||||
it('should call setFieldValue with useRegistry set to true when "Simple mode" button is clicked', () => {
|
||||
const setFieldValue = vi.fn();
|
||||
const { getByText } = renderComponent({
|
||||
values: { useRegistry: false },
|
||||
setFieldValue,
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('Simple mode'));
|
||||
|
||||
expect(setFieldValue).toHaveBeenCalledWith('useRegistry', true);
|
||||
});
|
||||
|
||||
function renderComponent({
|
||||
values = {
|
||||
useRegistry: true,
|
||||
registryId: 123,
|
||||
image: '',
|
||||
},
|
||||
errors = {},
|
||||
setFieldValue = vi.fn(),
|
||||
onChangeImage = vi.fn(),
|
||||
onRateLimit = vi.fn(),
|
||||
}: {
|
||||
values?: Partial<Values>;
|
||||
errors?: FormikErrors<Values>;
|
||||
setFieldValue?: ComponentProps<typeof ImageConfigFieldset>['setFieldValue'];
|
||||
onChangeImage?: ComponentProps<typeof ImageConfigFieldset>['onChangeImage'];
|
||||
onRateLimit?: ComponentProps<typeof ImageConfigFieldset>['onRateLimit'];
|
||||
} = {}) {
|
||||
server.use(
|
||||
http.get('/api/registries/:id', () => HttpResponse.json({})),
|
||||
http.get('/api/endpoints/:id', () =>
|
||||
HttpResponse.json(createMockEnvironment())
|
||||
)
|
||||
);
|
||||
|
||||
const Wrapped = withTestQueryProvider(ImageConfigFieldset);
|
||||
|
||||
return render(
|
||||
<Wrapped
|
||||
values={{
|
||||
useRegistry: true,
|
||||
registryId: 123,
|
||||
image: '',
|
||||
...values,
|
||||
}}
|
||||
errors={errors}
|
||||
setFieldValue={setFieldValue}
|
||||
onChangeImage={onChangeImage}
|
||||
onRateLimit={onRateLimit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Database, Globe } from 'lucide-react';
|
||||
import { FormikErrors } 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({
|
||||
onRateLimit,
|
||||
children,
|
||||
autoComplete,
|
||||
values,
|
||||
errors,
|
||||
onChangeImage,
|
||||
setFieldValue,
|
||||
}: PropsWithChildren<{
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
autoComplete?: boolean;
|
||||
onRateLimit?: (limited?: boolean) => void;
|
||||
onChangeImage?: (name: string) => void;
|
||||
setFieldValue: <T>(field: string, value: T) => void;
|
||||
}>) {
|
||||
const Component = values.useRegistry ? SimpleForm : AdvancedForm;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<Component
|
||||
autoComplete={autoComplete}
|
||||
values={values}
|
||||
errors={errors}
|
||||
onChangeImage={onChangeImage}
|
||||
setFieldValue={setFieldValue}
|
||||
/>
|
||||
|
||||
<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('useRegistry', false)}
|
||||
data-cy="image-config-advanced-button"
|
||||
>
|
||||
Advanced mode
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="small"
|
||||
color="link"
|
||||
icon={Database}
|
||||
className="!ml-0 p-0 hover:no-underline"
|
||||
onClick={() => setFieldValue('useRegistry', true)}
|
||||
data-cy="image-config-simple-button"
|
||||
>
|
||||
Simple mode
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
|
||||
{onRateLimit && values.useRegistry && (
|
||||
<RateLimits registryId={values.registryId} onRateLimit={onRateLimit} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { AutomationTestingProps } from '@/types';
|
||||
|
||||
import { AutocompleteSelect } from '@@/form-components/AutocompleteSelect';
|
||||
import { Option } from '@@/form-components/PortainerSelect';
|
||||
|
||||
export function InputSearch({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
placeholder,
|
||||
inputId,
|
||||
'data-cy': dataCy,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: Option<string>[];
|
||||
placeholder?: string;
|
||||
inputId: string;
|
||||
} & AutomationTestingProps) {
|
||||
const searchResults = useMemo(() => {
|
||||
if (!value) {
|
||||
return [];
|
||||
}
|
||||
return options.filter((option) =>
|
||||
option.value.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
}, [options, value]);
|
||||
|
||||
return (
|
||||
<AutocompleteSelect
|
||||
searchResults={searchResults}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
inputId={inputId}
|
||||
data-cy={dataCy}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios/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,
|
||||
onRateLimit,
|
||||
}: {
|
||||
registryId?: RegistryId;
|
||||
onRateLimit: (limited?: boolean) => void;
|
||||
}) {
|
||||
const registryQuery = useRegistry(registryId);
|
||||
|
||||
const registry = registryQuery.data;
|
||||
|
||||
const isDockerHubRegistry = getIsDockerHubRegistry(registry);
|
||||
|
||||
const environmentQuery = useCurrentEnvironment();
|
||||
|
||||
if (
|
||||
!environmentQuery.data ||
|
||||
registryQuery.isInitialLoading ||
|
||||
!isDockerHubRegistry
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<RateLimitsInner
|
||||
isAuthenticated={registry?.Authentication}
|
||||
registryId={registryId}
|
||||
onRateLimit={onRateLimit}
|
||||
environment={environmentQuery.data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function RateLimitsInner({
|
||||
isAuthenticated = false,
|
||||
registryId = 0,
|
||||
onRateLimit,
|
||||
environment,
|
||||
}: {
|
||||
isAuthenticated?: boolean;
|
||||
registryId?: RegistryId;
|
||||
onRateLimit: (limited?: boolean) => void;
|
||||
environment: Environment;
|
||||
}) {
|
||||
const pullRateLimits = useRateLimits(registryId, environment, onRateLimit);
|
||||
const { isPureAdmin } = 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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{isPureAdmin ? (
|
||||
<>
|
||||
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"
|
||||
data-cy="image-registry-rate-limits-registries-view-link"
|
||||
>
|
||||
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,
|
||||
onRateLimit: (limited?: boolean) => void
|
||||
) {
|
||||
const isValidForPull =
|
||||
isAgentEnvironment(environment.Type) || isLocalEnvironment(environment);
|
||||
|
||||
const query = useQuery(
|
||||
['dockerhub', environment.Id, registryId],
|
||||
() => getRateLimits(environment, registryId),
|
||||
{
|
||||
enabled: isValidForPull,
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isValidForPull || query.isError) {
|
||||
onRateLimit();
|
||||
}
|
||||
|
||||
if (query.data) {
|
||||
onRateLimit(query.data.limit > 0 && query.data.remaining === 0);
|
||||
}
|
||||
}, [isValidForPull, onRateLimit, query.data, query.isError]);
|
||||
|
||||
return isValidForPull ? query.data : undefined;
|
||||
}
|
||||
|
||||
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,269 @@
|
||||
import { FormikErrors } from 'formik';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { trimSHA, trimVersionTag } from '@/docker/filters/utils';
|
||||
import DockerIcon from '@/assets/ico/vendor/docker.svg?c';
|
||||
import { useImages } from '@/react/docker/proxy/queries/images/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,
|
||||
onChangeImage,
|
||||
setFieldValue,
|
||||
}: {
|
||||
autoComplete?: boolean;
|
||||
values: Values;
|
||||
errors?: FormikErrors<Values>;
|
||||
onChangeImage?: (name: string) => void;
|
||||
setFieldValue: <T>(field: string, value: T) => void;
|
||||
}) {
|
||||
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('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('image', value);
|
||||
onChangeImage?.(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=${trimVersionTag(
|
||||
trimSHA(values.image)
|
||||
)}`,
|
||||
target: '_blank',
|
||||
rel: 'noreferrer',
|
||||
}}
|
||||
icon={DockerIcon}
|
||||
data-cy="component-dockerHubSearchButton"
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
</InputGroup.ButtonWrapper>
|
||||
)}
|
||||
</InputGroup>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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,
|
||||
})),
|
||||
onSuccess: (options) => {
|
||||
if (options && options.length) {
|
||||
const idx = options.findIndex((v) => v.value === value);
|
||||
if (idx === -1) {
|
||||
onChange(options[0].value);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
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}
|
||||
data-cy="image-field-simple-input"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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,85 @@
|
||||
import {
|
||||
Registry,
|
||||
RegistryId,
|
||||
RegistryTypes,
|
||||
} from '../../portainer/registries/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,
|
||||
BaseURL: '',
|
||||
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,43 @@
|
||||
import {
|
||||
Registry,
|
||||
RegistryId,
|
||||
RegistryTypes,
|
||||
} from '../../portainer/registries/types/registry';
|
||||
import { getURL } from '../../portainer/registries/utils/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,45 @@
|
||||
import { imageContainsURL } from '@/react/docker/images/utils';
|
||||
import {
|
||||
Registry,
|
||||
RegistryId,
|
||||
} from '@/react/portainer/registries/types/registry';
|
||||
import { getURL } from '@/react/portainer/registries/utils/getUrl';
|
||||
|
||||
import { ImageConfigValues } from '@@/ImageConfigFieldset';
|
||||
|
||||
import { findBestMatchRegistry } from './findRegistryMatch';
|
||||
|
||||
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,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),
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user