update for error message handler with create-policy and create-destination.

static/resources/css/replication.css

@@ -1,5 +1,5 @@
 .create-policy {
-  height: 535px; 
+  height: 565px; 
   overflow-y: auto;
 }
 
@@ -77,4 +77,8 @@
 
 .label-custom {
   margin: 0 5px 0 10px;
+}
+
+.dialog-message {
+  padding: 15px;
 }

static/resources/js/components/project-member/edit-project-member.directive.html

@@ -5,7 +5,7 @@
     <span ng-if="!vm.editMode" class="glyphicon glyphicon-pencil" title="// 'edit' | tr //"></span><span ng-if="vm.editMode" class="glyphicon glyphicon-ok" title="Confirm">
   </a>
   <a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.cancelUpdate()" title="// 'cancel' | tr //">
-    <span ng-if="vm.editMode" class="glyphicon glyphicon-repeat"></span>
+    <span ng-if="vm.editMode" class="glyphicon glyphicon-remove"></span>
   </a>
   <a ng-show="vm.userId != vm.currentUserId && !vm.editMode" href="javascript:void(0);" ng-click="vm.deleteProjectMember()" title="// 'delete' | tr //"><span class="glyphicon glyphicon-trash"></span></a>
 </td>

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

@@ -1,14 +1,21 @@
-<modal-dialog modal-title="//vm.modalTitle//" modal-message="//vm.modalMessage//" confirm-only="true"></modal-dialog>
 <div class="modal fade" data-backdrop="static" id="createPolicyModal" 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-policy">
+      <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-policy">
+            <div class="col-md-12"  ng-show="vm.toggleErrorMessage">
+              <div class="pull-right clearfix" style="padding: 5px 10px;"><a href="javascript:void(0);" ng-click="vm.closeError()"><span class="glyphicon glyphicon-remove"></span></a></div>
+              <div class="bg-danger dialog-message">
+                <ul class="list-unstyled" style="color: red; margin: 0;" ng-repeat="msg in vm.errorMessages">
+                  <li>// msg //</li>
+                </ul>
+              </div>
+            </div>
             <div class="col-md-12">
               <h4>// 'general_setting' | tr //</h4>
               <hr class="hr-line"/>
@@ -78,7 +85,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-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="vm.pingDestination()" loading-progress hide-target="vm.hideTarget" toggle-in-progress="vm.toggleInProgress0">// 'test_connection' | tr //</button>
+                <button type="button" class="btn btn-default" ng-disabled="vm.notAvailable || !vm.pingAvailable" ng-click="vm.pingDestination()" loading-progress hide-target="false" toggle-in-progress="vm.toggleInProgress0">// 'test_connection' | tr //</button>
               </div>
             </div>
             <div class="form-group col-md-12 form-group-custom">
@@ -87,13 +94,13 @@
                 <span>// vm.pingMessage //</span>
               </div>
             </div>
+          </div>
         </div>
-      </div>
-      <div class="modal-footer">
-        <button ng-show="vm.targetEditable" type="submit" class="btn btn-primary" ng-click="form.$valid && vm.save(replication)" loading-progress hide-target="vm.hideTarget" toggle-in-progress="vm.toggleInProgress1">// 'ok' | tr //</button>
-        <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
-      </div>
-    </form>
+        <div class="modal-footer">
+          <button ng-show="vm.targetEditable" type="submit" class="btn btn-primary" ng-click="form.$valid && vm.save(replication)" loading-progress hide-target="false" toggle-in-progress="vm.toggleInProgress1">// 'ok' | tr //</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
+        </div>
+      </form>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->

static/resources/js/components/replication/create-policy.directive.js

@@ -37,13 +37,18 @@
   
     vm.targetEditable = true;
     vm.checkedAddTarget = false;
+    
     vm.notAvailable = false;
     vm.pingAvailable = true;
     vm.pingMessage = '';
     
     vm.toggleInProgress0 = false;
     vm.toggleInProgress1 = false;
-           
+    
+    vm.closeError = closeError;
+    vm.toggleErrorMessage = false;
+    vm.errorMessages = [];
+              
     $scope.$watch('vm.destinations', function(current) {
       if(current) {
         if(!angular.isArray(current) || current.length === 0) {
@@ -72,7 +77,7 @@
         
     $scope.$watch('vm.targetId', function(current) {
       if(current) {          
-        vm1.selection.id = current || vm.destinations[0].id;
+        vm1.selection.id = current;
       }
     });    
         
@@ -83,7 +88,7 @@
         vm.notAvailable = true; 
       }
     });
-                                         
+                                             
     function selectDestination(item) {
       vm1.selection = item;
       if(angular.isDefined(item)) {
@@ -102,17 +107,16 @@
 
     function addNew() {       
       vm.modalTitle = $filter('tr')('add_new_policy', []);
-      vm.targetEditable = true;
+     
       vm0.name = '';
       vm0.description = '';
       vm0.enabled = true;
     }
     
     function edit(policyId) {
-    
       console.log('Edit policy ID:' + policyId);
       vm.policyId = policyId;
-      vm.targetEditable = true;
+      
       vm.modalTitle = $filter('tr')('edit_policy', []);
 
       ListReplicationPolicyService(policyId)
@@ -122,10 +126,10 @@
     
     function create(policy) {
       vm.policy = policy;
-      saveOrUpdateDestination();
+      saveDestination();
     }
     
-    function saveOrUpdateDestination() {
+    function saveDestination() {
       
       var target = {
         'name'    : vm1.name,
@@ -139,7 +143,7 @@
           .success(createDestinationSuccess)
           .error(createDestinationFailed);
       }else{
-        vm.policy.targetId = vm1.selection.id;
+        vm.policy.targetId = vm1.selection.id || vm.destinations[0].id;
         saveOrUpdatePolicy();
       }
     }
@@ -197,12 +201,17 @@
         .success(listDestinationPolicySuccess)
         .error(listDestinationPolicyFailed);
     }
+    
+    function closeError() {
+      vm.toggleErrorMessage = false;
+    }
         
     function listDestinationSuccess(data, status) {
       vm.destinations = data || [];     
     }
     function listDestinationFailed(data, status) {
-      console.log('Failed list destination:' + data);
+      vm.errorMessages.push($filter('tr')('failed_get_destination'));
+      console.log('Failed get destination:' + data);
     }
     
     function listDestinationPolicySuccess(data, status) {
@@ -219,6 +228,7 @@
     }
     
     function listDestinationPolicyFailed(data, status) {
+      vm.errorMessages.push($filter('tr')('failed_get_destination_policies'));
       console.log('Failed list destination policy:' + data);
     }
     
@@ -243,6 +253,7 @@
       vm.checkDestinationPolicyStatus();
     }
     function listReplicationPolicyFailed(data, status) {
+      vm.errorMessages.push($filter('tr')('failed_get_replication_policy') + data);
       console.log('Failed list replication policy:' + data);
     }
     function createReplicationPolicySuccess(data, status) {
@@ -253,9 +264,10 @@
     function createReplicationPolicyFailed(data, status) {
       vm.toggleInProgress1 = false;
       if(status === 409) {
-        vm.modalMessage = $filter('tr')('policy_already_exists', []);
-        $scope.$broadcast('showDialog', true);
-      }
+        vm.errorMessages.push($filter('tr')('policy_already_exists'));
+      }else{
+        vm.errorMessages.push($filter('tr')('failed_create_replication_policy') + data);
+      }     
       console.log('Failed create replication policy.');
     }
     function updateReplicationPolicySuccess(data, status) {
@@ -265,8 +277,11 @@
     }
     function updateReplicationPolicyFailed(data, status) {
       vm.toggleInProgress1 = false;
-      vm.modalMessage = $filter('tr')('failed_update_policy', []) + data;
-      $scope.$broadcast('showDialog', true);
+      if(status === 409) {
+        vm.errorMessages.push($filter('tr')('policy_already_exists')); 
+      }else{
+        vm.errorMessages.push($filter('tr')('failed_update_replication_policy') + data);
+      }
       console.log('Failed update replication policy.');
     }
     function createDestinationSuccess(data, status, headers) {
@@ -276,8 +291,7 @@
       saveOrUpdatePolicy();
     }
     function createDestinationFailed(data, status) {
-      vm.modalMessage = $filter('tr')('failed_create_destination', []) + data;
-      $scope.$broadcast('showDialog', true);
+      vm.errorMessages.push($filter('tr')('failed_create_destination') + data);
       console.log('Failed create destination.');
     }
     function updateDestinationSuccess(data, status) {
@@ -286,7 +300,7 @@
       saveOrUpdatePolicy();
     }
     function updateDestinationFailed(data, status) {
-      vm.modalMessage = $filter('tr')('failed_update_destination', []) + data;
+      vm.errorMessages.push($filter('tr')('failed_update_destination') + data);
       $scope.$broadcast('showDialog', true);
       console.log('Failed update destination.');
     }
@@ -300,10 +314,9 @@
       vm.pingMessage = $filter('tr')('failed_ping_target', []) + (data && data.length > 0 ? ':' + data : '.');
       vm.toggleInProgress0 = false;
     }
-    vm.hideTarget = true;
   }
   
-  function createPolicy() {
+  function createPolicy($timeout) {
     var directive = {
       'restrict': 'E',
       'templateUrl': '/static/resources/js/components/replication/create-policy.directive.html',
@@ -338,12 +351,24 @@
               }
             }
           }); 
+          
+          scope.$watch('vm.errorMessages', function(current) {
+            if(current && current.length > 0) {
+              ctrl.toggleErrorMessage = true;
+            }
+          }, true);
             
           ctrl.checkedAddTarget = false;
           ctrl.targetEditable = true;
+          
           ctrl.notAvailable = false;
+          
           ctrl.pingMessage = '';
           ctrl.pingAvailable = true;
+          
+          ctrl.toggleErrorMessage = false;
+          ctrl.errorMessages = [];
+          
           ctrl.prepareDestination();
           
           switch(ctrl.action) {
@@ -356,11 +381,14 @@
           }   
         });
       });               
-                
-                       
+                  
       ctrl.save = save;
     
       function save(form) {
+        
+        ctrl.toggleErrorMessage = false;
+        ctrl.errorMessages = [];
+        
         var postPayload = {
           'projectId': Number(ctrl.projectId),
           'name': form.policy.name,
@@ -377,7 +405,11 @@
           ctrl.update(postPayload);
           break;
         }
-        element.find('#createPolicyModal').modal('hide');
+        $timeout(function() {      
+          if(!ctrl.toggleErrorMessage) {
+            element.find('#createPolicyModal').modal('hide');
+          }
+        }, 50);
       }
     }
   }

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

@@ -8,6 +8,14 @@
         </div>
         <div class="modal-body">
           <div class="create-destination">
+            <div class="col-md-12"  ng-show="vm.toggleErrorMessage">
+              <div class="pull-right clearfix" style="padding: 5px 10px;"><a href="javascript:void(0);" ng-click="vm.closeError()"><span class="glyphicon glyphicon-remove"></span></a></div>
+              <div class="bg-danger dialog-message">
+                <ul class="list-unstyled" style="color: red; margin: 0;" ng-repeat="msg in vm.errorMessages">
+                  <li>// msg //</li>
+                </ul>
+              </div>
+            </div>
             <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">

static/resources/js/components/system-management/create-destination.directive.js

@@ -6,9 +6,9 @@
     .module('harbor.system.management')
     .directive('createDestination', createDestination);
     
-  CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService', 'PingDestinationService', 'ListDestinationPolicyService', '$filter', 'trFilter'];
+  CreateDestinationController.$inject = ['$scope', 'ListDestinationService', 'CreateDestinationService', 'UpdateDestinationService', 'PingDestinationService', 'ListDestinationPolicyService', '$filter', 'trFilter', '$timeout'];
   
-  function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService, PingDestinationService, ListDestinationPolicyService, $filter, trFilter) {
+  function CreateDestinationController($scope, ListDestinationService, CreateDestinationService, UpdateDestinationService, PingDestinationService, ListDestinationPolicyService, $filter, trFilter, $timeout) {
     var vm = this;
     
     $scope.destination = {};
@@ -25,6 +25,10 @@
     vm.pingAvailable = true;
     vm.pingMessage = '';
         
+    vm.closeError = closeError;
+    vm.toggleErrorMessage = false;
+    vm.errorMessages = [];            
+        
     $scope.$watch('destination.endpoint', function(current) {
       if(current) {
         vm.notAvailable = false;
@@ -64,7 +68,9 @@
     
     function createDestinationFailed(data, status) {
       if(status === 409) {
-        alert($filter('tr')('destination_already_exists', []));
+        vm.errorMessages.push($filter('tr')('destination_already_exists'));
+      }else{
+        vm.errorMessages.push($filter('tr')('failed_create_destination') + data);
       }
       console.log('Failed create destination:' + data);
     }
@@ -81,6 +87,7 @@
     }
     
     function updateDestinationFailed(data, status) {
+      vm.errorMessages.push($filter('tr')('failed_update_destination') + data);
       console.log('Failed update destination.');
     }
     
@@ -98,6 +105,7 @@
     }
     
     function getDestinationFailed(data, status) {
+      vm.errorMessages.push($filter('tr')('failed_get_destination'));
       console.log('Failed get destination.');
     }
     
@@ -111,6 +119,7 @@
     }
     
     function listDestinationPolicyFailed(data, status) {
+      vm.errorMessages.push($filter('tr')('failed_get_destination_policies'));
       console.log('Failed list destination policy:' + data);
     }
     
@@ -127,6 +136,11 @@
         .success(pingDestinationSuccess)
         .error(pingDestinationFailed);
     }
+    
+    function closeError() {
+      vm.toggleErrorMessage = false;
+    }
+    
     function pingDestinationSuccess(data, status) {
       vm.pingAvailable = true;
       vm.pingMessage = $filter('tr')('successful_ping_target', []);
@@ -137,7 +151,7 @@
     }
   }
   
-  function createDestination() {
+  function createDestination($timeout) {
     var directive = {
       'restrict': 'E',
       'templateUrl': '/static/resources/js/components/system-management/create-destination.directive.html',
@@ -164,6 +178,9 @@
         ctrl.pingAvailable = true;
         ctrl.pingMessage = '';
         
+        ctrl.toggleErrorMessage = false;
+        ctrl.errorMessages = [];
+        
         switch(ctrl.action) {
         case 'ADD_NEW':
           ctrl.addNew();
@@ -172,6 +189,13 @@
           ctrl.edit(ctrl.targetId);
           break;
         }
+        
+        scope.$watch('vm.errorMessages', function(current) {
+          if(current && current.length > 0) {
+            ctrl.toggleErrorMessage = true;
+          }
+        }, true);
+        
         scope.$apply();
       });
       
@@ -179,6 +203,9 @@
       
       function save(destination) {
         if(destination) {          
+          ctrl.toggleErrorMessage = false;
+          ctrl.errorMessages = [];
+          
           switch(ctrl.action) {
           case 'ADD_NEW':
             ctrl.create(destination);
@@ -187,7 +214,12 @@
             ctrl.update(destination);
             break;
           }
-          element.find('#createDestinationModal').modal('hide');
+          
+          $timeout(function() {
+            if(!ctrl.toggleErrorMessage) {
+              element.find('#createDestinationModal').modal('hide');
+            }
+          }, 50);
         }
       }
     }

static/resources/js/components/system-management/destination.directive.js

@@ -83,7 +83,7 @@
     
     function deleteDestinationFailed(data, status) {
       $scope.$emit('modalTitle', $filter('tr')('error'));
-      $scope.$emit('modalMessage', $filter('tr')('failed_delete_destination'));
+      $scope.$emit('modalMessage', $filter('tr')('failed_delete_destination') + data);
       $scope.$emit('raiseError', true);
       console.log('Failed delete destination.');
     }   

static/resources/js/components/system-management/system-management.directive.js

@@ -9,11 +9,20 @@
   SystemManagementController.$inject = ['$scope', '$location'];
     
   function SystemManagementController($scope, $location) {
-    var vm = this;
-    vm.target = 'destinations';
-    $scope.$on('$locationChangeSuccess', function(e) {
-      vm.target = $location.path().substring(1);
-    });
+    var vm = this;    
+    var currentTarget = $location.path().substring(1);
+   
+    switch(currentTarget) {
+    case 'destinations':
+    case 'replication':
+      $location.path('/' + currentTarget);
+      vm.target = currentTarget;
+      break;
+    default:
+      $location.path('/destinations');
+      vm.target = 'destinations';
+    }
+    
   }
   
   function systemManagement() {

static/resources/js/services/i18n/locale_messages_en-US.js

@@ -192,11 +192,7 @@ var locale_messages = {
   'successful_ping_target': 'Test connection successfully.',
   'failed_ping_target': 'Faild to connect 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_create_destination': 'Create destination failed:',
-  'failed_update_destination': 'Failed update destination:',
   'refresh': 'Refresh',
   'select_all': 'Select All',
   'delete_tag': 'Delete Tag',
@@ -232,5 +228,14 @@ var locale_messages = {
   'failed_toggle_admin': 'Failed toggle admin user.',
   'failed_list_destination': 'Failed list destinations.',
   'failed_list_replication': 'Failed list replication policies.',
-  'failed_toggle_policy': 'Failed toggle replication policy.'
+  'failed_toggle_policy': 'Failed toggle replication policy.',
+  'failed_create_replication_policy': 'Failed create replication policy.',
+  'failed_get_destination': 'Failed get destination.',
+  'failed_get_destination_policies': 'Failed get destination policies.',
+  'failed_get_replication_policy': 'Failed get replication policy.',
+  'failed_update_replication_policy': 'Failed update replication policy.',
+  'failed_delete_destination': 'Delete destination failed:',
+  'failed_create_destination': 'Create destination failed:',
+  'failed_update_destination': 'Failed update destination:',
+  
 };

static/resources/js/services/i18n/locale_messages_zh-CN.js

@@ -192,11 +192,7 @@ var locale_messages = {
   'successful_ping_target': '测试连接目标成功。',
   'failed_ping_target': '测试连接目标失败',
   'policy_already_exists': '策略已存在。',
-  'failed_update_policy': '修改策略失败：',
   'destination_already_exists': '目标已存在。',
-  'failed_delete_destination': '删除目标失败：',
-  'failed_create_destination': '创建目标失败：',
-  'failed_update_destination': '修改目标失败：',
   'refresh': '刷新',
   'select_all': '全选',
   'delete_tag': '删除镜像标签',
@@ -232,5 +228,13 @@ var locale_messages = {
   'failed_toggle_admin': '切换管理员用户失败。',
   'failed_list_destination': '获取目标数据失败。',
   'failed_list_replication': '获取复制策略数据失败。',
-  'failed_toggle_policy': '切换复制策略状态失败。'
+  'failed_toggle_policy': '切换复制策略状态失败。',
+  'failed_create_replication_policy': '创建复制策略失败。',
+  'failed_get_destination': '获取目标失败。',
+  'failed_get_destination_policies': '获取目标关联策略数据失败。',
+  'failed_get_replication_policy': '获取复制策略失败。',
+  'failed_update_replication_policy': '修改复制策略失败。',
+  'failed_delete_destination': '删除目标失败：',
+  'failed_create_destination': '创建目标失败：',
+  'failed_update_destination': '修改目标失败：'
 };