update for replication status and time filters.

static/resources/css/replication.css

@@ -73,4 +73,8 @@
 
 .color-warning {
   color: #f0ad4e;
+}
+
+.label-custom {
+  margin: 0 5px 0 10px;
 }

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

@@ -32,14 +32,14 @@
               </tr>
               <tr policy_id="//r.id//" ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
                 <td width="10%">//r.name//</td>
-                <td width="18%">//r.description//</td>
-                <td width="18%">//r.target_name//</td>
-                <td width="18%">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                <td width="14%" ng-switch on="//r.enabled//">
+                <td width="18%" style="padding-left: 10px;">//r.description//</td>
+                <td width="18%" style="padding-left: 15px;">//r.target_name//</td>
+                <td width="18%" style="padding-left: 18px;">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                <td width="14%"  style="padding-left: 18px;" ng-switch on="//r.enabled//">
                   <span ng-switch-when="1">// 'enabled' | tr //</span>
                   <span ng-switch-when="0">// 'disabled' | tr //</span>
                 </td>
-                <td width="15%">
+                <td width="15%" style="padding-left: 20px;">
                   <div class="display-inline-block" ng-switch on="//r.enabled//">
                    <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 0)" title="// 'disabled' | tr //"><span ng-switch-when="1" class="glyphicon glyphicon-stop color-danger"></span></a>
                    <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)" title="// 'enabled' | tr //"><span ng-switch-when="0" class="glyphicon glyphicon-play color-success"></span></a>
@@ -66,6 +66,30 @@
           <button class="btn btn-primary" type="button" ng-click="vm.searchReplicationJob()" ng-disabled="vm.refreshPending"><span class="glyphicon glyphicon-search"></span></button>
         </span>
       </div>
+      <div class="input-group">
+        <label for="selStatus" class="control-label label-custom">// 'status' | tr //:</label>
+        <div class="input-group">
+          <select class="form-control" id="selStatus" ng-options="st.value for st in vm.jobStatus() track by st.key" ng-model="vm.currentStatus" ng-change="vm.searchReplicationJob()"></select>
+        </div> 
+      </div>
+      <div class="input-group">
+        <label for="fromDatePicker" class="control-label label-custom">// 'from' | tr //:</label>
+        <div class="input-group datetimepicker">
+          <input id="fromDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.fromDate" ng-change="vm.pickUp({key:'fromDate', value: vm.fromDate})" size="10">
+          <span class="input-group-addon">
+            <a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
+          </span>
+        </div>
+      </div>
+      <div class="input-group">
+        <label for="toDatePicker" class="control-label label-custom">// 'to' | tr //:</label>
+	      <div class="input-group datetimepicker">
+          <input id="toDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.toDate" ng-change="vm.pickUp({key:'toDate', value: vm.toDate})" size="10">
+          <span class="input-group-addon">
+            <a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
+          </span>
+        </div>
+      </div>		
       <div class="input-group">
         <button type="button" class="btn btn-success" ng-click="vm.searchReplicationJob()"><span class="glyphicon glyphicon-refresh"></span></button>
       </div>
@@ -94,11 +118,13 @@
                 <tr ng-if="vm.replicationJobs.length > 0" ng-repeat="r in vm.replicationJobs"> 
                   <td width="15%">//r.repository//</td>
                   <td width="12%">//r.operation//</td>
-                  <td width="18%">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="18%">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="18%">//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="9%">//r.status//</td>
-                  <td width="10%" align="left"><a href="javascript:void(0);" ng-click="vm.downloadLog(r.id)" title="// 'download_log' | tr //"><span style="margin-left: 10px;" class="glyphicon glyphicon-file"></span></a></td>
+                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="18%" style="padding-left: 18px;">//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="9%"  style="padding-left: 20px;">//r.status//</td>
+                  <td width="10%" align="left">
+                    <a ng-show="r.status != 'canceled' && r.status != 'pending'" href="javascript:void(0);" ng-click="vm.downloadLog(r.id)" title="// 'download_log' | tr //"><span style="margin-left: 10px;" class="glyphicon glyphicon-file"></span></a>
+                  </td>
                 </tr>
               </tbody>
         		</table>

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

@@ -4,11 +4,27 @@
   
   angular
     .module('harbor.replication')
-    .directive('listReplication', listReplication);
-    
-  ListReplicationController.$inject = ['$scope', 'getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService', '$window', '$filter', 'trFilter'];
+    .directive('listReplication', listReplication)
+    .factory('jobStatus', jobStatus);
+
+  jobStatus.inject = ['$filter', 'trFilter'];
+  function jobStatus($filter, trFilter) {
+    return function() {      
+      return [
+        {'key': 'all'    , 'value': $filter('tr')('all')},
+        {'key': 'pending', 'value': $filter('tr')('pending')},
+        {'key': 'running', 'value': $filter('tr')('running')},
+        {'key': 'error'  , 'value': $filter('tr')('error')},
+        {'key': 'stopped', 'value': $filter('tr')('stopped')}, 
+        {'key': 'finished', 'value':$filter('tr')('finished')},
+        {'key': 'canceled', 'value': $filter('tr')('canceled')}
+      ];
+    }
+  }
   
-  function ListReplicationController($scope, getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService, $window, $filter, trFilter) {
+  ListReplicationController.$inject = ['$scope', 'getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService', '$window', '$filter', 'trFilter', 'jobStatus'];
+  
+  function ListReplicationController($scope, getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService, $window, $filter, trFilter, jobStatus) {
     var vm = this;
     
     vm.sectionHeight = {'min-height': '1200px'};
@@ -36,6 +52,9 @@
     vm.retrievePolicy();
     vm.refreshPending = false;
     
+    vm.jobStatus = jobStatus;
+    vm.currentStatus = vm.jobStatus()[0];
+   
     function searchReplicationPolicy() {
       vm.refreshPending = true;
       vm.retrievePolicy();
@@ -54,7 +73,8 @@
     }
     
     function retrieveJob(policyId) {
-      ListReplicationJobService(policyId, vm.replicationJobName)
+      var status = (vm.currentStatus.key === 'all' ? '' : vm.currentStatus.key);
+      ListReplicationJobService(policyId, vm.replicationJobName, status)
         .success(listReplicationJobSuccess)
         .error(listReplicationJobFailed);
     }
@@ -70,6 +90,18 @@
 
     function listReplicationJobSuccess(data, status) {
       vm.replicationJobs = data || [];
+      angular.forEach(vm.replicationJobs, function(item) {
+        for(var key in item) {          
+          var value = item[key]
+          switch(key) {
+          case 'operation':            
+          case 'status':
+            item[key] = $filter('tr')(value);
+          default:
+            break;
+          }
+        }
+      });
       vm.refreshPending = false;
     }
     
@@ -193,6 +225,19 @@
         ctrl.retrieveJob($(this).attr('policy_id'));
         ctrl.lastPolicyId = $(this).attr('policy_id');
       }
+      
+      element.find('.datetimepicker').datetimepicker({
+				locale: 'en-US',
+				ignoreReadonly: true,
+				format: 'L',
+				showClear: true
+		  });      
+      element.find('#fromDatePicker').on('blur', function(){
+        ctrl.pickUp({'key': 'fromDate', 'value': $(this).val()});
+      });
+      element.find('#toDatePicker').on('blur', function(){
+        ctrl.pickUp({'key': 'toDate', 'value': $(this).val()});
+      });
     }
   }
   

static/resources/js/services/i18n/locale_messages_en-US.js

@@ -200,5 +200,13 @@ var locale_messages = {
   'delete_repo': 'Delete Repo',
   'download_log': 'Download Logs',
   'edit': 'Edit',
-  'delete': 'Delete'
+  'delete': 'Delete',
+  'transfer': 'Transfer',
+  'all': 'All',
+  'pending': 'Pending',
+  'running': 'Running',
+  'finished': 'Finished',
+  'canceled': 'Canceled',
+  'stopped': 'Stopped',
+  'error': 'Error'
 };

static/resources/js/services/i18n/locale_messages_zh-CN.js

@@ -200,5 +200,13 @@ var locale_messages = {
   'delete_repo': '删除镜像仓库',
   'download_log': '下载日志',
   'edit': '修改',
-  'delete': '删除'
+  'delete': '删除',
+  'all': '全部',
+  'transfer': '传输',
+  'pending': '挂起',
+  'running': '进行中',
+  'finished': '已完成',
+  'canceled': '取消',
+  'stopped': '停止',
+  'error': '错误'
 };

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

@@ -12,12 +12,13 @@
     
     return listReplicationJob;
     
-    function listReplicationJob(policyId, repository) {
+    function listReplicationJob(policyId, repository, status) {
       return $http
         .get('/api/jobs/replication/', {
           'params': {
             'policy_id': policyId,
-            'repository': repository
+            'repository': repository,
+            'status': status
           }
         });
     }