!435 UI display the error message in table area

Merge pull request !435 from 夏易凡/0710master

mindinsight/ui/src/components/gridTableSimple.vue

@@ -20,7 +20,11 @@ limitations under the License.
            class="error-msg-container">
         {{$t('components.gridIncorrectDataError')}}
       </div>
-      <div v-show="!fullData.length && updated && !incorrectData"
+      <div v-show="!incorrectData && requestError"
+           class="error-msg-container">
+        {{errorMsg}}
+      </div>
+      <div v-show="!fullData.length && updated && !incorrectData && !requestError"
            class="error-msg-container">
         {{$t('components.gridTableNoData')}}
       </div>
@@ -29,7 +33,7 @@ limitations under the License.
            class="grid-item"></div>
     </div>
     <div class="operate-container"
-         v-if="showOperate && fullData.length">
+         v-if="(showOperate && fullData.length) || requestError">
       <div class="filter-container"
            @keyup.enter="filterChange">
         <div v-for="(item, itemIndex) in filterArr"
@@ -114,6 +118,8 @@ export default {
       updated: false, // Updated
       scrollTop: false, // Wheather scroll to the top
       filterCorrect: true, // Wheather the dimension input is correct
+      requestError: false, // Exceeded the specification
+      errorMsg: '', // Error message
       viewResizeFlag: false, // Size reset flag
       // Accuray options
       accuracyArr: [
@@ -126,6 +132,7 @@ export default {
       ],
       // Table configuration items
       optionObj: {
+        enableColumnReorder: false,
         enableCellNavigation: true,
         frozenColumn: 0,
         frozenRow: 0,
@@ -348,6 +355,7 @@ export default {
      */
     updateGridData(newDataFlag, dimension, statistics, filterStr) {
       this.updated = true;
+      this.requestError = false;
       this.$nextTick(() => {
         if (!this.fullData || !this.fullData.length) {
           return;
@@ -369,7 +377,7 @@ export default {
      */
     resizeView() {
       if (this.gridObj) {
-        if (this.incorrectData) {
+        if (this.incorrectData || this.requestError) {
           this.viewResizeFlag = true;
         } else {
           this.$nextTick(() => {
@@ -385,6 +393,19 @@ export default {
     toggleFullScreen() {
       this.$emit('toggleFullScreen');
     },
+    /**
+     * Show Error message
+     * @param {String} errorMsg Error message
+     * @param {Array} dimension Array of dimension
+     * @param {String} filterStr String of dimension selection
+     */
+    showRequestErrorMessage(errorMsg, dimension, filterStr) {
+      this.errorMsg = errorMsg;
+      if (!this.filterArr.length) {
+        this.initializeFilterArr(dimension, filterStr);
+      }
+      this.requestError = true;
+    },
   },
   destroyed() {},
 };

mindinsight/ui/src/services/fetcher.js

@@ -61,6 +61,9 @@ axios.interceptors.response.use(
         } else if ( router.currentRoute.path === '/profiling/profiling-dashboard' &&
         error.config.headers.ignoreError ) {
           return Promise.reject(error);
+        } else if ( error.response.data.error_code.toString() === '50545013' &&
+        router.currentRoute.path === '/train-manage/tensor') {
+          return Promise.reject(error);
         }
         if (errorData[error.response.data.error_code]) {
           Vue.prototype.$message.error(errorData[error.response.data.error_code]);

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

@@ -117,6 +117,9 @@ limitations under the License.
                               :viewName="curViewName"
                               :axisName="curAxisName"
                               :fullData="sampleItem.curData"></histogramUntil>
+              <div class="loading-cover"
+                   v-if="sampleItem.showLoading">
+                <i class="el-icon-loading"></i></div>
             </div>
             <!-- Information display area -->
             <div class="sample-data-show"
@@ -378,6 +381,7 @@ export default {
                   tagName: tagName,
                   summaryName: this.trainingJobId,
                   show: false,
+                  showLoading: false,
                   sliderValue: 0,
                   newDataFlag: true,
                   totalStepNum: 0,
@@ -415,6 +419,7 @@ export default {
      * @param {Object} sampleItem The object that is being operated
      */
     filterChange(data, sampleItem) {
+      sampleItem.showLoading = true;
       sampleItem.filterStr = `[${data.toString()}]`;
       sampleItem.newDataFlag = true;
       this.freshtMartixData(sampleItem);
@@ -517,24 +522,30 @@ export default {
         tag: sampleItem.tagName,
         detail: 'histogram',
       };
-      RequestService.getTensorsSample(params).then((res) => {
-        if (!res || !res.data || !this.curDataType) {
-          return;
-        }
-        if (!res.data.tensors || !res.data.tensors.length) {
-          return;
-        }
-        const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
-        sampleItem.summaryName = resData.train_id;
-        // sampleItem.fullData = resData;
-        sampleItem.curData = this.formHistogramOriData(resData);
-        this.$nextTick(() => {
-          const elementItem = this.$refs[sampleItem.ref];
-          if (elementItem) {
-            elementItem[0].updateHistogramData();
-          }
-        });
-      });
+      RequestService.getTensorsSample(params).then(
+          (res) => {
+            sampleItem.showLoading = false;
+            if (!res || !res.data || !this.curDataType) {
+              return;
+            }
+            if (!res.data.tensors || !res.data.tensors.length) {
+              return;
+            }
+            const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
+            sampleItem.summaryName = resData.train_id;
+            // sampleItem.fullData = resData;
+            sampleItem.curData = this.formHistogramOriData(resData);
+            this.$nextTick(() => {
+              const elementItem = this.$refs[sampleItem.ref];
+              if (elementItem) {
+                elementItem[0].updateHistogramData();
+              }
+            });
+          },
+          () => {
+            sampleItem.showLoading = false;
+          },
+      );
     },
     /**
      * Obtain table data
@@ -549,9 +560,11 @@ export default {
       RequestService.getTensorsSample(params).then(
           (res) => {
             if (!res || !res.data || this.curDataType) {
+              sampleItem.showLoading = false;
               return;
             }
             if (!res.data.tensors.length) {
+              sampleItem.showLoading = false;
               return;
             }
             const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
@@ -567,6 +580,7 @@ export default {
               sampleItem.sliderValue = 0;
               sampleItem.totalStepNum = 0;
               this.clearMartixData(sampleItem);
+              sampleItem.showLoading = false;
               return;
             }
             const oldTotalStepNum = sampleItem.totalStepNum;
@@ -610,6 +624,7 @@ export default {
             sampleItem.sliderValue = 0;
             sampleItem.totalStepNum = 0;
             this.clearMartixData(sampleItem);
+            sampleItem.showLoading = false;
           },
       );
     },
@@ -628,6 +643,7 @@ export default {
       sampleItem.curMartixShowSliderValue = sampleItem.sliderValue;
       RequestService.getTensorsSample(params).then(
           (res) => {
+            sampleItem.showLoading = false;
             if (!res || !res.data || this.curDataType) {
               return;
             }
@@ -660,16 +676,27 @@ export default {
               sampleItem.newDataFlag = false;
             });
           },
-          () => {
-            this.clearMartixData(sampleItem);
+          (e) => {
+            let showLimitError = false;
+            if (
+              e.response &&
+            e.response.data &&
+            e.response.data.error_code &&
+            e.response.data.error_code.toString() === '50545013'
+            ) {
+              showLimitError = true;
+            }
+            this.clearMartixData(sampleItem, showLimitError);
+            sampleItem.showLoading = false;
           },
       );
     },
     /**
      * Clear table display
      * @param {Object} sampleItem The object that is being operated
+     * @param {Boolean} showLimitError Display request error message
      */
-    clearMartixData(sampleItem) {
+    clearMartixData(sampleItem, showLimitError) {
       sampleItem.curData = [];
       sampleItem.newDataFlag = true;
       let elementItem = null;
@@ -677,6 +704,13 @@ export default {
         elementItem = this.$refs[sampleItem.ref];
         if (elementItem) {
           elementItem[0].updateGridData();
+          if (showLimitError) {
+            elementItem[0].showRequestErrorMessage(
+                this.$t('error.50545013'),
+                sampleItem.formateData.value.dims,
+                sampleItem.filterStr,
+            );
+          }
         }
       });
     },
@@ -917,6 +951,7 @@ export default {
             tagName: tagName,
             summaryName: this.trainingJobId,
             show: false,
+            showLoading: false,
             sliderValue: 0,
             newDataFlag: true,
             totalStepNum: 0,
@@ -981,6 +1016,7 @@ export default {
         return;
       }
       sampleItem.sliderChangeTimer = setTimeout(() => {
+        sampleItem.showLoading = true;
         this.freshtMartixData(sampleItem);
       }, 500);
     },
@@ -1112,6 +1148,19 @@ export default {
           position: relative;
           background: #f0f3fa;
           overflow-x: hidden;
+          .loading-cover {
+            width: 100%;
+            height: 100%;
+            z-index: 9;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            background: white;
+            opacity: 0.5;
+            align-items: center;
+            justify-content: center;
+          }
         }
         .sample-data-show {
           padding: 32px 16px;

mindinsight/ui/src/views/train-manage/training-dashboard.vue

@@ -148,7 +148,9 @@ limitations under the License.
       </div>
       <div class="cl-dashboard-con-up"
            :class="!!tensorTag && !wrongPlugin ? '' : 'no-data-hover'"
-           @click="viewMoreTensors">
+           @mousedown="viewMoreTensors($event)"
+           @mouseup="viewMoreTensors($event)"
+           @click="viewMoreTensors($event)">
         <div class="cl-dashboard-title">{{$t("tensors.titleText")}}</div>
         <div class="cl-module">
           <div class="tensor-char-container"
@@ -220,6 +222,18 @@ export default {
       fileTag: '',
       tensorData: [],
       tensorTag: '',
+      tensorNewDataFlag: true,
+      tensorMouseData: {
+        timeStamp: 0,
+        pageX: 0,
+        pageY: 0,
+        isClick: false,
+      },
+      mouseEventKey: {
+        click: 'click',
+        mousedown: 'mousedown',
+        mouseup: 'mouseup',
+      },
     };
   },
   computed: {
@@ -413,17 +427,39 @@ export default {
     },
     /**
      * Viewing more tensors information
+     * @param {Object} event Mouse event
      */
-    viewMoreTensors() {
+    viewMoreTensors(event) {
       if (!this.tensorTag) {
         return;
       }
-      this.$router.push({
-        path: '/train-manage/tensor',
-        query: {
-          train_id: this.trainingJobId,
-        },
-      });
+      if (event.type === this.mouseEventKey.mousedown) {
+        this.tensorMouseData.isClick = false;
+        this.tensorMouseData.pageX = event.pageX;
+        this.tensorMouseData.pageY = event.pageY;
+      } else if (event.type === this.mouseEventKey.mouseup) {
+        // offset buffer is 3
+        const offsetBuffer = 3;
+        if (
+          Math.abs(event.pageX - this.tensorMouseData.pageX) <= offsetBuffer &&
+          Math.abs(event.pageY - this.tensorMouseData.pageY) <= offsetBuffer
+        ) {
+          this.tensorMouseData.isClick = true;
+          this.tensorMouseData.timeStamp = event.timeStamp;
+        }
+      } else if (event.type === this.mouseEventKey.click) {
+        if (
+          this.tensorMouseData.isClick &&
+          event.timeStamp === this.tensorMouseData.timeStamp
+        ) {
+          this.$router.push({
+            path: '/train-manage/tensor',
+            query: {
+              train_id: this.trainingJobId,
+            },
+          });
+        }
+      }
     },
     /**
      * Go to data.
@@ -828,11 +864,17 @@ export default {
       this.getSampleRandomly();
     },
     dealTensorData(tags) {
+      const oldTag = this.tensorTag;
       if (tags.length) {
         this.tensorTag = tags[0];
       } else {
         this.tensorTag = '';
       }
+      if (this.tensorTag !== oldTag) {
+        this.tensorNewDataFlag = true;
+      } else {
+        this.tensorNewDataFlag = false;
+      }
       if (this.tensorTag) {
         this.getTensorGridData();
       }
@@ -920,7 +962,7 @@ export default {
               const elementItem = this.$refs.tensorChart;
               if (elementItem) {
                 elementItem.updateGridData(
-                    true,
+                    this.tensorNewDataFlag,
                     curStepData.value.dims,
                     statistics,
                 );