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

refactor(templates): migrate list view to react [EE-2296] (#10999)

refactor/data-cy
Chaim Lev-Ari 2024-04-11 09:29:30 +03:00 committed by GitHub
parent d38085a560
commit 6ff4fd3db2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
103 changed files with 2628 additions and 1315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/docker/__module.js
View File

@ -510,11 +510,10 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
var templates = {
name: 'docker.templates',
url: '/templates',
url: '/templates?template',
views: {
'content@': {
templateUrl: '~Portainer/views/templates/templates.html',
controller: 'TemplatesController',
component: 'appTemplatesView',
},
},
data: {

2
app/docker/react/components/index.ts
View File

@ -26,6 +26,7 @@ import { servicesModule } from './services';
import { networksModule } from './networks';
import { swarmModule } from './swarm';
import { volumesModule } from './volumes';
import { templatesModule } from './templates';
const ngModule = angular
.module('portainer.docker.react.components', [
@ -34,6 +35,7 @@ const ngModule = angular
networksModule,
swarmModule,
volumesModule,
templatesModule,
])
.component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
.component('dockerHealthStatus', r2a(HealthStatus, ['health']))

17
app/docker/react/components/templates.ts Normal file
View File

@ -0,0 +1,17 @@
import angular from 'angular';
import { r2a } from '@/react-tools/react2angular';
import { withCurrentUser } from '@/react-tools/withCurrentUser';
import { withUIRouter } from '@/react-tools/withUIRouter';
import { StackFromCustomTemplateFormWidget } from '@/react/docker/templates/StackFromCustomTemplateFormWidget';
export const templatesModule = angular
.module('portainer.docker.react.components.templates', [])
.component(
'stackFromCustomTemplateFormWidget',
r2a(withUIRouter(withCurrentUser(StackFromCustomTemplateFormWidget)), [
'template',
'unselect',
])
).name;

18
app/docker/services/containerService.js
View File

@ -112,24 +112,6 @@ function ContainerServiceFactory($q, Container, $timeout) {
return deferred.promise;
};
service.createAndStartContainer = function (environmentId, configuration) {
var deferred = $q.defer();
var container;
service
.createContainer(environmentId, configuration)
.then(function success(data) {
container = data;
return service.startContainer(environmentId, container.Id);
})
.then(function success() {
deferred.resolve(container);
})
.catch(function error(err) {
deferred.reject(err);
});
return deferred.promise;
};
service.createExec = function (environmentId, execConfig) {
var deferred = $q.defer();

8
app/docker/services/volumeService.js
View File

@ -92,14 +92,6 @@ angular.module('portainer.docker').factory('VolumeService', [
return $q.all(createVolumeQueries);
};
service.createXAutoGeneratedLocalVolumes = function (x) {
var createVolumeQueries = [];
for (var i = 0; i < x; i++) {
createVolumeQueries.push(service.createVolume({ Driver: 'local' }));
}
return $q.all(createVolumeQueries);
};
return service;
},
]);

2
app/edge/__module.js
View File

@ -154,7 +154,7 @@ angular
url: '/templates?template',
views: {
'content@': {
component: 'edgeAppTemplatesView',
component: 'appTemplatesView',
},
},
data: {

17
app/edge/react/views/templates.ts
View File

@ -4,25 +4,10 @@ import { r2a } from '@/react-tools/react2angular';
import { withCurrentUser } from '@/react-tools/withCurrentUser';
import { withUIRouter } from '@/react-tools/withUIRouter';
import { ListView } from '@/react/edge/templates/custom-templates/ListView';
import { AppTemplatesView } from '@/react/edge/templates/AppTemplatesView';
import { CreateView } from '@/react/portainer/templates/custom-templates/CreateView';
import { EditView } from '@/react/portainer/templates/custom-templates/EditView';
export const templatesModule = angular
.module('portainer.app.react.components.templates', [])
.component(
'edgeAppTemplatesView',
r2a(withCurrentUser(withUIRouter(AppTemplatesView)), [])
)
.module('portainer.edge.react.views.templates', [])
.component(
'edgeCustomTemplatesView',
r2a(withCurrentUser(withUIRouter(ListView)), [])
)
.component(
'createCustomTemplatesView',
r2a(withCurrentUser(withUIRouter(CreateView)), [])
)
.component(
'editCustomTemplatesView',
r2a(withCurrentUser(withUIRouter(EditView)), [])
).name;

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

@ -17,7 +17,7 @@ import { getInitialTemplateValues } from '@/react/edge/edge-stacks/CreateView/Te
import { getAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
import { fetchFilePreview } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
import { getDefaultValues as getAppVariablesDefaultValues } from '@/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset';
import { getDefaultValues as getAppVariablesDefaultValues } from '@/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
export default class CreateEdgeStackViewController {
/* @ngInject */

16
app/portainer/components/forms/stack-from-template-form/index.js
View File

@ -1,16 +0,0 @@
import angular from 'angular';
angular.module('portainer.app').component('stackFromTemplateForm', {
templateUrl: './stackFromTemplateForm.html',
bindings: {
template: '=',
formValues: '=',
state: '=',
createTemplate: '<',
unselectTemplate: '<',
nameRegex: '<',
},
transclude: {
advanced: '?advancedForm',
},
});

95
app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
View File

@ -1,95 +0,0 @@
<div class="col-sm-12">
<rd-widget>
<rd-widget-custom-header icon="$ctrl.template.Logo" title-text="$ctrl.template.Title"></rd-widget-custom-header>
<rd-widget-body classes="padding">
<form class="form-horizontal" name="stackTemplateForm">
<!-- description -->
<div ng-if="$ctrl.template.Note">
<div class="form-section-title"> Information </div>
<div class="col-sm-12 form-group">
<div class="template-note" ng-bind-html="$ctrl.template.Note"></div>
</div>
</div>
<!-- !description -->
<div class="form-section-title"> Configuration </div>
<!-- name-input -->
<div class="form-group">
<label for="template_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-6">
<input
type="text"
name="template_name"
class="form-control"
ng-model="$ctrl.formValues.name"
ng-pattern="$ctrl.nameRegex"
placeholder="e.g. myStack"
required
data-cy="stack-name-input"
/>
<div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="stackTemplateForm.template_name.$error">
<p ng-message="pattern" class="vertical-center">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
<span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
</p>
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>This field is required. </p>
</div>
</div>
</div>
</div>
</div>
<!-- !name-input -->
<!-- env -->
<div ng-repeat="var in $ctrl.template.Env" ng-if="!var.preset || var.select" class="form-group">
<label for="field_{{ $index }}" class="col-sm-2 control-label text-left">
{{ var.label }}
<portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="stackFromTemplateForm-input" />
<select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="stackFromTemplateForm-select">
<option selected disabled hidden value="">Select value</option>
<option ng-repeat="choice in var.select" value="{{ choice.value }}">{{ choice.text }}</option>
</select>
</div>
</div>
<!-- !env -->
<ng-transclude ng-transclude-slot="advanced"></ng-transclude>
<!-- access-control -->
<por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>
<!-- !access-control -->
<!-- actions -->
<div class="form-section-title"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary"
ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.name || !$ctrl.state.deployable || stackTemplateForm.$invalid"
ng-click="$ctrl.createTemplate()"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
<span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button>
<div class="form-group" ng-if="$ctrl.state.formValidationError">
<div class="col-sm-12 small text-danger" ng-if="$ctrl.state.formValidationError">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>{{ $ctrl.state.formValidationError }} </p>
</div>
</div>
<div class="form-group" ng-if="!$ctrl.state.deployable">
<div class="col-sm-12 small text-danger" ng-if="!$ctrl.state.deployable">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>This template type cannot be deployed on this environment. </p>
</div>
</div>
</div>
</div>
<!-- !actions -->
</form>
</rd-widget-body>
</rd-widget>
</div>

127
app/portainer/helpers/templateHelper.js
View File

@ -1,127 +0,0 @@
import _ from 'lodash-es';
angular.module('portainer.app').factory('TemplateHelper', [
function TemplateHelperFactory() {
'use strict';
var helper = {};
helper.getDefaultContainerConfiguration = function () {
return {
Env: [],
OpenStdin: false,
Tty: false,
ExposedPorts: {},
HostConfig: {
RestartPolicy: {
Name: 'no',
},
PortBindings: {},
Binds: [],
Privileged: false,
ExtraHosts: [],
},
Volumes: {},
Labels: {},
};
};
helper.portArrayToPortConfiguration = function (ports) {
var portConfiguration = {
bindings: {},
exposedPorts: {},
};
ports.forEach(function (p) {
if (p.containerPort) {
var key = p.containerPort + '/' + p.protocol;
var binding = {};
if (p.hostPort) {
binding.HostPort = p.hostPort;
if (p.hostPort.indexOf(':') > -1) {
var hostAndPort = p.hostPort.split(':');
binding.HostIp = hostAndPort[0];
binding.HostPort = hostAndPort[1];
}
}
portConfiguration.bindings[key] = [binding];
portConfiguration.exposedPorts[key] = {};
}
});
return portConfiguration;
};
helper.updateContainerConfigurationWithLabels = function (labelsArray) {
var labels = {};
labelsArray.forEach(function (l) {
if (l.name) {
if (l.value) {
labels[l.name] = l.value;
} else {
labels[l.name] = '';
}
}
});
return labels;
};
helper.EnvToStringArray = function (templateEnvironment) {
var env = [];
templateEnvironment.forEach(function (envvar) {
if (envvar.value || envvar.set) {
var value = envvar.set ? envvar.set : envvar.value;
env.push(envvar.name + '=' + value);
}
});
return env;
};
helper.getConsoleConfiguration = function (interactiveFlag) {
var consoleConfiguration = {
openStdin: false,
tty: false,
};
if (interactiveFlag === true) {
consoleConfiguration.openStdin = true;
consoleConfiguration.tty = true;
}
return consoleConfiguration;
};
helper.createVolumeBindings = function (volumes, generatedVolumesPile) {
volumes.forEach(function (volume) {
if (volume.container) {
var binding;
if (volume.type === 'auto') {
binding = generatedVolumesPile.pop().Id + ':' + volume.container;
} else if (volume.type !== 'auto' && volume.bind) {
binding = volume.bind + ':' + volume.container;
}
if (volume.readonly) {
binding += ':ro';
}
volume.binding = binding;
}
});
};
helper.determineRequiredGeneratedVolumeCount = function (volumes) {
var count = 0;
volumes.forEach(function (volume) {
if (volume.type === 'auto') {
++count;
}
});
return count;
};
helper.getUniqueCategories = function (templates) {
var categories = [];
for (var i = 0; i < templates.length; i++) {
var template = templates[i];
categories = categories.concat(template.Categories);
}
return _.uniq(categories);
};
return helper;
},
]);

13
app/portainer/react/components/custom-templates/index.ts
View File

@ -13,7 +13,6 @@ import {
import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
import { withFormValidation } from '@/react-tools/withFormValidation';
import { AppTemplatesList } from '@/react/portainer/templates/app-templates/AppTemplatesList';
import { CustomTemplatesList } from '@/react/portainer/templates/custom-templates/ListView/CustomTemplatesList';
import { VariablesFieldAngular } from './variables-field';
@ -39,18 +38,6 @@ export const ngModule = angular
'isVariablesNamesFromParent',
])
)
.component(
'appTemplatesList',
r2a(withUIRouter(withCurrentUser(AppTemplatesList)), [
'onSelect',
'templates',
'selectedId',
'disabledTypes',
'fixedCategories',
'storageKey',
'templateLinkParams',
])
)
.component(
'customTemplatesList',
r2a(withUIRouter(withCurrentUser(CustomTemplatesList)), [

2
app/portainer/react/views/index.ts
View File

@ -19,6 +19,7 @@ import { updateSchedulesModule } from './update-schedules';
import { environmentGroupModule } from './env-groups';
import { registriesModule } from './registries';
import { activityLogsModule } from './activity-logs';
import { templatesModule } from './templates';
export const viewsModule = angular
.module('portainer.app.react.views', [
@ -28,6 +29,7 @@ export const viewsModule = angular
environmentGroupModule,
registriesModule,
activityLogsModule,
templatesModule,
])
.component(
'homeView',

23
app/portainer/react/views/templates.ts Normal file
View File

@ -0,0 +1,23 @@
import angular from 'angular';
import { r2a } from '@/react-tools/react2angular';
import { withCurrentUser } from '@/react-tools/withCurrentUser';
import { withUIRouter } from '@/react-tools/withUIRouter';
import { CreateView } from '@/react/portainer/templates/custom-templates/CreateView';
import { EditView } from '@/react/portainer/templates/custom-templates/EditView';
import { AppTemplatesView } from '@/react/portainer/templates/app-templates/AppTemplatesView';
export const templatesModule = angular
.module('portainer.app.react.views.templates', [])
.component(
'appTemplatesView',
r2a(withCurrentUser(withUIRouter(AppTemplatesView)), [])
)
.component(
'createCustomTemplatesView',
r2a(withCurrentUser(withUIRouter(CreateView)), [])
)
.component(
'editCustomTemplatesView',
r2a(withCurrentUser(withUIRouter(EditView)), [])
).name;

41
app/portainer/services/api/templateService.js
View File

@ -1,11 +1,10 @@
import { commandStringToArray } from '@/docker/helpers/containers';
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
import { DockerHubViewModel } from 'Portainer/models/dockerhub';
angular.module('portainer.app').factory('TemplateService', TemplateServiceFactory);
/* @ngInject */
function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, ContainerHelper, EndpointService) {
function TemplateServiceFactory($q, Templates, EndpointService) {
var service = {
templates,
};
@ -45,43 +44,5 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont
return Templates.file({ repositoryUrl, composeFilePathInRepository }).$promise;
}
service.createTemplateConfiguration = function (template, containerName, network) {
var imageConfiguration = ImageHelper.createImageConfigForContainer(template.RegistryModel);
var containerConfiguration = createContainerConfiguration(template, containerName, network);
containerConfiguration.Image = imageConfiguration.fromImage;
return containerConfiguration;
};
function createContainerConfiguration(template, containerName, network) {
var configuration = TemplateHelper.getDefaultContainerConfiguration();
configuration.HostConfig.NetworkMode = network.Name;
configuration.HostConfig.Privileged = template.Privileged;
configuration.HostConfig.RestartPolicy = { Name: template.RestartPolicy };
configuration.HostConfig.ExtraHosts = template.Hosts ? template.Hosts : [];
configuration.name = containerName;
configuration.Hostname = template.Hostname;
configuration.Env = TemplateHelper.EnvToStringArray(template.Env);
configuration.Cmd = commandStringToArray(template.Command);
var portConfiguration = TemplateHelper.portArrayToPortConfiguration(template.Ports);
configuration.HostConfig.PortBindings = portConfiguration.bindings;
configuration.ExposedPorts = portConfiguration.exposedPorts;
var consoleConfiguration = TemplateHelper.getConsoleConfiguration(template.Interactive);
configuration.OpenStdin = consoleConfiguration.openStdin;
configuration.Tty = consoleConfiguration.tty;
configuration.Labels = TemplateHelper.updateContainerConfigurationWithLabels(template.Labels);
return configuration;
}
service.updateContainerConfigurationWithVolumes = function (configuration, template, generatedVolumesPile) {
var volumes = template.Volumes;
TemplateHelper.createVolumeBindings(volumes, generatedVolumesPile);
volumes.forEach(function (volume) {
if (volume.binding) {
configuration.Volumes[volume.container] = {};
configuration.HostConfig.Binds.push(volume.binding);
}
});
};
return service;
}

67
app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
View File

@ -1,67 +1,10 @@
<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"> </page-header>
<div class="row">
<stack-from-template-form
ng-if="$ctrl.state.selectedTemplate"
template="$ctrl.state.selectedTemplate"
form-values="$ctrl.formValues"
name-regex="$ctrl.state.templateNameRegex"
state="$ctrl.state"
create-template="$ctrl.createStack"
unselect-template="$ctrl.unselectTemplate"
>
<advanced-form>
<custom-templates-variables-field
ng-if="$ctrl.isTemplateVariablesEnabled"
definitions="$ctrl.state.selectedTemplate.Variables"
value="$ctrl.formValues.variables"
on-change="($ctrl.onChangeTemplateVariables)"
></custom-templates-variables-field>
<div class="form-group" ng-if="$ctrl.state.selectedTemplate && !$ctrl.state.templateLoadFailed">
<div class="col-sm-12">
<a class="small interactive vertical-center" ng-show="!$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = true;">
<pr-icon icon="'plus'" class-name="space-right" feather="true"></pr-icon> {{ $ctrl.state.selectedTemplate.GitConfig !== null ? 'View' : 'Customize' }} stack
</a>
<a class="small interactive vertical-center" ng-show="$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = false;">
<pr-icon icon="'minus'" class-name="space-right" feather="true"></pr-icon> Hide {{ $ctrl.state.selectedTemplate.GitConfig === null ? 'custom' : '' }} stack
</a>
</div>
</div>
<span ng-if="$ctrl.state.selectedTemplate && $ctrl.state.templateLoadFailed">
<p class="small vertical-center text-danger mb-5" ng-if="$ctrl.currentUser.isAdmin || $ctrl.currentUser.id === $ctrl.state.selectedTemplate.CreatedByUserId">
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
<a ui-sref="docker.templates.custom.edit({id: $ctrl.state.selectedTemplate.Id})">click here</a> for configuration.</p
>
<p class="small vertical-center text-danger mb-5" ng-if="!($ctrl.currentUser.isAdmin || $ctrl.currentUser.id === $ctrl.state.selectedTemplate.CreatedByUserId)">
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
>
</span>
<!-- web-editor -->
<web-editor-form
ng-if="$ctrl.state.showAdvancedOptions"
identifier="custom-template-creation-editor"
value="$ctrl.formValues.fileContent"
on-change="($ctrl.editorUpdate)"
ng-required="true"
yml="true"
placeholder="Define or paste the content of your docker compose file here"
read-only="$ctrl.state.isEditorReadOnly"
>
<editor-description>
<p>
You can get more information about Compose file format in the
<a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
.
</p>
</editor-description>
</web-editor-form>
<!-- !web-editor -->
</advanced-form>
</stack-from-template-form>
</div>
<stack-from-custom-template-form-widget
ng-if="$ctrl.state.selectedTemplate"
template="$ctrl.state.selectedTemplate"
unselect="$ctrl.unselectTemplate"
></stack-from-custom-template-form-widget>
<custom-templates-list
templates="$ctrl.templates"

2
app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
View File

@ -228,6 +228,8 @@ class CustomTemplatesViewController {
const variables = getVariablesFieldDefaultValues(template.Variables);
this.onChangeTemplateVariables(variables);
}
window.scrollTo({ top: 0, behavior: 'smooth' });
}
getNetworks(provider, apiVersion) {

292
app/portainer/views/templates/templates.html
View File

@ -1,292 +0,0 @@
<page-header id="'view-top'" title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
<div class="row">
<!-- stack-form -->
<stack-from-template-form
ng-if="state.selectedTemplate && (state.selectedTemplate.Type === 2 || state.selectedTemplate.Type === 3)"
template="state.selectedTemplate"
form-values="formValues"
state="state"
create-template="createTemplate"
unselect-template="unselectTemplate"
>
</stack-from-template-form>
<!-- !stack-form -->
<!-- container-form -->
<div class="col-sm-12" ng-if="state.selectedTemplate && state.selectedTemplate.Type === 1">
<rd-widget>
<rd-widget-custom-header icon="state.selectedTemplate.Logo" title-text="state.selectedTemplate.Title"> </rd-widget-custom-header>
<rd-widget-body classes="padding">
<form class="form-horizontal" name="selectedTemplateType1">
<!-- description -->
<div ng-if="state.selectedTemplate.Note">
<div class="form-section-title"> Information </div>
<div class="col-sm-12 form-group">
<div class="template-note" ng-bind-html="state.selectedTemplate.Note"></div>
</div>
</div>
<!-- !description -->
<div class="form-section-title"> Configuration </div>
<!-- name-input -->
<div class="form-group">
<label for="container_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-6">
<input type="text" name="container_name" class="form-control" ng-model="formValues.name" placeholder="e.g. web (optional)" data-cy="container-name-input" />
</div>
</div>
<!-- !name-input -->
<!-- network-input -->
<div class="form-group">
<label for="container_network" class="col-sm-2 control-label text-left">Network</label>
<div class="col-sm-6">
<select class="form-control" ng-options="net.Name for net in availableNetworks | orderBy: 'Name'" ng-model="formValues.network" data-cy="network-select">
<option disabled hidden value="">Select a network</option>
</select>
</div>
</div>
<!-- !network-input -->
<!-- env -->
<div ng-repeat="var in state.selectedTemplate.Env" ng-if="!var.preset || var.select" class="form-group">
<label for="field_{{ $index }}" class="col-sm-2 control-label text-left">
{{ var.label }}
<portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="env-input-{{ $index}" />
<select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}" data-cy="env-select-{{ $index }}">
<option selected disabled hidden value="">Select value</option>
<option ng-repeat="choice in var.select" value="{{ choice.value }}">{{ choice.text }}</option>
</select>
</div>
</div>
<!-- !env -->
<!-- access-control -->
<por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
<!-- !access-control -->
<div class="form-group col-sm-12">
<a class="small interactive vertical-center" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;">
<pr-icon icon="'plus'"></pr-icon> Show advanced options
</a>
<a class="small interactive vertical-center" ng-if="state.showAdvancedOptions" ng-click="state.showAdvancedOptions = false;">
<pr-icon icon="'minus'"></pr-icon> Hide advanced options
</a>
</div>
<div ng-if="state.showAdvancedOptions">
<!-- port-mapping -->
<div class="form-group mt-2">
<div class="col-sm-12">
<label class="control-label text-left">Port mapping</label>
<div class="mt-1" ng-if="state.selectedTemplate.Ports.length > 0">
<div class="small text-muted">Portainer will automatically assign a port if you leave the host port empty.</div>
<div class="form-inline mt-2" ng-repeat="portBinding in state.selectedTemplate.Ports">
<!-- host-port -->
<div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">host</span>
<input
type="text"
class="form-control"
ng-model="portBinding.hostPort"
placeholder="e.g. 80 or 1.2.3.4:80 (optional)"
data-cy="host-port-input-{{ $index }}"
/>
</div>
<!-- !host-port -->
<pr-icon icon="'arrow-right'"></pr-icon>
<!-- container-port -->
<div class="input-group col-sm-4 input-group-sm">
<span class="input-group-addon">container</span>
<input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80" data-cy="container-port-input-{{ $index }}" />
</div>
<!-- !container-port -->
<!-- protocol-actions -->
<div class="input-group col-sm-3 input-group-sm">
<div class="btn-group btn-group-sm">
<label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
<label class="btn btn-light" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
</div>
<button class="btn btn-light" type="button" ng-click="removePortBinding($index)">
<pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
<!-- !protocol-actions -->
</div>
</div>
<div class="col-sm-12">
<span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addPortBinding()">
<pr-icon icon="'plus'"></pr-icon> Add map additional port
</span>
</div>
</div>
</div>
<!-- !port-mapping -->
<!-- volume-mapping -->
<div class="form-group mt-4">
<div class="col-sm-12">
<label class="control-label text-left">Volume mapping</label>
<div class="mt-1" ng-if="state.selectedTemplate.Volumes.length > 0">
<div class="small text-muted">Portainer will automatically create and map a local volume when using the <b>auto</b> option.</div>
<div class="mt-2" ng-repeat="volume in state.selectedTemplate.Volumes">
<!-- volume-line1 -->
<div class="form-inline">
<!-- container-path -->
<div class="input-group input-group-sm col-sm-6">
<span class="input-group-addon">container</span>
<input type="text" class="form-control" ng-model="volume.container" placeholder="e.g. /path/in/container" data-cy="container-path-input-{{ $index }}" />
</div>
<!-- !container-path -->
<!-- volume-type -->
<div class="input-group col-sm-5 space-left">
<div class="btn-group btn-group-sm">
<label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'auto'" ng-click="volume.bind = ''">Auto</label>
<label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'volume'" ng-click="volume.bind = ''">Volume</label>
<label class="btn btn-light" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.bind = ''" ng-if="isAdmin || allowBindMounts">Bind</label>
</div>
<button class="btn btn-light" type="button" ng-click="removeVolume($index)">
<pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
<!-- !volume-type -->
</div>
<!-- !volume-line1 -->
<!-- volume-line2 -->
<div class="form-inline mt-1" ng-if="volume.type !== 'auto'">
<pr-icon icon="'arrow-right'"></pr-icon>
<!-- volume -->
<div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'volume'">
<div class="col-sm-12 input-group">
<span class="input-group-addon">volume</span>
<div class="col-sm-12 input-group">
<select class="form-control" ng-model="volume.bind" ng-options="vol.Name as vol.Name for vol in availableVolumes" data-cy="volume-bind-select">
<option value="" disabled selected>Select a volume</option>
</select>
</div>
</div>
</div>
<!-- !volume -->
<!-- bind -->
<div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'bind'">
<span class="input-group-addon">host</span>
<input type="text" class="form-control" ng-model="volume.bind" placeholder="e.g. /path/on/host" data-cy="host-path-input-{{ $index }}" />
</div>
<!-- !bind -->
<!-- read-only -->
<div class="input-group input-group-sm col-sm-5 space-left">
<div class="btn-group btn-group-sm">
<label class="btn btn-light" ng-model="volume.readonly" uib-btn-radio="false">Writable</label>
<label class="btn btn-light" ng-model="volume.readonly" uib-btn-radio="true">Read-only</label>
</div>
</div>
<!-- !read-only -->
</div>
<!-- !volume-line2 -->
</div>
</div>
<div class="col-sm-12">
<span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addVolume()">
<pr-icon icon="'plus'"></pr-icon> Add map additional volume
</span>
</div>
</div>
</div>
<!-- !volume-mapping -->
<!-- extra-host -->
<div class="form-group mt-4">
<div class="col-sm-12">
<label class="control-label text-left">Hosts file entries</label>
<!-- extra-host-input-list -->
<div class="mt-1" ng-if="state.selectedTemplate.Hosts.length > 0">
<div class="form-inline mt-2" ng-repeat="(idx, host) in state.selectedTemplate.Hosts track by $index">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="state.selectedTemplate.Hosts[idx]" placeholder="e.g. host:IP" data-cy="host-input-{{ $index }}" />
</div>
<button class="btn btn-light" type="button" ng-click="removeExtraHost($index)">
<pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
</div>
<div class="col-sm-12">
<span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addExtraHost()">
<pr-icon icon="'plus'"></pr-icon> Add additional entry
</span>
</div>
</div>
</div>
<!-- !extra-host -->
<!-- labels -->
<div class="form-group mt-4">
<div class="col-sm-12">
<label class="control-label text-left">Labels</label>
<!-- labels-input-list -->
<div class="mt-1" ng-if="state.selectedTemplate.Labels.length > 0">
<div class="form-inline mt-2" ng-repeat="label in state.selectedTemplate.Labels">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" data-cy="label-name-input-{{ $index }}" />
</div>
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="label-value-input-{{ $index }}" />
</div>
<button class="btn btn-light" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
</div>
<!-- !labels-input-list -->
<div class="col-sm-12">
<span class="form-group small interactive text-muted vertical-center mt-2" ng-click="addLabel()"> <pr-icon icon="'plus'"></pr-icon> Add label </span>
</div>
</div>
</div>
<!-- !labels -->
<!-- hostname -->
<div class="form-group mt-4">
<label for="container_hostname" class="col-sm-2 control-label text-left">Hostname</label>
<div class="col-sm-6">
<input
type="text"
name="container_hostname"
class="form-control"
ng-model="state.selectedTemplate.Hostname"
placeholder="leave empty to use docker default"
data-cy="hostname-input"
/>
</div>
</div>
<!-- !hostname -->
</div>
<!-- !advanced-options -->
<!-- actions -->
<div class="form-section-title"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary"
ng-disabled="state.actionInProgress || !formValues.network"
ng-click="createTemplate()"
button-spinner="state.actionInProgress"
>
<span ng-hide="state.actionInProgress">Deploy the container</span>
<span ng-show="state.actionInProgress">Deployment in progress...</span>
</button>
<button type="button" class="btn btn-default" ng-click="unselectTemplate(state.selectedTemplate)">Hide</button>
<span class="text-danger space-left" ng-if="state.formValidationError">{{ state.formValidationError }}</span>
</div>
</div>
<!-- !actions -->
</form>
</rd-widget-body>
</rd-widget>
</div>
<!-- container-form -->
</div>
<app-templates-list
storage-key="'docker-app-templates'"
templates="templates"
on-select="(selectTemplate)"
selected-id="state.selectedTemplate.Id"
disabled-types="disabledTypes"
></app-templates-list>

317
app/portainer/views/templates/templatesController.js
View File

@ -1,317 +0,0 @@
import _ from 'lodash-es';
import { TemplateType } from '@/react/portainer/templates/app-templates/types';
import { AccessControlFormData } from '../../components/accessControlForm/porAccessControlFormModel';
angular.module('portainer.app').controller('TemplatesController', [
'$scope',
'$q',
'$state',
'$anchorScroll',
'ContainerService',
'ImageService',
'NetworkService',
'TemplateService',
'TemplateHelper',
'VolumeService',
'Notifications',
'ResourceControlService',
'Authentication',
'FormValidator',
'StackService',
'endpoint',
'$async',
function (
$scope,
$q,
$state,
$anchorScroll,
ContainerService,
ImageService,
NetworkService,
TemplateService,
TemplateHelper,
VolumeService,
Notifications,
ResourceControlService,
Authentication,
FormValidator,
StackService,
endpoint,
$async
) {
const DOCKER_STANDALONE = 'DOCKER_STANDALONE';
const DOCKER_SWARM_MODE = 'DOCKER_SWARM_MODE';
$scope.state = {
selectedTemplate: null,
showAdvancedOptions: false,
formValidationError: '',
actionInProgress: false,
};
$scope.enabledTypes = [TemplateType.Container, TemplateType.ComposeStack];
$scope.formValues = {
network: '',
name: '',
AccessControlData: new AccessControlFormData(),
};
$scope.addVolume = function () {
$scope.state.selectedTemplate.Volumes.push({ containerPath: '', bind: '', readonly: false, type: 'auto' });
};
$scope.removeVolume = function (index) {
$scope.state.selectedTemplate.Volumes.splice(index, 1);
};
$scope.addPortBinding = function () {
$scope.state.selectedTemplate.Ports.push({ hostPort: '', containerPort: '', protocol: 'tcp' });
};
$scope.removePortBinding = function (index) {
$scope.state.selectedTemplate.Ports.splice(index, 1);
};
$scope.addExtraHost = function () {
$scope.state.selectedTemplate.Hosts.push('');
};
$scope.removeExtraHost = function (index) {
$scope.state.selectedTemplate.Hosts.splice(index, 1);
};
$scope.addLabel = function () {
$scope.state.selectedTemplate.Labels.push({ name: '', value: '' });
};
$scope.removeLabel = function (index) {
$scope.state.selectedTemplate.Labels.splice(index, 1);
};
function validateForm(accessControlData, isAdmin) {
$scope.state.formValidationError = '';
var error = '';
error = FormValidator.validateAccessControl(accessControlData, isAdmin);
if (error) {
$scope.state.formValidationError = error;
return false;
}
return true;
}
function createContainerFromTemplate(template, userId, accessControlData) {
var templateConfiguration = createTemplateConfiguration(template);
var generatedVolumeCount = TemplateHelper.determineRequiredGeneratedVolumeCount(template.Volumes);
var generatedVolumeIds = [];
VolumeService.createXAutoGeneratedLocalVolumes(generatedVolumeCount)
.then(function success(data) {
angular.forEach(data, function (volume) {
var volumeId = volume.Id;
generatedVolumeIds.push(volumeId);
});
TemplateService.updateContainerConfigurationWithVolumes(templateConfiguration, template, data);
return ImageService.pullImage(template.RegistryModel, true);
})
.then(function success() {
return ContainerService.createAndStartContainer(endpoint.Id, templateConfiguration);
})
.then(function success(data) {
const resourceControl = data.Portainer.ResourceControl;
return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl, generatedVolumeIds);
})
.then(function success() {
Notifications.success('Success', 'Container successfully created');
$state.go('docker.containers', {}, { reload: true });
})
.catch(function error(err) {
Notifications.error('Failure', err, err.msg);
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
}
function createComposeStackFromTemplate(template, userId, accessControlData) {
var stackName = $scope.formValues.name;
for (var i = 0; i < template.Env.length; i++) {
var envvar = template.Env[i];
if (envvar.preset) {
envvar.value = envvar.default;
}
}
var repositoryOptions = {
RepositoryURL: template.Repository.url,
ComposeFilePathInRepository: template.Repository.stackfile,
FromAppTemplate: true,
};
const endpointId = +$state.params.endpointId;
StackService.createComposeStackFromGitRepository(stackName, repositoryOptions, template.Env, endpointId)
.then(function success(data) {
const resourceControl = data.ResourceControl;
return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
})
.then(function success() {
Notifications.success('Success', 'Stack successfully deployed');
$state.go('docker.stacks');
})
.catch(function error(err) {
Notifications.error('Deployment error', err);
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
}
function createStackFromTemplate(template, userId, accessControlData) {
var stackName = $scope.formValues.name;
var env = _.filter(
_.map(template.Env, function transformEnvVar(envvar) {
return {
name: envvar.name,
value: envvar.preset || !envvar.value ? envvar.default : envvar.value,
};
}),
function removeUndefinedVars(envvar) {
return envvar.value && envvar.name;
}
);
var repositoryOptions = {
RepositoryURL: template.Repository.url,
ComposeFilePathInRepository: template.Repository.stackfile,
FromAppTemplate: true,
};
const endpointId = +$state.params.endpointId;
StackService.createSwarmStackFromGitRepository(stackName, repositoryOptions, env, endpointId)
.then(function success(data) {
const resourceControl = data.ResourceControl;
return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
})
.then(function success() {
Notifications.success('Success', 'Stack successfully deployed');
$state.go('docker.stacks');
})
.catch(function error(err) {
Notifications.error('Deployment error', err);
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
}
$scope.createTemplate = function () {
var userDetails = Authentication.getUserDetails();
var userId = userDetails.ID;
var accessControlData = $scope.formValues.AccessControlData;
if (!validateForm(accessControlData, $scope.isAdmin)) {
return;
}
var template = $scope.state.selectedTemplate;
$scope.state.actionInProgress = true;
if (template.Type === 2) {
createStackFromTemplate(template, userId, accessControlData);
} else if (template.Type === 3) {
createComposeStackFromTemplate(template, userId, accessControlData);
} else {
createContainerFromTemplate(template, userId, accessControlData);
}
};
$scope.unselectTemplate = function () {
return $async(async () => {
$scope.state.selectedTemplate = null;
});
};
$scope.selectTemplate = function (template) {
return $async(async () => {
if ($scope.state.selectedTemplate) {
await $scope.unselectTemplate($scope.state.selectedTemplate);
}
if (template.Network) {
$scope.formValues.network = _.find($scope.availableNetworks, function (o) {
return o.Name === template.Network;
});
} else {
$scope.formValues.network = _.find($scope.availableNetworks, function (o) {
return o.Name === 'bridge';
});
}
$scope.formValues.name = template.Name ? template.Name : '';
$scope.state.selectedTemplate = template;
$scope.state.deployable = isDeployable($scope.applicationState.endpoint, template.Type);
$anchorScroll('view-top');
});
};
function isDeployable(endpoint, templateType) {
let deployable = false;
switch (templateType) {
case 1:
deployable = endpoint.mode.provider === DOCKER_SWARM_MODE || endpoint.mode.provider === DOCKER_STANDALONE;
break;
case 2:
deployable = endpoint.mode.provider === DOCKER_SWARM_MODE;
break;
case 3:
deployable = endpoint.mode.provider === DOCKER_SWARM_MODE || endpoint.mode.provider === DOCKER_STANDALONE;
break;
}
return deployable;
}
function createTemplateConfiguration(template) {
var network = $scope.formValues.network;
var name = $scope.formValues.name;
return TemplateService.createTemplateConfiguration(template, name, network);
}
function initView() {
$scope.isAdmin = Authentication.isAdmin();
var endpointMode = $scope.applicationState.endpoint.mode;
var apiVersion = $scope.applicationState.endpoint.apiVersion;
const endpointId = +$state.params.endpointId;
const showSwarmStacks = endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER' && apiVersion >= 1.25;
$scope.disabledTypes = !showSwarmStacks ? [TemplateType.SwarmStack] : [];
$q.all({
templates: TemplateService.templates(endpointId),
volumes: VolumeService.getVolumes(),
networks: NetworkService.networks(
endpointMode.provider === 'DOCKER_STANDALONE' || endpointMode.provider === 'DOCKER_SWARM_MODE',
false,
endpointMode.provider === 'DOCKER_SWARM_MODE' && apiVersion >= 1.25
),
})
.then(function success(data) {
var templates = data.templates;
$scope.templates = templates;
$scope.availableVolumes = _.orderBy(data.volumes.Volumes, [(volume) => volume.Name.toLowerCase()], ['asc']);
var networks = data.networks;
$scope.availableNetworks = networks;
$scope.allowBindMounts = endpoint.SecuritySettings.allowBindMountsForRegularUsers;
})
.catch(function error(err) {
$scope.templates = [];
Notifications.error('Failure', err, 'An error occurred during apps initialization.');
});
}
initView();
},
]);

58
app/react/common/stacks/CreateView/NameField.tsx Normal file
View File

@ -0,0 +1,58 @@
import { FormikErrors } from 'formik';
import { SchemaOf, string } from 'yup';
import { useMemo } from 'react';
import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { useStacks } from '../queries/useStacks';
export function NameField({
onChange,
value,
errors,
}: {
onChange(value: string): void;
value: string;
errors?: FormikErrors<string>;
}) {
return (
<FormControl inputId="name-input" label="Name" errors={errors} required>
<Input
id="name-input"
onChange={(e) => onChange(e.target.value)}
value={value}
required
data-cy="stack-name-input"
/>
</FormControl>
);
}
export function useNameValidation(
environmentId: EnvironmentId
): SchemaOf<string> {
const stacksQuery = useStacks();
return useMemo(
() =>
string()
.required('Name is required')
.test(
'unique',
'Name should be unique',
(value) =>
stacksQuery.data?.every(
(s) => s.EndpointId !== environmentId || s.Name !== value
) ?? true
)
.matches(
new RegExp(STACK_NAME_VALIDATION_REGEX),
"This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123')."
),
[environmentId, stacksQuery.data]
);
}

7
app/react/common/stacks/queries/buildUrl.ts Normal file
View File

@ -0,0 +1,7 @@
import { Stack } from '../types';
export function buildStackUrl(id?: Stack['Id'], action?: string) {
const baseUrl = '/stacks';
const url = id ? `${baseUrl}/${id}` : baseUrl;
return action ? `${url}/${action}` : url;
}

3
app/react/common/stacks/queries/query-keys.ts Normal file
View File

@ -0,0 +1,3 @@
export const queryKeys = {
base: () => ['stacks'],
};

14
app/react/common/stacks/queries/useCreateStack/buildUrl.ts Normal file
View File

@ -0,0 +1,14 @@
import { buildStackUrl } from '../buildUrl';
export function buildCreateUrl(
stackType: 'kubernetes',
method: 'repository' | 'url' | 'string'
): string;
export function buildCreateUrl(
stackType: 'swarm' | 'standalone',
method: 'repository' | 'string' | 'file'
): string;
export function buildCreateUrl(stackType: string, method: string) {
return buildStackUrl(undefined, `create/${stackType}/${method}`);
}

36
app/react/common/stacks/queries/useCreateStack/createKubernetesStackFromFileContent.ts Normal file
View File

@ -0,0 +1,36 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export interface KubernetesFileContentPayload {
/** Name of the stack */
stackName: string;
/** Content of the Stack file */
stackFileContent: string;
composeFormat: boolean;
namespace: string;
/** Whether the stack is from an app template */
fromAppTemplate?: boolean;
environmentId: EnvironmentId;
}
export async function createKubernetesStackFromFileContent({
environmentId,
...payload
}: KubernetesFileContentPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('kubernetes', 'string'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

54
app/react/common/stacks/queries/useCreateStack/createKubernetesStackFromGit.ts Normal file
View File

@ -0,0 +1,54 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { AutoUpdateModel } from '@/react/portainer/gitops/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export type KubernetesGitRepositoryPayload = {
/** Name of the stack */
stackName: string;
composeFormat: boolean;
namespace: 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 */
manifestFile?: string;
additionalFiles?: Array<string>;
/** TLSSkipVerify skips SSL verification when cloning the Git repository */
tlsSkipVerify?: boolean;
/** Optional GitOps update configuration */
autoUpdate?: AutoUpdateModel;
environmentId: EnvironmentId;
};
export async function createKubernetesStackFromGit({
environmentId,
...payload
}: KubernetesGitRepositoryPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('kubernetes', 'repository'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

32
app/react/common/stacks/queries/useCreateStack/createKubernetesStackFromUrl.ts Normal file
View File

@ -0,0 +1,32 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export interface KubernetesUrlPayload {
stackName: string;
composeFormat: boolean;
namespace: string;
manifestURL: string;
environmentId: EnvironmentId;
}
export async function createKubernetesStackFromUrl({
environmentId,
...payload
}: KubernetesUrlPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('kubernetes', 'url'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

44
app/react/common/stacks/queries/useCreateStack/createStandaloneStackFromFile.ts Normal file
View File

@ -0,0 +1,44 @@
import axios, {
json2formData,
parseAxiosError,
} from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export type StandaloneFileUploadPayload = {
/** Name of the stack */
Name: string;
file: File;
/** List of environment variables */
Env?: Array<Pair>;
/** A UUID to identify a webhook. The stack will be force updated and pull the latest image when the webhook was invoked. */
Webhook?: string;
environmentId: EnvironmentId;
};
export async function createStandaloneStackFromFile({
environmentId,
...payload
}: StandaloneFileUploadPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('standalone', 'file'),
json2formData(payload),
{
headers: {
'Content-Type': 'multipart/form-data',
},
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

40
app/react/common/stacks/queries/useCreateStack/createStandaloneStackFromFileContent.ts Normal file
View File

@ -0,0 +1,40 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export interface StandaloneFileContentPayload {
/** Name of the stack */
name: string;
stackFileContent: string;
/** List of environment variables */
env?: Array<Pair>;
/** Whether the stack is from an app template */
fromAppTemplate?: boolean;
/** A UUID to identify a webhook. The stack will be force updated and pull the latest image when the webhook was invoked. */
webhook?: string;
environmentId: EnvironmentId;
}
export async function createStandaloneStackFromFileContent({
environmentId,
...payload
}: StandaloneFileContentPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('standalone', 'string'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

63
app/react/common/stacks/queries/useCreateStack/createStandaloneStackFromGit.ts Normal file
View File

@ -0,0 +1,63 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { AutoUpdateModel } from '@/react/portainer/gitops/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export type StandaloneGitRepositoryPayload = {
/** Name of the stack */
name: string;
/** List of environment variables */
env?: Array<Pair>;
/** Whether the stack is from an app template */
fromAppTemplate?: boolean;
/** 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 */
composeFile?: string;
additionalFiles?: Array<string>;
/** Optional GitOps update configuration */
autoUpdate?: AutoUpdateModel;
/** Whether the stack supports relative path volume */
supportRelativePath?: boolean;
/** Local filesystem path */
filesystemPath?: string;
/** TLSSkipVerify skips SSL verification when cloning the Git repository */
tlsSkipVerify?: boolean;
environmentId: EnvironmentId;
};
export async function createStandaloneStackFromGit({
environmentId,
...payload
}: StandaloneGitRepositoryPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('standalone', 'repository'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

50
app/react/common/stacks/queries/useCreateStack/createSwarmStackFromFile.ts Normal file
View File

@ -0,0 +1,50 @@
import axios, {
json2formData,
parseAxiosError,
} from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export type SwarmFileUploadPayload = {
/** Name of the stack */
Name: string;
/** List of environment variables */
Env?: Array<Pair>;
/** A UUID to identify a webhook. The stack will be force updated and pull the latest image when the webhook was invoked. */
Webhook?: string;
/** Swarm cluster identifier */
SwarmID: string;
file: File;
environmentId: EnvironmentId;
};
export async function createSwarmStackFromFile({
environmentId,
...payload
}: SwarmFileUploadPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('swarm', 'file'),
json2formData(payload),
{
headers: {
'Content-Type': 'multipart/form-data',
},
params: {
endpointId: environmentId,
},
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

43
app/react/common/stacks/queries/useCreateStack/createSwarmStackFromFileContent.ts Normal file
View File

@ -0,0 +1,43 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export interface SwarmFileContentPayload {
/** Name of the stack */
name: string;
stackFileContent: string;
/** List of environment variables */
env?: Array<Pair>;
/** Whether the stack is from an app template */
fromAppTemplate?: boolean;
/** A UUID to identify a webhook. The stack will be force updated and pull the latest image when the webhook was invoked. */
webhook?: string;
/** Swarm cluster identifier */
swarmID: string;
environmentId: EnvironmentId;
}
export async function createSwarmStackFromFileContent({
environmentId,
...payload
}: SwarmFileContentPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('swarm', 'string'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

65
app/react/common/stacks/queries/useCreateStack/createSwarmStackFromGit.ts Normal file
View File

@ -0,0 +1,65 @@
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { Pair } from '@/react/portainer/settings/types';
import { AutoUpdateModel } from '@/react/portainer/gitops/types';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Stack } from '../../types';
import { buildCreateUrl } from './buildUrl';
export type SwarmGitRepositoryPayload = {
/** Name of the stack */
name: string;
/** List of environment variables */
env?: Array<Pair>;
/** Whether the stack is from an app template */
fromAppTemplate?: boolean;
/** Swarm cluster identifier */
swarmID: 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 */
composeFile?: string;
additionalFiles?: Array<string>;
/** Optional GitOps update configuration */
autoUpdate?: AutoUpdateModel;
/** Whether the stack supports relative path volume */
supportRelativePath?: boolean;
/** Local filesystem path */
filesystemPath?: string;
/** TLSSkipVerify skips SSL verification when cloning the Git repository */
tlsSkipVerify?: boolean;
environmentId: EnvironmentId;
};
export async function createSwarmStackFromGit({
environmentId,
...payload
}: SwarmGitRepositoryPayload) {
try {
const { data } = await axios.post<Stack>(
buildCreateUrl('standalone', 'repository'),
payload,
{
params: { endpointId: environmentId },
}
);
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

302
app/react/common/stacks/queries/useCreateStack/useCreateStack.ts Normal file
View File

@ -0,0 +1,302 @@
import { useMutation, useQueryClient } from 'react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { Pair } from '@/react/portainer/settings/types';
import {
GitFormModel,
RelativePathModel,
} from '@/react/portainer/gitops/types';
import { applyResourceControl } from '@/react/portainer/access-control/access-control.service';
import { AccessControlFormData } from '@/react/portainer/access-control/types';
import PortainerError from '@/portainer/error';
import { withError, withInvalidate } from '@/react-tools/react-query';
import { queryKeys } from '../query-keys';
import { createSwarmStackFromFile } from './createSwarmStackFromFile';
import { createSwarmStackFromGit } from './createSwarmStackFromGit';
import { createSwarmStackFromFileContent } from './createSwarmStackFromFileContent';
import { createStandaloneStackFromFile } from './createStandaloneStackFromFile';
import { createStandaloneStackFromGit } from './createStandaloneStackFromGit';
import { createStandaloneStackFromFileContent } from './createStandaloneStackFromFileContent';
import { createKubernetesStackFromUrl } from './createKubernetesStackFromUrl';
import { createKubernetesStackFromGit } from './createKubernetesStackFromGit';
import { createKubernetesStackFromFileContent } from './createKubernetesStackFromFileContent';
export function useCreateStack() {
const queryClient = useQueryClient();
return useMutation(createStack, {
...withError('Failed to create stack'),
...withInvalidate(queryClient, [queryKeys.base()]),
});
}
type BasePayload = {
name: string;
environmentId: EnvironmentId;
};
type DockerBasePayload = BasePayload & {
env?: Array<Pair>;
accessControl: AccessControlFormData;
};
type SwarmBasePayload = DockerBasePayload & {
swarmId: string;
};
type KubernetesBasePayload = BasePayload & {
namespace: string;
composeFormat: boolean;
};
export type SwarmCreatePayload =
| {
method: 'file';
payload: SwarmBasePayload & {
/** File to upload */
file: File;
/** Optional webhook configuration */
webhook?: string;
};
}
| {
method: 'string';
payload: SwarmBasePayload & {
/** Content of the Stack file */
fileContent: string;
/** Optional webhook configuration */
webhook?: string;
fromAppTemplate?: boolean;
};
}
| {
method: 'git';
payload: SwarmBasePayload & {
git: GitFormModel;
relativePathSettings?: RelativePathModel;
fromAppTemplate?: boolean;
};
};
type StandaloneCreatePayload =
| {
method: 'file';
payload: DockerBasePayload & {
/** File to upload */
file: File;
/** Optional webhook configuration */
webhook?: string;
};
}
| {
method: 'string';
payload: DockerBasePayload & {
/** Content of the Stack file */
fileContent: string;
/** Optional webhook configuration */
webhook?: string;
fromAppTemplate?: boolean;
};
}
| {
method: 'git';
payload: DockerBasePayload & {
git: GitFormModel;
relativePathSettings?: RelativePathModel;
fromAppTemplate?: boolean;
};
};
type KubernetesCreatePayload =
| {
method: 'string';
payload: KubernetesBasePayload & {
/** Content of the Stack file */
fileContent: string;
/** Optional webhook configuration */
webhook?: string;
};
}
| {
method: 'git';
payload: KubernetesBasePayload & {
git: GitFormModel;
relativePathSettings?: RelativePathModel;
};
}
| {
method: 'url';
payload: KubernetesBasePayload & {
manifestUrl: string;
};
};
export type CreateStackPayload =
| ({ type: 'swarm' } & SwarmCreatePayload)
| ({ type: 'standalone' } & StandaloneCreatePayload)
| ({ type: 'kubernetes' } & KubernetesCreatePayload);
async function createStack(payload: CreateStackPayload) {
const stack = await createActualStack(payload);
if (payload.type === 'standalone' || payload.type === 'swarm') {
const resourceControl = stack.ResourceControl;
// Portainer will always return a resource control, but since types mark it as optional, we need to check it.
// Ignoring the missing value will result with bugs, hence it's better to throw an error
if (!resourceControl) {
throw new PortainerError('resource control expected after creation');
}
await applyResourceControl(
payload.payload.accessControl,
resourceControl.Id
);
}
}
function createActualStack(payload: CreateStackPayload) {
switch (payload.type) {
case 'swarm':
return createSwarmStack(payload);
case 'standalone':
return createStandaloneStack(payload);
case 'kubernetes':
return createKubernetesStack(payload);
default:
throw new Error('Invalid type');
}
}
function createSwarmStack({ method, payload }: SwarmCreatePayload) {
switch (method) {
case 'file':
return createSwarmStackFromFile({
environmentId: payload.environmentId,
file: payload.file,
Name: payload.name,
SwarmID: payload.swarmId,
Env: payload.env,
Webhook: payload.webhook,
});
case 'git':
return createSwarmStackFromGit({
name: payload.name,
env: payload.env,
repositoryUrl: payload.git.RepositoryURL,
repositoryReferenceName: payload.git.RepositoryReferenceName,
composeFile: 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,
tlsSkipVerify: payload.git.TLSSkipVerify,
autoUpdate: payload.git.AutoUpdate,
environmentId: payload.environmentId,
swarmID: payload.swarmId,
additionalFiles: payload.git.AdditionalFiles,
fromAppTemplate: payload.fromAppTemplate,
});
case 'string':
return createSwarmStackFromFileContent({
name: payload.name,
env: payload.env,
environmentId: payload.environmentId,
stackFileContent: payload.fileContent,
webhook: payload.webhook,
swarmID: payload.swarmId,
fromAppTemplate: payload.fromAppTemplate,
});
default:
throw new Error('Invalid method');
}
}
function createStandaloneStack({ method, payload }: StandaloneCreatePayload) {
switch (method) {
case 'file':
return createStandaloneStackFromFile({
environmentId: payload.environmentId,
file: payload.file,
Name: payload.name,
Env: payload.env,
Webhook: payload.webhook,
});
case 'git':
return createStandaloneStackFromGit({
name: payload.name,
env: payload.env,
repositoryUrl: payload.git.RepositoryURL,
repositoryReferenceName: payload.git.RepositoryReferenceName,
composeFile: 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,
tlsSkipVerify: payload.git.TLSSkipVerify,
autoUpdate: payload.git.AutoUpdate,
environmentId: payload.environmentId,
additionalFiles: payload.git.AdditionalFiles,
fromAppTemplate: payload.fromAppTemplate,
});
case 'string':
return createStandaloneStackFromFileContent({
name: payload.name,
env: payload.env,
environmentId: payload.environmentId,
stackFileContent: payload.fileContent,
webhook: payload.webhook,
fromAppTemplate: payload.fromAppTemplate,
});
default:
throw new Error('Invalid method');
}
}
function createKubernetesStack({ method, payload }: KubernetesCreatePayload) {
switch (method) {
case 'string':
return createKubernetesStackFromFileContent({
stackName: payload.name,
environmentId: payload.environmentId,
stackFileContent: payload.fileContent,
composeFormat: payload.composeFormat,
namespace: payload.namespace,
});
case 'git':
return createKubernetesStackFromGit({
stackName: payload.name,
repositoryUrl: payload.git.RepositoryURL,
repositoryReferenceName: payload.git.RepositoryReferenceName,
manifestFile: payload.git.ComposeFilePathInRepository,
repositoryAuthentication: payload.git.RepositoryAuthentication,
repositoryUsername: payload.git.RepositoryUsername,
repositoryPassword: payload.git.RepositoryPassword,
repositoryGitCredentialId: payload.git.RepositoryGitCredentialID,
tlsSkipVerify: payload.git.TLSSkipVerify,
autoUpdate: payload.git.AutoUpdate,
environmentId: payload.environmentId,
additionalFiles: payload.git.AdditionalFiles,
composeFormat: payload.composeFormat,
namespace: payload.namespace,
});
case 'url':
return createKubernetesStackFromUrl({
stackName: payload.name,
composeFormat: payload.composeFormat,
environmentId: payload.environmentId,
manifestURL: payload.manifestUrl,
namespace: payload.namespace,
});
default:
throw new Error('Invalid method');
}
}

23
app/react/common/stacks/queries/useStacks.ts Normal file
View File

@ -0,0 +1,23 @@
import { useQuery } from 'react-query';
import { withError } from '@/react-tools/react-query';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { Stack } from '@/react/common/stacks/types';
import { buildStackUrl } from './buildUrl';
import { queryKeys } from './query-keys';
export function useStacks() {
return useQuery(queryKeys.base(), () => getStacks(), {
...withError('Failed loading stack'),
});
}
export async function getStacks() {
try {
const { data } = await axios.get<Stack[]>(buildStackUrl());
return data;
} catch (e) {
throw parseAxiosError(e as Error);
}
}

4
app/react/common/stacks/types.ts
View File

@ -30,8 +30,8 @@ export interface Stack {
Id: number;
Name: string;
Type: StackType;
EndpointID: number;
SwarmID: string;
EndpointId: number;
SwarmId: string;
EntryPoint: string;
Env: {
name: string;

0
app/react/docker/app-templates/.keep
View File

24
app/react/docker/containers/CreateView/BaseForm/BaseForm.tsx
View File

@ -11,9 +11,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { isAgentEnvironment } from '@/react/portainer/environments/utils';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { FormControl } from '@@/form-components/FormControl';
import { FormSection } from '@@/form-components/FormSection';
import { Input } from '@@/form-components/Input';
import { SwitchField } from '@@/form-components/SwitchField';
import { ImageConfigFieldset, ImageConfigValues } from '@@/ImageConfigFieldset';
import { LoadingButton } from '@@/buttons';
@ -23,6 +21,7 @@ import {
PortsMappingField,
Values as PortMappingValue,
} from './PortsMappingField';
import { NameField } from './NameField';
export interface Values {
name: string;
@ -74,19 +73,14 @@ export function BaseForm({
return (
<Widget>
<Widget.Body>
<FormControl label="Name" inputId="name-input" errors={errors?.name}>
<Input
id="name-input"
value={values.name}
onChange={(e) => {
const name = e.target.value;
onChangeName(name);
setFieldValue('name', name);
}}
placeholder="e.g. myContainer"
data-cy="container-name-input"
/>
</FormControl>
<NameField
value={values.name}
onChange={(name) => {
setFieldValue('name', name);
onChangeName(name);
}}
error={errors?.name}
/>
<FormSection title="Image Configuration">
<ImageConfigFieldset

32
app/react/docker/containers/CreateView/BaseForm/NameField.tsx Normal file
View File

@ -0,0 +1,32 @@
import { string } from 'yup';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
export function NameField({
value,
error,
onChange,
}: {
value: string;
error?: string;
onChange: (value: string) => void;
}) {
return (
<FormControl label="Name" inputId="name-input" errors={error}>
<Input
id="name-input"
value={value}
onChange={(e) => {
onChange(e.target.value);
}}
placeholder="e.g. myContainer"
data-cy="container-name-input"
/>
</FormControl>
);
}
export function nameValidation() {
return string().default('');
}

25
app/react/docker/containers/CreateView/BaseForm/PortsMappingField.requestModel.ts
View File

@ -9,7 +9,7 @@ type PortKey = `${string}/${Protocol}`;
export function parsePortBindingRequest(portBindings: Values): PortMap {
const bindings: Record<
PortKey,
Array<{ HostIp: string; HostPort: string }>
Array<{ HostIp?: string; HostPort?: string }>
> = {};
_.forEach(portBindings, (portBinding) => {
if (!portBinding.containerPort) {
@ -17,9 +17,6 @@ export function parsePortBindingRequest(portBindings: Values): PortMap {
}
const portInfo = extractPortInfo(portBinding);
if (!portInfo) {
return;
}
let { hostPort } = portBinding;
const { endHostPort, endPort, hostIp, startHostPort, startPort } = portInfo;
@ -36,7 +33,9 @@ export function parsePortBindingRequest(portBindings: Values): PortMap {
hostPort += `-${endHostPort.toString()}`;
}
bindings[bindKey].push({ HostIp: hostIp, HostPort: hostPort });
bindings[bindKey].push(
hostIp || hostPort ? { HostIp: hostIp, HostPort: hostPort } : {}
);
});
});
return bindings;
@ -71,7 +70,13 @@ function parsePort(port: string) {
return 0;
}
function extractPortInfo(portBinding: PortMapping) {
function extractPortInfo(portBinding: PortMapping): {
startPort: number;
endPort: number;
hostIp: string;
startHostPort: number;
endHostPort: number;
} {
const containerPortRange = parsePortRange(portBinding.containerPort);
if (!isValidPortRange(containerPortRange)) {
throw new Error(`Invalid port specification: ${portBinding.containerPort}`);
@ -82,7 +87,13 @@ function extractPortInfo(portBinding: PortMapping) {
let hostIp = '';
let { hostPort } = portBinding;
if (!hostPort) {
return null;
return {
startPort,
endPort,
hostIp: '',
startHostPort: 0,
endHostPort: 0,
};
}
if (hostPort.includes('[')) {

2
app/react/docker/containers/CreateView/BaseForm/PortsMappingField.validation.ts
View File

@ -5,7 +5,7 @@ import { Values } from './PortsMappingField';
export function validationSchema(): SchemaOf<Values> {
return array(
object({
hostPort: string().required('host is required'),
hostPort: string().default(''),
containerPort: string().required('container is required'),
protocol: mixed().oneOf(['tcp', 'udp']),
})

8
app/react/docker/containers/CreateView/BaseForm/validation.ts
View File

@ -6,6 +6,7 @@ import { imageConfigValidation } from '@@/ImageConfigFieldset';
import { Values } from './BaseForm';
import { validationSchema as portsSchema } from './PortsMappingField.validation';
import { nameValidation } from './NameField';
export function validation(
{
@ -26,9 +27,10 @@ export function validation(
}
): SchemaOf<Values> {
return object({
name: string()
.default('')
.test('not-duplicate-portainer', () => !isDuplicatingPortainer),
name: nameValidation().test(
'not-duplicate-portainer',
() => !isDuplicatingPortainer
),
alwaysPull: boolean()
.default(true)
.test('rate-limits', 'Rate limit exceeded', (alwaysPull: boolean) =>

48
app/react/docker/containers/CreateView/CommandsTab/toRequest.ts
View File

@ -40,30 +40,30 @@ export function toRequest(
}
return config;
}
function getConsoleConfig(value: ConsoleSetting): ConsoleConfig {
switch (value) {
case 'both':
return { OpenStdin: true, Tty: true };
case 'interactive':
return { OpenStdin: true, Tty: false };
case 'tty':
return { OpenStdin: false, Tty: true };
case 'none':
default:
return { OpenStdin: false, Tty: false };
}
}
function getLogConfig(
value: LogConfig
): CreateContainerRequest['HostConfig']['LogConfig'] {
return {
Type: value.type,
Config: Object.fromEntries(
value.options.map(({ option, value }) => [option, value])
),
// docker types - requires union while it should allow also custom string for custom plugins
} as CreateContainerRequest['HostConfig']['LogConfig'];
export function getConsoleConfig(value: ConsoleSetting): ConsoleConfig {
switch (value) {
case 'both':
return { OpenStdin: true, Tty: true };
case 'interactive':
return { OpenStdin: true, Tty: false };
case 'tty':
return { OpenStdin: false, Tty: true };
case 'none':
default:
return { OpenStdin: false, Tty: false };
}
}
function getLogConfig(
value: LogConfig
): CreateContainerRequest['HostConfig']['LogConfig'] {
return {
Type: value.type,
Config: Object.fromEntries(
value.options.map(({ option, value }) => [option, value])
),
// docker types - requires union while it should allow also custom string for custom plugins
} as CreateContainerRequest['HostConfig']['LogConfig'];
}

16
app/react/docker/containers/CreateView/CreateView.tsx
View File

@ -145,7 +145,21 @@ function CreateForm() {
const config = toRequest(values, registry, hideCapabilities);
return mutation.mutate(
{ config, environment, values, registry, oldContainer, extraNetworks },
{
config,
environment,
values: {
accessControl: values.accessControl,
imageName: values.image.image,
name: values.name,
alwaysPull: values.alwaysPull,
enableWebhook: values.enableWebhook,
nodeName: values.nodeName,
},
registry,
oldContainer,
extraNetworks,
},
{
onSuccess() {
sendAnalytics(values, registry);

5
app/react/docker/containers/CreateView/InnerForm.tsx
View File

@ -101,11 +101,6 @@ export function InnerForm({
setFieldValue('volumes', value)
}
errors={errors.volumes}
allowBindMounts={
isEnvironmentAdminQuery.authorized ||
environment.SecuritySettings
.allowBindMountsForRegularUsers
}
/>
),
},

27
app/react/docker/containers/CreateView/NetworkTab/HostnameField.tsx Normal file
View File

@ -0,0 +1,27 @@
import { string } from 'yup';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
export function HostnameField({
value,
error,
onChange,
}: {
value: string;
error?: string;
onChange: (value: string) => void;
}) {
return (
<FormControl label="Hostname" errors={error}>
<Input
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="e.g. web01"
data-cy="docker-container-hostname-input"
/>
</FormControl>
);
}
export const hostnameSchema = string().default('');

56
app/react/docker/containers/CreateView/NetworkTab/HostsFileEntries.tsx Normal file
View File

@ -0,0 +1,56 @@
import { array, string } from 'yup';
import { FormError } from '@@/form-components/FormError';
import { InputLabeled } from '@@/form-components/Input/InputLabeled';
import { ItemProps } from '@@/form-components/InputList';
import { ArrayError, InputList } from '@@/form-components/InputList/InputList';
export const hostFileSchema = array(
string().required('Entry is required')
).default([]);
export function HostsFileEntries({
values,
onChange,
errors,
}: {
values: string[];
onChange: (values: string[]) => void;
errors?: ArrayError<string>;
}) {
return (
<InputList
label="Hosts file entries"
value={values}
onChange={(hostsFileEntries) => onChange(hostsFileEntries)}
errors={errors}
item={HostsFileEntryItem}
itemBuilder={() => ''}
data-cy="hosts-file-entries"
/>
);
}
function HostsFileEntryItem({
item,
onChange,
disabled,
error,
readOnly,
index,
}: ItemProps<string>) {
return (
<div>
<InputLabeled
label="value"
value={item}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
readOnly={readOnly}
data-cy={`hosts-file-entry_${index}`}
/>
{error && <FormError>{error}</FormError>}
</div>
);
}

55
app/react/docker/containers/CreateView/NetworkTab/NetworkTab.tsx
View File

@ -2,14 +2,13 @@ import { FormikErrors } from 'formik';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { InputList, ItemProps } from '@@/form-components/InputList';
import { InputGroup } from '@@/form-components/InputGroup';
import { FormError } from '@@/form-components/FormError';
import { NetworkSelector } from '../../components/NetworkSelector';
import { CONTAINER_MODE, Values } from './types';
import { ContainerSelector } from './ContainerSelector';
import { HostsFileEntries } from './HostsFileEntries';
import { HostnameField } from './HostnameField';
export function NetworkTab({
values,
@ -39,14 +38,10 @@ export function NetworkTab({
</FormControl>
)}
<FormControl label="Hostname" errors={errors?.hostname}>
<Input
value={values.hostname}
onChange={(e) => setFieldValue('hostname', e.target.value)}
placeholder="e.g. web01"
data-cy="docker-container-hostname-input"
/>
</FormControl>
<HostnameField
value={values.hostname}
onChange={(value) => setFieldValue('hostname', value)}
/>
<FormControl label="Domain Name" errors={errors?.domain}>
<Input
@ -102,43 +97,11 @@ export function NetworkTab({
/>
</FormControl>
<InputList
label="Hosts file entries"
value={values.hostsFileEntries}
onChange={(hostsFileEntries) =>
setFieldValue('hostsFileEntries', hostsFileEntries)
}
<HostsFileEntries
values={values.hostsFileEntries}
onChange={(v) => setFieldValue('hostsFileEntries', v)}
errors={errors?.hostsFileEntries}
item={HostsFileEntryItem}
itemBuilder={() => ''}
data-cy="docker-container-hosts-file-entries"
/>
</div>
);
}
function HostsFileEntryItem({
item,
onChange,
disabled,
error,
readOnly,
index,
}: ItemProps<string>) {
return (
<div>
<InputGroup>
<InputGroup.Addon>value</InputGroup.Addon>
<Input
value={item}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
readOnly={readOnly}
data-cy={`docker-container-hosts-file-entry_${index}`}
/>
</InputGroup>
{error && <FormError>{error}</FormError>}
</div>
);
}

8
app/react/docker/containers/CreateView/NetworkTab/validation.ts
View File

@ -1,18 +1,20 @@
import { array, object, SchemaOf, string } from 'yup';
import { object, SchemaOf, string } from 'yup';
import { Values } from './types';
import { hostnameSchema } from './HostnameField';
import { hostFileSchema } from './HostsFileEntries';
export function validation(): SchemaOf<Values> {
return object({
networkMode: string().default(''),
hostname: string().default(''),
hostname: hostnameSchema,
domain: string().default(''),
macAddress: string().default(''),
ipv4Address: string().default(''),
ipv6Address: string().default(''),
primaryDns: string().default(''),
secondaryDns: string().default(''),
hostsFileEntries: array(string().required('Entry is required')).default([]),
hostsFileEntries: hostFileSchema,
container: string()
.default('')
.when('network', {

16
app/react/docker/containers/CreateView/ResourcesTab/RuntimeSelector.tsx
View File

@ -11,13 +11,15 @@ export function RuntimeSelector({
onChange: (value: string) => void;
}) {
const environmentId = useEnvironmentId();
const infoQuery = useInfo(environmentId, (info) => [
{ label: 'Default', value: '' },
...Object.keys(info?.Runtimes || {}).map((runtime) => ({
label: runtime,
value: runtime,
})),
]);
const infoQuery = useInfo(environmentId, {
select: (info) => [
{ label: 'Default', value: '' },
...Object.keys(info?.Runtimes || {}).map((runtime) => ({
label: runtime,
value: runtime,
})),
],
});
return (
<PortainerSelect

3
app/react/docker/containers/CreateView/VolumesTab/Item.tsx
View File

@ -18,7 +18,7 @@ export function Item({
error,
index,
}: ItemProps<Volume>) {
const allowBindMounts = useInputContext();
const { allowBindMounts, allowAuto } = useInputContext();
return (
<div>
@ -61,6 +61,7 @@ export function Item({
value={volume.name}
onChange={(name) => setValue({ name })}
inputId={`volume-${index}`}
allowAuto={allowAuto}
/>
</InputGroup>
)}

10
app/react/docker/containers/CreateView/VolumesTab/VolumeSelector.tsx
View File

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

24
app/react/docker/containers/CreateView/VolumesTab/VolumesTab.tsx
View File

@ -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<Values>;
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 (
<InputContext.Provider value={allowBindMounts}>
<InputContext.Provider value={inputContext}>
<InputList<Volume>
errors={Array.isArray(errors) ? errors : []}
label="Volume mapping"

5
app/react/docker/containers/CreateView/VolumesTab/context.ts
View File

@ -1,6 +1,9 @@
import { createContext, useContext } from 'react';
export const InputContext = createContext<boolean | null>(null);
export const InputContext = createContext<{
allowAuto: boolean;
allowBindMounts: boolean;
} | null>(null);
export function useInputContext() {
const value = useContext(InputContext);

80
app/react/docker/containers/CreateView/useCreateMutation.tsx
View File

@ -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<ExtraNetwork>
extraNetworks: Array<ExtraNetwork>,
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;

4
app/react/docker/containers/ListView/ListView.tsx
View File

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

13
app/react/docker/containers/utils.ts
View File

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

24
app/react/docker/proxy/queries/useInfo.ts
View File

@ -18,26 +18,38 @@ export async function getInfo(environmentId: EnvironmentId) {
}
export function useInfo<TSelect = SystemInfo>(
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;
}

4
app/react/docker/proxy/queries/useServicePlugins.ts
View File

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

38
app/react/docker/proxy/queries/useSwarm.ts Normal file
View File

@ -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<T = Swarm>(
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<Swarm>(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,
});
}

9
app/react/docker/proxy/queries/useVersion.ts
View File

@ -18,19 +18,20 @@ export async function getVersion(environmentId: EnvironmentId) {
}
export function useVersion<TSelect = SystemVersion>(
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;
}

4
app/react/docker/stacks/view-models/stack.ts
View File

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

243
app/react/docker/templates/StackFromCustomTemplateFormWidget/DeployForm.tsx Normal file
View File

@ -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 (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validation}
validateOnMount
>
{({ values, errors, setFieldValue, isValid }) => (
<Form className="form-horizontal">
<FormSection title="Configuration">
<NameField
value={values.name}
onChange={(v) => setFieldValue('name', v)}
errors={errors.name}
/>
</FormSection>
{isTemplateVariablesEnabled && (
<CustomTemplatesVariablesField
definitions={template.Variables}
onChange={(v) => {
setFieldValue('variables', v);
const newFile = renderTemplate(
templateFile,
v,
template.Variables
);
setFieldValue('fileContent', newFile);
}}
value={values.variables}
errors={errors.variables}
/>
)}
<AdvancedSettings
label={(isOpen) => advancedSettingsLabel(isOpen, isGit)}
>
<WebEditorForm
id="custom-template-creation-editor"
value={values.fileContent}
onChange={(value) => {
if (isGit) {
return;
}
setFieldValue('fileContent', value);
}}
yaml
error={errors.fileContent}
placeholder="Define or paste the content of your docker compose file here"
readonly={isGit}
data-cy="custom-template-creation-editor"
>
<p>
You can get more information about Compose file format in the{' '}
<a
href="https://docs.docker.com/compose/compose-file/"
target="_blank"
rel="noreferrer"
>
official documentation
</a>
.
</p>
</WebEditorForm>
</AdvancedSettings>
<AccessControlForm
formNamespace="accessControl"
onChange={(values) => setFieldValue('accessControl', values)}
values={values.accessControl}
errors={errors.accessControl}
environmentId={environmentId}
/>
<FormActions
isLoading={mutation.isLoading}
isValid={isValid}
loadingText="Deployment in progress..."
submitLabel="Deploy the stack"
data-cy="deploy-stack-button"
>
<Button
type="reset"
onClick={() => unselect()}
color="default"
data-cy="cancel-stack-creation"
>
Hide
</Button>
</FormActions>
</Form>
)}
</Formik>
);
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';
}

57
app/react/docker/templates/StackFromCustomTemplateFormWidget/StackFromCustomTemplateFormWidget.tsx Normal file
View File

@ -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 (
<DeployWidget
logo={template.Logo}
note={template.Note}
title={template.Title}
>
{fileQuery.isError && (
<TemplateLoadError
creatorId={template.CreatedByUserId}
templateId={template.Id}
/>
)}
{!isDeployable && (
<div className="form-group">
<div className="col-sm-12">
<TextTip>
This template type cannot be deployed on this environment.
</TextTip>
</div>
</div>
)}
{fileQuery.isSuccess && isDeployable && (
<DeployForm
template={template}
unselect={unselect}
templateFile={fileQuery.data}
isDeployable={isDeployable}
/>
)}
</DeployWidget>
);
}

46
app/react/docker/templates/StackFromCustomTemplateFormWidget/TemplateLoadError.tsx Normal file
View File

@ -0,0 +1,46 @@
import { UserId } from '@/portainer/users/types';
import { useCurrentUser, useIsEdgeAdmin } from '@/react/hooks/useUser';
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
import { Link } from '@@/Link';
import { FormError } from '@@/form-components/FormError';
export function TemplateLoadError({
templateId,
creatorId,
}: {
templateId: CustomTemplate['Id'];
creatorId: UserId;
}) {
const { user } = useCurrentUser();
const isEdgeAdminQuery = useIsEdgeAdmin();
if (isEdgeAdminQuery.isLoading) {
return null;
}
const isAdminOrWriter = isEdgeAdminQuery.isAdmin || user.Id === creatorId;
return (
<FormError>
{isAdminOrWriter ? (
<>
Custom template could not be loaded, please{' '}
<Link
to=".edit"
params={{ id: templateId }}
data-cy="edit-custom-template-link"
>
click here
</Link>{' '}
for configuration
</>
) : (
<>
Custom template could not be loaded, please contact your
administrator.
</>
)}
</FormError>
);
}

1
app/react/docker/templates/StackFromCustomTemplateFormWidget/index.ts Normal file
View File

@ -0,0 +1 @@
export { StackFromCustomTemplateFormWidget } from './StackFromCustomTemplateFormWidget';

9
app/react/docker/templates/StackFromCustomTemplateFormWidget/types.ts Normal file
View File

@ -0,0 +1,9 @@
import { AccessControlFormData } from '@/react/portainer/access-control/types';
import { VariablesFieldValue } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
export interface FormValues {
name: string;
variables: VariablesFieldValue;
accessControl: AccessControlFormData;
fileContent: string;
}

20
app/react/docker/templates/StackFromCustomTemplateFormWidget/useIsDeployable.ts Normal file
View File

@ -0,0 +1,20 @@
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { StackType } from '@/react/common/stacks/types';
import { useIsSwarm } from '../../proxy/queries/useInfo';
export function useIsDeployable(type: StackType) {
const environmentId = useEnvironmentId();
const isSwarm = useIsSwarm(environmentId);
switch (type) {
case StackType.DockerCompose:
return !isSwarm;
case StackType.DockerSwarm:
return isSwarm;
case StackType.Kubernetes:
default:
return false;
}
}

37
app/react/docker/templates/StackFromCustomTemplateFormWidget/useValidation.ts Normal file
View File

@ -0,0 +1,37 @@
import { useMemo } from 'react';
import { object, string } from 'yup';
import { accessControlFormValidation } from '@/react/portainer/access-control/AccessControlForm';
import { useNameValidation } from '@/react/common/stacks/CreateView/NameField';
import { variablesFieldValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { EnvironmentId } from '@/react/portainer/environments/types';
export function useValidation({
environmentId,
isAdmin,
variableDefs,
isDeployable,
}: {
variableDefs: Array<VariableDefinition>;
isAdmin: boolean;
environmentId: EnvironmentId;
isDeployable: boolean;
}) {
const name = useNameValidation(environmentId);
return useMemo(
() =>
object({
name: name.test({
name: 'is-deployable',
message: 'This template cannot be deployed on this environment',
test: () => isDeployable,
}),
accessControl: accessControlFormValidation(isAdmin),
fileContent: string().required('Required'),
variables: variablesFieldValidation(variableDefs),
}),
[isAdmin, isDeployable, name, variableDefs]
);
}

19
app/react/docker/volumes/queries/build-url.ts Normal file
View File

@ -0,0 +1,19 @@
import { buildUrl as buildProxyUrl } from '@/react/docker/proxy/queries/build-url';
import { EnvironmentId } from '@/react/portainer/environments/types';
export function buildUrl(
environmentId: EnvironmentId,
{ action, id }: { id?: string; action?: string } = {}
) {
let url = buildProxyUrl(environmentId, 'volumes');
if (id) {
url += `/${id}`;
}
if (action) {
url += `/${action}`;
}
return url;
}

26
app/react/docker/volumes/queries/useCreateVolume.ts Normal file
View File

@ -0,0 +1,26 @@
import { Volume, VolumeCreateOptions } from 'docker-types/generated/1.41';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { buildUrl } from './build-url';
export async function createVolume(
environmentId: EnvironmentId,
volume: VolumeCreateOptions
) {
try {
const { data } = await axios.post<Volume>(
buildUrl(environmentId, { action: 'create' }),
volume,
{
headers: {
'X-Portainer-VolumeName': volume.Name || '',
},
}
);
return data;
} catch (error) {
throw parseAxiosError(error);
}
}

16
app/react/docker/volumes/queries/useVolumes.ts
View File

@ -2,10 +2,10 @@ import { useQuery } from 'react-query';
import { Volume } from 'docker-types/generated/1.41';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { buildUrl as buildDockerUrl } from '@/react/docker/proxy/queries/build-url';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { queryKeys } from './query-keys';
import { buildUrl } from './build-url';
export function useVolumes<T = Volume[]>(
environmentId: EnvironmentId,
@ -24,22 +24,10 @@ interface VolumesResponse {
export async function getVolumes(environmentId: EnvironmentId) {
try {
const { data } = await axios.get<VolumesResponse>(
buildUrl(environmentId, 'volumes')
);
const { data } = await axios.get<VolumesResponse>(buildUrl(environmentId));
return data.Volumes;
} catch (error) {
throw parseAxiosError(error as Error, 'Unable to retrieve volumes');
}
}
function buildUrl(environmentId: EnvironmentId, action: string, id?: string) {
let url = buildDockerUrl(environmentId, action);
if (id) {
url += `/${id}`;
}
return url;
}

0
app/react/edge/edge-stacks/CreateView/.keep
View File

16
app/react/edge/edge-stacks/CreateView/TemplateFieldset/AppTemplateFieldset.tsx
View File

@ -1,9 +1,11 @@
import { FormikErrors } from 'formik';
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
import { EnvVarsFieldset } from './EnvVarsFieldset';
import { TemplateNote } from './TemplateNote';
import {
EnvVarsFieldset,
EnvVarsValue,
} from '@/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
import { TemplateNote } from '@/react/portainer/templates/components/TemplateNote';
export function AppTemplateFieldset({
template,
@ -12,16 +14,16 @@ export function AppTemplateFieldset({
errors,
}: {
template: TemplateViewModel;
values: Record<string, string>;
onChange: (value: Record<string, string>) => void;
errors?: FormikErrors<Record<string, string>>;
values: EnvVarsValue;
onChange: (value: EnvVarsValue) => void;
errors?: FormikErrors<EnvVarsValue>;
}) {
return (
<>
<TemplateNote note={template.Note} />
<EnvVarsFieldset
options={template.Env || []}
value={values}
values={values}
onChange={onChange}
errors={errors}
/>

2
app/react/edge/edge-stacks/CreateView/TemplateFieldset/CustomTemplateFieldset.tsx
View File

@ -1,10 +1,10 @@
import { CustomTemplatesVariablesField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
import { TemplateNote } from '@/react/portainer/templates/components/TemplateNote';
import { ArrayError } from '@@/form-components/InputList/InputList';
import { Values } from './types';
import { TemplateNote } from './TemplateNote';
export function CustomTemplateFieldset({
errors,

3
app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateFieldset.tsx
View File

@ -3,7 +3,8 @@ import { FormikErrors } from 'formik';
import { getVariablesFieldDefaultValues } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
import { getDefaultValues as getAppVariablesDefaultValues } from './EnvVarsFieldset';
import { getDefaultValues as getAppVariablesDefaultValues } from '../../../../portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
import { TemplateSelector } from './TemplateSelector';
import { SelectedTemplateValue, Values } from './types';
import { CustomTemplateFieldset } from './CustomTemplateFieldset';

25
app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateNote.test.tsx
View File

@ -1,25 +0,0 @@
import { vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { TemplateNote } from './TemplateNote';
vi.mock('sanitize-html', () => ({
default: (note: string) => note, // Mock the sanitize-html library to return the input as is
}));
test('renders template note', async () => {
render(<TemplateNote note="Test note" />);
const templateNoteElement = screen.getByText(/Information/);
expect(templateNoteElement).toBeInTheDocument();
const noteElement = screen.getByText(/Test note/);
expect(noteElement).toBeInTheDocument();
});
test('does not render template note when note is undefined', async () => {
render(<TemplateNote note={undefined} />);
const templateNoteElement = screen.queryByText(/Information/);
expect(templateNoteElement).not.toBeInTheDocument();
});

16
app/react/edge/edge-stacks/CreateView/TemplateFieldset/validation.tsx
View File

@ -2,17 +2,19 @@ import { mixed, object, SchemaOf, string } from 'yup';
import { variablesFieldValidation } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
import { VariableDefinition } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
import { envVarsFieldsetValidation } from '@/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
import { TemplateEnv } from '@/react/portainer/templates/app-templates/types';
import { envVarsFieldsetValidation } from './EnvVarsFieldset';
export function validation({
definitions,
function validation({
customVariablesDefinitions,
envVarDefinitions,
}: {
definitions: VariableDefinition[];
customVariablesDefinitions: VariableDefinition[];
envVarDefinitions: Array<TemplateEnv>;
}) {
return object({
type: string().oneOf(['custom', 'app']).required(),
envVars: envVarsFieldsetValidation()
envVars: envVarsFieldsetValidation(envVarDefinitions)
.optional()
.when('type', {
is: 'app',
@ -20,7 +22,7 @@ export function validation({
}),
file: mixed().optional(),
template: object().optional().default(null),
variables: variablesFieldValidation(definitions)
variables: variablesFieldValidation(customVariablesDefinitions)
.optional()
.when('type', {
is: 'custom',

26
app/react/edge/templates/AppTemplatesView/AppTemplatesView.tsx
View File

@ -1,26 +0,0 @@
import { AppTemplatesList } from '@/react/portainer/templates/app-templates/AppTemplatesList';
import { useAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
import { TemplateType } from '@/react/portainer/templates/app-templates/types';
import { PageHeader } from '@@/PageHeader';
export function AppTemplatesView() {
const templatesQuery = useAppTemplates();
return (
<>
<PageHeader title="Application templates list" breadcrumbs="Templates" />
<AppTemplatesList
templates={templatesQuery.data}
templateLinkParams={(template) => ({
to: 'edge.stacks.new',
params: { templateId: template.Id, templateType: 'app' },
})}
disabledTypes={[TemplateType.Container]}
fixedCategories={['edge']}
storageKey="edge-app-templates"
/>
</>
);
}

1
app/react/edge/templates/AppTemplatesView/index.ts
View File

@ -1 +0,0 @@
export { AppTemplatesView } from './AppTemplatesView';

1
app/react/portainer/access-control/AccessControlForm/index.ts
View File

@ -1 +1,2 @@
export { AccessControlForm } from './AccessControlForm';
export { validationSchema as accessControlFormValidation } from './AccessControlForm.validation';

92
app/react/portainer/templates/app-templates/AppTemplatesView.tsx Normal file
View File

@ -0,0 +1,92 @@
import { useParamState } from '@/react/hooks/useParamState';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { useInfo } from '@/react/docker/proxy/queries/useInfo';
import { useApiVersion } from '@/react/docker/proxy/queries/useVersion';
import { useAuthorizations } from '@/react/hooks/useUser';
import { PageHeader } from '@@/PageHeader';
import { TemplateType } from './types';
import { useAppTemplates } from './queries/useAppTemplates';
import { AppTemplatesList } from './AppTemplatesList';
import { DeployForm } from './DeployFormWidget/DeployFormWidget';
export function AppTemplatesView() {
const envId = useEnvironmentId(false);
const hasCreateAuthQuery = useAuthorizations([
'DockerContainerCreate',
'PortainerStackCreate',
]);
const [selectedTemplateId, setSelectedTemplateId] = useParamState<number>(
'template',
(param) => (param ? parseInt(param, 10) : 0)
);
const templatesQuery = useAppTemplates();
const selectedTemplate = selectedTemplateId
? templatesQuery.data?.find(
(template) => template.Id === selectedTemplateId
)
: undefined;
const { disabledTypes, fixedCategories, tableKey } = useViewFilter(envId);
return (
<>
<PageHeader title="Application templates list" breadcrumbs="Templates" />
{selectedTemplate && (
<DeployForm
template={selectedTemplate}
unselect={() => setSelectedTemplateId()}
/>
)}
<AppTemplatesList
templates={templatesQuery.data}
selectedId={selectedTemplateId}
onSelect={
envId && hasCreateAuthQuery.authorized
? (template) => setSelectedTemplateId(template.Id)
: undefined
}
disabledTypes={disabledTypes}
fixedCategories={fixedCategories}
storageKey={tableKey}
templateLinkParams={
!envId
? (template) => ({
to: 'edge.stacks.new',
params: { templateId: template.Id, templateType: 'app' },
})
: undefined
}
/>
</>
);
}
function useViewFilter(envId: number | undefined) {
const envInfoQuery = useInfo(envId);
const apiVersion = useApiVersion(envId);
if (!envId) {
// edge
return {
disabledTypes: [TemplateType.Container],
fixedCategories: ['edge'],
tableKey: 'edge-app-templates',
};
}
const showSwarmStacks =
apiVersion >= 1.25 &&
envInfoQuery.data &&
envInfoQuery.data.Swarm &&
envInfoQuery.data.Swarm.NodeID &&
envInfoQuery.data.Swarm.ControlAvailable;
return {
disabledTypes: !showSwarmStacks ? [TemplateType.SwarmStack] : [],
tableKey: 'docker-app-templates',
};
}

52
app/react/portainer/templates/app-templates/DeployFormWidget/AdvancedSettings.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Minus, Plus } from 'lucide-react';
import { PropsWithChildren, ReactNode, useState } from 'react';
import { Icon } from '@@/Icon';
import { Button } from '@@/buttons';
export function AdvancedSettings({
children,
label,
}: PropsWithChildren<{
label: (isOpen: boolean) => ReactNode;
}>) {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<AdvancedSettingsToggle
isOpen={isOpen}
onClick={() => setIsOpen((value) => !value)}
label={label(isOpen)}
/>
{isOpen ? children : null}
</>
);
}
function AdvancedSettingsToggle({
label,
onClick,
isOpen,
}: {
isOpen: boolean;
onClick: () => void;
label: ReactNode;
}) {
const icon = isOpen ? Minus : Plus;
return (
<div className="form-group">
<div className="col-sm-12">
<Button
color="none"
onClick={() => onClick()}
data-cy="advanced-settings-toggle-button"
>
<Icon icon={icon} />
{label}
</Button>
</div>
</div>
);
}

168
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/ContainerDeployForm.tsx Normal file
View File

@ -0,0 +1,168 @@
import { Formik, Form } from 'formik';
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/docker/containers/CreateView/BaseForm/NameField';
import { NetworkSelector } from '@/react/docker/containers/components/NetworkSelector';
import { PortsMappingField } from '@/react/docker/containers/CreateView/BaseForm/PortsMappingField';
import { VolumesTab } from '@/react/docker/containers/CreateView/VolumesTab';
import { HostsFileEntries } from '@/react/docker/containers/CreateView/NetworkTab/HostsFileEntries';
import { LabelsTab } from '@/react/docker/containers/CreateView/LabelsTab';
import { HostnameField } from '@/react/docker/containers/CreateView/NetworkTab/HostnameField';
import { FormControl } from '@@/form-components/FormControl';
import { FormSection } from '@@/form-components/FormSection';
import { FormActions } from '@@/form-components/FormActions';
import { Button } from '@@/buttons';
import { TemplateViewModel } from '../../view-model';
import { AdvancedSettings } from '../AdvancedSettings';
import { EnvVarsFieldset } from '../EnvVarsFieldset';
import { useValidation } from './useValidation';
import { FormValues } from './types';
import { useCreate } from './useCreate';
export function ContainerDeployForm({
template,
unselect,
}: {
template: TemplateViewModel;
unselect: () => void;
}) {
const { user } = useCurrentUser();
const isEdgeAdminQuery = useIsEdgeAdmin();
const environmentId = useEnvironmentId();
const validation = useValidation({
isAdmin: isEdgeAdminQuery.isAdmin,
envVarDefinitions: template.Env,
});
const createMutation = useCreate(template);
if (!createMutation || 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
),
hostname: '',
hosts: [],
labels: [],
network: '',
ports: template.Ports.map((p) => ({ ...p, hostPort: p.hostPort || '' })),
volumes: template.Volumes.map((v) => ({
containerPath: v.container,
type: v.type === 'bind' ? 'bind' : 'volume',
readOnly: v.readonly,
name: v.type === 'bind' ? v.bind || '' : 'auto',
})),
};
return (
<Formik
initialValues={initialValues}
onSubmit={createMutation.onSubmit}
validationSchema={validation}
validateOnMount
>
{({ values, errors, setFieldValue, isValid }) => (
<Form className="form-horizontal">
<FormSection title="Configuration">
<NameField
value={values.name}
onChange={(v) => setFieldValue('name', v)}
error={errors.name}
/>
<FormControl label="Network" errors={errors?.network}>
<NetworkSelector
value={values.network}
onChange={(v) => setFieldValue('network', v)}
/>
</FormControl>
<EnvVarsFieldset
values={values.envVars}
onChange={(values) => setFieldValue('envVars', values)}
errors={errors.envVars}
options={template.Env || []}
/>
</FormSection>
<AccessControlForm
formNamespace="accessControl"
onChange={(values) => setFieldValue('accessControl', values)}
values={values.accessControl}
errors={errors.accessControl}
environmentId={environmentId}
/>
<AdvancedSettings
label={(isOpen) =>
isOpen ? 'Hide advanced options' : 'Show advanced options'
}
>
<PortsMappingField
value={values.ports}
onChange={(v) => setFieldValue('ports', v)}
errors={errors.ports}
/>
<VolumesTab
onChange={(v) => setFieldValue('volumes', v)}
values={values.volumes}
errors={errors.volumes}
allowAuto
/>
<HostsFileEntries
values={values.hosts}
onChange={(v) => setFieldValue('hosts', v)}
errors={errors?.hosts}
/>
<LabelsTab
values={values.labels}
onChange={(v) => setFieldValue('labels', v)}
errors={errors?.labels}
/>
<HostnameField
value={values.hostname}
onChange={(v) => setFieldValue('hostname', v)}
error={errors.hostname}
/>
</AdvancedSettings>
<FormActions
isLoading={createMutation.isLoading}
isValid={isValid}
loadingText="Deployment in progress..."
submitLabel="Deploy the container"
data-cy="deploy-container-button"
>
<Button
type="reset"
onClick={() => unselect()}
color="default"
data-cy="cancel-deploy-container-button"
>
Hide
</Button>
</FormActions>
</Form>
)}
</Formik>
);
}

64
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/createContainerConfig.ts Normal file
View File

@ -0,0 +1,64 @@
import { commandStringToArray } from '@/docker/helpers/containers';
import { parsePortBindingRequest } from '@/react/docker/containers/CreateView/BaseForm/PortsMappingField.requestModel';
import { volumesTabUtils } from '@/react/docker/containers/CreateView/VolumesTab';
import { CreateContainerRequest } from '@/react/docker/containers/CreateView/types';
import { TemplateViewModel } from '../../view-model';
import { FormValues } from './types';
export function createContainerConfiguration(
template: TemplateViewModel,
values: FormValues
): CreateContainerRequest {
let configuration: CreateContainerRequest = {
Env: [],
OpenStdin: false,
Tty: false,
ExposedPorts: {},
HostConfig: {
RestartPolicy: {
Name: 'no',
},
PortBindings: {},
Binds: [],
Privileged: false,
ExtraHosts: [],
},
Volumes: {},
Labels: {},
NetworkingConfig: {},
};
configuration = volumesTabUtils.toRequest(configuration, values.volumes);
configuration.HostConfig.NetworkMode = values.network;
configuration.HostConfig.Privileged = template.Privileged;
configuration.HostConfig.RestartPolicy = { Name: template.RestartPolicy };
configuration.HostConfig.ExtraHosts = values.hosts ? values.hosts : [];
configuration.Hostname = values.hostname;
configuration.Env = Object.entries(values.envVars).map(
([name, value]) => `${name}=${value}`
);
configuration.Cmd = commandStringToArray(template.Command);
const portBindings = parsePortBindingRequest(values.ports);
configuration.HostConfig.PortBindings = portBindings;
configuration.ExposedPorts = Object.fromEntries(
Object.keys(portBindings).map((key) => [key, {}])
);
const consoleConfiguration = getConsoleConfiguration(template.Interactive);
configuration.OpenStdin = consoleConfiguration.openStdin;
configuration.Tty = consoleConfiguration.tty;
configuration.Labels = Object.fromEntries(
values.labels.filter((l) => !!l.name).map((l) => [l.name, l.value])
);
configuration.Image = template.RegistryModel.Image;
return configuration;
}
function getConsoleConfiguration(interactiveFlag: boolean) {
return {
openStdin: interactiveFlag,
tty: interactiveFlag,
};
}

18
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/types.ts Normal file
View File

@ -0,0 +1,18 @@
import { AccessControlFormData } from '@/react/portainer/access-control/types';
import { PortMapping } from '@/react/docker/containers/CreateView/BaseForm/PortsMappingField';
import { VolumesTabValues } from '@/react/docker/containers/CreateView/VolumesTab';
import { LabelsTabValues } from '@/react/docker/containers/CreateView/LabelsTab';
import { EnvVarsValue } from '../EnvVarsFieldset';
export interface FormValues {
name: string;
network: string;
accessControl: AccessControlFormData;
ports: Array<PortMapping>;
volumes: VolumesTabValues;
hosts: Array<string>;
labels: LabelsTabValues;
hostname: string;
envVars: EnvVarsValue;
}

68
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/useCreate.ts Normal file
View File

@ -0,0 +1,68 @@
import { useRouter } from '@uirouter/react';
import { notifySuccess } from '@/portainer/services/notifications';
import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
import { useCreateOrReplaceMutation } from '@/react/docker/containers/CreateView/useCreateMutation';
import { TemplateViewModel } from '../../view-model';
import { FormValues } from './types';
import { createContainerConfiguration } from './createContainerConfig';
import { useCreateLocalVolumes } from './useCreateLocalVolumes';
export function useCreate(template: TemplateViewModel) {
const router = useRouter();
const createVolumesMutation = useCreateLocalVolumes();
const createContainerMutation = useCreateOrReplaceMutation();
const environmentQuery = useCurrentEnvironment();
if (!environmentQuery.data) {
return null;
}
const environment = environmentQuery.data;
return {
onSubmit,
isLoading:
createVolumesMutation.isLoading || createContainerMutation.isLoading,
};
function onSubmit(values: FormValues) {
const autoVolumesCount = values.volumes.filter(
(v) => v.type === 'volume' && v.name === 'auto'
).length;
createVolumesMutation.mutate(autoVolumesCount, {
onSuccess(autoVolumes) {
let index = 0;
const volumes = values.volumes.map((v) =>
v.type === 'volume' && v.name === 'auto'
? { ...v, name: autoVolumes[index++].Name }
: v
);
createContainerMutation.mutate(
{
config: createContainerConfiguration(template, {
...values,
volumes,
}),
values: {
name: values.name,
accessControl: values.accessControl,
imageName: template.RegistryModel.Image,
alwaysPull: true,
},
environment,
},
{
onSuccess() {
notifySuccess('Success', 'Container successfully created');
router.stateService.go('docker.containers');
},
}
);
},
});
}
}

16
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/useCreateLocalVolumes.ts Normal file
View File

@ -0,0 +1,16 @@
import { useMutation } from 'react-query';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { createVolume } from '@/react/docker/volumes/queries/useCreateVolume';
export function useCreateLocalVolumes() {
const environmentId = useEnvironmentId();
return useMutation(async (count: number) =>
Promise.all(
Array.from({ length: count }).map(() =>
createVolume(environmentId, { Driver: 'local' })
)
)
);
}

37
app/react/portainer/templates/app-templates/DeployFormWidget/ContainerDeployForm/useValidation.ts Normal file
View File

@ -0,0 +1,37 @@
import { object, string } from 'yup';
import { useMemo } from 'react';
import { accessControlFormValidation } from '@/react/portainer/access-control/AccessControlForm';
import { hostnameSchema } from '@/react/docker/containers/CreateView/NetworkTab/HostnameField';
import { hostFileSchema } from '@/react/docker/containers/CreateView/NetworkTab/HostsFileEntries';
import { labelsTabUtils } from '@/react/docker/containers/CreateView/LabelsTab';
import { nameValidation } from '@/react/docker/containers/CreateView/BaseForm/NameField';
import { validationSchema as portSchema } from '@/react/docker/containers/CreateView/BaseForm/PortsMappingField.validation';
import { volumesTabUtils } from '@/react/docker/containers/CreateView/VolumesTab';
import { envVarsFieldsetValidation } from '../EnvVarsFieldset';
import { TemplateEnv } from '../../types';
export function useValidation({
isAdmin,
envVarDefinitions,
}: {
isAdmin: boolean;
envVarDefinitions: Array<TemplateEnv>;
}) {
return useMemo(
() =>
object({
accessControl: accessControlFormValidation(isAdmin),
envVars: envVarsFieldsetValidation(envVarDefinitions),
hostname: hostnameSchema,
hosts: hostFileSchema,
labels: labelsTabUtils.validation(),
name: nameValidation(),
network: string().default(''),
ports: portSchema(),
volumes: volumesTabUtils.validation(),
}),
[envVarDefinitions, isAdmin]
);
}

42
app/react/portainer/templates/app-templates/DeployFormWidget/DeployFormWidget.tsx Normal file
View File

@ -0,0 +1,42 @@
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import { TemplateType } from '@/react/portainer/templates/app-templates/types';
import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
import { DeployWidget } from '@/react/portainer/templates/components/DeployWidget';
import { ContainerDeployForm } from './ContainerDeployForm/ContainerDeployForm';
import { StackDeployForm } from './StackDeployForm/StackDeployForm';
export function DeployForm({
template,
unselect,
}: {
template: TemplateViewModel;
unselect: () => void;
}) {
const Form = useForm(template);
return (
<DeployWidget
logo={template.Logo}
note={template.Note}
title={template.Title}
>
<Form template={template} unselect={unselect} />
</DeployWidget>
);
}
function useForm(template: TemplateViewModel) {
const envId = useEnvironmentId(false);
if (!envId) {
// for edge templates, return empty form
return () => null;
}
if (template.Type === TemplateType.Container) {
return ContainerDeployForm;
}
return StackDeployForm;
}

22
app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.test.tsx → app/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset.test.tsx
View File

@ -15,14 +15,13 @@ test('renders EnvVarsFieldset component', () => {
{ name: 'VAR2', label: 'Variable 2', preset: false },
] as const;
const value = { VAR1: 'Value 1', VAR2: 'Value 2' };
const errors = {};
render(
<EnvVarsFieldset
onChange={onChange}
options={[...options]}
value={value}
errors={errors}
values={value}
errors={{}}
/>
);
@ -40,14 +39,13 @@ test('calls onChange when input value changes', async () => {
const onChange = vi.fn();
const options = [{ name: 'VAR1', label: 'Variable 1', preset: false }];
const value = { VAR1: 'Value 1' };
const errors = {};
render(
<EnvVarsFieldset
onChange={onChange}
options={options}
value={value}
errors={errors}
values={value}
errors={{}}
/>
);
@ -63,15 +61,14 @@ test('calls onChange when input value changes', async () => {
test('renders error message when there are errors', () => {
const onChange = vi.fn();
const options = [{ name: 'VAR1', label: 'Variable 1', preset: false }];
const value = { VAR1: 'Value 1' };
const errors = { VAR1: 'Required' };
const value = { VAR1: '' };
render(
<EnvVarsFieldset
onChange={onChange}
options={options}
value={value}
errors={errors}
values={value}
errors={{ VAR1: 'Required' }}
/>
);
@ -104,7 +101,10 @@ test('returns default values', () => {
});
test('validates env vars fieldset', () => {
const schema = envVarsFieldsetValidation();
const schema = envVarsFieldsetValidation([
{ name: 'VAR1' },
{ name: 'VAR2' },
]);
const validData = { VAR1: 'Value 1', VAR2: 'Value 2' };
const invalidData = { VAR1: '', VAR2: 'Value 2' };

25
app/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset.tsx → app/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset.tsx
View File

@ -1,5 +1,5 @@
import { FormikErrors } from 'formik';
import { SchemaOf, array, string } from 'yup';
import { SchemaOf, object, string } from 'yup';
import { TemplateEnv } from '@/react/portainer/templates/app-templates/types';
@ -8,15 +8,17 @@ import { Input, Select } from '@@/form-components/Input';
type Value = Record<string, string>;
export { type Value as EnvVarsValue };
export function EnvVarsFieldset({
onChange,
options,
value,
values,
errors,
}: {
options: Array<TemplateEnv>;
onChange: (value: Value) => void;
value: Value;
values: Value;
errors?: FormikErrors<Value>;
}) {
return (
@ -25,7 +27,7 @@ export function EnvVarsFieldset({
<Item
key={env.name}
option={env}
value={value[env.name]}
value={values[env.name]}
onChange={(value) => 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<TemplateEnv>): Value {
);
}
export function envVarsFieldsetValidation(): SchemaOf<Value> {
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<Value>
export function envVarsFieldsetValidation(
definitions: Array<TemplateEnv>
): SchemaOf<Value> {
return object(
Object.fromEntries(
definitions.map((v) => [v.name, string().required('Required')])
)
);
}

163
app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/StackDeployForm.tsx Normal file
View File

@ -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 (
<div className="form-group">
<TextTip>
This template type cannot be deployed on this environment.
</TextTip>
</div>
);
}
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validation}
validateOnMount
>
{({ values, errors, setFieldValue, isValid }) => (
<Form className="form-horizontal">
<FormSection title="Configuration">
<NameField
value={values.name}
onChange={(v) => setFieldValue('name', v)}
errors={errors.name}
/>
<EnvVarsFieldset
values={values.envVars}
onChange={(values) => setFieldValue('envVars', values)}
errors={errors.envVars}
options={template.Env || []}
/>
</FormSection>
<AccessControlForm
formNamespace="accessControl"
onChange={(values) => setFieldValue('accessControl', values)}
values={values.accessControl}
errors={errors.accessControl}
environmentId={environmentId}
/>
<FormActions
isLoading={mutation.isLoading}
isValid={isValid}
loadingText="Deployment in progress..."
submitLabel="Deploy the stack"
data-cy="deploy-stack-button"
>
<Button
type="reset"
onClick={() => unselect()}
color="default"
data-cy="cancel-deploy-stack-button"
>
Hide
</Button>
</FormActions>
</Form>
)}
</Formik>
);
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');
},
}
);
}
}

7
app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/types.ts Normal file
View File

@ -0,0 +1,7 @@
import { AccessControlFormData } from '@/react/portainer/access-control/types';
export interface FormValues {
name: string;
envVars: Record<string, string>;
accessControl: AccessControlFormData;
}

19
app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useIsDeployable.ts Normal file
View File

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

33
app/react/portainer/templates/app-templates/DeployFormWidget/StackDeployForm/useValidation.ts Normal file
View File

@ -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<TemplateEnv>;
}): SchemaOf<FormValues> {
const name = useNameValidation(environmentId);
return useMemo(
() =>
object({
name,
accessControl: accessControlFormValidation(isAdmin),
envVars: envVarsFieldsetValidation(envVarDefinitions),
}),
[envVarDefinitions, isAdmin, name]
);
}

6
app/react/portainer/templates/app-templates/types.ts
View File

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

11
app/react/portainer/templates/app-templates/view-model.ts
View File

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

40
app/react/portainer/templates/components/DeployWidget.tsx Normal file
View File

@ -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 (
<div className="row">
<div className="col-sm-12">
<Widget>
<Widget.Title
icon={
<FallbackImage src={logo} fallbackIcon={<Icon icon={Rocket} />} />
}
title={title}
/>
<Widget.Body>
<div className="form-horizontal">
<TemplateNote note={note} />
{children}
</div>
</Widget.Body>
</Widget>
</div>
</div>
);
}

12
app/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateNote.tsx → app/react/portainer/templates/components/TemplateNote.tsx
View File

@ -1,16 +1,18 @@
import sanitize from 'sanitize-html';
export function TemplateNote({ note }: { note: string | undefined }) {
import { FormSection } from '@@/form-components/FormSection';
export function TemplateNote({ note }: { note?: string }) {
if (!note) {
return null;
}
return (
<div>
<div className="col-sm-12 form-section-title"> Information </div>
<FormSection title="Information">
<div className="form-group">
<div className="col-sm-12">
<div
className="template-note"
className="text-xs"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: sanitize(note),
@ -18,6 +20,6 @@ export function TemplateNote({ note }: { note: string | undefined }) {
/>
</div>
</div>
</div>
</FormSection>
);
}

5
app/react/portainer/templates/custom-templates/CreateView/CreateForm.tsx
View File

@ -17,9 +17,11 @@ import { InnerForm } from './InnerForm';
export function CreateForm({
environmentId,
viewType,
defaultType,
}: {
environmentId?: EnvironmentId;
viewType: 'kube' | 'docker' | 'edge';
defaultType: StackType;
}) {
const isEdge = !environmentId;
const router = useRouter();
@ -28,8 +30,7 @@ export function CreateForm({
const buildMethods = useBuildMethods();
const initialValues = useInitialValues({
defaultType:
viewType === 'kube' ? StackType.Kubernetes : StackType.DockerCompose,
defaultType,
isEdge,
buildMethods: buildMethods.map((method) => method.value),
});

Some files were not shown because too many files have changed in this diff Show More