AMBARI-14521. Ambari Admin: externalize string constants used in views (alexantonenko)

ambari-admin/src/main/resources/ui/admin-web/app/index.html

@@ -48,15 +48,15 @@
       <header class="navbar navbar-static-top navbar-inverse">
         <div class="navbar-inner">
           <div class="container">
-            <a href="/#/main/dashboard" class="logo"><img src="/img/logo-white.png" alt="Apache Ambari" title="Apache Ambari"></a>
-            <a href="/#/main/dashboard" class="brand" title="Apache Ambari">Ambari</a>
+            <a href="/#/main/dashboard" class="logo"><img src="/img/logo-white.png" alt="{{'common.apacheAmbari' | translate}}" title="{{'common.apacheAmbari' | translate}}"></a>
+            <a href="/#/main/dashboard" class="brand" title="{{'common.apacheAmbari' | translate}}">{{'common.ambari' | translate}}</a>
             <ul class="nav navbar-nav navbar-right">
               <li>
                 <div class="btn-group navbar-views-dropdown" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false">
                   <a href="/#/main/views" ng-click="gotoViewsDashboard()" class="dropdown-toggle"><i class="fa fa-th"></i></a>
                   <ul class="dropdown-menu" role="menu">
                     <li ng-repeat="instance in viewInstances"><a href="/#/main{{instance.context_path}}" ng-click="about()">{{instance.label}}</a></li>
-                    <li ng-show="!viewInstances.length" class="disabled"><a>No Views</a></li>
+                    <li ng-show="!viewInstances.length" class="disabled"><a>{{'common.noViews' | translate}}</a></li>
                   </ul>
                 </div>
               </li>
@@ -66,14 +66,14 @@
                     <i class="fa fa-user"></i> {{currentUser}} <span class="caret"></span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
-                    <li><a href ng-click="about()">About</a></li>
+                    <li><a href ng-click="about()">{{'common.about' | translate}}</a></li>
                     <li class="divider"></li>
-                    <li><a href ng-click="signOut()">Sign out</a></li>
+                    <li><a href ng-click="signOut()">{{'common.signOut' | translate}}</a></li>
                   </ul>
                 </div>
               </li>
             </ul>
-          </div>        
+          </div>
         </div>
       </header>
     </div>

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

@@ -21,6 +21,9 @@ angular.module('ambariAdminConsole')
 .controller('CreateViewInstanceCtrl',['$scope', 'View', 'Alert', 'Cluster', '$routeParams', '$location', 'UnsavedDialog', '$translate', function($scope, View, Alert, Cluster, $routeParams, $location, UnsavedDialog, $translate) {
   var $t = $translate.instant;
   $scope.form = {};
+  $scope.constants = {
+    props: $t('views.properties')
+  };
   var targetUrl = '';
 
   function loadMeta(){

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

@@ -23,6 +23,11 @@ angular.module('ambariAdminConsole')
   $scope.identity = angular.identity;
   $scope.isConfigurationEmpty = true;
   $scope.isSettingsEmpty = true;
+  $scope.constants = {
+    instance: $t('views.instance'),
+    props: $t('views.properties'),
+    perms: $t('views.permissions').toLowerCase()
+  };
 
   function reloadViewInfo(section){
     // Load instance data, after View permissions meta loaded

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

@@ -21,6 +21,10 @@ angular.module('ambariAdminConsole')
 .controller('ViewsListCtrl',['$scope', 'View', '$modal', 'Alert', 'ConfirmationModal', '$location', '$translate', function($scope, View, $modal, Alert, ConfirmationModal, $location, $translate) {
   var deferredList = [],
     $t = $translate.instant;
+  $scope.constants = {
+    unable: $t('views.alerts.unableToCreate'),
+    views: $t('common.views').toLowerCase()
+  };
   $scope.$on('$locationChangeStart', function() {
     deferredList.forEach(function(def) {
       def.reject();

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/clusters/ClustersManageAccessCtrl.js

@@ -20,6 +20,9 @@
 angular.module('ambariAdminConsole')
 .controller('ClustersManageAccessCtrl', ['$scope', '$location', 'Cluster', '$routeParams', 'Alert', 'PermissionLoader', 'PermissionSaver', '$translate', function($scope, $location, Cluster, $routeParams, Alert, PermissionLoader, PermissionSaver, $translate) {
   var $t = $translate.instant;
+  $scope.getConstant = function (key) {
+    return $t('common.' + key).toLowerCase();
+  };
   $scope.identity = angular.identity;
   function reloadClusterData(){
     PermissionLoader.getClusterPermissions({

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/clusters/UserAccessListCtrl.js

@@ -21,6 +21,9 @@ angular.module('ambariAdminConsole')
 .controller('UserAccessListCtrl',['$scope', '$location', 'Cluster', '$modal', '$rootScope', '$routeParams', 'PermissionSaver', 'Alert', '$translate',
 function($scope, $location, Cluster, $modal, $rootScope, $routeParams, PermissionSaver, Alert, $translate) {
   var $t = $translate.instant;
+  $scope.constants = {
+    users: $t('common.users').toLowerCase()
+  };
   $scope.users = [];
   $scope.usersPerPage = 10;
   $scope.currentPage = 1;

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsEditCtrl.js

@@ -20,6 +20,11 @@
 angular.module('ambariAdminConsole')
 .controller('GroupsEditCtrl',['$scope', 'Group', '$routeParams', 'Alert', 'ConfirmationModal', '$location', '$translate', function($scope, Group, $routeParams, Alert, ConfirmationModal, $location, $translate) {
   var $t = $translate.instant;
+  $scope.constants = {
+    group: $t('common.group'),
+    view: $t('common.view').toLowerCase(),
+    cluster: $t('common.cluster').toLowerCase()
+  };
   $scope.editMode = false;
   $scope.group = new Group($routeParams.id);
   $scope.group.editingUsers = [];

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/groups/GroupsListCtrl.js

@@ -20,6 +20,9 @@
 angular.module('ambariAdminConsole')
 .controller('GroupsListCtrl',['$scope', 'Group', '$modal', 'ConfirmationModal', '$rootScope', '$translate', function($scope, Group, $modal, ConfirmationModal, $rootScope, $translate) {
   var $t = $translate.instant;
+  $scope.constants = {
+    groups: $t('common.groups').toLowerCase()
+  };
   $scope.groups = [];
 
   $scope.groupsPerPage = 10;

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/stackVersions/StackVersionsListCtrl.js

@@ -20,6 +20,9 @@
 angular.module('ambariAdminConsole')
 .controller('StackVersionsListCtrl', ['$scope', 'Cluster', 'Stack', '$routeParams', '$translate', function ($scope, Cluster, Stack, $routeParams, $translate) {
   var $t = $translate.instant;
+  $scope.getConstant = function (key) {
+    return $t('common.' + key).toLowerCase();
+  }
   $scope.clusterName = $routeParams.clusterName;
   $scope.filter = {
     version: '',

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersListCtrl.js

@@ -20,6 +20,10 @@
 angular.module('ambariAdminConsole')
   .controller('UsersListCtrl',['$scope', 'User', '$modal', '$rootScope', 'UserConstants', '$translate', function($scope, User, $modal, $rootScope, UserConstants, $translate) {
   var $t = $translate.instant;
+  $scope.constants = {
+    admin: $t('users.ambariAdmin'),
+    users: $t('common.users').toLowerCase()
+  };
   $scope.users = [];
   $scope.usersPerPage = 10;
   $scope.currentPage = 1;

ambari-admin/src/main/resources/ui/admin-web/app/scripts/controllers/users/UsersShowCtrl.js

@@ -22,6 +22,15 @@ angular.module('ambariAdminConsole')
 
   var $t = $translate.instant;
 
+  $scope.constants = {
+    user: $t('common.user'),
+    status: $t('users.status'),
+    admin: $t('users.admin'),
+    password: $t('users.password'),
+    view: $t('common.view').toLowerCase(),
+    cluster: $t('common.cluster').toLowerCase()
+  };
+
   function loadUserInfo(){
     User.get($routeParams.id).then(function(data) {
       $scope.user = User.makeUser(data).Users;

ambari-admin/src/main/resources/ui/admin-web/app/scripts/i18n.config.js

@@ -39,6 +39,7 @@ angular.module('ambariAdminConsole')
       'details': 'Details',
       'goToDashboard': 'Go to Dashboard',
       'noClusters': 'No Clusters',
+      'noViews': 'No Views',
       'view': 'View',
       'displayLabel': 'Display label',
       'search': 'Search',
@@ -70,6 +71,7 @@ angular.module('ambariAdminConsole')
       'ldap': 'LDAP',
       'jwt': 'JWT',
       'warning': 'Warning',
+      'filterInfo': '{{showed}} of {{total}} {{term}} showing',
 
       'clusterNameChangeConfirmation': {
         'title': 'Confirm Cluster Name Change',
@@ -89,8 +91,7 @@ angular.module('ambariAdminConsole')
       'alerts': {
         'fieldRequired': 'Field required!',
         'fieldIsRequired': 'This field is required.',
-        'noSpecialChars': 'Must no contain special characters!',
-        'instanceExists': 'Instance with this name already exists.',
+        'noSpecialChars': 'Must not contain special characters!',
         'nothingToDisplay': 'No {{term}} to display.',
         'noPrivileges': 'No {{term}} privileges',
         'noPrivilegesDescription': 'This {{term}} does not have any privileges.',
@@ -140,6 +141,7 @@ angular.module('ambariAdminConsole')
     },
 
     'views': {
+      'instance': 'Instance',
       'viewInstance': 'View Instance',
       'create': 'Create Instance',
       'createViewInstance': 'Create View Instance',
@@ -168,17 +170,17 @@ angular.module('ambariAdminConsole')
       'goToInstance': 'Go to instance',
       'pending': 'Pending...',
       'deploying': 'Deploying...',
+      'properties': 'properties',
 
       'alerts': {
         'noSpecialChars': 'Must not contain any special characters.',
         'noSpecialCharsOrSpaces': 'Must not contain any special characters or spaces.',
-        'noProperties': 'There are no properties defined for this view.',
-        'noPermissions': 'There are no permissions defined for this view.',
+        'instanceExists': 'Instance with this name already exists.',
+        'notDefined': 'There are no {{term}} defined for this view.',
         'cannotEditInstance': 'Cannot Edit Static Instances',
         'cannotDeleteStaticInstance': 'Cannot Delete Static Instances',
         'deployError': 'Error deploying. Check Ambari Server log.',
         'unableToCreate': 'Unable to create view instances',
-        'onlySimpleChars': 'Must contain only simple characters.',
         'cannotUseOption': 'This view cannot use this option',
         'unableToResetErrorMessage': 'Unable to reset error message for prop: {{key}}',
         'instanceCreated': 'Created View Instance {{instanceName}}',
@@ -197,6 +199,7 @@ angular.module('ambariAdminConsole')
       'switchToList': 'Switch to list view',
       'switchToBlock': 'Switch to block view',
       'role': 'Role',
+      'assignRoles': 'Assign roles to these {{term}}',
 
       'alerts': {
         'cannotLoadClusterData': 'Cannot load cluster data'
@@ -207,8 +210,10 @@ angular.module('ambariAdminConsole')
       'createLocal': 'Create Local Group',
       'name': 'Group name',
       'members': 'Members',
+      'membersPlural': '{{n}} member{{n == 1 ? "" : "s"}}',
 
       'alerts': {
+        'onlySimpleChars': 'Must contain only simple characters.',
         'groupCreated': 'Created group <a href="#/groups/{{groupName}}/edit">{{groupName}}</a>',
         'groupCreationError': 'Group creation error',
         'cannotUpdateGroupMembers': 'Cannot update group members',
@@ -219,6 +224,7 @@ angular.module('ambariAdminConsole')
     'users': {
       'username': 'Username',
       'userName': 'User name',
+      'admin': 'Admin',
       'ambariAdmin': 'Ambari Admin',
       'changePassword': 'Change Password',
       'changePasswordFor': 'Change Password for {{userName}}',
@@ -232,6 +238,9 @@ angular.module('ambariAdminConsole')
       'password': 'Password',
       'passwordConfirmation': 'Password сonfirmation',
       'userIsAdmin': 'This user is an Ambari Admin and has all privileges.',
+      'showAll': 'Show all users',
+      'showAdmin': 'Show only admin users',
+      'groupMembership': 'Group Membership',
 
       'changeStatusConfirmation': {
         'title': 'Change Status',
@@ -255,7 +264,7 @@ angular.module('ambariAdminConsole')
         'passwordRequired': 'Password required!',
         'wrongPassword': 'Password must match!',
         'cannotChange': 'Cannot Change {{term}}',
-        'userCreated': 'Created user <a href="#/users/{{encUserName}}/edit">{{userName}}</a>',
+        'userCreated': 'Created user <a href="#/users/{{encUserName}}">{{userName}}</a>',
         'userCreationError': 'User creation error',
         'removeUserError': 'Removing from group error',
         'cannotAddUser': 'Cannot add user to group',

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

@@ -16,20 +16,20 @@
 * limitations under the License.
 -->
 <ol class="breadcrumb">
-  <li><a href="#/views">Views</a></li>
-  <li class="active">Create Instance</li>
+  <li><a href="#/views">{{'common.views' | translate}}</a></li>
+  <li class="active">{{'views.create' | translate}}</li>
 </ol>
 <hr>
 <form class="form-horizontal create-view-form" role="form" name="form.instanceCreateForm" novalidate>
   <div class="view-header">
     <div class="form-group">
       <div class="col-sm-2">
-        <label for="" class="control-label">View</label>
+        <label for="" class="control-label">{{'common.view' | translate}}</label>
       </div>
       <div class="col-sm-10"><label for="" class="control-label">{{view.ViewVersionInfo.view_name}}</label></div>
     </div>
     <div class="form-group">
-      <div class="col-sm-2"><label for="" class="control-label">Version</label></div>
+      <div class="col-sm-2"><label for="" class="control-label">{{'common.version' | translate}}</label></div>
       <div class="col-sm-3">
         <select ng-model="version" class="instanceversion-input form-control" ng-change="versionChanged()" ng-options="o as o for o in versions"></select>
       </div>
@@ -38,47 +38,41 @@
 
   <div class="panel panel-default">
     <div class="panel-heading">
-      <h3 class="panel-title">Details</h3>
+      <h3 class="panel-title">{{'common.details' | translate}}</h3>
     </div>
     <div class="panel-body">
       <div class="form-group"
       ng-class="{'has-error' : ( (form.instanceCreateForm.instanceNameInput.$error.required || form.instanceCreateForm.instanceNameInput.$error.pattern) && form.instanceCreateForm.submitted) || instanceExists }"
       >
-        <label for="" class="control-label col-sm-3">Instance Name*</label>
+        <label for="" class="control-label col-sm-3">{{'views.instanceName' | translate}}*</label>
         <div class="col-sm-9">
           <input type="text" class="form-control instancename-input" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name" autocomplete="off">
 
-          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>
-            This field is required.
-          </div>
-          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>
-            Must not contain any special characters or spaces.
-          </div>
-          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>
-            Instance with this name already exists.
-          </div>
+          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>{{'common.alerts.fieldIsRequired' | translate}}</div>
+          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>{{'views.alerts.noSpecialCharsOrSpaces' | translate}}</div>
+          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>{{'views.alerts.instanceExists' | translate}}</div>
         </div>
       </div>
       <div class="form-group"
       ng-class="{'has-error' : ( (form.instanceCreateForm.displayLabel.$error.required || form.instanceCreateForm.displayLabel.$error.pattern) && form.instanceCreateForm.submitted)}">
-        <label for="" class="control-label col-sm-3">Display Name*</label>
+        <label for="" class="control-label col-sm-3">{{'views.displayName' | translate}}*</label>
         <div class="col-sm-9">
           <input type="text" class="form-control instancelabel-input" name="displayLabel" ng-model="instance.label" required ng-pattern="/^([a-zA-Z0-9._\s]+)$/" autocomplete="off">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.required && form.instanceCreateForm.submitted'>
-            This field is required.
+            {{'common.alerts.fieldIsRequired' | translate}}
           </div>
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.pattern && form.instanceCreateForm.submitted'>
-            Must not contain any special characters.
+            {{'views.alerts.noSpecialChars' | translate}}
           </div>
         </div>
       </div>
       <div class="form-group" ng-class="{'has-error' : form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted }">
-        <label for="" class="control-label col-sm-3">Description*</label>
+        <label for="" class="control-label col-sm-3">{{'views.description' | translate}}*</label>
         <div class="col-sm-9">
           <input type="text" class="form-control" name="description" ng-model="instance.description" maxlength="140" required>
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted'>
-            This field is required.
+            {{'common.alerts.fieldIsRequired' | translate}}
           </div>
         </div>
       </div>
@@ -86,7 +80,7 @@
         <div class="col-sm-10 col-sm-offset-3">
           <div class="checkbox">
             <label>
-              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> Visible
+              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> {{'views.visible' | translate}}
             </label>
           </div>
         </div>
@@ -96,7 +90,7 @@
 
   <div class="panel panel-default" ng-hide="!numberOfSettingConfigs">
     <div class="panel-heading">
-      <h3 class="panel-title">Settings</h3>
+      <h3 class="panel-title">{{'views.settings' | translate}}</h3>
     </div>
     <div class="panel-body">
       <div class="form-group" ng-repeat="parameter in instance.properties | filter:{clusterConfig:false}"
@@ -109,7 +103,7 @@
           <div class="col-sm-9" ng-switch-default>
             <input type="{{parameter.masked ? 'password' : 'text'}}" class="form-control viewproperty-input" name="{{parameter.name}}" ng-change="form.instanceCreateForm[parameter.name].validationError=''" ng-required="parameter.required" ng-model="parameter.value" autocomplete="off" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter" placeholder="{{parameter.placeholder}}">
             <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.
+              {{'common.alerts.fieldIsRequired' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].validationError'>
               {{form.instanceCreateForm[parameter.name].validationMessage}}
@@ -122,20 +116,20 @@
 
   <div class="panel panel-default" ng-hide="!numberOfClusterConfigs">
     <div class="panel-heading">
-      <h3 class="panel-title">Cluster Configuration</h3>
+      <h3 class="panel-title">{{'views.clusterConfiguration' | translate}}</h3>
     </div>
 
     <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
       <div class="checkbox create-checkbox-cluster">
         <label>
-          <input type="radio" ng-disabled="!clusterConfigurable || noClusterAvailible" ng-model="instance.isLocalCluster" ng-change="enableLocalCluster()" ng-value="true" class="visibilityCheckbox"> Local Ambari Managed Cluster
+          <input type="radio" ng-disabled="!clusterConfigurable || noClusterAvailible" ng-model="instance.isLocalCluster" ng-change="enableLocalCluster()" ng-value="true" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
         </label>
       </div>
 
       <div class="form-horizontal property-form">
         <div class="form-group">
 
-          <label for="" class="control-label col-sm-3 ng-binding not-required" >Cluster Name</label>
+          <label for="" class="control-label col-sm-3 ng-binding not-required" >{{'views.clusterName' | translate}}</label>
           <div>
             <div class="col-sm-9">
               <select ng-model="cluster" ng-disabled="!instance.isLocalCluster" ng-change="onClusterChange()" class="clusters-name-dropdown form-control"  ng-options="o as o for o in clusters"></select>
@@ -148,7 +142,7 @@
     <div class="panel-body property-form">
       <div class="checkbox">
         <label>
-          <input type="radio" ng-model="instance.isLocalCluster" ng-value="false" class="visibilityCheckbox"> Custom
+          <input type="radio" ng-model="instance.isLocalCluster" ng-value="false" class="visibilityCheckbox"> {{'views.custom' | translate}}
         </label>
       </div>
       <div class="alert alert-danger bottom-margin top-margin" ng-show='form.instanceCreateForm.generalValidationError'>
@@ -164,7 +158,7 @@
           <div class="col-sm-9" ng-switch-default>
             <input type="{{parameter.masked ? 'password' : 'text'}}" class="form-control viewproperty-input" name="{{parameter.name}}" ng-disabled="instance.isLocalCluster" ng-change="form.instanceCreateForm[parameter.name].validationError=''" ng-required="parameter.required && !instance.isLocalCluster" ng-model="parameter.value" autocomplete="off" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter" placeholder="{{parameter.placeholder}}">
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted && !instance.isLocalCluster'>
-              This field is required.
+              {{'common.alerts.fieldIsRequired' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].validationError'>
               {{form.instanceCreateForm[parameter.name].validationMessage}}
@@ -173,15 +167,15 @@
         </div>
       </div>
       <div ng-show="!instance.properties.length">
-        <div class="alert alert-info">There are no properties defined for this view.</div>
+        <div class="alert alert-info">{{'views.alerts.notDefined' | translate: '{term: constants.props}'}}</div>
       </div>
     </div>
   </div>
 
   <div class="col-sm-12 ">
     <button class="btn btn-primary pull-right left-margin 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>
+            ng-class="{'disabled' : (form.instanceCreateForm.isSaving)}" ng-click="save()" type="submit">{{'common.controls.save' | translate}}</button>
+    <a href ng-click="cancel()" class="btn btn-default pull-right cancel-button">{{'common.controls.cancel' | translate}}</a>
   </div>
 
 </form>

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

@@ -17,12 +17,12 @@
 -->
 <div class="clearfix">
   <ol class="breadcrumb pull-left">
-    <li><a href="#/views">Views</a></li>
-    <li class="active">{{instance.ViewInstanceInfo.label}} <a class="gotoinstance" ng-show="instance.ViewInstanceInfo.visible" href="/#/main{{instance.ViewInstanceInfo.context_path}}">Go to instance</a></li>
+    <li><a href="#/views">{{'common.views' | translate}}</a></li>
+    <li class="active">{{instance.ViewInstanceInfo.label}} <a class="gotoinstance" ng-show="instance.ViewInstanceInfo.visible" href="/#/main{{instance.ViewInstanceInfo.context_path}}">{{'views.goToInstance' | translate}}</a></li>
   </ol>
   <div class="pull-right top-margin-4" ng-switch="instance.ViewInstanceInfo.static">
-    <button ng-switch-when="true" class="btn disabled btn-default btn-delete-instance" tooltip="Cannot Delete Static Instances">Delete Instance</button>
-    <button ng-switch-when="false" class="btn btn-danger" ng-click="deleteInstance(instance)">Delete Instance</button>
+    <button ng-switch-when="true" class="btn disabled btn-default btn-delete-instance" tooltip="{{'views.alerts.cannotDeleteStaticInstance' | translate}}">{{'common.delete' | translate: '{term: instanceType}'}}</button>
+    <button ng-switch-when="false" class="btn btn-danger" ng-click="deleteInstance(instance)">{{'common.delete' | translate: '{term: constants.instance}'}}</button>
   </div>
 </div>
 <hr>
@@ -30,50 +30,50 @@
   <div class="view-header">
     <div class="form-group">
       <div class="col-sm-2">
-        <label for="" class="control-label">View</label>
+        <label for="" class="control-label">{{'common.view' | translate}}</label>
       </div>
       <div class="col-sm-10"><label for="" class="control-label">{{instance.ViewInstanceInfo.view_name}}</label></div>
     </div>
     <div class="form-group">
-      <div class="col-sm-2"><label for="" class="control-label">Version</label></div>
+      <div class="col-sm-2"><label for="" class="control-label">{{'common.version' | translate}}</label></div>
       <div class="col-sm-3">
-        <input disabled="disabled" type="text" class="form-control instancename-input" placeholder="Version" value="{{instance.ViewInstanceInfo.version}}"></div>
+        <input disabled="disabled" type="text" class="form-control instancename-input" placeholder="{{'common.version' | translate}}" value="{{instance.ViewInstanceInfo.version}}"></div>
     </div>
   </div>
 </div>
 <div class="panel panel-default" ng-cloak ng-show="instance">
   <div class="panel-heading clearfix">
-    <h3 class="panel-title pull-left">Details</h3>
+    <h3 class="panel-title pull-left">{{'common.details' | translate}}</h3>
     <div class="pull-right" ng-switch="instance.ViewInstanceInfo.static">
-      <a href ng-switch-when="false" ng-click="toggleDetailsSettingsEdit()" ng-show="editDetailsSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil" ></span> Edit</a>
-      <a href ng-switch-when="true" class="settings-edit-toggle disabled" tooltip="Cannot Edit Static Instances"> <span class="glyphicon glyphicon-pencil" ></span> Edit</a>
+      <a href ng-switch-when="false" ng-click="toggleDetailsSettingsEdit()" ng-show="editDetailsSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil" ></span> {{'views.edit' | translate}}</a>
+      <a href ng-switch-when="true" class="settings-edit-toggle disabled" tooltip="{{'views.cannotEditInstance' | translate}}"> <span class="glyphicon glyphicon-pencil" ></span> {{'views.edit' | translate}}</a>
     </div>
   </div>
   <div class="panel-body">
     <form class="form-horizontal" name="detailsForm" novalidate>
       <fieldset ng-disabled="editDetailsSettingsDisabled">
         <div class="form-group">
-          <label for="" class="col-sm-3 control-label">Instance Name</label>
-          <div class="col-sm-9"><input disabled="disabled" type="text" class="form-control instancename-input" placeholder="Display Name" value="{{instance.ViewInstanceInfo.instance_name}}"></div>
+          <label for="" class="col-sm-3 control-label">{{'views.instanceName' | translate}}</label>
+          <div class="col-sm-9"><input disabled="disabled" type="text" class="form-control instancename-input" placeholder="{{'views.displayName' | translate}}" value="{{instance.ViewInstanceInfo.instance_name}}"></div>
         </div>
         <div class="form-group" ng-class="{'has-error' : (detailsForm.displayName.$error.required || detailsForm.displayName.$error.pattern) && !editDetailsSettingsDisabled}">
-          <label for="" class="col-sm-3 control-label">Display Name</label>
+          <label for="" class="col-sm-3 control-label">{{'views.displayName' | translate}}</label>
           <div class="col-sm-9">
-            <input type="text" class="form-control instancename-input" placeholder="Display Name" name="displayName" required ng-model="settings.label" ng-pattern="/^([a-zA-Z0-9._\s]+)$/">
+            <input type="text" class="form-control instancename-input" placeholder="{{'views.displayName' | translate}}" name="displayName" required ng-model="settings.label" ng-pattern="/^([a-zA-Z0-9._\s]+)$/">
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='detailsForm.displayName.$error.required  && !editDetailsSettingsDisabled'>
-              This field is required.
+              {{'common.alerts.fieldIsRequired' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='detailsForm.displayName.$error.pattern && !editDetailsSettingsDisabled'>
-              Must not contain any special characters.
+              {{'views.alerts.noSpecialChars' | translate}}
             </div>
           </div>
         </div>
         <div class="form-group" ng-class="{'has-error' : detailsForm.description.$error.required  && !editDetailsSettingsDisabled}">
-          <label for="" class="control-label col-sm-3">Description</label>
+          <label for="" class="control-label col-sm-3">{{'views.description' | translate}}</label>
           <div class="col-sm-9">
-            <input type="text" class="form-control" ng-model="settings.description" name="description" placeholder="Instance Description" required>
+            <input type="text" class="form-control" ng-model="settings.description" name="description" placeholder="{{'views.instanceDescription' | translate}}" required>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='detailsForm.description.$error.required  && !editDetailsSettingsDisabled'>
-              This field is required.
+              {{'common.alerts.fieldIsRequired' | translate}}
             </div>
           </div>
         </div>
@@ -81,15 +81,15 @@
           <div class="col-sm-offset-3 col-sm-10">
             <div class="checkbox">
               <label>
-                <input type="checkbox" ng-model="settings.visible" ng-class="instancevisibility-input"> Visible
+                <input type="checkbox" ng-model="settings.visible" ng-class="instancevisibility-input"> {{'views.visible' | translate}}
               </label>
             </div>
           </div>
         </div>
         <div class="form-group" ng-hide="editDetailsSettingsDisabled">
           <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-primary pull-right left-margin settingssave-btn" ng-click="saveDetails()">Save</button>
-            <button class="btn btn-default pull-right settingscancel-btn" ng-click="cancelDetails()">Cancel</button>
+            <button class="btn btn-primary pull-right left-margin settingssave-btn" ng-click="saveDetails()">{{'common.controls.save' | translate}}</button>
+            <button class="btn btn-default pull-right settingscancel-btn" ng-click="cancelDetails()">{{'common.controls.cancel' | translate}}</button>
           </div>
         </div>
       </fieldset>
@@ -99,7 +99,7 @@
 
 <div class="panel panel-default views-permissions-panel" style="">
   <div class="panel-heading clearfix">
-    <h3 class="panel-title pull-left">Permissions</h3>
+    <h3 class="panel-title pull-left">{{'views.permissions' | translate}}</h3>
   </div>
   <div class="panel-body">
 
@@ -107,9 +107,9 @@
     <table class="table" ng-show="!isPermissionsEmpty">
       <thead>
         <tr>
-          <th class="col-sm-2"><label>Permission</label></th>
-          <th><label>Grant permission to these users</label></th>
-          <th><label>Grant permission to these groups</label></th>
+          <th class="col-sm-2"><label>{{'views.permission' | translate}}</label></th>
+          <th><label>{{'views.grantUsers' | translate}}</label></th>
+          <th><label>{{'views.grantGroups' | translate}}</label></th>
         </tr>
       </thead>
       <tbody>
@@ -127,17 +127,17 @@
       </tbody>
     </table>
     <div ng-show="isPermissionsEmpty">
-      <div class="alert alert-info">There are no permissions defined for this view.</div>
+      <div class="alert alert-info">{{'views.alerts.notDefined' | translate: '{term: constants.perms}'}}</div>
     </div>
   </div>
 </div>
 
 <div class="panel panel-default" ng-cloak ng-hide="isSettingsEmpty && instance">
   <div class="panel-heading clearfix">
-    <h3 class="panel-title pull-left">Settings</h3>
+    <h3 class="panel-title pull-left">{{'views.settings' | translate}}</h3>
     <div class="pull-right" ng-switch="instance.ViewInstanceInfo.static">
-      <a href ng-switch-when="false" ng-click="toggleSettingsEdit()" ng-show="editSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil" ></span> Edit</a>
-      <a href ng-switch-when="true" class="settings-edit-toggle disabled" tooltip="Cannot Edit Static Instances"> <span class="glyphicon glyphicon-pencil" ></span> Edit</a>
+      <a href ng-switch-when="false" ng-click="toggleSettingsEdit()" ng-show="editSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil" ></span> {{'views.edit' | translate}}</a>
+      <a href ng-switch-when="true" class="settings-edit-toggle disabled" tooltip="{{'views.cannotEditInstance' | translate}}"> <span class="glyphicon glyphicon-pencil" ></span> {{'views.edit' | translate}}</a>
     </div>
   </div>
   <div class="panel-body">
@@ -152,7 +152,7 @@
             <div class="col-sm-9" ng-switch-default>
               <input type="{{property.masked ? 'password' : 'text'}}" class="form-control propertie-input" ng-required="property.required" ng-change="settingsForm[property.name].validationError=''" ng-disabled="editSettingsDisabled" name="{{property.name}}" ng-model="configuration[property.name]" popover="{{property.description}}" popover-title="{{property.name}}" popover-trigger="mouseenter" placeholder="{{property.placeholder}}">
               <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && settingsForm[property.name].$error.required && !editSettingsDisabled'>
-                This field is required.
+                {{'common.alerts.fieldIsRequired' | translate}}
               </div>
               <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && settingsForm[property.name].validationError && !editSettingsDisabled'>
                 {{propertiesForm[property.name].validationMessage}}
@@ -162,8 +162,8 @@
         </div>
         <div class="form-group" ng-hide="editSettingsDisabled">
           <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-primary pull-right left-margin settingssave-btn" ng-click="saveSettings()">Save</button>
-            <button class="btn btn-default pull-right settingscancel-btn" ng-click="cancelSettings()">Cancel</button>
+            <button class="btn btn-primary pull-right left-margin settingssave-btn" ng-click="saveSettings()">{{'common.controls.save' | translate}}</button>
+            <button class="btn btn-default pull-right settingscancel-btn" ng-click="cancelSettings()">{{'common.controls.cancel' | translate}}</button>
           </div>
         </div>
       </fieldset>
@@ -173,21 +173,21 @@
 
 <div class="panel panel-default" ng-hide="isConfigurationEmpty">
   <div class="panel-heading clearfix">
-    <h3 class="panel-title pull-left">Cluster Configuration</h3>
+    <h3 class="panel-title pull-left">{{'views.clusterConfiguration' | translate}}</h3>
     <div class="pull-right" ng-switch="instance.ViewInstanceInfo.static">
-      <a href ng-switch-when="false" ng-hide="isConfigurationEmpty" ng-click="togglePropertiesEditing()" ng-show="editConfigurationDisabled" class="properties-toggle"> <span class="glyphicon glyphicon-pencil"></span> Edit</a>
-      <a href ng-switch-when="true" ng-hide="isConfigurationEmpty"  class="properties-toggle disabled"> <span class="glyphicon glyphicon-pencil"></span> Edit</a>
+      <a href ng-switch-when="false" ng-hide="isConfigurationEmpty" ng-click="togglePropertiesEditing()" ng-show="editConfigurationDisabled" class="properties-toggle"> <span class="glyphicon glyphicon-pencil"></span> {{'views.edit' | translate}}</a>
+      <a href ng-switch-when="true" ng-hide="isConfigurationEmpty"  class="properties-toggle disabled"> <span class="glyphicon glyphicon-pencil"></span> {{'views.edit' | translate}}</a>
     </div>
   </div>
   <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
     <div class="checkbox">
       <label>
-        <input type="radio" ng-model="$parent.isLocalCluster" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noClusterAvailible" ng-value="true" class="visibilityCheckbox"> Local Ambari Managed Cluster
+        <input type="radio" ng-model="$parent.isLocalCluster" ng-change="enableLocalCluster()" ng-disabled="!clusterConfigurable || editConfigurationDisabled || noClusterAvailible" ng-value="true" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
       </label>
     </div>
     <div class="form-horizontal property-form">
       <div class="form-group">
-        <label for="" class="control-label col-sm-3 ng-binding not-required" >Cluster Name</label>
+        <label for="" class="control-label col-sm-3 ng-binding not-required" >{{'views.clusterName' | translate}}</label>
         <div>
           <div class="col-sm-9">
             <select ng-model="cluster" ng-disabled="!$parent.isLocalCluster || editConfigurationDisabled" ng-change="onClusterChange()" class="clusters-name-dropdown form-control"  ng-options="o as o for o in clusters"></select>
@@ -204,7 +204,7 @@
          ng-value="false"
          ng-change="disableLocalCluster()"
          class="visibilityCheckbox">
-        Custom
+        {{'views.custom' | translate}}
       </label>
     </div>
   </div>
@@ -220,7 +220,7 @@
             <div class="col-sm-9" ng-switch-default>
               <input type="{{property.masked ? 'password' : 'text'}}" class="form-control propertie-input" ng-required="property.required && !isLocalCluster" ng-change="propertiesForm[property.name].validationError=''" ng-disabled="isLocalCluster || editConfigurationDisabled" name="{{property.name}}" ng-model="configuration[property.name]" popover="{{property.description}}" popover-title="{{property.name}}" popover-trigger="mouseenter" placeholder="{{property.placeholder}}">
               <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && propertiesForm[property.name].$error.required && !editConfigurationDisabled && !isLocalCluster'>
-                This field is required.
+                {{'common.alerts.fieldIsRequired' | translate}}
               </div>
               <div class="alert alert-danger no-margin-bottom top-margin" ng-show='property.required && propertiesForm[property.name].validationError && !editConfigurationDisabled && !isLocalCluster'>
                 {{propertiesForm[property.name].validationMessage}}
@@ -230,14 +230,14 @@
         </div>
         <div class="form-group" ng-hide="editConfigurationDisabled">
           <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-primary pull-right left-margin propertie-save" ng-click="saveConfiguration()">Save</button>
-            <button class="btn btn-default pull-right propertie-cancel" ng-click="cancelConfiguration()">Cancel</button>
+            <button class="btn btn-primary pull-right left-margin propertie-save" ng-click="saveConfiguration()">{{'common.controls.save' | translate}}</button>
+            <button class="btn btn-default pull-right propertie-cancel" ng-click="cancelConfiguration()">{{'common.controls.cancel' | translate}}</button>
           </div>
         </div>
       </fieldset>
     </form>
     <div ng-show="isConfigurationEmpty">
-      <div class="alert alert-info">There are no properties defined for this view.</div>
+      <div class="alert alert-info">{{'views.alerts.notDefined' | translate: '{term: constants.props}'}}</div>
     </div>
   </div>
 </div>

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

@@ -19,12 +19,12 @@
 <div class="views-list-table">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">Views</li>
+      <li class="active">{{'common.views' | translate}}</li>
     </ol>
     <div class="pull-right col-sm-4">
       <div class="input-group search-container">
-        <input type="text" class="form-control search-input" placeholder="Search" ng-model="viewsFilter" ng-change="getFilteredViews()">
-        <button type="button" class="close clear-search" ng-show="viewsFilter" ng-click="viewsFilter=''; getFilteredViews()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <input type="text" class="form-control search-input" placeholder="{{'common.search' | translate}}" ng-model="viewsFilter" ng-change="getFilteredViews()">
+        <button type="button" class="close clear-search" ng-show="viewsFilter" ng-click="viewsFilter=''; getFilteredViews()"><span aria-hidden="true">&times;</span><span class="sr-only">{{"common.controls.close" | translate}}</span></button>
         <span class="input-group-addon">
           <span class="glyphicon glyphicon-search"></span>
         </span>
@@ -33,8 +33,8 @@
   </div>
   <hr>
   <div class="row">
-    <div class="col-sm-3 padding-left-30"><h4>View Name</h4></div>
-    <div class="col-sm-3"><h4>Instances</h4></div>
+    <div class="col-sm-3 padding-left-30"><h4>{{'views.viewName' | translate}}</h4></div>
+    <div class="col-sm-3"><h4>{{'views.instances' | translate}}</h4></div>
     <div class="col-sm-6"><h4></h4></div>
   </div>
   <accordion close-others="false">
@@ -49,14 +49,14 @@
             <span ng-repeat="(version, vData) in view.versions">
               {{version}}
                 <span ng-switch="vData.status">
-                  <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="Pending..."></span>
-                  <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="Deploying...">
+                  <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="{{'views.pending' | translate}}"></span>
+                  <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="{{'views.deploying' | translate}}">
                     <div class="rect1"></div>
                     <div class="rect2"></div>
                     <div class="rect3"></div>
                   </div>
                   <span ng-switch-when="DEPLOYED">({{vData.count}})</span>
-                  <span ng-switch-when="ERROR" tooltip="Error deploying. Check Ambari Server log."><i class="fa fa-exclamation-triangle"></i></span>
+                  <span ng-switch-when="ERROR" tooltip="{{'views.alerts.deployError' | translate}}"><i class="fa fa-exclamation-triangle"></i></span>
                 </span>
               {{$last ? '' : ', '}}
             </span>
@@ -80,7 +80,7 @@
           <tr>
             <td class="col-sm-3"></td>
             <td class="col-sm-3">
-              <a tooltip="{{view.canCreateInstance ? '' : 'Unable to create view instances'}}" class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href ng-click="gotoCreate(view.view_name, view.canCreateInstance);"><span class="glyphicon glyphicon-plus"></span> Create Instance</a>
+              <a tooltip="{{view.canCreateInstance ? '' : constants.unable}}" class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href ng-click="gotoCreate(view.view_name, view.canCreateInstance);"><span class="glyphicon glyphicon-plus"></span> {{'views.create' | translate}}</a>
             </td>
             <td class="col-sm-3"></td>
             <td class="col-sm-3">
@@ -90,7 +90,7 @@
       </table>
     </accordion-group>
     <div class="alert alert-info" ng-show="views && !filteredViews.length">
-      No views to display.
+      {{'common.alerts.nothingToDisplay' | translate: '{term: constants.views}'}}
     </div>
 
   </accordion>

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

@@ -17,7 +17,7 @@
 -->
 <form class="form-horizontal" role="form" name="form.instanceCreateForm" novalidate>
 <div class="modal-header">
-  <h3 class="modal-title">Create View Instance</h3>
+  <h3 class="modal-title">{{'views.createViewInstance' | translate}}</h3>
 </div>
 <div class="modal-body createViewModal">
   <div class="view-header">
@@ -31,45 +31,45 @@
   
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">Details</h3>
+        <h3 class="panel-title">{{'common.details' | translate}}</h3>
       </div>
       <div class="panel-body">
         <div class="form-group" 
         ng-class="{'has-error' : ( (form.instanceCreateForm.instanceNameInput.$error.required || form.instanceCreateForm.instanceNameInput.$error.pattern) && form.instanceCreateForm.submitted) || instanceExists }"
         >
-          <label for="" class="control-labe col-sm-2">Instance name</label>
+          <label for="" class="control-labe col-sm-2">{{'views.instanceName' | translate}}</label>
           <div class="col-sm-10">
             <input type="text" class="form-control" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name">
 
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>
-              Field requried!
+              {{'common.alerts.fieldRequired' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>
-              Must no contain special characters!
+              {{'common.alerts.noSpecialChars' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>
-              Instance with this name already exists.
+              {{'common.alerts.instanceExists' | translate}}
             </div>
           </div>
         </div>
         <div class="form-group"
         ng-class="{'has-error' : ( (form.instanceCreateForm.displayLabel.$error.required || form.instanceCreateForm.displayLabel.$error.pattern) && form.instanceCreateForm.submitted)}">
-          <label for="" class="control-labe col-sm-2">Display label</label>
+          <label for="" class="control-labe col-sm-2">{{'common.displayLabel' | translate}}</label>
           <div class="col-sm-10">
             <input type="text" class="form-control" name="displayLabel" ng-model="instance.label" required ng-pattern="nameValidationPattern">
 
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.required && form.instanceCreateForm.submitted'>
-              Field requried!
+              {{'common.alerts.fieldRequired' | translate}}
             </div>
             <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.pattern && form.instanceCreateForm.submitted'>
-              Must no contain special characters!
+              {{'common.alerts.noSpecialChars' | translate}}
             </div>
           </div>
         </div>
       </div>
       <div class="form-group">
           <div class="col-sm-10 col-sm-offset-2">
-            <button class="btn btn-default" ng-click="isAdvancedClosed = !isAdvancedClosed">Advanced</button>
+            <button class="btn btn-default" ng-click="isAdvancedClosed = !isAdvancedClosed">{{'views.advanced' | translate}}</button>
           </div>
       </div>
       <div collapse="isAdvancedClosed">
@@ -77,14 +77,14 @@
           <div class="col-sm-10 col-sm-offset-2">
             <div class="checkbox">
               <label>
-                <input type="checkbox" ng-model='instance.visible'> Visible
+                <input type="checkbox" ng-model='instance.visible'> {{'views.visible' | translate}}
               </label>
             </div>
           </div>
         </div>
         <div class="form-group">
           <div class="col-sm-10 col-sm-offset-2">
-            <label for="" class="control-label col-sm-2">Icon</label>
+            <label for="" class="control-label col-sm-2">{{'views.icon' | translate}}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="iconUrl" ng-model="instance.icon_path">
             </div>
@@ -92,7 +92,7 @@
         </div>
         <div class="form-group">
           <div class="col-sm-10 col-sm-offset-2">
-            <label for="" class="control-label col-sm-2">Icon64</label>
+            <label for="" class="control-label col-sm-2">{{'views.icon64' | translate}}</label>
             <div class="col-sm-10">
               <input type="text" class="form-control" name="icon64Url" ng-model="instance.icon64_path">
             </div>
@@ -103,7 +103,7 @@
 
     <div class="panel panel-default">
       <div class="panel-heading">
-        <h3 class="panel-title">Configuration</h3>
+        <h3 class="panel-title">{{'views.configuration' | translate}}</h3>
       </div>
       <div class="panel-body">
       <div class="form-group" ng-repeat="parameter in instance.properties"
@@ -112,7 +112,7 @@
         <div class="col-sm-9">
           <input type="text" class="form-control"  name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value">
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted'>
-            Field requried!
+            {{'common.alerts.fieldRequired' | translate}}
           </div>
         </div>
       </div>
@@ -121,7 +121,7 @@
   
 </div>
 <div class="modal-footer">
-  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
-  <button class="btn btn-primary" ng-click="save()" type="submit">Save</button>
+  <button class="btn btn-default" ng-click="cancel()">{{'common.controls.cancel' | translate}}</button>
+  <button class="btn btn-primary" ng-click="save()" type="submit">{{'common.controls.save' | translate}}</button>
 </div>
 </form>

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

@@ -17,40 +17,40 @@
 -->
 
 <div class="modal-header">
-  <h3 class="modal-title">Edit {{instance.ViewInstanceInfo.view_name}}: {{instance.ViewInstanceInfo.label}}</h3>
+  <h3 class="modal-title">{{'views.edit' | translate}} {{instance.ViewInstanceInfo.view_name}}: {{instance.ViewInstanceInfo.label}}</h3>
 </div>
 <div class="modal-body">
   <div class="panel panel-default">
     <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">Settings</h3>
+      <h3 class="panel-title pull-left">{{'views.settings' | translate}}</h3>
       <div class="pull-right">
-        <a href ng-click="edit.editSettingsDisabled = !edit.editSettingsDisabled" ng-show="edit.editSettingsDisabled"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+        <a href ng-click="edit.editSettingsDisabled = !edit.editSettingsDisabled" ng-show="edit.editSettingsDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
       </div>
     </div>
     <div class="panel-body">
       <form class="form-horizontal">
         <fieldset ng-disabled="edit.editSettingsDisabled">
           <div class="form-group">
-            <label for="" class="col-sm-2 control-label">Instance ID</label>
+            <label for="" class="col-sm-2 control-label">{{'views.instanceId' | translate}}</label>
             <label for="" class="col-sm-10 control-label text-left">{{instance.ViewInstanceInfo.instance_name}}</label>
           </div>
           <div class="form-group">
-            <label for="" class="col-sm-2 control-label">Display Name</label>
-            <div class="col-sm-10"><input type="text" class="form-control" placeholder="Display Name" ng-model="settings.label"></div>
+            <label for="" class="col-sm-2 control-label">{{'views.displayName' | translate}}</label>
+            <div class="col-sm-10"><input type="text" class="form-control" placeholder="{{'views.displayName' | translate}}" ng-model="settings.label"></div>
           </div>
           <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" ng-model="settings.visible"> Visible
+                  <input type="checkbox" ng-model="settings.visible"> {{'views.visible' | translate}}
                 </label>
               </div>
             </div>
           </div>
           <div class="form-group" ng-hide="edit.editSettingsDisabled">
             <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-default pull-right left-margin" ng-click="cancelSettings()">Cancel</button>
-              <button class="btn btn-primary pull-right" ng-click="saveSettings()">Save</button>
+              <button class="btn btn-default pull-right left-margin" ng-click="cancelSettings()">{{'common.controls.cancel' | translate}}</button>
+              <button class="btn btn-primary pull-right" ng-click="saveSettings()">{{'common.controls.save' | translate}}</button>
             </div>
           </div>
         </fieldset>
@@ -60,17 +60,17 @@
 
   <div class="panel panel-default views-permissions-panel" style="">
     <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">Permissions</h3>
+      <h3 class="panel-title pull-left">{{'views.permissions' | translate}}</h3>
       <div class="pull-right">
-        <a href ng-click="edit.editPermissionDisabled = !edit.editPermissionDisabled" ng-show="edit.editPermissionDisabled"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+        <a href ng-click="edit.editPermissionDisabled = !edit.editPermissionDisabled" ng-show="edit.editPermissionDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
       </div>
     </div>
     <div class="panel-body">
       <form class="form-horizontal">
         <div class="form-group">
           <div class="col-sm-2"></div>
-          <label class="col-sm-5 control-label text-left">Users</label>
-          <label class="col-sm-5 control-label text-left">Groups</label>
+          <label class="col-sm-5 control-label text-left">{{'common.users' | translate}}</label>
+          <label class="col-sm-5 control-label text-left">{{'common.groups' | translate}}</label>
         </div>
         <div class="form-group" ng-repeat="permission in permissions">
           <label class="col-sm-2 control-label">{{permission.PermissionInfo.permission_name}}</label>
@@ -80,7 +80,7 @@
               <span ng-repeat="user in permission.USER">
                 <link-to route="users.show" id="{{user}}">{{user}}</link-to>
                 <button type="button" class="close remove-button" 
-                  ng-click="removePermission(permission.name, 'USER', user)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                  ng-click="removePermission(permission.name, 'USER', user)"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
                 {{$last ? '' :', '}}
               </span>
             </div>
@@ -91,7 +91,7 @@
               <span ng-repeat="group in permission.GROUP">
                 <link-to route="groups.edit" id="{{group}}" >{{group}}</link-to>
                 <button type="button" class="close remove-button" 
-                  ng-click="removePermission(permission.name, 'GROUP', group)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                  ng-click="removePermission(permission.name, 'GROUP', group)"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
                 {{$last ? '' :', '}}
               </span>
             </div>
@@ -99,8 +99,8 @@
         </div>
         <div class="form-group" ng-hide="edit.editPermissionDisabled">
           <div class="col-sm-offset-2 col-sm-10">
-            <button class="btn btn-default pull-right left-margin" ng-click="cancelPermissions()">Cancel</button>
-            <button class="btn btn-primary pull-right" ng-click="savePermissions()">Save</button>
+            <button class="btn btn-default pull-right left-margin" ng-click="cancelPermissions()">{{'common.controls.cancel' | translate}}</button>
+            <button class="btn btn-primary pull-right" ng-click="savePermissions()">{{'common.controls.save' | translate}}</button>
           </div>
         </div>
       </form>
@@ -110,9 +110,9 @@
 
   <div class="panel panel-default">
     <div class="panel-heading clearfix">
-      <h3 class="panel-title pull-left">Configuration</h3>
+      <h3 class="panel-title pull-left">{{'views.configuration' | translate}}</h3>
       <div class="pull-right">
-        <a href ng-click="edit.editConfigurationDisabled = !edit.editConfigurationDisabled" ng-show="edit.editConfigurationDisabled"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+        <a href ng-click="edit.editConfigurationDisabled = !edit.editConfigurationDisabled" ng-show="edit.editConfigurationDisabled"> <span class="glyphicon glyphicon-cog"></span> {{'views.edit' | translate}}</a>
       </div>
     </div>
     <div class="panel-body">
@@ -124,8 +124,8 @@
           </div>
           <div class="form-group" ng-hide="edit.editConfigurationDisabled">
             <div class="col-sm-offset-2 col-sm-10">
-              <button class="btn btn-default pull-right left-margin" ng-click="cancelConfiguration()">Cancel</button>
-              <button class="btn btn-primary pull-right" ng-click="saveConfiguration()">Save</button>
+              <button class="btn btn-default pull-right left-margin" ng-click="cancelConfiguration()">{{'common.controls.cancel' | translate}}</button>
+              <button class="btn btn-primary pull-right" ng-click="saveConfiguration()">{{'common.controls.save' | translate}}</button>
             </div>
           </div>
         </fieldset>
@@ -134,5 +134,5 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button class="btn btn-default" ng-click="close()">Close</button>
+  <button class="btn btn-default" ng-click="close()">{{'common.controls.save' | translate}}</button>
 </div>

ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/manageAccess.html

@@ -19,20 +19,20 @@
 <div class="cluster-manage-access-pane">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">{{clusterName}} Roles</li>
+      <li class="active">{{clusterName}} {{'common.roles' | translate}}</li>
     </ol>
   </div>
   <hr>
   <div class="pull-right">
     <i class="glyphicon glyphicon-th-large layout-switch-icon"></i>
-    <i class="glyphicon glyphicon-list layout-switch-icon disabled" ng-click="switchToList()" tooltip="Switch&nbsp;to&nbsp;list&nbsp;view"></i>
+    <i class="glyphicon glyphicon-list layout-switch-icon disabled" ng-click="switchToList()" tooltip-html-unsafe="{{'clusters.switchToList' | translate}}"></i>
   </div>
   <table class="table">
     <thead>
       <tr>
-        <th class="col-sm-2" width="20%"><label>Roles</label></th>
-        <th class="col-sm-5" width="40%"><label>Assign roles to these users</label></th>
-        <th class="col-sm-5" width="40%"><label>Assign roles to these groups</label></th>
+        <th class="col-sm-2" width="20%"><label>{{'common.roles' | translate}}</label></th>
+        <th class="col-sm-5" width="40%"><label>{{'clusters.assignRoles' | translate: '{term: getConstant("users")}'}}</label></th>
+        <th class="col-sm-5" width="40%"><label>{{'clusters.assignRoles' | translate: '{term: getConstant("groups")}'}}</label></th>
       </tr>
     </thead>
     <tbody>

ambari-admin/src/main/resources/ui/admin-web/app/views/clusters/userAccessList.html

@@ -19,12 +19,12 @@
 <div class="users-pane">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">{{clusterId}} Roles</li>
+      <li class="active">{{clusterId}} {{'common.roles' | translate}}</li>
     </ol>
   </div>
   <hr>
   <div class="pull-right">
-    <i class="glyphicon glyphicon-th-large layout-switch-icon disabled" ng-click="switchToBlock()" tooltip="Switch&nbsp;to&nbsp;block&nbsp;view"></i>
+    <i class="glyphicon glyphicon-th-large layout-switch-icon disabled" ng-click="switchToBlock()" tooltip-html-unsafe="{{'clusters.switchToBlock' | translate}}"></i>
     <i class="glyphicon glyphicon-list layout-switch-icon"></i>
   </div>
   <table class="table table-striped table-hover">
@@ -32,15 +32,15 @@
     <tr>
       <th>
         <div class="search-container">
-          <label for="">Name</label>
-          <input type="text" class="form-control namefilter" placeholder="Any" ng-model="currentNameFilter" ng-change="resetPagination()">
+          <label for="">{{'common.name' | translate}}</label>
+          <input type="text" class="form-control namefilter" placeholder="{{'common.any' | translate}}" ng-model="currentNameFilter" ng-change="resetPagination()">
           <button type="button" class="close clearfilter" ng-show="currentNameFilter" ng-click="currentNameFilter=''; resetPagination()">
-            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+            <span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span>
           </button>
         </div>
       </th>
       <th>
-        <label for="">Type</label>
+        <label for="">{{'common.type' | translate}}</label>
         <select class="form-control typefilter"
                 ng-model="currentTypeFilter"
                 ng-options="item.label for item in typeFilterOptions"
@@ -49,7 +49,7 @@
 
       </th>
       <th>
-        <label for="">Role</label>
+        <label for="">{{'clusters.role' | translate}}</label>
         <select class="form-control statusfilter"
                 ng-model="currentRoleFilter"
                 ng-options="item.label for item in roleFilterOptions"
@@ -73,12 +73,12 @@
     </tbody>
   </table>
   <div class="alert alert-info col-sm-12" ng-show="!users.length">
-    No users to display.
+    {{'common.alerts.nothingToDisplay' | translate: '{term: constants.users}'}}
   </div>
   <div class="col-sm-12 table-bar">
     <div class="pull-left filtered-info">
-      <span>{{tableInfo.showed}} of {{tableInfo.total}} users showing</span>
-      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">clear filters</a></span>
+      <span>{{'common.filterInfo' | translate: '{showed: tableInfo.showed, total: tableInfo.total, term: constants.users}'}}</span>
+      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">{{'common.controls.clearFilters' | translate}}</a></span>
     </div>
     <div class="pull-right left-margin">
       <pagination class="paginator" total-items="totalUsers" max-size="maxVisiblePages" items-per-page="usersPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

ambari-admin/src/main/resources/ui/admin-web/app/views/directives/editableList.html

@@ -19,7 +19,7 @@
 <div class="editable-list-container well" ng-class="{'edit-mode' : editMode, 'disabled' : !editable}" ng-click="enableEditMode($event)">
   <div class="items-box">
     <ul class="items-list">
-      <li class="item" ng-repeat="item in items | orderBy:identity"><span><a href>{{item}}</a><button ng-click="removeFromItems(item)" type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></span></li><li class="item add-item-input" ng-show="editMode">
+      <li class="item" ng-repeat="item in items | orderBy:identity"><span><a href>{{item}}</a><button ng-click="removeFromItems(item)" type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button></span></li><li class="item add-item-input" ng-show="editMode">
         <span contenteditable></span>
         <div class="typeahead-box" ng-show="typeahead.length != 0">
           <ul>
@@ -27,7 +27,7 @@
           </ul>
         </div>
       </li>
-      <li class="item add-item" ng-show="!editMode && !items.length">Add {{resourceType}}</li>
+      <li class="item add-item" ng-show="!editMode && !items.length">{{'common.add' | translate: '{term: resourceType}'}}</li>
     </ul>
   </div>
   <div class="actions-panel" ng-show="editMode">

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

@@ -16,27 +16,27 @@
 * limitations under the License.
 -->
 <ol class="breadcrumb">
-  <li><a href="#/groups">Groups</a></li>
-  <li class="active">Create Local Group</li>
+  <li><a href="#/groups">{{'common.groups' | translate}}</a></li>
+  <li class="active">{{'groups.createLocal' | translate}}</li>
 </ol>
 <hr>
 <form class="form-horizontal" role="form" novalidate name="form" autocomplete="off">
   <div class="form-group" ng-class="{'has-error' : (form.group_name.$error.required || form.group_name.$error.pattern) && form.submitted}">
-    <label for="groupname" class="col-sm-2 control-label">Group name</label>
+    <label for="groupname" class="col-sm-2 control-label">{{'groups.name' | translate}}</label>
     <div class="col-sm-10">
-      <input type="text" id="groupname" class="form-control groupname-input" name="group_name" placeholder="Group name" ng-model="group.group_name" required ng-pattern="/^([a-zA-Z0-9._\s]+)$/" autocomplete="off">
+      <input type="text" id="groupname" class="form-control groupname-input" name="group_name" placeholder="{{'groups.name' | translate}}" ng-model="group.group_name" required ng-pattern="/^([a-zA-Z0-9._\s]+)$/" autocomplete="off">
       <div class="alert alert-danger top-margin" ng-show="form.group_name.$error.required && form.submitted">
-        This field is required.
+        {{'common.alerts.fieldIsRequired' | translate}}
       </div>
       <div class="alert alert-danger top-margin" ng-show="form.group_name.$error.pattern && form.submitted">
-        Must contain only simple characters.
+        {{'groups.alerts.onlySimpleChars' | translate}}
       </div>
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-primary groupcreate-btn pull-right left-margin" ng-click="createGroup()">Save</button>
-      <a href ng-click="cancel()" class="btn btn-default pull-right cancel-button">Cancel</a>
+      <button class="btn btn-primary groupcreate-btn pull-right left-margin" ng-click="createGroup()">{{'common.controls.save' | translate}}</button>
+      <a href ng-click="cancel()" class="btn btn-default pull-right cancel-button">{{'common.controls.cancel' | translate}}</a>
     </div>
   </div>
       

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

@@ -18,13 +18,13 @@
   
 <div class="clearfix">
   <ol class="breadcrumb pull-left">
-    <li><a href="#/groups">Groups</a></li>
+    <li><a href="#/groups">{{'common.groups' | translate}}</a></li>
     <li class="active">{{group.group_name}}</li>
   </ol>
   <div class="pull-right top-margin-4">
     <div ng-switch="group.ldap_group">
-      <button ng-switch-when="true" class="btn disabled deletegroup-btn deleteuser-btn" tooltip="Cannot Delete Group">Delete Group</button>
-      <button ng-switch-when="false" class="btn btn-danger deletegroup-btn" ng-click="deleteGroup(group)">Delete Group</button>
+      <button ng-switch-when="true" class="btn disabled deletegroup-btn deleteuser-btn" tooltip="{{'common.cannotDelete' | translate: '{term: constants.group}'}}">{{'common.delete' | translate: '{term: constants.group}'}}</button>
+      <button ng-switch-when="false" class="btn btn-danger deletegroup-btn" ng-click="deleteGroup(group)" tooltip="{{'common.cannotDelete' | translate: '{term: constants.group}'}}">{{'common.delete' | translate: '{term: constants.group}'}}</button>
     </div>
       
   </div>
@@ -32,26 +32,26 @@
 <hr>
 <form class="form-horizontal group-edit" role="form" novalidate name="form" >
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label">Type</label>
+    <label for="" class="col-sm-2 control-label">{{'common.type' | translate}}</label>
     <div class="col-sm-10">
-      <label for="" class="control-label">{{group.ldap_group ? 'LDAP' : 'Local'}}</label>
+      <label for="" class="control-label">{{'common.' + (group.ldap_group ? 'ldap' : 'local') | translate}}</label>
     </div>
   </div>
   <div class="form-group">
-    <label for="members" class="col-sm-2 control-label">{{group.ldap_group ? 'LDAP Members' : 'Local Members'}}</label>
+    <label for="members" class="col-sm-2 control-label">{{'common.' + (group.ldap_group ? 'ldap' : 'local') | translate}} {{'groups.members' | translate}}</label>
     <div class="col-sm-10">
       <editable-list items-source="group.editingUsers" resource-type="User" editable="!group.ldap_group"></editable-list>
     </div>
   </div>
 
   <div class="form-group">
-      <label for="" class="col-sm-2 control-label">Privileges</label>
+      <label for="" class="col-sm-2 control-label">{{'common.privileges' | translate}}</label>
       <div class="col-sm-10">
         <table class="table" ng-hide="hidePrivileges">
           <thead>
             <tr>
-              <th>Cluster</th>
-              <th>Cluster Role</th>
+              <th>{{'common.cluster' | translate}}</th>
+              <th>{{'common.clusterRole' | translate}}</th>
             </tr>
           </thead>
           <tbody>
@@ -65,13 +65,13 @@
               </td>
             </tr>
             <tr>
-              <td ng-show="noClusterPriv">No cluster privileges</td>
+              <td ng-show="noClusterPriv">{{'common.alerts.noPrivileges' | translate: '{term: constants.cluster}'}}</td>
             </tr>
           </tbody>
           <thead class="view-permission-header">
             <tr>
-              <th>View</th>
-              <th>View Permissions</th>
+              <th>{{'common.view' | translate}}</th>
+              <th>{{'common.viewPermissions' | translate}}</th>
             </tr>
           </thead>
           <tbody>
@@ -85,11 +85,11 @@
               </td>
             </tr>
             <tr>
-              <td ng-show="noViewPriv">No view privileges</td>
+              <td ng-show="noViewPriv">{{'common.alerts.noPrivileges' | translate: '{term: constants.view}'}}</td>
             </tr>
           </tbody>
         </table>
-        <div class="alert alert-info hide-soft" ng-class="{'visible' : !privileges}">This group does not have any privileges.</div>
+        <div class="alert alert-info hide-soft" ng-class="{'visible' : !privileges}">{{'common.alerts.noPrivilegesDescription' | translate: '{term: constants.group.toLowerCase()}'}}</div>
       </div>
     </div>
 </form>

ambari-admin/src/main/resources/ui/admin-web/app/views/groups/list.html

@@ -18,10 +18,10 @@
 <div class="groups-pane">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">Groups</li>
+      <li class="active">{{'common.groups' | translate}}</li>
     </ol>
     <div class="pull-right top-margin-4">
-      <link-to route="groups.create" class="btn btn-primary creategroup-btn"><span class="glyphicon glyphicon-plus"></span> Create Local Group</link-to>
+      <link-to route="groups.create" class="btn btn-primary creategroup-btn"><span class="glyphicon glyphicon-plus"></span> {{'groups.createLocal' | translate}}</link-to>
     </div>
   </div>
   <hr>
@@ -30,13 +30,13 @@
       <tr>
         <th class="col-sm-8">
           <div class="search-container">
-            <label for="">Group Name</label>
-            <input type="text" class="form-control namefilter" placeholder="Any" ng-model="currentNameFilter" ng-change="resetPagination()">
-            <button type="button" class="close" ng-show="currentNameFilter" ng-click="currentNameFilter=''; resetPagination()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <label for="">{{'groups.name' | translate}}</label>
+            <input type="text" class="form-control namefilter" placeholder="{{'common.any' | translate}}" ng-model="currentNameFilter" ng-change="resetPagination()">
+            <button type="button" class="close" ng-show="currentNameFilter" ng-click="currentNameFilter=''; resetPagination()"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
           </div>
         </th>
         <th class="col-sm-2">
-          <label for="">Type</label>
+          <label for="">{{'common.type' | translate}}</label>
           <select class="form-control typefilter"
             ng-model="currentTypeFilter"
             ng-options="item.label for item in typeFilterOptions"
@@ -44,7 +44,7 @@
           </select>
         </th>
         <th class="col-sm-2 vertical-top">
-          <label for="">Members</label>
+          <label for="">{{'groups.members' | translate}}</label>
         </th>
       </tr>
     </thead>
@@ -53,18 +53,18 @@
         <td class="col-sm-8">
           <link-to route="groups.edit" class="link-to-group" id="{{group.group_name}}">{{group.group_name}}</link-to>
         </td>
-        <td class="col-sm-2">{{group.ldap_group ? 'LDAP' : 'Local'}}</td>
-        <td class="col-sm-2">{{group.members ? group.members.length : 0}} {{group.members.length === 1 ? 'member' : 'members'}}</td>
+        <td class="col-sm-2">{{'common.' + (group.ldap_group ? 'ldap' : 'local') | translate}}</td>
+        <td class="col-sm-2">{{'groups.membersPlural' | translate: '{n: group.members && group.members.length || 0}'}}</td>
       </tr>
     </tbody>
   </table>
   <div class="alert alert-info col-sm-12" ng-show="!groups.length">
-    No groups to display.
+    {{'common.alerts.nothingToDisplay' | translate: '{term: constants.groups}'}}
   </div>
   <div class="col-sm-12 table-bar">
     <div class="pull-left filtered-info">
-      <span>{{tableInfo.showed}} of {{tableInfo.total}} groups showing</span>
-      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">clear filters</a></span>
+      <span>{{'common.filterInfo' | translate: '{showed: tableInfo.showed, total: tableInfo.total, term: constants.groups}'}}</span>
+      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">{{'common.controls.clearFilters' | translate}}</a></span>
     </div>
     <div class="pull-right left-margin">
       <pagination class="paginator" total-items="totalGroups" max-size="maxVisiblePages" items-per-page="groupsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

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

@@ -17,14 +17,14 @@
 -->
 <div class="left-navbar" xmlns="http://www.w3.org/1999/html">
   <div class="panel panel-default">
-    <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> Clusters</div>
+    <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> {{'common.clusters' | translate}}</div>
     <div class="panel-body">
       <div class="cluster-section" ng-show="cluster">
         <div id="cluster-name"  ng-switch on="editCluster.editingName">
           <h5 ng-switch-when="false">{{cluster.Clusters.cluster_name}}
             <i ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" 
                ng-click="toggleEditName()" 
-               class="glyphicon glyphicon-edit pull-right edit-cluster-name" tooltip="Rename Cluster">
+               class="glyphicon glyphicon-edit pull-right edit-cluster-name" tooltip="{{'common.renameCluster' | translate}}">
             </i>
           </h5>
 
@@ -46,7 +46,7 @@
                   ng-model="editCluster.name"
                   class="form-control input-sm"
                   ng-maxlength="80"
-                  tooltip="Only alpha-numeric characters, up to 80 characters"
+                  tooltip="{{'common.renameClusterTip' | translate}}"
                   tooltip-trigger="focus">
               <button ng-click="toggleEditName()"
                       class="btn btn-xs">
@@ -65,42 +65,42 @@
 
         <ul class="nav nav-pills nav-stacked" ng-show="cluster.Clusters.provisioning_state == 'INSTALLED' ">
           <li ng-class="{active: isActive('clusters.manageAccess')}">
-            <a href="#/clusters/{{cluster.Clusters.cluster_name}}/userAccessList" class="permissions">Roles</a>
+            <a href="#/clusters/{{cluster.Clusters.cluster_name}}/userAccessList" class="permissions">{{'common.roles' | translate}}</a>
           </li>
-          <li><a href="#/dashboard"  class="gotodashboard">Go to Dashboard</a></li>
+          <li><a href="#/dashboard"  class="gotodashboard">{{'common.goToDashboard' | translate}}</a></li>
         </ul>
-        <span class="cluster-installation-progress-label" ng-show="cluster.Clusters.provisioning_state == 'INIT'"><a href="/#/">Cluster creation in progress...</a></span>
+        <span class="cluster-installation-progress-label" ng-show="cluster.Clusters.provisioning_state == 'INIT'"><a href="/#/">{{'common.clusterCreationInProgress' | translate}}</a></span>
       </div>
 
 
       <div ng-hide="cluster">
         <ul class="nav nav-pills nav-stacked">
-          <li><p class="noclusters">No clusters</p></li>
+          <li><p class="noclusters">{{'common.noClusters' | translate}}</p></li>
         </ul>
       </div>
       <ul class="nav nav-pills nav-stacked" ng-show="cluster && totalRepos > 0">
         <li ng-class="{active: isActive('stackVersions.list')}">
-          <a href="#/stackVersions">Versions</a>
+          <a href="#/stackVersions">{{'common.versions' | translate}}</a>
         </li>
       </ul>
     </div>
   </div>
 
   <div class="panel panel-default">
-    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Views</div>
+    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> {{'common.views' | translate}}</div>
     <div class="panel-body">
       <ul class="nav nav-pills nav-stacked">
-        <li ng-class="{active: isActive('views.list')}"><link-to route="views.list" class="viewslist-link">Views</link-to></li>
+        <li ng-class="{active: isActive('views.list')}"><link-to route="views.list" class="viewslist-link">{{'common.views' | translate}}</link-to></li>
       </ul>
     </div>
   </div>
 
   <div class="panel panel-default">
-    <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> User + Group Management</div>
+    <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> {{'common.userGroupManagement' | translate}}</div>
     <div class="panel-body">
       <ul class="nav nav-pills nav-stacked">
-        <li ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="userslist-link">Users</link-to></li>
-        <li ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="groupslist-link">Groups</link-to></li>
+        <li ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="userslist-link">{{'common.users' | translate}}</link-to></li>
+        <li ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="groupslist-link">{{'common.groups' | translate}}</link-to></li>
       </ul>
         
     </div>

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

@@ -17,51 +17,51 @@
 -->
 <div class="panel panel-default mainpage">
   <div class="panel-body">
-    <h1>Welcome to Apache Ambari</h1>
+    <h1>{{'main.title' | translate}}</h1>
     <div ng-if="isLoaded" id="main-operations-boxes" class="row thumbnails">
-      <p ng-hide="cluster">Provision a cluster, manage who can access the cluster, and customize views for Ambari users.</p>
-      <p ng-show="cluster">Monitor your cluster resources, manage who can access the cluster, and customize views for Ambari users.</p>
+      <p ng-hide="cluster">{{'main.noClusterDescription' | translate}}</p>
+      <p ng-show="cluster">{{'main.hasClusterDescription' | translate}}</p>
 
         <!--Clusters-->
       <div ng-show="cluster" class="col-sm-11 thumbnail">
-        <h4 class="title">Operate Your Cluster</h4>
-        <div class="description">Manage the configuration of your cluster and monitor the health of your services</div>
+        <h4 class="title">{{'main.operateCluster.title' | translate}}</h4>
+        <div class="description">{{'main.operateCluster.description' | translate}}</div>
         <div class="glyphicon glyphicon-cloud"></div>
         <div class="buttons">
         <span ng-class="{active: isActive('clusters.manageAccess')}">
-          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">Manage Roles</a>
-          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="#/clusters/{{cluster.Clusters.cluster_name}}/userAccessList" class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">Manage Roles</a>
+          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'main.operateCluster.manageRoles' | translate}}</a>
+          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="#/clusters/{{cluster.Clusters.cluster_name}}/userAccessList" class="btn btn-primary permission-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'main.operateCluster.manageRoles' | translate}}</a>
         </span>
         <span>
-          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">Go to Dashboard</a>
-          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="/#/main/dashboard/metrics" class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">Go to Dashboard</a>
+          <a ng-show="cluster.Clusters.provisioning_state != 'INSTALLED'" href class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'common.goToDashboard' | translate}}</a>
+          <a ng-show="cluster.Clusters.provisioning_state == 'INSTALLED'" href="/#/main/dashboard/metrics" class="btn btn-primary go-dashboard-button" ng-disabled="cluster.Clusters.provisioning_state != 'INSTALLED' ">{{'common.goToDashboard' | translate}}</a>
         </span>
         </div>
       </div>
       <div ng-hide="cluster" class="col-sm-11 thumbnail">
-        <h4 class="title">Create a Cluster</h4>
-        <div class="description">Use the Install Wizard to select services and configure your cluster</div>
+        <h4 class="title">{{'main.createCluster.title' | translate}}</h4>
+        <div class="description">{{'main.createCluster.description' | translate}}</div>
         <div class="glyphicon glyphicon-cloud"></div>
-        <div class="buttons"> <a href="/#/installer/step0" class="btn btn-primary create-cluster-button">Launch Install Wizard</a></div>
+        <div class="buttons"> <a href="/#/installer/step0" class="btn btn-primary create-cluster-button">{{'main.createCluster.launchInstallWizard' | translate}}</a></div>
       </div>
 
         <!--Manage Users and groups-->
       <div class="col-sm-5 thumbnail">
-        <h4 class="title">Manage Users + Groups</h4>
-        <div class="description">Manage the users and groups that can access Ambari</div>
+        <h4 class="title">{{'main.manageUsersAndGroups.title' | translate}}</h4>
+        <div class="description">{{'main.manageUsersAndGroups.description' | translate}}</div>
         <div class="glyphicon glyphicon-user"></div>
         <div class="buttons">
-          <span ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="btn btn-primary userslist-button">Users</link-to></span>
-          <span ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="btn btn-primary groupslist-button">Groups</link-to></span>
+          <span ng-class="{active: isActive('users.list')}"><link-to route="users.list" class="btn btn-primary userslist-button">{{'common.users' | translate}}</link-to></span>
+          <span ng-class="{active: isActive('groups.list')}"><link-to route="groups.list" class="btn btn-primary groupslist-button">{{'common.groups' | translate}}</link-to></span>
         </div>
       </div>
 
         <!--Deploy Views-->
       <div class="col-sm-5 thumbnail">
-        <h4 class="title">Deploy Views</h4>
-        <div class="description">Create view instances and grant permissions</div>
+        <h4 class="title">{{'main.deployViews.title' | translate}}</h4>
+        <div class="description">{{'main.deployViews.description' | translate}}</div>
         <div class="glyphicon glyphicon-th"></div>
-        <div ng-class="{active: isActive('views.list')}" class="buttons"><link-to route="views.list" class="btn btn-primary viewslist-button">Views</link-to></div>
+        <div ng-class="{active: isActive('views.list')}" class="buttons"><link-to route="views.list" class="btn btn-primary viewslist-button">{{'common.views' | translate}}</link-to></div>
         </div>
       </div>
   </div>

ambari-admin/src/main/resources/ui/admin-web/app/views/modals/AboutModal.html

@@ -16,29 +16,29 @@
 * limitations under the License.
 -->
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" ng-click="ok()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-  <h3 class="modal-title">About</h3>
+  <button type="button" class="close" data-dismiss="modal" ng-click="ok()"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
+  <h3 class="modal-title">{{'common.about' | translate}}</h3>
 </div>
 <div class="modal-body">
   <div class="about clearfix">
     <div class="logo">
-      <img src="/img/logo.png" alt="Apache Ambari" title="Apache Ambari">
+      <img src="/img/logo.png" alt="{{'common.apacheAmbari' | translate}}" title="{{'common.apacheAmbari' | translate}}">
     </div>
     <div class="content">
-      <div class="project">Apache Ambari</div>
+      <div class="project">{{'common.apacheAmbari' | translate}}</div>
       <br>
-      <span id="i18n-33">Version</span>
+      <span id="i18n-33">{{'common.version' | translate}}</span>
       <script id="metamorph-199-start" type="text/x-placeholder"></script>
       <span ng-bind="ambariVersion"></span>
       <script id="metamorph-199-end" type="text/x-placeholder"></script>
       <br>
       <br>
-      <a href="http://ambari.apache.org/" target="_blank"><span id="i18n-34">Get involved!</span></a>
+      <a href="http://ambari.apache.org/" target="_blank"><span id="i18n-34">{{'common.getInvolved' | translate}}</span></a>
       <br>
-      <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank"><span id="i18n-35">Licensed under the Apache License, Version 2.0</span></a>
+      <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank"><span id="i18n-35">{{'common.license' | translate}}</span></a>
   </div>
   </div>
 </div>
 <div class="modal-footer">
-    <button class="btn btn-success" ng-click="ok()">OK</button>
+    <button class="btn btn-success" ng-click="ok()">{{'common.controls.ok' | translate}}</button>
 </div>

ambari-admin/src/main/resources/ui/admin-web/app/views/modals/BodyForDeregisterVersion.html

@@ -15,4 +15,4 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-Are you sure you want to deregister version <strong>{{innerScope.displayName}}</strong> ?
+<span translate="versions.deregisterConfirmation" translate-values="{versionName: innerScope.displayName}"></span>

ambari-admin/src/main/resources/ui/admin-web/app/views/modals/TimeoutWarning.html

@@ -19,9 +19,7 @@
 <div class="modal-header">
   <h4 class="modal-title">{{title}}</h4>
 </div>
-<div class="modal-body">
-  You will be automatically logged out in <b>{{remainTime}}</b> seconds due to inactivity.
-</div>
+<div class="modal-body" translate="common.alerts.timeOut" translate-values="{time: remainTime}"></div>
 <div class="modal-footer">
   <button class="btn btn-default" ng-click="logout()">{{secondaryText}}</button>
   <button class="btn btn-primary" ng-click="remain()">{{primaryText}}</button>

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/list.html

@@ -19,12 +19,12 @@
 <div id="stack-versions">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">Versions</li>
+      <li class="active">{{'common.versions' | translate}}</li>
     </ol>
     <div class="pull-right top-margin-4">
       <a href="#/stackVersions/create" class="btn btn-primary">
         <span class="glyphicon glyphicon-plus"></span>
-        Register Version
+        {{'versions.register' | translate}}
       </a>
     </div>
   </div>
@@ -33,11 +33,11 @@
     <thead>
     <tr>
       <th class="col-medium">
-        <label>Name</label>
-        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version" placeholder="Any">
+        <label>{{'common.name' | translate}}</label>
+        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version" placeholder="{{'common.any' | translate}}">
       </th>
       <th class="col-small">
-        <label>Cluster</label>
+        <label>{{'common.cluster' | translate}}</label>
         <select class="form-control"
                 ng-change="resetPagination()"
                 ng-model="filter.cluster.current"
@@ -57,20 +57,20 @@
           {{repo.cluster}}
         </a>
         <span ng-show="!repo.cluster">
-          None
+          {{'common.none' | translate}}
         </span>
       </td>
       <td class="verison-label-row">
         <div ng-show="repo.status == 'current'">
-          <span class="label {{'status-' + repo.status}}">Current:&nbsp;{{repo.currentHosts}}/{{repo.totalHosts}}</span>
+          <span class="label {{'status-' + repo.status}}">{{'versions.current' | translate}}:&nbsp;{{repo.currentHosts}}/{{repo.totalHosts}}</span>
         </div>
         <div ng-show="repo.status == 'installed'">
-          <span class="label {{'status-' + repo.status}}">Installed:&nbsp;{{repo.installedHosts}}/{{repo.totalHosts}}</span>
+          <span class="label {{'status-' + repo.status}}">{{'versions.installed' | translate}}:&nbsp;{{repo.installedHosts}}/{{repo.totalHosts}}</span>
         </div>
         <div ng-show="!repo.cluster">
           <div class="btn-group display-inline-block" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
             <a class="btn dropdown-toggle">
-              <span>Install on...</span>
+              <span>{{'versions.installOn' | translate}}</span>
             </a>
             <ul class="dropdown-menu" ng-show="viewsdropdown.isopen">
               <li ng-repeat="cluster in dropDownClusters">
@@ -86,12 +86,12 @@
     </tbody>
   </table>
   <div class="alert alert-info col-sm-12" ng-show="!repos.length">
-    No version to display.
+    {{'common.alerts.nothingToDisplay' | translate: '{term: getConstant("version")}'}}
   </div>
   <div class="col-sm-12 table-bar">
     <div class="pull-left filtered-info">
-      <span>{{tableInfo.showed}} of {{tableInfo.total}} versions showing</span>
-      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">clear filters</a></span>
+      <span>{{'common.filterInfo' | translate: '{showed: tableInfo.showed, total: tableInfo.total, term: getConstant("versions")}'}}</span>
+      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">{{'common.controls.clearFilters' | translate}}</a></span>
     </div>
     <div class="pull-right left-margin">
       <pagination class="paginator"

ambari-admin/src/main/resources/ui/admin-web/app/views/stackVersions/stackVersionPage.html

@@ -18,28 +18,25 @@
 
 <div class="clearfix">
   <ol class="breadcrumb pull-left">
-    <li><a href="#/stackVersions">Versions</a></li>
+    <li><a href="#/stackVersions">{{'common.versions' | translate}}</a></li>
     <li class="active" ng-if="editController">{{displayName}}&nbsp;<span class="sub-text">({{repoVersionFullName}})</span></li>
-    <li class="active" ng-if="createController">Register Version</li>
+    <li class="active" ng-if="createController">{{'versions.register' | translate}}</li>
   </ol>
 
   <div class="pull-right top-margin-4" ng-switch="deleteEnabled"  ng-if="editController">
-    <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot delete version already installed.">Deregister
-      Version
-    </button>
-    <button ng-switch-when="true" class="btn btn-danger" ng-click="delete()">Deregister Version
-    </button>
+    <button ng-switch-when="false" class="btn disabled btn-default" tooltip="Cannot delete version already installed.">{{'versions.deregister' | translate}}</button>
+    <button ng-switch-when="true" class="btn btn-danger" ng-click="delete()">{{'versions.deregister' | translate}}</button>
   </div>
 </div>
 <hr>
 <form class="form-horizontal register-version-form" role="form" name="repoRegForm" novalidate>
   <div class="panel panel-default" ng-if="createController">
     <div class="panel-heading">
-      <h3 class="panel-title">Details</h3>
+      <h3 class="panel-title">{{'common.details' | translate}}</h3>
     </div>
     <div class="panel-body">
       <div class="form-inline repo-version-inline">
-        <label class="control-label col-sm-2 repo-version-label">Name</label>
+        <label class="control-label col-sm-2 repo-version-label">{{'common.name' | translate}}</label>
         <div class="col-sm-10">
           <select class="form-control repo-version-select"
                   ng-model="$parent.upgradeStack.selected"
@@ -49,9 +46,9 @@
           <span class="bold-dot">.</span>
           <div class="form-group" ng-class="{'has-error' : repoRegForm.version.$error.pattern}">
             <input class="form-control" name="version" type="text" ng-model="$parent.repoSubversion" ng-pattern="subversionPattern"
-                   placeholder="Version Number (0.0)" ng-change="updateCurrentVersionInput()" required/>
+                   placeholder="{{'versions.placeholder' | translate}}" ng-change="updateCurrentVersionInput()" required/>
             <span class="text-danger" ng-show="repoRegForm.version.$error.pattern">
-              &nbsp{{currentVersionInput}} Invalid.
+              &nbsp{{'common.alerts.isInvalid' | translate: '{term: currentVersionInput}'}}
             </span>
           </div>
         </div>
@@ -60,19 +57,15 @@
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">
-      <h3 class="panel-title">Repositories</h3>
+      <h3 class="panel-title">{{'versions.repos' | translate}}</h3>
     </div>
     <div class="panel-body ">
-      <div class="alert alert-info" role="alert">
-        Provide Base URLs for the Operating Systems you are configuring. Uncheck all other Operating Systems.
-      </div>
-      <div class="alert alert-warning hide-soft" ng-class="{'visible' : hasValidationErrors()}" role="alert">
-        Some of the repositories failed validation. Make changes to the base url or skip validation if you are sure that urls are correct
-      </div>
+      <div class="alert alert-info" role="alert">{{'versions.alerts.baseURLs' | translate}}</div>
+      <div class="alert alert-warning hide-soft" ng-class="{'visible' : hasValidationErrors()}" role="alert">{{'versions.alerts.validationFailed' | translate}}</div>
       <div class="border-bottom bottom-margin clearfix">
-        <div class="col-sm-2"><h5><label>OS</label></h5></div>
-        <div class="name-label-adjust col-sm-2"><h5><label>Name</label></h5></div>
-        <div class="col-sm-7"><h5><label>Base URL</label></h5></div>
+        <div class="col-sm-2"><h5><label>{{'versions.os' | translate}}</label></h5></div>
+        <div class="name-label-adjust col-sm-2"><h5><label>{{'common.name' | translate}}</label></h5></div>
+        <div class="col-sm-7"><h5><label >{{'versions.baseURL' | translate}}</label></h5></div>
       </div>
       <div class="clearfix border-bottom bottom-margin" ng-repeat="os in osList">
         <div class="col-sm-2 os-checkbox">
@@ -95,7 +88,7 @@
           <div class="checkbox">
             <label>
               <input type="checkbox" ng-model="skipValidation" ng-change="clearErrors()">
-              Skip Repository Base URL validation (Advanced) <span class="glyphicon glyphicon-question-sign" tooltip-html-unsafe="<b>Warning:</b> This is for advanced users only. Use this option if you want to skip validation for Repository Base URLs."></span>
+              {{'versions.skipValidation' | translate}} <span class="glyphicon glyphicon-question-sign" tooltip-html-unsafe="{{'versions.alerts.skipValidationWarning' | translate}}"></span>
             </label>
           </div>
         </div>
@@ -104,7 +97,7 @@
   </div>
   <div class="col-sm-12">
     <button class="btn btn-primary pull-right left-margin" ng-click="save()"
-            ng-disabled="(createController && repoRegForm.version.$invalid) || selectedOS === 0">Save</button>
-    <button class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
+            ng-disabled="(createController && repoRegForm.version.$invalid) || selectedOS === 0">{{'common.controls.save' | translate}}</button>
+    <button class="btn btn-default pull-right" ng-click="cancel()">{{'common.controls.cancel' | translate}}</button>
   </div>
 </form>

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

@@ -16,58 +16,52 @@
 * limitations under the License.
 -->
 <ol class="breadcrumb">
-  <li><a href="#/users">Users</a></li>
-  <li class="active">Create Local User</li>
+  <li><a href="#/users">{{'common.users' | translate}}</a></li>
+  <li class="active">{{'users.create' | translate}}</li>
 </ol>
 <hr>
 <form class="form-horizontal create-user-form" role="form" novalidate name="form" autocomplete="off">
   <div class="form-group" ng-class="{'has-error' : form.user_name.$error.required && form.submitted}">
-    <label for="username" class="col-sm-2 control-label">Username</label>
+    <label for="username" class="col-sm-2 control-label">{{'users.username' | translate}}</label>
     <div class="col-sm-10">
-      <input type="text" id="username" class="form-control username-input" name="user_name" placeholder="User name" ng-model="user.user_name" required autocomplete="off">
-      <div class="alert alert-danger top-margin" ng-show="form.user_name.$error.required && form.submitted">
-        This field is required.
-      </div>
+      <input type="text" id="username" class="form-control username-input" name="user_name" placeholder="{{'users.userName' | translate}}" ng-model="user.user_name" required autocomplete="off">
+      <div class="alert alert-danger top-margin" ng-show="form.user_name.$error.required && form.submitted">{{'common.alerts.fieldIsRequired' | translate}</div>
     </div>
   </div>
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label">Type</label>
+    <label for="" class="col-sm-2 control-label">{{'common.type' | translate}}</label>
     <div class="col-sm-10">
-      <label for="" class="control-label">Local</label>
+      <label for="" class="control-label">{{'common.local' | translate}}</label>
     </div>
   </div>
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label">Status</label>
+    <label for="" class="col-sm-2 control-label">{{'users.status' | translate}}</label>
     <div class="col-sm-10">
-      <toggle-switch model="user.active" on-label="Active" off-label="Inactive" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
+      <toggle-switch model="user.active" on-label="{{'users.active' | translate}}" off-label="{{'users.inactive' | translate}}" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
     </div>
   </div>
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span>Ambari Admin</label>
+    <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span>{{'users.ambariAdmin' | translate}}</label>
     <div class="col-sm-10">
-      <toggle-switch ng-disabled="isCurrentUser" model="user.admin" on-label="Yes" off-label="No" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
+      <toggle-switch ng-disabled="isCurrentUser" model="user.admin" on-label="{{'common.yes' | translate}}" off-label="{{'common.no' | translate}}" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
     </div>
     </div>
   <div class="form-group" ng-class="{'has-error' : (form.password.$error.required && form.submitted) || form.confirmPassword.$error.passwordVerify}">
-    <label for="password" class="col-sm-2 control-label">Password</label>
+    <label for="password" class="col-sm-2 control-label">{{'users.password' | translate}}</label>
     <div class="col-sm-10">
-      <input type="password" class="form-control bottom-margin userpassword" name="password" placeholder="Password" required ng-model="user.password" autocomplete="off">
-      <input type="password" class="form-control bottom-margin userpasswordconfirm" name="confirmPassword" placeholder="Password confirmation" required ng-model="user.passwordConfirmation"
+      <input type="password" class="form-control bottom-margin userpassword" name="password" placeholder="{{'users.password' | translate}}" required ng-model="user.password" autocomplete="off">
+      <input type="password" class="form-control bottom-margin userpasswordconfirm" name="confirmPassword" placeholder="{{'users.passwordConfirmation' | translate}}" required ng-model="user.passwordConfirmation"
         password-verify="user.password" autocomplete="off">
 
-      <div class="alert alert-danger" ng-show='form.confirmPassword.$error.passwordVerify'>
-        Password must match!
-      </div>
-      <div class="alert alert-danger" ng-show='form.password.$error.required && form.submitted'>
-        Password required!
-      </div>
+      <div class="alert alert-danger" ng-show='form.confirmPassword.$error.passwordVerify'>{{'users.alerts.wrongPassword' | translate}}</div>
+      <div class="alert alert-danger" ng-show='form.password.$error.required && form.submitted'>{{'users.alerts.passwordRequired' | translate}}</div>
       
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-primary pull-right left-margin saveuser" ng-click="createUser()">Save</button>
-      <a class="btn btn-default pull-right cancel" href ng-click="cancel()">Cancel</a>
+      <button class="btn btn-primary pull-right left-margin saveuser" ng-click="createUser()">{{'common.controls.save' | translate}}</button>
+      <a class="btn btn-default pull-right cancel" href ng-click="cancel()">{{'common.controls.cancel' | translate}}</a>
     </div>
   </div>
       

ambari-admin/src/main/resources/ui/admin-web/app/views/users/list.html

@@ -19,10 +19,10 @@
 <div class="users-pane">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li class="active">Users</li>
+      <li class="active">{{'common.users' | translate}}</li>
     </ol>
     <div class="pull-right top-margin-4">
-      <link-to route="users.create" class="btn btn-primary createuser-btn"><span class="glyphicon glyphicon-plus"></span> Create Local User</link-to>
+      <link-to route="users.create" class="btn btn-primary createuser-btn"><span class="glyphicon glyphicon-plus"></span> {{'users.create' | translate}}</link-to>
     </div>
   </div>
   <hr>
@@ -33,18 +33,18 @@
           <span class="bottom-margin admin-filter glyphicon glyphicon-flash" 
             ng-class="{'no-filter' : !adminFilter}" 
             ng-click="toggleAdminFilter()"
-            tooltip="{{adminFilter ? 'Show all users' : 'Show only admin users'}}"
+            tooltip="{{'users.' + (adminFilter ? 'showAll' : 'showAdmin') | translate}}"
           ></span>
         </th>
         <th>
           <div class="search-container">
-            <label for="">Username</label>
-            <input type="text" class="form-control namefilter" placeholder="Any" ng-model="currentNameFilter" ng-change="resetPagination()">
-            <button type="button" class="close clearfilter" ng-show="currentNameFilter" ng-click="currentNameFilter=''; resetPagination()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <label for="">{{'users.username' | translate}}</label>
+            <input type="text" class="form-control namefilter" placeholder="{{'common.any' | translate}}" ng-model="currentNameFilter" ng-change="resetPagination()">
+            <button type="button" class="close clearfilter" ng-show="currentNameFilter" ng-click="currentNameFilter=''; resetPagination()"><span aria-hidden="true">&times;</span><span class="sr-only">{{'common.controls.close' | translate}}</span></button>
           </div>
         </th>
         <th>
-          <label for="">Type</label>
+          <label for="">{{'common.type' | translate}}</label>
           <select class="form-control typefilter"
             ng-model="currentTypeFilter"
             ng-options="item.label for item in typeFilterOptions"
@@ -53,7 +53,7 @@
 
         </th>
         <th>
-          <label for="">Status</label>
+          <label for="">{{'users.status' | translate}}</label>
           <select class="form-control statusfilter" 
             ng-model="currentActiveFilter"
             ng-options="item.label for item in activeFilterOptions"
@@ -65,23 +65,23 @@
     <tbody>
       <tr ng-repeat="user in users">
         <td>
-          <span class="glyphicon" tooltip="{{user.Users.admin ? 'Ambari Admin' : ''}}" ng-class="{'glyphicon-flash' : user.Users.admin}"></span>
+          <span class="glyphicon" tooltip="{{user.Users.admin ? constants.admin : ''}}" ng-class="{'glyphicon-flash' : user.Users.admin}"></span>
         </td>
         <td>
            <a href="#/users/{{user.Users.encoded_name}}">{{user.Users.user_name}}</a>
         </td>
         <td>{{user.Users.userTypeName}}</td>
-        <td><span ng-class="user.Users.active ? 'text-success' : 'text-danger'">{{user.Users.active ? 'Active' : 'Inactive'}}</span></td>
+        <td><span ng-class="user.Users.active ? 'text-success' : 'text-danger'">{{'users.' + (user.Users.active ? 'active' : 'inactive') | translate}}</span></td>
       </tr>
     </tbody>
   </table>
   <div class="alert alert-info col-sm-12" ng-show="!users.length">
-    No users to display.
+    {{'common.alerts.nothingToDisplay' | translate: '{term: constants.users}'}}
   </div>
   <div class="col-sm-12 table-bar">
     <div class="pull-left filtered-info">
-      <span>{{tableInfo.showed}} of {{tableInfo.total}} users showing</span>
-      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">clear filters</a></span>
+      <span>{{'common.filterInfo' | translate: '{showed: tableInfo.showed, total: tableInfo.total, term: constants.users}'}}</span>
+      <span ng-show="isNotEmptyFilter">- <a href ng-click="clearFilters()">{{'common.controls.clearFilters' | translate}}</a></span>
     </div>
     <div class="pull-right left-margin">
       <pagination class="paginator" total-items="totalUsers" max-size="maxVisiblePages" items-per-page="usersPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

ambari-admin/src/main/resources/ui/admin-web/app/views/users/modals/changePassword.html

@@ -16,37 +16,31 @@
 * limitations under the License.
 -->
 <div class="modal-header">
-  <h3 class="modal-title">Change Password for {{userName}}</h3>
+  <h3 class="modal-title">{{'users.changePasswordFor' | translate: '{userName: userName}'}}</h3>
 </div>
 <div class="modal-body">
   <form class="form-horizontal" novalidate name="form.passwordChangeForm" role="form" >
     <div class="form-group" ng-class="{'has-error' : (form.passwordChangeForm.currentPassword.$error.required && form.passwordChangeForm.submitted)}">
-      <label for="" class="col-sm-4 control-label" >Your Password</label>
+      <label for="" class="col-sm-4 control-label" >{{'users.yourPassword' | translate}}</label>
       <div class="col-sm-8">
-        <input type="password" name="currentPassword" class="form-control bottom-margin" placeholder="Your password" required ng-model="passwordData.currentUserPassword" autocomplete="off">
-        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.password.$error.required && form.passwordChangeForm.submitted'>
-          Password required!
-        </div>
+        <input type="password" name="currentPassword" class="form-control bottom-margin" placeholder="{{'users.yourPassword' | translate}}" required ng-model="passwordData.currentUserPassword" autocomplete="off">
+        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.password.$error.required && form.passwordChangeForm.submitted'>{{'users.alerts.passwordRequired' | translate}}</div>
       </div>
     </div>
     <div class="form-group no-margin-bottom" ng-class="{'has-error' : (form.passwordChangeForm.password.$error.required && form.passwordChangeForm.submitted) || form.passwordChangeForm.confirmPassword.$error.passwordVerify}">
-      <label for="" class="col-sm-4 control-label">New User Password:</label>
+      <label for="" class="col-sm-4 control-label">{{'users.newPassword' | translate}}:</label>
       <div class="col-sm-8">
-        <input type="password" class="form-control bottom-margin" name="password" placeholder="New User Password" required ng-model="passwordData.password" autocomplete="off">
-        <input type="password" class="form-control bottom-margin" name="confirmPassword" placeholder="New User Password Confirmation" required ng-model="passwordData.passwordConfirmation"
+        <input type="password" class="form-control bottom-margin" name="password" placeholder="{{'users.newPassword' | translate}}" required ng-model="passwordData.password" autocomplete="off">
+        <input type="password" class="form-control bottom-margin" name="confirmPassword" placeholder="{{'users.newPasswordConfirmation' | translate}}" required ng-model="passwordData.passwordConfirmation"
           password-verify="passwordData.password" autocomplete="off">
-        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.confirmPassword.$error.passwordVerify'>
-          Password must match!
-        </div>
-        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.password.$error.required && form.passwordChangeForm.submitted'>
-          Password required!
-        </div>
+        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.confirmPassword.$error.passwordVerify'>{{'users.alerts.wrongPassword' | translate}}</div>
+        <div class="alert alert-danger no-margin-bottom" ng-show='form.passwordChangeForm.password.$error.required && form.passwordChangeForm.submitted'>{{'users.alerts.passwordRequired' | translate}}</div>
       </div>
 
     </div>
   </form>
 </div>
 <div class="modal-footer">
-  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
-  <button class="btn btn-primary" ng-click="ok()">OK</button>
+  <button class="btn btn-default" ng-click="cancel()">{{'common.controls.cancel' | translate}}</button>
+  <button class="btn btn-primary" ng-click="ok()">{{'common.controls.ok' | translate}}</button>
 </div>

ambari-admin/src/main/resources/ui/admin-web/app/views/users/show.html

@@ -19,61 +19,61 @@
 <div ng-show="user" class="user-edit-panel">
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
-      <li><a href="#/users">Users</a></li>
+      <li><a href="#/users">{{'common.users' | translate}}</a></li>
       <li class="active"><span class="glyphicon glyphicon-flash" ng-show="user.admin"></span>{{user.user_name}}</li>
     </ol>
     <div class="pull-right top-margin-4">
       <div ng-switch="isCurrentUser || user.ldap_user">
-        <button class="btn deleteuser-btn disabled btn-default" ng-switch-when="true" tooltip="Cannot Delete User">Delete User</button>
-        <button class="btn deleteuser-btn btn-danger" ng-switch-when="false" ng-click="deleteUser()">Delete User</button>
+        <button class="btn deleteuser-btn disabled btn-default" ng-switch-when="true" tooltip="{{'common.cannotDelete' | translate: '{term: constants.user}'}}">{{'common.delete' | translate: '{term: constants.user}'}}</button>
+        <button class="btn deleteuser-btn btn-danger" ng-switch-when="false" ng-click="deleteUser()">{{'common.delete' | translate: '{term: constants.user}'}}</button>
       </div>
     </div>
   </div>
   <hr>
   <form class="form-horizontal" role="form" >
     <div class="form-group">
-      <label for="" class="col-sm-2 control-label">Type</label>
+      <label for="" class="col-sm-2 control-label">{{'common.type' | translate}}</label>
       <div class="col-sm-10">
         <label for="" class="control-label">{{user.userTypeName}}</label>
       </div>
     </div>
     <div class="form-group">
-      <label for="" class="col-sm-2 control-label">Status</label>
+      <label for="" class="col-sm-2 control-label">{{'users.status' | translate}}</label>
       <div class="col-sm-10">
-        <toggle-switch on-change="toggleUserActive()" disabled-tooltip="Cannot Change Status" ng-disabled="isCurrentUser" model="user.active" on-label="Active" off-label="Inactive" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch>
+        <toggle-switch on-change="toggleUserActive()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.status}'}}" ng-disabled="isCurrentUser" model="user.active" on-label="{{'users.active' | translate}}" off-label="{{'users.inactive' | translate}}" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch>
       </div>
     </div>
     <div class="form-group">
-      <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span> Ambari Admin</label>
+      <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span> {{'users.ambariAdmin' | translate}}</label>
       <div class="col-sm-10">
-        <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="Cannot Change Admin" ng-disabled="isCurrentUser" model="user.admin" on-label="Yes" off-label="No" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch>
+        <toggle-switch on-change="toggleUserAdmin()" disabled-tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.admin}'}}" ng-disabled="isCurrentUser" model="user.admin" on-label="{{'common.yes' | translate}}" off-label="{{'common.no' | translate}}" class="switch-primary userstatus {{user ? '' : 'no-animation'}}" data-off-color="danger"></toggle-switch>
       </div>
     </div>
     <div class="form-group">
-      <label for="password" class="col-sm-2 control-label">Password</label>
+      <label for="password" class="col-sm-2 control-label">{{'users.password' | translate}}</label>
       <div class="col-sm-10">
         <div ng-switch="user.ldap_user">
-          <button class="btn deleteuser-btn disabled btn-default" ng-switch-when="true" tooltip="Cannot Change Password">Change Password</button>
-          <a href ng-click="openChangePwdDialog()" ng-switch-when="false" class="btn btn-default changepassword">Change Password</a>
+          <button class="btn deleteuser-btn disabled btn-default" ng-switch-when="true" tooltip="{{'users.alerts.cannotChange' | translate: '{term: constants.password}'}}">{{'users.changePassword'}}</button>
+          <a href ng-click="openChangePwdDialog()" ng-switch-when="false" class="btn btn-default changepassword">{{'users.changePassword' | translate}}</a>
         </div>
           
       </div>
     </div>
     <div class="form-group">
-      <label for="groups" class="col-sm-2 control-label">{{user.ldap_user ? 'LDAP Group Membership' : 'Local Group Membership'}}</label>
+      <label for="groups" class="col-sm-2 control-label">{{'common.' + (user.ldap_user ? 'ldap' : 'local') | translate}} {{'users.groupMembership' | translate}}</label>
       <div class="col-sm-10">
         <editable-list items-source="editingGroupsList" resource-type="Group" editable="!user.ldap_user"></editable-list>
       </div>
         
     </div>
     <div class="form-group" >
-      <label for="" class="col-sm-2 control-label">Privileges</label>
+      <label for="" class="col-sm-2 control-label">{{'common.privileges' | translate}}</label>
       <div class="col-sm-10">
         <table class="table" ng-hide="hidePrivileges || user.admin">
           <thead>
             <tr>
-              <th>Cluster</th>
-              <th>Cluster Role</th>
+              <th>{{'common.cluster' | translate}}</th>
+              <th>{{'common.clusterRole' | translate}}</th>
             </tr>
           </thead>
           <tbody>
@@ -87,13 +87,13 @@
               </td>
             </tr>
             <tr>
-              <td ng-show="noClusterPriv">No cluster privileges</td>
+              <td ng-show="noClusterPriv">{{'common.alerts.noPrivileges' | translate: '{term: constants.cluster}'}}</td>
             </tr>
           </tbody>
           <thead class="view-permission-header">
             <tr>
-              <th>View</th>
-              <th>View Permissions</th>
+              <th>{{'common.view' | translate}}</th>
+              <th>{{'common.viewPermissions' | translate}}</th>
             </tr>
           </thead>
           <tbody>
@@ -107,12 +107,12 @@
               </td>
             </tr>
             <tr>
-              <td ng-show="noViewPriv">No view privileges</td>
+              <td ng-show="noViewPriv">{{'common.alerts.noPrivileges' | translate: '{term: constants.view}'}}</td>
             </tr>
           </tbody>
         </table>
-        <div class="alert alert-info" ng-show="!privileges && !user.admin">This user does not have any privileges.</div>
-        <div class="alert alert-info" ng-show="user.admin">This user is an Ambari Admin and has all privileges.</div>
+        <div class="alert alert-info" ng-show="!privileges && !user.admin">{{'common.alerts.noPrivilegesDescription' | translate: '{term: constants.user}'}}</div>
+        <div class="alert alert-info" ng-show="user.admin">{{'users.userIsAdmin' | translate}}</div>
       </div>
     </div>
   </form>