updates for creation-replication-policy of UI.

static/ng/resources/js/components/replication/create-policy.directive.html

@@ -15,7 +15,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="name" class="col-md-3 control-label">Name:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control form-control-custom" id="name" ng-model="replication.policy.name" ng-model-options="{ debounce: 500 }"  name="uName" required>                 
+                <input type="text" class="form-control form-control-custom" id="name" ng-model="replication.policy.name" name="uName" required>                 
                 <div ng-messages="form.$submitted && form.uName.$error">
                   <span ng-message="required">Name is required.</span>
                 </div>
@@ -24,7 +24,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="description" class="col-md-3 control-label">Description:</label>
               <div class="col-md-9">
-                <textarea class="form-control form-control-custom" id="description" ng-model="replication.policy.description" ng-model-options="{ updateOn: 'blur' }" ng-value="description" name="uDescription" required ></textarea>                 
+                <textarea class="form-control form-control-custom" id="description" ng-model="replication.policy.description" name="uDescription" required></textarea>                 
                 <div ng-messages="form.$submitted && form.uDescription.$error">
                   <span ng-message="required">Description is required.</span>
                 </div>
@@ -33,7 +33,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="enable" class="col-md-3 control-label">Enable:</label>
               <div class="col-md-9">
-                <input type="checkbox" class="form-control" style="margin-top: 10px; height: auto;" ng-model="replication.policy.enabled" ng-model-options="{ updateOn: 'blur' }" ng-checked="enabled">
+                <input type="checkbox" class="form-control" style="margin-top: 10px; height: auto;" ng-model="replication.policy.enabled">
               </div>
             </div>
             <div class="col-md-12">
@@ -43,13 +43,13 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="destinationName" class="col-md-3 control-label">Name:</label>
               <div class="col-md-7">
-                <select class="form-control form-control-custom" id="destinationName" ng-model="replication.destinations" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination()"></select>
+                <select class="form-control form-control-custom" id="destinationName" ng-model="replication.destination" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination()"></select>
               </div>
             </div>  
             <div class="form-group col-md-12 form-group-custom">
               <label for="endpoint" class="col-md-3 control-label">Endpoint:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" ng-model-options="{ updateOn: 'blur' }" ng-value="endpoint" name="uEndpoint" required>                 
+                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" ng-value="endpoint" name="uEndpoint" required>                 
                 <div ng-messages="form.$submitted && form.uEndpoint.$error">
                   <span ng-message="required">Endpoint is required.</span>
                 </div>
@@ -58,7 +58,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="username" class="col-md-3 control-label">Username:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control" id="username" ng-model="replication.destination.username" ng-model-options="{ updateOn: 'blur' }" ng-value="username" name="uUsername" required>                 
+                <input type="text" class="form-control" id="username" ng-model="replication.destination.username" ng-value="username" name="uUsername" required>                 
                 <div ng-messages="form.$submitted && form.uUsername.$error">
                   <span ng-message="required">Username is required.</span>
                 </div>
@@ -67,7 +67,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="password" class="col-md-3 control-label">Password:</label>
               <div class="col-md-9">
-                <input type="password" class="form-control" id="password" ng-model="replication.destination.password" ng-model-options="{ updateOn: 'blur' }" ng-value="password" name="uPassword" required>                 
+                <input type="password" class="form-control" id="password" ng-model="replication.destination.password" ng-value="password" name="uPassword" required>                 
                 <div ng-messages="form.$submitted && form.uPassword.$error">
                   <span ng-message="required">Password is required.</span>
                 </div>
@@ -79,11 +79,10 @@
               <button class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
               </div>
             </div>
-          
         </div>
       </div>
       <div class="modal-footer">
-        <button type="submit" class="btn btn-primary" id="btnOk">// 'ok' | tr //</button>
+        <button type="submit" class="btn btn-primary" id="btnOk" ng-click="form.$valid && vm.save(replication)">// 'ok' | tr //</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
       </div>
     </form>

static/ng/resources/js/components/replication/create-policy.directive.js

@@ -6,13 +6,58 @@
     .module('harbor.replication')
     .directive('createPolicy', createPolicy);
   
-  function CreatePolicyController() {
+  CreatePolicyController.$inject = ['$scope', 'ListDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
+  
+  function CreatePolicyController($scope, ListDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
     var vm = this;
-    vm.enabled = true;    
-    vm.save = save;
     
-    function save(policy) {
-      console.log(angular.toJson(policy));
+    //Since can not set value for textarea by using vm
+    //use $scope for instead.
+    $scope.replication = {};
+    $scope.replication.policy = {};
+    
+    var vm0 = $scope.replication;
+    var vm1 = $scope.replication.policy;
+    vm.projectId = getParameterByName('project_id', $location.absUrl());
+    vm.prepare = prepare;
+    vm.prepare();
+    vm.createPolicy = createPolicy;
+   
+    $scope.$watch('vm.destinations', function(current) {
+      if(current) {
+        console.log('destination:' + angular.toJson(current));
+        vm0.destination = current[0]; 
+      }
+    });
+    
+    function prepare() {
+      vm1.name = 'name';
+      vm1.description = 'test';
+      vm1.enabled = true;
+     
+      ListDestinationService()
+        .success(listDestinationSuccess)
+        .error(listDestinationFailed);
+    }
+    
+    function createPolicy(policy) {
+      CreateReplicationPolicyService(policy)
+        .success(createReplicationPolicySuccess)
+        .error(createReplicationPolicyFailed);
+    }
+    
+    function listDestinationSuccess(data, status) {
+      vm.destinations = data;
+    }
+    function listDestinationFailed(data, status) {
+      console.log('Failed list destination:' + data);
+    }
+    function createReplicationPolicySuccess(data, status) {
+      console.log('Successful create replication policy.');
+      vm.clearUp();
+    }
+    function createReplicationPolicyFailed(data, status) {
+      console.log('Failed create replication policy.');
     }
   }
   
@@ -20,13 +65,38 @@
     var directive = {
       'restrict': 'E',
       'templateUrl': '/static/ng/resources/js/components/replication/create-policy.directive.html',
-      'scope': true,
-      'replace': true,
+      'scope': {
+        'reload': '&'
+      },
+      'link': link,
       'controller': CreatePolicyController,
       'controllerAs': 'vm',
       'bindToController': true
     };
     return directive;
+    
+    function link(scope, element, attr, ctrl) {
+      ctrl.save = save;
+      ctrl.clearUp = clearUp;
+      function save(form) {
+        console.log(angular.toJson(form));
+        var postPayload = {
+          'projectId': Number(ctrl.projectId),
+          'targetId': form.destination.id,
+          'name': form.policy.name,
+          'enabled': form.policy.enabled ? 1 : 0,
+          'description': form.policy.description,
+          'cron_str': '',
+          'start_time': ''
+        };
+        ctrl.createPolicy(postPayload, clearUp);
+      }
+      
+      function clearUp() {
+        element.find('#createPolicyModal').modal('hide');
+        ctrl.reload();
+      }
+    }
   }
   
 })();

static/ng/resources/js/components/replication/list-replication.directive.html

@@ -8,7 +8,7 @@
         </span>
       </div>
       <button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addReplication()" data-toggle="modal" data-target="#createPolicyModal"><span class="glyphicon glyphicon-plus"></span>New Replication</button>
-      <create-policy></create-policy>
+      <create-policy reload="vm.retrievePolicy()"></create-policy>
     </div>
     <div class="pane-split" id="upon-pane"> 	           
       <div class="sub-pane-split">
@@ -26,7 +26,7 @@
             <tr ng-if="vm.replicationPolicies.length == 0">
               <td colspan="7" height="100%" class="empty-hint" ><h3 class="text-muted">No replication policies, add new replication policy.</h3></td>
             </tr>
-            <tr policy_id="//r.policy_id//" ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
+            <tr policy_id="//r.id//" ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
               <td>//r.name//</td>
               <td>//r.description//</td>
               <td>//r.destination//</td>

static/ng/resources/js/components/system-management/destination.directive.html

@@ -25,7 +25,7 @@
             </tr>
             <tr ng-if="vm.destinations.length > 0" ng-repeat="r in vm.destinations"> 
               <td>//r.name//</td>
-              <td>//r.url//</td>
+              <td>//r.endpoint//</td>
               <td>//r.creation_time//</td>
               <td></td>
             </tr>

static/ng/resources/js/services/destination/services.create-destination.js

@@ -14,7 +14,7 @@
       return $http
         .post('/api/targets', {
           'name': name,
-          'url': endpoint,
+          'endpoint': endpoint,
           'username': username,
           'password': password
         });

static/ng/resources/js/services/replication-policy/services.create-replication-policy.js

@@ -9,7 +9,7 @@
   CreateReplicationPolicyService.$inject = ['$http'];
   
   function CreateReplicationPolicyService($http) {
-    return createReplicaitonPolicy;
+    return createReplicationPolicy;
     
     function createReplicationPolicy(policy) {
       return $http      

views/ng/sections/header-include.htm

@@ -137,6 +137,7 @@
 
 <script src="/static/ng/resources/js/services/replication-policy/services.replication-policy.module.js"></script>
 <script src="/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js"></script>
+<script src="/static/ng/resources/js/services/replication-policy/services.create-replication-policy.js"></script>
 
 <script src="/static/ng/resources/js/services/replication-job/services.replication-job.module.js"></script>
 <script src="/static/ng/resources/js/services/replication-job/services.list-replication-job.js"></script>