Merge pull request #7404 from jwangyangls/replication_C

In add or edit replication page ,disable the mode of pull and push when editing the replication and delete src_namespaces and delete useless code and add a validate content that when I choose scheduled, the cron field is mandatory.
2024-11-20 09:15:19 +01:00 · 2019-04-17 19:11:46 +08:00 · 2019-04-17 19:11:46 +08:00 · eb00c9cb70
commit eb00c9cb70
parent 4ca482d6d2 8f152392b5
4 changed files with 91 additions and 119 deletions
--- 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
@ -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>
@ -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>
@ -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()">
-                <label>Cron String</label>
-                <label for="targetCron" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right">
+              <div [hidden]="isNotSchedule()" class="form-group form-cron">
+                <label class="required">Cron String</label>
+                <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 }}
--- 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
@ -242,3 +242,9 @@ clr-modal {
 .inline-block {
    display: inline-block;
 }
+.form-cron {
+    padding-left:3.8rem;
+}
+.mode-base {
+    z-index: -1;
+}
--- 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
@ -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 controlSrcNamespace = this.ruleForm.controls["src_namespaces"].invalid;
-    return !(
-      controlName ||
-      controlSrcNamespace ||
+    let controlName = !!this.ruleForm.controls["name"].value;
+    let sourceRegistry = !!this.ruleForm.controls["src_registry"].value;
+    let destRegistry = !!this.ruleForm.controls["dest_registry"].value;
+    let triggerMode = !!this.ruleForm.controls["trigger"].value.type;
+    let cron = !!this.ruleForm.value.trigger.trigger_settings.cron;
+    return !(!controlName ||
+      !triggerMode ||
      !this.isRuleNameValid ||
-      this.noSelectedEndpoint ||
-      this.inProgress
-    );
+      (!this.isPushMode && !sourceRegistry ||
+        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 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: "" });
-        }
-
-      }
+      let filtersArray = this.getFilterArray(rule);

      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,12 +357,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
          this.repService.getRegistryInfo(srcRegistryId)
            .subscribe(adapter => {
              this.setFilterAndTrigger(adapter);
-              this.copyUpdateForm = clone(ruleInfo);
-              // keep trigger same value
-              this.copyUpdateForm.trigger = clone(ruleInfo.trigger);
-              this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters;
-              // set filter value is [] if callback filter value is null.
-              this.updateForm(ruleInfo);
+              this.updateRuleFormAndCopyUpdateForm(ruleInfo);
            }, (error: any) => {
              this.inlineAlert.showInlineError(error);
            });
@ -426,7 +366,10 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
        });
    } 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;
+  }
 }
--- a/src/portal/lib/src/service/replication.service.ts
+++ b/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)
    );
  }