moonv4 cleanup

Change-Id: Icef927f3236d985ac13ff7376f6ce6314b2b39b0
Signed-off-by: WuKong <rebirthmonkey@gmail.com>

4 files changed, 1127 insertions, 0 deletions

diff --git a/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-edit.tpl.html b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-edit.tpl.html
new file mode 100755
index 00000000..fa2f93c0
--- /dev/null
+++ b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-edit.tpl.html
@@ -0,0 +1,166 @@
+<div>
+
+    <div class="col-md-4 col-sm-4 col-xs-4">
+        <a class="btn btn-primary" type="button" style="white-space: normal;" ng-click="edit.fromList = !edit.fromList">
+            <span ng-if="!edit.fromList" data-translate="moon.policy.perimeter.edit.action.list">Add from the list</span>
+            <span ng-if="edit.fromList" data-translate="moon.policy.perimeter.edit.action.new">Add a new Perimeter</span>
+        </a>
+    </div>
+
+    <div class="col-md-8 col-sm-8 col-xs-8">
+
+        <form name="selectMetaData" ng-if="edit.fromList" class="form-horizontal" role="form"  >
+
+            <div class="form-group" >
+
+                <ui-select ng-model="edit.selectedPerimeter" name="object">
+
+                    <ui-select-match placeholder="(None)" ng-bind="$select.selected.name"></ui-select-match>
+                    <ui-select-choices repeat="aPerimeter in edit.list">
+                        <div ng-value="aPerimeter" ng-bind="aPerimeter.name"></div>
+                    </ui-select-choices>
+
+                </ui-select>
+
+            </div>
+
+            <div class="form-group">
+
+                <div class="pull-left col-md-4 col-sm-4 col-xs-4">
+
+                    <a href="" ng-disabled="edit.loading || !edit.selectedPerimeter" ng-click="edit.deletePerimeter()" class="btn btn-warning">
+                        <span class="glyphicon glyphicon-trash"></span>
+                        <span data-translate="moon.policy.perimeter.edit.action.delete">Delete</span>
+                    </a>
+
+                </div>
+
+                <div class="pull-right col-md-7 col-md-offset-1 col-sm-7 col-sm-offset-1 col-xs-7 col-xs-offset-1 ">
+
+                    <a href="" ng-disabled="edit.loading || !edit.selectedPerimeter" ng-click="edit.addToPolicy()" class="btn btn-warning" style="white-space: normal;">
+                        <span class="glyphicon glyphicon-link"></span>
+                        <span data-translate="moon.policy.perimeter.edit.action.add">Add the selected Perimeter</span>
+                    </a>
+
+                </div>
+
+            </div>
+
+            <moon-loader ng-if="edit.loading"></moon-loader>
+
+        </form>
+
+        <form ng-if="!edit.fromList" class="form-horizontal" role="form" name="edit.form">
+
+            <div class="form-group" ng-class="{'has-error': edit.form.name.$invalid && edit.form.name.$dirty}">
+
+                <label for="name" class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.name">Name</label>
+
+                <div class="col-sm-6">
+
+                    <input name="name" id="name" class="form-control" type="text" data-ng-model="edit.perimeter.name" required />
+
+                    <div class="help-block" ng-show="edit.form.name.$dirty && edit.form.name.$invalid">
+                        <small class="error" ng-show="edit.form.name.$error.required" data-translate="moon.policy.perimeter.edit.check.name.required">Name is required</small>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="form-group">
+
+                <label for="description" class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.description">Description</label>
+                <div class="col-sm-6">
+                    <textarea id="description" name="description" class="form-control" data-ng-model="edit.perimeter.description"></textarea>
+                </div>
+
+            </div>
+
+            <!--
+            <div class="form-group">
+
+                <label for="partnerId" class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.partnerId">Partner Id</label>
+
+                <div class="col-sm-6">
+                    <input name="partnerId" id="partnerId" class="form-control" type="text" data-ng-model="edit.perimeter.partnerId" />
+                </div>
+
+            </div>
+            -->
+
+
+            <div class="form-group" ng-if="edit.perimeterType === edit.subjectType" ng-class="{'has-error': edit.form.email.$invalid && edit.form.email.$dirty}">
+
+                <label for="email" class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.email">Email</label>
+
+                <div class="col-sm-6">
+                    <input name="email" id="email" class="form-control" type="email" data-ng-model="edit.perimeter.email" />
+                </div>
+
+            </div>
+
+
+            <div class="form-group" >
+
+                <label for="policyList" class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.policies">Policy List </label>
+
+                <div class="col-sm-5">
+
+                    <ui-select ng-model="edit.selectedPolicy" id="policyList">
+
+                        <ui-select-match placeholder="(None)" ng-bind="$select.selected.name"></ui-select-match>
+                        <ui-select-choices repeat="aPolicy in edit.policiesToBeSelected">
+                            <div ng-value="aPolicy" ng-bind="aPolicy.name"></div>
+                        </ui-select-choices>
+
+                    </ui-select>
+
+                </div>
+
+                <div class="col-sm-1 text-center">
+                    <a href="" ng-click="edit.addPolicyToPerimeter()"><span style="font-size:1.5em; line-height: 1.5em;" class="glyphicon glyphicon-plus-sign"></span></a>
+                </div>
+
+            </div>
+
+            <div class="form-group">
+
+                <label class="col-sm-3 control-label" data-translate="moon.policy.perimeter.edit.selectedPolicies">Selected Policies</label>
+
+                <div class="col-sm-6">
+
+                    <ul>
+
+                       <li ng-repeat="(key, value) in edit.selectedPolicyList">
+
+                            <span ng-bind="value.name" ></span> <a href="" ng-click="edit.removeSelectedPolicy(value)"><span style="font-size:1.5em; line-height: 1.5em" class="glyphicon glyphicon-remove"></span></a>
+
+                        </li>
+
+                    </ul>
+
+                </div>
+
+            </div>
+
+            <div class="form-group">
+
+                <div class="pull-right">
+
+                    <a href="" ng-disabled="edit.loading" ng-click="edit.create()" class="btn btn-warning">
+                        <span class="glyphicon glyphicon-save"></span>
+                        <span data-translate="moon.policy.perimeter.edit.action.create">Create</span>
+                    </a>
+
+                    <moon-loader ng-if="edit.loading"></moon-loader>
+
+                </div>
+
+            </div>
+
+        </form>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-list.tpl.html b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-list.tpl.html
new file mode 100755
index 00000000..a94d663e
--- /dev/null
+++ b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter-list.tpl.html
@@ -0,0 +1,240 @@
+<div>
+    <div class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.subject.title">List of associated Subjects</h4>
+
+        </div>
+
+        <div class="panel-body">
+
+            <div class="table-responsive">
+
+                <table class="table table-striped">
+
+                    <thead>
+                        <tr>
+                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
+                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
+                            <th data-translate="moon.policy.perimeter.table.email">Email</th>
+                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
+                        </tr>
+                    </thead>
+
+                    <moon-loader ng-if="list.loadingSub"></moon-loader>
+
+                    <tbody ng-if="!list.loadingSub && list.getSubjects().length > 0">
+                    <tr ng-repeat="(key, value) in list.subjects">
+                        <td ng-bind="value.name"></td>
+                        <td ng-bind="value.description"></td>
+                        <td ng-bind="value.email"></td>
+                        <td>
+
+                            <a href="" ng-if="!value.loader" ng-click="list.unMapSub(value)" >
+                                <span class="glyphicon glyphicon-transfer"></span>
+                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
+                            </a>
+
+                            <div ng-if="value.loader">
+
+                                <moon-loader></moon-loader>
+
+                            </div>
+
+                        </td>
+
+                    </tr>
+                    </tbody>
+
+
+                    <tbody ng-if="!list.loadingSub && list.getSubjects().length === 0">
+                    <tr>
+                        <td data-translate="moon.policy.perimeter.subject.notFound">There is no Subjects</td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                    </tbody>
+
+                </table>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div ng-if="list.editMode" class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.subject.add.title">Add a Subject Category</h4>
+
+        </div>
+
+        <div class="panel-body">
+
+            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfSubject"></moon-perimeter-edit>
+
+        </div>
+
+    </div>
+
+
+    <div class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.object.title">List associated of Objects</h4>
+
+        </div>
+
+        <div class="panel-body">
+
+            <div class="table-responsive">
+
+                <table class="table table-striped">
+
+                    <thead>
+                        <tr>
+                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
+                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
+                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
+                        </tr>
+                    </thead>
+
+                    <moon-loader ng-if="list.loadingObj"></moon-loader>
+
+                    <tbody ng-if="!list.loadingObj && list.getObjects().length > 0">
+                    <tr ng-repeat="(key, value) in list.objects">
+                        <td ng-bind="value.name"></td>
+                        <td ng-bind="value.description"></td>
+                        <td>
+
+                            <a href="" ng-if="!value.loader" ng-click="list.unMapObj(value)" >
+                                <span class="glyphicon glyphicon-transfer"></span>
+                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
+                            </a>
+
+                            <div ng-if="value.loader">
+
+                                <moon-loader></moon-loader>
+
+                            </div>
+
+                        </td>
+                    </tr>
+                    </tbody>
+
+                    <tbody ng-if="!list.loadingObj && list.getObjects().length === 0">
+                    <tr>
+                        <td data-translate="moon.policy.perimeter.object.notFound">There is no Objects</td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                    </tbody>
+
+                </table>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div ng-if="list.editMode" class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.object.add.title">Add an Object Category</h4>
+
+        </div>
+
+        <div class="panel-body">
+
+            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfObject"></moon-perimeter-edit>
+
+        </div>
+
+    </div>
+
+    <div class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.action.title">List associated of Actions</h4>
+
+        </div>
+
+        <div class="panel-body">
+
+            <div class="table-responsive">
+
+                <table class="table table-striped">
+
+                    <thead>
+                        <tr>
+                            <th data-translate="moon.policy.perimeter.table.name">Name</th>
+                            <th data-translate="moon.policy.perimeter.table.description">Description</th>
+                            <th data-translate="moon.policy.perimeter.table.action.title"></th>
+                        </tr>
+                    </thead>
+
+                    <moon-loader ng-if="list.loadingAct"></moon-loader>
+
+                    <tbody ng-if="!list.loadingAct && list.getActions().length > 0">
+                    <tr ng-repeat="(key, value) in list.actions">
+                        <td ng-bind="value.name"></td>
+                        <td ng-bind="value.description"></td>
+                        <td>
+
+                            <a href="" ng-if="!value.loader" ng-click="list.unMapAct(value)" >
+                                <span class="glyphicon glyphicon-transfer"></span>
+                                <span class="control-label" data-translate="moon.policy.perimeter.table.action.unmap">Unmap</span>
+                            </a>
+
+                            <div ng-if="value.loader">
+
+                                <moon-loader></moon-loader>
+
+                            </div>
+
+                        </td>
+                    </tr>
+                    </tbody>
+
+                    <tbody ng-if="!list.loadingAct && list.getActions().length === 0">
+                    <tr>
+                        <td data-translate="moon.policy.perimeter.action.notFound">There is no Actions</td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                    </tbody>
+
+                </table>
+
+            </div>
+
+
+        </div>
+
+    </div>
+
+    <div ng-if="list.editMode" class="panel panel-default">
+
+        <div class="panel-heading">
+
+            <h4 data-translate="moon.policy.perimeter.action.add.title">Add an Action Category</h4>
+
+        </div>
+
+        <div class="panel-body">.
+
+            <moon-perimeter-edit policy="list.policy" perimeter-type="list.typeOfAction"></moon-perimeter-edit>
+
+        </div>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.edit.dir.js b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.edit.dir.js
new file mode 100755
index 00000000..a96741fe
--- /dev/null
+++ b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.edit.dir.js
@@ -0,0 +1,437 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .directive('moonPerimeterEdit', moonPerimeterEdit);
+
+    moonPerimeterEdit.$inject = [];
+
+    function moonPerimeterEdit() {
+
+        return {
+            templateUrl: 'html/policy/edit/parameter/perimeter/perimeter-edit.tpl.html',
+            bindToController: true,
+            controller: moonPerimeterEditController,
+            controllerAs: 'edit',
+            scope: {
+                //Type can be 'ACTION', 'OBJECT', 'SUBJECT'
+                perimeterType: '=',
+                policy: '='
+            },
+            restrict: 'E',
+            replace: true
+        };
+    }
+
+
+    angular
+        .module('moon')
+        .controller('moonPerimeterEditController', moonPerimeterEditController);
+
+    moonPerimeterEditController.$inject = ['$scope', '$rootScope',
+        'perimeterService', 'PERIMETER_CST', 'alertService',
+        '$translate', 'formService', 'policyService', 'utilService'];
+
+    function moonPerimeterEditController($scope, $rootScope,
+                                         perimeterService, PERIMETER_CST, alertService,
+                                         $translate, formService, policyService, utilService) {
+
+        var edit = this;
+
+        edit.perimeterType = $scope.edit.perimeterType;
+        // This variable is used in the view in order to display or not display email field
+        edit.subjectType = PERIMETER_CST.TYPE.SUBJECT;
+        edit.policy = $scope.edit.policy;
+
+        edit.fromList = true;
+
+        edit.loading = false;
+
+        edit.form = {};
+
+        edit.perimeter = {name: null, description: null, partner_id: null, policy_list: [], email: null};
+
+        edit.list = [];
+        edit.policyList = [];
+        edit.policiesToBeSelected = [];
+        edit.selectedPolicyList = []; // List of Policies to be added to a new perimeter
+
+        edit.create = createPerimeter;
+        edit.addToPolicy = addToPolicy;
+        edit.addPolicyToPerimeter = addPolicyToPerimeter;
+        edit.clearSelectedPolicies = clearSelectedPolicies;
+        edit.removeSelectedPolicy = removeSelectedPolicy;
+        edit.deletePerimeter = deletePerimeter;
+
+        activate();
+
+        /*
+         *
+         */
+
+        function activate() {
+
+            loadAllPolicies();
+
+            switch (edit.perimeterType) {
+
+                case PERIMETER_CST.TYPE.SUBJECT:
+
+                    perimeterService.subject.findAllWithCallback(callBackList);
+                    break;
+
+                case PERIMETER_CST.TYPE.OBJECT:
+
+                    perimeterService.object.findAllWithCallback(callBackList);
+                    break;
+
+                case PERIMETER_CST.TYPE.ACTION:
+
+                    perimeterService.action.findAllWithCallback(callBackList);
+                    break;
+
+                default :
+
+                    edit.list = [];
+                    break;
+
+            }
+
+            function callBackList(list) {
+
+                // For each Perimeter, there is a check about the mapping between the perimeter and the policy
+                _.each(list, function (element) {
+
+                    if (_.indexOf(element.policy_list, edit.policy.id) === -1) {
+
+                        edit.list.push(element);
+
+                    }
+
+                });
+
+            }
+
+        }
+
+        var rootListeners = {
+
+            'event:unMapPerimeterFromPerimeterList': $rootScope.$on('event:unMapPerimeterFromPerimeterList', manageUnMappedPerimeter)
+
+        };
+
+        _.each(rootListeners, function(unbind){
+            $scope.$on('$destroy', rootListeners[unbind]);
+        });
+
+
+        function loadAllPolicies() {
+
+            edit.policyList = [];
+
+            policyService.findAllWithCallback( function(data) {
+
+                edit.policyList = data;
+                edit.policiesToBeSelected = angular.copy(edit.policyList);
+
+            });
+        }
+
+        function addPolicyToPerimeter() {
+
+            if (!edit.selectedPolicy || _.contains(edit.perimeter.policy_list, edit.selectedPolicy.id)) {
+                return;
+            }
+
+            edit.perimeter.policy_list.push(edit.selectedPolicy.id);
+            edit.selectedPolicyList.push(edit.selectedPolicy);
+            edit.policiesToBeSelected = _.without(edit.policiesToBeSelected, edit.selectedPolicy);
+
+        }
+
+        function clearSelectedPolicies() {
+
+            edit.perimeter.policy_list = [];
+            edit.selectedPolicyList = [];
+            edit.policiesToBeSelected = angular.copy(edit.policyList);
+
+        }
+
+        function removeSelectedPolicy(policy) {
+
+            edit.policiesToBeSelected.push(policy);
+            edit.perimeter.policy_list = _.without(edit.perimeter.policy_list, policy.id);
+            edit.selectedPolicyList = _.without(edit.selectedPolicyList, policy);
+
+        }
+
+        /**
+         * Add
+         */
+
+        function addToPolicy() {
+
+            if (!edit.selectedPerimeter) {
+
+                return;
+
+            }
+
+            startLoading();
+
+            var  perimeterToSend = edit.selectedPerimeter;
+
+            perimeterToSend.policy_list.push(edit.policy.id);
+
+            switch (edit.perimeterType) {
+
+                case PERIMETER_CST.TYPE.SUBJECT:
+
+                    perimeterService.subject.update(perimeterToSend, updatePerimeterSuccess, updatePerimeterError);
+                    break;
+
+                case PERIMETER_CST.TYPE.OBJECT:
+
+                    perimeterService.object.update(perimeterToSend, updatePerimeterSuccess, updatePerimeterError);
+                    break;
+
+                case PERIMETER_CST.TYPE.ACTION:
+
+                    perimeterService.action.update(perimeterToSend, updatePerimeterSuccess, updatePerimeterError);
+                    break;
+            }
+
+
+            function updatePerimeterSuccess(data) {
+
+                $translate('moon.perimeter.update.success', {policyName: perimeterToSend.name}).then(function (translatedValue) {
+
+                    alertService.alertSuccess(translatedValue);
+
+                });
+
+                stopLoading();
+
+            }
+
+            function updatePerimeterError(reason) {
+
+                $translate('moon.policy.update.error', {
+                    policyName: perimeterToSend.name,
+                    reason: reason.message
+                }).then(function (translatedValue) {
+
+                    alertService.alertError(translatedValue);
+
+                });
+
+                stopLoading();
+
+            }
+
+        }
+
+        /**
+         * Create
+         */
+
+        function createPerimeter() {
+
+            if (formService.isInvalid(edit.form)) {
+
+                formService.checkFieldsValidity(edit.form);
+
+            } else {
+
+                startLoading();
+
+                var perimeterToSend = angular.copy(edit.perimeter);
+
+                switch (edit.perimeterType) {
+
+                    case PERIMETER_CST.TYPE.SUBJECT:
+
+                        perimeterService.subject.add(perimeterToSend, createSuccess, createError);
+                        break;
+
+                    case PERIMETER_CST.TYPE.OBJECT:
+
+                        perimeterService.object.add(perimeterToSend, createSuccess, createError);
+                        break;
+
+                    case PERIMETER_CST.TYPE.ACTION:
+
+                        perimeterService.action.add(perimeterToSend, createSuccess, createError);
+                        break;
+                }
+
+            }
+
+            function createSuccess(data) {
+
+                var created = {};
+
+                switch (edit.perimeterType) {
+
+                    case PERIMETER_CST.TYPE.SUBJECT:
+
+                        created = utilService.transformOne(data, 'subjects');
+                        break;
+
+                    case PERIMETER_CST.TYPE.OBJECT:
+
+                        created = utilService.transformOne(data, 'objects');
+                        break;
+
+                    case PERIMETER_CST.TYPE.ACTION:
+
+                        created = utilService.transformOne(data, 'actions');
+                        break;
+                }
+
+                $translate('moon.policy.perimeter.edit.create.success', {name: created.name}).then(function (translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                stopLoading();
+
+                /**
+                 * If during the creating the created assignments has be mapped with the current policy, then it is not required to push the new Assignments in the list
+                 */
+                if (_.indexOf(created.policy_list, edit.policy.id) === -1) {
+
+                    edit.list.push(created);
+
+                }else{
+
+                    $scope.$emit('event:createAssignmentsFromAssignmentsEditSuccess', created, edit.perimeterType);
+
+                }
+
+                displayList();
+
+                clearSelectedPolicies();
+
+            }
+
+            function createError(reason) {
+
+                $translate('moon.policy.perimeter.edit.create.error', {name: perimeterToSend.name}).then(function (translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                stopLoading();
+
+            }
+
+        }
+
+        /**
+         * Delete
+         */
+        function deletePerimeter() {
+
+            if (!edit.selectedPerimeter) {
+
+                return;
+
+            }
+
+            startLoading();
+
+            var perimeterToDelete = angular.copy(edit.selectedPerimeter);
+
+            switch (edit.perimeterType) {
+                case PERIMETER_CST.TYPE.SUBJECT:
+
+                    perimeterService.subject.delete(perimeterToDelete, deleteSuccess, deleteError);
+                    break;
+
+                case PERIMETER_CST.TYPE.OBJECT:
+
+                    perimeterService.object.delete(perimeterToDelete, deleteSuccess, deleteError);
+                    break;
+
+                case PERIMETER_CST.TYPE.ACTION:
+
+                    perimeterService.action.delete(perimeterToDelete, deleteSuccess, deleteError);
+                    break;
+            }
+
+
+            function deleteSuccess(data) {
+
+                $translate('moon.policy.perimeter.edit.delete.success', {name: perimeterToDelete.name})
+                    .then(function (translatedValue) {
+                        alertService.alertSuccess(translatedValue);
+                    });
+
+                policyService.findOneReturningPromise(edit.policy.id).then(function (data) {
+
+                    edit.policy = utilService.transformOne(data, 'policies');
+
+                    cleanSelectedValue();
+                    activate();
+                    stopLoading();
+
+                    $scope.$emit('event:deletePerimeterFromPerimeterAddSuccess', edit.policy);
+
+                });
+
+            }
+
+            function deleteError(reason) {
+
+                $translate('moon.policy.perimeter.edit.delete.error', {name: perimeterToDelete.name}).then(function (translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                stopLoading();
+
+            }
+        }
+
+        function cleanSelectedValue() {
+
+            delete edit.selectedPerimeter;
+
+        }
+
+        function startLoading() {
+
+            edit.loading = true;
+
+        }
+
+        function stopLoading() {
+
+            edit.loading = false;
+
+        }
+
+        function displayList() {
+
+            edit.fromList = true;
+
+        }
+
+        /**
+         * If A perimeter has been unMapped, maybe it has to be display into the available list of Perimeter
+         * @param perimeter
+         * @param type
+         */
+        function manageUnMappedPerimeter(event, perimeter, type){
+
+            if(type === edit.perimeterType && _.indexOf(perimeter.policy_list, edit.policy.id) === -1){
+
+                edit.list.push(perimeter);
+
+            }
+
+        }
+
+    }
+
+})();
\ No newline at end of file
diff --git a/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.list.dir.js b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.list.dir.js
new file mode 100755
index 00000000..dffa7783
--- /dev/null
+++ b/moon_gui/static/app/policy/edit/parameter/perimeter/perimeter.list.dir.js
@@ -0,0 +1,284 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .directive('moonPerimeterList', moonPerimeterList);
+
+    moonPerimeterList.$inject = [];
+
+    function moonPerimeterList() {
+
+        return {
+            templateUrl : 'html/policy/edit/parameter/perimeter/perimeter-list.tpl.html',
+            bindToController : true,
+            controller : moonPerimeterListController,
+            controllerAs : 'list',
+            scope : {
+                policy: '=',
+                editMode : '='
+            },
+            restrict : 'E',
+            replace : true
+        };
+
+    }
+
+    angular
+        .module('moon')
+        .controller('moonPerimeterListController', moonPerimeterListController);
+
+    moonPerimeterListController.$inject = ['$scope', '$rootScope', 'perimeterService', '$translate', 'alertService', 'PERIMETER_CST'];
+
+    function moonPerimeterListController($scope, $rootScope, perimeterService, $translate, alertService, PERIMETER_CST){
+
+        var list = this;
+
+        list.policy = $scope.list.policy;
+        list.editMode = $scope.list.editMode;
+
+        list.typeOfSubject = PERIMETER_CST.TYPE.SUBJECT;
+        list.typeOfObject = PERIMETER_CST.TYPE.OBJECT;
+        list.typeOfAction = PERIMETER_CST.TYPE.ACTION;
+
+        list.unMapSub = unMapSub;
+        list.unMapObj = unMapObj;
+        list.unMapAct = unMapAct;
+
+        list.getSubjects = getSubjects;
+        list.getObjects = getObjects;
+        list.getActions = getActions;
+
+        activate();
+
+        function activate(){
+
+            manageSubjects();
+
+            manageObjects();
+
+            manageActions();
+
+        }
+
+        var rootListeners = {
+
+            'event:deletePerimeterFromPerimeterAddSuccess': $rootScope.$on('event:deletePerimeterFromPerimeterAddSuccess', deletePolicy),
+            'event:createAssignmentsFromAssignmentsEditSuccess': $rootScope.$on('event:createAssignmentsFromAssignmentsEditSuccess', addAssignmentsToPolicy)
+
+        };
+
+        _.each(rootListeners, function(unbind){
+            $scope.$on('$destroy', rootListeners[unbind]);
+        });
+
+
+        function manageSubjects(){
+
+            list.loadingSub = true;
+
+            perimeterService.subject.findAllFromPolicyWithCallback(list.policy.id, function(perimeters){
+
+                list.subjects = perimeters;
+                list.loadingSub = false;
+
+            });
+        }
+
+        function manageObjects(){
+
+            list.loadingObj = true;
+
+            perimeterService.object.findAllFromPolicyWithCallback(list.policy.id, function(perimeters){
+
+                list.objects = perimeters;
+                list.loadingObj = false;
+
+            });
+
+        }
+
+        function manageActions(){
+
+            list.loadingAct = true;
+
+            perimeterService.action.findAllFromPolicyWithCallback(list.policy.id, function(perimeters){
+
+                list.actions = perimeters;
+                list.loadingAct = false;
+
+            });
+
+        }
+
+        /**
+         * UnMap
+         */
+
+        function unMapSub(perimeter){
+
+            perimeter.policy_list = _.without(perimeter.policy_list, list.policy.id);
+
+            perimeter.loader = true;
+
+            var perimeterToSend = angular.copy(perimeter);
+
+            perimeterService.subject.unMapPerimeterFromPolicy(list.policy.id , perimeter.id, updatePerimeterSuccess, updatePerimeterError);
+
+            function updatePerimeterSuccess(data){
+
+                $translate('moon.policy.perimeter.update.success', { perimeterName: perimeterToSend.name }).then( function(translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                $scope.$emit('event:unMapPerimeterFromPerimeterList', perimeter, PERIMETER_CST.TYPE.SUBJECT);
+
+                activate();
+
+                perimeter.loader = false;
+            }
+
+            function updatePerimeterError(reason){
+
+                $translate('moon.policy.perimeter.update.error', { perimeterName: perimeter.name, reason: reason.message}).then( function(translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                perimeter.loader = false;
+
+            }
+
+        }
+
+        function unMapObj(perimeter){
+
+            perimeter.policy_list = _.without(perimeter.policy_list, list.policy.id);
+
+            perimeter.loader = true;
+
+            var perimeterToSend = angular.copy(perimeter);
+
+            perimeterService.object.unMapPerimeterFromPolicy(list.policy.id , perimeter.id, updatePerimeterSuccess, updatePerimeterError);
+
+            function updatePerimeterSuccess(data){
+
+                $translate('moon.policy.perimeter.update.success', { perimeterName: perimeterToSend.name }).then( function(translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                $scope.$emit('event:unMapPerimeterFromPerimeterList', perimeter, PERIMETER_CST.TYPE.OBJECT);
+
+                activate();
+
+                perimeter.loader = false;
+            }
+
+            function updatePerimeterError(reason){
+
+                $translate('moon.policy.perimeter.update.error', { perimeterName: perimeter.name, reason: reason.message}).then( function(translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                perimeter.loader = false;
+
+            }
+
+        }
+
+        function unMapAct(perimeter){
+
+            perimeter.policy_list = _.without(perimeter.policy_list, list.policy.id);
+
+            perimeter.loader = true;
+
+            var perimeterToSend = angular.copy(perimeter);
+
+            perimeterService.action.unMapPerimeterFromPolicy(list.policy.id , perimeter.id, updatePerimeterSuccess, updatePerimeterError);
+
+            function updatePerimeterSuccess(data){
+
+                $translate('moon.policy.perimeter.update.success', { perimeterName: perimeterToSend.name }).then( function(translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                $scope.$emit('event:unMapPerimeterFromPerimeterList', perimeter, PERIMETER_CST.TYPE.ACTION);
+
+                activate();
+
+                perimeter.loader = false;
+            }
+
+            function updatePerimeterError(reason){
+
+                $translate('moon.policy.perimeter.update.error', { perimeterName: perimeter.name, reason: reason.message}).then( function(translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                perimeter.loader = false;
+
+            }
+
+        }
+
+        function getSubjects(){
+            return list.subjects ? list.subjects : [];
+        }
+
+        function getObjects(){
+            return list.objects ? list.objects : [];
+        }
+
+        function getActions(){
+            return list.actions ? list.actions : [];
+        }
+
+        function removeSubFromSubList(subject){
+            list.subjects = _.without(list.subjects, subject);
+        }
+
+        function removeObjFromObjList(object){
+            list.objects = _.without(list.objects, object);
+        }
+
+        function removeActFromActList(action){
+            list.actions = _.without(list.actions, action);
+        }
+
+        function deletePolicy( event, policy){
+
+            list.policy = policy;
+
+            activate();
+
+        }
+
+        function addAssignmentsToPolicy( event, assignments, type){
+
+            switch (type) {
+
+                case PERIMETER_CST.TYPE.SUBJECT:
+
+                    list.subjects.push(assignments);
+                    break;
+
+                case PERIMETER_CST.TYPE.OBJECT:
+
+                    list.objects.push(assignments);
+                    break;
+
+                case PERIMETER_CST.TYPE.ACTION:
+
+                    list.actions.push(assignments);
+                    break;
+
+                default :
+                    break;
+
+            }
+
+        }
+
+    }
+
+})();
\ No newline at end of file