mirror of
https://github.com/goharbor/harbor.git
synced 2024-07-06 11:46:11 +02:00
updates for destination operations of UI.
This commit is contained in:
kunw
parent
881f67d1bc
commit
18509958a2
|
|
@ -1,6 +1,6 @@
|
|||
<div class="modal fade" id="createPolicyModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
|
||||
<form name="form" class="form-horizontal css-form" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
.module('harbor.replication')
|
||||
.directive('createPolicy', createPolicy);
|
||||
|
||||
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
|
||||
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
|
||||
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, $location, getParameterByName) {
|
||||
var vm = this;
|
||||
|
||||
//Since can not set value for textarea by using vm
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
vm.addNew = addNew;
|
||||
vm.edit = edit;
|
||||
vm.createPolicy = createPolicy;
|
||||
vm.updatePolicy = updatePolicy;
|
||||
vm.pingDestination = pingDestination;
|
||||
|
||||
$scope.$watch('vm.destinations', function(current) {
|
||||
|
|
@ -39,11 +40,14 @@
|
|||
});
|
||||
|
||||
prepareDestination();
|
||||
|
||||
$scope.$watch('vm.action', function(current) {
|
||||
|
||||
$scope.$watch('vm.action+","+vm.policyId', function(current) {
|
||||
if(current) {
|
||||
console.log('Current action for replication policy:' + current);
|
||||
switch(current) {
|
||||
var parts = current.split(',');
|
||||
vm.action = parts[0];
|
||||
vm.policyId = Number(parts[1]);
|
||||
switch(parts[0]) {
|
||||
case 'ADD_NEW':
|
||||
vm.addNew(); break;
|
||||
case 'EDIT':
|
||||
|
|
@ -84,6 +88,13 @@
|
|||
.error(createReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function updatePolicy(policy) {
|
||||
console.log('Update policy ID:' + vm.policyId);
|
||||
UpdateReplicationPolicyService(vm.policyId, policy)
|
||||
.success(updateReplicationPolicySuccess)
|
||||
.error(updateReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function pingDestination() {
|
||||
var targetId = vm1.selection.id;
|
||||
console.log('Ping target ID:' + targetId);
|
||||
|
|
@ -99,10 +110,10 @@
|
|||
console.log('Failed list destination:' + data);
|
||||
}
|
||||
function listReplicationPolicySuccess(data, status) {
|
||||
var replicationPolicy = data[0];
|
||||
var replicationPolicy = data;
|
||||
vm0.name = replicationPolicy.name;
|
||||
vm0.description = replicationPolicy.description;
|
||||
vm0.enabled = (replicationPolicy.enabled == 1);
|
||||
vm0.enabled = replicationPolicy.enabled == 1;
|
||||
vm.targetId = replicationPolicy.target_id;
|
||||
}
|
||||
function listReplicationPolicyFailed(data, status) {
|
||||
|
|
@ -115,6 +126,14 @@
|
|||
function createReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed create replication policy.');
|
||||
}
|
||||
function updateReplicationPolicySuccess(data, status) {
|
||||
console.log('Successful update replication policy.');
|
||||
vm.clearUp();
|
||||
}
|
||||
function updateReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed update replication policy.');
|
||||
}
|
||||
|
||||
function pingDestinationSuccess(data, status) {
|
||||
alert('Successful ping target:' + data);
|
||||
}
|
||||
|
|
@ -142,7 +161,7 @@
|
|||
|
||||
function link(scope, element, attr, ctrl) {
|
||||
ctrl.save = save;
|
||||
ctrl.clearUp = clearUp;
|
||||
|
||||
function save(form) {
|
||||
console.log(angular.toJson(form));
|
||||
var postPayload = {
|
||||
|
|
@ -154,13 +173,16 @@
|
|||
'cron_str': '',
|
||||
'start_time': ''
|
||||
};
|
||||
ctrl.createPolicy(postPayload, clearUp);
|
||||
}
|
||||
|
||||
function clearUp() {
|
||||
switch(ctrl.action) {
|
||||
case 'ADD_NEW':
|
||||
ctrl.createPolicy(postPayload); break;
|
||||
case 'EDIT':
|
||||
ctrl.updatePolicy(postPayload); break;
|
||||
}
|
||||
element.find('#createPolicyModal').modal('hide');
|
||||
ctrl.reload();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
vm.retrievePolicy = retrievePolicy;
|
||||
vm.retrieveJob = retrieveJob;
|
||||
vm.togglePolicy = togglePolicy;
|
||||
|
||||
|
||||
vm.last = false;
|
||||
vm.retrievePolicy();
|
||||
|
||||
|
|
@ -61,9 +61,10 @@
|
|||
vm.policyId = policyId;
|
||||
vm.modalTitle = 'Edit Policy';
|
||||
vm.action = 'EDIT';
|
||||
|
||||
console.log('Selected policy ID:' + vm.policyId);
|
||||
}
|
||||
|
||||
|
||||
function togglePolicy(policyId, enabled) {
|
||||
ToggleReplicationPolicyService(policyId, enabled)
|
||||
.success(toggleReplicationPolicySuccess)
|
||||
|
|
@ -78,6 +79,7 @@
|
|||
function toggleReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed toggle replication policy.');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function listReplication($timeout) {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<div class="modal fade" id="createDestinationModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<form name="form" class="form-horizontal css-form" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Create New Destination</h4>
|
||||
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> //vm.modalTitle//</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="create-destination">
|
||||
<form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="name" class="col-md-3 control-label">Name:</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" class="form-control form-control-custom" id="name" ng-model="destination.name" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.name" name="uName" required>
|
||||
<div ng-messages="form.$dirty && form.uName.$error">
|
||||
<input type="text" class="form-control form-control-custom" id="name" ng-model="destination.name" name="uName" required>
|
||||
<div ng-messages="form.$submitted && form.uName.$error">
|
||||
<span ng-message="required">Name is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="description" 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="destination.endpoint" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.endpoint" name="uEndpoint" required >
|
||||
<div ng-messages="form.$dirty && form.uEndpoint.$error">
|
||||
<input type="text" class="form-control form-control-custom" id="endpoint" ng-model="destination.endpoint" name="uEndpoint" required >
|
||||
<div ng-messages="form.$submitted && form.uEndpoint.$error">
|
||||
<span ng-message="required">Endpoint is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
<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="destination.username" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.username" name="uUsername" required>
|
||||
<div ng-messages="form.$dirty && form.uUsername.$error">
|
||||
<input type="text" class="form-control" id="username" ng-model="destination.username" name="uUsername" required>
|
||||
<div ng-messages="form.$submitted && form.uUsername.$error">
|
||||
<span ng-message="required">Username is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
<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="destination.password" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.destination.password" name="uPassword" required>
|
||||
<div ng-messages="form.$dirty && form.uPassword.$error">
|
||||
<input type="password" class="form-control" id="password" ng-model="destination.password" name="uPassword" required>
|
||||
<div ng-messages="form.$submitted && form.uPassword.$error">
|
||||
<span ng-message="required">Password is required.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,16 +47,17 @@
|
|||
<div class="form-group col-md-12 form-group-custom">
|
||||
<div class="col-md-3"></div>
|
||||
<div class="col-md-9">
|
||||
<button class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
|
||||
<button type="button" class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="btnOk" ng-click="vm.save(destination)">// 'ok' | tr //</button>
|
||||
<button type="submit" class="btn btn-primary" id="btnOk" ng-click="form.$valid && vm.save(destination)">// 'ok' | tr //</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</form>
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
|
@ -6,22 +6,53 @@
|
|||
.module('harbor.system.management')
|
||||
.directive('createDestination', createDestination);
|
||||
|
||||
CreateDestinationController.$inject = ['CreateDestinationService'];
|
||||
CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService'];
|
||||
|
||||
function CreateDestinationController(CreateDestinationService) {
|
||||
function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService) {
|
||||
var vm = this;
|
||||
vm.save = save;
|
||||
|
||||
function save(destination) {
|
||||
if(destination) {
|
||||
console.log('destination:' + angular.toJson(destination));
|
||||
CreateDestinationService(destination.name, destination.endpoint,
|
||||
$scope.destination = {};
|
||||
|
||||
var vm0 = $scope.destination;
|
||||
vm.addNew = addNew;
|
||||
vm.edit = edit;
|
||||
vm.create = create;
|
||||
vm.update = update;
|
||||
|
||||
$scope.$watch('vm.action + "," + vm.targetId', function(current) {
|
||||
if(current) {
|
||||
var parts = current.split(',');
|
||||
vm.action = parts[0];
|
||||
vm.targetId = parts[1];
|
||||
switch(vm.action) {
|
||||
case 'ADD_NEW':
|
||||
vm.addNew();
|
||||
break;
|
||||
case 'EDIT':
|
||||
vm.edit(vm.targetId);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function addNew() {
|
||||
vm0.name = '';
|
||||
vm0.endpoint = '';
|
||||
vm0.username = '';
|
||||
vm0.password = '';
|
||||
}
|
||||
|
||||
function edit(targetId) {
|
||||
getDestination(targetId);
|
||||
}
|
||||
|
||||
function create(destination) {
|
||||
CreateDestinationService(destination.name, destination.endpoint,
|
||||
destination.username, destination.password)
|
||||
.success(createDestinationSuccess)
|
||||
.error(createDestinationFailed);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function createDestinationSuccess(data, status) {
|
||||
alert('Successful created destination.');
|
||||
}
|
||||
|
|
@ -30,18 +61,74 @@
|
|||
console.log('Failed create destination:' + data);
|
||||
}
|
||||
|
||||
function update(destination) {
|
||||
UpdateDestinationService(vm.targetId, destination)
|
||||
.success(updateDestinationSuccess)
|
||||
.error(updateDestinationFailed);
|
||||
}
|
||||
|
||||
function updateDestinationSuccess(data, status) {
|
||||
console.log('Successful update destination.');
|
||||
}
|
||||
|
||||
function updateDestinationFailed(data, status) {
|
||||
console.log('Failed update destination.');
|
||||
}
|
||||
|
||||
function getDestination(targetId) {
|
||||
ListDestinationService(targetId)
|
||||
.success(getDestinationSuccess)
|
||||
.error(getDestinationFailed);
|
||||
}
|
||||
|
||||
function getDestinationSuccess(data, status) {
|
||||
var destination = data;
|
||||
vm0.name = destination.name;
|
||||
vm0.endpoint = destination.endpoint;
|
||||
vm0.username = destination.username;
|
||||
vm0.password = destination.password;
|
||||
}
|
||||
|
||||
function getDestinationFailed(data, status) {
|
||||
console.log('Failed get destination.');
|
||||
}
|
||||
}
|
||||
|
||||
function createDestination() {
|
||||
var directive = {
|
||||
'restrict': 'E',
|
||||
'templateUrl': '/static/ng/resources/js/components/system-management/create-destination.directive.html',
|
||||
'scope': true,
|
||||
'scope': {
|
||||
'action': '@',
|
||||
'targetId': '@',
|
||||
'reload': '&'
|
||||
},
|
||||
'link': link,
|
||||
'controller': CreateDestinationController,
|
||||
'controllerAs': 'vm',
|
||||
'bindToController': true
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs, ctrl) {
|
||||
|
||||
ctrl.save = save;
|
||||
|
||||
function save(destination) {
|
||||
if(destination) {
|
||||
console.log('destination:' + angular.toJson(destination));
|
||||
switch(ctrl.action) {
|
||||
case 'ADD_NEW':
|
||||
ctrl.create(destination);
|
||||
break;
|
||||
case 'EDIT':
|
||||
ctrl.update(destination);
|
||||
}
|
||||
element.find('#createDestinationModal').modal('hide');
|
||||
ctrl.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addDestination()" data-toggle="modal" data-target="#createDestinationModal"><span class="glyphicon glyphicon-plus"></span>New Destination</button>
|
||||
<create-destination></create-destination>
|
||||
<create-destination action="//vm.action//" target-id="//vm.targetId//" reload="vm.retrieve()"></create-destination>
|
||||
</div>
|
||||
<div class="pane">
|
||||
<div class="sub-pane">
|
||||
|
|
@ -27,7 +27,11 @@
|
|||
<td>//r.name//</td>
|
||||
<td>//r.endpoint//</td>
|
||||
<td>//r.creation_time//</td>
|
||||
<td></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>
|
||||
|
||||
<a href="javascript:void(0);" ng-click="vm.deleteDestination(r.id)"><span class="glyphicon glyphicon-trash"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,17 @@
|
|||
.module('harbor.system.management')
|
||||
.directive('destination', destination);
|
||||
|
||||
DestinationController.$inject = ['ListDestinationService'];
|
||||
DestinationController.$inject = ['$scope', 'ListDestinationService', 'DeleteDestinationService'];
|
||||
|
||||
function DestinationController(ListDestinationService) {
|
||||
function DestinationController($scope, ListDestinationService, DeleteDestinationService) {
|
||||
var vm = this;
|
||||
|
||||
vm.retrieve = retrieve;
|
||||
vm.search = search;
|
||||
vm.addDestination = addDestination;
|
||||
vm.editDestination = editDestination;
|
||||
vm.deleteDestination = deleteDestination;
|
||||
|
||||
vm.retrieve();
|
||||
|
||||
function retrieve() {
|
||||
|
|
@ -25,6 +29,23 @@
|
|||
vm.retrieve();
|
||||
}
|
||||
|
||||
function addDestination() {
|
||||
vm.action = 'ADD_NEW';
|
||||
console.log('Action for destination:' + vm.action);
|
||||
}
|
||||
|
||||
function editDestination(targetId) {
|
||||
vm.action = 'EDIT';
|
||||
vm.targetId = targetId;
|
||||
console.log('Action for destination:' + vm.action + ', target ID:' + vm.targetId);
|
||||
}
|
||||
|
||||
function deleteDestination(targetId) {
|
||||
DeleteDestinationService(targetId)
|
||||
.success(deleteDestinationSuccess)
|
||||
.error(deleteDestinationFailed);
|
||||
}
|
||||
|
||||
function listDestinationSuccess(data, status) {
|
||||
vm.destinations = data;
|
||||
}
|
||||
|
|
@ -33,7 +54,14 @@
|
|||
console.log('Failed list destination:' + data);
|
||||
}
|
||||
|
||||
function deleteDestinationSuccess(data, status) {
|
||||
console.log('Successful delete destination.');
|
||||
vm.retrieve();
|
||||
}
|
||||
|
||||
function deleteDestinationFailed(data, status) {
|
||||
console.log('Failed delete destination.');
|
||||
}
|
||||
}
|
||||
|
||||
function destination() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.destination')
|
||||
.factory('DeleteDestinationService', DeleteDestinationService);
|
||||
|
||||
DeleteDestinationService.$inject = ['$http'];
|
||||
|
||||
function DeleteDestinationService($http) {
|
||||
return deleteDestination;
|
||||
function deleteDestination(targetId) {
|
||||
return $http
|
||||
.delete('/api/targets/' + targetId);
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.destination')
|
||||
.factory('UpdateDestinationService', UpdateDestinationService);
|
||||
|
||||
UpdateDestinationService.$inject = ['$http'];
|
||||
|
||||
function UpdateDestinationService($http) {
|
||||
return updateDestination;
|
||||
function updateDestination(targetId, target) {
|
||||
return $http
|
||||
.put('/api/targets/' + targetId, {
|
||||
'name': target.name,
|
||||
'endpoint': target.endpoint,
|
||||
'username': target.username,
|
||||
'password': target.password
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.replication.policy')
|
||||
.factory('UpdateReplicationPolicyService', UpdateReplicationPolicyService);
|
||||
|
||||
UpdateReplicationPolicyService.$inject = ['$http'];
|
||||
|
||||
function UpdateReplicationPolicyService($http) {
|
||||
return updateReplicationPolicy;
|
||||
function updateReplicationPolicy(policyId, policy) {
|
||||
return $http
|
||||
.put('/api/policies/replication/' + policyId, {
|
||||
'name': policy.name,
|
||||
'description': policy.description,
|
||||
'enabled': policy.enabled
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
<script src="/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js"></script>
|
||||
<script src="/static/ng/resources/js/services/replication-policy/services.create-replication-policy.js"></script>
|
||||
<script src="/static/ng/resources/js/services/replication-policy/services.toggle-replication-policy.js"></script>
|
||||
|
||||
<script src="/static/ng/resources/js/services/replication-policy/services.update-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>
|
||||
|
|
@ -148,7 +148,8 @@
|
|||
<script src="/static/ng/resources/js/services/destination/services.create-destination.js"></script>
|
||||
<script src="/static/ng/resources/js/services/destination/services.list-destination.js"></script>
|
||||
<script src="/static/ng/resources/js/services/destination/services.ping-destination.js"></script>
|
||||
|
||||
<script src="/static/ng/resources/js/services/destination/services.update-destination.js"></script>
|
||||
<script src="/static/ng/resources/js/services/destination/services.delete-destination.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>
|
||||
|
|
@ -208,7 +209,6 @@
|
|||
<script src="/static/ng/resources/js/components/replication/list-replication.directive.js"></script>
|
||||
<script src="/static/ng/resources/js/components/replication/create-policy.directive.js"></script>
|
||||
|
||||
|
||||
<script src="/static/ng/resources/js/components/system-management/system-management.module.js"></script>
|
||||
<script src="/static/ng/resources/js/components/system-management/system-management.directive.js"></script>
|
||||
<script src="/static/ng/resources/js/components/system-management/destination.directive.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user