Change new and edit Replication page about pull and push mode.

1.disable the mode of pull and push when editing the replication;
2.delete src_namespaces
3.delete useless code
Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/lib/src/create-edit-rule/create-edit-rule.component.html

@@ -22,9 +22,9 @@
         <div class="form-group form-group-override">
           <label class="form-group-label-override">{{'REPLICATION.REPLI_MODE' | translate}}</label>
           <div class="radio" style="display:inherit;">
-            <input type="radio" id="push_base" name="replicationMode" [value]=true [(ngModel)]="isPushMode" (change)="modeChange()" [ngModelOptions]="{standalone: true}">
+            <input class="mode-base" type="radio" id="push_base" name="replicationMode" [value]=true  [disabled]="!(policyId<0)" [(ngModel)]="isPushMode" (change)="modeChange()" [ngModelOptions]="{standalone: true}">
             <label for="push_base">Push-based</label>
-            <input type="radio" id="pull_base" name="replicationMode" [value]=false [(ngModel)]="isPushMode" [ngModelOptions]="{standalone: true}">
+            <input class="mode-base" type="radio" id="pull_base" name="replicationMode" [value]=false [disabled]="!(policyId<0)" [(ngModel)]="isPushMode" [ngModelOptions]="{standalone: true}">
             <label for="pull_base">Pull-based</label>
           </div>
         </div>
@@ -33,7 +33,7 @@
           <label class="form-group-label-override  required">{{'REPLICATION.SOURCE_REGISTRY' | translate}}</label>
           <div class="form-select">
             <div class="select endpointSelect pull-left">
-              <select id="src_registry_id" (change)="sourceChange($event)" formControlName="src_registry" [compareWith]="equals">
+              <select id="src_registry_id" (change)="sourceChange($event)"  formControlName="src_registry" [compareWith]="equals">
                 <option *ngFor="let source of sourceList" [ngValue]="source">{{source.name}}-{{source.url}}</option>
               </select>
             </div>
@@ -41,22 +41,6 @@
           <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
           <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
         </div>
-        <!--source namespace -->
-        <div class="form-group form-group-override">
-          <label class="form-group-label-override  required">{{'REPLICATION.SOURCE_NAMESPACES' | translate}}</label>
-          <div formArrayName="src_namespaces">
-            <div class="width-315" *ngFor="let src_namespace of src_namespaces.controls; let i=index">
-              <div class="endpointSelect pull-left">
-                <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(src_namespace.touched && src_namespace.invalid)'>
-                  <input type="text" [formControlName]="i" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255">
-                  <span class="tooltip-content">{{'REPLICATION.NAMESPACE_TOOLTIP' | translate}}</span>
-                </label>
-              </div>
-              <clr-icon shape="times-circle" class="is-solid" (click)="deleteNamespace(i)"></clr-icon>
-            </div>
-          </div>
-          <clr-icon id="addSourceNamespace" shape="plus-circle" class="is-solid mr-t-10" (click)="addNewNamespace()"></clr-icon>
-        </div>
         <!--images/Filter-->
         <div class="form-group form-group-override">
           <label class="form-group-label-override">{{'REPLICATION.SOURCE_RESOURCE_FILTER' | translate}}</label>
@@ -81,13 +65,13 @@
           </div>
         </div>
         <!--destination registry-->
-        <div *ngIf="isPushMode" class="form-group form-group-override">
+        <div *ngIf="isPushMode"  class="form-group form-group-override">
           <label class="form-group-label-override  required">{{'REPLICATION.DEST_REGISTRY' | translate}}</label>
           <div class="form-select">
             <div class="select endpointSelect pull-left">
-              <select id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry"  [compareWith]="equals">
+                <select id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry"  [compareWith]="equals">
-                <option *ngFor="let target of targetList" [ngValue]="target">{{target.name}}-{{target.url}}</option>
+                    <option *ngFor="let target of targetList" [ngValue]="target">{{target.name}}-{{target.url}}</option>
-              </select>
+                  </select>
             </div>
           </div>
           <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
@@ -106,19 +90,20 @@
 
         <!--Trigger-->
         <div class="form-group form-group-override">
-          <label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
+          <label class="form-group-label-override required">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
           <div formGroupName="trigger">
             <!--on trigger-->
             <div class="select width-115">
-              <select id="ruleTrigger" formControlName="type" (change)="selectTrigger($event)">
+              <select id="ruleTrigger" formControlName="type">
                 <option *ngFor="let trigger of supportedTriggers" [value]="trigger">{{'REPLICATION.' + trigger.toUpperCase() | translate }}</option>
               </select>
             </div>
             <!--on push-->
             <div formGroupName="trigger_settings">
-              <div [hidden]="isNotSchedule()">
+              <div [hidden]="isNotSchedule()" class="form-group form-cron">
-                <label>Cron String</label>
+                <label class="required">Cron String</label>
-                <label for="targetCron" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right">
+                <label for="targetCron" aria-haspopup="true" role="tooltip"class="tooltip tooltip-validation tooltip-md tooltip-top-right"
+                [class.invalid]="!isNotSchedule() && cronTouched || !cronInputValid(ruleForm.value.trigger?.trigger_settings?.cron || '')" >
                   <input type="text" name=targetCron id="targetCron" required class="form-control cron-input" formControlName="cron">
                   <span class="tooltip-content">
                     {{'TOOLTIP.CRON_REQUIRED' | translate }}

src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss

@@ -241,4 +241,10 @@ clr-modal {
 
 .inline-block {
     display: inline-block;
-}
+}
+.form-cron {
+    padding-left:3.8rem;
+}
+.mode-base {
+    z-index: -1;
+}

src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts

@@ -31,9 +31,8 @@ import { ReplicationService } from "../service/replication.service";
 import { ErrorHandler } from "../error-handler/error-handler";
 import { TranslateService } from "@ngx-translate/core";
 import { EndpointService } from "../service/endpoint.service";
+import { cronRegex } from "../utils";
 
-const ONE_HOUR_SECONDS = 3600;
-const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS;
 
 @Component({
   selector: "hbr-create-edit-rule",
@@ -41,16 +40,11 @@ const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS;
   styleUrls: ["./create-edit-rule.component.scss"]
 })
 export class CreateEditRuleComponent implements OnInit, OnDestroy {
-  _localTime: Date = new Date();
   sourceList: Endpoint[] = [];
   targetList: Endpoint[] = [];
-  isFilterHide = false;
-  weeklySchedule: boolean;
   noEndpointInfo = "";
   isPushMode = true;
   noSelectedEndpoint = true;
-  filterCount = 0;
-  alertClosed = false;
   TRIGGER_TYPES = {
     MANUAL: "manual",
     SCHEDULED: "scheduled",
@@ -61,12 +55,10 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
   headerTitle = "REPLICATION.ADD_POLICY";
 
   createEditRuleOpened: boolean;
-  filterListData: { [key: string]: any }[] = [];
   inProgress = false;
   inNameChecking = false;
   isRuleNameValid = true;
   nameChecker: Subject<string> = new Subject<string>();
-  firstClick = 0;
   policyId: number;
   confirmSub: Subscription;
   ruleForm: FormGroup;
@@ -139,13 +131,11 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
   equals(c1: any, c2: any): boolean {
     return c1 && c2 ? c1.id === c2.id : c1 === c2;
   }
-
   modeChange(): void {
     this.setFilter([]);
     this.initRegistryInfo(0);
   }
 
-
   sourceChange($event): void {
     this.noSelectedEndpoint = false;
     let selectId = this.ruleForm.get('src_registry').value;
@@ -161,18 +151,20 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
       this.nameChecker.unsubscribe();
     }
   }
-  get src_namespaces(): FormArray { return this.ruleForm.get('src_namespaces') as FormArray; }
 
   get isValid() {
-    let controlName = this.ruleForm.controls["name"].invalid;
+    let controlName = !!this.ruleForm.controls["name"].value;
-    let controlSrcNamespace = this.ruleForm.controls["src_namespaces"].invalid;
+    let sourceRegistry = !!this.ruleForm.controls["src_registry"].value;
-    return !(
+    let destRegistry = !!this.ruleForm.controls["dest_registry"].value;
-      controlName ||
+    let triggerMode = !!this.ruleForm.controls["trigger"].value.type;
-      controlSrcNamespace ||
+    let cron = !!this.ruleForm.value.trigger.trigger_settings.cron;
+    return !(!controlName ||
+      !triggerMode ||
       !this.isRuleNameValid ||
-      this.noSelectedEndpoint ||
+      (!this.isPushMode && !sourceRegistry ||
-      this.inProgress
+        this.isPushMode && !destRegistry)
-    );
+      || !(!this.isNotSchedule() && cron && this.cronInputValid(this.ruleForm.value.trigger.trigger_settings.cron || '')
+        || this.isNotSchedule()));
   }
 
   createForm() {
@@ -180,7 +172,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
       name: ["", Validators.required],
       description: "",
       src_registry: new FormControl(),
-      src_namespaces: new FormArray([new FormControl('')], Validators.required),
       dest_registry: new FormControl(),
       dest_namespace: "",
       trigger: this.fb.group({
@@ -196,9 +187,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
     });
   }
 
-  selectTrigger($event: any): void {
-
-  }
 
   isNotSchedule(): boolean {
     return this.ruleForm.get("trigger").get("type").value !== this.TRIGGER_TYPES.SCHEDULED;
@@ -225,25 +213,17 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
     this.isPushMode = true;
   }
 
-  initForm(): void {
-    this.formReset();
-    this.setFilter([]);
-    this.initRegistryInfo(0);
-    this.copyUpdateForm = clone(this.ruleForm.value);
-  }
 
-  updateForm(rule: ReplicationRule): void {
+  updateRuleFormAndCopyUpdateForm(rule: ReplicationRule): void {
     if (rule.dest_registry.id === 0) {
       this.isPushMode = false;
     } else {
       this.isPushMode = true;
     }
-
     setTimeout(() => {
       this.ruleForm.reset({
         name: rule.name,
         description: rule.description,
-        src_namespaces: rule.src_namespaces,
         dest_namespace: rule.dest_namespace,
         src_registry: rule.src_registry,
         dest_registry: rule.dest_registry,
@@ -252,26 +232,15 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
         enabled: rule.enabled,
         override: rule.override
       });
-      // reset the filter list.
+      let filtersArray = this.getFilterArray(rule);
-      let filters = [];
-      for (let i = 0; i < this.supportedFilters.length; i++) {
-        let findTag: boolean = false;
-        if (rule.filters) {
-          rule.filters.forEach((ruleItem, j) => {
-            if (this.supportedFilters[i].type === ruleItem.type) {
-              filters.push(ruleItem);
-              findTag = true;
-            }
-          });
-        }
-        if (!findTag) {
-          filters.push({ type: this.supportedFilters[i].type, value: "" });
-        }
-
-      }
 
       this.noSelectedEndpoint = false;
-      this.setFilter(filters);
+      this.setFilter(filtersArray);
+      this.copyUpdateForm = clone(this.ruleForm.value);
+      // keep trigger same value
+      this.copyUpdateForm.trigger = clone(rule.trigger);
+      this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters;
+      // set filter value is [] if callback filter value is null.
     }, 100);
     // end of reset the filter list.
   }
@@ -302,28 +271,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
     }
   }
 
-  focusClear($event: any): void {
-    if (this.policyId < 0 && this.firstClick === 0) {
-      if ($event && $event.target && $event.target["value"]) {
-        $event.target["value"] = "";
-      }
-      this.firstClick++;
-    }
-  }
-
-  addNewNamespace(): void {
-    this.src_namespaces.push(new FormControl());
-  }
-
-  deleteNamespace(index: number): void {
-    this.src_namespaces.removeAt(index);
-  }
-
-  // Replication Schedule select value exchange
-  selectSchedule($event: any): void {
-
-  }
-
   checkRuleName(): void {
     let ruleName: string = this.ruleForm.controls["name"].value;
     if (ruleName) {
@@ -338,6 +285,9 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
   }
 
   onSubmit() {
+    if (this.ruleForm.value.trigger.type !== 'scheduled') {
+      this.ruleForm.get("trigger").get("trigger_settings").get('cron').setValue('');
+    }
     // add new Replication rule
     this.inProgress = true;
     let copyRuleForm: ReplicationRule = this.ruleForm.value;
@@ -363,6 +313,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
             .subscribe(res => this.errorHandler.info(res));
           this.inProgress = false;
           this.reload.emit(true);
+          this.createForm();
           this.close();
         }, (error: any) => {
           this.inProgress = false;
@@ -384,19 +335,13 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
         });
     }
   }
-
   openCreateEditRule(ruleId?: number | string): void {
     this.formReset();
     this.copyUpdateForm = clone(this.ruleForm.value);
     this.inlineAlert.close();
-    this.filterCount = 0;
-    this.isFilterHide = false;
-    this.filterListData = [];
-    this.firstClick = 0;
     this.noSelectedEndpoint = true;
     this.isRuleNameValid = true;
 
-    this.weeklySchedule = false;
     this.policyId = -1;
     this.createEditRuleOpened = true;
     this.noEndpointInfo = "";
@@ -412,21 +357,19 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
           this.repService.getRegistryInfo(srcRegistryId)
             .subscribe(adapter => {
               this.setFilterAndTrigger(adapter);
-              this.copyUpdateForm = clone(ruleInfo);
+              this.updateRuleFormAndCopyUpdateForm(ruleInfo);
-              // keep trigger same value
+            }, (error: any) => {
-              this.copyUpdateForm.trigger = clone(ruleInfo.trigger);
+              this.inlineAlert.showInlineError(error);
-              this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters;
+            });
-              // set filter value is [] if callback filter value is null.
-              this.updateForm(ruleInfo);
-          }, (error: any) => {
-            this.inlineAlert.showInlineError(error);
-          });
         }, (error: any) => {
           this.inlineAlert.showInlineError(error);
         });
     } else {
       let registryObs = this.repService.getRegistryInfo(0);
-      registryObs.subscribe(adapter => { this.setFilterAndTrigger(adapter); });
+      registryObs.subscribe(adapter => {
+        this.setFilterAndTrigger(adapter);
+        this.copyUpdateForm = clone(this.ruleForm.value);
+      });
       this.headerTitle = "REPLICATION.ADD_POLICY";
       this.copyUpdateForm = clone(this.ruleForm.value);
     }
@@ -449,6 +392,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
 
   confirmCancel(confirmed: boolean) {
     this.inlineAlert.close();
+    this.createForm();
     this.close();
   }
 
@@ -458,6 +402,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
         message: "ALERT.FORM_CHANGE_CONFIRMATION"
       });
     } else {
+      this.createForm();
       this.close();
     }
   }
@@ -479,4 +424,41 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
     }
     return false;
   }
+
+
+  getFilterArray(rule): Array<any> {
+    let filtersArray = [];
+    for (let i = 0; i < this.supportedFilters.length; i++) {
+      let findTag: boolean = false;
+      if (rule.filters) {
+        rule.filters.forEach((ruleItem) => {
+          if (this.supportedFilters[i].type === ruleItem.type) {
+            filtersArray.push(ruleItem);
+            findTag = true;
+          }
+        });
+      }
+
+      if (!findTag) {
+        filtersArray.push({ type: this.supportedFilters[i].type, value: "" });
+      }
+
+    }
+    return filtersArray;
+  }
+  cronInputValid(cronValue): boolean {
+    return cronRegex(cronValue);
+  }
+  get cronTouched(): boolean {
+    let triggerControl = this.ruleForm.controls.trigger as FormGroup;
+    if (!triggerControl) {
+      return false;
+    }
+    let trigger_settingsControls = triggerControl.controls.trigger_settings as FormGroup;
+    if (!trigger_settingsControls) {
+      return false;
+    }
+    return trigger_settingsControls.controls.cron.touched && trigger_settingsControls.controls.cron.dirty
+      && !trigger_settingsControls.controls.cron.value;
+  }
 }

src/portal/lib/src/service/replication.service.ts

@@ -232,7 +232,6 @@ export class ReplicationDefaultService extends ReplicationService {
       rule != null &&
       rule.name !== undefined &&
       rule.name.trim() !== "" &&
-      rule.src_namespaces && rule.src_namespaces.length > 0 &&
       (!!rule.dest_registry || !!rule.src_registry)
     );
   }