AMBARI-8830. Admin View: supported for property validation. (akovalenko)

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/CreateViewInstanceCtrl.js

@@ -72,9 +72,10 @@ angular.module('ambariAdminConsole')
   $scope.nameValidationPattern = /^\s*\w*\s*$/;
 
   $scope.save = function() {
-  if (!$scope.form.instanceCreateForm.submitted) {
+  if (!$scope.form.instanceCreateForm.isSaving) {
     $scope.form.instanceCreateForm.submitted = true;
     if($scope.form.instanceCreateForm.$valid){
+      $scope.form.instanceCreateForm.isSaving = true;
       View.createInstance($scope.instance)
         .then(function(data) {
           Alert.success('Created View Instance ' + $scope.instance.instance_name);
@@ -84,11 +85,26 @@ angular.module('ambariAdminConsole')
           } else {
             $location.path('/views/' + $scope.instance.view_name + '/versions/' + $scope.instance.version + '/instances/' + $scope.instance.instance_name + '/edit');
           }
-          $scope.form.instanceCreateForm.submitted = false;
+            $scope.form.instanceCreateForm.isSaving = false;
         })
-        .catch(function(data) {
-          Alert.error('Cannot create instance', data.message);
-         $scope.form.instanceCreateForm.submitted = false;
+        .catch(function (data) {
+          var errorMessage = data.message;
+          if (data.status === 500) {
+            try {
+              var errorObject = JSON.parse(errorMessage);
+              errorMessage = errorObject.detail;
+              angular.forEach(errorObject.propertyResults, function (item, key) {
+                $scope.form.instanceCreateForm[key].validationError = !item.valid;
+                if (!item.valid) {
+                  $scope.form.instanceCreateForm[key].validationMessage = item.detail;
+                }
+              });
+            } catch (e) {
+              console.error('Unable to parse error message:', data.message);
+            }
+          }
+          Alert.error('Cannot create instance', errorMessage);
+          $scope.form.instanceCreateForm.isSaving = false;
         });
       }
     }

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/ambariViews/ViewsEditCtrl.js

@@ -140,7 +140,22 @@ angular.module('ambariAdminConsole')
         $scope.propertiesForm.$setPristine();
       })
       .catch(function(data) {
-        Alert.error('Cannot save properties', data.data.message);
+        var errorMessage = data.statusText;
+        if (data.status === 500) {
+          try {
+            var errorObject = JSON.parse(errorMessage);
+            errorMessage = errorObject.detail;
+            angular.forEach(errorObject.propertyResults, function (item, key) {
+              $scope.propertiesForm[key].validationError = !item.valid;
+              if (!item.valid) {
+                $scope.propertiesForm[key].validationMessage = item.detail;
+              }
+            });
+          } catch (e) {
+            console.error('Unable to parse error message:', data.message);
+          }
+        }
+        Alert.error('Cannot save properties', errorMessage);
       });
     }
   };

ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/create.html

@@ -99,7 +99,7 @@
     </div>
     <div class="panel-body property-form">
       <div class="form-group" ng-repeat="parameter in instance.properties"
-        ng-class="{'has-error' : (form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted)}" >
+        ng-class="{'has-error' : ((form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted) || form.instanceCreateForm[parameter.name].validationError)}" >
         <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.label || parameter.name}}{{parameter.required ? '*' : ''}}</label>
         <div ng-switch="parameter.type">
           <div class="col-sm-9 checkbox" ng-switch-when="boolean">
@@ -110,6 +110,9 @@
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted'>
               This field is required.
             </div>
+            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].validationError'>
+              {{form.instanceCreateForm[parameter.name].validationMessage}}
+            </div>
           </div>
         </div>
       </div>
@@ -121,8 +124,8 @@
   
   <div class="col-sm-12 ">
     <button class="btn btn-primary pull-right left-margin save-button"
-            ng-class="{'disabled' : (form.instanceCreateForm.submitted)}" ng-click="save()" type="submit">Save</button>
+            ng-class="{'disabled' : (form.instanceCreateForm.isSaving)}" ng-click="save()" type="submit">Save</button>
     <a href ng-click="cancel()" class="btn btn-default pull-right cancel-button">Cancel</a>
   </div>
     
-</form>
+</form>

ambari-admin/src/main/resources/ui/admin-web/app/views/ambariViews/edit.html

@@ -136,7 +136,7 @@
   <div class="panel-body">
     <form name="propertiesForm" class="form-horizontal property-form" ng-hide="isConfigurationEmpty" novalidate>
       <fieldset>
-        <div class="form-group" ng-repeat="property in configurationMeta" ng-class="{'has-error' : property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled}">
+        <div class="form-group" ng-repeat="property in configurationMeta" ng-class="{'has-error' : (!editConfigurationDisabled && ((property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled) || propertiesForm[property.name].validationError))}">
           <label for="" class="control-label col-sm-3" ng-class="{'not-required': !property.required}">{{property.label || property.name}}{{property.required ? '*' : ''}}</label>
           <div ng-switch="property.type">
             <div class="col-sm-9 checkbox" ng-switch-when="boolean">
@@ -147,6 +147,9 @@
               <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled'>
                 This field is required.
               </div>
+              <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && propertiesForm[property.name].validationError && !editConfigurationDisabled'>
+                {{propertiesForm[property.name].validationMessage}}
+              </div>
             </div>
           </div>
         </div>