Add OIDC Redirect url on configration and fix delete repository bug and fix operation refresh bug

1. add OIDC Redirect url on configration.
2. fix delete repository bug.
3. fix operation refresh bug when user Appears when the refresh button is clicked on replicate.

Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/lib/src/operation/operate.ts

@@ -8,7 +8,7 @@ export class OperateInfo {
         this.name = '';
         this.state = '';
         this.data = {id: -1, name: '', errorInf: ''};
-        this.timeStamp = 0;
+        this.timeStamp = new Date().getTime();
         this.timeDiff = 'less 1 minute';
     }
 }

src/portal/lib/src/repository-gridview/repository-gridview.component.ts

@@ -138,7 +138,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
         // Get system info for tag views
         this.systemInfoService.getSystemInfo()
             .subscribe(systemInfo => (this.systemInfo = systemInfo)
-            , error => this.errorHandler.error(error));
+                , error => this.errorHandler.error(error));
 
         if (this.mode === "admiral") {
             this.isCardView = true;
@@ -151,29 +151,42 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
     }
 
     confirmDeletion(message: ConfirmationAcknowledgement) {
-        if (message &&
+        let repArr: any[] = [];
-            message.source === ConfirmationTargets.REPOSITORY &&
+        message.data.forEach(repo => {
-            message.state === ConfirmationState.CONFIRMED) {
+            if (!this.signedCon[repo.name]) {
-
+                repArr.push(this.getTagInfo(repo.name));
-            let repoLists = message.data;
-            if (repoLists && repoLists.length) {
-                let observableLists: any[] = [];
-                repoLists.forEach(repo => {
-                    observableLists.push(this.delOperate(repo));
-                });
-
-                forkJoin(observableLists).subscribe((item) => {
-                    this.selectedRow = [];
-                    this.refresh();
-                    let st: State = this.getStateAfterDeletion();
-                    if (!st) {
-                        this.refresh();
-                    } else {
-                        this.clrLoad(st);
-                    }
-                });
             }
-        }
+        });
+        this.loading = true;
+        forkJoin(...repArr).subscribe(() => {
+            if (message &&
+                message.source === ConfirmationTargets.REPOSITORY &&
+                message.state === ConfirmationState.CONFIRMED) {
+                let repoLists = message.data;
+                if (repoLists && repoLists.length) {
+                    let observableLists: any[] = [];
+                    repoLists.forEach(repo => {
+                        observableLists.push(this.delOperate(repo));
+                    });
+                    forkJoin(observableLists).subscribe((item) => {
+                        this.selectedRow = [];
+                        this.refresh();
+                        let st: State = this.getStateAfterDeletion();
+                        if (!st) {
+                            this.refresh();
+                        } else {
+                            this.clrLoad(st);
+                        }
+                    }, error => {
+                        this.errorHandler.error(error);
+                        this.loading = false;
+                    });
+                }
+            }
+        }, error => {
+            this.errorHandler.error(error);
+            this.loading = false;
+        });
     }
 
     delOperate(repo: RepositoryItem): Observable<any> {
@@ -238,25 +251,16 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
     deleteRepos(repoLists: RepositoryItem[]) {
         if (repoLists && repoLists.length) {
             let repoNames: string[] = [];
-            let repArr: any[] = [];
-
             repoLists.forEach(repo => {
                 repoNames.push(repo.name);
-
-                if (!this.signedCon[repo.name]) {
-                    repArr.push(this.getTagInfo(repo.name));
-                }
             });
-
+            this.confirmationDialogSet(
-            forkJoin(...repArr).subscribe(() => {
+                'REPOSITORY.DELETION_TITLE_REPO',
-                this.confirmationDialogSet(
+                '',
-                    'REPOSITORY.DELETION_TITLE_REPO',
+                repoNames.join(','),
-                    '',
+                repoLists,
-                    repoNames.join(','),
+                'REPOSITORY.DELETION_SUMMARY_REPO',
-                    repoLists,
+                ConfirmationButtons.DELETE_CANCEL);
-                    'REPOSITORY.DELETION_SUMMARY_REPO',
-                    ConfirmationButtons.DELETE_CANCEL);
-            }, error => this.errorHandler.error(error));
         }
     }
 
@@ -270,7 +274,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
                     }
                 });
             })
-            , catchError(error => observableThrowError(error)));
+                , catchError(error => observableThrowError(error)));
     }
 
     confirmationDialogSet(summaryTitle: string, signature: string,
@@ -311,7 +315,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
                 }
 
             })
-            , catchError(error => observableThrowError(false)));
+                , catchError(error => observableThrowError(false)));
     }
 
     provisionItemEvent(evt: any, repo: RepositoryItem): void {
@@ -358,11 +362,11 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
         params.set("page_size", "" + this.pageSize);
 
         this.loading = true;
-            this.repositoryService.getRepositories(
+        this.repositoryService.getRepositories(
-                this.projectId,
+            this.projectId,
-                this.lastFilteredRepoName,
+            this.lastFilteredRepoName,
-                params
+            params
-            )
+        )
             .subscribe((repo: Repository) => {
                 this.totalCount = repo.metadata.xTotalCount;
                 this.repositoriesCopy = repo.data;
@@ -406,11 +410,11 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
 
         this.loading = true;
 
-            this.repositoryService.getRepositories(
+        this.repositoryService.getRepositories(
-                this.projectId,
+            this.projectId,
-                this.lastFilteredRepoName,
+            this.lastFilteredRepoName,
-                params
+            params
-            )
+        )
             .subscribe((repo: Repository) => {
 
                 this.totalCount = repo.metadata.xTotalCount;

src/portal/lib/src/service/interface.ts

@@ -257,6 +257,7 @@ export interface SystemInfo {
   harbor_version?: string;
   clair_vulnerability_status?: ClairDBStatus;
   next_scan_all?: number;
+  external_url?: string;
 }
 
 /**

src/portal/src/app/config/auth/config-auth.component.html

@@ -322,6 +322,7 @@
     </section>
 
     <section class="form-block" *ngIf="showOIDC">
+        <div class="oidc-tip">{{ 'CONFIG.OIDC.OIDC_REDIREC_URL' | translate}} <span>{{redirectUrl}}/c/oidc/callback</span></div>
         <div class="form-group">
             <label for="oidcName" class="required">{{'CONFIG.OIDC.OIDC_PROVIDER' | translate}}</label>
             <label for="oidcName" aria-haspopup="true" role="tooltip"

src/portal/src/app/config/auth/config-auth.component.scss

@@ -14,4 +14,9 @@ clr-tooltip {
 }
 .top-5 {
     top: -5px;
-}
+}
+.oidc-tip {
+    position: absolute;
+    top: 170px;
+    color: rgb(210, 74, 112);
+}

src/portal/src/app/config/auth/config-auth.component.ts

@@ -11,11 +11,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, Input, ViewChild, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, Input, ViewChild, SimpleChanges, OnChanges, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Subscription } from "rxjs";
 
-import { Configuration, clone, isEmpty, getChanges, StringValueItem, BoolValueItem } from '@harbor/ui';
+import { Configuration, clone, isEmpty, getChanges, StringValueItem, BoolValueItem, SystemInfoService, ErrorHandler } from '@harbor/ui';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { ConfirmMessageHandler } from '../config.msg.utils';
 import { AppConfigService } from '../../app-config.service';
@@ -28,10 +28,11 @@ const fakePass = 'aWpLOSYkIzJTTU4wMDkx';
     templateUrl: 'config-auth.component.html',
     styleUrls: ['./config-auth.component.scss', '../config.component.scss']
 })
-export class ConfigurationAuthComponent implements OnChanges {
+export class ConfigurationAuthComponent implements OnChanges, OnInit {
     changeSub: Subscription;
     testingLDAPOnGoing = false;
     onGoing = false;
+    redirectUrl: string;
     // tslint:disable-next-line:no-input-rename
     @Input('allConfig') currentConfig: Configuration = new Configuration();
     private originalConfig: Configuration;
@@ -41,10 +42,19 @@ export class ConfigurationAuthComponent implements OnChanges {
         private msgHandler: MessageHandlerService,
         private configService: ConfigurationService,
         private appConfigService: AppConfigService,
-        private confirmMessageHandler: ConfirmMessageHandler
+        private confirmMessageHandler: ConfirmMessageHandler,
+        private systemInfo: SystemInfoService,
+        private errorHandler: ErrorHandler,
     ) {
     }
-
+    ngOnInit() {
+        this.getSystemInfo();
+    }
+    getSystemInfo(): void {
+        this.systemInfo.getSystemInfo()
+            .subscribe(systemInfo => (this.redirectUrl = systemInfo.external_url)
+                , error => this.errorHandler.error(error));
+    }
     get checkable() {
         return this.currentConfig &&
             this.currentConfig.self_registration &&

src/portal/src/i18n/lang/en-us-lang.json

@@ -756,6 +756,7 @@
         },
         "OIDC": {
             "OIDC_PROVIDER": "OIDC Provider Name",
+            "OIDC_REDIREC_URL": "Please make sure the Redirect URI on the OIDC provider is set to",
             "ENDPOINT": "OIDC Endpoint",
             "CLIENT_ID": "OIDC Client ID",
             "CLIENTSECRET": "OIDC Client Secret",

src/portal/src/i18n/lang/es-es-lang.json

@@ -756,6 +756,7 @@
         },
         "OIDC": {
             "OIDC_PROVIDER": "OIDC Proveedor",
+            "OIDC_REDIREC_URL": "Please make sure the Redirect URI on the OIDC provider is set to",
             "ENDPOINT": "OIDC Endpoint",
             "CLIENT_ID": "ID de cliente OIDC",
             "CLIENTSECRET": "OIDC Client Secret",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -729,6 +729,7 @@
         },
         "OIDC": {
             "OIDC_PROVIDER": "OIDC Fournisseur",
+            "OIDC_REDIREC_URL": "Please make sure the Redirect URI on the OIDC provider is set to",
             "ENDPOINT": "OIDC Faramètre",
             "CLIENT_ID": "no d'identification du client OIDC",
             "CLIENTSECRET": "OIDC Client Secret",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -750,6 +750,7 @@
         },
         "OIDC": {
             "OIDC_PROVIDER": "OIDC Fornecedor",
+            "OIDC_REDIREC_URL": "Please make sure the Redirect URI on the OIDC provider is set to",
             "ENDPOINT": "OIDC Endpoint",
             "CLIENT_ID": "ID de cliente OIDC",
             "CLIENTSECRET": "OIDC Client Secret",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -755,6 +755,7 @@
         },
         "OIDC": {
             "OIDC_PROVIDER": "OIDC 供应商",
+            "OIDC_REDIREC_URL": "请确保将OIDC提供的重定向地址设置为",
             "ENDPOINT": "OIDC Endpoint",
             "CLIENT_ID": "OIDC 客户端标识",
             "CLIENTSECRET": "OIDC 客户端密码",