updates for loading progress and miscellaneous.

static/resources/js/components/element-height/element-height.inspector.js

@@ -33,8 +33,8 @@
           element.find('.section').css({'height': (h - scope.subsHeight - scope.subsSection) + 'px'});        
           element.find('.sub-pane').css({'height': (h - scope.subsHeight - scope.subsSubPane) + 'px'});
           element.find('.tab-pane').css({'height': (h - scope.subsHeight - scope.subsSubPane) + 'px'});
-          var subPaneHeight = element.find('.sub-pane').height();
-          element.find('.table-body-container').css({'height': (subPaneHeight - scope.subsTblBody) + 'px'});
+//          var subPaneHeight = element.find('.sub-pane').height();
+//          element.find('.table-body-container').css({'height': (subPaneHeight - scope.subsTblBody) + 'px'});
         }
       }, true);
       

static/resources/js/components/loading-progress/loading-progress.directive.js

@@ -0,0 +1,53 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.loading.progress')
+    .directive('loadingProgress', loadingProgress);
+  
+  function loadingProgress() {
+    var directive = {
+      'restrict': 'EA',
+      'scope': {
+        'toggleInProgress': '=',
+        'hideTarget': '='
+      },
+      'link': link
+    };
+    
+    return directive;
+    
+    function link(scope, element, attrs) {
+      var spinner = $('<div>')
+        .css({'display': 'inline-block'})
+        .css({'position': 'relative'}) 
+        .css({'background-image': 'url(/static/resources/img/loading.gif)'}) 
+        .css({'background-position': 'center'})
+        .css({'background-size': '107px'})
+        .css({'width': '1.2em'})
+        .css({'height': '1.2em'})
+        .css({'margin': '0 0 1px 8px'})
+        .css({'vertical-align': 'middle'});  
+      
+      scope.$watch('toggleInProgress', function(current) {
+        console.log('toggleInProgress:' + scope.toggleInProgress);
+        if(scope.toggleInProgress) {
+          element.append(spinner);
+          element.parent().attr('disabled', 'disabled');
+          if(scope.hideTarget) {
+            element.append(spinner);
+            element.hide();     
+          }
+        }else{
+          scope.hideTarget = false;
+          element.show();
+          element.find('div').remove();
+          element.removeAttr('disabled');
+        }
+      });
+
+    }
+  }
+  
+})();

static/resources/js/components/loading-progress/loading-progress.module.js

@@ -0,0 +1,8 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.loading.progress', []);
+  
+})();

static/resources/js/components/log/list-log.directive.html

@@ -28,7 +28,7 @@
           <table class="table table-pane">
             <tbody>
               <tr ng-repeat="log in vm.logs">
-                <td>//log.username//</td><td>//log.repo_name//</td><td>//log.operation//</td><td>//log.op_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                <td width="14%">//log.username//</td><td width="32%">//log.repo_name//</td><td width="14%">//log.operation//</td><td width="40%">//log.op_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
               </tr>
             </tbody>
           </table>

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

@@ -1,6 +1,6 @@
-<td style="padding: 15px;">//vm.username//</td>
-<td><switch-role roles="vm.roles" edit-mode="vm.editMode" user-id="vm.userId" role-name="vm.roleName"></switch-role></td>
-<td>
+<td width="30%">//vm.username//</td>
+<td width="45%"><switch-role roles="vm.roles" edit-mode="vm.editMode" user-id="vm.userId" role-name="vm.roleName"></switch-role></td>
+<td width="25%">
   <a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.updateProjectMember({projectId: vm.projectId, userId: vm.userId, roleId: vm.roleId})">
     <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>

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

@@ -43,10 +43,8 @@
                 <div class="col-md-8" style="padding-left: 0;">
                   <h4 class="h4-custom">// 'destination_setting' | tr //</h4>
                 </div>
-           
               </div>
-              <hr class="hr-line"/>
-              
+              <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>
@@ -80,7 +78,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-click="vm.pingDestination()" ng-disabled="vm.notAvailable || !vm.pingAvailable">// '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="vm.hideTarget" toggle-in-progress="vm.toggleInProgress0">// 'test_connection' | tr //</button>
               </div>
             </div>
             <div class="form-group col-md-12 form-group-custom">
@@ -92,7 +90,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button ng-show="vm.targetEditable" type="submit" class="btn btn-primary" ng-click="vm.save(replication)">// 'ok' | tr //</button>
+        <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>

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

@@ -40,6 +40,9 @@
     vm.notAvailable = false;
     vm.pingAvailable = true;
     vm.pingMessage = '';
+    
+    vm.toggleInProgress0 = false;
+    vm.toggleInProgress1 = false;
            
     $scope.$watch('vm.destinations', function(current) {
       if(current) {
@@ -142,6 +145,8 @@
     }
     
     function saveOrUpdatePolicy() {
+      vm.toggleInProgress1 = true;
+      
       switch(vm.action) {
       case 'ADD_NEW':
         CreateReplicationPolicyService(vm.policy)
@@ -153,6 +158,8 @@
           .success(updateReplicationPolicySuccess)
           .error(updateReplicationPolicyFailed);
         break;
+      default:
+        vm.toggleInProgress = false;
       }
     }
     
@@ -177,6 +184,8 @@
       }
       
       vm.pingAvailable = false;
+      vm.pingMessage = $filter('tr')('pinging_target');
+      vm.toggleInProgress0 = true;
       
       PingDestinationService(target)
         .success(pingDestinationSuccess)
@@ -237,10 +246,12 @@
       console.log('Failed list replication policy:' + data);
     }
     function createReplicationPolicySuccess(data, status) {
+      vm.toggleInProgress1 = false;
       console.log('Successful create replication policy.');
       vm.reload();
     }
     function createReplicationPolicyFailed(data, status) {
+      vm.toggleInProgress1 = false;
       if(status === 409) {
         vm.modalMessage = $filter('tr')('policy_already_exists', []);
         $scope.$broadcast('showDialog', true);
@@ -248,10 +259,12 @@
       console.log('Failed create replication policy.');
     }
     function updateReplicationPolicySuccess(data, status) {
+      vm.toggleInProgress1 = false;
       console.log('Successful update replication policy.');
       vm.reload();
     }
     function updateReplicationPolicyFailed(data, status) {
+      vm.toggleInProgress1 = false;
       vm.modalMessage = $filter('tr')('failed_update_policy', []) + data;
       $scope.$broadcast('showDialog', true);
       console.log('Failed update replication policy.');
@@ -280,11 +293,14 @@
     function pingDestinationSuccess(data, status) {
       vm.pingAvailable = true;
       vm.pingMessage = $filter('tr')('successful_ping_target', []);
+      vm.toggleInProgress0 = false;
     }
     function pingDestinationFailed(data, status) {
       vm.pingAvailable = true;
       vm.pingMessage = $filter('tr')('failed_ping_target', []) + (data && data.length > 0 ? ':' + data : '.');
+      vm.toggleInProgress0 = false;
     }
+    vm.hideTarget = true;
   }
   
   function createPolicy() {

static/resources/js/components/replication/list-replication.directive.html

@@ -32,14 +32,14 @@
               </tr>
               <tr policy_id="//r.id//" ng-if="vm.replicationPolicies.length > 0" ng-repeat="r in vm.replicationPolicies" value="//vm.last = $last//"> 
                 <td width="10%">//r.name//</td>
-                <td width="18%" style="padding-left: 10px;">//r.description//</td>
-                <td width="18%" style="padding-left: 15px;">//r.target_name//</td>
-                <td width="18%" style="padding-left: 18px;">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                <td width="14%"  style="padding-left: 18px;" ng-switch on="//r.enabled//">
+                <td width="18%">//r.description//</td>
+                <td width="18%">//r.target_name//</td>
+                <td width="18%">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                <td width="14%" ng-switch on="//r.enabled//">
                   <span ng-switch-when="1">// 'enabled' | tr //</span>
                   <span ng-switch-when="0">// 'disabled' | tr //</span>
                 </td>
-                <td width="15%" style="padding-left: 20px;">
+                <td width="15%">
                   <div class="display-inline-block" ng-switch on="//r.enabled//">
                    <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 0)" title="// 'disabled' | tr //"><span ng-switch-when="1" class="glyphicon glyphicon-stop color-danger"></span></a>
                    <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)" title="// 'enabled' | tr //"><span ng-switch-when="0" class="glyphicon glyphicon-play color-success"></span></a>
@@ -104,8 +104,8 @@
               <th width="18%">// 'creation_time' | tr //</th>
               <th width="18%">// 'start_time' | tr //</th>
               <th width="18%">// 'end_time' | tr //</th>
-              <th width="9%">// 'status' | tr //</th>
-              <th width="10%">// 'logs' | tr //</th>
+              <th width="10%">// 'status' | tr //</th>
+              <th width="9%">// 'logs' | tr //</th>
       			 </thead>
           </table>
          </div>
@@ -118,12 +118,12 @@
                 <tr ng-if="vm.replicationJobs.length > 0" ng-repeat="r in vm.replicationJobs"> 
                   <td width="15%">//r.repository//</td>
                   <td width="12%">//r.operation//</td>
-                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="18%" style="padding-left: 15px;">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="18%" style="padding-left: 18px;">//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                  <td width="9%"  style="padding-left: 20px;">//r.status//</td>
-                  <td width="10%" align="left">
-                    <a ng-show="r.status != 'canceled' && r.status != 'pending'" href="javascript:void(0);" ng-click="vm.downloadLog(r.id)" title="// 'download_log' | tr //"><span style="margin-left: 10px;" class="glyphicon glyphicon-file"></span></a>
+                  <td width="18%">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="18%">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="18%">//r.update_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                  <td width="10%">//r.status//</td>
+                  <td width="9%">
+                    <a style="margin-left: 20px;" ng-show="r.status != 'canceled' && r.status != 'pending'" href="javascript:void(0);" ng-click="vm.downloadLog(r.id)" title="// 'download_log' | tr //"><span class="glyphicon glyphicon-file"></span></a>
                   </td>
                 </tr>
               </tbody>

static/resources/js/components/replication/list-replication.directive.js

@@ -50,13 +50,11 @@
     
     vm.projectId = getParameterByName('project_id', $location.absUrl());
     vm.retrievePolicy();
-    vm.refreshPending = false;
-    
+       
     vm.jobStatus = jobStatus;
     vm.currentStatus = vm.jobStatus()[0];
    
     function searchReplicationPolicy() {
-      vm.refreshPending = true;
       vm.retrievePolicy();
     }   
     
@@ -102,7 +100,6 @@
           }
         }
       });
-      vm.refreshPending = false;
     }
     
     function listReplicationJobFailed(data, status) {

static/resources/js/components/repository/list-repository.directive.html

@@ -10,21 +10,24 @@
     </div>
     <div class="pane">
       <div class="sub-pane">
-        <div ng-if="vm.repositories.length === 0" class="empty-hint">
+        <div ng-if="vm.repositories.length == 0" class="empty-hint">
           <h3 style="margin-top: 120px;" class="text-muted">// 'no_repositories' | tr //</h3>
         </div>
         <div ng-if="vm.repositories.length > 0" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
           <modal-dialog action="vm.deleteImage()" content-type="text/html" modal-title="//vm.modalTitle//" modal-message="//vm.modalMessage//"></modal-dialog>
-          <div class="panel panel-default" ng-repeat="repo in vm.repositories" ng-show="vm.tagCount[repo] > 0">
+          <div class="panel panel-default" ng-repeat="repo in vm.repositories">
             <div class="panel-heading" role="tab" id="heading//$index + 1//">
               <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="" href="?project_id=//vm.projectId//#collapse//$index + 1//" aria-expanded="true" aria-controls="collapse//$index+1//">
+                <a ng-show="vm.tagCount[repo] > 0" role="button" data-toggle="collapse" data-parent="" href="?project_id=//vm.projectId//#collapse//$index + 1//"  aria-expanded="true" aria-controls="collapse//$index+1//">
                   <span class="glyphicon glyphicon-book"></span> &nbsp;//repo// &nbsp;&nbsp;<span class="badge">//vm.tagCount[repo]//</span>
                 </a>
-                <a class="pull-right" style="margin-right: 78px;" href="javascript:void(0)" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByRepo(repo)" title="// 'delete_repo' | tr //"><span class="glyphicon glyphicon-trash"></span></a>          
+                <a ng-if="vm.tagCount[repo] === 0" role="button" style="text-decoration: none;" data-toggle="collapse" data-parent=""  aria-expanded="true" aria-controls="collapse//$index+1//">
+                  <span class="glyphicon glyphicon-book"></span> &nbsp;//repo// &nbsp;&nbsp;<span class="badge">//vm.tagCount[repo]//</span>
+                </a>
+                <a ng-show="vm.tagCount[repo] > 0" class="pull-right" style="margin-right: 75px;" href="javascript:void(0)" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByRepo(repo)" title="// 'delete_repo' | tr //" loading-progress hide-target="true" toggle-in-progress="vm.toggleInProgress[repo + '|']"><span class="glyphicon glyphicon-trash"></span></a>          
               </h4>
             </div>
-            <list-tag associate-id="$index + 1" repo-name="repo" tag-count="vm.tagCount"></list-tag>
+            <list-tag ng-show="vm.tagCount[repo] > 0" associate-id="$index + 1" repo-name="repo" tag-count="vm.tagCount" toggle-in-progress="vm.toggleInProgress"></list-tag>
           </div>
         </div>
       </div>

static/resources/js/components/repository/list-repository.directive.js

@@ -16,6 +16,7 @@
     vm.sectionHeight = {'min-height': '579px'};
   
     vm.filterInput = '';
+    vm.toggleInProgress = [];
 
     var hashValue = $location.hash();
     if(hashValue) {
@@ -44,7 +45,7 @@
         vm.repositories = current || [];
       }
     });
-
+    
     $scope.$on('repoName', function(e, val) {
       vm.repoName = val;
     });
@@ -56,7 +57,7 @@
     $scope.$on('tagCount', function(e, val) {
       vm.tagCount = val;
     });
-    
+        
     $scope.$on('modalTitle', function(e, val) {
       vm.modalTitle = val;
     });
@@ -83,7 +84,6 @@
       console.log('Failed list repositories:' + response);      
     }
    
-  
     function deleteByRepo(repoName) {
       vm.repoName = repoName;
       vm.tag = '';      
@@ -93,16 +93,19 @@
   
     function deleteImage() {
       console.log('repoName:' + vm.repoName + ', tag:' + vm.tag);
+      vm.toggleInProgress[vm.repoName + '|' + vm.tag] = true;
       DeleteRepositoryService(vm.repoName, vm.tag)
         .success(deleteRepositorySuccess)
         .error(deleteRepositoryFailed);
     }
     
     function deleteRepositorySuccess(data, status) {
+      vm.toggleInProgress[vm.repoName + '|' + vm.tag] = false;
       vm.retrieve();
     }
     
     function deleteRepositoryFailed(data, status) {
+      vm.toggleInProgress[vm.repoName + '|' + vm.tag] = false;
       console.log('Failed delete repository:' + data);
     }
     
@@ -115,12 +118,17 @@
       'scope': {
         'sectionHeight': '='
       },
+      'link': link,
       'controller': ListRepositoryController,
       'controllerAs': 'vm',
       'bindToController': true
     };
     
     return directive;
+    
+    function link(scope, element, attr, ctrl) {
+      
+    }
   
   }
   

static/resources/js/components/repository/list-tag.directive.html

@@ -14,7 +14,7 @@
           <td>
             <pull-command repo-name="//vm.repoName//" tag="//tag//"></pull-command>   
           </td>
-          <td style="text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByTag({repoName: vm.repoName, tag: tag})" title="// 'delete_tag' | tr //"><span class="glyphicon glyphicon-trash"></span></a></td>
+          <td style="text-align: center;"><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByTag({repoName: vm.repoName, tag: tag})" title="// 'delete_tag' | tr //" loading-progress hide-target="true" toggle-in-progress="vm.toggleInProgress[vm.repoName +'|'+ tag]"><span class="glyphicon glyphicon-trash"></span></a></td>
         </tr>
       </tbody>
     </table>

static/resources/js/components/repository/list-tag.directive.js

@@ -37,6 +37,9 @@
     
     function getTagComplete(response) {
       vm.tags = response.data;
+      angular.forEach(vm.tags, function(item) {
+        vm.toggleInProgress[vm.repoName + '|' + item] = false;
+      });
       vm.tagCount[vm.repoName] = vm.tags.length;
       $scope.$emit('tagCount', vm.tagCount);
     }
@@ -68,7 +71,8 @@
       'scope': {
         'tagCount': '=',
         'associateId': '=',
-        'repoName': '='
+        'repoName': '=',
+        'toggleInProgress': '='
       },
       'replace': true,
       'link': link,

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

@@ -30,10 +30,10 @@
               <td colspan="7" height="100%" class="empty-hint" ><h3 class="text-muted">// 'no_destinations' | tr //</h3></td>
             </tr>
             <tr ng-if="vm.destinations.length > 0" ng-repeat="r in vm.destinations"> 
-              <td>//r.name//</td>
-              <td>//r.endpoint//</td>
-              <td>//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-              <td>
+              <td width="20%">//r.name//</td>
+              <td width="30%">//r.endpoint//</td>
+              <td width="35%">//r.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+              <td width="15%">
                 <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);" ng-click="vm.confirmToDelete(r.id)"><span class="glyphicon glyphicon-trash"></span></a>

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

@@ -31,16 +31,16 @@
                 <td colspan="7" height="100%" class="empty-hint" ><h3 class="text-muted">// 'no_replication_policies' | tr //</h3></td>
               </tr>
               <tr ng-if="vm.replications.length > 0" ng-repeat="r in vm.replications"> 
-                <td><a href="repository#/replication?project_id=//r.project_id//">//r.name//</a></td>
-                <td>//r.description//</td>
-                <td>//r.project_name//</td>
-                <td>//r.target_name//</td>
-                <td>//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                <td ng-switch on="//r.enabled//">
+                <td width="14%"><a href="repository#/replication?project_id=//r.project_id//">//r.name//</a></td>
+                <td width="18%">//r.description//</td>
+                <td width="14%">//r.project_name//</td>
+                <td width="12%">//r.target_name//</td>
+                <td width="18%">//r.start_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                <td width="12%" ng-switch on="//r.enabled//">
                   <span ng-switch-when="1">// 'enabled' | tr //</span>
                   <span ng-switch-when="0">// 'disabled' | tr //</span>
                 </td>
-                <td>
+                <td width="12%">
                   <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-stop color-danger"></span></a>
                     <a href="javascript:void(0);" ng-click="vm.togglePolicy(r.id, 1)"><span ng-switch-when="0" class="glyphicon glyphicon-play color-success"></span></a>

static/resources/js/components/top-repository/top-repository.directive.html

@@ -16,7 +16,7 @@
           <td colspan="5" height="120px" class="empty-hint" ng-if="vm.top10Repositories.length === 0"><h3 class="text-muted">// 'no_top_repositories' | tr //</h3></td>
         </tr>
         <tr ng-if="vm.top10Repositories.length > 0" ng-repeat="t in vm.top10Repositories">
-          <td>//t.name//</td><td>//t.count//</td><td>//t.creator === '' ? 'N/A' : t.creator //</td>
+          <td width="60%">//t.name//</td><td width="15%">//t.count//</td><td width="25%">//t.creator === '' ? 'N/A' : t.creator //</td>
         </tr>
       </tbody>
     </table>

static/resources/js/components/user-log/user-log.directive.html

@@ -2,10 +2,10 @@
   <div class="table-head-container">
     <table class="table table-pane table-header">
       <thead>
-        <th>// 'task_name' | tr //</th>
-        <th>// 'details' | tr //</th>
-        <th>// 'user' | tr //</th>
-        <th>// 'creation_time' | tr //</th>
+        <th width="25%">// 'task_name' | tr //</th>
+        <th width="25%">// 'details' | tr //</th>
+        <th width="25%">// 'user' | tr //</th>
+        <th width="25%">// 'creation_time' | tr //</th>
       </thead>
     </table>
   </div>
@@ -16,7 +16,7 @@
           <td colspan="5" height="120px" class="empty-hint" ng-if="vm.integratedLogs.length === 0"><h3 class="text-muted">// 'no_user_logs' | tr //</h3></td>
         </tr>
         <tr ng-if="vm.integratedLogs.length > 0" ng-repeat="t in vm.integratedLogs">
-          <td>//t.operation//</td><td>//t.repo_name//</td><td>//t.username//</td><td>//t.op_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+          <td width="25%">//t.operation//</td><td width="25%">//t.repo_name//</td><td width="25%">//t.username//</td><td width="25%">//t.op_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
         </tr>
       </tbody>
     </table>

static/resources/js/components/user/list-user.directive.html

@@ -27,13 +27,13 @@
           <table class="table table-pane">
             <tbody>
               <tr ng-repeat="u in vm.users">
-                <td>//u.username//</td>
-                <td>//u.email//</td>
-                <td>//u.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                <td>
+                <td width="15%">//u.username//</td>
+                <td width="20%">//u.email//</td>
+                <td width="35%">//u.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                <td width="15%">
                   <toggle-admin has-admin-role="u.has_admin_role == 1" user-id="//u.user_id//"></toggle-admin>
                 </td>
-                <td>
+                <td width="20%">
                   &nbsp;&nbsp;<a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" ng-click="vm.confirmToDelete(u.user_id)"><span class="glyphicon glyphicon-trash"></span></a>
                 </td>
               </tr>

static/resources/js/harbor.module.js

@@ -43,6 +43,7 @@
       'harbor.log',
       'harbor.validator',
       'harbor.replication',
-      'harbor.system.management'
+      'harbor.system.management',
+      'harbor.loading.progress'
     ]);
 })();

static/resources/js/layout/forgot-password/forgot-password.controller.js

@@ -19,6 +19,7 @@
     vm.sendMail = sendMail;
     
     vm.confirm = confirm;
+    vm.toggleInProgress = false;
     
     function reset(){
       vm.hasError = false;
@@ -27,6 +28,7 @@
     
     function sendMail(user) {
       if(user && angular.isDefined(user.email)) { 
+        vm.toggleInProgress = true;
         SendMailService(user.email)
           .success(sendMailSuccess)
           .error(sendMailFailed);
@@ -34,10 +36,12 @@
     }
     
     function sendMailSuccess(data, status) {
+      vm.toggleInProgress = false;
       $scope.$broadcast('showDialog', true);
     }
     
     function sendMailFailed(data) {
+      vm.toggleInProgress = false;
       vm.hasError = true;
       vm.errorMessage = data;
       console.log('Failed send mail:' + data);

static/resources/js/services/destination/services.ping-destination.js

@@ -34,6 +34,7 @@
               }
               return str.join("&");
           },
+          'timeout': 30000,
           'data': payload
         });
     }

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

@@ -186,6 +186,7 @@ var locale_messages = {
   'successful_added': 'Added new user successfully.',
   'copyright': 'Copyright',
   'all_rights_reserved': 'All Rights Reserved.',
+  'pinging_target': 'Testing connection, please wait...',
   'successful_ping_target': 'Test connection successfully.',
   'failed_ping_target': 'Faild to connect target',
   'policy_already_exists': 'Policy alreay exists.',

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

@@ -186,6 +186,7 @@ var locale_messages = {
   'successful_added': '新增用户成功。',
   'copyright': '版权所有',
   'all_rights_reserved': '保留所有权利。',
+  'pinging_target': '正在测试连接中，请稍候……',
   'successful_ping_target': '测试连接目标成功。',
   'failed_ping_target': '测试连接目标失败',
   'policy_already_exists': '策略已存在。',

views/forgot-password.htm

@@ -25,7 +25,7 @@
               </div>
               <div class="form-group">
                 <div class="col-md-offset-8 col-md-10">
-                  <input type="submit" class="btn btn-success" ng-click="form.$valid && vm.sendMail(user)" value="// 'send' | tr //">                    
+                  <button type="submit" class="btn btn-success" ng-click="form.$valid && vm.sendMail(user)"  loading-progress hide-target="false" toggle-in-progress="vm.toggleInProgress">// 'send' | tr //</button>   
                 </div>
               </div>  
             </form>

views/project.htm

@@ -42,11 +42,11 @@
                       <td colspan="5" height="320px" class="empty-hint" ng-if="vm.projects.length === 0"><h3 class="text-muted">// 'no_projects_add_new_project' | tr //</h3></td>
                     </tr>
                     <tr ng-if="vm.projects.length > 0" ng-repeat="p in vm.projects">
-                      <td><a href="/repository#/repositories?project_id=//p.project_id//&is_public=//p.public//">//p.name//</a></td>
-                      <td>//p.repo_count//</td>
-                      <td ng-if="!vm.publicity">//vm.getProjectRole(p.current_user_role_id)//</td>
-                      <td>//p.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
-                      <td><publicity-button is-public="p.public" owned="p.owner_id == vm.user.user_id" project-id="p.project_id"></publicity-button></td>
+                      <td width="15%"><a href="/repository#/repositories?project_id=//p.project_id//&is_public=//p.public//">//p.name//</a></td>
+                      <td width="10%">//p.repo_count//</td>
+                      <td width="25%" ng-if="!vm.publicity">//vm.getProjectRole(p.current_user_role_id)//</td>
+                      <td width="30%">//p.creation_time | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
+                      <td width="15%"><publicity-button is-public="p.public" owned="p.owner_id == vm.user.user_id" project-id="p.project_id"></publicity-button></td>
                     </tr>
                   </tbody>
                 </table>

views/sections/header-include.htm

@@ -237,3 +237,6 @@
 
 <script src="/static/resources/js/components/top-repository/top-repository.module.js"></script>
 <script src="/static/resources/js/components/top-repository/top-repository.directive.js"></script>
+
+<script src="/static/resources/js/components/loading-progress/loading-progress.module.js"></script>
+<script src="/static/resources/js/components/loading-progress/loading-progress.directive.js"></script>