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

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

@@ -89,7 +89,7 @@
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/lodash/dist/lodash.compat.js"></script>
     <script src="bower_components/restangular/dist/restangular.js"></script>
-    <script src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.js"></script>
+    <script src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

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

@@ -38,8 +38,8 @@ angular.module('ambariAdminConsole')
   $scope.isLDAPConfigured = false;
   $scope.ldapData = {};
   LDAP.get().then(function(data) {
-    $scope.ldapData = data;
-    $scope.isLDAPConfigured = data['LDAP']['configured'];
+    $scope.ldapData = data.data;
+    $scope.isLDAPConfigured = data.data['LDAP']['configured'];
   });
 
   $scope.syncLDAP = function() {

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

@@ -114,7 +114,6 @@ angular.module('ambariAdminConsole')
 
   $scope.savePermissions = function() {
     PermissionSaver.saveViewPermissions(
-      $scope.permissions,
       $scope.permissionsEdit,
       {
         view_name: $routeParams.viewId,

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

@@ -49,7 +49,6 @@ angular.module('ambariAdminConsole')
 
   $scope.save = function() {
     PermissionSaver.saveClusterPermissions(
-      $scope.permissions,
       $scope.permissionsEdit,
       {
         clusterId: $routeParams.id,

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

@@ -35,7 +35,7 @@ angular.module('ambariAdminConsole')
   };
 
   Group.all().then(function(groups) {
-    $scope.groups = groups; 
+    $scope.groups = groups;
   })
   .catch(function(data) {
     console.error('Get groups list error');

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

@@ -26,7 +26,8 @@ angular.module('ambariAdminConsole')
     if ($scope.form.$valid){
       User.create({
         'Users/user_name': $scope.user.user_name,
-        'Users/password': $scope.user.password
+        'Users/password': $scope.user.password,
+        'Users/active': !!$scope.user.active
       }).then(function() {
         $location.path('/users');
       }).catch(function(data) {;

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

@@ -18,8 +18,9 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('UsersShowCtrl', ['$scope', '$routeParams', 'User', '$modal', '$location', 'ConfirmationModal', 'uiAlert', function($scope, $routeParams, User, $modal, $location, ConfirmationModal, uiAlert) {
+.controller('UsersShowCtrl', ['$scope', '$routeParams', 'User', '$modal', '$location', 'ConfirmationModal', 'uiAlert', 'Auth', function($scope, $routeParams, User, $modal, $location, ConfirmationModal, uiAlert, Auth) {
   $scope.user = {};
+  $scope.isCurrentUser = true;
 
   $scope.isGroupEditing = false;
   $scope.enableGroupEditing = function() {
@@ -32,6 +33,11 @@ angular.module('ambariAdminConsole')
     $scope.isGroupEditing = false;
   };
 
+  $scope.cancelUpdate = function() {
+    $scope.isGroupEditing = false;
+    $scope.editingGroupsList = '';
+  };
+
   $scope.openChangePwdDialog = function() {
     var modalInstance = $modal.open({
       templateUrl: 'views/users/modals/changePassword.html',
@@ -74,6 +80,7 @@ angular.module('ambariAdminConsole')
 
   User.get($routeParams.id).then(function(data) {
     $scope.user = data.Users;
+    $scope.isCurrentUser = $scope.user.user_name === Auth.getCurrentUser();
   });
 
   $scope.deleteUser = function() {

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

@@ -19,12 +19,16 @@
 
 angular.module('ambariAdminConsole')
 .factory('Auth',['$http', 'Settings', function($http, Settings) {
+	var currentUserName = JSON.parse(localStorage.ambari).app.loginName;
   return {
     signout: function() {
       return $http({
         method: 'GET',
         url: Settings.baseUrl + '/logout'
       });
+    },
+    getCurrentUser: function() {
+    	return currentUserName;
     }
   };
 }]);

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

@@ -86,6 +86,13 @@ angular.module('ambariAdminConsole')
         data: data
       });
     },
+    updatePrivileges: function(params, privileges) {
+      return $http({
+        method: 'PUT',
+        url: Settings.baseUrl + '/views/' + params.view_name +'/versions/'+params.version+'/instances/'+params.instance_name+'/privileges',
+        data: privileges
+      });
+    },
     deletePrivilege: function(clusterId, permissionName, principalType, principalName) {
       return $http({
         method: 'DELETE',

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

@@ -37,8 +37,42 @@ angular.module('ambariAdminConsole')
 
     return result;
   };
+  function savePermissionsFor(resource, permissions, params){
+    var deferred = $q.defer();
+    var arr = [];
+
+    angular.forEach(permissions, function(permission) {
+      // Sanitaize input
+      var users = permission.USER.toString().split(',').filter(function(item) {return item.trim();}).map(function(item) {return item.trim()});
+      var groups = permission.GROUP.toString().split(',').filter(function(item) {return item.trim();}).map(function(item) {return item.trim()});
+      // Build array
+      arr = arr.concat(users.map(function(user) {
+        return {
+          'PrivilegeInfo':{
+            'permission_name': permission.PermissionInfo.permission_name,
+            'principal_name': user,
+            'principal_type': 'USER'
+          }
+        }
+      }));
+
+      arr = arr.concat(groups.map(function(group) {
+        return {
+          'PrivilegeInfo':{
+            'permission_name': permission.PermissionInfo.permission_name,
+            'principal_name': group,
+            'principal_type': 'GROUP'
+          }
+        }
+      }));
+    });
+
+    resource.updatePrivileges(params, arr);
+
+    return deferred.promise;
+  }
   
-  function savePermissionsFor(resource, oldPermissions, newPermissions, params){
+  function savePermissionsForOld(resource, oldPermissions, newPermissions, params){
     var deferred = $q.defer();
 
     var addArr = [];
@@ -119,8 +153,8 @@ angular.module('ambariAdminConsole')
     saveClusterPermissions: function(oldPermissions, newPermissions, params) {
       return savePermissionsFor(Cluster, oldPermissions, newPermissions, params);
     },
-    saveViewPermissions: function(oldPermissions, newPermissions, params) {
-      return savePermissionsFor(View, oldPermissions, newPermissions, params);
+    saveViewPermissions: function(permissions, params) {
+      return savePermissionsFor(View, permissions, params);
     }
   };
 }]);

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

@@ -57,11 +57,6 @@ angular.module('ambariAdminConsole')
           'Users/roles': user.roles[0] || 'user' 
         }
       });
-      // return Restangular.one('users', user.user_name).customPUT({
-      //   'Users/password': password,
-      //   'Users/old_password': currentUserPassword,
-      //   'Users/roles': user.roles[0] || 'user'
-      // });
     },
     delete: function(userId) {
       return Restangular.one('users', userId).remove();

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

@@ -128,6 +128,8 @@ angular.module('ambariAdminConsole')
     return deferred.promise;
   };
 
+  
+
   View.getVersions = function(viewName) {
     var deferred = $q.defer();
 
@@ -195,6 +197,14 @@ angular.module('ambariAdminConsole')
     });
   };
 
+  View.updatePrivileges = function(params, privileges) {
+    return $http({
+      method: 'PUT',
+      url: Settings.baseUrl + '/views/' + params.view_name +'/versions/'+params.version+'/instances/'+params.instance_name+'/privileges',
+      data: privileges
+    });
+  };
+
   View.deletePrivilege = function(params) {
     return $http({
       method: 'DELETE',

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

@@ -37,7 +37,7 @@
 }
 .btn.disabled.syncldapbtn{
   pointer-events: auto;
-  background-color: #0044cc;
+  background-color: #e6e6e6;
 }
 
 .about .logo{
@@ -59,7 +59,7 @@
   padding: 0;
 }
 
-.user-edit-panel .ats-switch span.switch-right{
+.user-edit-panel .ats-switch span.switch-right , .create-user-form .ats-switch span.switch-right{
   background-color: #da4f49;
   color: white;
 }
@@ -109,6 +109,9 @@
   text-decoration: none;
   
 }
+#top-nav .navbar.navbar-static-top .brand.cluster-name{
+  margin-left: 10px;
+}
 
 .create-view-form{
   padding-bottom: 50px;
@@ -123,14 +126,52 @@
   margin-bottom: 20px;
 }
 
+.left-navbar .panel{
+  border-radius: 0;
+}
+.left-navbar .panel-body li{
+  margin: 0 -15px;
+}
+.left-navbar .panel-body li a{
+  border-radius: 0;
+  padding-left: 30px;
+}
+.left-navbar .panel-body li.active a{
+  background: #666;
+  
+}
+
+.search-container{
+  position: relative;
+}
+.search-container .close{
+  position: absolute;
+  right: 10px;
+  top: 30px;
+}
+.groups-pane .search-container .close{
+  top: 5px;
+}
+.views-list-pane .search-container .close{
+  right: 50px;
+  top: 5px;
+  z-index: 100;
+}
+
+
 .container{
   padding-left: 0;
   width: 940px;
 }
+
+
 @media (min-width: 1200px) {
-  .container{
+  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container{
     width: 1130px;
   }
+  .container{
+    width: 1170px;
+  }
 }
 
 ul.nav li > a{

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

@@ -26,7 +26,7 @@
     <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" ng-change="versionChanged()" ng-options="o as o for o in versions"></select></span>
+      <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>
     </div>
   </div>
   
@@ -40,7 +40,7 @@
       >
         <label for="" class="control-labe col-sm-2">Instance name</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" 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">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.instanceNameInput.$error.required && form.isntanceCreateForm.submitted'>
             Field requried!
@@ -57,7 +57,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" 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">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.displayLabel.$error.required && form.isntanceCreateForm.submitted'>
             Field requried!
@@ -70,7 +70,7 @@
     </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 showAdvanced-btn" ng-click="isAdvancedClosed = !isAdvancedClosed">Advanced</button>
         </div>
     </div>
     <div collapse="isAdvancedClosed">
@@ -78,7 +78,7 @@
         <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' class="visibilityCheckbox"> Visible
             </label>
           </div>
         </div>
@@ -111,7 +111,7 @@
         ng-class="{'has-error' : (form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted)}" >
         <label for="" class="col-sm-3 control-label">{{parameter.description}}</label>
         <div class="col-sm-9">
-          <input type="text" class="form-control"  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">
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted'>
             Field requried!
           </div>
@@ -124,8 +124,8 @@
   </div>
   
   <div class="col-sm-12 ">
-    <button class="btn btn-primary pull-right left-margin" ng-click="save()" type="submit">Save</button>
-    <a href="#/views/" class="btn btn-default pull-right">Cancel</a>
+    <button class="btn btn-primary pull-right left-margin save-button" ng-click="save()" type="submit">Save</button>
+    <a href="#/views/" class="btn btn-default pull-right cancel-button">Cancel</a>
   </div>
     
 </form>

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"> <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-cog"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">
@@ -41,21 +41,21 @@
         </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>
+          <div class="col-sm-10"><input type="text" class="form-control instancename-input" placeholder="Display Name" 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" ng-class="instancevisibility-input"> Visible
               </label>
             </div>
           </div>
         </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" ng-click="saveSettings()">Save</button>
-            <button class="btn btn-default pull-right" ng-click="cancelSettings()">Cancel</button>
+            <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>
           </div>
         </div>
       </fieldset>
@@ -67,7 +67,7 @@
   <div class="panel-heading clearfix">
     <h3 class="panel-title pull-left">Permissions</h3>
     <div class="pull-right" >
-      <a ng-hide="isPermissionsEmpty" href 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-cog"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">
@@ -80,7 +80,7 @@
       <div class="form-group" ng-repeat="permission in permissions">
         <label class="col-sm-2 control-label">{{permission.PermissionInfo.permission_name}}</label>
         <div class="col-sm-5" ng-switch="editPermissionDisabled">
-          <textarea name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].USER" ng-switch-when="false"></textarea>
+          <textarea name="" id="" cols="30" rows="4" class="form-control permission-textarea-user" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].USER" ng-switch-when="false"></textarea>
           <div class="well" ng-switch-when="true">
             <span ng-repeat="user in permission.USER">
               <link-to route="users.show" id="{{user}}">{{user}}</link-to>
@@ -91,7 +91,7 @@
           </div>
         </div>
         <div class="col-sm-5" ng-switch="editPermissionDisabled">
-          <textarea name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].GROUP" ng-switch-when="false"></textarea>
+          <textarea name="" id="" cols="30" rows="4" class="form-control permission-textarea-group" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].GROUP" ng-switch-when="false"></textarea>
           <div class="well" ng-switch-when="true">
             <span ng-repeat="group in permission.GROUP">
               <link-to route="groups.edit" id="{{group}}" >{{group}}</link-to>
@@ -105,8 +105,8 @@
       
       <div class="form-group" ng-hide="editPermissionDisabled">
         <div class="col-sm-offset-2 col-sm-10">
-          <button class="btn btn-primary pull-right left-margin" ng-click="savePermissions()">Save</button>
-          <button class="btn btn-default pull-right" ng-click="cancelPermissions()">Cancel</button>
+          <button class="btn btn-primary pull-right left-margin permissions-save" ng-click="savePermissions()">Save</button>
+          <button class="btn btn-default pull-right permissions-cancel" ng-click="cancelPermissions()">Cancel</button>
         </div>
       </div>
     </form>
@@ -120,7 +120,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"> <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-cog"></span> Edit</a>
     </div>
   </div>
   <div class="panel-body">
@@ -128,12 +128,12 @@
       <fieldset ng-disabled="editConfigurationDisabled">
         <div class="form-group" ng-repeat="(propertyName, propertyValue) in configuration">
           <label for="" class="control-label col-sm-3">{{propertyName}}</label>
-          <div class="col-sm-9"><input type="text" class="form-control" ng-model="configuration[propertyName]"></div>
+          <div class="col-sm-9"><input type="text" class="form-control propertie-input" ng-model="configuration[propertyName]"></div>
         </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" ng-click="saveConfiguration()">Save</button>
-            <button class="btn btn-default pull-right" ng-click="cancelConfiguration()">Cancel</button>
+            <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>
           </div>
         </div>
       </fieldset>

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

@@ -22,8 +22,9 @@
       <li class="active">Views</li>
     </ol>
     <div class="pull-right col-sm-4">
-      <div class="input-group">
-        <input type="text" class="form-control" placeholder="Search" ng-model="viewsFilter" ng-change="getFilteredViews()">
+      <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>
         <span class="input-group-addon">
           <span class="glyphicon glyphicon-search"></span>
         </span>
@@ -56,7 +57,7 @@
             <td class="col-sm-3"></td>
             <td class="col-sm-3">{{instance.ViewInstanceInfo.version}}</td>
             <td class="col-sm-3">
-              <a href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/edit" class="">{{instance.ViewInstanceInfo.label}}</a>
+              <a href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/edit" class="instance-link">{{instance.ViewInstanceInfo.label}}</a>
             </td>
             <td class="col-sm-3">
             </td>
@@ -67,7 +68,7 @@
             <td class="col-sm-3"></td>
             <td class="col-sm-3"></td>
             <td class="col-sm-3">
-              <a class="btn btn-default" href="#/views/{{view.view_name}}/versions/{{view.versionsList[view.versionsList.length-1].ViewVersionInfo.version}}/new"><span class="glyphicon glyphicon-plus" ></span> Create Instance</a>
+              <a class="btn btn-default createisntance-btn" href="#/views/{{view.view_name}}/versions/{{view.versionsList[view.versionsList.length-1].ViewVersionInfo.version}}/new"><span class="glyphicon glyphicon-plus" ></span> Create Instance</a>
             </td>
             <td class="col-sm-3">
             </td>

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

@@ -35,7 +35,7 @@
     <div class="form-group" ng-repeat="permission in permissions">
       <label class="col-sm-2 control-label">{{permission.PermissionInfo.permission_name}}</label>
       <div class="col-sm-5" ng-switch="isEditMode">
-        <textarea ng-switch-when="true" name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].USER"></textarea>
+        <textarea ng-switch-when="true" name="" id="" cols="30" rows="4" class="form-control permission-user-input" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].USER"></textarea>
         <div class="well" ng-switch-default>
           <span ng-repeat="user in permission.USER">
             <link-to route="users.show" id="{{user}}" >{{user}}</link-to>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="col-sm-5" ng-switch="isEditMode">
-        <textarea ng-switch-when="true" name="" id="" cols="30" rows="4" class="form-control" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].GROUP"></textarea>
+        <textarea ng-switch-when="true" name="" id="" cols="30" rows="4" class="form-control permission-group-input" ng-model="permissionsEdit[permission.PermissionInfo.permission_name].GROUP"></textarea>
         <div class="well" ng-switch-default>
           <span ng-repeat="group in permission.GROUP">
             <link-to route="groups.edit" id="{{group}}">{{group}}</link-to>
@@ -59,8 +59,8 @@
     </div>
     <div class="form-group" ng-show="isEditMode">
       <div class="col-sm-offset-2 col-sm-10">
-        <button class="btn btn-default pull-right left-margin" ng-click="cancel()">Cancel</button>
-        <button class="btn btn-primary pull-right" ng-click="save()">Save</button>
+        <button class="btn btn-default pull-right left-margin permissions-cancel" ng-click="cancel()">Cancel</button>
+        <button class="btn btn-primary pull-right permission-save" ng-click="save()">Save</button>
       </div>
     </div>
 </div>

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

@@ -17,22 +17,26 @@
 -->
 <ol class="breadcrumb">
   <li><a href="#/groups">Groups</a></li>
-  <li class="active">Create local group</li>
+  <li class="active">Create Local Group</li>
 </ol>
 <hr>
 <form class="form-horizontal" role="form" novalidate name="form">
-  <div class="form-group" ng-class="{'has-error' : form.user_name.$error.required && form.submitted}">
+  <div class="form-group" ng-class="{'has-error' : (form.user_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" name="group_name" placeholder="Group name" ng-model="group.group_name" required>
+      <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]+)$/">
       <div class="alert alert-danger top-margin" ng-show="form.group_name.$error.required && form.submitted">
         Required
       </div>
+      <div class="alert alert-danger top-margin" ng-show="form.group_name.$error.pattern && form.submitted">
+        Must contain only simple characters.
+      </div>
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-primary" ng-click="createGroup()">Create</button>
+      <button class="btn btn-primary groupcreate-btn pull-right left-margin" ng-click="createGroup()">Save</button>
+      <a href="#/groups/" class="btn btn-default pull-right cancel-button">Cancel</a>
     </div>
   </div>
       

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

@@ -22,17 +22,11 @@
     <li class="active">{{group.group_name}}</li>
   </ol>
   <div class="pull-right top-margin-4">
-    <button class="btn btn-danger" ng-click="deleteGroup(group)">Delete Group</button>
+    <button class="btn btn-danger deletegroup-btn" ng-click="deleteGroup(group)">Delete Group</button>
   </div>
 </div>
 <hr>
 <form class="form-horizontal group-edit" role="form" novalidate name="form">
-  <div class="form-group" ng-class="{'has-error' : form.user_name.$error.required && 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" disabled="disabled" name="group_name" placeholder="User name" ng-model="group.group_name" required>
-    </div>
-  </div>
   <div class="form-group">
     <label for="" class="col-sm-2 control-label">Type</label>
     <div class="col-sm-10">
@@ -55,10 +49,7 @@
         <div ng-switch-when="true">
           <textarea class="form-control bottom-margin" id=""  ng-model="group.editingUsers"></textarea>
         </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>

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

@@ -21,7 +21,7 @@
       <li class="active">Groups</li>
     </ol>
     <div class="pull-right top-margin-4">
-      <link-to route="groups.create" class="btn btn-primary"><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> Create Local Group</link-to>
     </div>
   </div>
   <hr>
@@ -30,19 +30,22 @@
       <tr>
         <th>
           <label for="">Group name</label>
-          
         </th>
         <th>
           <label for="">Type</label>
           
         </th>
         <th>Members</th>
-        <th></th>
       </tr>
       <tr>
-        <th><input type="text" class="form-control" ng-model="currentNameFilter"></th>
         <th>
-          <select class="form-control"
+          <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>
+          </div>
+        </th>
+        <th>
+          <select class="form-control typefilter"
             ng-model="currentTypeFilter"
             ng-options="item for item in typeFilterOptions">
           </select>
@@ -53,11 +56,14 @@
     <tbody>
       <tr ng-repeat="group in groups | filter:typeFilter | filter:currentNameFilter">
         <td>
-          <link-to route="groups.edit" id="{{group.group_name}}">{{group.group_name}}</link-to>
+          <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>
       </tr>
     </tbody>
   </table>
+  <div class="alert alert-info" ng-show="!groups.length">
+    No groups to display.
+  </div>
 </div>

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

@@ -15,54 +15,58 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div class="panel panel-default">
-  <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> Clusters</div>
-  <div class="panel-body">
-    <div ng-show="cluster">
-      <h5>{{cluster.Clusters.cluster_name}}</h5>
-      <ul class="nav nav-pills nav-stacked">
-        <li ng-class="{active: isActive('clusters.manageAccess')}">
-          <a href="#/clusters/{{cluster.Clusters.cluster_name}}/manageAccess">Permissions</a>
-        </li>
-        <li><a href="/#/main/dashboard">Go to Dashboard</a></li>
-      </ul>
-    </div>
-      
-    <div ng-hide="cluster">
-      <a href="/" class="btn btn-primary btn-block">
-        <span class="glyphicon glyphicon-plus"></span>
-        Create a Cluster
-      </a>
+<div class="left-navbar">
+  <div class="panel panel-default">
+    <div class="panel-heading"><span class="glyphicon glyphicon-cloud"></span> Clusters</div>
+    <div class="panel-body">
+      <div ng-show="cluster">
+        <h5>{{cluster.Clusters.cluster_name}}</h5>
+        <ul class="nav nav-pills nav-stacked">
+          <li ng-class="{active: isActive('clusters.manageAccess')}">
+            <a href="#/clusters/{{cluster.Clusters.cluster_name}}/manageAccess" class="permissions">Permissions</a>
+          </li>
+          <li><a href="/#/main/dashboard" class="gotodashboard">Go to Dashboard</a></li>
+        </ul>
+      </div>
+        
+      <div ng-hide="cluster">
+        <a href="/" class="btn btn-primary btn-block createcluster-btn">
+          <span class="glyphicon glyphicon-plus"></span>
+          Create a Cluster
+        </a>
+      </div>
+        
     </div>
-      
   </div>
-</div>
 
-<div class="panel panel-default">
-  <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Views</div>
-  <div class="panel-body">
-    <ul class="nav nav-pills nav-stacked">
-      <li ng-class="{active: isActive('views.list')}"><link-to route="views.list">Views</link-to></li>
-    </ul>
+  <div class="panel panel-default">
+    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Views</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>
+      </ul>
+    </div>
   </div>
-</div>
 
-<div class="panel panel-default">
-  <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> Users + Groups</div>
-  <div class="panel-body">
-    <ul class="nav nav-pills nav-stacked">
-      <li ng-class="{active: isActive('users.list')}"><link-to route="users.list">Users</link-to></li>
-      <li ng-class="{active: isActive('groups.list')}"><link-to route="groups.list">Groups</link-to></li>
-    </ul>
-    <hr>
-    <div ng-switch="isLDAPConfigured">
-      <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-primary btn-block syncldapbtn disabled" popover="LDAP is not configured. To configure LDAP, run ambari-server setup-ldap from the command line." popover-trigger="mouseenter">
-        <span class="glyphicon glyphicon-transfer pulldown2"></span> Sync LDAP
-      </a>
+  <div class="panel panel-default">
+    <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> User + Group Management</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>
+      </ul>
+      <hr>
+      <div ng-switch="isLDAPConfigured">
+        <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">
+          <span class="glyphicon glyphicon-transfer pulldown2"></span> Sync LDAP
+        </a>
+      </div>
+        
     </div>
-      
   </div>
+
 </div>
+  

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

@@ -17,14 +17,14 @@
 -->
 <ol class="breadcrumb">
   <li><a href="#/users">Users</a></li>
-  <li class="active">Create local user</li>
+  <li class="active">Create Local User</li>
 </ol>
 <hr>
-<form class="form-horizontal" role="form" novalidate name="form">
+<form class="form-horizontal create-user-form" role="form" novalidate name="form">
   <div class="form-group" ng-class="{'has-error' : form.user_name.$error.required && form.submitted}">
-    <label for="username" class="col-sm-2 control-label">User name</label>
+    <label for="username" class="col-sm-2 control-label">Username</label>
     <div class="col-sm-10">
-      <input type="text" id="username" class="form-control" name="user_name" placeholder="User name" ng-model="user.user_name" required>
+      <input type="text" id="username" class="form-control username-input" name="user_name" placeholder="User name" ng-model="user.user_name" required>
       <div class="alert alert-danger top-margin" ng-show="form.user_name.$error.required && form.submitted">
         Required
       </div>
@@ -39,14 +39,14 @@
   <div class="form-group">
     <label for="" class="col-sm-2 control-label">Status</label>
     <div class="col-sm-10">
-      <div class="btn btn-success">Active</div>
+      <toggle-switch 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" 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" name="password" placeholder="Password" required ng-model="user.password">
-      <input type="password" class="form-control bottom-margin" name="confirmPassword" placeholder="Password confirmation" required ng-model="user.passwordConfirmation"
+      <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 userpasswordconfirm" name="confirmPassword" placeholder="Password confirmation" required ng-model="user.passwordConfirmation"
         password-verify="user.password">
 
       <div class="alert alert-danger" ng-show='form.confirmPassword.$error.passwordVerify'>
@@ -60,7 +60,8 @@
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-primary" ng-click="createUser()">Create</button>
+      <button class="btn btn-primary pull-right left-margin saveuser" ng-click="createUser()">Save</button>
+      <a class="btn btn-default pull-right cancel" href="#/users">Cancel</a>
     </div>
   </div>
       

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

@@ -22,7 +22,7 @@
       <li class="active">Users</li>
     </ol>
     <div class="pull-right top-margin-4">
-      <link-to route="users.create" class="btn btn-primary"><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> Create Local User</link-to>
     </div>
   </div>
   <hr>
@@ -30,12 +30,15 @@
     <thead>
       <tr>
         <th>
-          <label for="">Username</label>
-          <input type="text" class="form-control" ng-model="currentNameFilter">
+          <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>
+          </div>
         </th>
         <th>
           <label for="">Type</label>
-          <select class="form-control"
+          <select class="form-control typefilter"
             ng-model="currentTypeFilter"
             ng-options="item for item in typeFilterOptions">
           </select>
@@ -43,7 +46,7 @@
         </th>
         <th>
           <label for="">Status</label>
-          <select class="form-control" 
+          <select class="form-control statusfilter" 
             ng-model="currentActiveFilter"
             ng-options="item for item in actvieFilterOptions">
             

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

@@ -23,7 +23,7 @@
       <li class="active">{{user.user_name}}</li>
     </ol>
     <div class="pull-right top-margin-4">
-      <button class="btn btn-danger" ng-click="deleteUser()">Delete User</button>
+      <button class="btn deleteuser-btn" ng-class="{'btn-danger': !isCurrentUser, 'btn-default' : isCurrentUser}" ng-click="deleteUser()" ng-disabled="isCurrentUser">Delete User</button>
     </div>
   </div>
   <hr>
@@ -37,13 +37,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()" model="user.active" on-label="Active" off-label="Inactive" class="switch-primary" data-off-color="danger"></toggle-switch>
+        <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>
       </div>
     </div>
     <div class="form-group">
       <label for="password" class="col-sm-2 control-label">Password</label>
       <div class="col-sm-10">
-        <a href ng-click="openChangePwdDialog()" class="btn btn-default">Change Password</a>
+        <a href ng-click="openChangePwdDialog()" class="btn btn-default changepassword">Change Password</a>
       </div>
     </div>
     <div class="form-group">
@@ -56,13 +56,14 @@
             </div>
           </div>
           <div class="col-sm-2">
-            <a href ng-click="enableGroupEditing()" ng-hide="user.ldap_user"><span class="glyphicon glyphicon-cog"></span> Edit</a>
+            <a href ng-click="enableGroupEditing()" ng-hide="user.ldap_user"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
           </div>
         </div>
         <div class="row" ng-show="isGroupEditing">
           <div class="col-sm-12">
-            <textarea name="groups" id="" cols="30" rows="5" class="form-control bottom-margin" ng-model="editingGroupsList"></textarea>
-            <a href class="btn btn-primary pull-right" ng-click="updateGroups()">Update</a>
+            <textarea name="groups" id="" cols="30" rows="5" class="form-control bottom-margin usergroups" ng-model="editingGroupsList"></textarea>
+            <a href class="btn btn-primary pull-right left-margin updategroups" ng-click="updateGroups()">Save</a>
+            <button class="btn btn-default pull-right cancel-groups-update" ng-click="cancelUpdate()">Cancel</button>
           </div>
             
         </div>

ambari-admin/src/main/resources/ui/admin-web/gulpfile.js

@@ -114,17 +114,6 @@ gulp.task('serve', ['connect'], function () {
     require('opn')('http://localhost:9000');
 });
 
-// inject bower components
-gulp.task('wiredep', function () {
-    var wiredep = require('wiredep').stream;
-
-    gulp.src('app/*.html')
-        .pipe(wiredep({
-            directory: 'app/bower_components'
-        }))
-        .pipe(gulp.dest('app'));
-});
-
 gulp.task('watch', ['connect', 'serve'], function () {
     var server = $.livereload();
 
@@ -142,5 +131,4 @@ gulp.task('watch', ['connect', 'serve'], function () {
     gulp.watch('app/styles/**/*.css', ['styles']);
     gulp.watch('app/scripts/**/*.js', ['scripts']);
     gulp.watch('app/images/**/*', ['images']);
-    gulp.watch('bower.json', ['wiredep']);
 });

ambari-admin/src/main/resources/ui/admin-web/package.json

@@ -1,7 +1,8 @@
 {
   "name": "adminconsole",
   "version": "0.0.0",
-  "dependencies": {},
+  "dependencies": {
+  },
   "devDependencies": {
     "bower": "1.3.8",
     "connect": "^2.14.4",
@@ -24,7 +25,6 @@
     "gulp-useref": "^0.4.2",
     "jshint-stylish": "^0.2.0",
     "opn": "^0.1.1",
-    "wiredep": "^1.4.3",
     "gulp-plumber": "*"
   },
   "engines": {