AMBARI-6866. Admin View: various UI improvements. (yusaku)

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

@@ -52,7 +52,7 @@
               <li>
                 <div class="btn-group" dropdown is-open="status.isopen">
                 <button type="button" class="btn btn-default dropdown-toggle navbar-btn" ng-disabled="disabled">
-                    Admin <span class="caret"></span>
+                    {{currentUser}} <span class="caret"></span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href ng-click="about()">About</a></li>
@@ -125,6 +125,7 @@
     <script src="scripts/controllers/clusters/ClustersManageAccessCtrl.js"></script>
     <script src="scripts/directives/linkToDir.js"></script>
     <script src="scripts/directives/PasswordVerify.js"></script>
+    <script src="scripts/directives/disabledTooltip.js"></script>
     <script src="scripts/services/User.js"></script>
     <script src="scripts/services/Group.js"></script>
     <script src="scripts/services/View.js"></script>

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

@@ -24,6 +24,26 @@ angular.module('ambariAdminConsole')
   $scope.group.editingUsers = [];
   $scope.groupMembers = [];
   $scope.dataLoaded = false;
+  
+  $scope.isMembersEditing = false;
+  
+  $scope.enableMembersEditing = function() {
+    $scope.isMembersEditing = true;
+    $scope.group.editingUsers = angular.copy($scope.groupMembers);
+  };
+  $scope.cancelUpdate = function() {
+    $scope.isMembersEditing = false;
+    $scope.group.editingUsers = '';
+  };
+  $scope.updateMembers = function() {
+    var newMembers = $scope.group.editingUsers.toString().split(',').filter(function(item) {return item.trim();}).map(function(item) {return item.trim()});
+    $scope.group.members = newMembers;
+    $scope.group.saveMembers().then(loadMembers)
+    .catch(function(data) {
+      uiAlert.danger(data.status, data.message);
+    });
+    $scope.isMembersEditing = false;
+  };
 
 
   function loadMembers(){
@@ -37,22 +57,6 @@ angular.module('ambariAdminConsole')
     loadMembers();
   });
 
-  $scope.toggleEditMode = function() {
-    $scope.editMode = !$scope.editMode;
-
-    if( $scope.editMode ){
-      // $scope.group.editingUsers = $scope.group.members.join(', ');
-      $scope.group.editingUsers = $scope.groupMembers;
-    } else {
-      var newMembers = $scope.group.editingUsers.toString().split(',').filter(function(item) {return item.trim();}).map(function(item) {return item.trim()});
-      $scope.group.members = newMembers;
-      $scope.group.saveMembers().then(loadMembers)
-      .catch(function(data) {
-        uiAlert.danger(data.status, data.message);
-      });
-    }
-  };
-
   $scope.deleteGroup = function(group) {
     ConfirmationModal.show('Delete Group', 'Are you sure you want to delete group "'+ group.group_name +'"?').then(function() {
       group.destroy().then(function() {

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

@@ -24,7 +24,7 @@ angular.module('ambariAdminConsole')
   $scope.groupsPerPage = 10;
   $scope.currentPage = 1;
   $scope.totalGroups = 1;
-  $scope.search = '';
+  $scope.currentNameFilter = '';
   $scope.maxVisiblePages=20;
 
   $scope.pageChanged = function() {
@@ -34,8 +34,18 @@ angular.module('ambariAdminConsole')
     loadGroups();
   };
 
+  $scope.resetPagination = function() {
+    $scope.currentPage = 1;
+    loadGroups();
+  };
+
   function loadGroups(){
-    Group.all($scope.currentPage, $scope.groupsPerPage, $scope.search).then(function(groups) {
+    Group.all({
+      currentPage: $scope.currentPage, 
+      groupsPerPage: $scope.groupsPerPage, 
+      searchString: $scope.currentNameFilter,
+      ldap_group: $scope.currentTypeFilter.value
+    }).then(function(groups) {
       $scope.totalGroups = groups.itemTotal;
       $scope.groups = groups;
     })
@@ -44,20 +54,12 @@ angular.module('ambariAdminConsole')
     });
   }
 
-  loadGroups();
-
-  $scope.typeFilterOptions = ['All', 'Local', 'LDAP'];
-  $scope.currentTypeFilter = 'All';
-  $scope.typeFilter = function(group) {
-    var tf = $scope.currentTypeFilter;
-    if (tf === 'All') {
-      return group;
-    } else if(tf === 'Local' && !group.ldap_group){
-      return group;
-    } else if(tf === 'LDAP' && group.ldap_group){
-      return group;
-    }
-  };
-
+  $scope.typeFilterOptions = [
+    {label:'All', value:'*'},
+    {label:'Local', value: false},
+    {label:'LDAP', value:true}
+  ];
+  $scope.currentTypeFilter = $scope.typeFilterOptions[0];
   
+  loadGroups();
 }]);

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

@@ -37,4 +37,6 @@ angular.module('ambariAdminConsole')
   		}]
   	});
   };
+
+  $scope.currentUser = Auth.getCurrentUser();
 }]);

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

@@ -23,49 +23,48 @@ angular.module('ambariAdminConsole')
   $scope.usersPerPage = 10;
   $scope.currentPage = 1;
   $scope.totalUsers = 1;
-  $scope.search = '';
+  $scope.currentNameFilter = '';
   $scope.maxVisiblePages=20;
 
   $scope.pageChanged = function() {
-    loadUsers();
+    $scope.loadUsers();
   };
   $scope.usersPerPageChanges = function() {
-    loadUsers();
+    $scope.loadUsers();
   };
 
-  function loadUsers(){
-    User.list($scope.currentPage, $scope.usersPerPage, $scope.search).then(function(data) {
-      $scope.totalUsers = data.itemTotal;
-      $scope.users = data.items;
+  $scope.loadUsers = function(){
+    User.list({
+      currentPage: $scope.currentPage, 
+      usersPerPage: $scope.usersPerPage, 
+      searchString: $scope.currentNameFilter,
+      ldap_user: $scope.currentTypeFilter.value,
+      active: $scope.currentActiveFilter.value
+    }).then(function(data) {
+      $scope.totalUsers = data.data.itemTotal;
+      $scope.users = data.data.items;
     });
-  }
+  };
 
-  loadUsers();
+  $scope.resetPagination = function() {
+    $scope.currentPage = 1;
+    $scope.loadUsers();
+  };
 
+  $scope.actvieFilterOptions = [
+    {label: 'All', value: '*'}, 
+    {label: 'Active', value: true}, 
+    {label:'Inactive', value:false}
+  ];
+  $scope.currentActiveFilter = $scope.actvieFilterOptions[0];
+  
 
-  $scope.actvieFilterOptions = ['All', 'Active', 'Inactive'];
-  $scope.currentActiveFilter = 'All';
-  $scope.activeFilter = function(user) {
-    var af = $scope.currentActiveFilter;
-    if (af === 'All') {
-      return user;
-    } else if(af === 'Active' && user.Users.active){
-      return user;
-    } else if(af === 'Inactive' && !user.Users.active){
-      return user;
-    }
-  };
+  $scope.typeFilterOptions = [
+    {label:'All', value:'*'},
+    {label:'Local', value:false},
+    {label:'LDAP', value:true}
+  ];
+  $scope.currentTypeFilter = $scope.typeFilterOptions[0];
 
-  $scope.typeFilterOptions = ['All', 'Local', 'LDAP'];
-  $scope.currentTypeFilter = 'All';
-  $scope.typeFilter = function(user) {
-    var tf = $scope.currentTypeFilter;
-    if (tf === 'All') {
-      return user;
-    } else if(tf === 'Local' && !user.Users.ldap_user){
-      return user;
-    } else if(tf === 'LDAP' && user.Users.ldap_user){
-      return user;
-    }
-  };
+  $scope.loadUsers();
 }]);

ambari-admin/src/main/resources/ui/admin-web/app/scripts/directives/disabledTooltip.js

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+angular.module('ambariAdminConsole')
+.directive('disabledTooltip', function() {
+  return {
+    restrict: 'A',
+    link: function(scope, elem, attrs, ctrl) {
+      if(!attrs.ngDisabled){
+        return;
+      }
+      scope.$watch(function(scope) {
+        return scope[attrs.ngDisabled];
+      }, function(val) {
+        if(val){
+          elem.tooltip({
+            title: attrs.disabledTooltip
+          });
+        } else {
+          elem.tooltip('destroy');
+        }
+      });
+    }
+  };
+});

ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/Group.js

@@ -147,18 +147,16 @@ angular.module('ambariAdminConsole')
     return $http.post(Settings.baseUrl + '/groups/' + groupName + '/members/'+memberName);
   };
 
-  Group.all = function(currentPage, groupsPerPage) {
+  Group.all = function(params) {
     var deferred = $q.defer();
 
-    $http({
-      method: 'GET',
-      url: Settings.baseUrl + '/groups',
-      params: {
-        'fields': 'Groups/ldap_group',
-        page_size: groupsPerPage,
-        from: (currentPage-1)*groupsPerPage
-      }
-    })
+    $http.get(Settings.baseUrl + '/groups?'
+      + 'Groups/group_name.matches(.*'+params.searchString+'.*)'
+      + '&fields=*'
+      + '&from='+ (params.currentPage-1)*params.groupsPerPage
+      + '&page_size=' + params.groupsPerPage
+      + (params.ldap_group === '*' ? '' : '&Groups/ldap_group='+params.ldap_group)
+    )
     .success(function(data) {
       var groups = [];
       if(Array.isArray(data.items)){

ambari-admin/src/main/resources/ui/admin-web/app/scripts/services/User.js

@@ -34,12 +34,16 @@ angular.module('ambariAdminConsole')
   var Users = Restangular.all('users');
 
   return {
-    list: function(currentPage, usersPerPage) {
-      return Users.customGET('', {
-        fields: '*',
-        page_size: usersPerPage,
-        from: (currentPage-1)*usersPerPage
-      });
+    list: function(params) {
+      return $http.get(
+        Settings.baseUrl + '/users/?' 
+        + 'Users/user_name.matches(.*'+params.searchString+'.*)'
+        + '&fields=*'
+        + '&from=' + (params.currentPage-1)*params.usersPerPage
+        + '&page_size=' + params.usersPerPage
+        + (params.ldap_user === '*' ? '' : '&Users/ldap_user=' + params.ldap_user)
+        + (params.active === '*' ? '' : '&Users/active=' + params.active)
+      );
     },
     get: function(userId) {
       return Restangular.one('users', userId).get();
@@ -60,7 +64,7 @@ angular.module('ambariAdminConsole')
         data: {
           'Users/password': password,
           'Users/old_password': currentUserPassword,
-          'Users/roles': user.roles[0] || 'user' 
+          'Users/roles': user.roles[0] || 'user'
         }
       });
     },

ambari-admin/src/main/resources/ui/admin-web/app/styles/main.css

@@ -33,6 +33,9 @@
   border: none;
   margin-top: 0;
 }
+.views-list-table h4{
+  font-size: 14px;
+}
 .views-list-table .panel-group .panel + .panel{
   margin-top: 0;
 }
@@ -73,6 +76,14 @@
 .ats-switch{
   border-color: #333;
 }
+.ats-switch.disabled, .ats-switch.disabled:hover{
+  cursor: not-allowed !important;
+  box-shadow: none!important;
+  border-color: #ccc!important;
+}
+.ats-switch.disabled .switch-left, .ats-switch.disabled .switch-right, .ats-switch.disabled .knob{
+  cursor: not-allowed!important;
+}
 .hide-soft{
   display: none;
 }
@@ -84,8 +95,12 @@
 }
 .panel{
   box-shadow: none;
+  border-radius: 0;
 }
 
+.users-pane table .glyphicon{
+  width: 14px;
+}
 
 .pulldown2{
   -webkit-transform: translateY(2px);
@@ -96,6 +111,12 @@
 .btn.disabled.syncldapbtn{
   pointer-events: auto;
   background-color: #e6e6e6;
+  cursor: not-allowed;
+}
+.btn.deleteuser-btn.disabled, .btn.deleteuser-btn[disabled]{
+  pointer-events: auto;
+  cursor: not-allowed;
+  background-color: #e6e6e6;
 }
 
 .about .logo{
@@ -178,10 +199,12 @@
 .create-view-form .description{
   display: inline-block;
   vertical-align: middle;
-  padding-left: 20px;
+}
+.create-view-form .description h4 span{
+  font-weight: normal;
+  
 }
 .create-view-form .view-header{
-  margin-bottom: 20px;
 }
 
 .left-navbar .panel{

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

@@ -22,11 +22,9 @@
 <hr>
 <form class="form-horizontal create-view-form" role="form" name="form.isntanceCreateForm" novalidate>
   <div class="view-header">
-    <img src="http://placehold.it/64x64" alt="" class="icon-big">
-    <img src="http://placehold.it/32x32" alt="" class="icon-small">
     <div class="description">
-      <h3>{{view.ViewVersionInfo.view_name}}</h3>
-      <span>{{view.ViewVersionInfo.label}} | Version: <select ng-model="version" class="instanceversion-input" ng-change="versionChanged()" ng-options="o as o for o in versions"></select></span>
+      <h4>View: <span>{{view.ViewVersionInfo.view_name}}</span></h4>
+      <h4>Version: <select ng-model="version" class="instanceversion-input" ng-change="versionChanged()" ng-options="o as o for o in versions"></select></h4>
     </div>
   </div>
   
@@ -38,9 +36,9 @@
       <div class="form-group" 
       ng-class="{'has-error' : ( (form.isntanceCreateForm.instanceNameInput.$error.required || form.isntanceCreateForm.instanceNameInput.$error.pattern) && form.isntanceCreateForm.submitted) || instanceExists }"
       >
-        <label for="" class="control-labe col-sm-2">Instance Name</label>
+        <label for="" class="control-label col-sm-2">Instance Name</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control instancename-input" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name">
+          <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.isntanceCreateForm.instanceNameInput.$error.required && form.isntanceCreateForm.submitted'>
             This field is required.
@@ -57,7 +55,7 @@
       ng-class="{'has-error' : ( (form.isntanceCreateForm.displayLabel.$error.required || form.isntanceCreateForm.displayLabel.$error.pattern) && form.isntanceCreateForm.submitted)}">
         <label for="" class="control-labe col-sm-2">Display Label</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control instancelabel-input" name="displayLabel" ng-model="instance.label" required ng-pattern="nameValidationPattern">
+          <input type="text" class="form-control instancelabel-input" name="displayLabel" ng-model="instance.label" required ng-pattern="nameValidationPattern" autocomplete="off">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.displayLabel.$error.required && form.isntanceCreateForm.submitted'>
             This field is required.
@@ -87,7 +85,7 @@
         ng-class="{'has-error' : (form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted)}" >
         <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.description}}{{parameter.required ? '*' : ''}}</label>
         <div class="col-sm-9">
-          <input type="text" class="form-control viewproperty-input"  name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value">
+          <input type="text" class="form-control viewproperty-input"  name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value" autocomplete="off">
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted'>
             Field requried!
           </div>

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

@@ -29,7 +29,7 @@
   <div class="panel-heading clearfix">
     <h3 class="panel-title pull-left">Settings</h3>
     <div class="pull-right">
-      <a href ng-click="editSettingsDisabled = !editSettingsDisabled" ng-show="editSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+      <a href ng-click="editSettingsDisabled = !editSettingsDisabled" ng-show="editSettingsDisabled" class="settings-edit-toggle"> <span class="glyphicon glyphicon-pencil"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">
@@ -75,7 +75,7 @@
   <div class="panel-heading clearfix">
     <h3 class="panel-title pull-left">Permissions</h3>
     <div class="pull-right" >
-      <a ng-hide="isPermissionsEmpty" href class="permissions-edit-toggle" ng-click="editPermissionDisabled = !editPermissionDisabled" ng-show="editPermissionDisabled"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+      <a ng-hide="isPermissionsEmpty" href class="permissions-edit-toggle" ng-click="editPermissionDisabled = !editPermissionDisabled" ng-show="editPermissionDisabled"> <span class="glyphicon glyphicon-pencil"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">
@@ -124,7 +124,7 @@
   <div class="panel-heading clearfix">
     <h3 class="panel-title pull-left">Properties</h3>
     <div class="pull-right">
-      <a href ng-hide="isConfigurationEmpty" ng-click="editConfigurationDisabled = !editConfigurationDisabled" ng-show="editConfigurationDisabled" class="properties-toggle"> <span class="glyphicon glyphicon-cog"></span> Edit</a>
+      <a href ng-hide="isConfigurationEmpty" ng-click="editConfigurationDisabled = !editConfigurationDisabled" ng-show="editConfigurationDisabled" class="properties-toggle"> <span class="glyphicon glyphicon-pencil"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">

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

@@ -24,7 +24,7 @@
   <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>
     <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]+)$/">
+      <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">
       <div class="alert alert-danger top-margin" ng-show="form.group_name.$error.required && form.submitted">
         Required
       </div>

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

@@ -34,28 +34,37 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label">{{group.ldap_group ? 'LDAP Members' : 'Local Members'}}</label>
+    <label for="members" class="col-sm-2 control-label">{{group.ldap_group ? 'LDAP Members' : 'Local Members'}}</label>
     <div class="col-sm-10">
-      <div ng-switch="editMode">
-        <div class="well users" ng-switch-when="false">
-          <span ng-repeat="member in groupMembers" >
-            <link-to route='users.show' id="{{member}}">
-              {{member}}
-            </link-to>
-            {{$last ? '' : ', '}}
-          </span>
+      <div class="row" ng-hide="isMembersEditing">
+        <div class="col-sm-10">
+          <div class="well users">
+            <span ng-repeat="member in groupMembers" >
+              <link-to route='users.show' id="{{member}}">
+                {{member}}
+              </link-to>
+              {{$last ? '' : ', '}}
+            </span>
+          </div>
         </div>
-        <div ng-switch-when="true">
-          <textarea class="form-control bottom-margin" id=""  ng-model="group.editingUsers"></textarea>
+        <div class="col-sm-2">
+          <a href ng-click="enableMembersEditing()" ng-hide="user.ldap_group"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
+        </div>
+      </div>
+      <div class="row" ng-show="isMembersEditing">
+        <div class="col-sm-12">
+          <textarea name="groups" id="" cols="30" rows="5" class="form-control bottom-margin usergroups" ng-model="group.editingUsers"></textarea>
+          <a href class="btn btn-primary pull-right left-margin updategroups" ng-click="updateMembers()">Save</a>
+          <button class="btn btn-default pull-right cancel-groups-update" ng-click="cancelUpdate()">Cancel</button>
         </div>
       </div>
-      <button ng-show="!group.ldap_group" class="btn btn-primary pull-right" ng-click="toggleEditMode()"><span class="glyphicon {{editMode ? 'glyphicon-save' : 'glyphicon-pencil'}}"></span> {{editMode ? 'Save': 'Edit'}}</button>
     </div>
   </div>
-  <div class="form-group" ng-show="dataLoaded">
+
+  <div class="form-group">
       <label for="" class="col-sm-2 control-label">Privileges</label>
       <div class="col-sm-10">
-        <table class="table" ng-show="privileges">
+        <table class="table">
           <thead>
             <tr>
               <th>Resource</th>

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

@@ -25,7 +25,7 @@
     </div>
   </div>
   <hr>
-  <table class="table table-striped table-hover">
+  <table class="table table-striped table-hover col-sm-12">
     <thead>
       <tr>
         <th>
@@ -38,32 +38,33 @@
         <th>Members</th>
       </tr>
       <tr>
-        <th>
+        <th class="col-sm-8">
           <div class="search-container">
-            <input type="text" class="form-control namefilter" ng-model="currentNameFilter">
-            <button type="button" class="close" ng-show="currentNameFilter" ng-click="currentNameFilter=''"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <input type="text" class="form-control namefilter" 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>
           </div>
         </th>
-        <th>
+        <th class="col-sm-2">
           <select class="form-control typefilter"
             ng-model="currentTypeFilter"
-            ng-options="item for item in typeFilterOptions">
+            ng-options="item.label for item in typeFilterOptions"
+            ng-change="resetPagination();">
           </select>
         </th>
-        <th></th>
+        <th class="col-sm-2"></th>
       </tr>
     </thead>
     <tbody>
-      <tr ng-repeat="group in groups | filter:typeFilter | filter:currentNameFilter">
-        <td>
+      <tr ng-repeat="group in groups">
+        <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>{{group.ldap_group ? 'LDAP' : 'Local'}}</td>
-        <td>{{group.members.length}} {{group.members.length === 1 ? 'member' : 'members'}}</td>
+        <td class="col-sm-2">{{group.ldap_group ? 'LDAP' : 'Local'}}</td>
+        <td class="col-sm-2">{{group.members.length}} {{group.members.length === 1 ? 'member' : 'members'}}</td>
       </tr>
     </tbody>
   </table>
-  <div class="alert alert-info" ng-show="!groups.length">
+  <div class="alert alert-info col-sm-12" ng-show="!groups.length">
     No groups to display.
   </div>
   <div class="col-sm-12">

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

@@ -60,7 +60,7 @@
         <a ng-switch-when="true" href class="btn btn-primary btn-block syncldapbtn" ng-click="syncLDAP()">
           <span class="glyphicon glyphicon-transfer pulldown2"></span> Sync LDAP
         </a>
-        <a ng-switch-default href class="btn btn-default btn-block syncldapbtn disabled" popover="LDAP is not configured. To configure LDAP, run ambari-server setup-ldap from the command line." popover-trigger="mouseenter">
+        <a ng-switch-default href class="btn btn-default btn-block syncldapbtn disabled" tooltip="LDAP is not configured. To configure LDAP, run ambari-server setup-ldap from the command line.">
           <span class="glyphicon glyphicon-transfer pulldown2"></span> Sync LDAP
         </a>
       </div>

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

@@ -43,7 +43,7 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="" class="col-sm-2 control-label">Ambari Admin</label>
+    <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span>Ambari Admin</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>
     </div>
@@ -51,9 +51,9 @@
   <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>
     <div class="col-sm-10">
-      <input type="password" class="form-control bottom-margin userpassword" name="password" placeholder="Password" required ng-model="user.password">
+      <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"
-        password-verify="user.password">
+        password-verify="user.password" autocomplete="off">
 
       <div class="alert alert-danger" ng-show='form.confirmPassword.$error.passwordVerify'>
         Password must match!

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

@@ -32,15 +32,16 @@
         <th>
           <div class="search-container">
             <label for="">Username</label>
-            <input type="text" class="form-control namefilter" ng-model="currentNameFilter">
-            <button type="button" class="close clearfilter" ng-show="currentNameFilter" ng-click="currentNameFilter=''"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+            <input type="text" class="form-control namefilter" 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>
           </div>
         </th>
         <th>
           <label for="">Type</label>
           <select class="form-control typefilter"
             ng-model="currentTypeFilter"
-            ng-options="item for item in typeFilterOptions">
+            ng-options="item.label for item in typeFilterOptions"
+            ng-change="resetPagination()">
           </select>
 
         </th>
@@ -48,15 +49,16 @@
           <label for="">Status</label>
           <select class="form-control statusfilter" 
             ng-model="currentActiveFilter"
-            ng-options="item for item in actvieFilterOptions">
+            ng-options="item.label for item in actvieFilterOptions"
+            ng-change="resetPagination()">
           </select>
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr ng-repeat="user in users | filter:activeFilter | filter:typeFilter | filter:currentNameFilter">
+      <tr ng-repeat="user in users">
         <td>
-          <span class="glyphicon glyphicon-flash" ng-show="user.Users.admin"></span>
+          <span class="glyphicon" tooltip="{{user.Users.admin ? 'Ambari Admin' : ''}}" ng-class="{'glyphicon-flash' : user.Users.admin}"></span>
           <link-to route="users.show" id="{{user.Users.user_name}}">{{user.Users.user_name}}</link-to>
         </td>
         <td>{{user.Users.ldap_user ? 'LDAP' : 'Local'}}</td>

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

@@ -23,7 +23,7 @@
     <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>
       <div class="col-sm-8">
-        <input type="password" name="currentPassword" class="form-control bottom-margin" placeholder="Your password" required ng-model="passwordData.currentUserPassword">
+        <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>
@@ -32,9 +32,9 @@
     <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 Password:</label>
       <div class="col-sm-8">
-        <input type="password" class="form-control bottom-margin" name="password" placeholder="Password" required ng-model="passwordData.password">
+        <input type="password" class="form-control bottom-margin" name="password" placeholder="Password" required ng-model="passwordData.password" autocomplete="off">
         <input type="password" class="form-control bottom-margin" name="confirmPassword" placeholder="Password confirmation" required ng-model="passwordData.passwordConfirmation"
-          password-verify="passwordData.password">
+          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>

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

@@ -20,10 +20,13 @@
   <div class="clearfix">
     <ol class="breadcrumb pull-left">
       <li><a href="#/users">Users</a></li>
-      <li class="active">{{user.user_name}}</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">
-      <button class="btn deleteuser-btn" ng-class="{'btn-danger': !isCurrentUser, 'btn-default' : isCurrentUser}" ng-click="deleteUser()" ng-disabled="isCurrentUser">Delete User</button>
+      <div ng-switch="isCurrentUser">
+        <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>
+      </div>
     </div>
   </div>
   <hr>
@@ -37,13 +40,13 @@
     <div class="form-group">
       <label for="" class="col-sm-2 control-label">Status</label>
       <div class="col-sm-10">
-        <toggle-switch on-change="toggleUserActive()" ng-disabled="isCurrentUser" model="user.active" on-label="Active" off-label="Inactive" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
+        <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" data-off-color="danger"></toggle-switch>
       </div>
     </div>
     <div class="form-group">
-      <label for="" class="col-sm-2 control-label">Ambari Admin</label>
+      <label for="" class="col-sm-2 control-label"><span class="glyphicon glyphicon-flash"></span> Ambari Admin</label>
       <div class="col-sm-10">
-        <toggle-switch on-change="toggleUserAdmin()" ng-disabled="isCurrentUser" model="user.admin" on-label="Yes" off-label="No" class="switch-primary userstatus" data-off-color="danger"></toggle-switch>
+        <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" data-off-color="danger"></toggle-switch>
       </div>
     </div>
     <div class="form-group">
@@ -79,10 +82,10 @@
       </div>
         
     </div>
-    <div class="form-group" ng-show="dataLoaded">
+    <div class="form-group">
       <label for="" class="col-sm-2 control-label">Privileges</label>
       <div class="col-sm-10">
-        <table class="table" ng-show="privileges">
+        <table class="table">
           <thead>
             <tr>
               <th>Resource</th>

ambari-web/app/templates/application.hbs

@@ -50,7 +50,7 @@
               <ul class="dropdown-menu">
                   <li><a href="" {{action showAboutPopup target="controller"}}>{{t app.aboutAmbari}}</a></li>
                   {{#if App.isAdmin }}
-                    <li><a href="/views/ADMIN_VIEW/1.0.0/INSTANCE/#/">{{t app.manageAmbari}}</a></li>
+                    <li><a href="/views/ADMIN_VIEW/1.0.0/INSTANCE/#/" target="adminconsole">{{t app.manageAmbari}}</a></li>
                   {{/if}}
                 {{#if isClusterDataLoaded}}
                   {{#if App.isAdmin}}

ambari-web/app/templates/main/menu_item.hbs

@@ -41,7 +41,9 @@
   <ul class="top-nav-dropdown-menu">
     {{#if view.content.views}}
       {{#each category in view.content.views}}
-        <li><a href="#" {{action "setView" category target="App.router.mainViewsController"}}>{{category.label}}</a></li>
+        {{#if category.visible }}
+          <li><a href="#" {{action "setView" category target="App.router.mainViewsController"}}>{{category.label}}</a></li>
+        {{/if}}
       {{/each}}
     {{else}}
       <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li>