!1021 UI add prompt message of sending and running state

From: @huang_wei_feng4
Reviewed-by: @lilongfei15,@wangyue01
Signed-off-by: @wangyue01

mindinsight/ui/src/components/debugger-grid-table-simple.vue

@@ -39,7 +39,7 @@ limitations under the License.
            @keyup.enter="filterChange">
         <div class="filter-input-title">{{$t('components.dimsFilterInputTitle')}}
           <span :title="$t('components.dimsFilterInputTip')"
-                class="el-icon-warning"></span>
+                class="el-icon-info"></span>
         </div>
         <div v-for="(item, itemIndex) in filterArr"
              :key="itemIndex">
@@ -74,7 +74,7 @@ limitations under the License.
         </el-select>
         {{$t('components.gridAccuracy')}}
         <span :title="$t('components.accuracyTips')"
-              class="el-icon-warning"></span>
+              class="el-icon-info"></span>
         <el-select v-model="accuracy"
                    class="select-item-debugger"
                    @change="accuracyChange">

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

@@ -183,7 +183,7 @@ limitations under the License.
             <el-tooltip placement="bottom"
                         effect="light"
                         popper-class="legend-tip">
-              <i class="el-icon-warning"></i>
+              <i class="el-icon-info"></i>
               <div slot="content">
                 <div>{{$t('debugger.selectDetail')}}</div>
                 <div class="legend">

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

@@ -524,31 +524,17 @@ export default {
       RequestService.control(params).then(
           (res) => {
             if (res.data && res.data.metadata) {
-              const h = this.$createElement;
-
-              if (res.data.metadata.state === this.state.sending) {
-                setTimeout(() => {
-                  if (this.metadata.state === this.state.sending) {
-                    this.$message(this.$t('debugger.sendingTip'));
-                  } else {
-                    const msg = {
-                      message: h('p', null, [
-                        h('span', null, this.$t('debugger.backstageStatus')),
-                        h('i', {style: 'color: teal'}, this.metadata.state),
-                      ]),
-                    };
-                    this.$message(msg);
-                  }
-                }, 500);
-              } else {
-                const msg = {
-                  message: h('p', null, [
-                    h('span', null, this.$t('debugger.backstageStatus')),
-                    h('i', {style: 'color: teal'}, res.data.metadata.state),
-                  ]),
-                };
+              setTimeout(() => {
+                let msg = '';
+                if (this.metadata.state === this.state.sending) {
+                  msg = this.$t('debugger.stateMsg.sending');
+                } else if (this.metadata.state === this.state.running) {
+                  msg = this.$t('debugger.stateMsg.running');
+                } else {
+                  msg = `${this.$t('debugger.backstageStatus')}${this.metadata.state}`;
+                }
                 this.$message(msg);
-              }
+              }, 500);
 
               this.metadata.state = res.data.metadata.state;
             }

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

@@ -305,6 +305,20 @@ limitations under the License.
           </span>
         </span>
         {{ $t('debugger.stepTip')}}
+        <el-tooltip class="tooltip"
+                    effect="light"
+                    :content="$t('debugger.stateTips.running')"
+                    placement="top"
+                    v-show="metadata.state === state.running">
+          <i class="el-icon-loading"></i>
+        </el-tooltip>
+        <el-tooltip class="tooltip"
+                    effect="light"
+                    :content="$t('debugger.stateTips.sending')"
+                    placement="top"
+                    v-show="metadata.state === state.sending">
+          <i class="el-icon-time"></i>
+        </el-tooltip>
       </div>
       <div class="svg-wrap"
            :class="{collapse: collapseTable}">
@@ -364,7 +378,8 @@ limitations under the License.
              @click="rightCollapse()"
              alt="" />
 
-        <el-tabs v-model="tabs.activeName">
+        <el-tabs v-model="tabs.activeName"
+                 @tab-click="tabsChange">
           <el-tab-pane :label="$t('debugger.tensorMsg')"
                        name="tensor">
             <div class="table-content">
@@ -1445,7 +1460,10 @@ export default {
           }
         }
       }
-      this.setSelectedNodeData(node.data);
+      if (this.tabs.activeName === 'detail') {
+        this.setSelectedNodeData(node.data);
+      }
+
       if (this.watchPointHits.length && this.radio1 === 'hit' && this.isHitIntoView) {
         this.focusWatchpointHit();
       }
@@ -1456,7 +1474,7 @@ export default {
      * @param {Object} selectedNode Node data
      */
     setSelectedNodeData(selectedNode = {}) {
-      this.selectedNode.IOInfo = [];
+      const IOInfo = [];
       this.selectedNode.inputNum = 0;
       this.selectedNode.outputNum = 0;
       if (selectedNode.output) {
@@ -1467,7 +1485,7 @@ export default {
             key = key.replace(`${graphName}/`, '');
           }
           const obj = {name: key, IOType: 'output', graph_name: graphName};
-          this.selectedNode.IOInfo.push(obj);
+          IOInfo.push(obj);
           this.selectedNode.outputNum++;
         });
       }
@@ -1479,10 +1497,11 @@ export default {
             key = key.replace(`${graphName}/`, '');
           }
           const obj = {name: key, IOType: 'input', graph_name: graphName};
-          this.selectedNode.IOInfo.push(obj);
+          IOInfo.push(obj);
           this.selectedNode.inputNum++;
         });
       }
+      this.selectedNode.IOInfo = IOInfo;
     },
     /**
      * The position is offset to the current node in the center of the screen.
@@ -1649,6 +1668,12 @@ export default {
         }
       }
     },
+    tabsChange() {
+      if (this.tabs.activeName === 'detail') {
+        const node = this.allGraphData[this.selectedNode.name];
+        this.setSelectedNodeData(node);
+      }
+    },
     /**
      * To summery list page
      */
@@ -1976,11 +2001,17 @@ export default {
         margin-left: 25px;
       }
       span.item {
-        margin-right: 15px;
         .content {
           color: #00a5a7;
         }
       }
+      .item + .item {
+        margin-left: 15px;
+      }
+      .tooltip {
+        margin-left: 5px;
+        cursor: pointer;
+      }
     }
     .svg-wrap {
       height: 50%;