Merge pull request #24 from steven-zou/fix/issue_1874

add loading icon to index and remove related console logs

src/ui_ng/src/app/base/navigator/navigator.component.ts

@@ -118,6 +118,7 @@ export class NavigatorComponent implements OnInit {
             .then(() => {
                 //Naviagte to the sign in route
                 this.router.navigate([CommonRoutes.EMBEDDED_SIGN_IN]);
+                this.session.clear();//Destroy session cache
             })
             .catch(error => {
                 this.msgHandler.handleError(error);       

src/ui_ng/src/app/replication/destination/destination.component.ts

@@ -42,7 +42,6 @@ export class DestinationComponent implements OnInit {
           .subscribe(
           response => {
             this.messageHandlerService.showSuccess('DESTINATION.DELETED_SUCCESS');
-            console.log('Successful deleted target with ID:' + targetId);
             this.reload();
           },
           error => { 
@@ -51,7 +50,6 @@ export class DestinationComponent implements OnInit {
             } else {
               this.messageHandlerService.handleError(error);
             }
-            console.log('Failed to delete target with ID:' + targetId + ', error:' + error);
           });
       }
     });

src/ui_ng/src/app/replication/replication.component.ts

@@ -90,7 +90,6 @@ export class ReplicationComponent implements OnInit {
 
    ngOnInit(): void {
      this.projectId = +this.route.snapshot.parent.params['id'];
-     console.log('Get projectId from route params snapshot:' + this.projectId);
      this.search = new SearchOption();
      this.currentRuleStatus = this.ruleStatus[0];
      this.currentJobStatus  = this.jobStatus[0];
@@ -125,13 +124,11 @@ export class ReplicationComponent implements OnInit {
    }
 
    openModal(): void {
-     console.log('Open modal to create policy.');
      this.createEditPolicyComponent.openCreateEditPolicy(true);
    }
 
    openEditPolicy(policy: Policy) {
      if(policy) {
-       console.log('Open modal to edit policy ID:' + policy.id);
        let editable = true;
        if(policy.enabled === 1) {
          editable = false;

src/ui_ng/src/app/replication/replication.service.ts

@@ -19,7 +19,6 @@ export class ReplicationService {
     if(!projectId) {
       projectId = '';
     }
-    console.log('Get policies with project ID:' + projectId + ', policy name:' + policyName);
     return this.http
                .get(`/api/policies/replication?project_id=${projectId}&name=${policyName}`)
                .map(response=>response.json() as Policy[])
@@ -27,7 +26,6 @@ export class ReplicationService {
   }
 
   getPolicy(policyId: number): Observable<Policy> {
-    console.log('Get policy with ID:' + policyId);
     return this.http
                .get(`/api/policies/replication/${policyId}`)
                .map(response=>response.json() as Policy)
@@ -35,7 +33,6 @@ export class ReplicationService {
   }
 
   createPolicy(policy: Policy): Observable<any> {
-    console.log('Create policy with project ID:' + policy.project_id + ', policy:' + JSON.stringify(policy));
     return this.http
                .post(`/api/policies/replication`, JSON.stringify(policy))
                .map(response=>response.status)
@@ -107,7 +104,6 @@ export class ReplicationService {
 
   // /api/jobs/replication/?page=1&page_size=20&end_time=&policy_id=1&start_time=&status=&repository=
   listJobs(policyId: number, status: string = '', repoName: string = '', startTime: string = '', endTime: string = '', page: number, pageSize: number): Observable<any> {
-    console.log('Get jobs under policy ID:' + policyId);
     return this.http
                .get(`/api/jobs/replication?policy_id=${policyId}&status=${status}&repository=${repoName}&start_time=${startTime}&end_time=${endTime}&page=${page}&page_size=${pageSize}`)
                .map(response=>response)
@@ -115,7 +111,6 @@ export class ReplicationService {
   }
 
   listTargets(targetName: string): Observable<Target[]> {
-    console.log('Get targets.');
     return this.http
                .get(`/api/targets?name=${targetName}`)
                .map(response=>response.json() as Target[])
@@ -123,7 +118,6 @@ export class ReplicationService {
   }
 
   listTargetPolicies(targetId: number): Observable<Policy[]> {
-    console.log('List target with policy.');
     return this.http
                .get(`/api/targets/${targetId}/policies`)
                .map(response=>response.json() as Policy[])
@@ -131,7 +125,6 @@ export class ReplicationService {
   }
 
   getTarget(targetId: number): Observable<Target> {
-    console.log('Get target by ID:' + targetId);
     return this.http
                .get(`/api/targets/${targetId}`)
                .map(response=>response.json() as Target)
@@ -139,7 +132,6 @@ export class ReplicationService {
   }
 
   createTarget(target: Target): Observable<any> {
-    console.log('Create target:' + JSON.stringify(target));
     return this.http
                .post(`/api/targets`, JSON.stringify(target))
                .map(response=>response.status)
@@ -147,7 +139,6 @@ export class ReplicationService {
   }
 
   pingTarget(target: Target): Observable<any> {
-    console.log('Ping target.');
     let body = new URLSearchParams();
     body.set('endpoint', target.endpoint);
     body.set('username', target.username);
@@ -159,7 +150,6 @@ export class ReplicationService {
   }
 
   updateTarget(target: Target): Observable<any> {
-    console.log('Update target with target ID' + target.id);
     return this.http
                .put(`/api/targets/${target.id}`, JSON.stringify(target))
                .map(response=>response.status)
@@ -167,7 +157,6 @@ export class ReplicationService {
   }
 
   deleteTarget(targetId: number): Observable<any> {
-    console.log('Deleting  target with ID:' + targetId);
     return this.http
                .delete(`/api/targets/${targetId}`)
                .map(response=>response.status)

src/ui_ng/src/app/replication/total-replication/total-replication.component.ts

@@ -50,7 +50,6 @@ export class TotalReplicationComponent implements OnInit {
   
   openEditPolicy(policy: Policy) {
     if(policy) {
-      console.log('Open modal to edit policy ID:' + policy.id);
       let editable = true;
       if(policy.enabled === 1) {
         editable = false;

src/ui_ng/src/app/shared/route/auth-user-activate.service.ts

@@ -36,7 +36,6 @@ export class AuthCheckGuard implements CanActivate, CanActivateChild {
     //When routing change, clear
     this.msgHandler.clear();
     this.searchTrigger.closeSearch(true);
-    
     return new Promise((resolve, reject) => {
       //Before activating, we firstly need to confirm whether the route is coming from peer part - admiral
       let queryParams = route.queryParams;

src/ui_ng/src/app/shared/session.service.ts

@@ -93,7 +93,7 @@ export class SessionService {
         return this.http.get(signOffEndpoint, { headers: this.headers }).toPromise()
             .then(() => {
                 //Destroy current session cache
-                this.currentUser = null;
+                //this.currentUser = null;
             }) //Nothing returned
             .catch(error => this.handleError(error))
     }

src/ui_ng/src/index.html

@@ -10,7 +10,11 @@
 </head>
 
 <body>
-    <harbor-app>Loading...</harbor-app>
+    <harbor-app>
+        <div class="spinner spinner-lg app-loading">
+            Loading...
+        </div>
+    </harbor-app>
 </body>
 
 </html>

src/ui_ng/src/styles.css

@@ -0,0 +1,9 @@
+.app-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -54px;
+    margin-left: -54px;
+    width: 108px !important;
+    height: 108px !important;
+}