updates for creation of replication-policy and list-policy operations of UI.

static/ng/resources/css/replication.css

@@ -65,3 +65,15 @@
   cursor: ns-resize;
   color: #C0C0C0;
 }
+
+.color-success {
+  color: #5cb85c;
+}
+
+.color-danger {
+  color: #d9534f
+}
+
+.color-warning {
+  color: #f0ad4e;
+}

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

@@ -1,10 +1,10 @@
 <div class="modal fade" id="createPolicyModal" tabindex="-1"  role="dialog">
   <div class="modal-dialog">
-    <form name="form" class="form-horizontal css-form" novalidate>
+    <form name="form" class="form-horizontal css-form" ng-submit="form.$valid" 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 Policy</h4>
+        <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;//vm.modalTitle//</h4>
       </div>
       <div class="modal-body">
         <div class="create-policy">
@@ -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.destination" 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.selection" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination(replication.destination.selection)"></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-value="endpoint" name="uEndpoint" required>                 
+                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.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-value="username" name="uUsername" required>                 
+                <input type="text" class="form-control" id="username" ng-model="replication.destination.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-value="password" name="uPassword" required>                 
+                <input type="password" class="form-control" id="password" ng-model="replication.destination.password" name="uPassword" required>                 
                 <div ng-messages="form.$submitted && form.uPassword.$error">
                   <span ng-message="required">Password is required.</span>
                 </div>
@@ -76,7 +76,7 @@
             <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.pingDestination()">Test Connection</button>
               </div>
             </div>
         </div>

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

@@ -6,52 +6,108 @@
     .module('harbor.replication')
     .directive('createPolicy', createPolicy);
   
-  CreatePolicyController.$inject = ['$scope', 'ListDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
+  CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
   
-  function CreatePolicyController($scope, ListDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
+  function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
     var vm = this;
     
     //Since can not set value for textarea by using vm
     //use $scope for instead.
     $scope.replication = {};
     $scope.replication.policy = {};
+    $scope.replication.destination = {};
     
-    var vm0 = $scope.replication;
+    var vm0 = $scope.replication.policy;
-    var vm1 = $scope.replication.policy;
+    var vm1 = $scope.replication.destination;
+        
+    vm.selectDestination = selectDestination;
     vm.projectId = getParameterByName('project_id', $location.absUrl());
-    vm.prepare = prepare;
+    
-    vm.prepare();
+    vm.addNew = addNew;
+    vm.edit = edit;
     vm.createPolicy = createPolicy;
+    vm.pingDestination = pingDestination;
         
     $scope.$watch('vm.destinations', function(current) {
       if(current) {
         console.log('destination:' + angular.toJson(current));
-        vm0.destination = current[0]; 
+        vm1.selection = current[0]; 
+        vm1.endpoint = vm1.selection.endpoint;
+        vm1.username = vm1.selection.username;
+        vm1.password = vm1.selection.password;
       }
     });
     
-    function prepare() {
+    prepareDestination();
-      vm1.name = 'name';
-      vm1.description = 'test';
-      vm1.enabled = true;
         
-      ListDestinationService()
+    $scope.$watch('vm.action', function(current) {
+      if(current) {
+        console.log('Current action for replication policy:' + current);
+        switch(current) {
+        case 'ADD_NEW':
+          vm.addNew(); break;
+        case 'EDIT':
+          vm.edit(vm.policyId); break;
+        }    
+      }
+    });
+    
+    function selectDestination(item) {
+      vm1.selection = item;
+      vm1.endpoint = item.endpoint;
+      vm1.username = item.username;
+      vm1.password = item.password;
+    }
+    
+    function prepareDestination() {
+      ListDestinationService('')
         .success(listDestinationSuccess)
         .error(listDestinationFailed);
     }
 
+    function addNew() { 
+      vm0.name = '';
+      vm0.description = '';
+      vm0.enabled = true;
+    }
+    
+    function edit(policyId) {
+      console.log('Edit policy ID:' + policyId);
+      ListReplicationPolicyService(policyId)
+        .success(listReplicationPolicySuccess)
+        .error(listReplicationPolicyFailed);
+    }
+    
     function createPolicy(policy) {
       CreateReplicationPolicyService(policy)
         .success(createReplicationPolicySuccess)
         .error(createReplicationPolicyFailed);
     }
     
+    function pingDestination() {
+      var targetId = vm1.selection.id;
+      console.log('Ping target ID:' + targetId);
+      PingDestinationService(targetId)
+        .success(pingDestinationSuccess)
+        .error(pingDestinationFailed);
+    }
+    
     function listDestinationSuccess(data, status) {
       vm.destinations = data;
     }
     function listDestinationFailed(data, status) {
       console.log('Failed list destination:' + data);
     }
+    function listReplicationPolicySuccess(data, status) {
+      var replicationPolicy = data[0];
+      vm0.name = replicationPolicy.name;
+      vm0.description = replicationPolicy.description;
+      vm0.enabled = (replicationPolicy.enabled == 1);
+      vm.targetId = replicationPolicy.target_id;
+    }
+    function listReplicationPolicyFailed(data, status) {
+      console.log('Failed list replication policy:' + data);
+    }
     function createReplicationPolicySuccess(data, status) {
       console.log('Successful create replication policy.');
       vm.clearUp();
@@ -59,6 +115,12 @@
     function createReplicationPolicyFailed(data, status) {
       console.log('Failed create replication policy.');
     }
+    function pingDestinationSuccess(data, status) {
+      alert('Successful ping target:' + data);
+    }
+    function pingDestinationFailed(data, status) {
+      alert('Failed ping target:' + data);
+    }
   }
   
   function createPolicy() {
@@ -66,7 +128,10 @@
       'restrict': 'E',
       'templateUrl': '/static/ng/resources/js/components/replication/create-policy.directive.html',
       'scope': {
-        'reload': '&'
+        'policyId': '@',
+        'modalTitle': '@',
+        'reload': '&',
+        'action': '='
       },
       'link': link,
       'controller': CreatePolicyController,
@@ -82,7 +147,7 @@
         console.log(angular.toJson(form));
         var postPayload = {
           'projectId': Number(ctrl.projectId),
-          'targetId': form.destination.id,
+          'targetId': form.destination.selection.id,
           'name': form.policy.name,
           'enabled': form.policy.enabled ? 1 : 0,
           'description': form.policy.description,

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

@@ -2,13 +2,13 @@
   <div class="col-xs-12 col-md-12 each-tab-pane">
     <div class="form-inline">
       <div class="input-group">
-        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationName" size="30">
+        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationPolicyName" size="30">
         <span class="input-group-btn">
           <button class="btn btn-primary" type="button" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>
         </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 reload="vm.retrievePolicy()"></create-policy>
+      <create-policy reload="vm.retrievePolicy()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
     </div>
     <div class="pane-split" id="upon-pane"> 	           
       <div class="sub-pane-split">
@@ -16,11 +16,10 @@
     			 <thead>
             <th width="10%">Name</th>
             <th width="18%">Description</th>
-            <th width="14%">Destination</th>
+            <th width="18%">Destination</th>
             <th width="18%">Start Time</th>
-            <th width="14%">Status</th>
             <th width="14%">Activation</th>
-            <th width="12%">Actions</th>
+            <th width="15%">Actions</th>
     			 </thead>
     			 <tbody>
             <tr ng-if="vm.replicationPolicies.length == 0">
@@ -30,10 +29,21 @@
               <td>//r.name//</td>
               <td>//r.description//</td>
               <td>//r.destination//</td>
-              <td>//r.start_time//</td>
+              <td>//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-              <td>//r.status//</td>
+              <td ng-switch on="//r.enabled//">
-              <td>//r.activation//</td>
+                <span ng-switch-when="1">Enabled</span>
-              <td></td>
+                <span ng-switch-when="0">Disabled</span>
+              </td>
+              <td>
+                <div class="display-inline-block" ng-switch on="//r.enabled//">
+                 <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 0)"><span ng-switch-when="1" class="glyphicon glyphicon-play color-success"></span></a>
+                 <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)"><span ng-switch-when="0" class="glyphicon glyphicon-stop color-danger"></span></a>
+                </div>
+                &nbsp;
+                <a href="javascript:void(0);" data-toggle="modal" data-target="#createPolicyModal" ng-click="vm.editReplication(r.id)"><span class="glyphicon glyphicon-pencil"></span></a>
+                &nbsp;
+                <a href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>
+              </td>
             </tr>
           </tbody>
     		</table>

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

@@ -6,22 +6,26 @@
     .module('harbor.replication')
     .directive('listReplication', listReplication);
     
-  ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ListReplicationJobService'];
+  ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService'];
   
-  function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ListReplicationJobService) {
+  function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService) {
     var vm = this;
     
     vm.projectId = getParameterByName('project_id', $location.absUrl());
     
     vm.addReplication = addReplication;
+    vm.editReplication = editReplication;
+    
     vm.retrievePolicy = retrievePolicy;
     vm.retrieveJob = retrieveJob;
-    vm.last = false;
+    vm.togglePolicy = togglePolicy;
     
+    vm.last = false;
     vm.retrievePolicy();
     
+   
     function retrievePolicy() {
-      ListReplicationPolicyService(vm.projectId, vm.replicationName)
+      ListReplicationPolicyService('', vm.projectId, vm.replicationName)
         .success(listReplicationPolicySuccess)
         .error(listReplicationPolicyFailed);
     }
@@ -50,8 +54,30 @@
 
     function addReplication() {
       vm.modalTitle = 'Create New Policy';
+      vm.action = 'ADD_NEW';
     }
     
+    function editReplication(policyId) {
+      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)
+        .error(toggleReplicationPolicyFailed);
+    }
+    
+    function toggleReplicationPolicySuccess(data, status) {
+      console.log('Successful toggle replication policy.');
+      vm.retrievePolicy();
+    }
+    
+    function toggleReplicationPolicyFailed(data, status) {
+      console.log('Failed toggle replication policy.');
+    }
   }
   
   function listReplication($timeout) {
@@ -94,11 +120,17 @@
         $(document).off('mousemove');
       }
 
+      ctrl.lastPolicyId = -1;          
+      
       scope.$watch('vm.replicationPolicies', function(current) { 
         $timeout(function(){
           if(current && current.length > 0) {
             element.find('#upon-pane table>tbody>tr').on('click', trClickHandler);
-            element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');
+            if(ctrl.lastPolicyId === -1) {
+              element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');  
+            }else{
+              element.find('#upon-pane table>tbody>tr').filter('[policy_id="' + ctrl.lastPolicyId + '"]').trigger('click');
+            }
           }
         });
       });
@@ -108,10 +140,16 @@
           .find('#upon-pane table>tbody>tr')  
           .css({'background-color': '#FFFFFF'})
           .css({'color': '#000'});
+        element
+          .find('#upon-pane table>tbody>tr a')
+          .css({'color': '#337ab7'});          
         $(this)
           .css({'background-color': '#057ac9'})
           .css({'color': '#fff'});
+        $('a', this)
+          .css({'color': '#fff'});
         ctrl.retrieveJob($(this).attr('policy_id'));
+        ctrl.lastPolicyId = $(this).attr('policy_id');
       }
     }
   }

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

@@ -16,7 +16,7 @@
     vm.retrieve();
     
     function retrieve() {
-      ListDestinationService()
+      ListDestinationService('')
         .success(listDestinationSuccess)
         .error(listDestinationFailed);
     }

static/ng/resources/js/layout/navigation/navigation-details.directive.js

@@ -49,6 +49,7 @@
         element.find('a:first').addClass('active');
       }
 
+      ctrl.target = visited;
       element.find('a').on('click', click);
             
       function click(event) {

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

@@ -10,9 +10,9 @@
   
   function ListDestinationService($http) {    
     return listDestination;
-    function listDestination(name) {
+    function listDestination(targetId, name) {
       return $http
-        .get('/api/targets', {
+        .get('/api/targets/' + targetId, {
           'params': {
             'name': name
           }

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

@@ -0,0 +1,30 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.destination')
+    .factory('PingDestinationService', PingDestinationService);
+    
+  PingDestinationService.$inject = ['$http'];
+  
+  function PingDestinationService($http) {
+    return pingDestination;
+    function pingDestination(targetId) {
+      return $http({
+           'method': 'POST',
+              'url': '/api/targets/ping',
+          'headers': {'Content-Type': 'application/x-www-form-urlencoded'},
+          'transformRequest': function(obj) {
+              var str = [];
+              for(var p in obj) {
+                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+              }
+              return str.join("&");
+          },
+          'data': {'id': targetId}
+        });
+    }
+  }
+  
+})();

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

@@ -12,9 +12,9 @@
        
     return listReplicationPolicy;
     
-    function listReplicationPolicy(projectId, name) {
+    function listReplicationPolicy(policyId, projectId, name) {
       return $http
-        .get('/api/policies/replication', {
+        .get('/api/policies/replication/' + policyId, {
           'params': {
             'project_id': projectId,
             'name': name

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

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

views/ng/sections/header-include.htm

@@ -138,6 +138,8 @@
 <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-policy/services.toggle-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>
@@ -145,6 +147,8 @@
 <script src="/static/ng/resources/js/services/destination/services.destination.module.js"></script>
 <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/session/session.module.js"></script>
 <script src="/static/ng/resources/js/session/session.current-user.js"></script>