From b9dbe429be18e235e410997e99fef6ac037f59c9 Mon Sep 17 00:00:00 2001
From: Ziming Zhang <zziming@vmware.com>
Date: Wed, 12 Jun 2019 15:46:21 +0800
Subject: [PATCH] ui change:gcr/ecr driver for replication

Change-Id: I52aa3a35da898d2501b09ff90b5a65169a6d54ed
Signed-off-by: Ziming Zhang <zziming@vmware.com>
---
 .../create-edit-endpoint.component.html       |  26 +++--
 .../create-edit-endpoint.component.scss       |   3 +
 .../create-edit-endpoint.component.ts         | 106 +++++++++++++++++-
 3 files changed, 123 insertions(+), 12 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 4d34a34c7..09cf43c3a 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
@@ -44,11 +44,15 @@
         <div class="form-group">
           <label for="destination_url" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.URL' |
             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 || 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)">
+          <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 *ngIf="!endpointList.length" 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">
+            <select *ngIf="endpointList.length" [(ngModel)]="target.url" name="endpointUrl" #targetEndpoint="ngModel">
+              <option class="display-none" value=""></option>
+              <option *ngFor="let endpoint of endpointList" value="{{endpoint.value}}">{{endpoint.key}}</option>
+            </select>
+            <span class="tooltip-content" *ngIf="targetEndpoint?.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
               {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
             </span>
           </label>
@@ -57,15 +61,19 @@
         <div class="form-group">
           <label for="destination_access_key" class="col-md-4 form-group-label-override">{{ 'DESTINATION.ACCESS_ID' |
             translate }}</label>
-          <input type="text" placeholder="Access ID" class="col-md-8" id="destination_access_key" [disabled]="testOngoing" [readonly]="!editable"
+          <input type="text" placeholder="Access ID" class="col-md-8" id="destination_access_key" [disabled]="testOngoing" [readonly]="target.type ==='google-gcr' || !editable"
             [(ngModel)]="target.credential.access_key" size="28" name="access_key" #access_key="ngModel">
         </div>
         <!-- access_secret -->
         <div class="form-group">
           <label for="destination_password" class="col-md-4 form-group-label-override">{{ 'DESTINATION.ACCESS_SECRET' |
             translate }}</label>
-          <input type="password" placeholder="Access Secret" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable"
-            [(ngModel)]="target.credential.access_secret" size="28" name="access_secret" #access_secret="ngModel">
+          <input *ngIf="target.type !=='google-gcr';else gcr_secret" type="password" placeholder="Access Secret" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable"
+                 [(ngModel)]="target.credential.access_secret" size="28" name="access_secret" #access_secret="ngModel">
+          <ng-template #gcr_secret>
+            <textarea type="text" row="3" placeholder="Json Secret" class="inputWidth" id="destination_password" [disabled]="testOngoing" [readonly]="!editable"
+                      [(ngModel)]="target.credential.access_secret" name="access_secret" #access_secret="ngModel"></textarea>
+          </ng-template>
         </div>
         <!-- Verify Remote Cert -->
         <div class="form-group">
@@ -88,7 +96,7 @@
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || targetEndpoint.errors">{{
+    <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || (targetEndpoint?.errors)">{{
       'DESTINATION.TEST_CONNECTION' | translate }}</button>
     <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="inProgress">{{ 'BUTTON.CANCEL' |
       translate }}</button>
diff --git a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss
index bada17ade..08a677981 100644
--- a/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss
+++ b/src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss
@@ -15,3 +15,6 @@
   .inputWidth {
     width: 216px;
   }
+  .display-none {
+    display: none
+  }
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 19cdb38e8..7d6daa5b7 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
@@ -32,6 +32,7 @@ import { Endpoint, PingEndpoint } from "../service/interface";
 import { clone, compareValue, isEmptyObject } from "../utils";
 
 const FAKE_PASSWORD = "rjGcfuRu";
+const FAKE_JSON_KEY = "No Change";
 const DOCKERHUB_URL = "https://hub.docker.com";
 @Component({
   selector: "hbr-create-edit-endpoint",
@@ -49,12 +50,13 @@ export class CreateEditEndpointComponent
   closable: boolean = false;
   editable: boolean;
   adapterList: string[];
+  endpointList: object[] = [];
   target: Endpoint = this.initEndpoint();
   selectedType: string;
   initVal: Endpoint;
   targetForm: NgForm;
   @ViewChild("targetForm") currentForm: NgForm;
-
+  targetEndpoint;
   testOngoing: boolean;
   onGoing: boolean;
   endpointId: number | string;
@@ -188,8 +190,8 @@ export class CreateEditEndpointComponent
           this.urlDisabled = this.target.type === 'docker-hub' ? true : false;
           // Keep data cache
           this.initVal = clone(target);
-          this.initVal.credential.access_secret = FAKE_PASSWORD;
-          this.target.credential.access_secret = FAKE_PASSWORD;
+          this.initVal.credential.access_secret = this.target.type === 'google-gcr' ? FAKE_JSON_KEY : FAKE_PASSWORD;
+          this.target.credential.access_secret = this.target.type === 'google-gcr' ? FAKE_JSON_KEY : FAKE_PASSWORD;
 
           // Open the modal now
           this.open();
@@ -219,6 +221,104 @@ export class CreateEditEndpointComponent
       this.urlDisabled = false;
       this.targetForm.controls.endpointUrl.setValue("");
     }
+    if (selectValue === 'google-gcr') {
+      this.targetForm.controls.access_key.setValue("_json_key");
+    } else {
+      this.targetForm.controls.access_key.setValue("");
+    }
+    if (selectValue === 'google-gcr') {
+      this.endpointList = [
+        {
+          key: "gcr.io",
+          value: "https://gcr.io"
+        },
+        {
+          key: "us.gcr.io",
+          value: "https://us.gcr.io"
+        },
+        {
+          key: "eu.gcr.io",
+          value: "https://eu.gcr.io"
+        },
+        {
+          key: "asia.gcr.io",
+          value: "https://asia.gcr.io"
+        }
+      ];
+    } else if (selectValue === 'aws-ecr') {
+      this.endpointList = [
+        {
+          key: "ap-northeast-1",
+          value: "https://api.ecr.ap-northeast-1.amazonaws.com"
+        },
+        {
+          key: "us-east-1",
+          value: "https://api.ecr.us-east-1.amazonaws.com"
+        },
+        {
+          key: "us-east-2",
+          value: "https://api.ecr.us-east-2.amazonaws.com"
+        },
+        {
+          key: "us-west-1",
+          value: "https://api.ecr.us-west-1.amazonaws.com"
+        },
+        {
+          key: "us-west-2",
+          value: "https://api.ecr.us-west-2.amazonaws.com"
+        },
+        {
+          key: "ap-east-1",
+          value: "https://api.ecr.ap-east-1.amazonaws.com"
+        },
+        {
+          key: "ap-south-1",
+          value: "https://api.ecr.ap-south-1.amazonaws.com"
+        },
+        {
+          key: "ap-northeast-2",
+          value: "https://api.ecr.ap-northeast-2.amazonaws.com"
+        },
+        {
+          key: "ap-southeast-1",
+          value: "https://api.ecr.ap-southeast-1.amazonaws.com"
+        },
+        {
+          key: "ap-southeast-2",
+          value: "https://api.ecr.ap-southeast-2.amazonaws.com"
+        },
+        {
+          key: "ca-central-1",
+          value: "https://api.ecr.ca-central-1.amazonaws.com"
+        },
+        {
+          key: "eu-central-1",
+          value: "https://api.ecr.eu-central-1.amazonaws.com"
+        },
+        {
+          key: "eu-west-1",
+          value: "https://api.ecr.eu-west-1.amazonaws.com"
+        },
+        {
+          key: "eu-west-2",
+          value: "https://api.ecr.eu-west-2.amazonaws.com"
+        },
+        {
+          key: "eu-west-3",
+          value: "https://api.ecr.eu-west-3.amazonaws.com"
+        },
+        {
+          key: "eu-north-1",
+          value: "https://api.ecr.eu-north-1.amazonaws.com"
+        },
+        {
+          key: "sa-east-1",
+          value: "https://api.ecr.sa-east-1.amazonaws.com"
+        }
+      ];
+    } else {
+      this.endpointList = [];
+    }
   }
 
   testConnection() {