mirror of
https://github.com/goharbor/harbor.git
synced 2024-07-11 06:14:51 +02:00
updates for replication-job and policy interactions of UI.
This commit is contained in:
kunw
parent
8b9e1ebdee
commit
caf0ee0a20
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="pane-split" id="down-pane">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
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;
|
||||
|
||||
console.log('uponPaneHeight:' + uponPaneHeight + ', downPaneHeight:' + downPaneHeight + ', handleHeight:' + handleHeight);
|
||||
var handleHeight = element.find('.split-handle').height() + element.find('.split-handle').offset().top + element.find('.well').height() - 24;
|
||||
|
||||
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'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
angular
|
||||
.module('harbor.replication', [
|
||||
'harbor.services.replication.policy'
|
||||
'harbor.services.replication.policy',
|
||||
'harbor.services.replication.job'
|
||||
]);
|
||||
|
||||
})();
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.replication.job', []);
|
||||
|
||||
})();
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user