Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-28 03:27:41 +01:00
Code Issues Projects Releases Wiki Activity

update for creating/editing policies and destinations.

Browse Source
This commit is contained in:
kunw 2016-06-24 18:44:54 +08:00
parent 169ebf0ee4
commit b94ba4cd06
10 changed files with 217 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/resources/js/components/modal-dialog/modal-dialog.directive.js
View File

@ -10,7 +10,7 @@
function ModalDialogController($scope) {
var vm = this;
vm.confirmOnly = false;
}
function modalDialog() {
@ -36,6 +36,10 @@
if(!angular.isDefined(ctrl.contentType)) {
ctrl.contentType = 'text/plain';
}
if(!angular.isDefined(ctrl.confirmOnly)) {
ctrl.confirmOnly = false;
}
console.log('Received contentType in modal:' + ctrl.contentType);
scope.$watch('vm.modalMessage', function(current) {
@ -52,7 +56,6 @@
});
scope.$on('showDialog', function(e, val) {
console.log('modal-dialog show:' + ctrl.show);
if(val) {
element.find('#myModal').modal('show');
}else{
@ -66,7 +69,6 @@
function clickHandler(e) {
ctrl.action();
element.find('#myModal').modal('hide');
ctrl.show = false;
}
}
}

14
static/resources/js/components/replication/create-policy.directive.html
View File

@ -1,3 +1,4 @@
<modal-dialog modal-title="//vm.modalTitle//" modal-message="//vm.modalMessage//" confirm-only="true"></modal-dialog>
<div class="modal fade" id="createPolicyModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<form name="form" class="form-horizontal css-form" novalidate>
@ -38,13 +39,20 @@
</div>
</div>
<div class="col-md-12">
<h4 class="h4-custom">// 'destination_setting' | tr //</h4>
<div class="row">
<div class="col-md-8" style="padding-left: 0;">
<h4 class="h4-custom">// 'destination_setting' | tr //</h4>
</div>
<div class="col-md-4 h4-custom pull-right"><input type="checkbox" ng-model="vm.checkedAddTarget" ng-checked="vm.checkedAddTarget"> // 'add_new_destination' | tr //</div>
</div>
<hr class="hr-line"/>
</div>
<div class="form-group col-md-12 form-group-custom">
<label for="destinationName" class="col-md-3 control-label">// 'name' | tr //:</label>
<div class="col-md-7">
<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)" ng-disabled="!vm.targetEditable"></select>
<div class="col-md-7">
<input type="text" ng-if="vm.checkedAddTarget" class="form-control form-control-custom" ng-model="replication.destination.name">
<select ng-if="!vm.checkedAddTarget" class="form-control form-control-custom" 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)" ng-disabled="!vm.targetEditable"></select>
</div>
</div>
<div class="form-group col-md-12 form-group-custom">

222
static/resources/js/components/replication/create-policy.directive.js
View File

@ -6,9 +6,9 @@
.module('harbor.replication')
.directive('createPolicy', createPolicy);
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'UpdateDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', 'ListDestinationPolicyService','$location', 'getParameterByName', '$filter', 'trFilter'];
CreatePolicyController.$inject = ['$scope', 'ListReplicationPolicyService', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService', 'PingDestinationService', 'CreateReplicationPolicyService', 'UpdateReplicationPolicyService', 'ListDestinationPolicyService','$location', 'getParameterByName', '$filter', 'trFilter', '$q', '$timeout'];
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, UpdateDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, ListDestinationPolicyService, $location, getParameterByName, $filter, trFilter) {
function CreatePolicyController($scope, ListReplicationPolicyService, ListDestinationService, CreateDestinationService, UpdateDestinationService, PingDestinationService, CreateReplicationPolicyService, UpdateReplicationPolicyService, ListDestinationPolicyService, $location, getParameterByName, $filter, trFilter, $q, $timeout) {
var vm = this;
//Since can not set value for textarea by using vm
@ -33,23 +33,44 @@
vm.create = create;
vm.update = update;
vm.pingDestination = pingDestination;
vm.checkDestinationPolicyStatus = checkDestinationPolicyStatus;
vm.targetEditable = true;
vm.checkedAddTarget = false;
$scope.$watch('vm.destinations', function(current) {
if(current) {
vm1.selection = current[0];
if(!angular.isArray(current) || current.length === 0) {
return;
}
if(!angular.isDefined(vm1.selection)) {
vm1.selection = current[0];
}
vm.targetId = vm1.selection.id;
vm1.endpoint = vm1.selection.endpoint;
vm1.username = vm1.selection.username;
vm1.password = vm1.selection.password;
}
});
$scope.$watch('vm.checkedAddTarget', function(current) {
if(current) {
vm.targetEditable = true;
vm1.name = '';
vm1.endpoint = '';
vm1.username = '';
vm1.password = '';
}
});
function selectDestination(item) {
vm1.selection = item;
vm1.endpoint = item.endpoint;
vm1.username = item.username;
vm1.password = item.password;
if(angular.isDefined(item)) {
vm.targetId = item.id;
vm1.endpoint = item.endpoint;
vm1.username = item.username;
vm1.password = item.password;
}
}
function prepareDestination() {
@ -59,7 +80,6 @@
}
function addNew() {
vm.targetEditable = true;
$filter('tr')('add_new_policy', []);
vm0.name = '';
vm0.description = '';
@ -67,52 +87,87 @@
}
function edit(policyId) {
console.log('Edit policy ID:' + policyId);
vm.policyId = policyId;
vm.targetEditable = true;
$filter('tr')('edit_policy', []);
ListReplicationPolicyService(policyId)
.success(listReplicationPolicySuccess)
.error(listReplicationPolicyFailed);
.error(listReplicationPolicyFailed);
}
function create(policy) {
CreateReplicationPolicyService(policy)
.success(createReplicationPolicySuccess)
.error(createReplicationPolicyFailed);
vm.policy = policy;
saveOrUpdateDestination();
}
function saveOrUpdateDestination() {
var target = {
'endpoint': vm1.endpoint,
'username': vm1.username,
'password': vm1.password
};
if(vm.checkedAddTarget) {
target.name = vm1.name;
CreateDestinationService(target.name, target.endpoint, target.username, target.password)
.success(createDestinationSuccess)
.error(createDestinationFailed);
}else{
target.name = vm1.selection.name;
console.log('Update target ID:' + vm.targetId);
UpdateDestinationService(vm.targetId, target)
.success(updateDestinationSuccess)
.error(updateDestinationFailed);
}
}
function saveOrUpdatePolicy() {
switch(vm.action) {
case 'ADD_NEW':
CreateReplicationPolicyService(vm.policy)
.success(createReplicationPolicySuccess)
.error(createReplicationPolicyFailed);
break;
case 'EDIT':
UpdateReplicationPolicyService(vm.policyId, vm.policy)
.success(updateReplicationPolicySuccess)
.error(updateReplicationPolicyFailed);
break;
}
}
function update(policy) {
console.log('Update policy ID:' + vm.policyId);
UpdateReplicationPolicyService(vm.policyId, policy)
.success(updateReplicationPolicySuccess)
.error(updateReplicationPolicyFailed);
vm.policy = policy;
saveOrUpdateDestination();
}endpoint
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 target = {
'name': vm1.selection.name,
'endpoint': vm1.endpoint,
'username': vm1.username,
'password': vm1.password
};
if(vm.checkedAddTarget) {
target.name = vm1.name;
}else{
target.name = vm1.selection.name;
}
PingDestinationService(target)
.success(pingDestinationSuccess)
.error(pingDestinationFailed);
}
function checkDestinationPolicyStatus() {
ListDestinationPolicyService(vm.targetId)
.success(listDestinationPolicySuccess)
.error(listDestinationPolicyFailed);
}
function listDestinationSuccess(data, status) {
vm.destinations = data || [];
}
@ -121,7 +176,6 @@
}
function listDestinationPolicySuccess(data, status) {
vm.targetEditable = true;
for(var i in data) {
if(data[i].enabled === 1) {
vm.targetEditable = false;
@ -136,20 +190,16 @@
}
function listReplicationPolicySuccess(data, status) {
console.log(data);
var replicationPolicy = data;
vm.targetId = replicationPolicy.target_id;
vm0.name = replicationPolicy.name;
vm0.description = replicationPolicy.description;
vm0.enabled = replicationPolicy.enabled == 1;
vm.targetId = replicationPolicy.target_id;
if(vm0.enabled) {
vm.targetEditable = false;
}else{
ListDestinationPolicyService(vm.targetId)
.success(listDestinationPolicySuccess)
.error(listDestinationPolicyFailed);
}
vm0.enabled = (replicationPolicy.enabled == 1);
vm.checkDestinationPolicyStatus();
}
function listReplicationPolicyFailed(data, status) {
console.log('Failed list replication policy:' + data);
@ -160,7 +210,8 @@
}
function createReplicationPolicyFailed(data, status) {
if(status === 409) {
alert($filter('tr')('policy_already_exists', []));
vm.modalMessage = $filter('tr')('policy_already_exists', []);
$scope.$broadcast('showDialog', true);
}
console.log('Failed create replication policy.');
}
@ -169,19 +220,36 @@
vm.reload();
}
function updateReplicationPolicyFailed(data, status) {
vm.modalMessage = $filter('tr')('failed_update_policy', []) + data;
$scope.$broadcast('showDialog', true);
console.log('Failed update replication policy.');
}
function createDestinationSuccess(data, status, headers) {
var content = headers('Location');
vm.policy.targetId = Number(content.substr(content.lastIndexOf('/') + 1));
console.log('Successful create destination, targetId:' + vm.policy.targetId);
saveOrUpdatePolicy();
}
function createDestinationFailed(data, status) {
vm.modalMessage = $filter('tr')('failed_create_destination', []) + data;
$scope.$broadcast('showDialog', true);
console.log('Failed create destination.');
}
function updateDestinationSuccess(data, status) {
console.log('Successful update destination.');
vm.policy.targetId = vm1.selection.id;
saveOrUpdatePolicy();
}
function updateDestinationFailed(data, status) {
vm.modalMessage = $filter('tr')('failed_update_destination', []) + data;
$scope.$broadcast('showDialog', true);
console.log('Failed update destination.');
}
function pingDestinationSuccess(data, status) {
alert($filter('tr')('successful_ping_target', []));
}
function pingDestinationFailed(data, status) {
alert($filter('tr')('failed_ping_target', []) + ':' + data);
alert($filter('tr')('failed_ping_target', []) + data);
}
}
@ -205,28 +273,54 @@
function link(scope, element, attr, ctrl) {
element.find('#createPolicyModal').on('show.bs.modal', function() {
scope.form.$setPristine();
scope.form.$setUntouched();
ctrl.prepareDestination();
switch(ctrl.action) {
case 'ADD_NEW':
ctrl.addNew();
break;
case 'EDIT':
ctrl.edit(ctrl.policyId);
break;
}
scope.$apply();
});
scope.$apply(function() {
scope.form.$setPristine();
scope.form.$setUntouched();
scope.$watch('vm.checkedAddTarget', function(current, origin) {
if(origin) {
var d = scope.replication.destination;
if(angular.isDefined(d) && angular.isDefined(d.selection)) {
d.endpoint = d.selection.endpoint;
d.username = d.selection.username;
d.password = d.selection.password;
ctrl.checkDestinationPolicyStatus();
}
}
});
ctrl.checkedAddTarget = false;
ctrl.targetEditable = true;
ctrl.prepareDestination();
switch(ctrl.action) {
case 'ADD_NEW':
ctrl.addNew();
break;
case 'EDIT':
ctrl.edit(ctrl.policyId);
break;
}
});
});
scope.$watch('vm.targetId', function(current) {
if(current) {
var d = scope.replication.destination;
if(angular.isDefined(d) && angular.isDefined(d.selection)) {
scope.replication.destination.selection.id = current;
d.endpoint = d.selection.endpoint;
d.username = d.selection.username;
d.password = d.selection.password;
}
}
});
ctrl.save = save;
function save(form) {
var postPayload = {
'projectId': Number(ctrl.projectId),
'targetId': form.destination.selection.id,
'name': form.policy.name,
'enabled': form.policy.enabled ? 1 : 0,
'description': form.policy.description,

30
static/resources/js/components/system-management/create-destination.directive.html
View File

@ -1,13 +1,13 @@
<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">&times;</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;//vm.modalTitle//</h4>
</div>
<div class="modal-body">
<div class="create-destination">
<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">&times;</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;//vm.modalTitle//</h4>
</div>
<div class="modal-body">
<div class="create-destination">
<div class="form-group col-md-12 form-group-custom">
<label for="name" class="col-md-3 control-label">// 'name' | tr //:</label>
<div class="col-md-9">
@ -50,13 +50,13 @@
<button type="submit" class="btn btn-default" ng-click="form.$valid && vm.pingDestination()">// 'test_connection' | tr //</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<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 class="modal-footer">
<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 -->

4
static/resources/js/components/system-management/destination.directive.html
View File

@ -1,3 +1,4 @@
<modal-dialog modal-title="// vm.modalDialogTitle //" modal-message="// vm.modalDialogMessage //" action="vm.deleteDestination()"></modal-dialog>
<div class="tab-pane">
<div class="col-xs-12 col-md-12 each-tab-pane">
<div class="form-inline">
@ -11,7 +12,6 @@
<create-destination action="//vm.action//" target-id="//vm.targetId//" reload="vm.retrieve()"></create-destination>
</div>
<div class="pane">
<modal-dialog modal-title="// 'confirm_to_delete_destination_title' | tr //" modal-message="// 'confirm_to_delete_destination' | tr //" action="vm.deleteDestination()"></modal-dialog>
<div class="sub-pane">
<table class="table table-pane">
<thead>
@ -31,7 +31,7 @@
<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>
&nbsp;
<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" ng-click="vm.confirmToDelete(r.id)"><span class="glyphicon glyphicon-trash"></span></a>
<a href="javascript:void(0);" ng-click="vm.confirmToDelete(r.id)"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>

5
static/resources/js/components/system-management/destination.directive.js
View File

@ -43,6 +43,9 @@
function confirmToDelete(targetId) {
vm.selectedTargetId = targetId;
vm.modalDialogTitle = $filter('tr')('confirm_to_delete_destination_title');
vm.modalDialogMessage = $filter('tr')('confirm_to_delete_destination');
$scope.$broadcast('showDialog', true);
}
function deleteDestination() {
@ -66,7 +69,7 @@
function deleteDestinationFailed(data, status) {
console.log('Failed delete destination.');
alert($filter('tr')('failed_delete_destination', []) + ':' + data);
alert($filter('tr')('failed_delete_destination', []) + data);
}
}

4
static/resources/js/harbor.config.js
View File

@ -35,7 +35,9 @@
return filter;
function filter(input, pattern) {
return moment(new Date(input || '')).format(pattern);
var d = new Date(input || '');
if(d.getTime() <= 0) return 'N/A';
return moment(d).format(pattern);
}
}

18
static/resources/js/layout/index/index.controller.js
View File

@ -19,15 +19,15 @@
var indexDesc5 = $filter('tr')('index_desc_5', []);
vm.message = '<p class="page-content text-justify">' +
indexDesc +
'</p>' +
'<ul>' +
'<li class="long-line">▪︎ ' + indexDesc1 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc2 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc3 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc4 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc5 + '</li>' +
'</ul>';
indexDesc +
'</p>' +
'<ul>' +
'<li class="long-line">▪︎ ' + indexDesc1 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc2 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc3 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc4 + '</li>' +
'<li class="long-line">▪︎ ' + indexDesc5 + '</li>' +
'</ul>';
}

9
static/resources/js/services/i18n/locale_messages_en-US.js
View File

@ -179,9 +179,12 @@ var locale_messages = {
'successful_added': 'Added new user successfully.',
'copyright': 'Copyright',
'all_rights_reserved': 'All Rights Reserved.',
'successful_ping_target': 'Pinged target successfully.',
'failed_ping_target': 'Pinged target failed：',
'successful_ping_target': 'Successful Ping target.',
'failed_ping_target': 'Failed Ping target:',
'policy_already_exists': 'Policy alreay exists.',
'failed_update_policy': 'Failed update policy:',
'destination_already_exists': 'Destination already exists.',
'failed_delete_destination': 'Delete destination failed:'
'failed_delete_destination': 'Delete destination failed:',
'failed_create_destination': 'Create destination failed:',
'failed_update_destination': 'Failed update destination:'
};

5
static/resources/js/services/i18n/locale_messages_zh-CN.js
View File

@ -181,6 +181,9 @@ var locale_messages = {
'successful_ping_target': 'Ping 目标成功。',
'failed_ping_target': 'Ping 目标失败：',
'policy_already_exists': '策略已存在。',
'failed_update_policy': '修改策略失败：',
'destination_already_exists': '目标已存在。',
'failed_delete_destination': '删除目标失败：'
'failed_delete_destination': '删除目标失败：',
'failed_create_destination': '创建目标失败：',
'failed_update_destination': '修改目标失败：'
};