mirror of
https://github.com/portainer/portainer.git
synced 2025-07-25 00:09:40 +02:00
refactor(ui/image-config): create react component [EE-5342] (#8856)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
bf51f1b6c9
commit
10014ae171
34 changed files with 1464 additions and 84 deletions
41
app/react/components/ImageConfigFieldset/AdvancedForm.tsx
Normal file
41
app/react/components/ImageConfigFieldset/AdvancedForm.tsx
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
52
app/react/components/ImageConfigFieldset/InputSearch.tsx
Normal file
52
app/react/components/ImageConfigFieldset/InputSearch.tsx
Normal file
|
|
@ -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();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
240
app/react/components/ImageConfigFieldset/RateLimits.tsx
Normal file
240
app/react/components/ImageConfigFieldset/RateLimits.tsx
Normal file
|
|
@ -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'
|
||||
);
|
||||
}
|
||||
}
|
||||
257
app/react/components/ImageConfigFieldset/SimpleForm.tsx
Normal file
257
app/react/components/ImageConfigFieldset/SimpleForm.tsx
Normal file
|
|
@ -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 '';
|
||||
}
|
||||
3
app/react/components/ImageConfigFieldset/index.ts
Normal file
3
app/react/components/ImageConfigFieldset/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { ImageConfigFieldset } from './ImageConfigFieldset';
|
||||
export { type Values as ImageConfigValues } from './types';
|
||||
export { validation as imageConfigValidation } from './validation';
|
||||
7
app/react/components/ImageConfigFieldset/types.ts
Normal file
7
app/react/components/ImageConfigFieldset/types.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { Registry } from '@/react/portainer/registries/types/registry';
|
||||
|
||||
export interface Values {
|
||||
useRegistry: boolean;
|
||||
registryId?: Registry['Id'];
|
||||
image: string;
|
||||
}
|
||||
12
app/react/components/ImageConfigFieldset/utils.ts
Normal file
12
app/react/components/ImageConfigFieldset/utils.ts
Normal file
|
|
@ -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
|
||||
);
|
||||
}
|
||||
11
app/react/components/ImageConfigFieldset/validation.ts
Normal file
11
app/react/components/ImageConfigFieldset/validation.ts
Normal file
|
|
@ -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),
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue