From b5562992b2a67e29d98db65e823e21285717ede0 Mon Sep 17 00:00:00 2001
From: WeiFeng-mindinsight <huangweifeng4@huawei.com>
Date: Tue, 8 Dec 2020 14:15:17 +0800
Subject: [PATCH] UI add sending state handling of debugger training

---
 mindinsight/ui/src/locales/zh-cn.json         |  3 +-
 mindinsight/ui/src/mixins/debugger-mixin.vue  | 37 +++++++---
 .../ui/src/views/debugger/debugger.vue        | 70 ++++++++++++-------
 3 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 5c2af397..b83b131b 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -733,7 +733,8 @@
       "inf": "张量中含有+/-INF，",
       "no_prev_tensor": "找不到上一个迭代的值，",
       "cannotCheck": "无法检查。"
-    }
+    },
+    "sendingTip": "等待训练响应，请稍候。"
   },
   "explain": {
     "explain": "模型解释",
diff --git a/mindinsight/ui/src/mixins/debugger-mixin.vue b/mindinsight/ui/src/mixins/debugger-mixin.vue
index cc03106c..7cc6efdb 100644
--- a/mindinsight/ui/src/mixins/debugger-mixin.vue
+++ b/mindinsight/ui/src/mixins/debugger-mixin.vue
@@ -18,7 +18,7 @@ export default {
      * Initialize the condition
      */
     initCondition() {
-      if (this.metadata.state === 'running') {
+      if (this.metadata.state === this.state.running || this.metadata.state === this.state.sending) {
         return;
       }
       RequestService.queryConditions(this.trainId).then((res) => {
@@ -471,7 +471,7 @@ export default {
                     graphName,
                 );
               }
-              if (res.data.watch_point_hits && res.data.watch_point_hits.length > 0) {
+              if (res.data.watch_point_hits) {
                 this.radio1 = 'hit';
                 this.getWatchpointHits();
               }
@@ -525,12 +525,31 @@ export default {
           (res) => {
             if (res.data && res.data.metadata) {
               const h = this.$createElement;
-              this.$message({
-                message: h('p', null, [
-                  h('span', null, this.$t('debugger.backstageStatus')),
-                  h('i', {style: 'color: teal'}, res.data.metadata.state),
-                ]),
-              });
+
+              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),
+                  ]),
+                };
+                this.$message(msg);
+              }
+
               this.metadata.state = res.data.metadata.state;
             }
           },
@@ -596,7 +615,7 @@ export default {
      * @param {Object} item watchpoint data
      */
     deleteWatchpoint(item) {
-      if (!this.watchPointArr.length || this.metadata.state === 'running') {
+      if (!this.watchPointArr.length || this.metadata.state === this.state.running || this.metadata.state === this.state.sending) {
         return;
       }
       if ((item && item.id) || !item) {
diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue
index 77b097ae..73ff7fd8 100644
--- a/mindinsight/ui/src/views/debugger/debugger.vue
+++ b/mindinsight/ui/src/views/debugger/debugger.vue
@@ -83,10 +83,12 @@ limitations under the License.
               <el-button type="primary"
                          size="mini"
                          class="custom-btn"
+                         :disabled="metadata.state === state.running || metadata.state === state.sending"
                          @click="selectAllFiles(true)">{{ $t('public.selectAll') }}</el-button>
               <el-button type="primary"
                          size="mini"
                          class="custom-btn"
+                         :disabled="metadata.state === state.running || metadata.state === state.sending"
                          @click="selectAllFiles(false)">{{ $t('public.deselectAll') }}</el-button>
             </div>
             <tree v-show="treeFlag"
@@ -168,13 +170,14 @@ limitations under the License.
               <div class="delete-wrap">
                 <i class="el-icon-delete"
                    :title="$t('debugger.clearWatchpoint')"
-                   :class="{disable: !(watchPointArr.length && metadata.state !== 'running')}"
+                   :class="{disable: !(watchPointArr.length && metadata.state !== state.running &&
+                   metadata.state !== state.sending)}"
                    @click="deleteWatchpoint()"></i>
               </div>
               <div class="add-wrap">
                 <i class="el-icon-circle-plus"
                    :title="$t('debugger.createWP')"
-                   :class="{disable: metadata.state === 'running'}"
+                   :class="{disable: metadata.state === state.running || metadata.state === state.sending}"
                    @click="initCondition"></i>
               </div>
             </div>
@@ -258,21 +261,21 @@ limitations under the License.
             <el-button type="primary"
                        size="mini"
                        class="custom-btn green"
-                       :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
+                       :disabled="!(step && metadata.state === state.waiting)"
                        @click="control(0)">{{ $t('public.sure') }}</el-button>
           </div>
           <div class="btn-two">
             <el-button size="mini"
                        class="custom-btn white"
-                       :disabled="metadata.state==='running'|| metadata.state==='pending'"
+                       :disabled="metadata.state !== state.waiting"
                        @click="control(1)">{{$t('debugger.continue')}}</el-button>
             <el-button size="mini"
                        class="custom-btn white"
-                       :disabled="metadata.state!=='running'"
+                       :disabled="metadata.state !== state.running"
                        @click="control(3)">{{$t('debugger.pause')}}</el-button>
             <el-button size="mini"
                        class="custom-btn white"
-                       :disabled="metadata.state==='pending'"
+                       :disabled="metadata.state === state.pending || metadata.state === state.sending"
                        @click="terminate">{{$t('debugger.terminate')}}</el-button>
           </div>
         </div>
@@ -402,7 +405,7 @@ limitations under the License.
                       <div class="value-wrap">
                         <el-button size="mini"
                                    type="text"
-                                   :disabled="metadata.state==='running'"
+                                   :disabled="metadata.state === state.running || metadata.state === state.sending"
                                    v-if="scope.row.value === 'click to view'"
                                    @click="showTensor(scope.row,'value')">
                           {{ $t('debugger.view') }}
@@ -411,13 +414,14 @@ limitations under the License.
                                    class="value-tip"
                                    size="mini"
                                    type="text"
-                                   :disabled="metadata.state==='running'"
+                                   :disabled="metadata.state===state.running || metadata.state === state.sending"
                                    :title="isNaN(scope.row.value)?'':scope.row.value"
                                    @click="showTensor(scope.row,'value')">
                           {{ scope.row.value }}</el-button>
                         <el-button size="mini"
                                    type="text"
-                                   :disabled="metadata.state==='running' || !scope.row.has_prev_step"
+                                   :disabled="metadata.state===state.running || metadata.state === state.sending ||
+                                  !scope.row.has_prev_step"
                                    @click="showTensor(scope.row,'compare')">
                           {{ $t('debugger.compareToPre') }}
                         </el-button>
@@ -782,7 +786,16 @@ export default {
         checked: 2,
         noCheckbox: -1,
       },
+      percentParams: ['zero_percentage_ge', 'range_percentage_lt', 'range_percentage_gt'],
+      oldState: '',
       treeDisabled: false,
+      state: {
+        running: 'running',
+        pending: 'pending',
+        mismatch: 'mismatch',
+        sending: 'sending',
+        waiting: 'waiting',
+      },
     };
   },
   components: {debuggerTensor, tree},
@@ -794,29 +807,36 @@ export default {
   watch: {
     'metadata.state': {
       handler(newValue, oldValue) {
-        if (newValue === 'pending' && oldValue !== undefined) {
-          location.reload();
-        }
-        if (oldValue === 'pending' && newValue === 'waiting') {
-          this.loadNode(this.node, this.resolve);
+        if (newValue === this.state.mismatch) {
+          this.conflictFlag = true;
+        } else {
+          this.conflictFlag = false;
         }
-        if (oldValue === 'running' && newValue === 'waiting') {
-          this.getWatchpointHits();
+
+        if (newValue === this.state.pending) {
+          if (oldValue) {
+            location.reload();
+          } else {
+            this.dialogVisible = true;
+          }
+        } else {
+          this.dialogVisible = false;
         }
-        if (newValue === 'running') {
+        if (newValue === this.state.running || newValue === this.state.sending) {
           this.treeDisabled = true;
         } else {
           this.treeDisabled = false;
         }
-        if (newValue === 'pending') {
-          this.dialogVisible = true;
-        } else {
-          this.dialogVisible = false;
+        if (newValue === this.state.sending && oldValue) {
+          this.oldState = oldValue;
         }
-        if (newValue === 'mismatch') {
-          this.conflictFlag = true;
-        } else {
-          this.conflictFlag = false;
+
+        if (newValue === this.state.waiting) {
+          if (this.oldState === this.state.pending || oldValue === this.state.pending) {
+            this.loadNode(this.node, this.resolve);
+          } else if (this.oldState === this.state.running || oldValue === this.state.running) {
+            this.getWatchpointHits();
+          }
         }
       },
       deep: true,