From ab461abe640b7afdc5d82fc2a7b3ec8eb86ae2c3 Mon Sep 17 00:00:00 2001
From: FangyuanCheng <fangyuanc@vmware.com>
Date: Fri, 26 Apr 2019 17:10:55 +0800
Subject: [PATCH] Add loading if the fileter is not loaded when creating the
 replication rule\

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>
---
 .../create-edit-endpoint.component.html               |  2 +-
 .../create-edit-endpoint.component.ts                 |  5 +++++
 .../create-edit-rule/create-edit-rule.component.html  |  6 +++++-
 .../create-edit-rule/create-edit-rule.component.scss  | 11 ++++++-----
 .../create-edit-rule/create-edit-rule.component.ts    |  6 +++++-
 .../lib/src/replication/replication.component.scss    |  2 +-
 .../lib/src/replication/replication.component.ts      |  8 +++++++-
 src/portal/src/i18n/lang/en-us-lang.json              |  3 ++-
 src/portal/src/i18n/lang/es-es-lang.json              |  3 ++-
 src/portal/src/i18n/lang/fr-fr-lang.json              |  3 ++-
 src/portal/src/i18n/lang/pt-br-lang.json              |  3 ++-
 src/portal/src/i18n/lang/zh-cn-lang.json              |  3 ++-
 12 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
index 8a1098f98..4d34a34c7 100644
--- a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
+++ b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html
@@ -46,7 +46,7 @@
             translate }}</label>
           <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint.errors && (targetEndpoint.dirty || targetEndpoint.touched)"
             [class.valid]="targetEndpoint.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.url"
+            <input type="text" id="destination_url" [disabled]="testOngoing || urlDisabled" [readonly]="!editable" [(ngModel)]="target.url"
               size="25" name="endpointUrl" #targetEndpoint="ngModel" required placeholder="http(s)://192.168.1.1">
             <span class="tooltip-content" *ngIf="targetEndpoint.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
               {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
diff --git a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
index ce799cc91..598fde2a1 100644
--- a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
+++ b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
@@ -41,6 +41,7 @@ const DOCKERHUB_URL = "https://hub.docker.com";
 export class CreateEditEndpointComponent
   implements AfterViewChecked, OnDestroy, OnInit {
   modalTitle: string;
+  urlDisabled: boolean = false;
   editDisabled: boolean = false;
   controlEnabled: boolean = false;
   createEditDestinationOpened: boolean;
@@ -184,6 +185,7 @@ export class CreateEditEndpointComponent
       this.endpointService.getEndpoint(targetId).subscribe(
         target => {
           this.target = target;
+          this.urlDisabled = this.target.type === 'dockerHub' ? true : false;
           // Keep data cache
           this.initVal = clone(target);
           this.initVal.credential.access_secret = FAKE_PASSWORD;
@@ -197,6 +199,7 @@ export class CreateEditEndpointComponent
         error => this.errorHandler.error(error)
       );
     } else {
+      this.urlDisabled = false;
       this.endpointId = "";
       this.translateService
         .get("DESTINATION.TITLE_ADD")
@@ -210,8 +213,10 @@ export class CreateEditEndpointComponent
   adapterChange($event): void {
     let selectValue = this.targetForm.controls.adapter.value;
     if (selectValue === 'dockerHub') {
+      this.urlDisabled = true;
       this.targetForm.controls.endpointUrl.setValue(DOCKERHUB_URL);
     } else {
+      this.urlDisabled = false;
       this.targetForm.controls.endpointUrl.setValue("");
     }
   }
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
index 8772ef0dc..2d4411cc2 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
@@ -58,6 +58,7 @@
         <!--images/Filter-->
         <div class="form-group form-group-override">
           <label class="form-group-label-override">{{'REPLICATION.SOURCE_RESOURCE_FILTER' | translate}}</label>
+          <span class="spinner spinner-inline spinner-position" [hidden]="onGoing === false"></span>
           <div formArrayName="filters">
             <div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
               <div [formGroupName]="i">
@@ -69,12 +70,15 @@
                   <input type="text" #filterValue required size="14" formControlName="value" id="{{'filter_'+ supportedFilters[i]?.type}}">
                   <span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
                 </label>
-                <div class="select inline-block" *ngIf="supportedFilters[i]?.style==='radio'">
+                <div class="select resource-box" *ngIf="supportedFilters[i]?.style==='radio' && supportedFilters[i]?.values.length > 1">
                   <select formControlName="value" #selectedValue id="{{'select_'+ supportedFilters[i]?.type}}" name="{{supportedFilters[i]?.type}}">
                     <option value="">{{'REPLICATION.BOTH' | translate}}</option>
                     <option *ngFor="let value of supportedFilters[i]?.values;" value="{{value}}">{{value}}</option>
                   </select>
                 </div>
+                <div class="resource-box" *ngIf="supportedFilters[i]?.style==='radio' && supportedFilters[i]?.values.length <= 1">
+                  <span>{{supportedFilters[i]?.values}}</span>
+                </div>
                 <clr-tooltip>
                   <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
                   <clr-tooltip-content clrPosition="top-left" clrSize="md" *clrIfOpen>
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
index 9aea42b17..a0ec094cf 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
@@ -1,7 +1,3 @@
-.select {
-    width: 190px;
-}
-
 .select .optionMore {
     background-color: #bfbaba;
     height: 1.6em;
@@ -239,8 +235,9 @@ clr-modal {
     margin-top: 10px;
 }
 
-.inline-block {
+.resource-box {
     display: inline-block;
+    width: 190px;
 }
 .form-cron {
     padding-left:3.8rem;
@@ -256,3 +253,7 @@ clr-modal {
         margin: 3px 0 0 5px;
     }
 }
+
+.spinner-position {
+    left: 25%;
+}
\ No newline at end of file
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts
index ee6550a13..c65b0a587 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts
@@ -56,6 +56,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
 
   createEditRuleOpened: boolean;
   inProgress = false;
+  onGoing = false;
   inNameChecking = false;
   isRuleNameValid = true;
   nameChecker: Subject<string> = new Subject<string>();
@@ -84,12 +85,13 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
   }
 
   initRegistryInfo(id: number): void {
+    this.onGoing = true;
     this.repService.getRegistryInfo(id).subscribe(adapter => {
       this.supportedFilters = adapter.supported_resource_filters;
       this.supportedFilters.forEach(element => {
         this.filters.push(this.initFilter(element.type));
       });
-
+      this.onGoing = false;
       this.supportedTriggers = adapter.supported_triggers;
       this.ruleForm.get("trigger").get("type").setValue(this.supportedTriggers[0]);
     });
@@ -367,10 +369,12 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
           this.inlineAlert.showInlineError(error);
         });
     } else {
+      this.onGoing = true;
       let registryObs = this.repService.getRegistryInfo(0);
       registryObs.subscribe(adapter => {
         this.setFilterAndTrigger(adapter);
         this.copyUpdateForm = clone(this.ruleForm.value);
+        this.onGoing = false;
       });
       this.headerTitle = "REPLICATION.ADD_POLICY";
       this.copyUpdateForm = clone(this.ruleForm.value);
diff --git a/src/portal/lib/src/replication/replication.component.scss b/src/portal/lib/src/replication/replication.component.scss
index 017f25188..3d582286a 100644
--- a/src/portal/lib/src/replication/replication.component.scss
+++ b/src/portal/lib/src/replication/replication.component.scss
@@ -14,7 +14,7 @@
 }
 
 .execution-select {
-  padding-right: 18px;
+  padding-right: 50px;
   height: 24px;
   display: flex;
   justify-content: flex-end;
diff --git a/src/portal/lib/src/replication/replication.component.ts b/src/portal/lib/src/replication/replication.component.ts
index a238f6ea8..e75c58b87 100644
--- a/src/portal/lib/src/replication/replication.component.ts
+++ b/src/portal/lib/src/replication/replication.component.ts
@@ -327,7 +327,13 @@ export class ReplicationComponent implements OnInit, OnDestroy {
           );
       }),
       catchError(error => {
-        if (error && error._body) {
+        if (error && error.status === 504) {
+          return this.translateService.get("BATCH.TIME_OUT").pipe(
+            map(res => {
+            operateChanges(operMessage, OperationState.failure, res);
+            })
+          );
+        } else if (error && error._body) {
           const message = JSON.parse(error._body).message;
           operateChanges(operMessage, OperationState.failure, message);
           return observableThrowError(message);
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index a23815db7..34f314f3c 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@@ -52,7 +52,8 @@
         "REPLICATE_SUCCESS": "Started successfully",
         "REPLICATE_FAILURE": "Started failed",
         "STOP_SUCCESS": "Stop successfully",
-        "STOP_FAILURE": "Stop execution failed"
+        "STOP_FAILURE": "Stop execution failed",
+        "TIME_OUT": "Gateway time-out"
     },
     "TOOLTIP": {
         "NAME_FILTER": "Filter the name of the resource. Leave empty or use '**' to match all. 'library/**' only matches resources under 'library'. For more patterns, please refer to the user guide.",
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index b5cd35c91..41f628980 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@@ -52,7 +52,8 @@
         "REPLICATE_SUCCESS": "Started successfully",
         "REPLICATE_FAILURE": "Started failed",
         "STOP_SUCCESS": "Stop successfully",
-        "STOP_FAILURE": "Stop execution failed"
+        "STOP_FAILURE": "Stop execution failed",
+        "TIME_OUT": "Gateway time-out"
     },
     "TOOLTIP": {
         "NAME_FILTER": "Filter the name of the resource. Leave empty or use '**' to match all. 'library/**' only matches resources under 'library'. For more patterns, please refer to the user guide.",
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index d07c87094..fd2843a85 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -49,7 +49,8 @@
         "REPLICATE_SUCCESS": "Started successfully",
         "REPLICATE_FAILURE": "Started failed",
         "STOP_SUCCESS": "Stop successfully",
-        "STOP_FAILURE": "Stop execution failed"
+        "STOP_FAILURE": "Stop execution failed",
+        "TIME_OUT": "Gateway time-out"
     },
     "TOOLTIP": {
         "NAME_FILTER": "Filter the name of the resource. Leave empty or use '**' to match all. 'library/**' only matches resources under 'library'. For more patterns, please refer to the user guide.",
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index 2d68cc5b3..ee3ef3fd3 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -52,7 +52,8 @@
         "REPLICATE_SUCCESS": "Iniciado com sucesso",
         "REPLICATE_FAILURE": "Falha ao iniciar",
         "STOP_SUCCESS": "Stop successfully",
-        "STOP_FAILURE": "Stop execution failed"
+        "STOP_FAILURE": "Stop execution failed",
+        "TIME_OUT": "Gateway time-out"
     },
     "TOOLTIP": {
         "NAME_FILTER": "Filter the name of the resource. Leave empty or use '**' to match all. 'library/**' only matches resources under 'library'. For more patterns, please refer to the user guide.",
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index bcfa8e805..1fcef3535 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -52,7 +52,8 @@
         "REPLICATE_SUCCESS": "开始成功",
         "REPLICATE_FAILURE": "开始失败",
         "STOP_SUCCESS": "停止任务成功",
-        "STOP_FAILURE": "停止任务失败"
+        "STOP_FAILURE": "停止任务失败",
+        "TIME_OUT": "网关超时"
     },
     "TOOLTIP": {
         "NAME_FILTER": "过滤资源的名字。不填或者“”匹配所有资源；“library/”只匹配“library”下的资源。更多的匹配模式请参考用户手册。",