updates for creation of replication-policy and list-policy operations of UI.

This commit is contained in:
kunw 2016-06-13 18:12:46 +08:00
parent da80adc025
commit cec58dc622
12 changed files with 224 additions and 43 deletions

View File

@ -65,3 +65,15 @@
cursor: ns-resize; cursor: ns-resize;
color: #C0C0C0; color: #C0C0C0;
} }
.color-success {
color: #5cb85c;
}
.color-danger {
color: #d9534f
}
.color-warning {
color: #f0ad4e;
}

View File

@ -1,10 +1,10 @@
<div class="modal fade" id="createPolicyModal" tabindex="-1" role="dialog"> <div class="modal fade" id="createPolicyModal" tabindex="-1" role="dialog">
<div class="modal-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-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;Create New Policy</h4> <h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;//vm.modalTitle//</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="create-policy"> <div class="create-policy">
@ -43,13 +43,13 @@
<div class="form-group col-md-12 form-group-custom"> <div class="form-group col-md-12 form-group-custom">
<label for="destinationName" class="col-md-3 control-label">Name:</label> <label for="destinationName" class="col-md-3 control-label">Name:</label>
<div class="col-md-7"> <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> </div>
<div class="form-group col-md-12 form-group-custom"> <div class="form-group col-md-12 form-group-custom">
<label for="endpoint" class="col-md-3 control-label">Endpoint:</label> <label for="endpoint" class="col-md-3 control-label">Endpoint:</label>
<div class="col-md-9"> <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"> <div ng-messages="form.$submitted && form.uEndpoint.$error">
<span ng-message="required">Endpoint is required.</span> <span ng-message="required">Endpoint is required.</span>
</div> </div>
@ -58,7 +58,7 @@
<div class="form-group col-md-12 form-group-custom"> <div class="form-group col-md-12 form-group-custom">
<label for="username" class="col-md-3 control-label">Username:</label> <label for="username" class="col-md-3 control-label">Username:</label>
<div class="col-md-9"> <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"> <div ng-messages="form.$submitted && form.uUsername.$error">
<span ng-message="required">Username is required.</span> <span ng-message="required">Username is required.</span>
</div> </div>
@ -67,7 +67,7 @@
<div class="form-group col-md-12 form-group-custom"> <div class="form-group col-md-12 form-group-custom">
<label for="password" class="col-md-3 control-label">Password:</label> <label for="password" class="col-md-3 control-label">Password:</label>
<div class="col-md-9"> <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"> <div ng-messages="form.$submitted && form.uPassword.$error">
<span ng-message="required">Password is required.</span> <span ng-message="required">Password is required.</span>
</div> </div>
@ -76,7 +76,7 @@
<div class="form-group col-md-12 form-group-custom"> <div class="form-group col-md-12 form-group-custom">
<div class="col-md-3"></div> <div class="col-md-3"></div>
<div class="col-md-9"> <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> </div>
</div> </div>

View File

@ -6,39 +6,77 @@
.module('harbor.replication') .module('harbor.replication')
.directive('createPolicy', createPolicy); .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; var vm = this;
//Since can not set value for textarea by using vm //Since can not set value for textarea by using vm
//use $scope for instead. //use $scope for instead.
$scope.replication = {}; $scope.replication = {};
$scope.replication.policy = {}; $scope.replication.policy = {};
$scope.replication.destination = {};
var vm0 = $scope.replication; var vm0 = $scope.replication.policy;
var vm1 = $scope.replication.policy; var vm1 = $scope.replication.destination;
vm.selectDestination = selectDestination;
vm.projectId = getParameterByName('project_id', $location.absUrl()); vm.projectId = getParameterByName('project_id', $location.absUrl());
vm.prepare = prepare;
vm.prepare(); vm.addNew = addNew;
vm.edit = edit;
vm.createPolicy = createPolicy; vm.createPolicy = createPolicy;
vm.pingDestination = pingDestination;
$scope.$watch('vm.destinations', function(current) { $scope.$watch('vm.destinations', function(current) {
if(current) { if(current) {
console.log('destination:' + angular.toJson(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() { prepareDestination();
vm1.name = 'name';
vm1.description = 'test'; $scope.$watch('vm.action', function(current) {
vm1.enabled = true; if(current) {
console.log('Current action for replication policy:' + current);
ListDestinationService() 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) .success(listDestinationSuccess)
.error(listDestinationFailed); .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) { function createPolicy(policy) {
CreateReplicationPolicyService(policy) CreateReplicationPolicyService(policy)
@ -46,12 +84,30 @@
.error(createReplicationPolicyFailed); .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) { function listDestinationSuccess(data, status) {
vm.destinations = data; vm.destinations = data;
} }
function listDestinationFailed(data, status) { function listDestinationFailed(data, status) {
console.log('Failed list destination:' + data); 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) { function createReplicationPolicySuccess(data, status) {
console.log('Successful create replication policy.'); console.log('Successful create replication policy.');
vm.clearUp(); vm.clearUp();
@ -59,6 +115,12 @@
function createReplicationPolicyFailed(data, status) { function createReplicationPolicyFailed(data, status) {
console.log('Failed create replication policy.'); 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() { function createPolicy() {
@ -66,7 +128,10 @@
'restrict': 'E', 'restrict': 'E',
'templateUrl': '/static/ng/resources/js/components/replication/create-policy.directive.html', 'templateUrl': '/static/ng/resources/js/components/replication/create-policy.directive.html',
'scope': { 'scope': {
'reload': '&' 'policyId': '@',
'modalTitle': '@',
'reload': '&',
'action': '='
}, },
'link': link, 'link': link,
'controller': CreatePolicyController, 'controller': CreatePolicyController,
@ -82,7 +147,7 @@
console.log(angular.toJson(form)); console.log(angular.toJson(form));
var postPayload = { var postPayload = {
'projectId': Number(ctrl.projectId), 'projectId': Number(ctrl.projectId),
'targetId': form.destination.id, 'targetId': form.destination.selection.id,
'name': form.policy.name, 'name': form.policy.name,
'enabled': form.policy.enabled ? 1 : 0, 'enabled': form.policy.enabled ? 1 : 0,
'description': form.policy.description, 'description': form.policy.description,

View File

@ -2,13 +2,13 @@
<div class="col-xs-12 col-md-12 each-tab-pane"> <div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline"> <div class="form-inline">
<div class="input-group"> <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"> <span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button> <button class="btn btn-primary" type="button" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>
</span> </span>
</div> </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> <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>
<div class="pane-split" id="upon-pane"> <div class="pane-split" id="upon-pane">
<div class="sub-pane-split"> <div class="sub-pane-split">
@ -16,11 +16,10 @@
<thead> <thead>
<th width="10%">Name</th> <th width="10%">Name</th>
<th width="18%">Description</th> <th width="18%">Description</th>
<th width="14%">Destination</th> <th width="18%">Destination</th>
<th width="18%">Start Time</th> <th width="18%">Start Time</th>
<th width="14%">Status</th>
<th width="14%">Activation</th> <th width="14%">Activation</th>
<th width="12%">Actions</th> <th width="15%">Actions</th>
</thead> </thead>
<tbody> <tbody>
<tr ng-if="vm.replicationPolicies.length == 0"> <tr ng-if="vm.replicationPolicies.length == 0">
@ -30,10 +29,21 @@
<td>//r.name//</td> <td>//r.name//</td>
<td>//r.description//</td> <td>//r.description//</td>
<td>//r.destination//</td> <td>//r.destination//</td>
<td>//r.start_time//</td> <td>//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
<td>//r.status//</td> <td ng-switch on="//r.enabled//">
<td>//r.activation//</td> <span ng-switch-when="1">Enabled</span>
<td></td> <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>
&nbsp;
<a href="javascript:void(0);" data-toggle="modal" data-target="#createPolicyModal" ng-click="vm.editReplication(r.id)"><span class="glyphicon glyphicon-pencil"></span></a>
&nbsp;
<a href="javascript:void(0);"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -6,22 +6,26 @@
.module('harbor.replication') .module('harbor.replication')
.directive('listReplication', listReplication); .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; var vm = this;
vm.projectId = getParameterByName('project_id', $location.absUrl()); vm.projectId = getParameterByName('project_id', $location.absUrl());
vm.addReplication = addReplication; vm.addReplication = addReplication;
vm.editReplication = editReplication;
vm.retrievePolicy = retrievePolicy; vm.retrievePolicy = retrievePolicy;
vm.retrieveJob = retrieveJob; vm.retrieveJob = retrieveJob;
vm.last = false; vm.togglePolicy = togglePolicy;
vm.last = false;
vm.retrievePolicy(); vm.retrievePolicy();
function retrievePolicy() { function retrievePolicy() {
ListReplicationPolicyService(vm.projectId, vm.replicationName) ListReplicationPolicyService('', vm.projectId, vm.replicationName)
.success(listReplicationPolicySuccess) .success(listReplicationPolicySuccess)
.error(listReplicationPolicyFailed); .error(listReplicationPolicyFailed);
} }
@ -50,8 +54,30 @@
function addReplication() { function addReplication() {
vm.modalTitle = 'Create New Policy'; 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) { function listReplication($timeout) {
@ -93,25 +119,37 @@
$(document).off('mousedown'); $(document).off('mousedown');
$(document).off('mousemove'); $(document).off('mousemove');
} }
ctrl.lastPolicyId = -1;
scope.$watch('vm.replicationPolicies', function(current) { scope.$watch('vm.replicationPolicies', function(current) {
$timeout(function(){ $timeout(function(){
if(current && current.length > 0) { if(current && current.length > 0) {
element.find('#upon-pane table>tbody>tr').on('click', trClickHandler); 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) { function trClickHandler(e) {
element element
.find('#upon-pane table>tbody>tr') .find('#upon-pane table>tbody>tr')
.css({'background-color': '#FFFFFF'}) .css({'background-color': '#FFFFFF'})
.css({'color': '#000'}); .css({'color': '#000'});
element
.find('#upon-pane table>tbody>tr a')
.css({'color': '#337ab7'});
$(this) $(this)
.css({'background-color': '#057ac9'}) .css({'background-color': '#057ac9'})
.css({'color': '#fff'}); .css({'color': '#fff'});
$('a', this)
.css({'color': '#fff'});
ctrl.retrieveJob($(this).attr('policy_id')); ctrl.retrieveJob($(this).attr('policy_id'));
ctrl.lastPolicyId = $(this).attr('policy_id');
} }
} }
} }

View File

@ -16,7 +16,7 @@
vm.retrieve(); vm.retrieve();
function retrieve() { function retrieve() {
ListDestinationService() ListDestinationService('')
.success(listDestinationSuccess) .success(listDestinationSuccess)
.error(listDestinationFailed); .error(listDestinationFailed);
} }

View File

@ -49,6 +49,7 @@
element.find('a:first').addClass('active'); element.find('a:first').addClass('active');
} }
ctrl.target = visited;
element.find('a').on('click', click); element.find('a').on('click', click);
function click(event) { function click(event) {

View File

@ -10,9 +10,9 @@
function ListDestinationService($http) { function ListDestinationService($http) {
return listDestination; return listDestination;
function listDestination(name) { function listDestination(targetId, name) {
return $http return $http
.get('/api/targets', { .get('/api/targets/' + targetId, {
'params': { 'params': {
'name': name 'name': name
} }

View File

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

View File

@ -12,9 +12,9 @@
return listReplicationPolicy; return listReplicationPolicy;
function listReplicationPolicy(projectId, name) { function listReplicationPolicy(policyId, projectId, name) {
return $http return $http
.get('/api/policies/replication', { .get('/api/policies/replication/' + policyId, {
'params': { 'params': {
'project_id': projectId, 'project_id': projectId,
'name': name 'name': name

View File

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

View File

@ -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.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.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.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.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/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.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.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.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.module.js"></script>
<script src="/static/ng/resources/js/session/session.current-user.js"></script> <script src="/static/ng/resources/js/session/session.current-user.js"></script>