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 warnings
pull/4273/head
Chaim Lev-Ari 2020-08-25 10:45:06 +03:00 committed by GitHub
parent b4f97efb85
commit 6fa450a981
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 3 deletions

View File

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

View File

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

View File

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