UI add parameter validate error message when create watch point

mindinsight/ui/src/locales/en-us.json

@@ -594,8 +594,6 @@
       "range_percentage_lt": "Percentage of the value in the range <",
       "range_percentage_gt": "Percentage of the value in the range >",
       "rtol": "Relative tolerance",
-      "abs_update_ratio_mean_gt": "Average of the absolute value of the change ratio >",
-      "abs_update_ratio_mean_lt": "Average of the absolute value of the change ratio <",
       "abs_mean_update_ratio_gt": "Ratio of mean update >",
       "abs_mean_update_ratio_lt": "Ratio of mean update <",
       "param": "Threshold",

mindinsight/ui/src/locales/zh-cn.json

@@ -593,8 +593,6 @@
       "range_percentage_lt": "在范围中的值所占百分比<",
       "range_percentage_gt": "在范围中的值所占百分比>",
       "rtol": "相对容忍度",
-      "abs_update_ratio_mean_gt": "变化比例绝对值的平均值>",
-      "abs_update_ratio_mean_lt": "变化比例绝对值的平均值<",
       "abs_mean_update_ratio_gt": "平均变化比例值>",
       "abs_mean_update_ratio_lt": "平均变化比例值<",
       "param": "阈值",
@@ -741,7 +739,20 @@
       "no_prev_tensor": "找不到上一个迭代的值，",
       "cannotCheck": "无法检查。"
     },
-    "sendingTip": "等待训练响应，请稍候。"
+    "stateTips": {
+      "running": "运行中",
+      "sending": "等待执行"
+    },
+    "stateMsg": {
+      "running": "训练运行中",
+      "sending": "等待命令执行，请稍候"
+    },
+    "paramErrorMsg": {
+      "errorType": "请输入数值",
+      "percentError": "百分数值不能小于0或大于100",
+      "rangeError": "范围下界值不能大于上界值",
+      "nonnegative": "此参数值不能小于0"
+    }
   },
   "explain": {
     "explain": "模型解释",

mindinsight/ui/src/mixins/debugger-mixin.vue

@@ -577,6 +577,7 @@ export default {
      * Add watchpoint
      */
     addWatchPoint() {
+      this.paramErrorMsg = this.$t('debugger.paramErrorMsg.errorType');
       this.createWatchPointArr = [];
       this.createWatchPointArr.push({
         collection: {
@@ -645,12 +646,56 @@ export default {
       }
     },
     validateParam(item) {
-      this.$forceUpdate();
       const reg = /^(\-|\+)?\d+(\.\d+)?$/;
       this.validPram = reg.test(item.param.value);
       item.compositeParams.selections.forEach((i) => {
         this.validPram = this.validPram && reg.test(i.value);
       });
+      if (!this.validPram) {
+        this.paramErrorMsg = this.$t('debugger.paramErrorMsg.errorType');
+      } else {
+        this.paramErrorMsg = '';
+        item.param.value = parseFloat(item.param.value);
+
+        const absParams = [
+          'abs_mean_gt',
+          'abs_mean_lt',
+          'rtol',
+          'abs_mean_update_ratio_gt',
+          'abs_mean_update_ratio_lt',
+        ];
+
+        if (absParams.includes(item.param.name) && item.param.value < 0) {
+          this.validPram = false;
+          this.paramErrorMsg = this.$t('debugger.paramErrorMsg.nonnegative');
+        }
+
+        if (this.percentParams.includes(item.param.name)) {
+          const percentRange = {min: 0, max: 100};
+          if (item.param.value < percentRange.min || item.param.value > percentRange.max) {
+            this.validPram = false;
+            this.paramErrorMsg = this.$t('debugger.paramErrorMsg.percentError');
+          }
+        }
+        if (this.validPram && item.compositeParams.selections.length) {
+          const rangeKey = ['range_start_inclusive', 'range_end_inclusive'];
+          const rangeStart = item.compositeParams.selections.filter((i) => {
+            return i.name === rangeKey[0];
+          });
+          const rangeEnd = item.compositeParams.selections.filter((i) => {
+            return i.name === rangeKey[1];
+          });
+          if (rangeStart.length && rangeEnd.length) {
+            rangeStart[0].value = parseFloat(rangeStart[0].value);
+            rangeEnd[0].value = parseFloat(rangeEnd[0].value);
+            if (rangeStart[0].value > rangeEnd[0].value) {
+              this.validPram = false;
+              this.paramErrorMsg = this.$t('debugger.paramErrorMsg.rangeError');
+            }
+          }
+        }
+      }
+      this.$forceUpdate();
     },
     /**
      * Create new watchpoint
@@ -731,6 +776,7 @@ export default {
         item.param.type = '';
         item.param.value = '';
         this.validPram = false;
+        this.paramErrorMsg = this.$t('debugger.paramErrorMsg.errorType');
       }
     },
     /**
@@ -787,6 +833,7 @@ export default {
       item.param.type = param.type;
       item.param.value = '';
       this.validPram = false;
+      this.paramErrorMsg = this.$t('debugger.paramErrorMsg.errorType');
       if (item.param.type === 'BOOL') {
         item.param.value = true;
         this.validPram = true;

mindinsight/ui/src/views/debugger/debugger.vue

@@ -584,6 +584,11 @@ limitations under the License.
       </div>
       <span slot="footer"
             class="dialog-footer">
+        <div class="error-msg"
+             v-show="!validPram">
+          <i class="el-icon-warning"></i>
+          {{$t('public.notice') + $t('symbols.colon') + paramErrorMsg}}
+        </div>
         <el-button type="primary"
                    size="mini"
                    class="custom-btn green"
@@ -815,6 +820,7 @@ export default {
         sending: 'sending',
         waiting: 'waiting',
       },
+      paramErrorMsg: '',
     };
   },
   components: {debuggerTensor, tree},
@@ -2246,32 +2252,43 @@ export default {
   .notShow {
     display: none;
   }
-  .conditions-container {
-    .collection {
-      width: 200px;
-    }
-    .condition,
-    .param,
-    .param-value {
-      margin-left: 10px;
-      width: 200px;
-    }
-    .percent-sign {
-      display: inline-block;
-      text-align: right;
-      width: 20px;
-    }
-    .inclusive-param {
-      text-align: right;
-      .item {
-        margin-top: 10px;
-        display: inline-block;
+  .creat-watch-point-dialog {
+    .conditions-container {
+      .collection {
+        width: 200px;
       }
-      .item + .item {
+      .condition,
+      .param,
+      .param-value {
         margin-left: 10px;
+        width: 200px;
+      }
+      .percent-sign {
+        display: inline-block;
+        text-align: right;
+        width: 20px;
+      }
+      .inclusive-param {
+        text-align: right;
+        .item {
+          margin-top: 10px;
+          display: inline-block;
+        }
+        .item + .item {
+          margin-left: 10px;
+        }
+      }
+    }
+    .error-msg {
+      float: left;
+      .el-icon-warning {
+        color: #e6a23c;
+        font-size: 16px;
+        cursor: pointer;
       }
     }
   }
+
   .el-dialog__wrapper.pendingTips {
     position: absolute;
     .dialog-icon {