[22/27] incubator-ranger git commit: Ranger-203 : Add pluggable logic to UI code

[ma...@apache.org]

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policies/GroupPermList.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policies/GroupPermList.js b/security-admin/src/main/webapp/scripts/views/policies/GroupPermList.js
new file mode 100644
index 0000000..c7e876a
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policies/GroupPermList.js
@@ -0,0 +1,429 @@
+/*
+ * 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.
+ */
+
+ /*
+ *
+ */
+define(function(require) {
+    'use strict';
+    
+	var Backbone		= require('backbone');
+    var App		        = require('App');
+	var XAEnums			= require('utils/XAEnums');
+	var XAUtil			= require('utils/XAUtils');
+	var localization	= require('utils/XALangSupport');
+	var VXGroup			= require('models/VXGroup');
+	require('bootstrap-editable');
+    	
+	var FormInputItem = Backbone.Marionette.ItemView.extend({
+		_msvName : 'FormInputItem',
+		template : require('hbs!tmpl/policies/GroupPermItem'),
+		tagName : 'tr',
+		templateHelpers : function(){
+			
+			
+			return {
+				permissions 	: this.getPerms(),
+				policyKnox 		: this.policyType == XAEnums.ServiceType.Service_KNOX.value ? true :false,
+//				policyStorm 	: this.policyType == XAEnums.ServiceType.Service_STORM.value ? true :false,
+				isModelNew		: !this.model.has('editMode'),
+				stormPerms		: this.stormPermsIds.length == 14 ? _.union(this.stormPermsIds,[-1]) : this.stormPermsIds  
+						
+			};
+		},
+		ui : {
+			selectGroups	: '[data-js="selectGroups"]',
+			inputIPAddress	: '[data-js="ipAddress"]',
+			tags			: '[class=tags]'
+		},
+		events : {
+			'click [data-action="delete"]'	: 'evDelete',
+			'click td'						: 'evClickTD',
+			'change [data-js="selectGroups"]': 'evSelectGroup',
+			'change [data-js="ipAddress"]'	: 'evIPAddress'
+		},
+
+		initialize : function(options) {
+			_.extend(this, _.pick(options, 'groupList','policyType','accessTypes'));
+            //this.subjectList = this.mStudent.getSubjectList();
+			this.stormPermsIds = [];
+			if(this.policyType == XAEnums.AssetType.ASSET_STORM.value){
+				if(this.model.has('editMode') && this.model.get('editMode')){
+					this.stormPermsIds = _.map(this.model.get('_vPermList'), function(p){
+											if(XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value != p.permType)
+												return p.permType;
+										});
+				}
+			}
+		},
+ 
+		onRender : function() {
+			var that = this;
+			if(!_.isUndefined(this.model.get('groupName'))){
+				this.ui.selectGroups.val(this.model.get('groupName').split(','));
+			}
+			if(!_.isUndefined(this.model.get('ipAddress'))){
+				this.ui.inputIPAddress.val(this.model.get('ipAddress').toString());
+			}
+			if(this.model.has('editMode') && this.model.get('editMode')){
+				_.each(this.model.get('accesses'), function(p){
+					if(p.value)
+						this.$el.find('input[data-name="' + p.type + '"]').attr('checked', 'checked');
+				},this);
+			}
+			this.createGroupDropDown();
+			this.groupDropDownChange();
+			if(this.policyType == XAEnums.AssetType.ASSET_STORM.value){
+				this.renderStormPerms();
+			}
+			
+			
+			this.accessItems = _.map(this.getPerms(), function(perm){ return {'type':perm.label,value : false}});
+		},
+		groupDropDownChange : function(){
+			var that = this;
+			this.ui.selectGroups.on('change',function(e){
+		//		console.log(e.currentTarget.value);
+				that.checkDirtyFieldForDropDown(e);
+				var duplicateGroupName = false;
+				
+				that.toggleAddButton(e);
+				if(e.removed != undefined){
+					var gIdArr = [],gNameArr = [];
+					gIdArr = _.without(that.model.get('groupId').split(','), e.removed.id);
+					if(that.model.get('groupName') != undefined)
+						gNameArr = _.without(that.model.get('groupName').split(','), e.removed.text);
+					if(!_.isEmpty(gIdArr)){
+						that.model.set('groupId',gIdArr.join(','));
+						that.model.set('groupName',gNameArr.join(','));
+					}else{
+						that.model.unset('groupId');
+						that.model.unset('groupName');
+					}
+					return;
+				}
+				if(!_.isUndefined(e.added)){
+						that.model.set('groupId', e.currentTarget.value);
+						var groupNameList = _.map($(e.currentTarget).select2("data"), function(obj){return obj.text});
+						that.model.set('groupName',groupNameList.toString())
+				}
+			});
+		},
+		createGroupDropDown :function(){
+			var that = this;
+			if(this.model.has('editMode') && !_.isEmpty(this.ui.selectGroups.val())){
+				var temp = this.ui.selectGroups.val().split(",");
+				_.each(temp , function(name){
+					if(_.isUndefined(that.groupList.where({ name : name}))){
+						var group = new VXGroup({name: name});
+						group.fetch({async:false}).done(function(){
+							that.groupList.add(group);
+						});
+					}
+				});
+			}
+			this.groupArr = this.groupList.map(function(m){
+				return { id : m.id+"" , text : m.get('name')};
+			});
+			this.ui.selectGroups.select2({
+				closeOnSelect : true,
+				placeholder : 'Select Group',
+			//	maximumSelectionSize : 1,
+				width :'220px',
+				tokenSeparators: [",", " "],
+				tags : this.groupArr, 
+				initSelection : function (element, callback) {
+					var data = [];
+					console.log(that.groupList);
+					
+					$(element.val().split(",")).each(function () {
+						var obj = _.findWhere(that.groupArr,{text:this});
+						data.push({id: obj.id, text: this})
+					});
+					callback(data);
+				},
+				createSearchChoice: function(term, data) {
+				/*	if ($(data).filter(function() {
+						return this.text.localeCompare(term) === 0;
+					}).length === 0) {
+						return {
+							id : term,
+							text: term
+						};
+					}*/
+				},
+				ajax: { 
+					url: "service/xusers/groups",
+					dataType: 'json',
+					data: function (term, page) {
+						return {name : term};
+					},
+					results: function (data, page) { 
+						var results = [] , selectedVals = [];
+						/*if(!_.isEmpty(that.ui.selectGroups.select2('val')))
+							selectedVals = that.ui.selectGroups.select2('val');*/
+						selectedVals = that.getGroupSelectdValues();
+						if(data.resultSize != "0"){
+							//if(data.vXGroups.length > 1){
+
+								results = data.vXGroups.map(function(m, i){	return {id : m.id+"", text: m.name};	});
+								if(!_.isEmpty(selectedVals))
+									results = XAUtil.filterResultByIds(results, selectedVals);
+						//		console.log(results.length);
+								return {results : results};
+							//}
+						//	results = [{id : data.vXGroups.id+"", text: data.vXGroups.name}];
+						//	return {results : results};
+						}
+						return {results : results};
+					}
+				},	
+				formatResult : function(result){
+					return result.text;
+				},
+				formatSelection : function(result){
+					return result.text;
+				},
+				formatNoMatches: function(result){
+					return 'No group found.';
+				}
+			}).on('select2-focus', XAUtil.select2Focus);
+		},
+		getGroupSelectdValues : function(){
+			var vals = [],selectedVals = [];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('groupId'))){
+					vals.push.apply(vals, m.get('groupId').split(','));
+				}
+			});
+			if(!_.isEmpty(this.ui.selectGroups.select2('val')))
+				selectedVals = this.ui.selectGroups.select2('val');
+			vals.push.apply(vals , selectedVals);
+			vals = $.unique(vals);
+			return vals;
+		},
+		evDelete : function(){
+			var that = this;
+			this.collection.remove(this.model);
+			this.toggleAddButton();
+		},
+		evClickTD : function(e){
+			var that = this;
+			var $el = $(e.currentTarget),permList =[],perms =[];
+			if($(e.toElement).is('td')){
+				var $checkbox = $el.find('input');
+				$checkbox.is(':checked') ? $checkbox.prop('checked',false) : $checkbox.prop('checked',true);
+			}
+			var curPerm = $el.find('input').data('id');
+			var curPermName = $el.find('input').data('name');
+			if(!_.isUndefined(curPerm)){
+				var perms = [];
+				if(this.model.has('accesses')){
+					if(_.isArray(this.model.get('accesses')))
+						perms = this.model.get('accesses');
+					else
+						perms.push(this.model.get('accesses'));
+				}
+				if($el.find('input[type="checkbox"]').is(':checked')){
+					_.each(that.accessItems, function(obj){ if(obj.type == curPermName) obj.value = true });
+					
+					if(curPerm == XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value){
+						$el.parent().find('input[type="checkbox"]:not(:checked)[data-id!="'+curPerm+'"]').map(function(){
+							_.each(that.accessItems, function(obj){ if(obj.type == $(this).data('name')) obj.value = true }, this);
+						});
+						$el.parent().find('input[type="checkbox"]').prop('checked',true);
+					}
+				} else {
+					_.each(that.accessItems, function(obj){ if(obj.type == curPermName ) obj.value = false }, this);
+				}
+				
+//				this.checkDirtyFieldForCheckBox(perms);
+				if(!_.isEmpty(that.accessItems))
+					this.model.set('accesses', that.accessItems);
+				else 
+					this.model.unset('accesses');
+			}
+		},
+		checkDirtyFieldForCheckBox : function(perms){
+			var permList = [];
+			if(!_.isUndefined(this.model.get('_vPermList')))
+				permList = _.map(this.model.attributes._vPermList,function(obj){return obj.permType;});
+			perms = _.map(perms,function(obj){return obj.permType;});
+			XAUtil.checkDirtyField(permList, perms, this.$el);
+		},
+		toggleAddButton : function(e){
+			var temp = [];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('groupId'))){
+					temp.push.apply(temp, m.get('groupId').split(','));
+					
+				}
+			});
+			if(!_.isUndefined(e)){
+				if( !_.isUndefined(e.added) && ((temp.length + 1) == this.groupList.length)) 
+					$('[data-action="addGroup"]').hide();
+				if(!_.isUndefined(e.removed))
+					$('[data-action="addGroup"]').show();
+			}else{
+				$('[data-action="addGroup"]').show();
+			}
+		},
+		evIPAddress :function(e){
+			if(!_.isEmpty($(e.currentTarget).val()))
+				this.model.set('ipAddress',$(e.currentTarget).val().split(','));
+			else
+				this.model.unset('ipAddress');
+		},
+		renderStormPerms :function(){
+			var that = this;
+			var permArr = _.pick(XAEnums.XAPermType,  XAUtil.getStormActions(this.policyType));
+			this.stormPerms =  _.map(permArr,function(m){return {text:m.label, value:m.value};});
+			this.stormPerms.push({'value' : -1, 'text' : 'Select/Deselect All'});
+			this.ui.tags.editable({
+			    placement: 'right',
+//			    emptytext : 'Please select',
+			    source: this.stormPerms,
+			    display: function(idList,srcData) {
+			    	if(_.isEmpty(idList.toString())){
+			    		$(this).html('');
+			    		return;
+			    	}
+			    	if(!_.isArray(idList))
+			    		idList = [idList];
+//			    	that.checkDirtyFieldForGroup(values);
+			    	var permTypeArr = [];
+		    		var valArr = _.map(idList, function(id){
+		    			if(!(parseInt(id) <= 0) && (!_.isNaN(parseInt(id)))){
+		    				var obj = _.findWhere(srcData,{'value' : parseInt(id)});
+		    				permTypeArr.push({permType : obj.value});
+		    				return "<span class='label label-inverse'>" + obj.text + "</span>";
+		    			}
+		    		});
+		    		
+		    		if(that.model.has('_vPermList')){
+                        var adminPerm = _.where(that.model.get('_vPermList'),{'permType': XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value });
+                        permTypeArr = _.isEmpty(adminPerm) ? permTypeArr : _.union(permTypeArr,adminPerm);
+                    }
+                    that.model.set('_vPermList', permTypeArr);
+//		    		if(!_.isEmpty(perms))
+//		    			that.model.set('_vPermList', perms);
+//		    		that.model.set('_vPermList', permTypeArr);
+		    		$(this).html(valArr.join(" "));
+			    },
+			});
+			this.$('[id^="tags-edit-"]').click(function(e) {
+			    e.stopPropagation();
+			    e.preventDefault();
+			    that.$('#' + $(this).data('editable') ).editable('toggle');
+			    that.$('input[type="checkbox"][value="-1"]').click(function(e){
+					var checkboxlist =$(this).closest('.editable-checklist').find('input[type="checkbox"][value!=-1]')
+					$(this).is(':checked') ? checkboxlist.prop('checked',true) : checkboxlist.prop('checked',false); 
+					
+				});
+			});
+			
+		},
+		checkDirtyFieldForDropDown : function(e){
+			//that.model.has('groupId')
+			var groupIdList =[];
+			if(!_.isUndefined(this.model.get('groupId')))
+				groupIdList = this.model.get('groupId').split(',');
+			XAUtil.checkDirtyField(groupIdList, e.val, $(e.currentTarget));
+		},
+		getPerms : function(){
+			var permList = _.map(this.accessTypes,function(type){ return type.label});
+			return _.map(permList, function(perm){ return _.findWhere(XAEnums.XAPermType,{label:perm})})
+		}
+	});
+
+
+
+	return Backbone.Marionette.CompositeView.extend({
+		_msvName : 'FormInputItemList',
+		template : require('hbs!tmpl/policies/GroupPermList'),
+		//tagName : 'ul', 
+		//className : 'timeline-container',
+		templateHelpers :function(){
+			return {
+				permHeaders : this.getPermHeaders()
+			};
+		},
+		getItemView : function(item){
+			if(!item){
+				return;
+			}
+			return FormInputItem;
+		},
+		itemViewContainer : ".js-formInput",
+		itemViewOptions : function() {
+			return {
+				'collection' 	: this.collection,
+				'groupList' 	: this.groupList,
+				'policyType'	: this.policyType,
+				'accessTypes'	: this.accessTypes
+			};
+		},
+		events : {
+			'click [data-action="addGroup"]' : 'addNew'
+		},
+		initialize : function(options) {
+			_.extend(this, _.pick(options, 'groupList','policyType','accessTypes','rangerServiceDefModel'));
+			//this.hiveGroupPerm = _.has(options,'hiveGroupPerm') ? true : false;
+			this.listenTo(this.groupList, 'sync', this.render, this);
+			if(this.collection.length == 0)
+				this.collection.add(new Backbone.Model());
+		},
+		onRender : function(){
+			//console.log("onRender of ArtifactFormNoteList called");
+			this.toggleAddButton();
+		},
+		addNew : function(){
+			var that =this;
+			if(this.groupList.length > this.collection.length){
+				this.collection.add(new Backbone.Model());
+				this.toggleAddButton();
+			}
+		},
+		toggleAddButton : function(){
+			var groupIds=[];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('groupId'))){
+					var temp = m.get('groupId').split(',');
+					groupIds.push.apply(groupIds,temp);
+				}
+			});
+			if(groupIds.length == this.groupList.length)
+				this.$('button[data-action="addGroup"]').hide();
+			else
+				this.$('button[data-action="addGroup"]').show();
+		},
+		getPermHeaders : function(){
+			var permList = _.map(this.accessTypes,function(type){ return type.label});
+			if(!_.isEmpty(this.rangerServiceDefModel.get('policyConditions'))){
+				_.each(this.rangerServiceDefModel.get('policyConditions'), function(cond){
+					if(!_.isNull(cond) && !_.isNull(cond.label)) permList.unshift(cond.label);
+				});
+			}
+			permList.unshift(localization.tt('lbl.selectGroup'));
+			permList.push("");
+			return permList;
+		},
+	});
+
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyCreate.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyCreate.js b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyCreate.js
new file mode 100644
index 0000000..15ddd8e
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyCreate.js
@@ -0,0 +1,322 @@
+/*
+ * 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.
+ */
+
+ 
+/* 
+ * Policy create view
+ */
+
+define(function(require){
+    'use strict';
+
+	var Backbone		= require('backbone');
+	var App				= require('App');
+	var XAEnums			= require('utils/XAEnums');
+	var XAUtil			= require('utils/XAUtils');
+	var XALinks 		= require('modules/XALinks');
+	var localization	= require('utils/XALangSupport');
+	
+	var PolicycreateTmpl = require('hbs!tmpl/hdfs/PolicyCreate_tmpl');
+	var RangerPolicyForm = require('views/policies/RangerPolicyForm');
+	var RangerServiceDef	= require('models/RangerServiceDef');
+
+	var PolicyCreate = Backbone.Marionette.Layout.extend(
+	/** @lends PolicyCreate */
+	{
+		_viewName : 'PolicyCreate',
+		
+    	template: PolicycreateTmpl,
+    	templateHelpers : function(){
+    		return {
+    			editPolicy : this.editPolicy
+    		};
+    	},
+    	breadCrumbs :function(){
+	    	
+    		if(this.model.isNew())
+    			return [XALinks.get('RepositoryManager'),XALinks.get('ManagePolicies',{model : this.rangerService}),XALinks.get('PolicyCreate')];
+    		else
+    			return [XALinks.get('RepositoryManager'),XALinks.get('ManagePolicies',{model : this.rangerService}),XALinks.get('PolicyEdit')];
+//    		return [];
+    	} ,        
+
+		/** Layout sub regions */
+    	regions: {
+			'rForm' :'div[data-id="r_form"]'
+		},
+
+    	/** ui selector cache */
+    	ui: {
+			'btnSave'	: '[data-id="save"]',
+			'btnCancel' : '[data-id="cancel"]',
+			'btnDelete' : '[data-id="delete"]',
+			'policyDisabledAlert' : '[data-id="policyDisabledAlert"]' 
+		},
+
+		/** ui events hash */
+		events: function() {
+			var events = {};
+			events['click ' + this.ui.btnSave]		= 'onSave';
+			events['click ' + this.ui.btnCancel]	= 'onCancel';
+//			events['click ' + this.ui.btnDelete]	= 'onDelete';
+			
+			return events;
+		},
+
+    	/**
+		* intialize a new PolicyCreate Layout 
+		* @constructs
+		*/
+		initialize: function(options) {
+			var that = this;
+			console.log("initialized a PolicyCreate Layout");
+
+			_.extend(this, _.pick(options, 'rangerService'));
+			this.initializeServiceDef();
+			that.form = new RangerPolicyForm({
+				template : require('hbs!tmpl/policies/RangerPolicyForm_tmpl'),
+				model : this.model,
+				rangerServiceDefModel : this.rangerServiceDefModel,
+				rangerService : this.rangerService
+			});
+
+			this.editPolicy = this.model.has('id') ? true : false;
+			this.bindEvents();
+			this.params = {};
+		},
+		initializeServiceDef : function(){
+			var service = _.find(XAEnums.ServiceType,function(service){
+				return service.label.toUpperCase() == this.rangerService.get('type').toUpperCase();
+			},this);
+			this.rangerServiceDefModel	= new RangerServiceDef({ id : service.value });
+			this.rangerServiceDefModel.fetch({
+				cache : false,
+				async : false
+			})
+		},
+
+		/** all events binding here */
+		bindEvents : function(){
+			/*this.listenTo(this.model, "change:foo", this.modelChanged, this);*/
+			/*this.listenTo(communicator.vent,'someView:someEvent', this.someEventHandler, this)'*/
+		},
+
+		/** on render callback */
+		onRender: function() {
+//			XAUtil.showAlerForDisabledPolicy(this);
+			this.rForm.show(this.form);
+//			this.rForm.$el.dirtyFields();
+//			XAUtil.preventNavigation(localization.tt('dialogMsg.preventNavPolicyForm'),this.rForm.$el);
+//			this.initializePlugins();
+		},
+
+		/** all post render plugin initialization */
+		initializePlugins: function(){
+		},
+		popupCallBack : function(msg,validateObj){
+			var that = this;
+			XAUtil.alertPopup({
+				msg :msg,
+				callback : function(){
+				//	if(validateObj.auditLoggin)
+				//		that.savePolicy();
+				}
+			});
+		},
+		onSave: function(){
+			var that = this, valid = false;
+			var errors = this.form.commit({validate : false});
+			if(! _.isEmpty(errors)){
+				return;
+			}
+			this.savePolicy();
+			/*var validateObj = this.form.formValidation();
+			valid = (validateObj.groupSet && validateObj.permSet) || (validateObj.userSet && validateObj.userPerm);
+			if(!valid){
+				if(validateObj.groupSet && (!validateObj.permSet)){
+					this.popupCallBack(localization.tt('msg.addGroupPermission'),validateObj);
+				}else if((!validateObj.groupSet) && (validateObj.permSet)) {
+					this.popupCallBack(localization.tt('msg.addGroup'),validateObj);
+						
+				}else if(validateObj.userSet && (!validateObj.userPerm)){
+					this.popupCallBack(localization.tt('msg.addUserPermission'),validateObj);
+				}else if((!validateObj.userSet) && (validateObj.userPerm)) {
+					this.popupCallBack(localization.tt('msg.addUser'),validateObj);
+						
+				}else if((!validateObj.auditLoggin) && (!validateObj.groupPermSet)){
+					XAUtil.alertPopup({
+						msg :localization.tt('msg.yourAuditLogginIsOff'),
+						callback : function(){
+							if(!that.model.isNew()){
+								that.model.destroy({success: function(model, response) {
+									XAUtil.notifySuccess('Success', localization.tt('msg.policyDeleteMsg'));
+									App.appRouter.navigate("#!/hdfs/"+that.assetModel.id+"/policies",{trigger: true});
+								}});
+							}else{
+								XAUtil.notifyError('Error', localization.tt('msg.policyNotAddedMsg'));
+								App.appRouter.navigate("#!/hdfs/"+that.assetModel.id+"/policies",{trigger: true});
+							}
+						}
+					});
+				}else{
+					this.savePolicy();
+				}
+			}else{
+				if(validateObj.groupSet && (!validateObj.permSet)){
+					this.popupCallBack(localization.tt('msg.addGroupPermission'),validateObj);
+				}else if((!validateObj.groupSet) && (validateObj.permSet)) {
+					this.popupCallBack(localization.tt('msg.addGroup'),validateObj);
+						
+				}else if(validateObj.userSet && (!validateObj.userPerm)){
+					this.popupCallBack(localization.tt('msg.addUserPermission'),validateObj);
+				}else if((!validateObj.userSet) && (validateObj.userPerm)) {
+					this.popupCallBack(localization.tt('msg.addUser'),validateObj);
+						
+				}else
+					this.savePolicy();
+			}*/
+			
+		},
+		savePolicy : function(){
+			var that = this;
+			this.form.beforeSave();
+			this.saveMethod();
+		},
+		saveMethod : function(){
+			var that = this;
+			XAUtil.blockUI();
+			this.model.url = "service/plugins/policies";
+			this.model.save({},{
+				wait: true,
+				success: function () {
+					XAUtil.blockUI('unblock');
+					var msg = that.editPolicy ? 'Policy updated successfully' :'Policy created successfully';
+					XAUtil.notifySuccess('Success', msg);
+					XAUtil.allowNavigation();
+					if(that.editPolicy){
+						App.appRouter.navigate("#!/service/"+that.rangerService.id+"/policies",{trigger: true});
+						return;
+					}
+					
+					App.appRouter.navigate("#!/service/"+that.rangerService.id+"/policies",{trigger: true});
+					
+					/*var view = require('views/hdfs/HDFSTableLayout');
+					var resourceListForAsset = new VXResourceList([],{
+						   queryParams : {
+							   'assetId' : that.assetModel.id 
+						   }
+					   });
+					resourceListForAsset.fetch({
+						cache : true,
+						'data' : {
+				//			'resourceType':XAEnums.AssetType.ASSET_HDFS.value,
+							'assetId' :that.assetModel.id
+						}
+					}).done(function(){
+						var newColl = resourceListForAsset;
+						resourceListForAsset.getLastPage({
+							cache : false,
+							data  : {
+			//					'resourceType' : XAEnums.AssetType.ASSET_HDFS.value,
+								'assetId' : that.assetModel.id
+							}
+						}).done(function(){
+							var model = newColl.get(that.model.id);
+							if(model){
+								model.trigger("model:highlightBackgridRow");
+							}
+						});
+						
+						App.rContent.show(new view({
+							collection : resourceListForAsset,
+							assetModel : that.assetModel
+						}));
+					});*/
+					
+					console.log("success");
+				},
+				error: function (model, response, options) {
+					    XAUtil.blockUI('unblock');
+					    if ( response && response.responseJSON && response.responseJSON.msgDesc){
+						if( response.responseJSON.messageList && response.responseJSON.messageList.length > 0 && !_.isUndefined(response.responseJSON.messageList[0].fieldName)){
+						    if(response.responseJSON.messageList[0].fieldName == "parentPermission"){
+							XAUtil.confirmPopup({
+							    msg :response.responseJSON.msgDesc,
+							    callback : function(){
+								that.model.set('checkParentPermission',XAEnums.BooleanValue.BOOL_FALSE.value);
+								that.saveMethod();
+							    }
+							});
+						    }else{
+							that.form.fields.name.setError(response.responseJSON.msgDesc);
+							XAUtil.scrollToField(that.form.fields.name.$el);
+							//XAUtil.notifyError('Error', response.responseJSON.msgDesc);
+						    }
+						}else{
+						    //that.form.fields.name.setError(response.responseJSON.msgDesc);
+						    //XAUtil.scrollToField(that.form.fields.name.$el);
+						    XAUtil.notifyError('Error', response.responseJSON.msgDesc);
+						}
+					    }else
+						XAUtil.notifyError('Error', 'Error creating Policy!');
+					    console.log("error");
+				}
+			});
+		},
+		onDelete :function(){
+			var that = this;
+			XAUtil.confirmPopup({
+				//msg :localize.tt('msg.confirmDelete'),
+				msg :'Are you sure want to delete ?',
+				callback : function(){
+					XAUtil.blockUI();
+					that.model.destroy({
+							success: function(model, response) {
+								XAUtil.blockUI('unblock');
+								XAUtil.allowNavigation();
+								XAUtil.notifySuccess('Success', localization.tt('msg.policyDeleteMsg'));
+								App.appRouter.navigate("#!/hdfs/"+that.assetModel.id+"/policies",{trigger: true});
+							},
+							error: function (model, response, options) {
+								XAUtil.blockUI('unblock');
+								if ( response && response.responseJSON && response.responseJSON.msgDesc){
+									    XAUtil.notifyError('Error', response.responseJSON.msgDesc);
+								    }else
+								    	XAUtil.notifyError('Error', 'Error deleting Policy!');
+								    console.log("error");
+							}
+					});
+					
+				}
+			});
+		},
+		onCancel : function(){
+			XAUtil.allowNavigation();
+			App.appRouter.navigate("#!/service/"+this.rangerService.id+"/policies",{trigger: true});
+
+		},
+		/** on close */
+		onClose: function(){
+			XAUtil.allowNavigation();
+		}
+
+	});
+
+	return PolicyCreate;
+});

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyForm.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyForm.js b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyForm.js
new file mode 100644
index 0000000..8bb5061
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyForm.js
@@ -0,0 +1,617 @@
+/*
+ * 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.
+ */
+
+ 
+define(function(require){
+    'use strict';
+
+	var Backbone		= require('backbone');
+
+	var XAEnums			= require('utils/XAEnums');
+	var localization	= require('utils/XALangSupport');
+	var XAUtil			= require('utils/XAUtils');
+    
+	var VXAuditMap		= require('models/VXAuditMap');
+	var VXPermMap		= require('models/VXPermMap');
+	var VXPermMapList	= require('collections/VXPermMapList');
+	var VXGroupList		= require('collections/VXGroupList');
+	var VXAuditMapList	= require('collections/VXAuditMapList');
+	var VXUserList		= require('collections/VXUserList');
+	var GroupPermList 	= require('views/policies/GroupPermList');
+	var UserPermList 	= require('views/policies/UserPermList');
+	var RangerPolicyResource		= require('models/RangerPolicyResource');
+	var RangerPolicyResourceList	= require('collections/RangerPolicyResourceList');
+
+	require('backbone-forms.list');
+	require('backbone-forms.templates');
+	require('backbone-forms');
+	require('backbone-forms.XAOverrides');
+	require('jquery-ui');
+	require('tag-it');
+
+	var PolicyForm = Backbone.Form.extend(
+	/** @lends PolicyForm */
+	{
+		_viewName : 'PolicyForm',
+
+    	/**
+		* intialize a new PolicyForm Form View 
+		* @constructs
+		*/
+		initialize: function(options) {
+			console.log("initialized a PolicyForm Form View");
+			_.extend(this, _.pick(options, 'rangerServiceDefModel', 'rangerService'));
+			this.setupForm()
+    		Backbone.Form.prototype.initialize.call(this, options);
+
+			this.initializeCollection();
+			this.bindEvents();
+		},
+		type : {
+			DATABASE : 1,
+			TABLE    : 2,
+			COLUMN   : 3,
+			VIEW   : 4,
+			UDF   : 5
+		},
+		initializeCollection: function(){
+			this.permMapList = this.model.isNew() ? new VXPermMapList() : this.model.get('permMapList');
+			this.auditList = this.model.isNew() ? new VXAuditMapList() : this.model.get('auditList');
+			
+			//this.userList.fetch();
+			
+
+			/*If the model passed to the fn is new return an empty collection
+			 * otherwise return a collection that has models like 
+			 * {
+			 * 	groupId : 5,
+			 * 	permissionList : [4,3]
+			 * }
+			 * The formInputList will be passed to the forminputitemlist view.
+			 */
+
+			this.formInputList 		= XAUtil.makeCollForGroupPermission(this.model);
+			this.userPermInputList  = XAUtil.makeCollForUserPermission(this.model);
+
+		},
+		/** all events binding here */
+		bindEvents : function(){
+			this.on('isAuditEnabled:change', function(form, fieldEditor){
+    			this.evAuditChange(form, fieldEditor);
+    		});
+			this.on('isRecursive:change', function(form, fieldEditor){
+    			this.evRecursiveChange(form, fieldEditor);
+    		});
+			this.on('resourceStatus:change', function(form, fieldEditor){
+    			this.evResourceStatusChange(form, fieldEditor);
+    		});
+		},
+
+		/** fields for the form
+		*/
+		fields: ['name', 'description', 'isEnabled', 'isAuditEnabled'],
+		schema :function(){
+			var attrs = {};
+			var that = this;
+			_.each(this.rangerServiceDefModel.get('resources'),function(v,k){ 
+				if (v != null) {
+
+					var formObj = {};
+					switch(v.type){
+							case 'string' : formObj.type = 'Text'; break;
+							case 'select2' : 
+								formObj.type = 'Select2Remote';
+								formObj.pluginAttr = that.getPlugginAttr(false),
+								formObj.editorAttrs = {'data-placeholder': v.label },
+								formObj.options = function(callback, editor){
+				                    callback();
+				                },
+				                formObj.onFocusOpen = true
+								break;
+							case 'path' : 
+								formObj.type = 'Text';
+								that.initilializePathPlugin = true;
+								that.pathFieldName = v.name;
+								break;
+							default : formObj.type = 'Text'; break;
+					}	
+
+					formObj.title = v.label || v.name;
+					formObj.validators = [];
+					if (_.has(v,'mandatory') && v.mandatory){
+						formObj.validators.push('required');
+						formObj.title = formObj.title +" *"
+					}
+					formObj['class'] = 'serviceConfig';
+					var name = v.name;
+					attrs[name] = formObj;
+				}
+			});
+			var attr1 = _.pick(_.result(this.model,'schemaBase'), 'name','isEnabled');
+			var attr2 = _.pick(_.result(this.model,'schemaBase'),'description', 'isRecursive', 'isAuditEnabled');
+			return _.extend(attr1,_.extend(attrs,attr2));
+		},
+		/** on render callback */
+		render: function(options) {
+			var that = this;
+			
+			Backbone.Form.prototype.render.call(this, options);
+
+			if(!_.isUndefined(this.initilializePathPlugin) && this.initilializePathPlugin){ 
+				this.initializePathPlugins();
+			}
+			this.renderCustomFields();
+		/*	if(!this.model.isNew()){
+				this.setUpSwitches();
+			}
+			if(this.model.isNew() && this.fields._vAuditListToggle.editor.getValue() == 1){
+				this.model.set('auditList', new VXAuditMapList(new VXAuditMap({
+					'auditType' : XAEnums.XAAuditType.XA_AUDIT_TYPE_ALL.value,//fieldEditor.getValue()//
+					'resourceId' :this.model.get('id')
+					
+				})));
+			}*/
+			this.$el.find('.field-isEnabled').find('.control-label').remove();
+		},
+		evAuditChange : function(form, fieldEditor){
+			XAUtil.checkDirtyFieldForToggle(fieldEditor);
+		},
+		evRecursiveChange : function(form, fieldEditor){
+			XAUtil.checkDirtyFieldForToggle(fieldEditor);
+		},
+		evResourceStatusChange : function(form, fieldEditor){
+			XAUtil.checkDirtyFieldForToggle(fieldEditor);
+		},
+		formValidation : function(){
+			var groupSet = false,permSet = false,auditStatus= false,encryptStatus= false,groupPermSet = false,
+							userSet=false,userPerm = false,isUsers =false;
+			console.log('validation called..');
+			var breakFlag =false;
+			this.formInputList.each(function(m){
+				if(m.has('groupId') ||  m.has('_vPermList')){
+					if(! breakFlag){
+						groupSet = m.has('groupId') ? true : false ; 
+						if(!m.has('_vPermList')){
+							permSet = false;
+						}else
+							permSet = true;
+						if(groupSet && permSet)
+							groupPermSet = true;
+						else
+							breakFlag=true;
+					}
+				}
+			});
+			breakFlag = false;
+			
+			this.userPermInputList.each(function(m){
+					if(! breakFlag){
+						userSet = m.has('userId') || m.has('userName') ? true : false ; 
+						if(!m.has('_vPermList')){
+							userPerm = false;
+						}else
+							userPerm = true;
+						if(userSet && userPerm)
+							isUsers = true;
+						else
+							breakFlag=true;
+					}
+			});
+			var auditLoggin = this.fields.isAuditEnabled.editor.getValue();
+
+			return {groupPermSet: groupPermSet , groupSet : groupSet,permSet : permSet,auditLoggin :auditLoggin,
+				userSet : userSet,userPerm:userPerm,isUsers:isUsers};
+		},
+		setupForm : function() {
+			var resourcePath = _.map(this.model.get('resources'), function(obj,i){
+				if( i == 0 ) this.model.set('isRecursive', obj.isRecursive) 
+				return obj.value; 
+			}, this);
+			if(this.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HDFS.label.toUpperCase()){
+				this.model.set('path', resourcePath.toString());
+			}else if(this.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HIVE.label.toUpperCase()){
+				_.each(resourcePath, function(path) {
+					var temp  = path.split("/");
+					if(!_.isUndefined(temp[1]))	this.model.set('database', temp[1])	
+					if(!_.isUndefined(temp[2]))	this.model.set('table', temp[2])
+					if(!_.isUndefined(temp[3]))	this.model.set('column', temp[3])
+					
+				},this);
+			}else if(this.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HBASE.label.toUpperCase()){
+				_.each(resourcePath, function(path) {
+					var temp  = path.split("/");
+					if(!_.isUndefined(temp[1]))	this.model.set('table', temp[1])	
+					if(!_.isUndefined(temp[2]))	this.model.set('column-family', temp[2])
+					if(!_.isUndefined(temp[3]))	this.model.set('column', temp[3])
+					
+				},this);
+			}else if(this.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_KNOX.label.toUpperCase()){
+				_.each(resourcePath, function(path) {
+					var temp  = path.split("/");
+					if(!_.isUndefined(temp[1]))	this.model.set('topology', temp[1])	
+					if(!_.isUndefined(temp[2]))	this.model.set('service', temp[2])
+					
+				},this);
+			}else if(this.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_STORM.label.toUpperCase()){
+				var resourcePath = _.map(this.model.get('resources'), function(obj,i){
+					if( i == 0 ) this.model.set('isRecursive', obj.isRecursive) 
+					return obj.value; 
+				}, this);
+				_.each(resourcePath, function(path) {
+					var temp  = path.split("/");
+					if(!_.isUndefined(temp[1]))	this.model.set('topology', temp[1])	
+				},this);
+			}
+		},
+		setUpSwitches :function(){
+			var that = this;
+			var encryptStatus = false,auditStatus = false,recursiveStatus = false;
+			auditStatus = this.model.has('auditList') ? true : false; 
+			this.fields._vAuditListToggle.editor.setValue(auditStatus);
+			
+			_.each(_.toArray(XAEnums.BooleanValue),function(m){
+				if(parseInt(that.model.get('isEncrypt')) == m.value)
+					encryptStatus =  (m.label == XAEnums.BooleanValue.BOOL_TRUE.label) ? true : false;
+				if(parseInt(that.model.get('isRecursive')) == m.value)
+					recursiveStatus =  (m.label == XAEnums.BooleanValue.BOOL_TRUE.label) ? true : false;
+			});
+			this.fields.isEncrypt.editor.setValue(encryptStatus);
+			this.fields.isRecursive.editor.setValue(recursiveStatus);
+			if(parseInt(this.model.get('resourceStatus')) != XAEnums.BooleanValue.BOOL_TRUE.value)
+				this.fields.resourceStatus.editor.setValue(false);
+		},
+		/** all custom field rendering */
+		renderCustomFields: function(){
+			var that = this;
+			var accessType = this.rangerServiceDefModel.get('accessTypes').filter(function(val) { return val !== null; });
+			var policyType = this.rangerService.get('type')
+			_.each(XAEnums.ServiceType, function(obj){ 
+				if(that.rangerService.get('type').toUpperCase() == obj.label.toUpperCase())
+					policyType = obj.value;
+			});
+			this.groupList = new VXGroupList();
+			var params = {sortBy : 'name'};
+			this.groupList.setPageSize(100,{fetch:false});
+			this.groupList.fetch({
+					cache :true,
+					data : params
+				}).done(function(){
+					that.$('[data-customfields="groupPerms"]').html(new GroupPermList({
+						collection : that.formInputList,
+						groupList  : that.groupList,
+						model : that.model,
+						policyType 	: policyType,
+						accessTypes : accessType,
+						rangerServiceDefModel : that.rangerServiceDefModel
+					}).render().el);
+			});
+			
+			this.userList = new VXUserList();
+			var params = {sortBy : 'name'};
+			this.userList.setPageSize(100,{fetch:false});
+			this.userList.fetch({
+					cache :true,
+					data: params
+				}).done(function(){
+					that.$('[data-customfields="userPerms"]').html(new UserPermList({
+						collection : that.userPermInputList,
+						model : that.model,
+						userList : that.userList,
+						policyType 	: policyType,
+						accessTypes : accessType,
+						rangerServiceDefModel : that.rangerServiceDefModel
+					}).render().el);
+			});
+		},
+	
+		beforeSave : function(){
+			var that = this, resources = '';
+			this.model.set('service',this.rangerService.get('name'));
+			if(that.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HDFS.label.toUpperCase())
+				resources = this.model.get('path').split(',');
+			else if(that.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HIVE.label.toUpperCase()){
+				resources = "/"+this.model.get('database');
+				resources += !_.isEmpty(this.model.get('table')) ? "/"+this.model.get('table') : '';
+				resources += !_.isEmpty(this.model.get('column')) ? "/"+this.model.get('column') : '';
+				resources = resources.split(',');
+			}else if(that.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_HBASE.label.toUpperCase()){
+				resources = "/"+this.model.get('table');
+				resources += !_.isEmpty(this.model.get('column-family')) ? "/"+this.model.get('column-family') : '';
+				resources += !_.isEmpty(this.model.get('column')) ? "/"+this.model.get('column') : '';
+				resources = resources.split(',');
+			}else if(that.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_KNOX.label.toUpperCase()){
+				resources = "/"+this.model.get('topology')+"/"+this.model.get('service');
+				resources = resources.split(',');
+			}else if(that.rangerService.get('type').toUpperCase() == XAEnums.ServiceType.Service_STORM.label.toUpperCase()){
+				resources = "/"+this.model.get('topology')
+				resources = resources.split(',');
+			}
+			var rPolicyResourceList = new RangerPolicyResourceList();
+			_.each(resources, function(val){
+				var rPolicyResource = new RangerPolicyResource();
+				rPolicyResource.set('type',that.rangerService.get('type'));
+				rPolicyResource.set('value',val);
+				rPolicyResource.set('isRecursive',that.model.get('isRecursive'))
+				rPolicyResource.set('isExcludes',null)
+				rPolicyResourceList.add(rPolicyResource);
+			});
+			
+			
+			
+			
+//			this.model.set('isEnabled',this.model.get('isEnabled')+"");
+//			this.model.set('isAuditEnabled',this.model.get('isAuditEnabled')+"");
+			this.model.set('resources',rPolicyResourceList);
+			this.model.unset('isRecursive');
+			this.model.unset('path');
+			
+			//Set UserGroups Permission
+			
+			var RangerPolicyItem = Backbone.Collection.extend();
+			var policyItemList = new RangerPolicyItem();
+			this.formInputList.each(function(m){
+				if(!_.isUndefined(m.get('groupName'))){
+					var RangerPolicyItem=Backbone.Model.extend()
+					var policyItem = new RangerPolicyItem();
+					policyItem.set('groups',m.get('groupName').split(','))
+					
+					var RangerPolicyItemAccessList = Backbone.Collection.extend();
+					var rangerPlcItemAccessList = new RangerPolicyItemAccessList(m.get('accesses'));
+					policyItem.set('accesses', rangerPlcItemAccessList)
+					policyItemList.add(policyItem)
+					
+				}
+			}, this);
+			this.userPermInputList.each(function(m){
+				if(!_.isUndefined(m.get('userName'))){
+					var RangerPolicyItem=Backbone.Model.extend()
+					var policyItem = new RangerPolicyItem();
+					policyItem.set('users',m.get('userName').split(','))
+					
+					var RangerPolicyItemAccessList = Backbone.Collection.extend();
+					var rangerPlcItemAccessList = new RangerPolicyItemAccessList(m.get('accesses'));
+					policyItem.set('accesses', rangerPlcItemAccessList)
+					policyItemList.add(policyItem)
+					
+				}
+			}, this);
+			this.model.set('policyItems', policyItemList)
+			
+		},
+		/** all post render plugin initialization */
+		initializePathPlugins: function(){
+			var that= this;	
+			function split( val ) {
+				return val.split( /,\s*/ );
+			}
+			function extractLast( term ) {
+				return split( term ).pop();
+			}
+
+			this.fields[that.pathFieldName].editor.$el.bind( "keydown", function( event ) {
+				// don't navigate away from the field on tab when selecting an item
+				/*if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) {
+					event.preventDefault();
+				}
+				//TODO FIXME This is not working. We need a way so that when user enters  and presses ENTER
+				// the text box should contain /app/billing* . Currently the '*' is getting removed.
+				if ( event.keyCode === $.ui.keyCode.ENTER ) {
+					event.preventDefault();
+					event.stopPropagation();
+					$(this).tagit("createTag", "brand-new-tag");
+					//$(this).autocomplete('close');
+					//$(this).val($(this).val() + ', ');
+					
+				}*/
+			}).tagit({
+				autocomplete : {
+					cache: false,
+					source: function( request, response ) {
+						var p = $.getJSON( "service/assets/hdfs/resources", {
+							dataSourceName: that.rangerService.get('name'),
+							baseDirectory: extractLast( request.term )
+						}).done(function(data){
+							if(data.vXStrings){
+								response(data.vXStrings);
+							} else {
+								response();
+							}
+
+						}).error(function(){
+							response();
+
+						});
+						setTimeout(function(){ 
+							p.abort();
+							console.log('connection timeout for resource path request...!!');
+						}, 7000);
+					},
+					open : function(){
+						$(this).removeClass('working');
+					},
+					search: function() {
+						if(!_.isUndefined(this.value) && _.contains(this.value,',')){ 
+							_.each(this.value.split(',') , function(tag){
+								that.fields[that.pathFieldName].editor.$el.tagit("createTag", tag);
+							});
+				        	return false;
+				        }	
+						var term = extractLast( this.value );
+						$(this).addClass('working');
+						if ( term.length < 1 ) {
+							return false;
+						}
+					},
+					focus: function(event, ui) {
+						var terms = split( this.value );
+						terms.pop();
+						terms.push( ui.item.value );
+						this.value = terms.join( ", " );
+						return false;
+					},
+					select: function( event, ui ) {
+						var terms = split( this.value );
+						terms.pop();
+						terms.push( ui.item.value );
+						terms.push( "" );
+						this.value = terms.join( ", " );
+						return false;
+					}
+					
+				},
+				beforeTagAdded: function(event, ui) {
+			        // do something special
+					that.fields[that.pathFieldName].$el.removeClass('error');
+		        	that.fields[that.pathFieldName].$el.find('.help-inline').html('');
+					var tags =  [];
+			        console.log(ui.tag);
+				if(ui.tagLabel.lastIndexOf('/') < 0 || 
+			        		ui.tagLabel.lastIndexOf('/') == ui.tagLabel.length -1 && ui.tagLabel.lastIndexOf('/') != 0){
+			        	tags = ui.tagLabel.substr(0,ui.tagLabel.lastIndexOf('/'));
+			        	that.fields[that.pathFieldName].$el.addClass('error');
+			        	that.fields[that.pathFieldName].$el.find('.help-inline').html('Please enter valid resource path : ' + ui.tagLabel);
+			        	return false;
+			        }
+//			        this.value = tags;
+			        /*if(_.contains(ui.tagLabel,','))
+			        	tags = ui.tagLabel.split(',');
+			        	this.value = tags;*/
+					}
+			});
+			/*this.fields.name.editor.$el.tagit({
+				beforeTagAdded: function(event, ui) {
+		        // do something special
+				var tags =  [];
+		        console.log(ui.tag);
+		        if(_.contains(ui.tagLabel,','))
+		        	tags = ui.tagLabel.split(',');
+		        	this.value = tags;
+				}
+			});*/
+			
+		},
+		getPlugginAttr :function(autocomplete, searchType){
+			var that =this;
+			var type = searchType;
+			if(!autocomplete)
+				return{tags : true,width :'220px',multiple: true,minimumInputLength: 1};
+			else {
+				
+				
+				return {
+					closeOnSelect : true,
+					//placeholder : 'Select User',
+					tags:true,
+					multiple: true,
+					minimumInputLength: 1,
+					width :'220px',
+					tokenSeparators: [",", " "],
+					initSelection : function (element, callback) {
+						var data = [];
+						$(element.val().split(",")).each(function () {
+							data.push({id: this, text: this});
+						});
+						callback(data);
+					},
+					createSearchChoice: function(term, data) {
+						if ($(data).filter(function() {
+							return this.text.localeCompare(term) === 0;
+						}).length === 0) {
+							return {
+								id : term,
+								text: term
+							};
+						}
+					},
+					/*query: function (query) {
+						var url = "service/assets/hive/resources";
+						var data = _.extend(that.getDataParams(type, query.term));
+						//var results = [ {id: query.term, path: query.term}];
+
+						$.get(url, data, function (resp) {
+							var serverRes = [];
+							if(resp.resultSize){
+								serverRes = resp.vXStrings.map(function(m, i){	return {id : m.text, path: m.text};	});
+							}
+							query.callback({results: serverRes});
+						}, 'json');
+
+						//query.callback({results: results});
+					},*/
+
+					ajax: { 
+						url: "service/assets/hive/resources",
+						dataType: 'json',
+						params : {
+							timeout: 3000
+						},
+						cache: false,
+						data: function (term, page) {
+							return _.extend(that.getDataParams(type, term));
+							
+						},
+						results: function (data, page) { 
+							var results = [];
+							if(!_.isUndefined(data)){
+								if(data.resultSize != "0"){
+									results = data.vXStrings.map(function(m, i){	return {id : m.value, text: m.value};	});
+								}
+							}
+							return { 
+								results : results
+							};
+						},
+						transport: function (options) {
+							$.ajax(options).error(function() { 
+								console.log("ajax failed");
+								this.success({
+									resultSize : 0
+								});
+							});
+							/*$.ajax.error(function(data) { 
+								console.log("ajax failed");
+								return {
+									results : []
+								};
+							});*/
+
+						}
+
+					},	
+					formatResult : function(result){
+						return result.text;
+					},
+					formatSelection : function(result){
+						return result.text;
+					},
+					formatNoMatches : function(term){
+						switch (type){
+							case  that.type.DATABASE :return localization.tt("msg.enterAlteastOneCharactere");
+							case  that.type.TABLE :return localization.tt("msg.enterAlteastOneCharactere");
+							case  that.type.COLUMN :return localization.tt("msg.enterAlteastOneCharactere");
+							default : return "No Matches found";
+						}
+					}
+				};	
+			}
+		},
+	});
+
+	return PolicyForm;
+});

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyTableLayout.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyTableLayout.js b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyTableLayout.js
new file mode 100644
index 0000000..b0f3809
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policies/RangerPolicyTableLayout.js
@@ -0,0 +1,388 @@
+/*
+ * 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.
+ */
+
+ 
+define(function(require){
+    'use strict';
+
+	var Backbone		= require('backbone');
+	var XAEnums 		= require('utils/XAEnums');
+	var XALinks 		= require('modules/XALinks');
+	var XAGlobals 		= require('utils/XAGlobals');
+	var SessionMgr 		= require('mgrs/SessionMgr');
+	var XAUtil			= require('utils/XAUtils');
+	
+	var XABackgrid		= require('views/common/XABackgrid');
+	var XATableLayout	= require('views/common/XATableLayout');
+	var localization	= require('utils/XALangSupport');
+	var vFolderInfo = require('views/folders/FolderInfo');
+	var RangerPolicyTableLayoutTmpl = require('hbs!tmpl/policies/RangerPolicyTableLayout_tmpl');
+
+	require('backgrid-filter');
+	require('backgrid-paginator');
+	require('bootbox');
+
+	var PolicyTableLayout = Backbone.Marionette.Layout.extend(
+	/** @lends PolicyTableLayout */
+	{
+		_viewName : 'PolicyTableLayout',
+		
+    	template: RangerPolicyTableLayoutTmpl,
+
+		templateHelpers : function(){
+			/*return {
+				isSysAdmin 	: this.isSysAdmin,
+				assetId 	: this.assetModel.id,
+				assetModel 	: this.assetModel,
+				version 	: XAGlobals.version
+			};*/
+			return {
+				rangerService:this.rangerService
+			};
+		},
+        
+    	breadCrumbs : function(){
+    		return [XALinks.get('RepositoryManager'),XALinks.get('ManagePolicies',{model : this.rangerService})];
+//    		return [];
+   		},        
+
+		/** Layout sub regions */
+    	regions: {
+			'rTableList'	: 'div[data-id="r_table"]',
+		},
+
+    	// /** ui selector cache */
+    	ui: {
+			'btnDeletePolicy' : '[data-name="deletePolicy"]',
+			'btnShowMore' : '[data-id="showMore"]',
+			'btnShowLess' : '[data-id="showLess"]',
+			'visualSearch' : '.visual_search'
+		},
+
+		/** ui events hash */
+		events: function() {
+			var events = {};
+			events['click ' + this.ui.btnDeletePolicy]  = 'onDelete';
+			events['click ' + this.ui.btnShowMore]  = 'onShowMore';
+			events['click ' + this.ui.btnShowLess]  = 'onShowLess';
+			
+			return events;
+		},
+
+    	/**
+		* intialize a new PolicyTableLayout Layout 
+		* @constructs
+		*/
+		initialize: function(options) {
+			console.log("initialized a PolicyTableLayout Layout");
+
+			_.extend(this, _.pick(options,'rangerService'));
+			
+		/*	this.collection.extraSearchParams = {
+//					resourceType : XAEnums.AssetType.ASSET_HDFS.value,
+					assetId : this.assetModel.id
+			};*/
+			this.bindEvents();
+//			this.isSysAdmin = SessionMgr.isSystemAdmin();
+		},
+
+		/** all events binding here */
+		bindEvents : function(){
+			//this.listenTo(this.collection, "remove", this.render, this);
+			/*this.listenTo(this.model, "change:foo", this.modelChanged, this);*/
+			/*this.listenTo(communicator.vent,'someView:someEvent', this.someEventHandler, this)'*/
+			//this.listenTo(this.collection, "sync", this.render, this);
+			//
+		},
+
+		/** on render callback */
+		onRender: function() {
+//			this.initializePlugins();
+//			this.addVisualSearch();
+			this.renderTable();
+//			XAUtil.highlightDisabledPolicy(this);
+		},
+
+		/** all post render plugin initialization */
+		initializePlugins: function(){
+		},
+		renderTable : function(){
+			var that = this;
+			this.rTableList.show(new XATableLayout({
+				columns: this.getColumns(),
+				collection: this.collection,
+				includeFilter : false,
+				gridOpts : {
+//					row: TableRow,
+					header : XABackgrid,
+					emptyText : 'No Policies found!'
+				},
+			}));
+		},
+
+		getColumns : function(){
+			var that = this;
+			var cols = {
+				name : {
+					cell : "uri",
+					href: function(model){
+						return '#!/service/'+that.rangerService.id+'/policies/'+model.id+'/edit';
+					},
+					label	: localization.tt("lbl.policyName"),
+					editable: false,
+					sortable : false
+				},	
+				resources : {
+					cell : "html",
+					label	: localization.tt("lbl.resourcePath"),
+					editable: false,
+					sortable : false,
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							return _.map(rawValue, function(resource){ return resource.value;}).toString();
+						}
+					})
+				},
+				isEnabled:{
+					label:localization.tt('lbl.status'),
+					cell :"html",
+					editable:false,
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							return rawValue ? '<label class="label label-success">Enabled</label>' : '<label class="label label-important">Disabled</label>';
+						}
+					}),
+					click : false,
+					drag : false,
+					sortable : false
+				},
+				isAuditEnabled:{
+					label:localization.tt('lbl.auditLogging'),
+					cell :"html",
+					editable:false,
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							return rawValue ? '<label class="label label-success">Enabled</label>' : '<label class="label label-important">Disabled</label>';
+						}
+					}),
+					click : false,
+					drag : false,
+					sortable : false
+				},
+				/*isRecursive:{
+					label:localization.tt('lbl.includesAllPathsRecursively'),
+					cell :"html",
+					editable:false,
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							var status;
+							_.each(_.toArray(XAEnums.BooleanValue),function(m){
+								if(parseInt(rawValue) == m.value){
+									status =  (m.label == XAEnums.BooleanValue.BOOL_TRUE.label) ? true : false;
+								}	
+							});
+							return status ? '<label class="label label-success">YES</label>' : '<label class="label label">NO</label>';
+						}
+					}),
+					click : false,
+					drag : false,
+					sortable : false
+				},
+				permMapList : {
+					reName : 'groupName',
+					cell	: Backgrid.HtmlCell.extend({className: 'cellWidth-1'}),
+					label : localization.tt("lbl.groups"),
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							if(!_.isUndefined(rawValue))
+								return XAUtil.showGroups(rawValue);
+							else
+							return '--';
+						}
+					}),
+					editable : false,
+					sortable : false
+				},
+				auditList : {
+					label : localization.tt("lbl.auditLogging"),
+					cell: "html",
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue, model) {
+							return model.has('auditList') ? '<label class="label label-success">ON</label>' : '<label class="label label">OFF</label>';
+						}
+					}),
+					click : false,
+					drag : false,
+					sortable : false,
+					editable : false
+				},
+				isEncrypt:{
+					label:localization.tt("lbl.encrypted"),
+					cell :"Switch",
+					editable:false,
+				//	canHeaderFilter : true,
+				//	headerFilterList :[{label : 'ON',value : 1},{label :'OFF' ,value:2}],
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							var status;
+							_.each(_.toArray(XAEnums.BooleanValue),function(m){
+								if(parseInt(rawValue) == m.value){
+									status =  (m.label == XAEnums.BooleanValue.BOOL_TRUE.label) ? true : false;
+									return ;
+								}	
+							});
+							//You can use rawValue to custom your html, you can change this value using the name parameter.
+							return status;
+						}
+					}),
+					click : false,
+					drag : false,
+					onText : 'ON',
+					offText : 'OFF',
+					sortable : false
+				},
+				resourceStatus:{
+					label:localization.tt('lbl.status'),
+					cell :"html",
+					editable:false,
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue) {
+							var status;
+							_.each(_.toArray(XAEnums.BooleanValue),function(m){
+								if(parseInt(rawValue) == m.value){
+									status =  (m.label == XAEnums.BooleanValue.BOOL_TRUE.label) ? true : false;
+								}	
+							});
+							return status ? '<label class="label label-success">Enabled</label>' : '<label class="label label-important">Disabled</label>';
+						}
+					}),
+					click : false,
+					drag : false,
+					sortable : false
+				},
+				permissions : {
+					cell :  "html",
+					label : localization.tt("lbl.action"),
+					formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+						fromRaw: function (rawValue,model) {
+							return '<a href="#!/hdfs/'+model.get('assetId')+'/policy/'+model.id+'" class="btn btn-mini" title="Edit"><i class="icon-edit icon-large" /></a>\
+									<a href="javascript:void(0);" data-name ="deletePolicy" data-id="'+model.id+'"  class="btn btn-mini btn-danger" title="Delete"><i class="icon-trash icon-large" /></a>';
+							//You can use rawValue to custom your html, you can change this value using the name parameter.
+						}
+					}),
+					editable: false,
+					sortable : false
+
+				}
+*/				
+			};
+			return this.collection.constructor.getTableCols(cols, this.collection);
+		},
+		onDelete :function(e){
+			var that = this;
+			var VXResource = require('models/VXResource');
+			var obj = this.collection.get($(e.currentTarget).data('id'));
+			var model = new VXResource(obj.attributes);
+			model.collection = this.collection;
+			XAUtil.confirmPopup({
+				//msg :localize.tt('msg.confirmDelete'),
+				msg :'Are you sure want to delete ?',
+				callback : function(){
+					XAUtil.blockUI();
+					model.destroy({
+						success: function(model, response) {
+							XAUtil.blockUI('unblock');
+							that.collection.remove(model.get('id'));
+							$(that.rFolderInfo.el).hide();
+							XAUtil.notifySuccess('Success', localization.tt('msg.policyDeleteMsg'));
+							if(that.collection.length ==  0){
+								that.renderTable();
+								that.collection.fetch();
+							}
+						},
+						error: function (model, response, options) {
+							XAUtil.blockUI('unblock');
+							if ( response && response.responseJSON && response.responseJSON.msgDesc){
+								    XAUtil.notifyError('Error', response.responseJSON.msgDesc);
+							    }else
+							    	XAUtil.notifyError('Error', 'Error deleting Policy!');
+							    console.log("error");
+						}
+					});
+				}
+			});
+		},
+		onShowMore : function(e){
+			var id = $(e.currentTarget).attr('policy-group-id');
+			this.rTableList.$el.find('[policy-group-id="'+id+'"]').show();
+			$('[data-id="showLess"][policy-group-id="'+id+'"]').show();
+			$('[data-id="showMore"][policy-group-id="'+id+'"]').hide();
+		},
+		onShowLess : function(e){
+			var id = $(e.currentTarget).attr('policy-group-id');
+			this.rTableList.$el.find('[policy-group-id="'+id+'"]').slice(4).hide();
+			$('[data-id="showLess"][policy-group-id="'+id+'"]').hide();
+			$('[data-id="showMore"][policy-group-id="'+id+'"]').show();
+		},
+		addVisualSearch : function(){
+			var that = this;
+			var searchOpt = ['Resource Path','Group','Policy Name'];//,'Start Date','End Date','Today'];
+			var serverAttrName  = [{text : "Resource Path", label :"name"}, {text : "Group", label :"groupName"},
+								   {text : "Policy Name", label :"policyName"}];
+			                     // {text : 'Start Date',label :'startDate'},{text : 'End Date',label :'endDate'},
+				                 //  {text : 'Today',label :'today'}];
+									
+			var pluginAttr = {
+				      placeholder :localization.tt('h.searchForPolicy'),
+				      container : this.ui.visualSearch,
+				      query     : '',
+				      callbacks :  { 
+				    	  valueMatches :function(facet, searchTerm, callback) {
+								switch (facet) {
+									case 'Result':
+										callback(XAUtil.enumToSelectLabelValuePairs(XAEnums.AuthStatus));
+										break;
+									case 'Login Type':
+										callback(XAUtil.enumToSelectLabelValuePairs(XAEnums.AuthType));
+										break;	
+									/*case 'Start Date' :
+										setTimeout(function () { XAUtil.displayDatepicker(that.ui.visualSearch, callback); }, 0);
+										break;
+									case 'End Date' :
+										setTimeout(function () { XAUtil.displayDatepicker(that.ui.visualSearch, callback); }, 0);
+										break;
+									case 'Today'	:
+										var today = Globalize.format(new Date(),"yyyy/mm/dd");
+										callback([today]);
+										break;*/
+								}     
+			            	
+							}
+				      }
+				};
+			window.vs = XAUtil.addVisualSearch(searchOpt,serverAttrName, this.collection,pluginAttr);
+		},
+		/** on close */
+		onClose: function(){
+		}
+
+	});
+
+	return PolicyTableLayout; 
+});

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policies/UserPermList.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policies/UserPermList.js b/security-admin/src/main/webapp/scripts/views/policies/UserPermList.js
new file mode 100644
index 0000000..59b7eed
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policies/UserPermList.js
@@ -0,0 +1,430 @@
+/*
+ * 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.
+ */
+
+ /*
+ * 
+ */
+define(function(require) {
+    'use strict';
+    
+	var Backbone	= require('backbone');
+    	var App         = require('App');
+	var XAEnums		= require('utils/XAEnums');
+	var XAUtil			= require('utils/XAUtils');
+	var localization	= require('utils/XALangSupport');
+	var VXUser		= require('models/VXUser');
+	require('bootstrap-editable');
+    	
+	var UserPermissionItem = Backbone.Marionette.ItemView.extend({
+		_msvName : 'UserPermissionItem',
+		template : require('hbs!tmpl/common/UserPermissionItem'),
+		tagName : 'tr',
+		templateHelpers : function(){
+						
+			return {
+				permissions 	: this.getPerms(),
+				policyKnox 		: this.policyType == XAEnums.ServiceType.Service_KNOX.value ? true :false,
+//				policyStorm 	: this.policyType == XAEnums.ServiceType.Service_STORM.value ? true :false,
+			   isModelNew		: !this.model.has('editMode'),
+			   stormPerms		: this.stormPermsIds.length == 14 ? _.union(this.stormPermsIds,[-1]) : this.stormPermsIds
+			};
+		},
+		ui : {
+			selectUsers		: '[data-js="selectUsers"]',
+			inputIPAddress	: '[data-js="ipAddress"]',
+			tags			: '[class=tags]'
+		},
+		events : {
+			'click [data-action="delete"]'	: 'evDelete',
+			'click td'						: 'evClickTD',
+			'change [data-js="selectUsers"]': 'evSelectUser',
+			'change [data-js="ipAddress"]'	: 'evIPAddress'
+		},
+
+		initialize : function(options) {
+			_.extend(this, _.pick(options, 'userList','policyType','accessTypes'));
+            //this.subjectList = this.mStudent.getSubjectList();
+			this.stormPermsIds = [];
+			if(this.policyType == XAEnums.AssetType.ASSET_STORM.value){
+				if(this.model.has('editMode') && this.model.get('editMode')){
+					this.stormPermsIds = _.map(this.model.get('_vPermList'), function(p){
+						if(XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value != p.permType)
+							return p.permType;
+					});
+				}
+			}
+		},
+ 
+		onRender : function() {
+			var that = this;
+			
+			if(this.model.get('userName') != undefined){
+				this.ui.selectUsers.val(this.model.get('userName').split(','));
+			}
+			if(!_.isUndefined(this.model.get('ipAddress'))){
+				this.ui.inputIPAddress.val(this.model.get('ipAddress').toString());
+			}
+			
+			if(this.model.has('editMode') && this.model.get('editMode')){
+				_.each(this.model.get('accesses'), function(p){
+					if(p.value)
+						this.$el.find('input[data-name="' + p.type + '"]').attr('checked', 'checked');
+				},this);
+			}
+			if(this.policyType == XAEnums.AssetType.ASSET_STORM.value)
+				this.renderStormPerms();
+			
+			this.createSelectUserDropDown();
+			this.userDropDownChange();
+			
+			this.accessItems = _.map(this.getPerms(), function(perm){ return {'type':perm.label,'value': false}});
+		},
+		checkDirtyFieldForDropDown : function(e){
+			//that.model.has('groupId')
+			var userIdList =[];
+			if(!_.isUndefined(this.model.get('userId')))
+				userIdList = this.model.get('userId').split(',');
+			XAUtil.checkDirtyField(userIdList, e.val, $(e.currentTarget));
+		},
+		toggleAddButton : function(e){
+			var temp = [];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('userId'))){
+					temp.push.apply(temp, m.get('userId').split(','));
+					
+				}
+			});
+			if(!_.isUndefined(e)){
+				if( !_.isUndefined(e.added) && ((temp.length + 1) == this.userList.length)) 
+					$('[data-action="addUser"]').hide();
+				if(!_.isUndefined(e.removed))
+					$('[data-action="addUser"]').show();
+			}else{
+				$('[data-action="addUser"]').show();
+			}
+		},
+		evDelete : function(){
+			var that = this;
+			this.collection.remove(this.model);
+			this.toggleAddButton();
+		},
+		evClickTD : function(e){
+			var that = this;
+			var $el = $(e.currentTarget),permList =[],perms =[];
+			if($(e.toElement).is('td')){
+				var $checkbox = $el.find('input');
+				$checkbox.is(':checked') ? $checkbox.prop('checked',false) : $checkbox.prop('checked',true);  
+			}
+			var curPerm = $el.find('input').data('id');
+			var curPermName = $el.find('input').data('name');
+			if(!_.isUndefined(curPerm)){
+				var perms = [];
+				if(this.model.has('accesses')){
+					if(_.isArray(this.model.get('accesses')))
+						perms = this.model.get('accesses');
+					else
+						perms.push(this.model.get('accesses'));
+				}
+				
+				
+				if($el.find('input[type="checkbox"]').is(':checked')){
+					_.each(that.accessItems, function(obj){ if(obj.type == curPermName) obj.value = true });
+					if(curPerm == XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value){
+						$el.parent().find('input[type="checkbox"]:not(:checked)[data-id!="'+curPerm+'"]').map(function(){
+							_.each(that.accessItems, function(obj){ if(obj.type == $(this).data('name')) obj.value = true }, this);
+						});
+						//	this.model.set('_vPermList', perms);
+						$el.parent().find('input[type="checkbox"]').prop('checked',true);
+					}
+				} else {
+					_.each(that.accessItems, function(obj){ if(obj.type == curPermName ) obj.value = false }, this);
+				}
+//				this.checkDirtyFieldForCheckBox(perms);
+				if(!_.isEmpty(that.accessItems)){
+					this.model.set('accesses', that.accessItems);
+				} else {
+					this.model.unset('accesses');
+				}
+			}
+		},
+		checkDirtyFieldForCheckBox : function(perms){
+			var permList = [];
+			if(!_.isUndefined(this.model.get('_vPermList')))
+				permList = _.map(this.model.attributes._vPermList,function(obj){return obj.permType;});
+			perms = _.map(perms,function(obj){return obj.permType;});
+			XAUtil.checkDirtyField(permList, perms, this.$el);
+		},
+		createSelectUserDropDown :function(){
+			var that = this;
+			if(this.model.has('editMode') && !_.isEmpty(this.ui.selectUsers.val())){
+				var temp = this.ui.selectUsers.val().split(",");
+				_.each(temp , function(id){
+					if(_.isUndefined(that.userList.where({ name : name}))){
+						var user = new VXUser({name: name});
+						user.fetch({async:false}).done(function(){
+							that.userList.add(user);
+						});
+					}
+				});
+			}
+			this.userArr = this.userList.map(function(m){
+				return { id : m.id+"" , text : m.get('name')};
+			});
+			this.ui.selectUsers.select2({
+				closeOnSelect : true,
+				placeholder : 'Select User',
+		//		maximumSelectionSize : 1,
+				width :'220px',
+				tokenSeparators: [",", " "],
+				tags : this.userArr, 
+				initSelection : function (element, callback) {
+					var data = [];
+					$(element.val().split(",")).each(function () {
+						var obj = _.findWhere(that.userArr,{ text : this });	
+						data.push({ id : obj.id, text: this });
+					});
+					callback(data);
+				},
+				createSearchChoice: function(term, data) {
+					/*if ($(data).filter(function() {
+						return this.text.localeCompare(term) === 0;
+						//return this.value == (term) ?  true : false;
+					}).length === 0) {
+						return {
+							id : term,
+							text: term
+						};
+					}*/
+				},
+				ajax: { 
+					url: "service/xusers/users",
+					dataType: 'json',
+					data: function (term, page) {
+						return {name : term};
+					},
+					results: function (data, page) { 
+						var results = [],selectedVals=[];
+						/*if(!_.isEmpty(that.ui.selectUsers.select2('val')))
+							selectedVals = that.ui.selectUsers.select2('val');
+						selectedVals.push.apply(selectedVals, that.getUsersSelectdValues());
+						selectedVals = $.unique(selectedVals);*/
+						selectedVals = that.getUsersSelectdValues();
+						if(data.resultSize != "0"){
+							//if(data.vXUsers.length > 1){
+
+								results = data.vXUsers.map(function(m, i){	return {id : m.id+"", text: m.name};	});
+								if(!_.isEmpty(selectedVals))
+									results = XAUtil.filterResultByIds(results, selectedVals);
+								//console.log(results.length);
+								return {results : results};
+						//	}
+						//	results = [{id : data.vXUsers.id+"", text: data.vXUsers.name}];
+						//	return {results : results};
+						}
+						return {results : results};
+					}
+				},	
+				formatResult : function(result){
+					return result.text;
+				},
+				formatSelection : function(result){
+					return result.text;
+				},
+				formatNoMatches: function(result){
+					return 'No user found.';
+				}
+				
+			}).on('select2-focus', XAUtil.select2Focus);
+		},
+		userDropDownChange : function(){
+			var that = this;
+			this.ui.selectUsers.on('change',function(e){
+				//	console.log(e.currentTarget.value);
+					that.checkDirtyFieldForDropDown(e);
+					that.toggleAddButton(e);
+					var duplicateUsername = false;
+					if(e.removed != undefined){
+						var gIdArr = [],gNameArr = [];
+						gIdArr = _.without(that.model.get('userId').split(','), e.removed.id);
+						if(that.model.get('userName') != undefined)
+							gNameArr = _.without(that.model.get('userName').split(','), e.removed.text);
+						if(!_.isEmpty(gIdArr)){
+							that.model.set('userId',gIdArr.join(','));
+							that.model.set('userName',gNameArr.join(','));
+						}else{
+							that.model.unset('userId');
+							that.model.unset('userName');
+						}
+						return;
+						
+					}
+					if(!_.isUndefined(e.added)){
+							that.model.set('userId', e.currentTarget.value);
+							var userNameList = _.map($(e.currentTarget).select2("data"), function(obj){return obj.text});
+							that.model.set('userName',userNameList.toString())
+					}
+				});
+		},
+		getUsersSelectdValues : function(){
+			var vals = [],selectedVals = [];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('userId'))){
+					vals.push.apply(vals, m.get('userId').split(','));
+				}
+			});
+			if(!_.isEmpty(this.ui.selectUsers.select2('val')))
+				selectedVals = this.ui.selectUsers.select2('val');
+			vals.push.apply(vals , selectedVals);
+			vals = $.unique(vals);
+			return vals;
+		},
+		evIPAddress :function(e){
+			if(!_.isEmpty($(e.currentTarget).val()))
+				this.model.set('ipAddress',$(e.currentTarget).val().split(','));
+			else
+				this.model.unset('ipAddress');
+		},
+		renderStormPerms :function(){
+			var that = this;
+			var permArr = _.pick(XAEnums.XAPermType,  XAUtil.getStormActions(this.policyType));
+			this.stormPerms =  _.map(permArr,function(m){return {text:m.label, value:m.value};});
+			this.stormPerms.push({'value' : -1, 'text' : 'Select/Deselect All'});
+			this.ui.tags.editable({
+			    placement: 'right',
+//			    emptytext : 'Please select',
+			    source: this.stormPerms,
+			    display: function(idList,srcData) {
+			    	if(_.isEmpty(idList.toString())){
+			    		$(this).html('');
+			    		return;
+			    	}
+			    	if(!_.isArray(idList))
+			    		idList = [idList];
+//			    	that.checkDirtyFieldForGroup(values);
+			    	var permTypeArr = [];
+		    		var valArr = _.map(idList, function(id){
+		    			if(!(parseInt(id) <= 0) && (!_.isNaN(parseInt(id)))){
+			    			var obj = _.findWhere(srcData,{'value' : parseInt(id)});
+			    			permTypeArr.push({permType : obj.value});
+			    			return "<span class='label label-inverse'>" + obj.text + "</span>";
+		    			}
+		    		});
+		    		if(that.model.has('_vPermList')){
+                        var adminPerm = _.where(that.model.get('_vPermList'),{'permType': XAEnums.XAPermType.XA_PERM_TYPE_ADMIN.value });
+                        permTypeArr = _.isEmpty(adminPerm) ? permTypeArr : _.union(permTypeArr,adminPerm);
+                    }
+                    that.model.set('_vPermList', permTypeArr);
+		    		
+		    		$(this).html(valArr.join(" "));
+			    },
+			});
+			this.$('[id^="tags-edit-"]').click(function(e) {
+			    e.stopPropagation();
+			    e.preventDefault();
+			    that.$('#' + $(this).data('editable') ).editable('toggle');
+			    that.$('input[type="checkbox"][value="-1"]').click(function(e){
+					var checkboxlist =$(this).closest('.editable-checklist').find('input[type="checkbox"][value!=-1]');
+					$(this).is(':checked') ? checkboxlist.prop('checked',true) : checkboxlist.prop('checked',false); 
+					
+				});
+			});
+		},
+		getPerms : function(){
+			var permList = _.map(this.accessTypes,function(type){ return type.label});
+			return _.map(permList, function(perm){ return _.findWhere(XAEnums.XAPermType,{label:perm})})
+		}
+
+	});
+
+
+
+	return Backbone.Marionette.CompositeView.extend({
+		_msvName : 'UserPermissionList',
+		template : require('hbs!tmpl/common/UserPermissionList'),
+		//tagName : 'ul', 
+		//className : 'timeline-container',
+		templateHelpers :function(){
+			return {
+				permHeaders : this.getPermHeaders()
+			};
+		},
+		getItemView : function(item){
+			if(!item){
+				return;
+			}
+			return UserPermissionItem;
+		},
+		itemViewContainer : ".js-formInput",
+		itemViewOptions : function() {
+			return {
+				'collection' : this.collection,
+				'userList' : this.userList,
+				'policyType'	: this.policyType,
+				'accessTypes' : this.accessTypes
+			};
+		},
+		events : {
+			'click [data-action="addUser"]' : 'addNew'
+		},
+		initialize : function(options) {
+			_.extend(this, _.pick(options, 'userList','policyType','accessTypes','rangerServiceDefModel'));
+			//this.listenTo(this.collection, 'removeAddBtn', this.render, this);
+			/*if(options.model.isNew())
+				this.collection.add(new Backbone.Model());*/
+			if(this.collection.length == 0)
+				this.collection.add(new Backbone.Model());
+				
+		},
+		onRender : function(){
+			//console.log("onRender of ArtifactFormNoteList called");
+			this.toggleAddButton();
+		},
+		addNew : function(){
+			var that =this;
+			this.collection.add(new Backbone.Model());
+			this.toggleAddButton();
+		},
+		toggleAddButton : function(){
+			var userIds=[];
+			this.collection.each(function(m){
+				if(!_.isUndefined(m.get('userId'))){
+					var temp = m.get('userId').split(',');
+					userIds.push.apply(userIds,temp);
+				}
+			});
+			if(userIds.length == this.userList.length)
+				this.$('button[data-action="addUser"]').hide();
+			else
+				this.$('button[data-action="addUser"]').show();
+		},
+		getPermHeaders : function(){
+			var permList = _.map(this.accessTypes,function(type){ return type.label});
+			if(!_.isEmpty(this.rangerServiceDefModel.get('policyConditions'))){
+				_.each(this.rangerServiceDefModel.get('policyConditions'), function(cond){
+					if(!_.isNull(cond) && !_.isNull(cond.label)) permList.unshift(cond.label);
+				});
+			}
+			permList.unshift(localization.tt('lbl.selectGroup'));
+			permList.push("");
+			return permList;
+		},
+	
+	});
+
+});

http://git-wip-us.apache.org/repos/asf/incubator-ranger/blob/9d85cb76/security-admin/src/main/webapp/scripts/views/policymanager/ServiceLayout.js
----------------------------------------------------------------------
diff --git a/security-admin/src/main/webapp/scripts/views/policymanager/ServiceLayout.js b/security-admin/src/main/webapp/scripts/views/policymanager/ServiceLayout.js
new file mode 100644
index 0000000..0c29c2c
--- /dev/null
+++ b/security-admin/src/main/webapp/scripts/views/policymanager/ServiceLayout.js
@@ -0,0 +1,106 @@
+/*
+ * 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.
+ */
+
+ 
+define(function(require){
+    'use strict';
+
+	var Backbone			= require('backbone');
+
+	var XALinks 			= require('modules/XALinks');
+	var XAEnums 			= require('utils/XAEnums');
+	var XAUtil				= require('utils/XAUtils');
+	var SessionMgr 			= require('mgrs/SessionMgr');
+	var RangerServiceList 	= require('collections/RangerServiceList');
+	
+	var ServicemanagerlayoutTmpl = require('hbs!tmpl/common/ServiceManagerLayout_tmpl');
+	return Backbone.Marionette.Layout.extend(
+	/** @lends Servicemanagerlayout */
+	{
+		_viewName : name,
+		
+    	template: ServicemanagerlayoutTmpl,
+
+		templateHelpers: function(){
+			var groupedServices = this.services.groupBy("type");
+
+			return {
+				isSysAdmin : SessionMgr.isSystemAdmin(),
+				serviceDefs : this.collection.models,
+				services : groupedServices
+			};
+		},
+    	breadCrumbs :[XALinks.get('RepositoryManager')],
+
+		/** Layout sub regions */
+    	regions: {},
+
+    	/** ui selector cache */
+    	ui: {},
+
+		/** ui events hash */
+		events : function(){
+			var events = {};
+			return events;
+		},
+    	/**
+		* intialize a new Servicemanagerlayout Layout 
+		* @constructs
+		*/
+		initialize: function(options) {
+			console.log("initialized a Servicemanagerlayout Layout");
+			this.services = new RangerServiceList();	
+			_.extend(this, _.pick(options, 'collection'));
+			this.bindEvents();
+			this.initializeServices();
+		},
+
+		/** all events binding here */
+		bindEvents : function(){
+			/*this.listenTo(communicator.vent,'someView:someEvent', this.someEventHandler, this)'*/
+			this.listenTo(this.collection, "sync", this.render, this);
+			this.listenTo(this.collection, "request", function(){
+				this.$('[data-id="r_tableSpinner"]').removeClass('display-none').addClass('loading');
+			}, this);
+		},
+
+		/** on render callback */
+		onRender: function() {
+			this.$('[data-id="r_tableSpinner"]').removeClass('loading').addClass('display-none');
+			this.initializePlugins();
+		},
+
+		/** all post render plugin initialization */
+		initializePlugins: function(){
+
+		},
+
+		initializeServices : function(){
+			this.services.fetch({
+			   cache : false,
+			   async : false
+			});
+
+		},
+		/** on close */
+		onClose: function(){
+		}
+
+	});
+});