mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-18 22:57:38 +01:00
updates for creation of replication-policy and list-policy operations of UI.
This commit is contained in:
kunw
parent
da80adc025
commit
cec58dc622
@ -65,3 +65,15 @@
|
||||
cursor: ns-resize;
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
.color-success {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.color-danger {
|
||||
color: #d9534f
|
||||
}
|
||||
|
||||
.color-warning {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="modal fade" id="createPolicyModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<form name="form" class="form-horizontal css-form" novalidate>
|
||||
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid" 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 Policy</h4>
|
||||
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span> //vm.modalTitle//</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="create-policy">
|
||||
@ -43,13 +43,13 @@
|
||||
<div class="form-group col-md-12 form-group-custom">
|
||||
<label for="destinationName" class="col-md-3 control-label">Name:</label>
|
||||
<div class="col-md-7">
|
||||
<select class="form-control form-control-custom" id="destinationName" ng-model="replication.destination" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination()"></select>
|
||||
<select class="form-control form-control-custom" id="destinationName" ng-model="replication.destination.selection" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination(replication.destination.selection)"></select>
|
||||
</div>
|
||||
</div>
|
||||
<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" ng-value="endpoint" name="uEndpoint" required>
|
||||
<input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" name="uEndpoint" 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" ng-value="username" name="uUsername" required>
|
||||
<input type="text" class="form-control" id="username" ng-model="replication.destination.username" name="uUsername" 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" ng-value="password" name="uPassword" required>
|
||||
<input type="password" class="form-control" id="password" ng-model="replication.destination.password" name="uPassword" required>
|
||||
<div ng-messages="form.$submitted && form.uPassword.$error">
|
||||
<span ng-message="required">Password is required.</span>
|
||||
</div>
|
||||
@ -76,7 +76,7 @@
|
||||
<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.pingDestination()">Test Connection</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,39 +6,77 @@
|
||||
.module('harbor.replication')
|
||||
.directive('createPolicy', createPolicy);
|
||||
|
||||
CreatePolicyController.$inject = ['$scope', 'ListDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', '$location', 'getParameterByName'];
|
||||
|
||||
function CreatePolicyController($scope, ListDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
|
||||
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, PingDestinationService, CreateReplicationPolicyService, $location, getParameterByName) {
|
||||
var vm = this;
|
||||
|
||||
//Since can not set value for textarea by using vm
|
||||
//use $scope for instead.
|
||||
$scope.replication = {};
|
||||
$scope.replication.policy = {};
|
||||
$scope.replication.destination = {};
|
||||
|
||||
var vm0 = $scope.replication;
|
||||
var vm1 = $scope.replication.policy;
|
||||
var vm0 = $scope.replication.policy;
|
||||
var vm1 = $scope.replication.destination;
|
||||
|
||||
vm.selectDestination = selectDestination;
|
||||
vm.projectId = getParameterByName('project_id', $location.absUrl());
|
||||
vm.prepare = prepare;
|
||||
vm.prepare();
|
||||
|
||||
vm.addNew = addNew;
|
||||
vm.edit = edit;
|
||||
vm.createPolicy = createPolicy;
|
||||
|
||||
vm.pingDestination = pingDestination;
|
||||
|
||||
$scope.$watch('vm.destinations', function(current) {
|
||||
if(current) {
|
||||
console.log('destination:' + angular.toJson(current));
|
||||
vm0.destination = current[0];
|
||||
vm1.selection = current[0];
|
||||
vm1.endpoint = vm1.selection.endpoint;
|
||||
vm1.username = vm1.selection.username;
|
||||
vm1.password = vm1.selection.password;
|
||||
}
|
||||
});
|
||||
|
||||
function prepare() {
|
||||
vm1.name = 'name';
|
||||
vm1.description = 'test';
|
||||
vm1.enabled = true;
|
||||
|
||||
ListDestinationService()
|
||||
prepareDestination();
|
||||
|
||||
$scope.$watch('vm.action', function(current) {
|
||||
if(current) {
|
||||
console.log('Current action for replication policy:' + current);
|
||||
switch(current) {
|
||||
case 'ADD_NEW':
|
||||
vm.addNew(); break;
|
||||
case 'EDIT':
|
||||
vm.edit(vm.policyId); break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function selectDestination(item) {
|
||||
vm1.selection = item;
|
||||
vm1.endpoint = item.endpoint;
|
||||
vm1.username = item.username;
|
||||
vm1.password = item.password;
|
||||
}
|
||||
|
||||
function prepareDestination() {
|
||||
ListDestinationService('')
|
||||
.success(listDestinationSuccess)
|
||||
.error(listDestinationFailed);
|
||||
}
|
||||
|
||||
function addNew() {
|
||||
vm0.name = '';
|
||||
vm0.description = '';
|
||||
vm0.enabled = true;
|
||||
}
|
||||
|
||||
function edit(policyId) {
|
||||
console.log('Edit policy ID:' + policyId);
|
||||
ListReplicationPolicyService(policyId)
|
||||
.success(listReplicationPolicySuccess)
|
||||
.error(listReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function createPolicy(policy) {
|
||||
CreateReplicationPolicyService(policy)
|
||||
@ -46,12 +84,30 @@
|
||||
.error(createReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function pingDestination() {
|
||||
var targetId = vm1.selection.id;
|
||||
console.log('Ping target ID:' + targetId);
|
||||
PingDestinationService(targetId)
|
||||
.success(pingDestinationSuccess)
|
||||
.error(pingDestinationFailed);
|
||||
}
|
||||
|
||||
function listDestinationSuccess(data, status) {
|
||||
vm.destinations = data;
|
||||
}
|
||||
function listDestinationFailed(data, status) {
|
||||
console.log('Failed list destination:' + data);
|
||||
}
|
||||
function listReplicationPolicySuccess(data, status) {
|
||||
var replicationPolicy = data[0];
|
||||
vm0.name = replicationPolicy.name;
|
||||
vm0.description = replicationPolicy.description;
|
||||
vm0.enabled = (replicationPolicy.enabled == 1);
|
||||
vm.targetId = replicationPolicy.target_id;
|
||||
}
|
||||
function listReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed list replication policy:' + data);
|
||||
}
|
||||
function createReplicationPolicySuccess(data, status) {
|
||||
console.log('Successful create replication policy.');
|
||||
vm.clearUp();
|
||||
@ -59,6 +115,12 @@
|
||||
function createReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed create replication policy.');
|
||||
}
|
||||
function pingDestinationSuccess(data, status) {
|
||||
alert('Successful ping target:' + data);
|
||||
}
|
||||
function pingDestinationFailed(data, status) {
|
||||
alert('Failed ping target:' + data);
|
||||
}
|
||||
}
|
||||
|
||||
function createPolicy() {
|
||||
@ -66,7 +128,10 @@
|
||||
'restrict': 'E',
|
||||
'templateUrl': '/static/ng/resources/js/components/replication/create-policy.directive.html',
|
||||
'scope': {
|
||||
'reload': '&'
|
||||
'policyId': '@',
|
||||
'modalTitle': '@',
|
||||
'reload': '&',
|
||||
'action': '='
|
||||
},
|
||||
'link': link,
|
||||
'controller': CreatePolicyController,
|
||||
@ -82,7 +147,7 @@
|
||||
console.log(angular.toJson(form));
|
||||
var postPayload = {
|
||||
'projectId': Number(ctrl.projectId),
|
||||
'targetId': form.destination.id,
|
||||
'targetId': form.destination.selection.id,
|
||||
'name': form.policy.name,
|
||||
'enabled': form.policy.enabled ? 1 : 0,
|
||||
'description': form.policy.description,
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<div class="col-xs-12 col-md-12 each-tab-pane">
|
||||
<div class="form-inline">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="" ng-model="vm.replicationName" size="30">
|
||||
<input type="text" class="form-control" placeholder="" ng-model="vm.replicationPolicyName" 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>
|
||||
<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 reload="vm.retrievePolicy()"></create-policy>
|
||||
<create-policy reload="vm.retrievePolicy()" action="vm.action" modal-title="//vm.modalTitle//" policy-id="//vm.policyId//"></create-policy>
|
||||
</div>
|
||||
<div class="pane-split" id="upon-pane">
|
||||
<div class="sub-pane-split">
|
||||
@ -16,11 +16,10 @@
|
||||
<thead>
|
||||
<th width="10%">Name</th>
|
||||
<th width="18%">Description</th>
|
||||
<th width="14%">Destination</th>
|
||||
<th width="18%">Destination</th>
|
||||
<th width="18%">Start Time</th>
|
||||
<th width="14%">Status</th>
|
||||
<th width="14%">Activation</th>
|
||||
<th width="12%">Actions</th>
|
||||
<th width="15%">Actions</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="vm.replicationPolicies.length == 0">
|
||||
@ -30,10 +29,21 @@
|
||||
<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>
|
||||
<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>
|
||||
<span ng-switch-when="0">Disabled</span>
|
||||
</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,22 +6,26 @@
|
||||
.module('harbor.replication')
|
||||
.directive('listReplication', listReplication);
|
||||
|
||||
ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ListReplicationJobService'];
|
||||
ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ToggleReplicationPolicyService', 'ListReplicationJobService'];
|
||||
|
||||
function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ListReplicationJobService) {
|
||||
function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ToggleReplicationPolicyService, ListReplicationJobService) {
|
||||
var vm = this;
|
||||
|
||||
vm.projectId = getParameterByName('project_id', $location.absUrl());
|
||||
|
||||
vm.addReplication = addReplication;
|
||||
vm.editReplication = editReplication;
|
||||
|
||||
vm.retrievePolicy = retrievePolicy;
|
||||
vm.retrieveJob = retrieveJob;
|
||||
vm.last = false;
|
||||
vm.togglePolicy = togglePolicy;
|
||||
|
||||
vm.last = false;
|
||||
vm.retrievePolicy();
|
||||
|
||||
|
||||
function retrievePolicy() {
|
||||
ListReplicationPolicyService(vm.projectId, vm.replicationName)
|
||||
ListReplicationPolicyService('', vm.projectId, vm.replicationName)
|
||||
.success(listReplicationPolicySuccess)
|
||||
.error(listReplicationPolicyFailed);
|
||||
}
|
||||
@ -50,8 +54,30 @@
|
||||
|
||||
function addReplication() {
|
||||
vm.modalTitle = 'Create New Policy';
|
||||
vm.action = 'ADD_NEW';
|
||||
}
|
||||
|
||||
function editReplication(policyId) {
|
||||
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)
|
||||
.error(toggleReplicationPolicyFailed);
|
||||
}
|
||||
|
||||
function toggleReplicationPolicySuccess(data, status) {
|
||||
console.log('Successful toggle replication policy.');
|
||||
vm.retrievePolicy();
|
||||
}
|
||||
|
||||
function toggleReplicationPolicyFailed(data, status) {
|
||||
console.log('Failed toggle replication policy.');
|
||||
}
|
||||
}
|
||||
|
||||
function listReplication($timeout) {
|
||||
@ -93,25 +119,37 @@
|
||||
$(document).off('mousedown');
|
||||
$(document).off('mousemove');
|
||||
}
|
||||
|
||||
ctrl.lastPolicyId = -1;
|
||||
|
||||
scope.$watch('vm.replicationPolicies', function(current) {
|
||||
$timeout(function(){
|
||||
if(current && current.length > 0) {
|
||||
element.find('#upon-pane table>tbody>tr').on('click', trClickHandler);
|
||||
element.find('#upon-pane table>tbody>tr:eq(0)').trigger('click');
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function trClickHandler(e) {
|
||||
element
|
||||
.find('#upon-pane table>tbody>tr')
|
||||
.css({'background-color': '#FFFFFF'})
|
||||
.css({'color': '#000'});
|
||||
element
|
||||
.find('#upon-pane table>tbody>tr a')
|
||||
.css({'color': '#337ab7'});
|
||||
$(this)
|
||||
.css({'background-color': '#057ac9'})
|
||||
.css({'color': '#fff'});
|
||||
$('a', this)
|
||||
.css({'color': '#fff'});
|
||||
ctrl.retrieveJob($(this).attr('policy_id'));
|
||||
ctrl.lastPolicyId = $(this).attr('policy_id');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
vm.retrieve();
|
||||
|
||||
function retrieve() {
|
||||
ListDestinationService()
|
||||
ListDestinationService('')
|
||||
.success(listDestinationSuccess)
|
||||
.error(listDestinationFailed);
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
element.find('a:first').addClass('active');
|
||||
}
|
||||
|
||||
ctrl.target = visited;
|
||||
element.find('a').on('click', click);
|
||||
|
||||
function click(event) {
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
|
||||
function ListDestinationService($http) {
|
||||
return listDestination;
|
||||
function listDestination(name) {
|
||||
function listDestination(targetId, name) {
|
||||
return $http
|
||||
.get('/api/targets', {
|
||||
.get('/api/targets/' + targetId, {
|
||||
'params': {
|
||||
'name': name
|
||||
}
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.destination')
|
||||
.factory('PingDestinationService', PingDestinationService);
|
||||
|
||||
PingDestinationService.$inject = ['$http'];
|
||||
|
||||
function PingDestinationService($http) {
|
||||
return pingDestination;
|
||||
function pingDestination(targetId) {
|
||||
return $http({
|
||||
'method': 'POST',
|
||||
'url': '/api/targets/ping',
|
||||
'headers': {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
'transformRequest': function(obj) {
|
||||
var str = [];
|
||||
for(var p in obj) {
|
||||
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
|
||||
}
|
||||
return str.join("&");
|
||||
},
|
||||
'data': {'id': targetId}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
@ -12,9 +12,9 @@
|
||||
|
||||
return listReplicationPolicy;
|
||||
|
||||
function listReplicationPolicy(projectId, name) {
|
||||
function listReplicationPolicy(policyId, projectId, name) {
|
||||
return $http
|
||||
.get('/api/policies/replication', {
|
||||
.get('/api/policies/replication/' + policyId, {
|
||||
'params': {
|
||||
'project_id': projectId,
|
||||
'name': name
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.replication.policy')
|
||||
.factory('ToggleReplicationPolicyService', ToggleReplicationPolicyService);
|
||||
|
||||
ToggleReplicationPolicyService.$inject = ['$http'];
|
||||
|
||||
function ToggleReplicationPolicyService($http) {
|
||||
return toggleReplicationPolicy;
|
||||
function toggleReplicationPolicy(policyId, enabled) {
|
||||
return $http
|
||||
.put('/api/policies/replication/' + policyId + '/enablement', {
|
||||
'enabled': enabled
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
@ -138,6 +138,8 @@
|
||||
<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-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-job/services.replication-job.module.js"></script>
|
||||
<script src="/static/ng/resources/js/services/replication-job/services.list-replication-job.js"></script>
|
||||
@ -145,6 +147,8 @@
|
||||
<script src="/static/ng/resources/js/services/destination/services.destination.module.js"></script>
|
||||
<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/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