Gray out the monitoring point delete button and step switch button in the training state

mindinsight/ui/src/components/debugger-tensor.vue

@@ -470,7 +470,7 @@ export default {
         this.formateWatchpointParams(item.params);
         param = item.params.map((i) => i.content).join('; ');
       }
-      return `${this.$parent.transCondition(item.condition)} (${param})`;
+      return `${this.$parent.transCondition(item.condition)}${param ? ` (${param})` : ''}`;
     },
     packageData() {
       let nodeStr = '';

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

@@ -85,11 +85,11 @@
     "graphUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/dashboard.html#computational-graph-visualization",
     "dataProcessUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/dashboard.html#dataset-graph-visualization",
     "imageUrl": "https://www.mindspore.cn/tutorial/training/en/master/advanced_use/dashboard.html#image-visualization",
-    "sessionLimit": "The number of sessions of the offline debugger exceeds the number of online sessions",
-    "sessionLimitNum": "At most 2 exist at the same time",
-    "sessionLists": "List of currently existing sessions",
-    "deleteSessionConfirm": "This operation will delete the current session, do you want to continue?",
-    "deleteSessionSuccess": "Delete session successfully!"
+    "sessionLimit": "The number of offline debugger sessions exceeds the upper limit.",
+    "sessionLimitNum": "A maximum of two sessions are allowed.",
+    "sessionLists": "Existing Sessions List",
+    "deleteSessionConfirm": "The session will be deleted. Are you sure you want to continue?",
+    "deleteSessionSuccess": "Session deleted."
   },
   "modelTraceback": {
     "summaryPath": "Summary Path",
@@ -966,6 +966,6 @@
     "5054B184": "The operation is too fast, the backend service has been suspended.",
     "5054B189": "Do not set the value repeatedly.",
     "5054B083": "Failed to create the watchpoint. Do not use invalid rules.",
-    "5054B202": "The debugger offline server module was not found"
+    "5054B202": "The debugger offline server module is not found"
   }
 }

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

@@ -26,6 +26,10 @@ export default {
   },
   methods: {
     editStep() {
+      if (this.metadata.state === this.state.running ||
+          this.metadata.state === this.state.sending) {
+        return;
+      }
       this.isShowInp = true;
       this.newStep = this.metadata.step;
     },

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

@@ -210,6 +210,8 @@ limitations under the License.
                        v-if="item.selected"
                        @click.stop="showOrigin()"></i>
                     <i class="el-icon-close icon"
+                       :class="{disabled:metadata.state === state.running ||
+                        metadata.state === state.sending}"
                        v-if="item.selected"
                        @click.stop="deleteWatchpoint(item)"></i>
                   </div>
@@ -353,6 +355,7 @@ limitations under the License.
           <i class="el-icon-time"></i>
         </el-tooltip>
         <i class="el-icon-edit"
+           :class="{disabled:metadata.state === state.running || metadata.state === state.sending}"
            v-if="trainId && !isShowInp"
            :title="$t('debugger.inpStepTip',{total_step_num:metadata.total_step_num})"
            @click="editStep"></i>
@@ -1231,7 +1234,7 @@ export default {
 
       this.graph.minScale = Math.min(
           this.svg.size.width / 2 / this.graph.size.width,
-          this.svg.size.height / 2 / this.graph.size.height
+          this.svg.size.height / 2 / this.graph.size.height,
       );
       this.initZooming();
       this.initContextMenu();
@@ -1985,6 +1988,19 @@ export default {
 .deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected .el-icon-close {
   right: 10px;
 }
+.deb-wrap
+  .left-wrap
+  .left
+  .content
+  .watch-point-wrap
+  .content-wrap
+  .list-wrap
+  .list
+  .name.selected
+  .el-icon-close.disabled {
+  cursor: not-allowed;
+  color: #adb0b8;
+}
 .deb-wrap .left-wrap .left .content .watch-point-wrap .content-wrap .list-wrap .list .name.selected .el-icon-check {
   right: 30px;
 }
@@ -2150,6 +2166,10 @@ export default {
 .deb-wrap .right .header .el-icon-edit {
   margin-left: 5px;
 }
+.deb-wrap .right .header .el-icon-edit.disabled::before {
+  cursor: not-allowed;
+  color: #adb0b8;
+}
 .deb-wrap .right .header i {
   font-size: 18px;
   margin: 0 2px;