From 3a3160abe8ffa026413d95ca6478caa107ed1451 Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Tue, 15 Dec 2020 09:27:18 +0800
Subject: [PATCH] UI add tensor error message

---
 .../ui/src/components/histogramUnit.vue       | 38 +++++++++++++-
 mindinsight/ui/src/locales/en-us.json         |  1 +
 mindinsight/ui/src/locales/zh-cn.json         |  1 +
 mindinsight/ui/src/services/fetcher.js        |  2 +-
 .../ui/src/views/train-manage/tensor.vue      | 51 +++++++++++++------
 .../views/train-manage/training-dashboard.vue |  9 ++--
 6 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogramUnit.vue
index 5568cc63..dd5cc81f 100644
--- a/mindinsight/ui/src/components/histogramUnit.vue
+++ b/mindinsight/ui/src/components/histogramUnit.vue
@@ -16,8 +16,12 @@ limitations under the License.
 <template>
   <div class="cl-histogram-container">
     <div class="data-show-container">
+      <div v-show="requestError"
+           class="error-msg-container">
+        {{errorMsg}}
+      </div>
       <div :id="itemId"
-           v-show="!!fullData.length"
+           v-show="!!fullData.length && !requestError"
            class="data-item"></div>
     </div>
   </div>
@@ -63,6 +67,9 @@ export default {
       zrDrawElement: {hoverDots: []},
       zr: null,
       chartTipFlag: false, // Wheather to display tips of the histogram
+      requestError: false, // Exceeded the specification
+      errorMsg: '', // Error message
+      viewResizeFlag: false, // Size reset flag
     };
   },
   computed: {},
@@ -84,7 +91,11 @@ export default {
      */
     resizeView() {
       if (this.charObj) {
-        this.charObj.resize();
+        if (this.requestError) {
+          this.viewResizeFlag = true;
+        } else {
+          this.charObj.resize();
+        }
       }
     },
     /**
@@ -139,6 +150,10 @@ export default {
       }
       this.removeTooltip();
       this.charObj.setOption(this.charOption, true);
+      if (this.viewResizeFlag) {
+        this.charObj.resize();
+        this.viewResizeFlag = false;
+      }
     },
     /**
      * Binding interaction event
@@ -825,11 +840,23 @@ export default {
      */
     updateHistogramData() {
       this.$nextTick(() => {
+        if (this.requestError) {
+          this.requestError = false;
+          this.viewResizeFlag = true;
+        }
         this.formatDataToChar();
         this.updateSampleData();
         this.sampleEventBind();
       });
     },
+    /**
+     * Show error message
+     * @param {String} errorMsg Error message
+     */
+    showRequestErrorMessage(errorMsg) {
+      this.errorMsg = errorMsg;
+      this.requestError = true;
+    },
   },
   destroyed() {
     this.clearZrData();
@@ -849,6 +876,13 @@ export default {
       width: 100%;
       height: 100%;
     }
+    .error-msg-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
 </style>
diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 8df0a263..796b7b93 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -521,6 +521,7 @@
     "50545012": "The tensor data does not exist. Please refresh.",
     "50545013": "The requested data is too large. Try another dimension.",
     "50545014": "The queried tensor data has been replaced by new data. Please refresh.",
+    "50545016": "The requested tensor is too large. The total number of values exceeds 10 million and cannot be displayed.",
     "50548001": "Ascend AI Processor information query timed out.",
 
     "5054B080": "Incorrect parameter type. Please check the input parameter type.",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 3a157524..9720bc06 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -520,6 +520,7 @@
     "50545012": "张量数据不存在，请刷新。",
     "50545013": "请求的数据过大，请使用其他维度重试。",
     "50545014": "查询的张量数据已被新数据替换，请刷新。",
+    "50545016": "请求的张量过大，数值总个数超过1000万，无法显示。",
     "50548001": "昇腾AI处理器信息查询超时",
 
     "5054B080": "参数类型错误，请检查输入参数类型",
diff --git a/mindinsight/ui/src/services/fetcher.js b/mindinsight/ui/src/services/fetcher.js
index 7b02921b..25c2f35b 100644
--- a/mindinsight/ui/src/services/fetcher.js
+++ b/mindinsight/ui/src/services/fetcher.js
@@ -75,7 +75,7 @@ axios.interceptors.response.use(
 
         const ignoreCode = {
           ignoreError: ['50545005'],
-          regardError: ['50545013', '50545014', '5054500D'],
+          regardError: ['50545013', '50545014', '50545016', '5054500D'],
         };
 
         if (
diff --git a/mindinsight/ui/src/views/train-manage/tensor.vue b/mindinsight/ui/src/views/train-manage/tensor.vue
index 45f14989..495a6597 100644
--- a/mindinsight/ui/src/views/train-manage/tensor.vue
+++ b/mindinsight/ui/src/views/train-manage/tensor.vue
@@ -553,8 +553,8 @@ export default {
               }
             });
           },
-          () => {
-            sampleItem.showLoading = false;
+          (e) => {
+            this.freshDataErrorCallback(e, sampleItem, false);
           },
       );
     },
@@ -688,23 +688,42 @@ export default {
             });
           },
           (e) => {
-            let showLimitError = false;
-            let errorMsg = '';
-            if (
-              e.response &&
-            e.response.data &&
-            e.response.data.error_code &&
-            (e.response.data.error_code.toString() === '50545013' ||
-              e.response.data.error_code.toString() === '50545014')
-            ) {
-              showLimitError = true;
-              errorMsg = this.$t('error')[e.response.data.error_code];
-            }
-            this.clearMartixData(sampleItem, showLimitError, errorMsg);
-            sampleItem.showLoading = false;
+            this.freshDataErrorCallback(e, sampleItem, true);
           },
       );
     },
+    /**
+     * callback of fresh data
+     * @param {Object} errorData The error object
+     * @param {Object} sampleItem The object that is being operated
+     * @param {Boolean} isMartix Martix data
+     */
+    freshDataErrorCallback(errorData, sampleItem, isMartix) {
+      let showLimitError = false;
+      let errorMsg = '';
+      if (
+        errorData.response &&
+            errorData.response.data &&
+            errorData.response.data.error_code &&
+            (errorData.response.data.error_code.toString() === '50545013' ||
+              errorData.response.data.error_code.toString() === '50545014' ||
+              errorData.response.data.error_code.toString() === '50545016')
+      ) {
+        showLimitError = true;
+        errorMsg = this.$t('error')[errorData.response.data.error_code];
+      }
+      if (isMartix) {
+        this.clearMartixData(sampleItem, showLimitError, errorMsg);
+      } else {
+        this.$nextTick(() => {
+          const elementItem = this.$refs[sampleItem.ref];
+          if (elementItem) {
+            elementItem[0].showRequestErrorMessage(errorMsg);
+          }
+        });
+      }
+      sampleItem.showLoading = false;
+    },
     /**
      * Clear table display
      * @param {Object} sampleItem The object that is being operated
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index 925605e0..08322637 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -1108,13 +1108,14 @@ export default {
             e.response.data &&
             e.response.data.error_code &&
             (e.response.data.error_code.toString() === '50545013' ||
-              e.response.data.error_code.toString() === '50545014')
+              e.response.data.error_code.toString() === '50545014' ||
+              e.response.data.error_code.toString() === '50545016')
             ) {
               showLimitError = true;
-              if (e.response.data.error_code.toString() === '50545014') {
-                errorMsg = this.$t('error')[e.response.data.error_code];
-              } else {
+              if (e.response.data.error_code.toString() === '50545013') {
                 errorMsg = this.$t('tensors.tensorDashboardLimitErrorMsg');
+              } else {
+                errorMsg = this.$t('error')[e.response.data.error_code];
               }
             }
             this.$nextTick(() => {