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

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/EditEdgeStackForm.tsx

@@ -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}
+              />
             </>
           )}
         </>

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/PrivateRegistryFieldsetWrapper.tsx

@@ -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(

app/react/edge/edge-stacks/components/PrePullToggle.tsx

@@ -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>
+  );
+}

app/react/edge/edge-stacks/components/RetryDeployToggle.tsx

@@ -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>
+  );
+}

app/react/edge/edge-stacks/components/StaggerFieldset.types.ts

@@ -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,
+  };
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFile.ts

@@ -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);
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromFileContent.ts

@@ -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);
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/createStackFromGit.ts

@@ -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);
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack.ts

@@ -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');
+  }
+}

app/react/edge/edge-stacks/queries/useCreateEdgeStackFromFileContent.ts

@@ -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);
-  }
-}

app/react/edge/edge-stacks/queries/useCreateEdgeStackFromGit.ts

@@ -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);
-  }
-}

app/react/edge/edge-stacks/queries/useParseRegistries.ts

@@ -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);
+  }
+}

app/react/edge/edge-stacks/types.ts

@@ -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 {