updates for replication-job and policy interactions of UI.

static/ng/resources/css/replication.css

@@ -11,6 +11,11 @@
   margin-top: 20px;
 }
 
+.h4-custom-down {
+  display: inline-block;
+  margin-top: 20px;
+}
+
 .hr-line {
   margin-top: 0;
   margin-bottom: 10px;
@@ -21,14 +26,26 @@
 }
 
 .pane-split {
-  height: auto;
-  min-height: 50px;
-  max-height: 300px;  
   overflow-x: hidden;
   overflow-y: auto;
   width: 100%;
 }
 
+#upon-pane {
+  margin-top: 10px;
+  height: 270px;
+  min-height: 100px;
+  max-height: 270px;
+}
+
+#upon-pane table>tbody>tr {
+  cursor: all-scroll;
+}
+#down-pane {
+  height: 80px;
+  min-height: 80px;
+}
+
 .sub-pane-split {
   margin: 15px;
   height: auto;
@@ -40,14 +57,11 @@
   margin-bottom: 0;
 }
 
-.split-strip {
-  width: 100%;
-}
-
 .split-handle {
   margin-left: auto;
   margin-right: auto; 
   width: 1em;
+  height: 1em;
   cursor: ns-resize;
   color: #C0C0C0;
 }

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

@@ -17,16 +17,16 @@
             <th width="10%">Name</th>
             <th width="18%">Description</th>
             <th width="14%">Destination</th>
-            <th width="14%">Start Time</th>
+            <th width="18%">Start Time</th>
             <th width="14%">Status</th>
             <th width="14%">Activation</th>
-            <th width="16%">Actions</th>
+            <th width="12%">Actions</th>
     			 </thead>
     			 <tbody>
             <tr ng-if="vm.replicationPolicies.length == 0">
-              <td colspan="7" height="320px" class="empty-hint" ><h3 class="text-muted">No replication policies, add new replication policy.</h3></td>
+              <td colspan="7" height="100%" class="empty-hint" ><h3 class="text-muted">No replication policies, add new replication policy.</h3></td>
             </tr>
-            <tr ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
+            <tr policy_id="//r.policy_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>
@@ -38,33 +38,37 @@
           </tbody>
     		</table>
       </div>
-      <div class="col-xs-4 col-md-12 well well-sm well-custom well-split"><div class="col-md-offset-10">//vm.projects ? vm.projects.length : 0// // 'items' | tr //</div></div>  
     </div>
-    <div class="split-strip"><p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p></div>
+    <div class="col-xs-4 col-md-12 well well-sm well-custom well-split"><div class="col-md-offset-10">//vm.projects ? vm.projects.length : 0// // 'items' | tr //</div></div>  
-    <div class="pane-split" id="down-pane">
+    <p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p>
+    <h4 class="h4-custom-down">Replication Jobs</h4>
+    <hr class="hr-line"/>
+    <div class="form-inline">
+      <div class="input-group">
+        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationJob" 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>
+    </div> 
+    <div class="pane-split" id="down-pane">   
       <div class="sub-pane-split">
           <table class="table table-pane" width="98%">
       			 <thead>
-              <th width="10%">Name</th>
+              <th width="20%">Name</th>
-              <th width="18%">Description</th>
+              <th width="25%">Operation</th>
-              <th width="14%">Destination</th>
+              <th width="40%">Start Time</th>
-              <th width="14%">Start Time</th>
+              <th width="15%">Status</th>
-              <th width="14%">Status</th>
-              <th width="14%">Activation</th>
-              <th width="16%">Actions</th>
       			 </thead>
       			 <tbody>
-              <tr ng-if="vm.replicationPolicies.length == 0">
+              <tr ng-if="vm.replicationJobs.length == 0">
-                <td colspan="7" height="320px" class="empty-hint" ><h3 class="text-muted">No replication policies, add new replication policy.</h3></td>
+                <td colspan="4" height="100%" class="empty-hint" ><h3 class="text-muted">No replication jobs.</h3></td>
               </tr>
-              <tr ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies"> 
+              <tr ng-if="vm.replicationJobs.length > 0" ng-repeat="r in vm.replicationJobs"> 
                 <td>//r.name//</td>
-                <td>//r.description//</td>
+                <td>//r.operation//</td>
-                <td>//r.destination//</td>
                 <td>//r.start_time//</td>
                 <td>//r.status//</td>
-                <td>//r.activation//</td>
-                <td></td>
               </tr>
             </tbody>
       		</table>

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

@@ -6,20 +6,27 @@
     .module('harbor.replication')
     .directive('listReplication', listReplication);
     
-  ListReplicationController.$inject = ['ListReplicationPolicyService'];
+  ListReplicationController.$inject = ['ListReplicationPolicyService', 'ListReplicationJobService'];
   
-  function ListReplicationController(ListReplicationPolicyService) {
+  function ListReplicationController(ListReplicationPolicyService, ListReplicationJobService) {
     var vm = this;
     
     vm.addReplication = addReplication;
-    vm.retrieve = retrieve;
+    vm.retrievePolicy = retrievePolicy;
+    vm.retrieveJob = retrieveJob;
     vm.last = false;
-    vm.retrieve();
+    
-        
+    vm.retrievePolicy();
-    function retrieve() {
+   
+    function retrievePolicy() {
       ListReplicationPolicyService()
         .then(listReplicationPolicySuccess, listReplicationPolicyFailed);
     }
+    
+    function retrieveJob(policyId) {
+      ListReplicationJobService(policyId)
+        .then(listReplicationJobSuccess, listReplicationJobFailed);
+    }
 
     function listReplicationPolicySuccess(data, status) {
       vm.replicationPolicies = data || [];
@@ -29,6 +36,14 @@
       console.log('Failed list replication policy:' + data);
     }
 
+    function listReplicationJobSuccess(data, status) {
+      vm.replicationJobs = data || [];
+    }
+    
+    function listReplicationJobFailed(data, status) {
+      console.log('Failed list replication job:' + data);
+    }
+
     function addReplication() {
       vm.modalTitle = 'Create New Policy';
       vm.modalMessage = '';
@@ -50,25 +65,27 @@
     
     function link(scope, element, attrs, ctrl) {
       var uponPaneHeight = element.find('#upon-pane').height();
-      var downPaneHeight = element.find('#down-pane').height() + element.find('#down-pane').offset().top;
+      var handleHeight = element.find('.split-handle').height() + element.find('.split-handle').offset().top + element.find('.well').height() - 24;
-      var handleHeight = element.find('.split-handle').height() + element.find('.split-handle').offset().top;
-      
-      console.log('uponPaneHeight:' + uponPaneHeight + ', downPaneHeight:' + downPaneHeight + ', handleHeight:' + handleHeight);
       
+      var maxDownPaneHeight = 245;
+            
       element.find('.split-handle').on('mousedown', mousedownHandler);
       
       function mousedownHandler(e) {
         e.preventDefault();
-        console.log('pageY:' + e.pageY + ', offset:' + (handleHeight - e.pageY));
         $(document).on('mousemove', mousemoveHandler);    
         $(document).on('mouseup', mouseupHandler);
       }
       
       function mousemoveHandler(e) {
-        element.find('#upon-pane').css({'height' : uponPaneHeight - (handleHeight - e.pageY) + 'px'});
+        if(element.find('#down-pane').height() <= maxDownPaneHeight) {
-        element.find('#down-pane').css({'height' : downPaneHeight - (e.pageY - handleHeight)  + 'px'});
+          element.find('#upon-pane').css({'height' : (uponPaneHeight - (handleHeight - e.pageY)) + 'px'});
+          element.find('#down-pane').css({'height' : (uponPaneHeight + (handleHeight - e.pageY - 196)) + 'px'});  
+        }else{
+          element.find('#down-pane').css({'height' : (maxDownPaneHeight) + 'px'});
+          $(document).off('mousemove');
+        }
       }
-      
       function mouseupHandler(e) {
         $(document).off('mousedown');
         $(document).off('mousemove');
@@ -91,6 +108,7 @@
         $(this)
           .css({'background-color': '#057ac9'})
           .css({'color': '#fff'});
+        ctrl.retrieveJob($(this).attr('policy_id'));
       }
     }
   }

static/ng/resources/js/components/replication/replication.module.js

@@ -4,7 +4,8 @@
   
   angular
     .module('harbor.replication', [
-      'harbor.services.replication.policy'
+      'harbor.services.replication.policy',
+      'harbor.services.replication.job'
     ]);
   
 })();

static/ng/resources/js/harbor.module.js

@@ -29,6 +29,7 @@
       'harbor.services.repository',
       'harbor.services.project.member',
       'harbor.services.replication.policy',
+      'harbor.services.replication.job',
       'harbor.optional.menu',
       'harbor.modal.dialog',
       'harbor.sign.in',

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

@@ -0,0 +1,67 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.job')
+    .factory('ListReplicationJobService', ListReplicationJobService);
+    
+  ListReplicationJobService.$inject = ['$http', '$q', '$timeout'];
+  
+  function ListReplicationJobService($http, $q, $timeout) {
+    var mockData = [
+      {
+        'policy_id': 2,
+        'job_id': 1,
+        'name': 'Replicate Ubuntu:14.04',
+        'operation': 'copy',
+        'start_time': '2016-05-27 14:05:22',
+        'status': 'failed'
+      },
+      {
+        'policy_id': 1,
+        'job_id': 2,
+        'name': 'Replicate MySQL:5.6',
+        'operation': 'copy',
+        'start_time': '2016-05-27 15:15:22',
+        'status': 'success'
+      },
+      {
+        'policy_id': 1,
+        'job_id': 3,
+        'name': 'Replicate Alpine:1.1',
+        'operation': 'copy',
+        'start_time': '2016-05-27 13:15:22',
+        'status': 'success'
+      },
+      {
+        'policy_id': 2,
+        'job_id': 4,
+        'name': 'Replicate Alpine:1.1',
+        'operation': 'copy',
+        'start_time': '2016-05-27 13:15:22',
+        'status': 'success'
+      }
+    ];
+    return listReplicationJob;
+    
+    
+    
+    function listReplicationJob(policyId) {
+      console.log('policyId=' + policyId);
+      var defer = $q.defer();
+      $timeout(function() {
+        var result = [];
+        for(var i = 0; i < mockData.length; i++) {
+          var item = mockData[i];
+          if(item['policy_id'] == policyId) {
+            result.push(item);
+          }
+        }
+        defer.resolve(result);
+      });
+      return defer.promise;
+    }
+  }
+  
+})();

static/ng/resources/js/services/replication-job/services.replication-job.module.js

@@ -0,0 +1,8 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.job', []);
+  
+})();

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

@@ -12,6 +12,7 @@
     
     var mockData = [
       {
+        'policy_id': 1,
         'name': 'test01',
         'description': 'Sync image for current.',
         'destination': '10.117.170.69',
@@ -20,6 +21,7 @@
         'activation': true
       },
       {
+        'policy_id': 2,
         'name': 'test02',
         'description': 'Sync image for current.',
         'destination': '10.117.170.69',
@@ -28,7 +30,8 @@
         'activation': true
       },
       {
-        'name': 'test02',
+        'policy_id': 3,
+        'name': 'test03',
         'description': 'Sync image for current.',
         'destination': '10.117.170.69',
         'start_time': '2015-05-27 20:00:00',
@@ -36,7 +39,8 @@
         'activation': true
       },
       {
-        'name': 'test02',
+        'policy_id': 4,
+        'name': 'test04',
         'description': 'Sync image for current.',
         'destination': '10.117.170.69',
         'start_time': '2015-05-27 20:00:00',
@@ -44,179 +48,19 @@
         'activation': true
       },
       {
-        'name': 'test02',
+        'policy_id': 5,
-        'description': 'Sync image for current.',
+        'name': 'test05',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'name': 'test02',
         'description': 'Sync image for current.',
         'destination': '10.117.170.69',
         'start_time': '2015-05-27 20:00:00',
         'status': 'WARNING',
         'activation': true
       }
-      
     ];
     
     return listReplicationPolicy;
     
-    function async() {
+    function listReplicationPolicy(policyName) {
       var defer = $q.defer();
       $timeout(function() {
         defer.resolve(mockData);
@@ -224,10 +68,6 @@
       return defer.promise;
     }
     
-    function listReplicationPolicy(policyName) {
-      return async();
-    }
-    
   }
   
 })();

views/ng/sections/header-include.htm

@@ -153,6 +153,9 @@
 <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-job/services.replication-job.module.js"></script>
+<script src="/static/ng/resources/js/services/replication-job/services.list-replication-job.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>