updates for replication-job and policy interactions of UI.

This commit is contained in:
kunw 2016-05-27 18:47:06 +08:00
parent 8b9e1ebdee
commit caf0ee0a20
9 changed files with 168 additions and 212 deletions

View File

@ -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;
}

View File

@ -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>
<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="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>
<th width="20%">Name</th>
<th width="25%">Operation</th>
<th width="40%">Start Time</th>
<th width="15%">Status</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 ng-if="vm.replicationJobs.length == 0">
<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.destination//</td>
<td>//r.operation//</td>
<td>//r.start_time//</td>
<td>//r.status//</td>
<td>//r.activation//</td>
<td></td>
</tr>
</tbody>
</table>

View File

@ -6,21 +6,28 @@
.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();
function retrieve() {
vm.retrievePolicy();
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;
var handleHeight = element.find('.split-handle').height() + element.find('.split-handle').offset().top + element.find('.well').height() - 24;
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'});
element.find('#down-pane').css({'height' : downPaneHeight - (e.pageY - handleHeight) + 'px'});
if(element.find('#down-pane').height() <= maxDownPaneHeight) {
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'));
}
}
}

View File

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

View File

@ -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',

View File

@ -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;
}
}
})();

View File

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

View File

@ -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',
'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',
'policy_id': 5,
'name': 'test05',
'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();
}
}
})();

View File

@ -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>