Add tooltip for cron string

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>
2024-12-19 15:17:43 +01:00 · 2019-04-29 17:21:46 +08:00 · 2019-04-29 17:21:46 +08:00 · 73e6b8cf56
commit 73e6b8cf56
parent cceb624fc2
7 changed files with 145 additions and 1 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
@ -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>
--- 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
@ -256,4 +256,24 @@ 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;
+            }
+        }
+    }
 }
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/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",
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/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",
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/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",
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/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",
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/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": "同步模式",