@@ -61,6 +61,7 @@ export function Item({
value={volume.name}
onChange={(name) => setValue({ name })}
inputId={`volume-${index}`}
+ allowAuto={allowAuto}
/>
)}
diff --git a/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx b/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
index 6f02e0679..c55c1a9b8 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
+++ b/app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
@@ -8,10 +8,12 @@ export function VolumeSelector({
value,
onChange,
inputId,
+ allowAuto,
}: {
value: string;
onChange: (value?: string) => void;
inputId?: string;
+ allowAuto: boolean;
}) {
const environmentId = useEnvironmentId();
const volumesQuery = useVolumes(environmentId, {
@@ -24,7 +26,9 @@ export function VolumeSelector({
return null;
}
- const volumes = volumesQuery.data;
+ const volumes = allowAuto
+ ? [...volumesQuery.data, { Name: 'auto', Driver: '' }]
+ : volumesQuery.data;
const selectedValue = volumes.find((vol) => vol.Name === value);
@@ -33,7 +37,9 @@ export function VolumeSelector({
placeholder="Select a volume"
options={volumes}
getOptionLabel={(vol) =>
- `${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
+ vol.Name !== 'auto'
+ ? `${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
+ : 'auto'
}
getOptionValue={(vol) => vol.Name}
isMulti={false}
diff --git a/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx b/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
index 73136c800..4d5ff34e4 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
+++ b/app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
@@ -1,3 +1,8 @@
+import { useMemo } from 'react';
+
+import { useIsEnvironmentAdmin } from '@/react/hooks/useUser';
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+
import { InputList } from '@@/form-components/InputList';
import { ArrayError } from '@@/form-components/InputList/InputList';
@@ -8,16 +13,29 @@ import { Item } from './Item';
export function VolumesTab({
onChange,
values,
- allowBindMounts,
errors,
+ allowAuto = false,
}: {
onChange: (values: Values) => void;
values: Values;
- allowBindMounts: boolean;
errors?: ArrayError
;
+ allowAuto?: boolean;
}) {
+ const isEnvironmentAdminQuery = useIsEnvironmentAdmin({ adminOnlyCE: true });
+ const envQuery = useCurrentEnvironment();
+
+ const allowBindMounts = !!(
+ isEnvironmentAdminQuery.authorized ||
+ envQuery.data?.SecuritySettings.allowBindMountsForRegularUsers
+ );
+
+ const inputContext = useMemo(
+ () => ({ allowBindMounts, allowAuto }),
+ [allowAuto, allowBindMounts]
+ );
+
return (
-
+
errors={Array.isArray(errors) ? errors : []}
label="Volume mapping"
diff --git a/app/react/docker/containers/CreateView/VolumesTab/context.ts b/app/react/docker/containers/CreateView/VolumesTab/context.ts
index d0fcfd4c3..52d6f7627 100644
--- a/app/react/docker/containers/CreateView/VolumesTab/context.ts
+++ b/app/react/docker/containers/CreateView/VolumesTab/context.ts
@@ -1,6 +1,9 @@
import { createContext, useContext } from 'react';
-export const InputContext = createContext(null);
+export const InputContext = createContext<{
+ allowAuto: boolean;
+ allowBindMounts: boolean;
+} | null>(null);
export function useInputContext() {
const value = useContext(InputContext);
diff --git a/app/react/docker/containers/CreateView/useCreateMutation.tsx b/app/react/docker/containers/CreateView/useCreateMutation.tsx
index 54c8601c2..664e9a451 100644
--- a/app/react/docker/containers/CreateView/useCreateMutation.tsx
+++ b/app/react/docker/containers/CreateView/useCreateMutation.tsx
@@ -62,7 +62,14 @@ export function useCreateOrReplaceMutation() {
interface CreateOptions {
config: CreateContainerRequest;
- values: Values;
+ values: {
+ name: Values['name'];
+ imageName: string;
+ accessControl: Values['accessControl'];
+ nodeName?: Values['nodeName'];
+ alwaysPull?: Values['alwaysPull'];
+ enableWebhook?: Values['enableWebhook'];
+ };
registry?: Registry;
environment: Environment;
}
@@ -90,14 +97,14 @@ async function create({
}: CreateOptions) {
await pullImageIfNeeded(
environment.Id,
+ values.alwaysPull || false,
+ values.imageName,
values.nodeName,
- values.alwaysPull,
- values.image.image,
registry
);
const containerResponse = await createAndStart(
- environment,
+ environment.Id,
config,
values.name,
values.nodeName
@@ -106,8 +113,8 @@ async function create({
await applyContainerSettings(
containerResponse.Id,
environment,
- values.enableWebhook,
values.accessControl,
+ values.enableWebhook,
containerResponse.Portainer?.ResourceControl,
registry
);
@@ -123,33 +130,34 @@ async function replace({
}: ReplaceOptions) {
await pullImageIfNeeded(
environment.Id,
+ values.alwaysPull || false,
+ values.imageName,
values.nodeName,
- values.alwaysPull,
- values.image.image,
registry
);
const containerResponse = await renameAndCreate(
- environment,
- values,
+ environment.Id,
+ values.name,
oldContainer,
- config
+ config,
+ values.nodeName
);
await applyContainerSettings(
containerResponse.Id,
environment,
- values.enableWebhook,
values.accessControl,
+ values.enableWebhook,
containerResponse.Portainer?.ResourceControl,
registry
);
await connectToExtraNetworks(
environment.Id,
- values.nodeName,
containerResponse.Id,
- extraNetworks
+ extraNetworks,
+ values.nodeName
);
await removeContainer(environment.Id, oldContainer.Id, {
@@ -162,33 +170,29 @@ async function replace({
* on any failure, it will rename the old container to its original name
*/
async function renameAndCreate(
- environment: Environment,
- values: Values,
+ environmentId: EnvironmentId,
+ name: string,
oldContainer: DockerContainer,
- config: CreateContainerRequest
+ config: CreateContainerRequest,
+ nodeName?: string
) {
let renamed = false;
try {
- await stopContainerIfNeeded(environment.Id, values.nodeName, oldContainer);
+ await stopContainerIfNeeded(environmentId, oldContainer, nodeName);
await renameContainer(
- environment.Id,
+ environmentId,
oldContainer.Id,
`${oldContainer.Names[0]}-old`,
- { nodeName: values.nodeName }
+ { nodeName }
);
renamed = true;
- return await createAndStart(
- environment,
- config,
- values.name,
- values.nodeName
- );
+ return await createAndStart(environmentId, config, name, nodeName);
} catch (e) {
if (renamed) {
- await renameContainer(environment.Id, oldContainer.Id, values.name, {
- nodeName: values.nodeName,
+ await renameContainer(environmentId, oldContainer.Id, name, {
+ nodeName,
});
}
throw e;
@@ -201,8 +205,8 @@ async function renameAndCreate(
async function applyContainerSettings(
containerId: string,
environment: Environment,
- enableWebhook: boolean,
accessControl: AccessControlFormData,
+ enableWebhook?: boolean,
resourceControl?: ResourceControlResponse,
registry?: Registry
) {
@@ -224,15 +228,15 @@ async function applyContainerSettings(
* on failure, it will remove the new container
*/
async function createAndStart(
- environment: Environment,
+ environmentId: EnvironmentId,
config: CreateContainerRequest,
name: string,
- nodeName: string
+ nodeName?: string
) {
let containerId = '';
try {
const containerResponse = await createContainer(
- environment.Id,
+ environmentId,
config,
name,
{
@@ -242,11 +246,11 @@ async function createAndStart(
containerId = containerResponse.Id;
- await startContainer(environment.Id, containerResponse.Id, { nodeName });
+ await startContainer(environmentId, containerResponse.Id, { nodeName });
return containerResponse;
} catch (e) {
if (containerId) {
- await removeContainer(environment.Id, containerId, {
+ await removeContainer(environmentId, containerId, {
nodeName,
});
}
@@ -257,9 +261,9 @@ async function createAndStart(
async function pullImageIfNeeded(
environmentId: EnvironmentId,
- nodeName: string,
pull: boolean,
image: string,
+ nodeName?: string,
registry?: Registry
) {
if (!pull) {
@@ -322,9 +326,9 @@ async function createContainerWebhook(
function connectToExtraNetworks(
environmentId: EnvironmentId,
- nodeName: string,
containerId: string,
- extraNetworks: Array
+ extraNetworks: Array,
+ nodeName?: string
) {
if (!extraNetworks) {
return null;
@@ -345,8 +349,8 @@ function connectToExtraNetworks(
function stopContainerIfNeeded(
environmentId: EnvironmentId,
- nodeName: string,
- container: DockerContainer
+ container: DockerContainer,
+ nodeName?: string
) {
if (container.State !== 'running' || !container.Id) {
return null;
diff --git a/app/react/docker/containers/ListView/ListView.tsx b/app/react/docker/containers/ListView/ListView.tsx
index 12dcf32a8..cef7fca63 100644
--- a/app/react/docker/containers/ListView/ListView.tsx
+++ b/app/react/docker/containers/ListView/ListView.tsx
@@ -13,7 +13,9 @@ interface Props {
export function ListView({ endpoint: environment }: Props) {
const isAgent = isAgentEnvironment(environment.Type);
- const envInfoQuery = useInfo(environment.Id, (info) => !!info.Swarm?.NodeID);
+ const envInfoQuery = useInfo(environment.Id, {
+ select: (info) => !!info.Swarm?.NodeID,
+ });
const isSwarmManager = !!envInfoQuery.data;
const isHostColumnVisible = isAgent && isSwarmManager;
diff --git a/app/react/docker/containers/utils.ts b/app/react/docker/containers/utils.ts
index a1dca9974..c5efa387b 100644
--- a/app/react/docker/containers/utils.ts
+++ b/app/react/docker/containers/utils.ts
@@ -2,7 +2,7 @@ import _ from 'lodash';
import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
import { EnvironmentId } from '@/react/portainer/environments/types';
-import { useInfo } from '@/react/docker/proxy/queries/useInfo';
+import { useIsStandAlone } from '@/react/docker/proxy/queries/useInfo';
import { useEnvironment } from '@/react/portainer/environments/queries';
import { DockerContainer, ContainerStatus } from './types';
@@ -95,14 +95,11 @@ function createStatus(statusText = ''): ContainerStatus {
return ContainerStatus.Running;
}
-export function useShowGPUsColumn(environmentID: EnvironmentId) {
- const isDockerStandaloneQuery = useInfo(
- environmentID,
- (info) => !(!!info.Swarm?.NodeID && !!info.Swarm?.ControlAvailable) // is not a swarm environment, therefore docker standalone
- );
+export function useShowGPUsColumn(environmentId: EnvironmentId) {
+ const isDockerStandalone = useIsStandAlone(environmentId);
const enableGPUManagementQuery = useEnvironment(
- environmentID,
+ environmentId,
(env) => env?.EnableGPUManagement
);
- return isDockerStandaloneQuery.data && enableGPUManagementQuery.data;
+ return isDockerStandalone && enableGPUManagementQuery.data;
}
diff --git a/app/react/docker/proxy/queries/useInfo.ts b/app/react/docker/proxy/queries/useInfo.ts
index 6f318189c..b8e1311d1 100644
--- a/app/react/docker/proxy/queries/useInfo.ts
+++ b/app/react/docker/proxy/queries/useInfo.ts
@@ -18,26 +18,38 @@ export async function getInfo(environmentId: EnvironmentId) {
}
export function useInfo(
- environmentId: EnvironmentId,
- select?: (info: SystemInfo) => TSelect
+ environmentId?: EnvironmentId,
+ {
+ enabled,
+ select,
+ }: { select?: (info: SystemInfo) => TSelect; enabled?: boolean } = {}
) {
return useQuery(
['environment', environmentId, 'docker', 'info'],
- () => getInfo(environmentId),
+ () => getInfo(environmentId!),
{
select,
+ enabled: !!environmentId && enabled,
}
);
}
export function useIsStandAlone(environmentId: EnvironmentId) {
- const query = useInfo(environmentId, (info) => !info.Swarm?.NodeID);
+ const query = useInfo(environmentId, {
+ select: (info) => !info.Swarm?.NodeID,
+ });
return !!query.data;
}
-export function useIsSwarm(environmentId: EnvironmentId) {
- const query = useInfo(environmentId, (info) => !!info.Swarm?.NodeID);
+export function useIsSwarm(
+ environmentId?: EnvironmentId,
+ { enabled }: { enabled?: boolean } = {}
+) {
+ const query = useInfo(environmentId, {
+ select: (info) => !!info.Swarm?.NodeID,
+ enabled,
+ });
return !!query.data;
}
diff --git a/app/react/docker/proxy/queries/useServicePlugins.ts b/app/react/docker/proxy/queries/useServicePlugins.ts
index 0117c0e83..0887de9fb 100644
--- a/app/react/docker/proxy/queries/useServicePlugins.ts
+++ b/app/react/docker/proxy/queries/useServicePlugins.ts
@@ -41,7 +41,9 @@ export function useServicePlugins(
pluginType: keyof PluginsInfo,
pluginVersion: string
) {
- const systemPluginsQuery = useInfo(environmentId, (info) => info.Plugins);
+ const systemPluginsQuery = useInfo(environmentId, {
+ select: (info) => info.Plugins,
+ });
const pluginsQuery = usePlugins(environmentId, { enabled: !systemOnly });
return {
diff --git a/app/react/docker/proxy/queries/useSwarm.ts b/app/react/docker/proxy/queries/useSwarm.ts
new file mode 100644
index 000000000..9fdeb3f8b
--- /dev/null
+++ b/app/react/docker/proxy/queries/useSwarm.ts
@@ -0,0 +1,38 @@
+import { useQuery } from 'react-query';
+import { Swarm } from 'docker-types/generated/1.41';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+import { useIsSwarm } from './useInfo';
+
+export function useSwarm(
+ environmentId: EnvironmentId,
+ { select }: { select?(value: Swarm): T } = {}
+) {
+ const isSwarm = useIsSwarm(environmentId);
+
+ return useQuery({
+ queryKey: [...queryKeys.base(environmentId), 'swarm'] as const,
+ queryFn: () => getSwarm(environmentId),
+ select,
+ enabled: isSwarm,
+ });
+}
+
+async function getSwarm(environmentId: EnvironmentId) {
+ try {
+ const { data } = await axios.get(buildUrl(environmentId, 'swarm'));
+ return data;
+ } catch (err) {
+ throw parseAxiosError(err, 'Unable to retrieve swarm information');
+ }
+}
+
+export function useSwarmId(environmentId: EnvironmentId) {
+ return useSwarm(environmentId, {
+ select: (swarm) => swarm.ID,
+ });
+}
diff --git a/app/react/docker/proxy/queries/useVersion.ts b/app/react/docker/proxy/queries/useVersion.ts
index e2912b4c1..bcdbc738e 100644
--- a/app/react/docker/proxy/queries/useVersion.ts
+++ b/app/react/docker/proxy/queries/useVersion.ts
@@ -18,19 +18,20 @@ export async function getVersion(environmentId: EnvironmentId) {
}
export function useVersion(
- environmentId: EnvironmentId,
+ environmentId?: EnvironmentId,
select?: (info: SystemVersion) => TSelect
) {
return useQuery(
- ['environment', environmentId, 'docker', 'version'],
- () => getVersion(environmentId),
+ ['environment', environmentId!, 'docker', 'version'],
+ () => getVersion(environmentId!),
{
select,
+ enabled: !!environmentId,
}
);
}
-export function useApiVersion(environmentId: EnvironmentId) {
+export function useApiVersion(environmentId?: EnvironmentId) {
const query = useVersion(environmentId, (info) => info.ApiVersion);
return query.data ? parseFloat(query.data) : 0;
}
diff --git a/app/react/docker/stacks/view-models/stack.ts b/app/react/docker/stacks/view-models/stack.ts
index 63770900d..5a36e0eaa 100644
--- a/app/react/docker/stacks/view-models/stack.ts
+++ b/app/react/docker/stacks/view-models/stack.ts
@@ -67,8 +67,8 @@ export class StackViewModel implements IResource {
this.Id = stack.Id;
this.Type = stack.Type;
this.Name = stack.Name;
- this.EndpointId = stack.EndpointID;
- this.SwarmId = stack.SwarmID;
+ this.EndpointId = stack.EndpointId;
+ this.SwarmId = stack.SwarmId;
this.Env = stack.Env ? stack.Env : [];
this.Option = stack.Option;
this.IsComposeFormat = stack.IsComposeFormat;
diff --git a/app/react/docker/templates/StackFromCustomTemplateFormWidget/DeployForm.tsx b/app/react/docker/templates/StackFromCustomTemplateFormWidget/DeployForm.tsx
new file mode 100644
index 000000000..4218e65b0
--- /dev/null
+++ b/app/react/docker/templates/StackFromCustomTemplateFormWidget/DeployForm.tsx
@@ -0,0 +1,243 @@
+import { useRouter } from '@uirouter/react';
+import { Formik, Form } from 'formik';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+import {
+ CreateStackPayload,
+ useCreateStack,
+} from '@/react/common/stacks/queries/useCreateStack/useCreateStack';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useCurrentUser, useIsEdgeAdmin } from '@/react/hooks/useUser';
+import { AccessControlForm } from '@/react/portainer/access-control';
+import { parseAccessControlFormData } from '@/react/portainer/access-control/utils';
+import { NameField } from '@/react/common/stacks/CreateView/NameField';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import {
+ isTemplateVariablesEnabled,
+ renderTemplate,
+} from '@/react/portainer/custom-templates/components/utils';
+import {
+ CustomTemplatesVariablesField,
+ getVariablesFieldDefaultValues,
+} from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
+import { StackType } from '@/react/common/stacks/types';
+import { toGitFormModel } from '@/react/portainer/gitops/types';
+import { AdvancedSettings } from '@/react/portainer/templates/app-templates/DeployFormWidget/AdvancedSettings';
+
+import { Button } from '@@/buttons';
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+import { WebEditorForm } from '@@/WebEditorForm';
+
+import { useSwarmId } from '../../proxy/queries/useSwarm';
+
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+
+export function DeployForm({
+ template,
+ unselect,
+ templateFile,
+ isDeployable,
+}: {
+ template: CustomTemplate;
+ templateFile: string;
+ unselect: () => void;
+ isDeployable: boolean;
+}) {
+ const router = useRouter();
+ const { user } = useCurrentUser();
+ const isEdgeAdminQuery = useIsEdgeAdmin();
+ const environmentId = useEnvironmentId();
+ const swarmIdQuery = useSwarmId(environmentId);
+ const mutation = useCreateStack();
+ const validation = useValidation({
+ isDeployable,
+ variableDefs: template.Variables,
+ isAdmin: isEdgeAdminQuery.isAdmin,
+ environmentId,
+ });
+
+ if (isEdgeAdminQuery.isLoading) {
+ return null;
+ }
+
+ const isGit = !!template.GitConfig;
+
+ const initialValues: FormValues = {
+ name: template.Title || '',
+ variables: getVariablesFieldDefaultValues(template.Variables),
+ accessControl: parseAccessControlFormData(
+ isEdgeAdminQuery.isAdmin,
+ user.Id
+ ),
+ fileContent: templateFile,
+ };
+
+ return (
+
+ {({ values, errors, setFieldValue, isValid }) => (
+
+ )}
+
+ );
+
+ function handleSubmit(values: FormValues) {
+ const payload = getPayload(values);
+
+ return mutation.mutate(payload, {
+ onSuccess() {
+ notifySuccess('Success', 'Stack created');
+ router.stateService.go('docker.stacks');
+ },
+ });
+ }
+
+ function getPayload(values: FormValues): CreateStackPayload {
+ const type =
+ template.Type === StackType.DockerCompose ? 'standalone' : 'swarm';
+ const isGit = !!template.GitConfig;
+ if (isGit) {
+ return type === 'standalone'
+ ? {
+ type,
+ method: 'git',
+ payload: {
+ name: values.name,
+ environmentId,
+ git: toGitFormModel(template.GitConfig),
+ accessControl: values.accessControl,
+ },
+ }
+ : {
+ type,
+ method: 'git',
+ payload: {
+ name: values.name,
+ environmentId,
+ swarmId: swarmIdQuery.data || '',
+ git: toGitFormModel(template.GitConfig),
+ accessControl: values.accessControl,
+ },
+ };
+ }
+
+ return type === 'standalone'
+ ? {
+ type,
+ method: 'string',
+ payload: {
+ name: values.name,
+ environmentId,
+ fileContent: values.fileContent,
+ accessControl: values.accessControl,
+ },
+ }
+ : {
+ type,
+ method: 'string',
+ payload: {
+ name: values.name,
+ environmentId,
+ swarmId: swarmIdQuery.data || '',
+ fileContent: values.fileContent,
+ accessControl: values.accessControl,
+ },
+ };
+ }
+}
+
+function advancedSettingsLabel(isOpen: boolean, isGit: boolean) {
+ if (isGit) {
+ return isOpen ? 'Hide stack' : 'View stack';
+ }
+
+ return isOpen ? 'Hide custom stack' : 'Customize stack';
+}
diff --git a/app/react/docker/templates/StackFromCustomTemplateFormWidget/StackFromCustomTemplateFormWidget.tsx b/app/react/docker/templates/StackFromCustomTemplateFormWidget/StackFromCustomTemplateFormWidget.tsx
new file mode 100644
index 000000000..4f4dc0aab
--- /dev/null
+++ b/app/react/docker/templates/StackFromCustomTemplateFormWidget/StackFromCustomTemplateFormWidget.tsx
@@ -0,0 +1,57 @@
+import { DeployWidget } from '@/react/portainer/templates/components/DeployWidget';
+import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
+import { useCustomTemplateFile } from '@/react/portainer/templates/custom-templates/queries/useCustomTemplateFile';
+
+import { TextTip } from '@@/Tip/TextTip';
+
+import { useIsDeployable } from './useIsDeployable';
+import { DeployForm } from './DeployForm';
+import { TemplateLoadError } from './TemplateLoadError';
+
+export function StackFromCustomTemplateFormWidget({
+ template,
+ unselect,
+}: {
+ template: CustomTemplate;
+ unselect: () => void;
+}) {
+ const isDeployable = useIsDeployable(template.Type);
+ const fileQuery = useCustomTemplateFile(template.Id);
+
+ if (fileQuery.isLoading) {
+ return null;
+ }
+
+ return (
+
+ {fileQuery.isError && (
+
+ )}
+
+ {!isDeployable && (
+
+
+
+ This template type cannot be deployed on this environment.
+
+
+
+
+
+
+
- handleChange(env.name, value)}
errors={errors?.[env.name]}
/>
@@ -34,7 +36,7 @@ export function EnvVarsFieldset({
);
function handleChange(name: string, envValue: string) {
- onChange({ ...value, [name]: envValue });
+ onChange({ ...values, [name]: envValue });
}
}
@@ -94,11 +96,12 @@ export function getDefaultValues(definitions: Array): Value {
);
}
-export function envVarsFieldsetValidation(): SchemaOf {
- return (
- array()
- .transform((_, orig) => Object.values(orig))
- // casting to return the correct type - validation works as expected
- .of(string().required('Required')) as unknown as SchemaOf
+export function envVarsFieldsetValidation(
+ definitions: Array
+): SchemaOf {
+ return object(
+ Object.fromEntries(
+ definitions.map((v) => [v.name, string().required('Required')])
+ )
);
}
diff --git a/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/StackDeployForm.tsx b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/StackDeployForm.tsx
new file mode 100644
index 000000000..e81e5d34e
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/StackDeployForm.tsx
@@ -0,0 +1,163 @@
+import { useRouter } from '@uirouter/react';
+import { Formik, Form } from 'formik';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+import {
+ SwarmCreatePayload,
+ useCreateStack,
+} from '@/react/common/stacks/queries/useCreateStack/useCreateStack';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { useCurrentUser, useIsEdgeAdmin } from '@/react/hooks/useUser';
+import { AccessControlForm } from '@/react/portainer/access-control';
+import { parseAccessControlFormData } from '@/react/portainer/access-control/utils';
+import { TemplateType } from '@/react/portainer/templates/app-templates/types';
+import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
+import { NameField } from '@/react/common/stacks/CreateView/NameField';
+import { useSwarmId } from '@/react/docker/proxy/queries/useSwarm';
+
+import { Button } from '@@/buttons';
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { EnvVarsFieldset } from '../EnvVarsFieldset';
+
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+import { useIsDeployable } from './useIsDeployable';
+
+export function StackDeployForm({
+ template,
+ unselect,
+}: {
+ template: TemplateViewModel;
+ unselect: () => void;
+}) {
+ const isDeployable = useIsDeployable(template.Type);
+
+ const router = useRouter();
+ const isEdgeAdminQuery = useIsEdgeAdmin();
+
+ const { user } = useCurrentUser();
+ const environmentId = useEnvironmentId();
+ const swarmIdQuery = useSwarmId(environmentId);
+ const mutation = useCreateStack();
+ const validation = useValidation({
+ isAdmin: isEdgeAdminQuery.isAdmin,
+ environmentId,
+ envVarDefinitions: template.Env,
+ });
+
+ if (isEdgeAdminQuery.isLoading) {
+ return null;
+ }
+
+ const initialValues: FormValues = {
+ name: template.Name || '',
+ envVars:
+ Object.fromEntries(template.Env?.map((env) => [env.name, env.value])) ||
+ {},
+ accessControl: parseAccessControlFormData(
+ isEdgeAdminQuery.isAdmin,
+ user.Id
+ ),
+ };
+
+ if (!isDeployable) {
+ return (
+
+
+ This template type cannot be deployed on this environment.
+
+
+ );
+ }
+
+ return (
+
+ {({ values, errors, setFieldValue, isValid }) => (
+
+ )}
+
+ );
+
+ function handleSubmit(values: FormValues) {
+ const type =
+ template.Type === TemplateType.ComposeStack ? 'standalone' : 'swarm';
+ const payload: SwarmCreatePayload['payload'] = {
+ name: values.name,
+ environmentId,
+
+ env: Object.entries(values.envVars).map(([name, value]) => ({
+ name,
+ value,
+ })),
+ swarmId: swarmIdQuery.data || '',
+ git: {
+ RepositoryURL: template.Repository.url,
+ ComposeFilePathInRepository: template.Repository.stackfile,
+ },
+ fromAppTemplate: true,
+ accessControl: values.accessControl,
+ };
+
+ return mutation.mutate(
+ {
+ type,
+ method: 'git',
+ payload,
+ },
+ {
+ onSuccess() {
+ notifySuccess('Success', 'Stack created');
+ router.stateService.go('docker.stacks');
+ },
+ }
+ );
+ }
+}
diff --git a/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/types.ts b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/types.ts
new file mode 100644
index 000000000..d94a2412e
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/types.ts
@@ -0,0 +1,7 @@
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
+
+export interface FormValues {
+ name: string;
+ envVars: Record;
+ accessControl: AccessControlFormData;
+}
diff --git a/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useIsDeployable.ts b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useIsDeployable.ts
new file mode 100644
index 000000000..8e0ea976f
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useIsDeployable.ts
@@ -0,0 +1,19 @@
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { TemplateType } from '@/react/portainer/templates/app-templates/types';
+import { useIsSwarm } from '@/react/docker/proxy/queries/useInfo';
+
+export function useIsDeployable(type: TemplateType) {
+ const environmentId = useEnvironmentId();
+
+ const isSwarm = useIsSwarm(environmentId);
+
+ switch (type) {
+ case TemplateType.ComposeStack:
+ case TemplateType.Container:
+ return true;
+ case TemplateType.SwarmStack:
+ return isSwarm;
+ default:
+ return false;
+ }
+}
diff --git a/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useValidation.ts b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useValidation.ts
new file mode 100644
index 000000000..f8417a0b2
--- /dev/null
+++ b/app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useValidation.ts
@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { SchemaOf, object } from 'yup';
+
+import { accessControlFormValidation } from '@/react/portainer/access-control/AccessControlForm';
+import { useNameValidation } from '@/react/common/stacks/CreateView/NameField';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { envVarsFieldsetValidation } from '../EnvVarsFieldset';
+import { TemplateEnv } from '../../types';
+
+import { FormValues } from './types';
+
+export function useValidation({
+ environmentId,
+ isAdmin,
+ envVarDefinitions,
+}: {
+ isAdmin: boolean;
+ environmentId: EnvironmentId;
+ envVarDefinitions: Array;
+}): SchemaOf {
+ const name = useNameValidation(environmentId);
+
+ return useMemo(
+ () =>
+ object({
+ name,
+ accessControl: accessControlFormValidation(isAdmin),
+ envVars: envVarsFieldsetValidation(envVarDefinitions),
+ }),
+ [envVarDefinitions, isAdmin, name]
+ );
+}
diff --git a/app/react/portainer/templates/app-templates/types.ts b/app/react/portainer/templates/app-templates/types.ts
index b0433ad3c..f63d97435 100644
--- a/app/react/portainer/templates/app-templates/types.ts
+++ b/app/react/portainer/templates/app-templates/types.ts
@@ -1,3 +1,5 @@
+import { RestartPolicy } from 'docker-types/generated/1.41';
+
import { BasicTableSettings } from '@@/datatables/types';
import { Pair } from '../../settings/types';
@@ -152,7 +154,7 @@ export interface AppTemplate {
* Container restart policy.
* @example "on-failure"
*/
- restart_policy?: string;
+ restart_policy?: RestartPolicy['Name'];
/**
* Container hostname.
@@ -181,7 +183,7 @@ export interface TemplateRepository {
/**
* TemplateVolume represents a template volume configuration.
*/
-interface TemplateVolume {
+export interface TemplateVolume {
/**
* Path inside the container.
* @example "/data"
diff --git a/app/react/portainer/templates/app-templates/view-model.ts b/app/react/portainer/templates/app-templates/view-model.ts
index 1fa9a6802..94ea24bc3 100644
--- a/app/react/portainer/templates/app-templates/view-model.ts
+++ b/app/react/portainer/templates/app-templates/view-model.ts
@@ -1,4 +1,5 @@
import _ from 'lodash';
+import { RestartPolicy } from 'docker-types/generated/1.41';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
@@ -47,7 +48,7 @@ export class TemplateViewModel {
Interactive!: boolean;
- RestartPolicy!: string;
+ RestartPolicy!: RestartPolicy['Name'];
Hosts!: string[];
@@ -58,14 +59,14 @@ export class TemplateViewModel {
Volumes!: {
container: string;
readonly: boolean;
- type: string;
+ type: 'bind' | 'auto';
bind: string | null;
}[];
Ports!: {
hostPort: string | undefined;
containerPort: string;
- protocol: string;
+ protocol: 'tcp' | 'udp';
}[];
constructor(template: AppTemplate, version: string) {
@@ -134,7 +135,7 @@ function templatePorts(data: AppTemplate) {
hostAndContainerPort.length > 1
? hostAndContainerPort[1]
: hostAndContainerPort[0],
- protocol: portAndProtocol[1],
+ protocol: portAndProtocol[1] as 'tcp' | 'udp',
};
}) || []
);
@@ -145,7 +146,7 @@ function templateVolumes(data: AppTemplate) {
data.volumes?.map((v) => ({
container: v.container,
readonly: v.readonly || false,
- type: v.bind ? 'bind' : 'auto',
+ type: (v.bind ? 'bind' : 'auto') as 'bind' | 'auto',
bind: v.bind ? v.bind : null,
})) || []
);
diff --git a/app/react/portainer/templates/components/DeployWidget.tsx b/app/react/portainer/templates/components/DeployWidget.tsx
new file mode 100644
index 000000000..16654dd52
--- /dev/null
+++ b/app/react/portainer/templates/components/DeployWidget.tsx
@@ -0,0 +1,40 @@
+import { Rocket } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+
+import { FallbackImage } from '@@/FallbackImage';
+import { Icon } from '@@/Icon';
+import { Widget } from '@@/Widget';
+
+import { TemplateNote } from './TemplateNote';
+
+export function DeployWidget({
+ logo,
+ note,
+ title,
+ children,
+}: PropsWithChildren<{
+ logo?: string;
+ note?: string;
+ title: string;
+}>) {
+ return (
+
+
+
+ } />
+ }
+ title={title}
+ />
+
+
+
+ {children}
+
+
+
+
+
@@ -25,7 +29,11 @@ export function CreateView() {
-
+
@@ -33,3 +41,17 @@ export function CreateView() {