AMBARI-6855. Admin View: various UI/UX improvements. (yusaku)

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

@@ -135,6 +135,7 @@
     <script src="scripts/services/PermissionsSaver.js"></script>
     <script src="scripts/services/ConfirmationModal.js"></script>
     <script src="scripts/services/Auth.js"></script>
+    <script src="scripts/services/GetDifference.js"></script>
     <!-- endbuild -->
 </body>
 </html>

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

@@ -44,7 +44,7 @@ angular.module('ambariAdminConsole')
 
   $scope.syncLDAP = function() {
     ConfirmationModal.show('Sync LDAP', 'Are you sure you want to sync LDAP?').then(function() {
-      LDAP.sync($scope.ldapData.groups, $scope.ldapData.users).then(function() {
+      LDAP.sync($scope.ldapData['LDAP'].groups, $scope.ldapData['LDAP'].users).then(function() {
         uiAlert.success('LDAP synced successful');
       }).catch(function(data) {
         uiAlert.danger(data.data.status, data.data.message);

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

@@ -57,7 +57,7 @@ angular.module('ambariAdminConsole')
 
   $scope.permissions = [];
   
-  reloadViewInfo();  
+  reloadViewInfo();
   reloadViewPrivilegies();
 
   $scope.editSettingsDisabled = true;
@@ -129,22 +129,6 @@ angular.module('ambariAdminConsole')
     $scope.editPermissionDisabled = true;
   };
 
-  $scope.removePermission = function(permissionName, principalType, principalName) {
-    View.deletePrivilege({
-      view_name: $routeParams.viewId,
-      version: $routeParams.version,
-      instance_name: $routeParams.instanceId,
-      permissionName: permissionName,
-      principalType: principalType,
-      principalName: principalName
-    })
-    .then(reloadViewPrivilegies)
-    .catch(function(data) {
-      reloadViewPrivilegies();
-      uiAlert.danger(data.data.status, data.data.message);
-    });
-  };
-
   $scope.deleteInstance = function(instance) {
     ConfirmationModal.show('Delete View Instance', 'Are you sure you want to delete View Instance '+ instance.ViewInstanceInfo.label +'?').then(function() {
       View.deleteInstance(instance.ViewInstanceInfo.view_name, instance.ViewInstanceInfo.version, instance.ViewInstanceInfo.instance_name)

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

@@ -60,12 +60,4 @@ angular.module('ambariAdminConsole')
     });
     $scope.isEditMode = false;
   };
-
-  $scope.removePermission = function(permissionName, principalType, principalName) {
-    Cluster.deletePrivilege($routeParams.id, permissionName, principalType, principalName)
-    .then(reloadClusterData)
-    .catch(function(data) {
-      uiAlert.danger(data.data.status, data.data.message);
-    });
-  };
 }]);

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

@@ -23,6 +23,7 @@ angular.module('ambariAdminConsole')
   $scope.group = new Group($routeParams.id);
   $scope.group.editingUsers = [];
   $scope.groupMembers = [];
+  $scope.dataLoaded = false;
 
 
   function loadMembers(){
@@ -35,13 +36,6 @@ angular.module('ambariAdminConsole')
     $scope.group.ldap_group = isLDAP;
     loadMembers();
   });
-    
-  
-  $scope.removeMember = function(member) {
-    $scope.group.removeMember(member).finally(function() {
-      loadMembers();
-    });
-  };
 
   $scope.toggleEditMode = function() {
     $scope.editMode = !$scope.editMode;
@@ -69,5 +63,32 @@ angular.module('ambariAdminConsole')
     });
   };
 
+  // Load privilegies
+  Group.getPrivilegies($routeParams.id).then(function(data) {
+    var privilegies = {
+      clusters: {},
+      views: {}
+    };
+    angular.forEach(data.data.items, function(privilegie) {
+      privilegie = privilegie.PrivilegeInfo;
+      if(privilegie.type === 'CLUSTER'){
+        // This is cluster
+        privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || '';
+        privilegies.clusters[privilegie.cluster_name] += privilegies.clusters[privilegie.cluster_name] ? ', ' + privilegie.permission_name : privilegie.permission_name;
+      } else if ( privilegie.type === 'VIEW'){
+        privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:''};
+        privilegies.views[privilegie.instance_name].version = privilegie.version;
+        privilegies.views[privilegie.instance_name].view_name = privilegie.view_name;
+        privilegies.views[privilegie.instance_name].privileges += privilegies.views[privilegie.instance_name].privileges ? ', ' + privilegie.permission_name : privilegie.permission_name;
+
+      }
+    });
+
+    $scope.privileges = data.data.items.length ? privilegies : null;
+    $scope.dataLoaded = true;
+  }).catch(function(data) {
+    uiAlert.danger(data.data.status, data.data.message);
+  });
+
 
 }]);

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

@@ -21,6 +21,31 @@ angular.module('ambariAdminConsole')
 .controller('GroupsListCtrl',['$scope', 'Group', '$modal', 'ConfirmationModal', function($scope, Group, $modal, ConfirmationModal) {
   $scope.groups = [];
 
+  $scope.groupsPerPage = 10;
+  $scope.currentPage = 1;
+  $scope.totalGroups = 1;
+  $scope.search = '';
+  $scope.maxVisiblePages=20;
+
+  $scope.pageChanged = function() {
+    loadGroups();
+  };
+  $scope.usersPerPageChanges = function() {
+    loadGroups();
+  };
+
+  function loadGroups(){
+    Group.all($scope.currentPage, $scope.groupsPerPage, $scope.search).then(function(groups) {
+      $scope.totalGroups = groups.itemTotal;
+      $scope.groups = groups;
+    })
+    .catch(function(data) {
+      console.error('Get groups list error');
+    });
+  }
+
+  loadGroups();
+
   $scope.typeFilterOptions = ['All', 'Local', 'LDAP'];
   $scope.currentTypeFilter = 'All';
   $scope.typeFilter = function(group) {
@@ -34,10 +59,5 @@ angular.module('ambariAdminConsole')
     }
   };
 
-  Group.all().then(function(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

@@ -19,7 +19,9 @@
 
 angular.module('ambariAdminConsole')
 .controller('UsersCreateCtrl',['$scope', '$routeParams', 'User', '$location', 'uiAlert', function($scope, $routeParams, User, $location, uiAlert) {
-  $scope.user = {};
+  $scope.user = {
+    active: true
+  };
 
   $scope.createUser = function() {
     $scope.form.submitted = true;
@@ -27,7 +29,8 @@ angular.module('ambariAdminConsole')
       User.create({
         'Users/user_name': $scope.user.user_name,
         'Users/password': $scope.user.password,
-        'Users/active': !!$scope.user.active
+        'Users/active': !!$scope.user.active,
+        'Users/admin': !!$scope.user.admin
       }).then(function() {
         $location.path('/users');
       }).catch(function(data) {;

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

@@ -20,9 +20,28 @@
 angular.module('ambariAdminConsole')
 .controller('UsersListCtrl',['$scope', 'User', '$modal', function($scope, User, $modal) {
   $scope.users = [];
-  User.list().then(function(data) {
-    $scope.users = data.items;
-  });
+  $scope.usersPerPage = 10;
+  $scope.currentPage = 1;
+  $scope.totalUsers = 1;
+  $scope.search = '';
+  $scope.maxVisiblePages=20;
+
+  $scope.pageChanged = function() {
+    loadUsers();
+  };
+  $scope.usersPerPageChanges = function() {
+    loadUsers();
+  };
+
+  function loadUsers(){
+    User.list($scope.currentPage, $scope.usersPerPage, $scope.search).then(function(data) {
+      $scope.totalUsers = data.itemTotal;
+      $scope.users = data.items;
+    });
+  }
+
+  loadUsers();
+
 
   $scope.actvieFilterOptions = ['All', 'Active', 'Inactive'];
   $scope.currentActiveFilter = 'All';

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

@@ -18,18 +18,46 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.controller('UsersShowCtrl', ['$scope', '$routeParams', 'User', '$modal', '$location', 'ConfirmationModal', 'uiAlert', 'Auth', function($scope, $routeParams, User, $modal, $location, ConfirmationModal, uiAlert, Auth) {
+.controller('UsersShowCtrl', ['$scope', '$routeParams', 'User', '$modal', '$location', 'ConfirmationModal', 'uiAlert', 'Auth', 'getDifference', 'Group', '$q', function($scope, $routeParams, User, $modal, $location, ConfirmationModal, uiAlert, Auth, getDifference, Group, $q) {
+
+  function loadUserInfo(){
+    User.get($routeParams.id).then(function(data) {
+      $scope.user = data.Users;
+      $scope.isCurrentUser = $scope.user.user_name === Auth.getCurrentUser();
+    });
+  }
+
+  loadUserInfo();  
   $scope.user = {};
   $scope.isCurrentUser = true;
+  $scope.dataLoaded = false;
 
   $scope.isGroupEditing = false;
   $scope.enableGroupEditing = function() {
     $scope.isGroupEditing = true;
-    $scope.editingGroupsList = $scope.user.user_groups.join();
+    $scope.editingGroupsList = angular.copy($scope.user.groups);
   };
 
   $scope.updateGroups = function() {
-    $scope.user.user_groups = $scope.editingGroupsList.split(',');
+    var groups = $scope.editingGroupsList.toString().split(',').filter(function(item) {return item.trim();}).map(function(item) {return item.trim()});
+    var diff = getDifference($scope.user.groups, groups);
+    var promises = [];
+    // Remove user from groups
+    angular.forEach(diff.del, function(groupName) {
+      promises.push(Group.removeMemberFromGroup(groupName, $scope.user.user_name).catch(function(data) {
+        uiAlert.danger(data.data.status, data.data.message);
+      }));
+    });
+    // Add user to groups
+    angular.forEach(diff.add, function(groupName) {
+      promises.push(Group.addMemberToGroup(groupName, $scope.user.user_name).catch(function(data) {
+        uiAlert.danger(data.data.status, data.data.message);
+      }));
+    });
+    $q.all(promises).then(function() {
+      loadUserInfo();
+    });
+    // $scope.user.user_groups = $scope.editingGroupsList.split(',');
     $scope.isGroupEditing = false;
   };
 
@@ -76,12 +104,10 @@ angular.module('ambariAdminConsole')
 
   $scope.toggleUserActive = function() {
     User.setActive($scope.user.user_name, !$scope.user.active);
-  };
-
-  User.get($routeParams.id).then(function(data) {
-    $scope.user = data.Users;
-    $scope.isCurrentUser = $scope.user.user_name === Auth.getCurrentUser();
-  });
+  };    
+  $scope.toggleUserAdmin = function() {
+    User.setAdmin($scope.user.user_name, !$scope.user.admin);
+  };    
 
   $scope.deleteUser = function() {
     ConfirmationModal.show('Delete User', 'Are you sure you want to delete user "'+ $scope.user.user_name +'"?').then(function() {
@@ -90,4 +116,32 @@ angular.module('ambariAdminConsole')
       });
     });
   };
+
+  // Load privilegies
+  User.getPrivilegies($routeParams.id).then(function(data) {
+    var privilegies = {
+      clusters: {},
+      views: {}
+    };
+    angular.forEach(data.data.items, function(privilegie) {
+      privilegie = privilegie.PrivilegeInfo;
+      if(privilegie.type === 'CLUSTER'){
+        // This is cluster
+        privilegies.clusters[privilegie.cluster_name] = privilegies.clusters[privilegie.cluster_name] || '';
+        privilegies.clusters[privilegie.cluster_name] += privilegies.clusters[privilegie.cluster_name] ? ', ' + privilegie.permission_name : privilegie.permission_name;
+      } else if ( privilegie.type === 'VIEW'){
+        privilegies.views[privilegie.instance_name] = privilegies.views[privilegie.instance_name] || { privileges:''};
+        privilegies.views[privilegie.instance_name].version = privilegie.version;
+        privilegies.views[privilegie.instance_name].view_name = privilegie.view_name;
+        privilegies.views[privilegie.instance_name].privileges += privilegies.views[privilegie.instance_name].privileges ? ', ' + privilegie.permission_name : privilegie.permission_name;
+
+      }
+    });
+
+    $scope.privileges = data.data.items.length ? privilegies : null;
+    $scope.dataLoaded = true;
+
+  }).catch(function(data) {
+    uiAlert.danger(data.data.status, data.data.message);
+  });
 }]);

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

@@ -66,7 +66,7 @@ angular.module('ambariAdminConsole')
   views: {
     list: {
       url: '/views',
-      templateUrl: 'views/ambariViews/list.html',
+      templateUrl: 'views/ambariViews/listTable.html',
       controller: 'ViewsListCtrl',
     },
     edit: {

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

@@ -89,7 +89,7 @@ angular.module('ambariAdminConsole')
     updatePrivileges: function(params, privileges) {
       return $http({
         method: 'PUT',
-        url: Settings.baseUrl + '/views/' + params.view_name +'/versions/'+params.version+'/instances/'+params.instance_name+'/privileges',
+        url: Settings.baseUrl + '/clusters/' + params.clusterId + '/privileges',
         data: privileges
       });
     },

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

@@ -0,0 +1,40 @@
+/**
+ * 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')
+.factory('getDifference', [function() {
+	return function(oldArr, newArr) {
+    var result = {
+      add: [],
+      del: []
+    };
+    angular.forEach(newArr, function(item) {
+      var itemIndex = oldArr.indexOf(item);
+      if(itemIndex >= 0){
+        oldArr.splice(itemIndex, 1);
+      } else {
+        result.add.push(item);
+      }
+    });
+
+    result.del = oldArr;
+
+    return result;
+  };
+}]);

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

@@ -139,14 +139,24 @@ angular.module('ambariAdminConsole')
     return $http.delete(Settings.baseUrl + '/groups/'+this.group_name+'/members/'+memberId);
   };
 
-  Group.all = function() {
+  Group.removeMemberFromGroup = function(groupName, memberName) {
+    return $http.delete(Settings.baseUrl + '/groups/'+groupName + '/members/'+memberName);
+  };
+
+  Group.addMemberToGroup = function(groupName, memberName) {
+    return $http.post(Settings.baseUrl + '/groups/' + groupName + '/members/'+memberName);
+  };
+
+  Group.all = function(currentPage, groupsPerPage) {
     var deferred = $q.defer();
 
     $http({
       method: 'GET',
       url: Settings.baseUrl + '/groups',
       params: {
-        'fields': 'Groups/ldap_group'
+        'fields': 'Groups/ldap_group',
+        page_size: groupsPerPage,
+        from: (currentPage-1)*groupsPerPage
       }
     })
     .success(function(data) {
@@ -156,6 +166,7 @@ angular.module('ambariAdminConsole')
           groups.push(new Group(item));
         });
       }
+      groups.itemTotal = data.itemTotal;
       deferred.resolve(groups);
     })
     .error(function(data) {
@@ -165,5 +176,15 @@ angular.module('ambariAdminConsole')
     return deferred.promise;
   };
 
+  Group.getPrivilegies = function(groupId) {
+    return $http.get(Settings.baseUrl + '/privileges', {
+        params:{
+          'PrivilegeInfo/principal_type': 'GROUP',
+          'PrivilegeInfo/principal_name': groupId,
+          'fields': '*'
+        }
+      });
+  };
+
   return Group;
 }]);

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

@@ -18,27 +18,9 @@
 'use strict';
 
 angular.module('ambariAdminConsole')
-.factory('PermissionSaver', ['Cluster', 'View', '$q', function(Cluster, View, $q) {
-  var getDifference = function(oldArr, newArr) {
-    var result = {
-      add: [],
-      del: []
-    };
-    angular.forEach(newArr, function(item) {
-      var itemIndex = oldArr.indexOf(item);
-      if(itemIndex >= 0){
-        oldArr.splice(itemIndex, 1);
-      } else {
-        result.add.push(item);
-      }
-    });
-
-    result.del = oldArr;
+.factory('PermissionSaver', ['Cluster', 'View', '$q', 'getDifference', function(Cluster, View, $q, getDifference) {
 
-    return result;
-  };
   function savePermissionsFor(resource, permissions, params){
-    var deferred = $q.defer();
     var arr = [];
 
     angular.forEach(permissions, function(permission) {
@@ -67,9 +49,7 @@ angular.module('ambariAdminConsole')
       }));
     });
 
-    resource.updatePrivileges(params, arr);
-
-    return deferred.promise;
+    return resource.updatePrivileges(params, arr);
   }
   
   function savePermissionsForOld(resource, oldPermissions, newPermissions, params){

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

@@ -23,6 +23,7 @@ angular.module('ambariAdminConsole')
     var extractedData;
     if(operation === 'getList'){
       extractedData = data.items;
+      extractedData.itemTotal = data.itemTotal;
     } else {
       extractedData = data;
     }
@@ -33,9 +34,11 @@ angular.module('ambariAdminConsole')
   var Users = Restangular.all('users');
 
   return {
-    list: function(cb) {
+    list: function(currentPage, usersPerPage) {
       return Users.customGET('', {
-        fields: 'Users/ldap_user,Users/active'
+        fields: '*',
+        page_size: usersPerPage,
+        from: (currentPage-1)*usersPerPage
       });
     },
     get: function(userId) {
@@ -47,6 +50,9 @@ angular.module('ambariAdminConsole')
     setActive: function(userId, isActive) {
       return Restangular.one('users', userId).customPUT({'Users/active':isActive});
     },
+    setAdmin: function(userId, isAdmin) {
+      return Restangular.one('users', userId).customPUT({'Users/admin':isAdmin});
+    },
     setPassword: function(user, password, currentUserPassword) {
       return $http({
         method: 'PUT',
@@ -60,6 +66,15 @@ angular.module('ambariAdminConsole')
     },
     delete: function(userId) {
       return Restangular.one('users', userId).remove();
+    },
+    getPrivilegies : function(userId) {
+      return $http.get(Settings.baseUrl + '/privileges', {
+        params:{
+          'PrivilegeInfo/principal_type': 'USER',
+          'PrivilegeInfo/principal_name': userId,
+          'fields': '*'
+        }
+      });
     }
   };
 }]);

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

@@ -55,14 +55,24 @@ angular.module('ambariAdminConsole')
     self.view_name = item.ViewInfo.view_name;
     self.versions = '';
     self.instances = [];
+    var versions = {};
     angular.forEach(item.versions, function(version) {
-      self.versions += (self.versions ? ', ' : '') + version.ViewVersionInfo.version;
+      versions[version.ViewVersionInfo.version] = version.instances.length;
+      
       angular.forEach(version.instances, function(isntance) {
         isntance.label = version.ViewVersionInfo.label;
       })
+
       self.instances = self.instances.concat(version.instances);
     });
 
+    for(var ver in versions){
+      if(versions.hasOwnProperty(ver)){
+        self.versions += (self.versions ? ', ' : '') + ver +' ('+versions[ver]+')';
+      }
+    }
+
+    self.isOpened = !self.instances.length;
     self.versionsList = item.versions;
   }
 

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

@@ -29,15 +29,17 @@ angular.module('ambariAdminConsole')
       });
     },
     sync: function(groupsList, usersList) {
+      groupsList = Array.isArray(groupsList) ? groupsList : [];
+      usersList = Array.isArray(usersList) ? usersList : [];
       return $http({
-        method: 'POST',
+        method: 'PUT',
         url: Settings.baseUrl + '/controllers/ldap',
-        data:{
+        data:[{
           LDAP:{
             "synced_groups": groupsList.join(','),
             "synced_users": usersList.join(',')
           }
-        }
+        }]
       });
     },
     syncResource: function(resourceType, items) {

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

@@ -16,19 +16,77 @@
  * limitations under the License.
  */
 
+.paginator{
+  margin: 0;
+}
+.mainpage .panel-body{
+  padding: 20px;
+  height: 560px;
+}
+.mainpage h1{
+  font-size: 24px;
+  margin-top: 10px;
+}
 
-.views-list-pane .glyphicon.glyphicon-chevron-right{
+.views-list-table .panel{
+  border-radius: 0;
+  border: none;
+  margin-top: 0;
+}
+.views-list-table .panel-group .panel + .panel{
+  margin-top: 0;
+}
+.views-list-table .panel-group .panel .panel-heading{
+  border-radius: 0;
+  border-top: 1px solid #ddd;
+}
+.views-list-table .panel-group .panel .panel-heading{
+  background: #f9f9f9;
+}
+.views-list-table .panel-group .panel:nth-child(even) .panel-heading{
+  background: none;
+}
+.views-list-table .panel-group .panel .panel-heading .panel-title{
+  font-size: 14px;
+  font-weight: normal;
+  cursor: pointer;
+}
+.views-list-table .panel-group .panel .panel-body{
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.views-list-table .panel-group .panel .panel-body table tr:first-child td{
+  border-top: none;
+}
+.views-list-table .glyphicon.glyphicon-chevron-right{
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
 }
-.views-list-pane .glyphicon.glyphicon-chevron-right.opened{
+.views-list-table .glyphicon.glyphicon-chevron-right.opened{
   -webkit-transform: rotateZ(90deg);
   -ms-transform: rotateZ(90deg);
   -o-transform: rotateZ(90deg);
   transform: rotateZ(90deg);
 }
 
+.ats-switch{
+  border-color: #333;
+}
+.hide-soft{
+  display: none;
+}
+.visible{
+  display: block;
+}
+.not-required{
+  font-weight: normal;
+}
+.panel{
+  box-shadow: none;
+}
+
+
 .pulldown2{
   -webkit-transform: translateY(2px);
   -ms-transform: translateY(2px);

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

@@ -17,7 +17,7 @@
 -->
 <ol class="breadcrumb">
   <li><a href="#/views">Views</a></li>
-  <li class="active">Create {{view.ViewVersionInfo.view_name}} instance</li>
+  <li class="active">Create Instance</li>
 </ol>
 <hr>
 <form class="form-horizontal create-view-form" role="form" name="form.isntanceCreateForm" novalidate>
@@ -38,15 +38,15 @@
       <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-labe 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">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.instanceNameInput.$error.required && form.isntanceCreateForm.submitted'>
-            Field requried!
+            This field is required.
           </div>
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.instanceNameInput.$error.pattern && form.isntanceCreateForm.submitted'>
-            Must no contain special characters!
+            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.
@@ -55,25 +55,18 @@
       </div>
       <div class="form-group"
       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>
+        <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">
 
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.displayLabel.$error.required && form.isntanceCreateForm.submitted'>
-            Field requried!
+            This field is required.
           </div>
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm.displayLabel.$error.pattern && form.isntanceCreateForm.submitted'>
-            Must no contain special characters!
+            Must not contain any special characters or spaces.
           </div>
         </div>
       </div>
-    </div>
-    <div class="form-group">
-        <div class="col-sm-10 col-sm-offset-2">
-          <button class="btn btn-default showAdvanced-btn" ng-click="isAdvancedClosed = !isAdvancedClosed">Advanced</button>
-        </div>
-    </div>
-    <div collapse="isAdvancedClosed">
       <div class="form-group">
         <div class="col-sm-10 col-sm-offset-2">
           <div class="checkbox">
@@ -83,25 +76,8 @@
           </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>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" name="iconUrl" ng-model="instance.icon_path">
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="col-sm-10 col-sm-offset-2">
-          <label for="" class="control-label col-sm-2">Icon64</label>
-          <div class="col-sm-10">
-            <input type="text" class="form-control" name="icon64Url" ng-model="instance.icon64_path">
-          </div>
-        </div>
-      </div>
     </div>
   </div>
-
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">Properties</h3>
@@ -109,7 +85,7 @@
     <div class="panel-body">
       <div class="form-group" ng-repeat="parameter in instance.properties"
         ng-class="{'has-error' : (form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted)}" >
-        <label for="" class="col-sm-3 control-label">{{parameter.description}}</label>
+        <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">
           <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.isntanceCreateForm[parameter.name].$error.required && form.isntanceCreateForm.submitted'>

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

@@ -18,14 +18,14 @@
 <div class="clearfix">
   <ol class="breadcrumb pull-left">
     <li><a href="#/views">Views</a></li>
-    <li class="active">{{instance.ViewInstanceInfo.view_name}}: {{instance.ViewInstanceInfo.label}}</li>
+    <li class="active">{{instance.ViewInstanceInfo.label}}</li>
   </ol>
   <div class="pull-right top-margin-4">
     <button class="btn btn-danger" ng-click="deleteInstance(instance)">Delete Instance</button>
   </div>
 </div>
 <hr>
-<div class="panel panel-default" ng-cloak>
+<div class="panel panel-default" ng-cloak ng-show="instance">
   <div class="panel-heading clearfix">
     <h3 class="panel-title pull-left">Settings</h3>
     <div class="pull-right">
@@ -34,10 +34,18 @@
   </div>
   <div class="panel-body">
     <form class="form-horizontal">
+      <div class="form-group">
+        <label for="" class="col-sm-2 control-label">View Name</label>
+        <div class="col-sm-10"><input disabled="disabled" type="text" class="form-control instancename-input" placeholder="Display Name" value="{{instance.ViewInstanceInfo.view_name}}"></div>
+      </div>
+      <div class="form-group">
+        <label for="" class="col-sm-2 control-label">View Version</label>
+        <div class="col-sm-10"><input disabled="disabled" type="text" class="form-control instancename-input" placeholder="Display Name" value="{{instance.ViewInstanceInfo.version}}"></div>
+      </div>
       <fieldset ng-disabled="editSettingsDisabled">
         <div class="form-group">
-          <label for="" class="col-sm-2 control-label">Instance ID</label>
-          <label for="" class="col-sm-10 control-label text-left">{{instance.ViewInstanceInfo.instance_name}}</label>
+          <label for="" class="col-sm-2 control-label">Instance Name</label>
+          <div class="col-sm-10"><input disabled="disabled" type="text" class="form-control instancename-input" placeholder="Display Name" value="{{instance.ViewInstanceInfo.instance_name}}"></div>
         </div>
         <div class="form-group">
           <label for="" class="col-sm-2 control-label">Display Name</label>
@@ -84,8 +92,6 @@
           <div class="well" ng-switch-when="true">
             <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>
               {{$last ? '' :', '}}
             </span>
           </div>
@@ -95,8 +101,6 @@
           <div class="well" ng-switch-when="true">
             <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>
               {{$last ? '' :', '}}
             </span>
           </div>

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

@@ -36,7 +36,7 @@
     <div class="col-sm-3 padding-left-30"><h4>View Name</h4></div>
     <div class="col-sm-3"><h4>Versions</h4></div>
     <div class="col-sm-3"><h4>Instances</h4></div>
-    <div class="col-sm-3"><h4>Descirption</h4></div>
+    <div class="col-sm-3"><h4>Description</h4></div>
   </div>
   <accordion>
     <accordion-group ng-repeat="view in filteredViews" is-open="open">

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

@@ -0,0 +1,79 @@
+<!--
+* 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.
+-->
+    
+<div class="views-list-table">
+  <div class="clearfix">
+    <ol class="breadcrumb pull-left">
+      <li class="active">Views</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>
+        <span class="input-group-addon">
+          <span class="glyphicon glyphicon-search"></span>
+        </span>
+      </div>
+    </div>
+  </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-6"><h4>Description</h4></div>
+  </div>
+  <accordion close-others="false">
+    <accordion-group ng-repeat="view in filteredViews" is-open="view.isOpened">
+      <accordion-heading>
+        <div class="row">
+          <div class="col-sm-3">
+            <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': view.isOpened}"></i>
+            {{view.view_name}}
+          </div>
+          <div class="col-sm-3">{{view.versions}}</div>
+          <div class="col-sm-6">This is a description</div>
+        </div>
+      </accordion-heading>
+      <table class="table">
+        <tbody>
+          <tr ng-repeat="instance in view.instances">
+            <td class="col-sm-3"></td>
+            <td class="col-sm-3">
+              <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">{{instance.ViewInstanceInfo.version}}</td>
+            <td class="col-sm-3">
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td class="col-sm-3"></td>
+            <td class="col-sm-3">
+              <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>
+            <td class="col-sm-3">
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </accordion-group>
+
+  </accordion>
+</div>

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

@@ -39,8 +39,6 @@
         <div class="well" ng-switch-default>
           <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.PermissionInfo.permission_name, 'USER', user)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             {{$last ? '' :', '}}
           </span>
         </div>
@@ -50,8 +48,6 @@
         <div class="well" ng-switch-default>
           <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.PermissionInfo.permission_name, 'GROUP', group)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             {{$last ? '' :', '}}
           </span>
         </div>

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

@@ -21,7 +21,7 @@
 </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.group_name.$error.pattern) && form.submitted}">
+  <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]+)$/">

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

@@ -26,7 +26,7 @@
   </div>
 </div>
 <hr>
-<form class="form-horizontal group-edit" role="form" novalidate name="form">
+<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>
     <div class="col-sm-10">
@@ -42,7 +42,6 @@
             <link-to route='users.show' id="{{member}}">
               {{member}}
             </link-to>
-            <button ng-show="!group.ldap_group" type="button" class="close" ng-click="removeMember(member)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             {{$last ? '' : ', '}}
           </span>
         </div>
@@ -53,4 +52,38 @@
       <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">
+      <label for="" class="col-sm-2 control-label">Privileges</label>
+      <div class="col-sm-10">
+        <table class="table" ng-show="privileges">
+          <thead>
+            <tr>
+              <th>Resource</th>
+              <th>Permissions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="(name, privilege) in privileges.clusters">
+              <td>
+                <span class="glyphicon glyphicon-cloud"></span> 
+                <a href="#/clusters/{{name}}/manageAccess">{{name}}</a>
+              </td>
+              <td>
+                {{privilege}}
+              </td>
+            </tr>
+            <tr ng-repeat="(name, privilege) in privileges.views">
+              <td>
+                <span class="glyphicon glyphicon-th"></span> 
+                <a href="#/views/{{privilege.view_name}}/versions/{{privilege.version}}/instances/{{name}}/edit">{{name}}</a>
+              </td>
+              <td>
+                {{privilege.privileges}}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="alert alert-info hide-soft" ng-class="{'visible' : !privileges}">This group does not have any privileges.</div>
+      </div>
+    </div>
 </form>

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

@@ -66,4 +66,12 @@
   <div class="alert alert-info" ng-show="!groups.length">
     No groups to display.
   </div>
+  <div class="col-sm-12">
+    <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>
+    </div>
+    <div class="pull-right">
+      <select class="form-control" ng-model="groupsPerPage" ng-change="groupsPerPageChanges()" ng-options="currOption for currOption in [10, 25, 50, 100]"></select>
+    </div>
+  </div>
 </div>

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

@@ -25,7 +25,7 @@
           <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>
+          <li><a href="/#/main/dashboard" class="gotodashboard" target="{{cluster.Clusters.cluster_name}}">Go to Dashboard</a></li>
         </ul>
       </div>
         

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

@@ -15,7 +15,10 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div class="jumbotron">
-  <h2>Ambari Admin Console</h2>
-  <p class="lead">Some information about admin console.</p>
+<div class="panel panel-default mainpage">
+  <div class="panel-body">
+    <h1>Welcome to Apache Ambari</h1>
+    <p>Use the controls to the left to provision a cluster, manage who can access the cluster, and customize views for Ambari users.</p>
+  </div>
+    
 </div>

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

@@ -24,7 +24,7 @@
   <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>
     <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>
+      <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">
         Required
       </div>
@@ -42,6 +42,12 @@
       <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">
+    <label for="" class="col-sm-2 control-label">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>
+    </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">

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

@@ -49,7 +49,6 @@
           <select class="form-control statusfilter" 
             ng-model="currentActiveFilter"
             ng-options="item for item in actvieFilterOptions">
-            
           </select>
         </th>
       </tr>
@@ -57,11 +56,21 @@
     <tbody>
       <tr ng-repeat="user in users | filter:activeFilter | filter:typeFilter | filter:currentNameFilter">
         <td>
+          <span class="glyphicon glyphicon-flash" ng-show="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>
         <td><span ng-class="user.Users.active ? 'text-success' : 'text-danger'">{{user.Users.active ? 'Active' : 'Inactive'}}</span></td>
       </tr>
     </tbody>
-  </table>    
+  </table>
+  <div class="col-sm-12">
+    <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>
+    </div>
+    <div class="pull-right">
+      <select class="form-control" ng-model="usersPerPage" ng-change="usersPerPageChanges()" ng-options="currOption for currOption in [10, 25, 50, 100]"></select>
+    </div>
+    
+  </div>
 </div>

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

@@ -40,6 +40,12 @@
         <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="" class="col-sm-2 control-label">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>
+      </div>
+    </div>
     <div class="form-group">
       <label for="password" class="col-sm-2 control-label">Password</label>
       <div class="col-sm-10">
@@ -52,7 +58,10 @@
         <div class="row" ng-hide="isGroupEditing">
           <div class="col-sm-10">
             <div class="well">
-              <a href ng-repeat="group in user.user_groups">{{group}}{{$last ? '' : ', '}}</a>
+              <span ng-repeat="group in user.groups">
+                <a href="#/groups/{{group}}/edit" >{{group}}</a>
+                {{$last ? '' : ', '}}
+              </span>
             </div>
           </div>
           <div class="col-sm-2">
@@ -70,18 +79,38 @@
       </div>
         
     </div>
-    <div class="form-group">
+    <div class="form-group" ng-show="dataLoaded">
       <label for="" class="col-sm-2 control-label">Privileges</label>
       <div class="col-sm-10">
-        <table class="table">
+        <table class="table" ng-show="privileges">
           <thead>
             <tr>
               <th>Resource</th>
               <th>Permissions</th>
             </tr>
           </thead>
-          <tbody></tbody>
+          <tbody>
+            <tr ng-repeat="(name, privilege) in privileges.clusters">
+              <td>
+                <span class="glyphicon glyphicon-cloud"></span> 
+                <a href="#/clusters/{{name}}/manageAccess">{{name}}</a>
+              </td>
+              <td>
+                {{privilege}}
+              </td>
+            </tr>
+            <tr ng-repeat="(name, privilege) in privileges.views">
+              <td>
+                <span class="glyphicon glyphicon-th"></span> 
+                <a href="#/views/{{privilege.view_name}}/versions/{{privilege.version}}/instances/{{name}}/edit">{{name}}</a>
+              </td>
+              <td>
+                {{privilege.privileges}}
+              </td>
+            </tr>
+          </tbody>
         </table>
+        <div class="alert alert-info" ng-show="!privileges">This user does not have any privileges.</div>
       </div>
     </div>
   </form>