!1031 UI add tensor error message

From: @xia_yi_fan1
Reviewed-by: @weiyanxi,@wangyue01,@wenkai_dist
Signed-off-by: @wenkai_dist

mindinsight/ui/src/components/histogram-unit.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
@@ -826,11 +841,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();
@@ -850,6 +877,13 @@ export default {
       width: 100%;
       height: 100%;
     }
+    .error-msg-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
 </style>

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

@@ -836,6 +836,7 @@
     "50545012": "The tensor data does not exist. Please refresh.",
     "50545013": "The requested data exceeds the upper limit 100,000. Shard or query other dimensions.",
     "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.",
     "50546083": "The profiler directory does not exist.",
     "50548001": "Ascend AI Processor information query timed out.",
     "5054B080": "Incorrect parameter type. Please check the input parameter type.",

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

@@ -846,6 +846,7 @@
     "50545012": "张量数据不存在，请刷新。",
     "50545013": "请求的数据超过上限10万，请尝试切片或查询其他维度。",
     "50545014": "查询的张量数据已被新数据替换，请刷新。",
+    "50545016": "请求的张量过大，数值总个数超过1000万，无法显示。",
     "50546083": "性能数据目录不存在",
     "50548001": "昇腾AI处理器信息查询超时",
     "5054B080": "参数类型错误，请检查输入参数类型",

mindinsight/ui/src/services/fetcher.js

@@ -75,7 +75,7 @@ axios.interceptors.response.use(
 
         const ignoreCode = {
           ignoreError: ['50545005', '50546083'],
-          regardError: ['50545013', '50545014', '5054500D'],
+          regardError: ['50545013', '50545014', '50545016', '5054500D'],
         };
 
         if (ignoreCode.ignoreError.includes(errorCode)) {

mindinsight/ui/src/views/train-manage/tensor.vue

@@ -488,8 +488,8 @@ export default {
               }
             });
           },
-          () => {
-            sampleItem.showLoading = false;
+          (e) => {
+            this.freshDataErrorCallback(e, sampleItem, false);
           },
       );
     },
@@ -623,23 +623,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

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(() => {