mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-18 22:57:38 +01:00
updates for destination and replication policy of UI.
This commit is contained in:
kunw
parent
3dcd9cff51
commit
9e07eef693
@ -1,6 +1,6 @@
|
||||
.switch-pane-admin-options {
|
||||
display: inline;
|
||||
width: 345px;
|
||||
width: 245px;
|
||||
float: right;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="endpoint" class="col-md-3 control-label">Endpoint:</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" name="uEndpoint" required>
|
||||
<input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" name="uEndpoint" ng-value="vm.endpoint" required>
|
||||
<div ng-messages="form.$submitted && form.uEndpoint.$error">
|
||||
<span ng-message="required">Endpoint is required.</span>
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="username" class="col-md-3 control-label">Username:</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control" id="username" ng-model="replication.destination.username" name="uUsername" required>
|
||||
<input type="text" class="form-control" id="username" ng-model="replication.destination.username" name="uUsername" ng-value="vm.username" required>
|
||||
<div ng-messages="form.$submitted && form.uUsername.$error">
|
||||
<span ng-message="required">Username is required.</span>
|
||||
</div>
|
||||
@ -67,7 +67,7 @@
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="password" class="col-md-3 control-label">Password:</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" class="form-control" id="password" ng-model="replication.destination.password" name="uPassword" required>
|
||||
<input type="password" class="form-control" id="password" ng-model="replication.destination.password" name="uPassword" ng-value="vm.password" required>
|
||||
<div ng-messages="form.$submitted && form.uPassword.$error">
|
||||
<span ng-message="required">Password is required.</span>
|
||||
</div>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
.module('harbor.replication')
|
||||
.directive('createPolicy', createPolicy);
|
||||
|
||||
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'UpdateDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
|
||||
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, $location, getParameterByName) {
|
||||
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, UpdateDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, $location, getParameterByName) {
|
||||
var vm = this;
|
||||
|
||||
//Since can not set value for textarea by using vm
|
||||
@ -25,6 +25,7 @@
|
||||
|
||||
vm.addNew = addNew;
|
||||
vm.edit = edit;
|
||||
vm.prepareDestination = prepareDestination;
|
||||
vm.createPolicy = createPolicy;
|
||||
vm.updatePolicy = updatePolicy;
|
||||
vm.pingDestination = pingDestination;
|
||||
@ -38,9 +39,7 @@
|
||||
vm1.password = vm1.selection.password;
|
||||
}
|
||||
});
|
||||
|
||||
prepareDestination();
|
||||
|
||||
|
||||
$scope.$watch('vm.action+","+vm.policyId', function(current) {
|
||||
if(current) {
|
||||
console.log('Current action for replication policy:' + current);
|
||||
@ -93,12 +92,28 @@
|
||||
UpdateReplicationPolicyService(vm.policyId, policy)
|
||||
.success(updateReplicationPolicySuccess)
|
||||
.error(updateReplicationPolicyFailed);
|
||||
|
||||
var targetId = vm1.selection.id;
|
||||
console.log('Update target ID:' + targetId);
|
||||
var target = {
|
||||
'name': vm1.selection.name,
|
||||
'endpoint': vm1.endpoint,
|
||||
'username': vm1.username,
|
||||
'password': vm1.password
|
||||
};
|
||||
UpdateDestinationService(targetId, target)
|
||||
.success(updateDestinationSuccess)
|
||||
.error(updateDestinationFailed);
|
||||
}
|
||||
|
||||
function pingDestination() {
|
||||
var targetId = vm1.selection.id;
|
||||
console.log('Ping target ID:' + targetId);
|
||||
PingDestinationService(targetId)
|
||||
var target = {
|
||||
'name': vm1.selection.name,
|
||||
'endpoint': vm1.endpoint,
|
||||
'username': vm1.username,
|
||||
'password': vm1.password
|
||||
};
|
||||
PingDestinationService(target)
|
||||
.success(pingDestinationSuccess)
|
||||
.error(pingDestinationFailed);
|
||||
}
|
||||
@ -128,14 +143,18 @@
|
||||
}
|
||||
function updateReplicationPolicySuccess(data, status) {
|
||||
console.log('Successful update replication policy.');
|
||||
vm.clearUp();
|
||||
}
|
||||
function updateReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed update replication policy.');
|
||||
}
|
||||
|
||||
function updateDestinationSuccess(data, status) {
|
||||
console.log('Successful update destination.');
|
||||
}
|
||||
function updateDestinationFailed(data, status) {
|
||||
console.log('Failed update destination.');
|
||||
}
|
||||
function pingDestinationSuccess(data, status) {
|
||||
alert('Successful ping target:' + data);
|
||||
alert('Successful ping target.');
|
||||
}
|
||||
function pingDestinationFailed(data, status) {
|
||||
alert('Failed ping target:' + data);
|
||||
@ -160,8 +179,13 @@
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attr, ctrl) {
|
||||
|
||||
element.find('#createPolicyModal').on('shown.bs.modal', function() {
|
||||
ctrl.prepareDestination();
|
||||
scope.form.$setPristine();
|
||||
});
|
||||
ctrl.save = save;
|
||||
|
||||
|
||||
function save(form) {
|
||||
console.log(angular.toJson(form));
|
||||
var postPayload = {
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<tr policy_id="//r.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>
|
||||
<td>//r.target_name//</td>
|
||||
<td>//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
|
||||
<td ng-switch on="//r.enabled//">
|
||||
<span ng-switch-when="1">Enabled</span>
|
||||
@ -75,9 +75,9 @@
|
||||
<td colspan="4" height="100%" class="empty-hint" ><h3 class="text-muted">No replication jobs.</h3></td>
|
||||
</tr>
|
||||
<tr ng-if="vm.replicationJobs.length > 0" ng-repeat="r in vm.replicationJobs">
|
||||
<td>//r.name//</td>
|
||||
<td>//r.tags != null ? r.tags.join(',') : 'N/A'//</td>
|
||||
<td>//r.operation//</td>
|
||||
<td>//r.start_time//</td>
|
||||
<td>//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
|
||||
<td>//r.status//</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -6,16 +6,21 @@
|
||||
.module('harbor.replication')
|
||||
.directive('listReplication', listReplication);
|
||||
|
||||
ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService'];
|
||||
ListReplicationController.$inject = ['$scope', 'getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService'];
|
||||
|
||||
function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService) {
|
||||
function ListReplicationController($scope, getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService) {
|
||||
var vm = this;
|
||||
|
||||
vm.projectId = getParameterByName('project_id', $location.absUrl());
|
||||
$scope.$on('$locationChangeSuccess', function() {
|
||||
vm.projectId = getParameterByName('project_id', $location.absUrl());
|
||||
vm.retrievePolicy();
|
||||
});
|
||||
|
||||
vm.addReplication = addReplication;
|
||||
vm.editReplication = editReplication;
|
||||
|
||||
vm.search = search;
|
||||
|
||||
vm.retrievePolicy = retrievePolicy;
|
||||
vm.retrieveJob = retrieveJob;
|
||||
vm.togglePolicy = togglePolicy;
|
||||
@ -23,9 +28,12 @@
|
||||
vm.last = false;
|
||||
vm.retrievePolicy();
|
||||
|
||||
|
||||
function search() {
|
||||
vm.retrievePolicy();
|
||||
}
|
||||
|
||||
function retrievePolicy() {
|
||||
ListReplicationPolicyService('', vm.projectId, vm.replicationName)
|
||||
ListReplicationPolicyService('', vm.projectId, vm.replicationPolicyName)
|
||||
.success(listReplicationPolicySuccess)
|
||||
.error(listReplicationPolicyFailed);
|
||||
}
|
||||
@ -126,12 +134,19 @@
|
||||
|
||||
scope.$watch('vm.replicationPolicies', function(current) {
|
||||
$timeout(function(){
|
||||
if(current && current.length > 0) {
|
||||
element.find('#upon-pane table>tbody>tr').on('click', trClickHandler);
|
||||
if(ctrl.lastPolicyId === -1) {
|
||||
element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');
|
||||
if(current) {
|
||||
if(current.length > 0) {
|
||||
element.find('#upon-pane table>tbody>tr').on('click', trClickHandler);
|
||||
if(ctrl.lastPolicyId === -1) {
|
||||
element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');
|
||||
}else{
|
||||
element.find('#upon-pane table>tbody>tr').filter('[policy_id="' + ctrl.lastPolicyId + '"]').trigger('click');
|
||||
}
|
||||
}else{
|
||||
element.find('#upon-pane table>tbody>tr').filter('[policy_id="' + ctrl.lastPolicyId + '"]').trigger('click');
|
||||
element
|
||||
.find('#upon-pane table>tbody>tr')
|
||||
.css({'background-color': '#FFFFFF'})
|
||||
.css({'color': '#000'});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<div class="col-md-3"></div>
|
||||
<div class="col-md-9">
|
||||
<button type="button" class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
|
||||
<button type="submit" class="btn btn-default" ng-click="form.$valid && vm.pingDestination()">Test Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
.module('harbor.system.management')
|
||||
.directive('createDestination', createDestination);
|
||||
|
||||
CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService'];
|
||||
CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService', 'PingDestinationService'];
|
||||
|
||||
function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService) {
|
||||
function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService, PingDestinationService) {
|
||||
var vm = this;
|
||||
|
||||
$scope.destination = {};
|
||||
@ -18,6 +18,7 @@
|
||||
vm.edit = edit;
|
||||
vm.create = create;
|
||||
vm.update = update;
|
||||
vm.pingDestination = pingDestination;
|
||||
|
||||
$scope.$watch('vm.action + "," + vm.targetId', function(current) {
|
||||
if(current) {
|
||||
@ -26,9 +27,11 @@
|
||||
vm.targetId = parts[1];
|
||||
switch(vm.action) {
|
||||
case 'ADD_NEW':
|
||||
vm.modalTitle = 'Create destination';
|
||||
vm.addNew();
|
||||
break;
|
||||
case 'EDIT':
|
||||
vm.modalTitle = 'Edit destination';
|
||||
vm.edit(vm.targetId);
|
||||
break;
|
||||
}
|
||||
@ -92,6 +95,25 @@
|
||||
function getDestinationFailed(data, status) {
|
||||
console.log('Failed get destination.');
|
||||
}
|
||||
|
||||
function pingDestination() {
|
||||
var target = {
|
||||
'name': vm0.name,
|
||||
'endpoint': vm0.endpoint,
|
||||
'username': vm0.username,
|
||||
'password': vm0.password
|
||||
};
|
||||
console.log('Ping target:' + angular.toJson(target));
|
||||
PingDestinationService(target)
|
||||
.success(pingDestinationSuccess)
|
||||
.error(pingDestinationFailed);
|
||||
}
|
||||
function pingDestinationSuccess(data, status) {
|
||||
alert('Successful ping target.');
|
||||
}
|
||||
function pingDestinationFailed(data, status) {
|
||||
alert('Failed ping target:' + data);
|
||||
}
|
||||
}
|
||||
|
||||
function createDestination() {
|
||||
@ -112,6 +134,10 @@
|
||||
|
||||
function link(scope, element, attrs, ctrl) {
|
||||
|
||||
element.find('#createDestinationModal').on('hidden.bs.modal', function() {
|
||||
scope.form.$setPristine();
|
||||
});
|
||||
|
||||
ctrl.save = save;
|
||||
|
||||
function save(destination) {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<tr ng-if="vm.destinations.length > 0" ng-repeat="r in vm.destinations">
|
||||
<td>//r.name//</td>
|
||||
<td>//r.endpoint//</td>
|
||||
<td>//r.creation_time//</td>
|
||||
<td>//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
|
||||
<td>
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#createDestinationModal" ng-click="vm.editDestination(r.id)"><span class="glyphicon glyphicon-pencil"></span></a>
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
vm.retrieve();
|
||||
|
||||
function retrieve() {
|
||||
ListDestinationService('')
|
||||
ListDestinationService('', vm.destinationName)
|
||||
.success(listDestinationSuccess)
|
||||
.error(listDestinationFailed);
|
||||
}
|
||||
|
||||
@ -7,17 +7,17 @@
|
||||
<button class="btn btn-primary" type="button" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>
|
||||
</span>
|
||||
</div>
|
||||
<create-policy reload="vm.retrieve()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
|
||||
</div>
|
||||
<div class="pane">
|
||||
<div class="sub-pane">
|
||||
<table class="table table-pane">
|
||||
<thead>
|
||||
<th width="12%">Name</th>
|
||||
<th width="14%">Description</th>
|
||||
<th width="12%">Project</th>
|
||||
<th width="14%">Destination</th>
|
||||
<th width="12%">Start Time</th>
|
||||
<th width="12%">Status</th>
|
||||
<th width="14%">Name</th>
|
||||
<th width="18%">Description</th>
|
||||
<th width="14%">Project</th>
|
||||
<th width="12%">Destination</th>
|
||||
<th width="18%">Start Time</th>
|
||||
<th width="12%">Activation</th>
|
||||
<th width="12%">Actions</th>
|
||||
</thead>
|
||||
@ -28,12 +28,20 @@
|
||||
<tr ng-if="vm.replications.length > 0" ng-repeat="r in vm.replications">
|
||||
<td>//r.name//</td>
|
||||
<td>//r.description//</td>
|
||||
<td>//r.project//</td>
|
||||
<td>//r.destination//</td>
|
||||
<td>//r.start_time//</td>
|
||||
<td>//r.status//</td>
|
||||
<td>//r.activation//</td>
|
||||
<td></td>
|
||||
<td>//r.project_name//</td>
|
||||
<td>//r.target_name//</td>
|
||||
<td>//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
|
||||
<td>//r.enabled == 1 ? 'Enabled' : 'Disabled'//</td>
|
||||
<td>
|
||||
<div class="display-inline-block" ng-switch on="//r.enabled//">
|
||||
<a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 0)"><span ng-switch-when="1" class="glyphicon glyphicon-play color-success"></span></a>
|
||||
<a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)"><span ng-switch-when="0" class="glyphicon glyphicon-stop color-danger"></span></a>
|
||||
</div>
|
||||
|
||||
<a href="javascript:void(0);" data-toggle="modal" data-target="#createPolicyModal" ng-click="vm.editReplication(r.id)"><span class="glyphicon glyphicon-pencil"></span></a>
|
||||
|
||||
<a href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -6,16 +6,54 @@
|
||||
.module('harbor.system.management')
|
||||
.directive('replication', replication);
|
||||
|
||||
ReplicationController.$inject = ['ListReplicationPolicyService'];
|
||||
ReplicationController.$inject = ['ListReplicationPolicyService', 'ToggleReplicationPolicyService'];
|
||||
|
||||
function ReplicationController(ListReplicationPolicyService) {
|
||||
function ReplicationController(ListReplicationPolicyService, ToggleReplicationPolicyService) {
|
||||
var vm = this;
|
||||
ListReplicationPolicyService()
|
||||
.then(function(data) {
|
||||
vm.replications = data;
|
||||
}, function(data) {
|
||||
|
||||
});
|
||||
vm.retrieve = retrieve;
|
||||
vm.search = search;
|
||||
vm.togglePolicy = togglePolicy;
|
||||
vm.editReplication = editReplication;
|
||||
vm.retrieve();
|
||||
|
||||
function search() {
|
||||
vm.retrieve();
|
||||
}
|
||||
|
||||
function retrieve() {
|
||||
ListReplicationPolicyService('', '', vm.replicationName)
|
||||
.success(listReplicationPolicySuccess)
|
||||
.error(listReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function listReplicationPolicySuccess(data, status) {
|
||||
vm.replications = data || [];
|
||||
}
|
||||
|
||||
function listReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed list replication policy.');
|
||||
}
|
||||
|
||||
function togglePolicy(policyId, enabled) {
|
||||
ToggleReplicationPolicyService(policyId, enabled)
|
||||
.success(toggleReplicationPolicySuccess)
|
||||
.error(toggleReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function toggleReplicationPolicySuccess(data, status) {
|
||||
console.log('Successful toggle replication policy.');
|
||||
vm.retrieve();
|
||||
}
|
||||
|
||||
function toggleReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed toggle replication policy.');
|
||||
}
|
||||
|
||||
function editReplication(policyId) {
|
||||
vm.action = 'EDIT';
|
||||
vm.modalTitle = 'Edit policy';
|
||||
vm.policyId = policyId;
|
||||
}
|
||||
}
|
||||
|
||||
function replication() {
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<ul class="switch-pane-admin-options" role="tablist">
|
||||
<li><a tag="destinations" href="#/destinations">Destinations</a><span class="gutter">|</span></li>
|
||||
<li><a tag="replication" href="#/replication">Replication</a><span class="gutter">|</span></li>
|
||||
<li><a tag="replication" href="#/replication">Replication</a><span class="gutter">
|
||||
<!--
|
||||
<li><a tag="configuration" href="#/configuration">Configuration</a></li>
|
||||
-->
|
||||
</ul>
|
||||
@ -10,7 +10,19 @@
|
||||
|
||||
function PingDestinationService($http) {
|
||||
return pingDestination;
|
||||
function pingDestination(targetId) {
|
||||
function pingDestination(target) {
|
||||
var payload = {};
|
||||
if(target['id']) {
|
||||
payload = {'id': target['id']};
|
||||
}else {
|
||||
payload = {
|
||||
'name': target['name'],
|
||||
'endpoint': target['endpoint'],
|
||||
'username': target['username'],
|
||||
'password': target['password']
|
||||
};
|
||||
}
|
||||
|
||||
return $http({
|
||||
'method': 'POST',
|
||||
'url': '/api/targets/ping',
|
||||
@ -22,7 +34,7 @@
|
||||
}
|
||||
return str.join("&");
|
||||
},
|
||||
'data': {'id': targetId}
|
||||
'data': payload
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
.put('/api/policies/replication/' + policyId, {
|
||||
'name': policy.name,
|
||||
'description': policy.description,
|
||||
'enabled': policy.enabled
|
||||
'enabled': policy.enabled,
|
||||
'target_id': policy.targetId
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user