update for list replication-policy of UI.

2024-12-24 17:47:46 +01:00 · 2016-05-26 18:51:23 +08:00 · 2016-05-26 18:51:23 +08:00 · 2abdd99992
commit 2abdd99992
parent a180b852b9
8 changed files with 403 additions and 17 deletions
--- a/static/ng/resources/css/replication.css
+++ b/static/ng/resources/css/replication.css
@ -18,4 +18,36 @@

 .form-control-custom {
  width: 100% !important;
-}
+}
+
+.pane-split {
+  height: auto;
+  min-height: 50px;
+  max-height: 300px;  
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.sub-pane-split {
+  margin: 15px;
+  height: auto;
+  min-height: 50px;
+  width: 100%;
+}
+
+.well-split {
+  margin-bottom: 0;
+}
+
+.split-strip {
+  width: 100%;
+}
+
+.split-handle {
+  margin-left: auto;
+  margin-right: auto; 
+  width: 1em;
+  cursor: ns-resize;
+  color: #C0C0C0;
+}
--- a/static/ng/resources/js/components/replication/list-replication.directive.html
+++ b/static/ng/resources/js/components/replication/list-replication.directive.html
@ -10,23 +10,66 @@
      <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>
    </div>
-    <div class="pane"> 	           
-      <div class="sub-pane">
-        <table class="table table-pane" >
+    <div class="pane-split" id="upon-pane"> 	           
+      <div class="sub-pane-split">
+        <table class="table table-pane">
    			 <thead>
-            <th width="12%">Name</th>
-            <th width="14%">Description</th>
+            <th width="10%">Name</th>
+            <th width="18%">Description</th>
            <th width="14%">Destination</th>
-            <th width="12%">Start Time</th>
-            <th width="12%">Status</th>
-            <th width="12%">Activation</th>
-            <th width="14%">Actions</th>
+            <th width="14%">Start Time</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">
+              <td colspan="7" height="320px" 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//"> 
+              <td>//r.name//</td>
+              <td>//r.description//</td>
+              <td>//r.destination//</td>
+              <td>//r.start_time//</td>
+              <td>//r.status//</td>
+              <td>//r.activation//</td>
+              <td></td>
+            </tr>
          </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>              
+    <div class="split-strip"><p class="split-handle"><span class="glyphicon glyphicon-align-justify"></span></p></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="18%">Description</th>
+              <th width="14%">Destination</th>
+              <th width="14%">Start Time</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">
+                <td colspan="7" height="320px" 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"> 
+                <td>//r.name//</td>
+                <td>//r.description//</td>
+                <td>//r.destination//</td>
+                <td>//r.start_time//</td>
+                <td>//r.status//</td>
+                <td>//r.activation//</td>
+                <td></td>
+              </tr>
+            </tbody>
+      		</table>
+        </div>
+      </div>  
+    </div>  
+  </div>          
 </div>
--- a/static/ng/resources/js/components/replication/list-replication.directive.js
+++ b/static/ng/resources/js/components/replication/list-replication.directive.js
@ -6,12 +6,29 @@
    .module('harbor.replication')
    .directive('listReplication', listReplication);
    
-  ListReplicationController.$inject = [];
+  ListReplicationController.$inject = ['ListReplicationPolicyService'];
  
-  function ListReplicationController() {
+  function ListReplicationController(ListReplicationPolicyService) {
    var vm = this;
-    vm.addReplication = addReplication;
    
+    vm.addReplication = addReplication;
+    vm.retrieve = retrieve;
+    vm.last = false;
+    vm.retrieve();
+        
+    function retrieve() {
+      ListReplicationPolicyService()
+        .then(listReplicationPolicySuccess, listReplicationPolicyFailed);
+    }
+
+    function listReplicationPolicySuccess(data, status) {
+      vm.replicationPolicies = data || [];
+    }
+    
+    function listReplicationPolicyFailed(data, status) {
+      console.log('Failed list replication policy:' + data);
+    }
+
    function addReplication() {
      vm.modalTitle = 'Create New Policy';
      vm.modalMessage = '';
@ -19,16 +36,63 @@
    
  }
  
-  function listReplication() {
+  function listReplication($timeout) {
    var directive = {
      'restrict': 'E',
      'templateUrl': '/static/ng/resources/js/components/replication/list-replication.directive.html',
      'scope': true,
+      'link': link,
      'controller': ListReplicationController,
      'controllerAs': 'vm',
      'bindToController': true
    };
    return directive;
+    
+    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;
+      
+      console.log('uponPaneHeight:' + uponPaneHeight + ', downPaneHeight:' + downPaneHeight + ', handleHeight:' + handleHeight);
+      
+      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'});
+        element.find('#down-pane').css({'height' : downPaneHeight - (e.pageY - handleHeight)  + 'px'});
+      }
+      
+      function mouseupHandler(e) {
+        $(document).off('mousedown');
+        $(document).off('mousemove');
+      }
+      
+      scope.$watch('vm.last', function(current) { 
+        $timeout(function(){
+          if(current) {
+            element.find('#upon-pane table>tbody>tr').on('click', trClickHandler);
+            element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');
+          }
+        });
+      });
+      
+      function trClickHandler(e) {
+        element
+          .find('#upon-pane table>tbody>tr')  
+          .css({'background-color': '#FFFFFF'})
+          .css({'color': '#000'});
+        $(this)
+          .css({'background-color': '#057ac9'})
+          .css({'color': '#fff'});
+      }
+    }
  }
  
 })();
--- a/static/ng/resources/js/components/replication/replication.module.js
+++ b/static/ng/resources/js/components/replication/replication.module.js
@ -3,6 +3,8 @@
  'use strict';
  
  angular
-    .module('harbor.replication', []);
+    .module('harbor.replication', [
+      'harbor.services.replication.policy'
+    ]);
  
 })();
--- a/static/ng/resources/js/harbor.module.js
+++ b/static/ng/resources/js/harbor.module.js
@ -28,6 +28,7 @@
      'harbor.services.user',
      'harbor.services.repository',
      'harbor.services.project.member',
+      'harbor.services.replication.policy',
      'harbor.optional.menu',
      'harbor.modal.dialog',
      'harbor.sign.in',
--- a/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js
+++ b/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js
@ -0,0 +1,233 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.policy')
+    .factory('ListReplicationPolicyService', ListReplicationPolicyService);
+    
+  ListReplicationPolicyService.$inject = ['$http', '$q', '$timeout'];
+  
+  function ListReplicationPolicyService($http, $q, $timeout) {
+    
+    var mockData = [
+      {
+        'name': 'test01',
+        'description': 'Sync image for current.',
+        'destination': '10.117.170.69',
+        'start_time': '2015-05-26 22:30:30',
+        'status': 'NORMAL',
+        '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
+      },
+      {
+        '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() {
+      var defer = $q.defer();
+      $timeout(function() {
+        defer.resolve(mockData);
+      });
+      return defer.promise;
+    }
+    
+    function listReplicationPolicy(policyName) {
+      return async();
+    }
+    
+  }
+  
+})();
--- a/static/ng/resources/js/services/replication-policy/services.replication-policy.module.js
+++ b/static/ng/resources/js/services/replication-policy/services.replication-policy.module.js
@ -0,0 +1,8 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.policy', []);
+  
+})();
--- a/views/ng/sections/header-include.htm
+++ b/views/ng/sections/header-include.htm
@ -150,6 +150,9 @@
 <script src="/static/ng/resources/js/services/log/services.list-log.js"></script>
 <script src="/static/ng/resources/js/services/log/services.list-integrated-log.js"></script>

+<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/session/session.module.js"></script>
 <script src="/static/ng/resources/js/session/session.current-user.js"></script>