diff --git a/app/docker/helpers/containerHelper.js b/app/docker/helpers/containerHelper.js index 6daf5d4e7..c50a9183e 100644 --- a/app/docker/helpers/containerHelper.js +++ b/app/docker/helpers/containerHelper.js @@ -259,6 +259,10 @@ angular.module('portainer.docker').factory('ContainerHelper', [ return bindings; }; + helper.getContainerNames = function (containers) { + return _.map(_.flatten(_.map(containers, 'Names')), (name) => _.trimStart(name, '/')); + }; + return helper; }, ]); diff --git a/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js b/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js index c2bc89cb6..b0e7b5ff4 100644 --- a/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js +++ b/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js @@ -24,7 +24,7 @@ angular.module('portainer.app').controller('StackDuplicationFormController', [ } function isFormValidForDuplication() { - return isFormValidForMigration() && ctrl.formValues.newName; + return isFormValidForMigration() && ctrl.formValues.newName && !ctrl.yamlError; } function duplicateStack() { diff --git a/app/portainer/components/stack-duplication-form/stack-duplication-form.html b/app/portainer/components/stack-duplication-form/stack-duplication-form.html index 5e7cf743f..cf2e0a293 100644 --- a/app/portainer/components/stack-duplication-form/stack-duplication-form.html +++ b/app/portainer/components/stack-duplication-form/stack-duplication-form.html @@ -33,6 +33,9 @@ Duplicate Duplication in progress... +
{{ $ctrl.yamlError }}
diff --git a/app/portainer/components/stack-duplication-form/stack-duplication-form.js b/app/portainer/components/stack-duplication-form/stack-duplication-form.js index 36e45996f..c9460611d 100644 --- a/app/portainer/components/stack-duplication-form/stack-duplication-form.js +++ b/app/portainer/components/stack-duplication-form/stack-duplication-form.js @@ -7,5 +7,6 @@ angular.module('portainer.app').component('stackDuplicationForm', { endpoints: '<', groups: '<', currentEndpointId: '<', + yamlError: '<', }, }); diff --git a/app/portainer/helpers/genericHelper.js b/app/portainer/helpers/genericHelper.js new file mode 100644 index 000000000..47f115890 --- /dev/null +++ b/app/portainer/helpers/genericHelper.js @@ -0,0 +1,15 @@ +import _ from 'lodash-es'; + +class GenericHelper { + static findDeepAll(obj, target, res = []) { + if (typeof obj === 'object') { + _.forEach(obj, (child, key) => { + if (key === target) res.push(child); + if (typeof child === 'object') GenericHelper.findDeepAll(child, target, res); + }); + } + return res; + } +} + +export default GenericHelper; diff --git a/app/portainer/helpers/stackHelper.js b/app/portainer/helpers/stackHelper.js index 77d43949b..b59a8ae29 100644 --- a/app/portainer/helpers/stackHelper.js +++ b/app/portainer/helpers/stackHelper.js @@ -1,4 +1,6 @@ import _ from 'lodash-es'; +import YAML from 'yaml'; +import GenericHelper from '@/portainer/helpers/genericHelper'; import { ExternalStackViewModel } from '@/portainer/models/stack'; @@ -22,6 +24,28 @@ angular.module('portainer.app').factory('StackHelper', [ ); } + helper.validateYAML = function (yaml, containerNames) { + let yamlObject; + + try { + yamlObject = YAML.parse(yaml); + } catch (err) { + return 'There is an error in the yaml syntax: ' + err; + } + + const names = _.uniq(GenericHelper.findDeepAll(yamlObject, 'container_name')); + const duplicateContainers = _.intersection(containerNames, names); + + if (duplicateContainers.length === 0) return; + + return ( + (duplicateContainers.length === 1 ? 'This container name is' : 'These container names are') + + ' already used by another container running in this environment: ' + + _.join(duplicateContainers, ', ') + + '.' + ); + }; + return helper; }, ]); diff --git a/app/portainer/views/stacks/create/createStackController.js b/app/portainer/views/stacks/create/createStackController.js index 9be2064b1..765947203 100644 --- a/app/portainer/views/stacks/create/createStackController.js +++ b/app/portainer/views/stacks/create/createStackController.js @@ -8,13 +8,17 @@ angular .controller('CreateStackController', function ( $scope, $state, + $async, StackService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper, + StackHelper, + ContainerHelper, CustomTemplateService, + ContainerService, endpoint ) { $scope.formValues = { @@ -36,6 +40,8 @@ angular formValidationError: '', actionInProgress: false, StackType: null, + editorYamlValidationError: '', + uploadYamlValidationError: '', }; $scope.addEnvironmentVariable = function () { @@ -154,6 +160,26 @@ angular $scope.editorUpdate = function (cm) { $scope.formValues.StackFileContent = cm.getValue(); + $scope.state.editorYamlValidationError = StackHelper.validateYAML($scope.formValues.StackFileContent, $scope.containerNames); + }; + + async function onFileLoadAsync(event) { + $scope.state.uploadYamlValidationError = StackHelper.validateYAML(event.target.result, $scope.containerNames); + } + + function onFileLoad(event) { + return $async(onFileLoadAsync, event); + } + + $scope.uploadFile = function (file) { + $scope.formValues.StackFile = file; + + if (file) { + const temporaryFileReader = new FileReader(); + temporaryFileReader.fileName = file.name; + temporaryFileReader.onload = onFileLoad; + temporaryFileReader.readAsText(file); + } }; $scope.onChangeTemplate = async function onChangeTemplate(template) { @@ -185,6 +211,13 @@ angular } catch (err) { Notifications.error('Failure', err, 'Unable to retrieve the ComposeSyntaxMaxVersion'); } + + try { + const containers = await ContainerService.containers(); + $scope.containerNames = ContainerHelper.getContainerNames(containers); + } catch (err) { + Notifications.error('Failure', err, 'Unable to retrieve Containers'); + } } initView(); diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html index 10f57d321..6719edfec 100644 --- a/app/portainer/views/stacks/create/createstack.html +++ b/app/portainer/views/stacks/create/createstack.html @@ -90,6 +90,9 @@ You can get more information about Compose file format in the official documentation. +
{{ state.editorYamlValidationError }}
@@ -112,10 +115,13 @@ You can upload a Compose file from your computer. +
{{ state.uploadYamlValidationError }}
- + {{ formValues.StackFile.name }} @@ -235,6 +241,11 @@
Web editor
+
+
{{ state.editorYamlValidationError }}
+
diff --git a/app/portainer/views/stacks/edit/stackController.js b/app/portainer/views/stacks/edit/stackController.js index 658da5c85..b6dc11100 100644 --- a/app/portainer/views/stacks/edit/stackController.js +++ b/app/portainer/views/stacks/edit/stackController.js @@ -17,8 +17,10 @@ angular.module('portainer.app').controller('StackController', [ 'EndpointService', 'GroupService', 'ModalService', + 'StackHelper', 'endpoint', 'Authentication', + 'ContainerHelper', function ( $async, $q, @@ -38,14 +40,17 @@ angular.module('portainer.app').controller('StackController', [ EndpointService, GroupService, ModalService, + StackHelper, endpoint, Authentication, + ContainerHelper ) { $scope.state = { actionInProgress: false, migrationInProgress: false, externalStack: false, showEditorTab: false, + yamlError: false, }; $scope.formValues = { @@ -191,6 +196,7 @@ angular.module('portainer.app').controller('StackController', [ $scope.editorUpdate = function (cm) { $scope.stackFileContent = cm.getValue(); + $scope.state.yamlError = StackHelper.validateYAML($scope.stackFileContent, $scope.containerNames); }; $scope.stopStack = stopStack; @@ -247,11 +253,13 @@ angular.module('portainer.app').controller('StackController', [ $q.all({ stack: StackService.stack(id), groups: GroupService.groups(), + containers: ContainerService.containers(), }) .then(function success(data) { var stack = data.stack; $scope.groups = data.groups; $scope.stack = stack; + $scope.containerNames = ContainerHelper.getContainerNames(data.containers); let resourcesPromise = Promise.resolve({}); if (stack.Status === 1) { @@ -272,6 +280,7 @@ angular.module('portainer.app').controller('StackController', [ assignComposeStackResources(data.resources); } } + $scope.state.yamlError = StackHelper.validateYAML($scope.stackFileContent, $scope.containerNames); }) .catch(function error(err) { Notifications.error('Failure', err, 'Unable to retrieve stack details');