!901 When setting up watchpoints , const type nodes do not support selection

From: @feng_xue_feng
Reviewed-by: @ouwenchang
Signed-off-by:

mindinsight/ui/src/components/tree-node.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="el-tree-node"
+       @click.stop="handleClick"
+       @contextmenu="($event) => this.handleContextMenu($event)"
+       v-show="node.visible"
+       :class="{
+      'is-expanded': expanded,
+      'is-current': node.isCurrent,
+      'is-hidden': !node.visible,
+      'is-focusable': !node.disabled,
+      'is-checked': !node.disabled && node.checked
+    }"
+       role="treeitem"
+       tabindex="-1"
+       :aria-expanded="expanded"
+       :aria-disabled="node.disabled"
+       :aria-checked="node.checked"
+       :draggable="tree.draggable"
+       @dragstart.stop="handleDragStart"
+       @dragover.stop="handleDragOver"
+       @dragend.stop="handleDragEnd"
+       @drop.stop="handleDrop"
+       ref="node">
+    <div class="el-tree-node__content"
+         :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
+      <span @click.stop="handleExpandIconClick"
+            :class="[
+          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          'el-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+        ]">
+      </span>
+      <el-checkbox v-if="showCheckbox && node.data.showCheckbox"
+                   v-model="node.checked"
+                   :indeterminate="node.indeterminate"
+                   :disabled="!!node.disabled"
+                   @click.native.stop
+                   @change="handleCheckChange">
+      </el-checkbox>
+      <span v-if="node.loading"
+            class="el-tree-node__loading-icon el-icon-loading">
+      </span>
+      <node-content :node="node"></node-content>
+    </div>
+    <el-collapse-transition>
+      <div class="el-tree-node__children"
+           v-if="!renderAfterExpand || childNodeRendered"
+           v-show="expanded"
+           role="group"
+           :aria-expanded="expanded">
+        <el-tree-node :render-content="renderContent"
+                      v-for="child in node.childNodes"
+                      :render-after-expand="renderAfterExpand"
+                      :show-checkbox="showCheckbox"
+                      :key="getNodeKey(child)"
+                      :node="child"
+                      @node-expand="handleChildNodeExpand">
+        </el-tree-node>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+<script>
+import ElTreeNode from 'element-ui/packages/tree/src/tree-node';
+export default {
+  extends: ElTreeNode,
+  name: 'ElTreeNode',
+  componentName: 'ElTreeNode',
+};
+</script>

mindinsight/ui/src/components/tree.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="el-tree"
+       :class="{
+      'el-tree--highlight-current': highlightCurrent,
+      'is-dragging': !!dragState.draggingNode,
+      'is-drop-not-allow': !dragState.allowDrop,
+      'is-drop-inner': dragState.dropType === 'inner'
+    }"
+       role="tree">
+    <el-tree-node v-for="child in root.childNodes"
+                  :node="child"
+                  :props="props"
+                  :render-after-expand="renderAfterExpand"
+                  :show-checkbox="showCheckbox && child.data.showCheckbox"
+                  :key="getNodeKey(child)"
+                  :render-content="renderContent"
+                  @node-expand="handleNodeExpand">
+    </el-tree-node>
+    <div class="el-tree__empty-block"
+         v-if="isEmpty">
+      <span class="el-tree__empty-text">{{ emptyText }}</span>
+    </div>
+    <div v-show="dragState.showDropIndicator"
+         class="el-tree__drop-indicator"
+         ref="dropIndicator">
+    </div>
+  </div>
+</template>
+<script>
+import {Tree} from 'element-ui';
+import ElTreeNode from './tree-node';
+export default {
+  extends: Tree,
+  components: {
+    ElTreeNode,
+  },
+};
+</script>

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

@@ -477,7 +477,8 @@
     "pause": "PAUSE",
     "terminate": "TERMINATE",
     "selectCondition": "Select a condition",
-    "inputStep": "Enter a step value (a positive integer)",
+    "inputStep": "Enter a step value",
+    "inputTip": "A positive integer less than 2147483648",
     "curHitNode": "Watch Point Hit List",
     "backstageStatus": "The backend running status is ",
     "view": "View",

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

@@ -476,7 +476,8 @@
     "pause": "暂停",
     "terminate": "结束",
     "selectCondition": "请选择条件",
-    "inputStep": "请输入轮次值（大于0的整数）",
+    "inputStep": "请输入轮次值",
+    "inputTip": "小于2147483648的正整数",
     "curHitNode": "命中的监测点",
     "backstageStatus": "后台运行状态是",
     "view": "查看",

mindinsight/ui/src/mixins/debuggerMixin.vue

@@ -212,6 +212,7 @@ export default {
       if (this.step === '') {
         return;
       }
+      const maxStep = 2147483648;
       this.step = this.step
           .toString()
           .replace(/[^\.\d]/g, '')
@@ -220,8 +221,8 @@ export default {
       if (this.step === 0) {
         this.step = 1;
       }
-      if (this.step >= 1000000000) {
-        this.step = 999999999;
+      if (this.step >= maxStep) {
+        this.step = maxStep - 1;
       }
     },
     /**
@@ -267,14 +268,16 @@ export default {
                         ? false
                         : true,
                       ...val,
+                      showCheckbox: val.type !== this.unCheckedNodeType,
                     };
                   });
                   this.resolve(this.origialTree);
+                  // watched 0:unchecked  1:indeterminate 2:checked
                   this.node.childNodes.forEach((val) => {
-                    if (val.data.watched === 2) {
+                    if (val.data.watched === 2 && val.data.type !== this.unCheckedNodeType) {
                       val.checked = true;
                     }
-                    if (val.data.watched === 1) {
+                    if (val.data.watched === 1 && val.data.type !== this.unCheckedNodeType) {
                       val.indeterminate = true;
                     }
                   });
@@ -971,6 +974,12 @@ export default {
         this.dealCheckPro(node.childNodes, node.indeterminate || check);
       }
       if (this.curWatchPointId) {
+        this.$refs.tree.getCheckedKeys().forEach((val) => {
+          const node = this.$refs.tree.getNode(val);
+          if (node.data.type === this.unCheckedNodeType) {
+            node.checked = false;
+          }
+        });
         const checkedKeys = this.$refs.tree.getCheckedKeys();
         const watchNodes = [];
         if (this.defaultCheckedArr.length === checkedKeys.length) {
@@ -1002,6 +1011,15 @@ export default {
             (res) => {
               this.defaultCheckedArr = checkedKeys;
               this.enableRecheck = res.data.metadata.enable_recheck;
+              this.$nextTick(() => {
+                if (node.indeterminate) {
+                  node.checked = true;
+                  node.indeterminate = false;
+                }
+                if (check) {
+                  this.dealParentNode(node);
+                }
+              });
             },
             (err) => {
               this.showErrorMsg(err);
@@ -1009,6 +1027,19 @@ export default {
         );
       }
     },
+    dealParentNode(node) {
+      const parent = node.parent;
+      if (
+        parent &&
+        !parent.childNodes
+            .filter((val) => val.data.type !== this.unCheckedNodeType)
+            .find((val) => val.checked === false)
+      ) {
+        parent.checked = true;
+        parent.indeterminate = false;
+        this.dealParentNode(parent);
+      }
+    },
     /** Deal tree data
      * @param {Object} childNodes tree node
      * @param { Boolean } check check status
@@ -1016,7 +1047,11 @@ export default {
     dealCheckPro(childNodes, check) {
       childNodes.forEach((val) => {
         val.indeterminate = false;
-        val.checked = check;
+        if (val.data.type !== this.unCheckedNodeType) {
+          val.checked = check;
+        } else {
+          val.checked = false;
+        }
         if (val.childNodes) {
           this.dealCheckPro(val.childNodes, check);
         }
@@ -1052,6 +1087,7 @@ export default {
      */
     nodeCollapse(_, node) {
       node.loaded = false;
+      node.childNodes = [];
       if (this.treeFlag) {
         this.dealDoubleClick(node.data.name);
       }
@@ -1153,7 +1189,8 @@ export default {
         if (val.nodes) {
           this.dealSearchResult(val.nodes);
         }
-        if (val.watched === 2) {
+        // watched 0:unchecked  1:indeterminate 2:checked
+        if (val.watched === 2 && val.type !== this.unCheckedNodeType) {
           this.searchCheckedArr.push(val.name);
         }
         val.label = val.name.split('/').pop();
@@ -1270,19 +1307,21 @@ export default {
                       ? false
                       : true,
                     ...val,
+                    showCheckbox: val.type !== this.unCheckedNodeType,
                   };
                 });
                 resolve(this.curNodeData);
+                // watched 0:unchecked  1:indeterminate 2:checked
                 this.defaultCheckedArr = this.defaultCheckedArr.concat(
                     this.curNodeData
                         .filter((val) => {
-                          return val.watched === 2;
+                          return val.watched === 2 && val.type !== this.unCheckedNodeType;
                         })
                         .map((val) => val.name),
                 );
                 const halfSelectArr = this.curNodeData
                     .filter((val) => {
-                      return val.watched === 1;
+                      return val.watched === 1 && val.type !== this.unCheckedNodeType;
                     })
                     .map((val) => val.name);
                 node.childNodes.forEach((val) => {
@@ -1366,6 +1405,7 @@ export default {
                     ? false
                     : true,
                 ...val,
+                showCheckbox: val.type !== this.unCheckedNodeType,
               };
             });
             resolve(this.curNodeData);
@@ -1463,23 +1503,26 @@ export default {
         return {
           label: val.name.split('/').pop(),
           ...val,
+          showCheckbox: val.type !== this.unCheckedNodeType,
         };
       });
       const node = this.$refs.tree.getNode(name);
       curNodeData.forEach((val) => {
         this.$refs.tree.append(val, name);
       });
+      // watched 0:unchecked  1:indeterminate 2:checked
       node.childNodes.forEach((val) => {
         if (
           node.checked &&
-          !node.childNodes.find((val) => val.data.watched !== 2)
+          !node.childNodes.find((val) => val.data.watched !== 2) &&
+          val.data.type !== this.unCheckedNodeType
         ) {
           val.checked = true;
         }
-        if (val.data.watched === 2) {
+        if (val.data.watched === 2 && val.data.type !== this.unCheckedNodeType) {
           val.checked = true;
         }
-        if (val.data.watched === 1) {
+        if (val.data.watched === 1 && val.data.type !== this.unCheckedNodeType) {
           val.indeterminate = true;
         }
         if (
@@ -1494,6 +1537,16 @@ export default {
       this.$refs.tree.setCurrentKey(name);
       this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
       this.$nextTick(() => {
+        if (
+          node.indeterminate &&
+          !node.childNodes
+              .filter((val) => val.data.type !== this.unCheckedNodeType)
+              .find((val) => val.checked === false)
+        ) {
+          node.indeterminate = false;
+          node.checked = true;
+          this.dealParentNode(node);
+        }
         setTimeout(() => {
           const dom = document.querySelector(
               '.el-tree-node.is-current.is-focusable',
@@ -1742,6 +1795,7 @@ export default {
           return {
             label: val.name.split('/').pop(),
             ...val,
+            showCheckbox: val.type !== this.unCheckedNodeType,
           };
         });
         data.forEach((val) => {
@@ -1759,11 +1813,12 @@ export default {
           }
         });
         const node = this.$refs.tree.getNode(children.scope_name);
+        // watched 0:unchecked  1:indeterminate 2:checked
         node.childNodes.forEach((val) => {
-          if (val.data.watched === 2) {
+          if (val.data.watched === 2 && val.data.type !== this.unCheckedNodeType) {
             val.checked = true;
           }
-          if (val.data.watched === 1) {
+          if (val.data.watched === 1 && val.data.type !== this.unCheckedNodeType) {
             val.indeterminate = true;
           }
           if (
@@ -1802,14 +1857,16 @@ export default {
               ? false
               : true,
           ...val,
+          showCheckbox: val.type !== this.unCheckedNodeType,
         };
       });
       this.resolve(this.origialTree);
+      // watched 0:unchecked  1:indeterminate 2:checked
       this.node.childNodes.forEach((val) => {
-        if (val.data.watched === 2) {
+        if (val.data.watched === 2 && val.data.type !== this.unCheckedNodeType) {
           val.checked = true;
         }
-        if (val.data.watched === 1) {
+        if (val.data.watched === 1 && val.data.type !== this.unCheckedNodeType) {
           val.indeterminate = true;
         }
       });

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

@@ -79,22 +79,22 @@ limitations under the License.
                          class="custom-btn"
                          @click="selectAllFiles(false)">{{ $t('public.deselectAll') }}</el-button>
             </div>
-            <el-tree v-show="treeFlag"
-                     :props="props"
-                     :load="loadNode"
-                     @node-collapse="nodeCollapse"
-                     @node-click="handleNodeClick"
-                     node-key="name"
-                     :default-checked-keys="defaultCheckedArr"
-                     :expand-on-click-node="false"
-                     :lazy="lazy"
-                     :highlight-current="true"
-                     ref="tree"
-                     @check="check"
-                     :show-checkbox="!!curWatchPointId">
+            <tree v-show="treeFlag"
+                  :props="props"
+                  :load="loadNode"
+                  @node-collapse="nodeCollapse"
+                  @node-click="handleNodeClick"
+                  node-key="name"
+                  :default-checked-keys="defaultCheckedArr"
+                  :expand-on-click-node="false"
+                  :lazy="lazy"
+                  :highlight-current="true"
+                  ref="tree"
+                  @check="check"
+                  :show-checkbox="!!curWatchPointId">
               <span class="custom-tree-node"
                     slot-scope="{ node ,data }">
-                <span>
+                <span :class="{const:data.type==='Const'}">
                   <img v-if="data.type ==='name_scope'"
                        :src="require('@/assets/images/name-scope.svg')"
                        class="image-type" />
@@ -110,7 +110,7 @@ limitations under the License.
                 </span>
                 <span class="custom-tree-node">{{ node.label }}</span>
               </span>
-            </el-tree>
+            </tree>
             <el-tree v-show="!treeFlag"
                      :props="defaultProps"
                      :load="loadSearchNode"
@@ -626,6 +626,7 @@ const d3 = {select, selectAll, zoom, dispatch};
 import RequestService from '@/services/request-service';
 import commonGraph from '../../mixins/commonGraph.vue';
 import debuggerMixin from '../../mixins/debuggerMixin.vue';
+import tree from '../../components/tree.vue';
 
 export default {
   mixins: [commonGraph, debuggerMixin],
@@ -732,9 +733,10 @@ export default {
       isCurrentGraph: true, // Check whether the new and old graphs are the same.
       expandKeys: [],
       isHitIntoView: true,
+      unCheckedNodeType: 'Const',
     };
   },
-  components: {debuggerGridTable},
+  components: {debuggerGridTable, tree},
   computed: {},
   mounted() {
     document.title = `${this.$t('debugger.debugger')}-MindInsight`;
@@ -796,23 +798,25 @@ export default {
                     ? false
                     : true,
                   ...val,
+                  showCheckbox: val.type !== this.unCheckedNodeType,
                 };
               });
               this.node.childNodes = [];
               this.resolve(this.origialTree);
+              // watched 0:unchecked  1:indeterminate 2:checked
               this.defaultCheckedArr = this.origialTree
                   .filter((val) => {
-                    return val.watched === 2;
+                    return val.watched === 2 && val.type !== this.unCheckedNodeType;
                   })
                   .map((val) => val.name);
               this.node.childNodes.forEach((val) => {
-                if (val.data.watched === 1) {
+                if (val.data.watched === 1 && val.data.type !== this.unCheckedNodeType) {
                   val.indeterminate = true;
                 }
                 if (val.data.watched === 0) {
                   val.checked = false;
                 }
-                if (val.data.watched === 2) {
+                if (val.data.watched === 2 && val.data.type !== this.unCheckedNodeType) {
                   val.checked = true;
                 }
               });
@@ -840,7 +844,7 @@ export default {
       if (type && !this.node.childNodes.find((val) => val.checked === false)) {
         return;
       }
-      const watchNodes = [];
+      let watchNodes = [];
       this.node.childNodes.forEach((val) => {
         if (type !== val.checked || (!type && val.indeterminate)) {
           watchNodes.push(val.data.name);
@@ -852,6 +856,9 @@ export default {
           this.dealCheckPro(val.childNodes, type);
         }
       });
+      if (type) {
+        watchNodes = this.$refs.tree.getCheckedKeys();
+      }
       if (this.curWatchPointId) {
         const params = {
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
@@ -902,6 +909,7 @@ export default {
                 return {
                   label: val.name.split('/').pop(),
                   ...val,
+                  showCheckbox: val.type !== this.unCheckedNodeType,
                 };
               });
               this.node.childNodes = [];
@@ -910,14 +918,15 @@ export default {
               this.$refs.tree.getCheckedKeys().forEach((val) => {
                 this.$refs.tree.setChecked(val, false);
               });
+              // watched 0:unchecked  1:indeterminate 2:checked
               this.defaultCheckedArr = this.curNodeData
                   .filter((val) => {
-                    return val.watched === 2;
+                    return val.watched === 2 && val.type !== this.unCheckedNodeType;
                   })
                   .map((val) => val.name);
               const halfSelectArr = this.curNodeData
                   .filter((val) => {
-                    return val.watched === 1;
+                    return val.watched === 1 && val.type !== this.unCheckedNodeType;
                   })
                   .map((val) => val.name);
               this.node.childNodes.forEach((val) => {
@@ -1813,6 +1822,9 @@ export default {
         }
         .custom-tree-node {
           padding-right: 8px;
+          .const {
+            margin-left: 22px;
+          }
         }
         .custom-tree-node.highlight {
           color: red;
@@ -2307,6 +2319,8 @@ export default {
         height: calc(100% - 120px);
       }
       .deb-compare-detail {
+        height: 120px;
+        overflow: auto;
         span {
           margin-right: 15px;
         }