Merge pull request #13496 from AllForNothing/rep-cron

Improve adding replication rule page

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

@@ -1,7 +1,7 @@
 <clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
   <h3 class="modal-title">{{headerTitle | translate}}</h3>
-  <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
   <div class="modal-body modal-body-height">
+    <hbr-inline-alert (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
     <form [formGroup]="ruleForm" novalidate class="clr-form clr-form-horizontal">
       <div class="clr-form-control" [class.clr-error]="(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid">
         <label class="clr-control-label required">{{'REPLICATION.NAME' | translate}}</label>
@@ -171,7 +171,7 @@
           <div formGroupName="trigger">
             <!--on trigger-->
             <div class="select width-115 clr-select-wrapper">
-              <select id="ruleTrigger" formControlName="type" class="clr-select">
+              <select (change)="changeTrigger($event)" id="ruleTrigger" formControlName="type" class="clr-select">
                 <option *ngFor="let trigger of supportedTriggers" [value]="trigger">{{'REPLICATION.' + trigger.toUpperCase() | translate }}</option>
               </select>
             </div>
@@ -180,7 +180,7 @@
                 <label class="required">Cron String</label>
                 <label for="targetCron" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-sm 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 clr-input" formControlName="cron">
+                  <input (input)="inputInvalid($event)" type="text" name=targetCron id="targetCron" required class="form-control cron-input clr-input" formControlName="cron">
                   <span class="tooltip-content">
                     {{'TOOLTIP.CRON_REQUIRED' | translate }}
                   </span>

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

@@ -283,13 +283,4 @@ clr-modal {
 .select-width {
     min-width:11rem;
 }
-::ng-deep {
+
-    .modal-title {
-      padding-bottom: 0;
-    }
-    .modal-header {
-      .modal-title {
-        padding: 0;
-      }
-    }
-  }

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

@@ -34,7 +34,7 @@ import { EndpointService } from "../../services/endpoint.service";
 import { cronRegex } from "../../utils/utils";
 import { FilterType } from "../../entities/shared.const";
 
-
+const PREFIX: string = '0 ';
 @Component({
   selector: "hbr-create-edit-rule",
   templateUrl: "./create-edit-rule.component.html",
@@ -576,4 +576,22 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
 
     fromIndex.setControl('value', this.fb.array(labelValue));
   }
+  // set prefix '0 ', so user can not set item of 'seconds'
+  inputInvalid(e: any) {
+    if (this.headerTitle === 'REPLICATION.ADD_POLICY') { // adding model
+      if (e && e.target) {
+        if (!e.target.value || (e.target.value && e.target.value.indexOf(PREFIX)) !== 0) {
+          e.target.value = PREFIX;
+        }
+      }
+    }
+  }
+  // when trigger type is scheduled, should set cron prefix to '0 '
+  changeTrigger(e: any) {
+    if (this.headerTitle === 'REPLICATION.ADD_POLICY') { // adding model
+      if (e && e.target && e.target.value === this.TRIGGER_TYPES.SCHEDULED) {
+        this.ruleForm.get('trigger').get('trigger_settings').get('cron').setValue(PREFIX);
+      }
+    }
+  }
 }

src/portal/src/lib/components/inline-alert/inline-alert.component.scss

@@ -8,6 +8,7 @@
   }
   .alert-item {
     text-align: center;
+    align-items: center;
 }
 :host >>> .alert-icon-wrapper{
     display: inline;