AMBARI-9862. Keytab field is not shown correctly (alexantonenko)

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

@@ -31,6 +31,7 @@ angular.module('ambariAdminConsole')
 
       angular.forEach(parameters, function (item) {
         item.value = item['defaultValue'];
+        item.displayName = item.name.replace(/\./g, '\.\u200B');
       });
 
       $scope.instance = {

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

@@ -53,6 +53,9 @@ angular.module('ambariAdminConsole')
   // Get META for properties
   View.getMeta($routeParams.viewId, $routeParams.version).then(function(data) {
     $scope.configurationMeta = data.data.ViewVersionInfo.parameters;
+    angular.forEach($scope.configurationMeta, function (item) {
+      item.displayName = item.name.replace(/\./g, '\.\u200B');
+    });
     reloadViewInfo();
   });
 

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

@@ -100,7 +100,7 @@
     <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) || 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>
+        <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.label || parameter.displayName}}{{parameter.required ? '*' : ''}}</label>
         <div ng-switch="parameter.type">
           <div class="col-sm-9 checkbox" ng-switch-when="boolean">
             <input type="checkbox" class="viewproperty-input" name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter">

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

@@ -137,7 +137,7 @@
     <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' : (!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>
+          <label for="" class="control-label col-sm-3" ng-class="{'not-required': !property.required}">{{property.label || property.displayName}}{{property.required ? '*' : ''}}</label>
           <div ng-switch="property.type">
             <div class="col-sm-9 checkbox" ng-switch-when="boolean">
               <input type="checkbox" class="propertie-input" ng-disabled="editConfigurationDisabled" name="{{property.name}}" ng-model="configuration[property.name]" ng-true-value="true" ng-false-value="false" popover="{{property.description}}" popover-title="{{property.name}}" popover-trigger="mouseenter">