Add tooltip for cron string

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

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

@@ -109,8 +109,11 @@
           <label class="form-group-label-override">{{'REPLICATION.DEST_NAMESPACE' | translate}}</label>
           <div class="form-select">
             <div class="endpointSelect pull-left">
-              <input formControlName="dest_namespace" type="text" id="dest_namespace" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth"
+              <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='ruleForm.controls.dest_namespace.touched && ruleForm.controls.dest_namespace.invalid'>
+                <input formControlName="dest_namespace" type="text" id="dest_namespace" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth"
                 maxlength="255">
+                <span class="tooltip-content">{{'REPLICATION.DESTINATION_NAME_TOOLTIP' | translate}}</span>
+              </label>
             </div>
             <clr-tooltip>
               <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
@@ -142,6 +145,62 @@
                     {{'TOOLTIP.CRON_REQUIRED' | translate }}
                   </span>
                 </label>
+                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-left top-7 cron-tooltip">
+                    <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+                    <table class="table table-noborder tooltip-content table-style">
+                        <caption class="table-title">
+                          <span>
+                            {{ 'REPLICATION.CRON-TITLE' | translate }}              
+                          </span>
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
+                                <th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
+                                <th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
+                                <th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>{{'REPLICATION.SECONDS' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>0-59</td>
+                                <td>* / , -</td>
+                            </tr>
+                            <tr>
+                                <td>{{'REPLICATION.MINUTES' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>0-59</td>
+                                <td>* / , -</td>
+                            </tr>
+                            <tr>
+                                <td>{{'REPLICATION.HOURS' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>0-23</td>
+                                <td>* / , -</td>
+                            </tr>
+                            <tr>
+                                <td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>1-31</td>
+                                <td>* / , - ?</td>
+                            </tr>
+                            <tr>
+                                <td>{{'REPLICATION.MONTH' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>1-12 or JAN-DEC</td>
+                                <td>* / , -</td>
+                            </tr>
+                            <tr>
+                                <td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
+                                <td>{{'REPLICATION.YES' | translate}}</td>
+                                <td>0-6 or SUN-SAT</td>
+                                <td>* / , - ?</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </a>
               </div>
             </div>
           </div>

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

@@ -257,3 +257,23 @@ clr-modal {
 .spinner-position {
     left: 25%;
 }
+
+.cron-tooltip {
+    color: gray;
+    cursor: default;
+    .table-style {
+        margin-right: 462px;
+        width: 20rem;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        .table-title {
+            border-top-left-radius: 0.125rem;
+            border-top-right-radius: 0.125rem;
+            background: #000;
+            color: #fff;
+            span {
+               font-size: 16px;
+            }
+        }
+    }
+}

src/portal/src/i18n/lang/en-us-lang.json

@@ -359,6 +359,18 @@
         "OF": "of"
     },
     "REPLICATION": {
+        "YES": "Yes",
+        "SECONDS": "Seconds",
+        "MINUTES": "Minutes",
+        "HOURS": "Hours",
+        "MONTH": "Month",
+        "DAY_MONTH": "Day of month",
+        "DAY_WEEK": "Day of week",
+        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "FIELD_NAME": "Field name",
+        "MANDATORY": "Mandatory?",
+        "ALLOWED_VALUES": "Allowed values",
+        "ALLOWED_CHARACTERS": "Allowed special characters",
         "TOTAL": "Total",
         "OVERRIDE": "Override",
         "ENABLED_RULE": "Enable rule",
@@ -483,6 +495,7 @@
         "REPLICATE_IMMEDIATE": "Replicate existing images immediately",
         "NEW": "New",
         "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
+        "DESTINATION_NAME_TOOLTIP": "Destination name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "ACKNOWLEDGE": "Acknowledge",
         "RULE_DISABLED": "This rule has been disabled because a label used in its filter has been deleted. \n Edit the rule and update its filter to enable it.",
         "REPLI_MODE": "Replication mode",

src/portal/src/i18n/lang/es-es-lang.json

@@ -200,6 +200,7 @@
         "PROJECT": "Proyecto",
         "NEW_PROJECT": "Nuevo proyecto",
         "NAME_TOOLTIP": "Project name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
+        "DESTINATION_NAME_TOOLTIP": "Destination name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "NAME_IS_REQUIRED": "El nombre del proyecto es obligatorio.",
         "NAME_MINIMUM_LENGTH": "El nombre del proyecto es demasiado corto, debe ser mayor de 2 caracteres.",
         "NAME_ALREADY_EXISTS": "Ya existe un proyecto con ese nombre.",
@@ -358,6 +359,18 @@
         "OF": "of"
     },
     "REPLICATION": {
+        "YES": "Yes",
+        "SECONDS": "Seconds",
+        "MINUTES": "Minutes",
+        "HOURS": "Hours",
+        "MONTH": "Month",
+        "DAY_MONTH": "Day of month",
+        "DAY_WEEK": "Day of week",
+        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "FIELD_NAME": "Field name",
+        "MANDATORY": "Mandatory?",
+        "ALLOWED_VALUES": "Allowed values",
+        "ALLOWED_CHARACTERS": "Allowed special characters",
         "TOTAL": "Total",
         "OVERRIDE": "Override",
         "ENABLED_RULE": "Enable rule",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -351,6 +351,18 @@
         "OF": "de"
     },
     "REPLICATION": {
+        "YES": "Yes",
+        "SECONDS": "Seconds",
+        "MINUTES": "Minutes",
+        "HOURS": "Hours",
+        "MONTH": "Month",
+        "DAY_MONTH": "Day of month",
+        "DAY_WEEK": "Day of week",
+        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "FIELD_NAME": "Field name",
+        "MANDATORY": "Mandatory?",
+        "ALLOWED_VALUES": "Allowed values",
+        "ALLOWED_CHARACTERS": "Allowed special characters",
         "TOTAL": "Total",
         "OVERRIDE": "Override",
         "ENABLED_RULE": "Enable rule",
@@ -473,6 +485,7 @@
         "REPLICATE_IMMEDIATE": "Replicate existing images immediately",
         "NEW": "New",
         "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
+        "DESTINATION_NAME_TOOLTIP": "Destination name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "ACKNOWLEDGE": "Acknowledge",
         "RULE_DISABLED": "This rule has been disabled because a label used in its filter has been deleted. \n Edit the rule and update its filter to enable it.",
         "REPLI_MODE": "Replication mode",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -357,6 +357,18 @@
         "OF": "de"
     },
     "REPLICATION": {
+        "YES": "Yes",
+        "SECONDS": "Seconds",
+        "MINUTES": "Minutes",
+        "HOURS": "Hours",
+        "MONTH": "Month",
+        "DAY_MONTH": "Day of month",
+        "DAY_WEEK": "Day of week",
+        "CRON-TITLE": "Pattern description for cron '* * * * * *'",
+        "FIELD_NAME": "Field name",
+        "MANDATORY": "Mandatory?",
+        "ALLOWED_VALUES": "Allowed values",
+        "ALLOWED_CHARACTERS": "Allowed special characters",
         "TOTAL": "Total",
         "OVERRIDE": "Override",
         "ENABLED_RULE": "Enable rule",
@@ -483,6 +495,7 @@
         "REPLICATE_IMMEDIATE":"Replicar imagens existentes imediatamente",
         "NEW": "Novo",
         "NAME_TOOLTIP": "nome da regra de replicação deve conter ao menos 2 caracteres sendo caracteres minusculos, números e  ._- e devem iniciar com letras e números.",
+        "DESTINATION_NAME_TOOLTIP": "Destination name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.",
         "ACKNOWLEDGE": "Reconhecer",
         "RULE_DISABLED": "Essa regra foi desabilitada pois uma label usada no seu filtro foi removida. \n Edite a regra e atualize seu filtro para habilitá-la.",
         "REPLI_MODE": "Replication mode",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -358,6 +358,18 @@
         "OF": "共计"
     },
     "REPLICATION": {
+        "YES": "是",
+        "SECONDS": "秒",
+        "MINUTES": "分钟",
+        "HOURS": "小时",
+        "MONTH": "月",
+        "DAY_MONTH": "一个月的一天",
+        "DAY_WEEK": "一周的一天",
+        "CRON-TITLE": "cron格式描述 '* * * * * *'",
+        "FIELD_NAME": "字段名称",
+        "MANDATORY": "是否强制?",
+        "ALLOWED_VALUES": "允许的值",
+        "ALLOWED_CHARACTERS": "允许的特殊字符",
         "TOTAL": "总数",
         "OVERRIDE": "覆盖",
         "ENABLED_RULE": "启用规则",
@@ -484,6 +496,7 @@
         "REPLICATE_IMMEDIATE": "立即同步现有的镜像。",
         "NEW": "新增",
         "NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。",
+        "DESTINATION_NAME_TOOLTIP": "目标名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。",
         "ACKNOWLEDGE": "确认",
         "RULE_DISABLED": "这个规则因为过滤选项中的标签被删除已经不能用了，更新过滤项以便重新启用规则。",
         "REPLI_MODE": "同步模式",