mirror of https://github.com/portainer/portainer
feat(aci): introduce basic form validation (#4268)
* feat(aci): introduce basic form validation * feat(aci): check every port bindings * fix(aci): remove name and image warningspull/4273/head
parent
b4f97efb85
commit
6fa450a981
|
@ -39,6 +39,9 @@ export function CreateContainerGroupRequest(model) {
|
|||
var addressPorts = [];
|
||||
for (var i = 0; i < model.Ports.length; i++) {
|
||||
var binding = model.Ports[i];
|
||||
if (!binding.container || !binding.host) {
|
||||
continue;
|
||||
}
|
||||
|
||||
containerPorts.push({
|
||||
port: binding.container,
|
||||
|
|
|
@ -14,6 +14,7 @@ angular.module('portainer.azure').controller('AzureCreateContainerInstanceContro
|
|||
actionInProgress: false,
|
||||
selectedSubscription: null,
|
||||
selectedResourceGroup: null,
|
||||
formValidationError: '',
|
||||
};
|
||||
|
||||
$scope.changeSubscription = function () {
|
||||
|
@ -34,6 +35,11 @@ angular.module('portainer.azure').controller('AzureCreateContainerInstanceContro
|
|||
var subscriptionId = $scope.state.selectedSubscription.Id;
|
||||
var resourceGroupName = $scope.state.selectedResourceGroup.Name;
|
||||
|
||||
$scope.state.formValidationError = validateForm(model);
|
||||
if ($scope.state.formValidationError) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$scope.state.actionInProgress = true;
|
||||
AzureService.createContainerGroup(model, subscriptionId, resourceGroupName)
|
||||
.then(function success() {
|
||||
|
@ -41,6 +47,7 @@ angular.module('portainer.azure').controller('AzureCreateContainerInstanceContro
|
|||
$state.go('azure.containerinstances');
|
||||
})
|
||||
.catch(function error(err) {
|
||||
err = err.data ? err.data.error : err;
|
||||
Notifications.error('Failure', err, 'Unable to create container');
|
||||
})
|
||||
.finally(function final() {
|
||||
|
@ -48,6 +55,14 @@ angular.module('portainer.azure').controller('AzureCreateContainerInstanceContro
|
|||
});
|
||||
};
|
||||
|
||||
function validateForm(model) {
|
||||
if (!model.Ports || !model.Ports.length || model.Ports.every((port) => !port.host || !port.container)) {
|
||||
return 'At least one port binding is required';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function updateResourceGroupsAndLocations(subscription, resourceGroups, providers) {
|
||||
$scope.state.selectedResourceGroup = resourceGroups[subscription.Id][0];
|
||||
$scope.resourceGroups = resourceGroups[subscription.Id];
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" autocomplete="off">
|
||||
<form class="form-horizontal" autocomplete="off" name="aciForm">
|
||||
<div class="col-sm-12 form-section-title">
|
||||
Azure settings
|
||||
</div>
|
||||
|
@ -53,7 +53,14 @@
|
|||
<div class="form-group">
|
||||
<label for="container_name" class="col-sm-1 control-label text-left">Name</label>
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" ng-model="model.Name" name="container_name" placeholder="e.g. myContainer" />
|
||||
<input type="text" class="form-control" ng-model="model.Name" name="container_name" placeholder="e.g. myContainer" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-show="aciForm.container_name.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="aciForm.container_name.$error">
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Name is required. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !name-input -->
|
||||
|
@ -61,7 +68,14 @@
|
|||
<div class="form-group">
|
||||
<label for="image_name" class="col-sm-1 control-label text-left">Image</label>
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" ng-model="model.Image" name="image_name" placeholder="e.g. nginx:alpine" />
|
||||
<input type="text" class="form-control" ng-model="model.Image" name="image_name" placeholder="e.g. nginx:alpine" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-show="aciForm.image_name.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="aciForm.image_name.$error">
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image is required. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !image-input -->
|
||||
|
@ -153,6 +167,7 @@
|
|||
<span ng-hide="state.actionInProgress">Deploy the container</span>
|
||||
<span ng-show="state.actionInProgress">Deployment in progress...</span>
|
||||
</button>
|
||||
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !actions -->
|
||||
|
|
Loading…
Reference in New Issue