updates for destination operations of UI.

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

@@ -1,6 +1,6 @@
 <div class="modal fade" id="createPolicyModal" tabindex="-1"  role="dialog">
   <div class="modal-dialog">
-    <form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
+    <form name="form" class="form-horizontal css-form" novalidate>
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

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

@@ -6,9 +6,9 @@
     .module('harbor.replication')
     .directive('createPolicy', createPolicy);
   
-  CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
+  CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', '$location', 'getParameterByName'];
   
-  function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
+  function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, $location, getParameterByName) {
     var vm = this;
     
     //Since can not set value for textarea by using vm
@@ -26,6 +26,7 @@
     vm.addNew = addNew;
     vm.edit = edit;
     vm.createPolicy = createPolicy;
+    vm.updatePolicy = updatePolicy;
     vm.pingDestination = pingDestination;
         
     $scope.$watch('vm.destinations', function(current) {
@@ -39,11 +40,14 @@
     });
     
     prepareDestination();
-        
+       
-    $scope.$watch('vm.action', function(current) {
+    $scope.$watch('vm.action+","+vm.policyId', function(current) {
       if(current) {
         console.log('Current action for replication policy:' + current);
-        switch(current) {
+        var parts = current.split(',');
+        vm.action = parts[0];
+        vm.policyId = Number(parts[1]);
+        switch(parts[0]) {
         case 'ADD_NEW':
           vm.addNew(); break;
         case 'EDIT':
@@ -84,6 +88,13 @@
         .error(createReplicationPolicyFailed);
     }
     
+    function updatePolicy(policy) {
+      console.log('Update policy ID:' + vm.policyId);
+      UpdateReplicationPolicyService(vm.policyId, policy)
+        .success(updateReplicationPolicySuccess)
+        .error(updateReplicationPolicyFailed);
+    }
+    
     function pingDestination() {
       var targetId = vm1.selection.id;
       console.log('Ping target ID:' + targetId);
@@ -99,10 +110,10 @@
       console.log('Failed list destination:' + data);
     }
     function listReplicationPolicySuccess(data, status) {
-      var replicationPolicy = data[0];
+      var replicationPolicy = data;
       vm0.name = replicationPolicy.name;
       vm0.description = replicationPolicy.description;
-      vm0.enabled = (replicationPolicy.enabled == 1);
+      vm0.enabled = replicationPolicy.enabled == 1;
       vm.targetId = replicationPolicy.target_id;
     }
     function listReplicationPolicyFailed(data, status) {
@@ -115,6 +126,14 @@
     function createReplicationPolicyFailed(data, status) {
       console.log('Failed create replication policy.');
     }
+    function updateReplicationPolicySuccess(data, status) {
+      console.log('Successful update replication policy.');
+      vm.clearUp();
+    }
+    function updateReplicationPolicyFailed(data, status) {
+      console.log('Failed update replication policy.');
+    }
+    
     function pingDestinationSuccess(data, status) {
       alert('Successful ping target:' + data);
     }
@@ -142,7 +161,7 @@
     
     function link(scope, element, attr, ctrl) {
       ctrl.save = save;
-      ctrl.clearUp = clearUp;
+
       function save(form) {
         console.log(angular.toJson(form));
         var postPayload = {
@@ -154,13 +173,16 @@
           'cron_str': '',
           'start_time': ''
         };
-        ctrl.createPolicy(postPayload, clearUp);
+        switch(ctrl.action) {
-      }
+        case 'ADD_NEW':
-      
+          ctrl.createPolicy(postPayload); break;
-      function clearUp() {
+        case 'EDIT':
+          ctrl.updatePolicy(postPayload); break;
+        }
         element.find('#createPolicyModal').modal('hide');
         ctrl.reload();
       }
+     
     }
   }
   

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

@@ -19,7 +19,7 @@
     vm.retrievePolicy = retrievePolicy;
     vm.retrieveJob = retrieveJob;
     vm.togglePolicy = togglePolicy;
-    
+      
     vm.last = false;
     vm.retrievePolicy();
     
@@ -61,9 +61,10 @@
       vm.policyId = policyId;
       vm.modalTitle = 'Edit Policy';
       vm.action = 'EDIT';
+      
       console.log('Selected policy ID:' + vm.policyId);
     }
-        
+     
     function togglePolicy(policyId, enabled) {
       ToggleReplicationPolicyService(policyId, enabled)
         .success(toggleReplicationPolicySuccess)
@@ -78,6 +79,7 @@
     function toggleReplicationPolicyFailed(data, status) {
       console.log('Failed toggle replication policy.');
     }
+    
   }
   
   function listReplication($timeout) {

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

@@ -1,18 +1,18 @@
 <div class="modal fade" id="createDestinationModal" tabindex="-1"  role="dialog">
   <div class="modal-dialog">
+  <form name="form" class="form-horizontal css-form" novalidate>     
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;Create New Destination</h4>
+        <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;//vm.modalTitle//</h4>
       </div>
       <div class="modal-body">
         <div class="create-destination">
-          <form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>     
             <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="destination.name" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.name" name="uName" required>                 
+                <input type="text" class="form-control form-control-custom" id="name" ng-model="destination.name" name="uName" required>                 
-                <div ng-messages="form.$dirty && form.uName.$error">
+                <div ng-messages="form.$submitted && form.uName.$error">
                   <span ng-message="required">Name is required.</span>
                 </div>
               </div> 
@@ -20,8 +20,8 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="description" 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="destination.endpoint" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.endpoint" name="uEndpoint" required >              
+                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="destination.endpoint" name="uEndpoint" required >              
-                <div ng-messages="form.$dirty && form.uEndpoint.$error">
+                <div ng-messages="form.$submitted && form.uEndpoint.$error">
                   <span ng-message="required">Endpoint is required.</span>
                 </div>
               </div>
@@ -29,8 +29,8 @@
             <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="destination.username" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.username" name="uUsername" required>                 
+                <input type="text" class="form-control" id="username" ng-model="destination.username" name="uUsername" required>                 
-                <div ng-messages="form.$dirty && form.uUsername.$error">
+                <div ng-messages="form.$submitted && form.uUsername.$error">
                   <span ng-message="required">Username is required.</span>
                 </div>
               </div> 
@@ -38,8 +38,8 @@
             <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="destination.password" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.password" name="uPassword" required>                 
+                <input type="password" class="form-control" id="password" ng-model="destination.password" name="uPassword" required>                 
-                <div ng-messages="form.$dirty && form.uPassword.$error">
+                <div ng-messages="form.$submitted && form.uPassword.$error">
                   <span ng-message="required">Password is required.</span>
                 </div>
               </div> 
@@ -47,16 +47,17 @@
             <div class="form-group col-md-12 form-group-custom">
               <div class="col-md-3"></div>
               <div class="col-md-9">
-              <button class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
+              <button type="button" class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
               </div>
             </div>
-          </form>
+         
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" id="btnOk" ng-click="vm.save(destination)">// 'ok' | tr //</button>
+        <button type="submit" class="btn btn-primary" id="btnOk" ng-click="form.$valid && vm.save(destination)">// 'ok' | tr //</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
       </div>
     </div><!-- /.modal-content -->
+  </form>
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->

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

@@ -6,22 +6,53 @@
     .module('harbor.system.management')
     .directive('createDestination', createDestination);
     
-  CreateDestinationController.$inject = ['CreateDestinationService'];
+  CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService'];
   
-  function CreateDestinationController(CreateDestinationService) {
+  function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService) {
     var vm = this;
-    vm.save = save;
     
-    function save(destination) {
+    $scope.destination = {};
-      if(destination) {
+    
-        console.log('destination:' + angular.toJson(destination));
+    var vm0 = $scope.destination;
-        CreateDestinationService(destination.name, destination.endpoint, 
+    vm.addNew = addNew;
+    vm.edit = edit;
+    vm.create = create;
+    vm.update = update;
+    
+    $scope.$watch('vm.action + "," + vm.targetId', function(current) {
+      if(current) {
+        var parts = current.split(',');
+        vm.action = parts[0];
+        vm.targetId = parts[1];
+        switch(vm.action) {
+        case 'ADD_NEW':
+          vm.addNew();
+          break;
+        case 'EDIT':
+          vm.edit(vm.targetId);
+          break;
+        }
+      }      
+    });
+    
+    function addNew() {
+      vm0.name = '';
+      vm0.endpoint = '';
+      vm0.username = '';
+      vm0.password = '';
+    }
+    
+    function edit(targetId) {
+      getDestination(targetId);
+    }
+    
+    function create(destination) {
+      CreateDestinationService(destination.name, destination.endpoint, 
          destination.username, destination.password)
           .success(createDestinationSuccess)
           .error(createDestinationFailed);
-      }
     }
-    
+        
     function createDestinationSuccess(data, status) {
       alert('Successful created destination.');
     }
@@ -30,18 +61,74 @@
       console.log('Failed create destination:' + data);
     }
     
+    function update(destination) {
+      UpdateDestinationService(vm.targetId, destination)
+        .success(updateDestinationSuccess)
+        .error(updateDestinationFailed);
+    }
+    
+    function updateDestinationSuccess(data, status) {
+      console.log('Successful update destination.');
+    }
+    
+    function updateDestinationFailed(data, status) {
+      console.log('Failed update destination.');
+    }
+    
+    function getDestination(targetId) {
+      ListDestinationService(targetId)
+        .success(getDestinationSuccess)
+        .error(getDestinationFailed);
+    }
+    
+    function getDestinationSuccess(data, status) {
+      var destination = data;
+      vm0.name = destination.name;
+      vm0.endpoint = destination.endpoint;
+      vm0.username = destination.username;
+      vm0.password = destination.password;
+    }
+    
+    function getDestinationFailed(data, status) {
+      console.log('Failed get destination.');
+    }
   }
   
   function createDestination() {
     var directive = {
       'restrict': 'E',
       'templateUrl': '/static/ng/resources/js/components/system-management/create-destination.directive.html',
-      'scope': true,
+      'scope': {
+        'action': '@',
+        'targetId': '@',
+        'reload': '&'
+      },
+      'link': link,
       'controller': CreateDestinationController,
       'controllerAs': 'vm',
       'bindToController': true
     };
     return directive;
+    
+    function link(scope, element, attrs, ctrl) {
+      
+      ctrl.save = save;
+      
+      function save(destination) {
+        if(destination) {
+          console.log('destination:' + angular.toJson(destination));
+          switch(ctrl.action) {
+          case 'ADD_NEW':
+            ctrl.create(destination);
+            break;
+          case 'EDIT':
+            ctrl.update(destination);
+          }
+          element.find('#createDestinationModal').modal('hide');
+          ctrl.reload();
+        }
+      }
+    }
   }
   
 })();

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

@@ -8,7 +8,7 @@
         </span>
       </div>
       <button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addDestination()" data-toggle="modal" data-target="#createDestinationModal"><span class="glyphicon glyphicon-plus"></span>New Destination</button>
-      <create-destination></create-destination>
+      <create-destination action="//vm.action//" target-id="//vm.targetId//" reload="vm.retrieve()"></create-destination>
     </div>
     <div class="pane"> 	           
       <div class="sub-pane">
@@ -27,7 +27,11 @@
               <td>//r.name//</td>
               <td>//r.endpoint//</td>
               <td>//r.creation_time//</td>
-              <td></td>
+              <td>
+                <a href="javascript:void(0);" data-toggle="modal" data-target="#createDestinationModal" ng-click="vm.editDestination(r.id)"><span class="glyphicon glyphicon-pencil"></span></a>
+                &nbsp;
+                <a href="javascript:void(0);" ng-click="vm.deleteDestination(r.id)"><span class="glyphicon glyphicon-trash"></span></a>
+              </td>
             </tr>
           </tbody>
     		</table>

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

@@ -6,13 +6,17 @@
     .module('harbor.system.management')
     .directive('destination', destination);
     
-  DestinationController.$inject = ['ListDestinationService'];
+  DestinationController.$inject = ['$scope', 'ListDestinationService', 'DeleteDestinationService'];
   
-  function DestinationController(ListDestinationService) {
+  function DestinationController($scope, ListDestinationService, DeleteDestinationService) {
     var vm = this;
     
     vm.retrieve = retrieve;
     vm.search = search;
+    vm.addDestination = addDestination;
+    vm.editDestination = editDestination;
+    vm.deleteDestination = deleteDestination;
+    
     vm.retrieve();
     
     function retrieve() {
@@ -25,6 +29,23 @@
       vm.retrieve();
     }
     
+    function addDestination() {
+      vm.action = 'ADD_NEW';
+      console.log('Action for destination:' + vm.action);
+    }
+    
+    function editDestination(targetId) {
+      vm.action = 'EDIT';
+      vm.targetId = targetId;
+      console.log('Action for destination:' + vm.action + ', target ID:' + vm.targetId);
+    }
+    
+    function deleteDestination(targetId) {
+      DeleteDestinationService(targetId)
+        .success(deleteDestinationSuccess)
+        .error(deleteDestinationFailed);
+    }
+    
     function listDestinationSuccess(data, status) {
       vm.destinations = data;
     }
@@ -33,7 +54,14 @@
       console.log('Failed list destination:' + data);
     }
     
+    function deleteDestinationSuccess(data, status) {
+      console.log('Successful delete destination.');
+      vm.retrieve();
+    }
     
+    function deleteDestinationFailed(data, status) {
+      console.log('Failed delete destination.');
+    }   
   }
   
   function destination() {

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

@@ -0,0 +1,19 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.destination')
+    .factory('DeleteDestinationService', DeleteDestinationService);
+    
+  DeleteDestinationService.$inject = ['$http'];
+  
+  function DeleteDestinationService($http) {
+    return deleteDestination;
+    function deleteDestination(targetId) {
+      return $http
+        .delete('/api/targets/' + targetId);
+    }
+  }
+  
+})();

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

@@ -0,0 +1,24 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.destination')
+    .factory('UpdateDestinationService', UpdateDestinationService);
+    
+  UpdateDestinationService.$inject = ['$http'];  
+    
+  function UpdateDestinationService($http) {
+    return updateDestination;
+    function updateDestination(targetId, target) {
+      return $http
+        .put('/api/targets/' + targetId, {
+          'name': target.name,
+          'endpoint': target.endpoint,
+          'username': target.username,
+          'password': target.password
+        });
+    }
+  }
+  
+})();

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

@@ -0,0 +1,23 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.policy')
+    .factory('UpdateReplicationPolicyService', UpdateReplicationPolicyService);
+    
+  UpdateReplicationPolicyService.$inject = ['$http'];
+  
+  function UpdateReplicationPolicyService($http) {
+    return updateReplicationPolicy;
+    function updateReplicationPolicy(policyId, policy) {
+      return $http
+        .put('/api/policies/replication/' + policyId, {
+          'name': policy.name,
+          'description': policy.description,
+          'enabled': policy.enabled
+        });
+    }
+  } 
+  
+})();

views/ng/sections/header-include.htm

@@ -139,7 +139,7 @@
 <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-policy/services.toggle-replication-policy.js"></script>
-
+<script src="/static/ng/resources/js/services/replication-policy/services.update-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>
@@ -148,7 +148,8 @@
 <script src="/static/ng/resources/js/services/destination/services.create-destination.js"></script>
 <script src="/static/ng/resources/js/services/destination/services.list-destination.js"></script>
 <script src="/static/ng/resources/js/services/destination/services.ping-destination.js"></script>
-
+<script src="/static/ng/resources/js/services/destination/services.update-destination.js"></script>
+<script src="/static/ng/resources/js/services/destination/services.delete-destination.js"></script>
 
 <script src="/static/ng/resources/js/session/session.module.js"></script>
 <script src="/static/ng/resources/js/session/session.current-user.js"></script>
@@ -208,7 +209,6 @@
 <script src="/static/ng/resources/js/components/replication/list-replication.directive.js"></script>
 <script src="/static/ng/resources/js/components/replication/create-policy.directive.js"></script>
 
-
 <script src="/static/ng/resources/js/components/system-management/system-management.module.js"></script>
 <script src="/static/ng/resources/js/components/system-management/system-management.directive.js"></script>
 <script src="/static/ng/resources/js/components/system-management/destination.directive.js"></script>