github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(edge/templates): introduce edge specific settings [EE-6276] (#10609)

pull/10639/head
Chaim Lev-Ari 2023-11-15 14:43:18 +02:00 committed by GitHub
parent 68950fbb24
commit e43d076269
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 885 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/edge/__module.js
View File

@ -181,7 +181,7 @@ angular
$stateRegistryProvider.register({
name: 'edge.templates.custom.edit',
url: '/:templateId',
url: '/:id',
views: {
'content@': {

19
app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
View File

@ -1,4 +1,4 @@
import { EditorType } from '@/react/edge/edge-stacks/types';
import { DeploymentType, EditorType } from '@/react/edge/edge-stacks/types';
import { getValidEditorTypes } from '@/react/edge/edge-stacks/utils';
import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
import { confirmWebEditorDiscard } from '@@/modals/confirm';
@ -8,6 +8,8 @@ import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
import { getCustomTemplate } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplate';
import { notifyError } from '@/portainer/services/notifications';
import { getCustomTemplateFile } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplateFile';
import { toGitFormModel } from '@/react/portainer/gitops/types';
import { StackType } from '@/react/common/stacks/types';
export default class CreateEdgeStackViewController {
/* @ngInject */
@ -71,6 +73,21 @@ export default class CreateEdgeStackViewController {
onChangeTemplate(template) {
return this.$scope.$evalAsync(() => {
this.state.selectedTemplate = template;
this.formValues = {
...this.formValues,
DeploymentType: template.Type === StackType.Kubernetes ? DeploymentType.Kubernetes : DeploymentType.Compose,
...toGitFormModel(template.GitConfig),
...(template.EdgeSettings
? {
PrePullImage: template.EdgeSettings.PrePullImage || false,
RetryDeploy: template.EdgeSettings.RetryDeploy || false,
Registries: template.EdgeSettings.PrivateRegistryId ? [template.EdgeSettings.PrivateRegistryId] : [],
SupportRelativePath: template.EdgeSettings.RelativePathSettings.SupportRelativePath || false,
FilesystemPath: template.EdgeSettings.RelativePathSettings.FilesystemPath || '',
}
: {}),
};
});
}

12
app/react-tools/apply-set-state-action.ts Normal file
View File

@ -0,0 +1,12 @@
import { SetStateAction } from 'react';
export function applySetStateAction<T>(applier: SetStateAction<T>, values?: T) {
if (isFunction(applier)) {
return values ? applier(values) : undefined;
}
return applier;
function isFunction(value: unknown): value is (prevState: T) => T {
return typeof value === 'function';
}
}

6
app/react/components/CodeEditor.module.css
View File

@ -117,3 +117,9 @@
.root :global(.cm-content[contenteditable='true']) {
min-height: 100%;
}
.root :global(.cm-content[aria-readonly='true']) {
@apply bg-gray-3;
@apply th-dark:bg-gray-iron-10;
@apply th-highcontrast:bg-black;
}

36
app/react/components/RadioGroup/RadioGroup.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Option } from '@@/form-components/PortainerSelect';
interface Props<T extends string | number> {
options: Array<Option<T>> | ReadonlyArray<Option<T>>;
selectedOption: T;
name: string;
onOptionChange: (value: T) => void;
}
export function RadioGroup<T extends string | number = string>({
options,
selectedOption,
name,
onOptionChange,
}: Props<T>) {
return (
<div>
{options.map((option) => (
<span
key={option.value}
className="col-sm-3 col-lg-2 control-label !p-0 text-left"
>
<input
type="radio"
name={name}
value={option.value}
checked={selectedOption === option.value}
onChange={() => onOptionChange(option.value)}
style={{ margin: '0 4px 0 0' }}
/>
{option.label}
</span>
))}
</div>
);
}

6
app/react/edge/edge-groups/types.ts
View File

@ -1,4 +1,7 @@
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
EnvironmentId,
EnvironmentType,
} from '@/react/portainer/environments/types';
import { TagId } from '@/portainer/tags/types';
export interface EdgeGroup {
@ -8,4 +11,5 @@ export interface EdgeGroup {
TagIds: TagId[];
Endpoints: EnvironmentId[];
PartialMatch: boolean;
EndpointTypes: EnvironmentType[];
}

53
app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx
View File

@ -20,6 +20,9 @@ import {
envVarValidation,
} from '@@/form-components/EnvironmentVariablesFieldset';
import { PrePullToggle } from '../../components/PrePullToggle';
import { RetryDeployToggle } from '../../components/RetryDeployToggle';
import { PrivateRegistryFieldsetWrapper } from './PrivateRegistryFieldsetWrapper';
import { FormValues } from './types';
import { ComposeForm } from './ComposeForm';
@ -175,46 +178,30 @@ function InnerForm({
<PrivateRegistryFieldsetWrapper
value={values.privateRegistryId}
onChange={(value) => setFieldValue('privateRegistryId', value)}
isValid={isValid}
values={values}
stackName={edgeStack.Name}
values={{
fileContent: values.content,
}}
onFieldError={(error) => setFieldError('privateRegistryId', error)}
error={errors.privateRegistryId}
/>
<EnvironmentVariablesPanel
onChange={(value) => setFieldValue('envVars', value)}
values={values.envVars}
errors={errors.envVars}
/>
{values.deploymentType === DeploymentType.Compose && (
<>
<div className="form-group">
<div className="col-sm-12">
<SwitchField
checked={values.prePullImage}
name="prePullImage"
label="Pre-pull images"
tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
labelClass="col-sm-3 col-lg-2"
onChange={(value) => setFieldValue('prePullImage', value)}
/>
</div>
</div>
<EnvironmentVariablesPanel
onChange={(value) => setFieldValue('envVars', value)}
values={values.envVars}
errors={errors.envVars}
/>
<div className="form-group">
<div className="col-sm-12">
<SwitchField
checked={values.retryDeploy}
name="retryDeploy"
label="Retry deployment"
tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
labelClass="col-sm-3 col-lg-2"
onChange={(value) => setFieldValue('retryDeploy', value)}
/>
</div>
</div>
<PrePullToggle
onChange={(value) => setFieldValue('prePullImage', value)}
value={values.prePullImage}
/>
<RetryDeployToggle
onChange={(value) => setFieldValue('retryDeploy', value)}
value={values.retryDeploy}
/>
</>
)}
</>

50
app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper.tsx
View File

@ -2,29 +2,32 @@ import _ from 'lodash';
import { notifyError } from '@/portainer/services/notifications';
import { PrivateRegistryFieldset } from '@/react/edge/edge-stacks/components/PrivateRegistryFieldset';
import { useCreateEdgeStackFromFileContent } from '@/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent';
import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
import { useParseRegistries } from '../../queries/useParseRegistries';
import { FormValues } from './types';
export function PrivateRegistryFieldsetWrapper({
value,
isValid,
error,
onChange,
values,
stackName,
onFieldError,
values,
isGit,
}: {
value: FormValues['privateRegistryId'];
isValid: boolean;
error?: string;
onChange: (value?: number) => void;
values: FormValues;
stackName: string;
values: {
fileContent?: string;
file?: File;
};
onFieldError: (message: string) => void;
isGit?: boolean;
}) {
const dryRunMutation = useCreateEdgeStackFromFileContent();
const dryRunMutation = useParseRegistries();
const registriesQuery = useRegistries();
@ -35,34 +38,37 @@ export function PrivateRegistryFieldsetWrapper({
return (
<PrivateRegistryFieldset
value={value}
formInvalid={!isValid}
formInvalid={!values.file && !values.fileContent && !isGit}
errorMessage={error}
registries={registriesQuery.data}
onChange={() => matchRegistry()}
onChange={() => matchRegistry(values)}
onSelect={(value) => onChange(value)}
isActive={!!value}
clearRegistries={() => onChange(undefined)}
method={isGit ? 'repository' : 'file'}
/>
);
async function matchRegistry() {
try {
const response = await dryRunMutation.mutateAsync({
name: `${stackName}-dryrun`,
stackFileContent: values.content,
edgeGroups: values.edgeGroups,
deploymentType: values.deploymentType,
dryRun: true,
});
async function matchRegistry(values: { fileContent?: string; file?: File }) {
if (isGit) {
return;
}
if (response.Registries.length === 0) {
try {
if (!isBE) {
return;
}
const registries = await dryRunMutation.mutateAsync(values);
if (registries.length === 0) {
onChange(undefined);
return;
}
const validRegistry = onlyOne(response.Registries);
const validRegistry = onlyOne(registries);
if (validRegistry) {
onChange(response.Registries[0]);
onChange(registries[0]);
} else {
onChange(undefined);
onFieldError(

24
app/react/edge/edge-stacks/components/PrePullToggle.tsx Normal file
View File

@ -0,0 +1,24 @@
import { SwitchField } from '@@/form-components/SwitchField';
export function PrePullToggle({
value,
onChange,
}: {
value: boolean;
onChange: (value: boolean) => void;
}) {
return (
<div className="form-group">
<div className="col-sm-12">
<SwitchField
checked={value}
name="prePullImage"
label="Pre-pull images"
tooltip="When enabled, redeployment will be executed when image(s) is pulled successfully"
labelClass="col-sm-3 col-lg-2"
onChange={onChange}
/>
</div>
</div>
);
}

24
app/react/edge/edge-stacks/components/RetryDeployToggle.tsx Normal file
View File

@ -0,0 +1,24 @@
import { SwitchField } from '@@/form-components/SwitchField';
export function RetryDeployToggle({
value,
onChange,
}: {
value: boolean;
onChange: (value: boolean) => void;
}) {
return (
<div className="form-group">
<div className="col-sm-12">
<SwitchField
checked={value}
name="retryDeploy"
label="Retry deployment"
tooltip="When enabled, this will allow the edge agent to retry deployment if failed to deploy initially"
labelClass="col-sm-3 col-lg-2"
onChange={onChange}
/>
</div>
</div>
);
}

39
app/react/edge/edge-stacks/components/StaggerFieldset.types.ts Normal file
View File

@ -0,0 +1,39 @@
export type StaggerConfig = {
StaggerOption: StaggerOption;
StaggerParallelOption?: StaggerParallelOption;
DeviceNumber?: number;
DeviceNumberStartFrom?: number;
DeviceNumberIncrementBy?: number;
Timeout?: string;
UpdateDelay?: string;
UpdateFailureAction?: UpdateFailureAction;
};
export enum StaggerOption {
AllAtOnce = 1,
Parallel,
}
export enum StaggerParallelOption {
Fixed = 1,
Incremental,
}
export enum UpdateFailureAction {
Continue = 1,
Pause,
Rollback,
}
export function getDefaultStaggerConfig(): StaggerConfig {
return {
StaggerOption: StaggerOption.AllAtOnce,
StaggerParallelOption: StaggerParallelOption.Fixed,
DeviceNumber: 1,
DeviceNumberStartFrom: 0,
DeviceNumberIncrementBy: 2,
Timeout: '',
UpdateDelay: '',
UpdateFailureAction: UpdateFailureAction.Continue,
};
}

47
app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFile.ts Normal file
View File

@ -0,0 +1,47 @@
import axios, {
json2formData,
parseAxiosError,
} from '@/portainer/services/axios';
import { RegistryId } from '@/react/portainer/registries/types';
import { Pair } from '@/react/portainer/settings/types';
import { EdgeGroup } from '@/react/edge/edge-groups/types';
import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
import { buildUrl } from '../buildUrl';
/**
* Payload to create an EdgeStack from a git repository
*/
export type FileUploadPayload = {
Name: string;
file: File;
EdgeGroups: Array<EdgeGroup['Id']>;
DeploymentType: DeploymentType;
Registries?: Array<RegistryId>;
/** * Uses the manifest's namespaces instead of the default one */
UseManifestNamespaces?: boolean;
PrePullImage?: boolean;
RetryDeploy?: boolean;
/** List of environment variables */
EnvVars?: Array<Pair>;
/** Configuration for stagger updates */
StaggerConfig?: StaggerConfig;
Webhook?: string;
};
export async function createStackFromFile(payload: FileUploadPayload) {
try {
const { data } = await axios.post<EdgeStack>(
buildUrl(undefined, 'create/file'),
json2formData(payload),
{
headers: {
'Content-Type': 'multipart/form-data',
},
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

47
app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFileContent.ts Normal file
View File

@ -0,0 +1,47 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { RegistryId } from '@/react/portainer/registries/types';
import { Pair } from '@/react/portainer/settings/types';
import { EdgeGroup } from '@/react/edge/edge-groups/types';
import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
import { buildUrl } from '../buildUrl';
/**
* Payload for creating an EdgeStack from a string
*/
export interface FileContentPayload {
/** Name of the stack */
name: string;
/** Content of the Stack file */
stackFileContent: string;
/** List of identifiers of EdgeGroups */
edgeGroups: Array<EdgeGroup['Id']>;
/** Deployment type to deploy this stack */
deploymentType: DeploymentType;
/** List of Registries to use for this stack */
registries?: Array<RegistryId>;
/** Uses the manifest's namespaces instead of the default one */
useManifestNamespaces?: boolean;
/** Pre Pull image */
prePullImage?: boolean;
/** Retry deploy */
retryDeploy?: boolean;
/** Optional webhook configuration */
webhook?: string;
/** List of environment variables */
envVars?: Array<Pair>;
/** Configuration for stagger updates */
staggerConfig?: StaggerConfig;
}
export async function createStackFromFileContent(payload: FileContentPayload) {
try {
const { data } = await axios.post<EdgeStack>(
buildUrl(undefined, 'create/string'),
payload
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

74
app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromGit.ts Normal file
View File

@ -0,0 +1,74 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { RegistryId } from '@/react/portainer/registries/types';
import { Pair } from '@/react/portainer/settings/types';
import { EdgeGroup } from '@/react/edge/edge-groups/types';
import { AutoUpdateModel } from '@/react/portainer/gitops/types';
import { DeploymentType, EdgeStack, StaggerConfig } from '../../types';
import { buildUrl } from '../buildUrl';
/**
* Payload to create an EdgeStack from a git repository
*/
export type GitRepositoryPayload = {
/** Name of the stack */
name: string;
/** URL of a Git repository hosting the Stack file */
repositoryUrl: string;
/** Reference name of a Git repository hosting the Stack file */
repositoryReferenceName?: string;
/** Use basic authentication to clone the Git repository */
repositoryAuthentication?: boolean;
/** Username used in basic authentication. Required when RepositoryAuthentication is true. */
repositoryUsername?: string;
/** Password used in basic authentication. Required when RepositoryAuthentication is true. */
repositoryPassword?: string;
/** GitCredentialID used to identify the binded git credential */
repositoryGitCredentialId?: number;
/** Path to the Stack file inside the Git repository */
filePathInRepository?: string;
/** List of identifiers of EdgeGroups */
edgeGroups: Array<EdgeGroup['Id']>;
/** Deployment type to deploy this stack. Valid values are: 0 - 'compose', 1 - 'kubernetes', 2 - 'nomad'. Compose is enabled only for docker environments, kubernetes is enabled only for kubernetes environments, nomad is enabled only for nomad environments */
deploymentType: DeploymentType;
/** List of Registries to use for this stack */
registries?: Array<RegistryId>;
/** Uses the manifest's namespaces instead of the default one */
useManifestNamespaces?: boolean;
/** Pre Pull image */
prePullImage?: boolean;
/** Retry deploy */
retryDeploy?: boolean;
/** TLSSkipVerify skips SSL verification when cloning the Git repository */
tlsSkipVerify?: boolean;
/** Optional GitOps update configuration */
autoUpdate?: AutoUpdateModel;
/** Whether the stack supports relative path volume */
supportRelativePath?: boolean;
/** Local filesystem path */
filesystemPath?: string;
/** Whether the edge stack supports per device configs */
supportPerDeviceConfigs?: boolean;
/** Per device configs match type */
perDeviceConfigsMatchType?: string;
/** Per device configs group match type */
perDeviceConfigsGroupMatchType?: string;
/** Per device configs path */
perDeviceConfigsPath?: string;
/** List of environment variables */
envVars?: Array<Pair>;
/** Configuration for stagger updates */
staggerConfig?: StaggerConfig;
};
export async function createStackFromGit(payload: GitRepositoryPayload) {
try {
const { data } = await axios.post<EdgeStack>(
buildUrl(undefined, 'create/repository'),
payload
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

135
app/react/edge/edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack.ts Normal file
View File

@ -0,0 +1,135 @@
import { useMutation } from 'react-query';
import { EdgeGroup } from '@/react/edge/edge-groups/types';
import { RegistryId } from '@/react/portainer/registries/types';
import { Pair } from '@/react/portainer/settings/types';
import {
GitFormModel,
RelativePathModel,
} from '@/react/portainer/gitops/types';
import { DeploymentType, StaggerConfig } from '../../types';
import { createStackFromFile } from './createStackFromFile';
import { createStackFromFileContent } from './createStackFromFileContent';
import { createStackFromGit } from './createStackFromGit';
export function useCreateEdgeStack() {
return useMutation(createEdgeStack);
}
type BasePayload = {
/** Name of the stack */
name: string;
/** Content of the Stack file */
/** List of identifiers of EdgeGroups */
edgeGroups: Array<EdgeGroup['Id']>;
/** Deployment type to deploy this stack */
deploymentType: DeploymentType;
/** List of Registries to use for this stack */
registries?: Array<RegistryId>;
/** Uses the manifest's namespaces instead of the default one */
useManifestNamespaces?: boolean;
/** Pre Pull image */
prePullImage?: boolean;
/** Retry deploy */
retryDeploy?: boolean;
/** List of environment variables */
envVars?: Array<Pair>;
/** Configuration for stagger updates */
staggerConfig?: StaggerConfig;
};
/**
* Payload for creating an EdgeStack from a string
*/
export type CreateEdgeStackPayload =
| {
method: 'file';
payload: BasePayload & {
/** File to upload */
file: File;
/** Optional webhook configuration */
webhook?: string;
};
}
| {
method: 'string';
payload: BasePayload & {
/** Content of the Stack file */
fileContent: string;
/** Optional webhook configuration */
webhook?: string;
};
}
| {
method: 'git';
payload: BasePayload & {
git: GitFormModel;
relativePathSettings?: RelativePathModel;
};
};
function createEdgeStack({ method, payload }: CreateEdgeStackPayload) {
switch (method) {
case 'file':
return createStackFromFile({
DeploymentType: payload.deploymentType,
EdgeGroups: payload.edgeGroups,
Name: payload.name,
file: payload.file,
EnvVars: payload.envVars,
PrePullImage: payload.prePullImage,
Registries: payload.registries,
RetryDeploy: payload.retryDeploy,
StaggerConfig: payload.staggerConfig,
UseManifestNamespaces: payload.useManifestNamespaces,
Webhook: payload.webhook,
});
case 'git':
return createStackFromGit({
deploymentType: payload.deploymentType,
edgeGroups: payload.edgeGroups,
name: payload.name,
envVars: payload.envVars,
prePullImage: payload.prePullImage,
registries: payload.registries,
retryDeploy: payload.retryDeploy,
staggerConfig: payload.staggerConfig,
useManifestNamespaces: payload.useManifestNamespaces,
repositoryUrl: payload.git.RepositoryURL,
repositoryReferenceName: payload.git.RepositoryReferenceName,
filePathInRepository: payload.git.ComposeFilePathInRepository,
repositoryAuthentication: payload.git.RepositoryAuthentication,
repositoryUsername: payload.git.RepositoryUsername,
repositoryPassword: payload.git.RepositoryPassword,
repositoryGitCredentialId: payload.git.RepositoryGitCredentialID,
filesystemPath: payload.relativePathSettings?.FilesystemPath,
supportRelativePath: payload.relativePathSettings?.SupportRelativePath,
perDeviceConfigsGroupMatchType:
payload.relativePathSettings?.PerDeviceConfigsGroupMatchType,
perDeviceConfigsMatchType:
payload.relativePathSettings?.PerDeviceConfigsMatchType,
perDeviceConfigsPath:
payload.relativePathSettings?.PerDeviceConfigsPath,
tlsSkipVerify: payload.git.TLSSkipVerify,
autoUpdate: payload.git.AutoUpdate,
});
case 'string':
return createStackFromFileContent({
deploymentType: payload.deploymentType,
edgeGroups: payload.edgeGroups,
name: payload.name,
envVars: payload.envVars,
prePullImage: payload.prePullImage,
registries: payload.registries,
retryDeploy: payload.retryDeploy,
staggerConfig: payload.staggerConfig,
useManifestNamespaces: payload.useManifestNamespaces,
stackFileContent: payload.fileContent,
webhook: payload.webhook,
});
default:
throw new Error('Invalid method');
}
}

49
app/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent.ts
View File

@ -1,49 +0,0 @@
import { useMutation, useQueryClient } from 'react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { withError, withInvalidate } from '@/react-tools/react-query';
import { RegistryId } from '@/react/portainer/registries/types';
import { EdgeGroup } from '../../edge-groups/types';
import { DeploymentType, EdgeStack } from '../types';
import { buildUrl } from './buildUrl';
import { queryKeys } from './query-keys';
export function useCreateEdgeStackFromFileContent() {
const queryClient = useQueryClient();
return useMutation(createEdgeStackFromFileContent, {
...withError('Failed creating Edge stack'),
...withInvalidate(queryClient, [queryKeys.base()]),
});
}
interface FileContentPayload {
name: string;
stackFileContent: string;
edgeGroups: EdgeGroup['Id'][];
deploymentType: DeploymentType;
registries?: RegistryId[];
useManifestNamespaces?: boolean;
prePullImage?: boolean;
dryRun?: boolean;
}
export async function createEdgeStackFromFileContent({
dryRun,
...payload
}: FileContentPayload) {
try {
const { data } = await axios.post<EdgeStack>(
buildUrl(undefined, 'create/string'),
payload,
{
params: { dryrun: dryRun ? 'true' : 'false' },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

142
app/react/edge/edge-stacks/queries/useCreateEdgeStackFromGit.ts
View File

@ -1,142 +0,0 @@
import { useMutation, useQueryClient } from 'react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { withError, withInvalidate } from '@/react-tools/react-query';
import { AutoUpdateModel } from '@/react/portainer/gitops/types';
import { Pair } from '@/react/portainer/settings/types';
import { RegistryId } from '@/react/portainer/registries/types';
import { GitCredential } from '@/react/portainer/account/git-credentials/types';
import { DeploymentType, EdgeStack } from '../types';
import { EdgeGroup } from '../../edge-groups/types';
import { buildUrl } from './buildUrl';
import { queryKeys } from './query-keys';
export function useCreateEdgeStackFromGit() {
const queryClient = useQueryClient();
return useMutation(createEdgeStackFromGit, {
...withError('Failed creating Edge stack'),
...withInvalidate(queryClient, [queryKeys.base()]),
});
}
/**
* Represents the payload for creating an edge stack from a Git repository.
*/
interface GitPayload {
/** Name of the stack. */
name: string;
/** URL of a Git repository hosting the Stack file. */
repositoryURL: string;
/** Reference name of a Git repository hosting the Stack file. */
repositoryReferenceName?: string;
/** Use basic authentication to clone the Git repository. */
repositoryAuthentication?: boolean;
/** Username used in basic authentication. Required when RepositoryAuthentication is true. */
repositoryUsername?: string;
/** Password used in basic authentication. Required when RepositoryAuthentication is true. */
repositoryPassword?: string;
/** GitCredentialID used to identify the bound git credential. */
repositoryGitCredentialID?: GitCredential['id'];
/** Path to the Stack file inside the Git repository. */
filePathInRepository?: string;
/** List of identifiers of EdgeGroups. */
edgeGroups: Array<EdgeGroup['Id']>;
/** Deployment type to deploy this stack. */
deploymentType: DeploymentType;
/** List of Registries to use for this stack. */
registries?: RegistryId[];
/** Uses the manifest's namespaces instead of the default one. */
useManifestNamespaces?: boolean;
/** Pre-pull image. */
prePullImage?: boolean;
/** Retry deploy. */
retryDeploy?: boolean;
/** TLSSkipVerify skips SSL verification when cloning the Git repository. */
tLSSkipVerify?: boolean;
/** Optional GitOps update configuration. */
autoUpdate?: AutoUpdateModel;
/** Whether the stack supports relative path volume. */
supportRelativePath?: boolean;
/** Local filesystem path. */
filesystemPath?: string;
/** Whether the edge stack supports per device configs. */
supportPerDeviceConfigs?: boolean;
/** Per device configs match type. */
perDeviceConfigsMatchType?: 'file' | 'dir';
/** Per device configs group match type. */
perDeviceConfigsGroupMatchType?: 'file' | 'dir';
/** Per device configs path. */
perDeviceConfigsPath?: string;
/** List of environment variables. */
envVars?: Pair[];
/** Configuration for stagger updates. */
staggerConfig?: EdgeStaggerConfig;
}
/**
* Represents the staggered updates configuration.
*/
interface EdgeStaggerConfig {
/** Stagger option for updates. */
staggerOption: EdgeStaggerOption;
/** Stagger parallel option for updates. */
staggerParallelOption: EdgeStaggerParallelOption;
/** Device number for updates. */
deviceNumber: number;
/** Starting device number for updates. */
deviceNumberStartFrom: number;
/** Increment value for device numbers during updates. */
deviceNumberIncrementBy: number;
/** Timeout for updates (in minutes). */
timeout: string;
/** Update delay (in minutes). */
updateDelay: string;
/** Action to take in case of update failure. */
updateFailureAction: EdgeUpdateFailureAction;
}
/** EdgeStaggerOption represents an Edge stack stagger option */
enum EdgeStaggerOption {
/** AllAtOnce represents a staggered deployment where all nodes are updated at once */
AllAtOnce = 1,
/** OneByOne represents a staggered deployment where nodes are updated with parallel setting */
Parallel,
}
/** EdgeStaggerParallelOption represents an Edge stack stagger parallel option */
enum EdgeStaggerParallelOption {
/** Fixed represents a staggered deployment where nodes are updated with a fixed number of nodes in parallel */
Fixed = 1,
/** Incremental represents a staggered deployment where nodes are updated with an incremental number of nodes in parallel */
Incremental,
}
/** EdgeUpdateFailureAction represents an Edge stack update failure action */
enum EdgeUpdateFailureAction {
/** Continue represents that stagger update will continue regardless of whether the endpoint update status */
Continue = 1,
/** Pause represents that stagger update will pause when the endpoint update status is failed */
Pause,
/** Rollback represents that stagger update will rollback as long as one endpoint update status is failed */
Rollback,
}
export async function createEdgeStackFromGit({
dryRun,
...payload
}: GitPayload & { dryRun?: boolean }) {
try {
const { data } = await axios.post<EdgeStack>(
buildUrl(undefined, 'create/repository'),
payload,
{
params: { dryrun: dryRun ? 'true' : 'false' },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

44
app/react/edge/edge-stacks/queries/useParseRegistries.ts Normal file
View File

@ -0,0 +1,44 @@
import { useMutation } from 'react-query';
import { withError } from '@/react-tools/react-query';
import { RegistryId } from '@/react/portainer/registries/types';
import axios, {
json2formData,
parseAxiosError,
} from '@/portainer/services/axios';
import { buildUrl } from './buildUrl';
export function useParseRegistries() {
return useMutation(parseRegistries, {
...withError('Failed parsing registries'),
});
}
export async function parseRegistries(props: {
file?: File;
fileContent?: string;
}) {
if (!props.file && !props.fileContent) {
throw new Error('File or fileContent must be provided');
}
let currentFile = props.file;
if (!props.file && props.fileContent) {
currentFile = new File([props.fileContent], 'registries.yml');
}
try {
const { data } = await axios.post<Array<RegistryId>>(
buildUrl(undefined, 'parse_registries'),
json2formData({ file: currentFile }),
{
headers: {
'Content-Type': 'multipart/form-data',
},
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

14
app/react/edge/edge-stacks/types.ts
View File

@ -1,6 +1,7 @@
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
AutoUpdateResponse,
RelativePathModel,
RepoConfigResponse,
} from '@/react/portainer/gitops/types';
import { RegistryId } from '@/react/portainer/registries/types';
@ -9,6 +10,13 @@ import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
import { EdgeGroup } from '../edge-groups/types';
export {
type StaggerConfig,
StaggerOption,
StaggerParallelOption,
UpdateFailureAction,
} from './components/StaggerFieldset.types';
export enum StatusType {
/** Pending represents a pending edge stack */
Pending,
@ -62,7 +70,7 @@ export enum DeploymentType {
Kubernetes,
}
export type EdgeStack = {
export type EdgeStack = RelativePathModel & {
Id: number;
Name: string;
Status: { [key: EnvironmentId]: EdgeStackStatus };
@ -89,10 +97,6 @@ export type EdgeStack = {
EnvVars?: EnvVar[];
SupportRelativePath: boolean;
FilesystemPath?: string;
SupportPerDeviceConfigs?: boolean;
PerDeviceConfigsPath?: string;
PerDeviceConfigsMatchType?: string;
PerDeviceConfigsGroupMatchType?: string;
};
export enum EditorType {

28
app/react/edge/templates/AppTemplatesView/DeployForm.tsx
View File

@ -23,7 +23,7 @@ import { EdgeGroup } from '../../edge-groups/types';
import { DeploymentType, EdgeStack } from '../../edge-stacks/types';
import { useEdgeStacks } from '../../edge-stacks/queries/useEdgeStacks';
import { useEdgeGroups } from '../../edge-groups/queries/useEdgeGroups';
import { useCreateEdgeStackFromGit } from '../../edge-stacks/queries/useCreateEdgeStackFromGit';
import { useCreateEdgeStack } from '../../edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack';
import { EnvVarsFieldset } from './EnvVarsFieldset';
@ -70,7 +70,7 @@ function DeployForm({
unselect: () => void;
}) {
const router = useRouter();
const mutation = useCreateEdgeStackFromGit();
const mutation = useCreateEdgeStack();
const edgeStacksQuery = useEdgeStacks();
const edgeGroupsQuery = useEdgeGroups({
select: (groups) =>
@ -139,15 +139,21 @@ function DeployForm({
function handleSubmit(values: FormValues) {
return mutation.mutate(
{
name: values.name,
edgeGroups: values.edgeGroupIds,
deploymentType: DeploymentType.Compose,
repositoryURL: template.Repository.url,
filePathInRepository: template.Repository.stackfile,
envVars: Object.entries(values.envVars).map(([name, value]) => ({
name,
value,
})),
method: 'git',
payload: {
name: values.name,
edgeGroups: values.edgeGroupIds,
deploymentType: DeploymentType.Compose,
envVars: Object.entries(values.envVars).map(([name, value]) => ({
name,
value,
})),
git: {
RepositoryURL: template.Repository.url,
ComposeFilePathInRepository: template.Repository.stackfile,
},
},
},
{
onSuccess() {

2
app/react/edge/templates/custom-templates/CreateView/CreateTemplateForm.tsx
View File

@ -6,6 +6,7 @@ import { notifySuccess } from '@/portainer/services/notifications';
import { useCreateTemplateMutation } from '@/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation';
import { Platform } from '@/react/portainer/templates/types';
import { useFetchTemplateFile } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
import { getDefaultEdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import { editor } from '@@/BoxSelector/common-options/build-methods';
@ -47,6 +48,7 @@ export function CreateTemplateForm() {
RepositoryURLValid: true,
TLSSkipVerify: false,
},
EdgeSettings: getDefaultEdgeTemplateSettings(),
};
return (

81
app/react/edge/templates/custom-templates/CreateView/EdgeSettingsFieldset.tsx Normal file
View File

@ -0,0 +1,81 @@
import { FormikErrors } from 'formik';
import { SetStateAction } from 'react';
import { RelativePathFieldset } from '@/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset';
import { PrivateRegistryFieldsetWrapper } from '@/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper';
import { PrePullToggle } from '@/react/edge/edge-stacks/components/PrePullToggle';
import { RetryDeployToggle } from '@/react/edge/edge-stacks/components/RetryDeployToggle';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import { GitFormModel } from '@/react/portainer/gitops/types';
import { FormSection } from '@@/form-components/FormSection';
export function EdgeSettingsFieldset({
values,
setValues,
errors,
gitConfig,
fileValues,
setFieldError,
}: {
values: EdgeTemplateSettings;
setValues: (values: SetStateAction<EdgeTemplateSettings>) => void;
errors?: FormikErrors<EdgeTemplateSettings>;
gitConfig?: GitFormModel;
setFieldError: (field: string, message: string) => void;
fileValues: {
fileContent?: string;
file?: File;
};
}) {
const isGit = !!gitConfig;
return (
<>
{isGit && (
<FormSection title="Advanced settings">
<RelativePathFieldset
value={values.RelativePathSettings}
gitModel={gitConfig}
onChange={(newValues) =>
setValues((values) => ({
...values,
RelativePathSettings: {
...values.RelativePathSettings,
...newValues,
},
}))
}
/>
</FormSection>
)}
<PrivateRegistryFieldsetWrapper
value={values.PrivateRegistryId}
onChange={(registryId) =>
setValues((values) => ({
...values,
PrivateRegistryId: registryId,
}))
}
values={fileValues}
onFieldError={(error) => setFieldError('Edge?.Registries', error)}
error={errors?.PrivateRegistryId}
isGit={isGit}
/>
<PrePullToggle
onChange={(value) =>
setValues((values) => ({ ...values, PrePullImage: value }))
}
value={values.PrePullImage}
/>
<RetryDeployToggle
onChange={(value) =>
setValues((values) => ({ ...values, RetryDeploy: value }))
}
value={values.RetryDeploy}
/>
</>
);
}

19
app/react/edge/templates/custom-templates/CreateView/EdgeSettingsFieldset.validation.ts Normal file
View File

@ -0,0 +1,19 @@
import { SchemaOf, boolean, mixed, number, object } from 'yup';
import { relativePathValidation } from '@/react/portainer/gitops/RelativePathFieldset/validation';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
export function edgeFieldsetValidation(): SchemaOf<EdgeTemplateSettings> {
if (!isBE) {
return mixed().default(undefined) as SchemaOf<EdgeTemplateSettings>;
}
return object({
RelativePathSettings: relativePathValidation(),
PrePullImage: boolean().default(false),
RetryDeploy: boolean().default(false),
PrivateRegistryId: number().default(undefined),
StaggerConfig: mixed(),
});
}

41
app/react/edge/templates/custom-templates/CreateView/InnerForm.tsx
View File

@ -1,4 +1,4 @@
import { Form, useFormikContext } from 'formik';
import { Form, FormikErrors, useFormikContext } from 'formik';
import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
@ -10,6 +10,8 @@ import {
isTemplateVariablesEnabled,
} from '@/react/portainer/custom-templates/components/utils';
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import { applySetStateAction } from '@/react-tools/apply-set-state-action';
import { BoxSelector } from '@@/BoxSelector';
import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
@ -23,6 +25,7 @@ import {
} from '@@/BoxSelector/common-options/build-methods';
import { FormValues, Method, buildMethods } from './types';
import { EdgeSettingsFieldset } from './EdgeSettingsFieldset';
export function InnerForm({ isLoading }: { isLoading: boolean }) {
const {
@ -41,6 +44,8 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
values.FileContent,
values.Method === editor.value && !isSubmitting
);
const isGit = values.Method === git.value;
return (
<Form className="form-horizontal">
<CommonFields
@ -103,6 +108,15 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
/>
)}
{isTemplateVariablesEnabled && (
<CustomTemplatesVariablesDefinitionField
value={values.Variables}
onChange={(values) => setFieldValue('Variables', values)}
isVariablesNamesFromParent={values.Method === editor.value}
errors={errors.Variables}
/>
)}
{values.Method === git.value && (
<GitForm
value={values.Git}
@ -116,12 +130,25 @@ export function InnerForm({ isLoading }: { isLoading: boolean }) {
/>
)}
{isTemplateVariablesEnabled && (
<CustomTemplatesVariablesDefinitionField
value={values.Variables}
onChange={(values) => setFieldValue('Variables', values)}
isVariablesNamesFromParent={values.Method === editor.value}
errors={errors.Variables}
{values.EdgeSettings && (
<EdgeSettingsFieldset
setValues={(edgeSetValues) =>
setValues((values) => ({
...values,
EdgeSettings: applySetStateAction(
edgeSetValues,
values.EdgeSettings
),
}))
}
gitConfig={isGit ? values.Git : undefined}
fileValues={{
fileContent: values.FileContent,
file: values.File,
}}
values={values.EdgeSettings}
errors={errors.EdgeSettings as FormikErrors<EdgeTemplateSettings>}
setFieldError={setFieldError}
/>
)}

2
app/react/edge/templates/custom-templates/CreateView/types.ts
View File

@ -3,6 +3,7 @@ import { type Values as CommonFieldsValues } from '@/react/portainer/custom-temp
import { DefinitionFieldValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { Platform } from '@/react/portainer/templates/types';
import { GitFormModel } from '@/react/portainer/gitops/types';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import {
editor,
@ -22,4 +23,5 @@ export interface FormValues extends CommonFieldsValues {
File: File | undefined;
Git: GitFormModel;
Variables: DefinitionFieldValues;
EdgeSettings?: EdgeTemplateSettings;
}

2
app/react/edge/templates/custom-templates/CreateView/useValidation.tsx
View File

@ -18,6 +18,7 @@ import {
} from '@@/BoxSelector/common-options/build-methods';
import { buildMethods } from './types';
import { edgeFieldsetValidation } from './EdgeSettingsFieldset.validation';
export function useValidation() {
const { user } = useCurrentUser();
@ -51,6 +52,7 @@ export function useValidation() {
then: () => buildGitValidationSchema(gitCredentialsQuery.data || []),
}),
Variables: variablesValidation(),
EdgeSettings: edgeFieldsetValidation(),
}).concat(
commonFieldsValidation({ templates: customTemplatesQuery.data })
),

2
app/react/edge/templates/custom-templates/EditView/EditTemplateForm.tsx
View File

@ -38,6 +38,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
FileContent: fileQuery.data || '',
Git: template.GitConfig ? toGitFormModel(template.GitConfig) : undefined,
EdgeSettings: template.EdgeSettings,
};
return (
@ -72,6 +73,7 @@ export function EditTemplateForm({ template }: { template: CustomTemplate }) {
Note: values.Note,
Platform: values.Platform,
Variables: values.Variables,
EdgeSettings: values.EdgeSettings,
...values.Git,
},
{

4
app/react/edge/templates/custom-templates/EditView/EditView.tsx
View File

@ -12,9 +12,9 @@ import { EditTemplateForm } from './EditTemplateForm';
export function EditView() {
const router = useRouter();
const {
params: { id },
params: { id: templateId },
} = useCurrentStateAndParams();
const customTemplateQuery = useCustomTemplate(id);
const customTemplateQuery = useCustomTemplate(templateId);
useEffect(() => {
if (customTemplateQuery.data && !customTemplateQuery.data.EdgeTemplate) {

42
app/react/edge/templates/custom-templates/EditView/InnerForm.tsx
View File

@ -1,4 +1,4 @@
import { Form, useFormikContext } from 'formik';
import { Form, FormikErrors, useFormikContext } from 'formik';
import { RefreshCw } from 'lucide-react';
import { CommonFields } from '@/react/portainer/custom-templates/components/CommonFields';
@ -11,12 +11,16 @@ import {
isTemplateVariablesEnabled,
} from '@/react/portainer/custom-templates/components/utils';
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
import { applySetStateAction } from '@/react-tools/apply-set-state-action';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
import { WebEditorForm, usePreventExit } from '@@/WebEditorForm';
import { FormActions } from '@@/form-components/FormActions';
import { Button } from '@@/buttons';
import { FormError } from '@@/form-components/FormError';
import { EdgeSettingsFieldset } from '../CreateView/EdgeSettingsFieldset';
import { FormValues } from './types';
export function InnerForm({
@ -74,7 +78,11 @@ export function InnerForm({
value={gitFileContent || values.FileContent}
onChange={handleChangeFileContent}
yaml
placeholder="Define or paste the content of your docker compose file here"
placeholder={
gitFileContent
? 'Preview of the file from git repository'
: 'Define or paste the content of your docker compose file here'
}
error={errors.FileContent}
readonly={isEditorReadonly}
>
@ -91,6 +99,15 @@ export function InnerForm({
</p>
</WebEditorForm>
{isTemplateVariablesEnabled && (
<CustomTemplatesVariablesDefinitionField
value={values.Variables}
onChange={(values) => setFieldValue('Variables', values)}
isVariablesNamesFromParent={!isEditorReadonly}
errors={errors.Variables}
/>
)}
{values.Git && (
<>
<GitForm
@ -121,12 +138,21 @@ export function InnerForm({
</>
)}
{isTemplateVariablesEnabled && (
<CustomTemplatesVariablesDefinitionField
value={values.Variables}
onChange={(values) => setFieldValue('Variables', values)}
isVariablesNamesFromParent={!isEditorReadonly}
errors={errors.Variables}
{values.EdgeSettings && (
<EdgeSettingsFieldset
setValues={(edgeValues) =>
setFieldValue(
'EdgeSettings',
applySetStateAction(edgeValues, values.EdgeSettings)
)
}
gitConfig={values.Git}
fileValues={{
fileContent: values.FileContent,
}}
values={values.EdgeSettings}
errors={errors.EdgeSettings as FormikErrors<EdgeTemplateSettings>}
setFieldError={setFieldError}
/>
)}

2
app/react/edge/templates/custom-templates/EditView/types.ts
View File

@ -3,6 +3,7 @@ import { DefinitionFieldValues } from '@/react/portainer/custom-templates/compon
import { Platform } from '@/react/portainer/templates/types';
import { type Values as CommonFieldsValues } from '@/react/portainer/custom-templates/components/CommonFields';
import { GitFormModel } from '@/react/portainer/gitops/types';
import { EdgeTemplateSettings } from '@/react/portainer/templates/custom-templates/types';
export interface FormValues extends CommonFieldsValues {
Platform: Platform;
@ -10,4 +11,5 @@ export interface FormValues extends CommonFieldsValues {
FileContent: string;
Git?: GitFormModel;
Variables: DefinitionFieldValues;
EdgeSettings?: EdgeTemplateSettings;
}

3
app/react/edge/templates/custom-templates/EditView/useValidation.tsx
View File

@ -11,6 +11,8 @@ import { useCurrentUser } from '@/react/hooks/useUser';
import { useCustomTemplates } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplates';
import { Platform } from '@/react/portainer/templates/types';
import { edgeFieldsetValidation } from '../CreateView/EdgeSettingsFieldset.validation';
export function useValidation(
currentTemplateId: CustomTemplate['Id'],
isGit: boolean
@ -40,6 +42,7 @@ export function useValidation(
? buildGitValidationSchema(gitCredentialsQuery.data || [])
: mixed(),
Variables: variablesValidation(),
EdgeSettings: edgeFieldsetValidation(),
}).concat(
commonFieldsValidation({
templates: customTemplatesQuery.data,

2
app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx
View File

@ -45,7 +45,7 @@ export function AuthFieldset({
label="Authentication"
labelClass="col-sm-3 col-lg-2"
name="authentication"
checked={value.RepositoryAuthentication}
checked={value.RepositoryAuthentication || false}
onChange={(value) =>
handleChange({ RepositoryAuthentication: value })
}

2
app/react/portainer/gitops/GitForm.tsx
View File

@ -113,7 +113,7 @@ export function GitForm({
<div className="col-sm-12">
<SwitchField
label="Skip TLS Verification"
checked={value.TLSSkipVerify}
checked={value.TLSSkipVerify || false}
onChange={(value) => handleChange({ TLSSkipVerify: value })}
name="TLSSkipVerify"
tooltip="Enabling this will allow skipping TLS validation for any self-signed certificate."

14
app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
View File

@ -1,9 +1,6 @@
import { useCallback } from 'react';
import {
GitFormModel,
RelativePathModel,
} from '@/react/portainer/gitops/types';
import { GitFormModel } from '@/react/portainer/gitops/types';
import { PathSelector } from '@/react/portainer/gitops/ComposePathField/PathSelector';
import { dummyGitForm } from '@/react/portainer/gitops/RelativePathFieldset/utils';
import { useValidation } from '@/react/portainer/gitops/RelativePathFieldset/useValidation';
@ -13,6 +10,8 @@ import { TextTip } from '@@/Tip/TextTip';
import { FormControl } from '@@/form-components/FormControl';
import { Input, Select } from '@@/form-components/Input';
import { RelativePathModel, getPerDevConfigsFilterType } from './types';
interface Props {
value: RelativePathModel;
gitModel?: GitFormModel;
@ -156,7 +155,9 @@ export function RelativePathFieldset({
value={value.PerDeviceConfigsMatchType}
onChange={(e) =>
innerOnChange({
PerDeviceConfigsMatchType: e.target.value,
PerDeviceConfigsMatchType: getPerDevConfigsFilterType(
e.target.value
),
})
}
options={[
@ -186,7 +187,8 @@ export function RelativePathFieldset({
value={value.PerDeviceConfigsGroupMatchType}
onChange={(e) =>
innerOnChange({
PerDeviceConfigsGroupMatchType: e.target.value,
PerDeviceConfigsGroupMatchType:
getPerDevConfigsFilterType(e.target.value),
})
}
options={[

37
app/react/portainer/gitops/RelativePathFieldset/types.ts Normal file
View File

@ -0,0 +1,37 @@
export function getDefaultRelativePathModel(): RelativePathModel {
return {
SupportRelativePath: false,
FilesystemPath: '',
PerDeviceConfigsGroupMatchType: '',
PerDeviceConfigsMatchType: '',
PerDeviceConfigsPath: '',
SupportPerDeviceConfigs: false,
};
}
export interface RelativePathModel {
SupportRelativePath: boolean;
FilesystemPath: string;
SupportPerDeviceConfigs: boolean;
PerDeviceConfigsPath: string;
PerDeviceConfigsMatchType: PerDevConfigsFilterType;
PerDeviceConfigsGroupMatchType: PerDevConfigsFilterType;
}
export type PerDevConfigsFilterType = 'file' | 'dir' | '';
function isPerDevConfigsFilterType(
type: string
): type is PerDevConfigsFilterType {
return ['file', 'dir'].includes(type);
}
export function getPerDevConfigsFilterType(
type: string
): PerDevConfigsFilterType {
if (isPerDevConfigsFilterType(type)) {
return type;
}
return '';
}

12
app/react/portainer/gitops/RelativePathFieldset/validation.ts
View File

@ -1,6 +1,6 @@
import { boolean, object, SchemaOf, string } from 'yup';
import { boolean, mixed, object, SchemaOf, string } from 'yup';
import { RelativePathModel } from '@/react/portainer/gitops/types';
import { PerDevConfigsFilterType, RelativePathModel } from './types';
export function relativePathValidation(): SchemaOf<RelativePathModel> {
return object({
@ -18,7 +18,11 @@ export function relativePathValidation(): SchemaOf<RelativePathModel> {
then: string().required('Directory is required'),
})
.default(''),
PerDeviceConfigsMatchType: string().oneOf(['', 'file', 'dir']),
PerDeviceConfigsGroupMatchType: string().oneOf(['', 'file', 'dir']),
PerDeviceConfigsMatchType: mixed<PerDevConfigsFilterType>()
.oneOf(['', 'file', 'dir'])
.default(''),
PerDeviceConfigsGroupMatchType: mixed<PerDevConfigsFilterType>()
.oneOf(['', 'file', 'dir'])
.default(''),
});
}

16
app/react/portainer/gitops/types.ts
View File

@ -1,4 +1,6 @@
export type AutoUpdateMechanism = 'Webhook' | 'Interval';
export { type RelativePathModel } from './RelativePathFieldset/types';
export interface AutoUpdateResponse {
/* Auto update interval */
Interval: string;
@ -37,7 +39,7 @@ export type AutoUpdateModel = {
};
export type GitCredentialsModel = {
RepositoryAuthentication: boolean;
RepositoryAuthentication?: boolean;
RepositoryUsername?: string;
RepositoryPassword?: string;
RepositoryGitCredentialID?: number;
@ -54,13 +56,12 @@ export interface GitFormModel extends GitAuthModel {
RepositoryURL: string;
RepositoryURLValid?: boolean;
ComposeFilePathInRepository: string;
RepositoryAuthentication: boolean;
RepositoryReferenceName?: string;
AdditionalFiles?: string[];
SaveCredential?: boolean;
NewCredentialName?: string;
TLSSkipVerify: boolean;
TLSSkipVerify?: boolean;
/**
* Auto update
@ -70,15 +71,6 @@ export interface GitFormModel extends GitAuthModel {
AutoUpdate?: AutoUpdateModel;
}
export interface RelativePathModel {
SupportRelativePath: boolean;
FilesystemPath?: string;
SupportPerDeviceConfigs?: boolean;
PerDeviceConfigsPath?: string;
PerDeviceConfigsMatchType?: string;
PerDeviceConfigsGroupMatchType?: string;
}
export function toGitFormModel(response?: RepoConfigResponse): GitFormModel {
if (!response) {
return {

2
app/react/portainer/settings/types.ts
View File

@ -41,7 +41,7 @@ export interface LDAPSettings {
export interface Pair {
name: string;
value: string;
value?: string;
}
export interface OpenAMTConfiguration {

2
app/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem.tsx
View File

@ -46,7 +46,7 @@ export function CustomTemplatesListItem({
props={{
to: '.edit',
params: {
templateId: template.Id,
id: template.Id,
},
}}
icon={Edit}

26
app/react/portainer/templates/custom-templates/queries/useCreateTemplateMutation.ts
View File

@ -12,7 +12,10 @@ import {
import { StackType } from '@/react/common/stacks/types';
import { FormValues } from '@/react/edge/templates/custom-templates/CreateView/types';
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
import {
CustomTemplate,
EdgeTemplateSettings,
} from '@/react/portainer/templates/custom-templates/types';
import { Platform } from '../../types';
@ -41,7 +44,18 @@ function createTemplate({
case 'upload':
return createTemplateFromFile(values);
case 'repository':
return createTemplateFromGit({ ...values, ...Git });
return createTemplateFromGit({
...values,
...Git,
...(values.EdgeSettings
? {
EdgeSettings: {
...values.EdgeSettings,
...values.EdgeSettings.RelativePathSettings,
},
}
: {}),
});
default:
throw new Error('Unknown method');
}
@ -69,6 +83,7 @@ interface CustomTemplateFromFileContentPayload {
Variables: VariableDefinition[];
/** Indicates if this template is for Edge Stack. */
EdgeTemplate?: boolean;
EdgeSettings?: EdgeTemplateSettings;
}
async function createTemplateFromText(
values: CustomTemplateFromFileContentPayload
@ -103,6 +118,7 @@ interface CustomTemplateFromFilePayload {
Variables?: VariableDefinition[];
/** Indicates if this template is for Edge Stack. */
EdgeTemplate?: boolean;
EdgeSettings?: EdgeTemplateSettings;
}
async function createTemplateFromFile(values: CustomTemplateFromFilePayload) {
@ -121,6 +137,7 @@ async function createTemplateFromFile(values: CustomTemplateFromFilePayload) {
File: values.File,
Variables: values.Variables,
EdgeTemplate: values.EdgeTemplate,
EdgeSettings: values.EdgeSettings,
});
const { data } = await axios.post<CustomTemplate>(
@ -157,7 +174,7 @@ interface CustomTemplateFromGitRepositoryPayload {
/** Reference name of a Git repository hosting the Stack file. */
RepositoryReferenceName?: string;
/** Use basic authentication to clone the Git repository. */
RepositoryAuthentication: boolean;
RepositoryAuthentication?: boolean;
/** Username used in basic authentication when RepositoryAuthentication is true. */
RepositoryUsername?: string;
/** Password used in basic authentication when RepositoryAuthentication is true. */
@ -167,11 +184,12 @@ interface CustomTemplateFromGitRepositoryPayload {
/** Definitions of variables in the stack file. */
Variables: VariableDefinition[];
/** Indicates whether to skip SSL verification when cloning the Git repository. */
TLSSkipVerify: boolean;
TLSSkipVerify?: boolean;
/** Indicates if the Kubernetes template is created from a Docker Compose file. */
IsComposeFormat?: boolean;
/** Indicates if this template is for Edge Stack. */
EdgeTemplate?: boolean;
EdgeSettings?: EdgeTemplateSettings;
}
async function createTemplateFromGit(
values: CustomTemplateFromGitRepositoryPayload

3
app/react/portainer/templates/custom-templates/queries/useUpdateTemplateMutation.ts
View File

@ -9,7 +9,7 @@ import {
import { StackType } from '@/react/common/stacks/types';
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField';
import { CustomTemplate } from '../types';
import { CustomTemplate, EdgeTemplateSettings } from '../types';
import { Platform } from '../../types';
import { buildUrl } from './build-url';
@ -75,6 +75,7 @@ interface CustomTemplateUpdatePayload {
IsComposeFormat?: boolean;
/** EdgeTemplate indicates if this template purpose for Edge Stack */
EdgeTemplate?: boolean;
EdgeSettings?: EdgeTemplateSettings;
}
async function updateTemplate(

37
app/react/portainer/templates/custom-templates/types.ts
View File

@ -2,9 +2,12 @@ import { UserId } from '@/portainer/users/types';
import { StackType } from '@/react/common/stacks/types';
import { ResourceControlResponse } from '../../access-control/types';
import { RepoConfigResponse } from '../../gitops/types';
import { RelativePathModel, RepoConfigResponse } from '../../gitops/types';
import { VariableDefinition } from '../../custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { Platform } from '../types';
import { RegistryId } from '../../registries/types';
import { getDefaultRelativePathModel } from '../../gitops/RelativePathFieldset/types';
import { isBE } from '../../feature-flags/feature-flags.service';
export type CustomTemplate = {
Id: number;
@ -87,16 +90,38 @@ export type CustomTemplate = {
/** EdgeTemplate indicates if this template purpose for Edge Stack */
EdgeTemplate: boolean;
EdgeSettings?: EdgeTemplateSettings;
};
/**
* EdgeTemplateSettings represents the configuration of a custom template for Edge
*/
export type EdgeTemplateSettings = {
PrePullImage: boolean;
RetryDeploy: boolean;
PrivateRegistryId: RegistryId | undefined;
RelativePathSettings: RelativePathModel;
};
export type CustomTemplateFileContent = {
FileContent: string;
};
export const CustomTemplateKubernetesType = 3;
export const CustomTemplateKubernetesType = StackType.Kubernetes;
export enum Types {
SWARM = 1,
STANDALONE,
KUBERNETES,
export function getDefaultEdgeTemplateSettings() {
if (!isBE) {
return undefined;
}
return {
PrePullImage: false,
RetryDeploy: false,
PrivateRegistryId: undefined,
RelativePathSettings: getDefaultRelativePathModel(),
};
}