!15 optimized ui exception scenarios according to error code

Merge pull request !15 from 潘慧/master

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

@@ -43,7 +43,6 @@
     "lossFunc": "损失函数",
     "learningRate": "学习率",
     "modelSize": "模型大小",
-    "50540002": "Json数据解析失败",
     "dataProcess": "数据处理"
   },
   "dataTraceback": {
@@ -123,21 +122,9 @@
     "queryLoading": "正在加载图，请稍候。",
     "fullScreen": "全屏",
     "tooManyNodes": "节点太多，打开失败",
-    "inputNodeName": "请输入节点名称",
-    "50540002": "当前训练作业已不存在，请选择其他训练作业进行查看。"
+    "inputNodeName": "请输入节点名称"
   },
   "error": {
-    "200": "请求成功。",
-    "202": "接受请求。",
-    "400": "请求错误。",
-    "401": "鉴权失败。",
-    "403": "没有操作权限。",
-    "404": "找不到资源。",
-    "408": "请求超时。",
-    "409": "请求冲突。",
-    "429": "请求数太多。",
-    "500": "服务器内部错误。",
-    "503": "服务不可用。",
     "50540000": "系统错误",
     "50540001": "参数类型错误，请检查请求参数类型是否都符合要求",
     "50540002": "参数值错误，请检查请求参数值是否都符合要求",
@@ -145,15 +132,20 @@
 
     "50545001": "API 路由资源不存在",
     "50545002": "请求API的HTTP方法错误",
+    "50545005": "训练作业不存在",
     "50545006": "Summary日志路径无效",
     "50545007": "Summary数据正在被加载，请等待Summary数据加载结束",
     "50545009": "查询的节点不在图中",
+    "5054500A": "训练作业ID进行URL解码失败",
+    "5054500C": "计算图不存在，请刷新",
+    "5054500D": "图片数据不存在，请刷新",
+    "5054500E": "标量数据不存在，请刷新",
 
     "50542082": "模型名称缺失",
     "50542085": "模型名称不合法",
     "50542215": "查询参数错误",
-    "50542216": "Summary log文件未找到",
-    "50542217": "Summary log路径错误",
+    "50542216": "Summary日志文件未找到",
+    "50542217": "Summary日志路径错误",
     "50542218": "筛选参数错误"
   }
 }

mindinsight/ui/src/router.js

@@ -35,7 +35,6 @@ export default new Router({
       component: () => import('./views/train-manage/summary-manage.vue'),
     },
     {
-      name: 'training-dashboard',
       path: '/train-manage/training-dashboard',
       component: () => import('./views/train-manage/training-dashboard.vue'),
     },

mindinsight/ui/src/services/fetcher.js

@@ -49,41 +49,21 @@ axios.interceptors.response.use(
       const errorData = i18n.messages[i18n.locale].error;
 
       // error returned by backend
-      if (error.response && error.response.data) {
-        if (error.response.data.error_code) {
-        // error code judgment
-          if (error.response.data.error_code.toString() === '50540002') {
-            if (router.currentRoute.path === '/train-manage/graph') {
-              const errorMsg = i18n.messages[i18n.locale].graph;
-              Vue.prototype.$message.error(errorMsg[error.response.data.error_code]);
-            } else if (error.config.headers.ignoreError
-              || router.currentRoute.path === '/train-manage/training-dashboard') {
-              return Promise.reject(error);
-            } else if (router.currentRoute.path === '/model-traceback') {
-              const errorMsg = i18n.messages[i18n.locale].modelTraceback;
-              Vue.prototype.$message.error(errorMsg[error.response.data.error_code]);
-            } else if (errorData[error.response.data.error_code]) {
-              Vue.prototype.$message.error(errorData[error.response.data.error_code]);
-            }
-          } else if (error.response.data.error_code.toString() === '50545006') {
+      if (error.response && error.response.data && error.response.data.error_code) {
+        if (error.response.data.error_code.toString() === '50540005' ||
+        error.response.data.error_code.toString() === '50545006') {
+          if (error.config.headers.ignoreError ||
+            router.currentRoute.path === '/train-manage/training-dashboard') {
             return Promise.reject(error);
-          } else if (error.response.data.error_code.toString() === '50542216' &&
-          router.currentRoute.path === '/train-manage/training-dashboard'
-          ) {
-            return Promise.reject(error);
-          } else if (errorData[error.response.data.error_code]) {
-            Vue.prototype.$message.error(errorData[error.response.data.error_code]);
           }
-          // return error data
+        } else if ( error.response.data.error_code.toString() === '50542216' &&
+        router.currentRoute.path === '/train-manage/training-dashboard') {
           return Promise.reject(error);
-        } else {
-          if (error.response.data.status) {
-            if (errorData[error.response.data.status]) {
-              Vue.prototype.$message.error(errorData[error.response.data.status]);
-            }
-            return Promise.reject(error);
-          }
         }
+        if (errorData[error.response.data.error_code]) {
+          Vue.prototype.$message.error(errorData[error.response.data.error_code]);
+        }
+        return Promise.reject(error);
       } else {
       // error returned by browser
         if (error.code === 'ECONNABORTED' && /^timeout/.test(error.message)) {
@@ -98,7 +78,9 @@ axios.interceptors.response.use(
           return false;
         } else {
         // show network error
-          Vue.prototype.$message.error(i18n.messages[i18n.locale].public.netWorkError);
+          Vue.prototype.$message.error(
+              i18n.messages[i18n.locale].public.netWorkError,
+          );
           return Promise.reject(error);
         }
       }

mindinsight/ui/src/services/request-service.js

@@ -91,11 +91,14 @@ export default {
   },
 
   // query single train job list(image/scalar/graph)
-  getSingleTrainJob(params) {
+  getSingleTrainJob(params, isIgnoreError) {
     return axios({
       method: 'get',
       url: 'v1/mindinsight/datavisual/single-job',
       params: params,
+      headers: {
+        ignoreError: isIgnoreError,
+      },
     });
   },
 

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

@@ -70,7 +70,7 @@ limitations under the License.
               <el-select @change="fileChange"
                          @visible-change="getSelectList"
                          :popper-append-to-body="false"
-                         class='search file-search'
+                         class='search'
                          v-model="fileSearchBox.value">
                 <el-option v-for="item in fileSearchBox.suggestions"
                            :key="item.value"
@@ -82,6 +82,7 @@ limitations under the License.
               <!-- Search box -->
               <Autocomplete class='search'
                             v-model="searchBox.value"
+                            :disabled="!fileSearchBox.value"
                             :fetch-suggestions="searchNodesNames"
                             :placeholder="$t('graph.inputNodeName')"
                             :popper-append-to-body="false"
@@ -373,6 +374,7 @@ export default {
       totalMemory: 16777216 * 2, // Memory size of the graph plug-in
       graphviz: null,
       graphvizTemp: null,
+      initOver: false,
     };
   },
   computed: {},
@@ -385,7 +387,7 @@ export default {
       return;
     }
     this.trainJobID = this.$route.query.train_id;
-    this.getDatavisualPlugins(this.queryGraphData);
+    this.getDatavisualPlugins();
     window.onresize = () => {
       if (this.graphDom.el) {
         this.initGraphRectData();
@@ -813,14 +815,14 @@ export default {
     },
     /**
      * To obtain datavisual plugins
-     * @param {Function} callback Call after get data visual plugins.
      */
-    getDatavisualPlugins(callback) {
+    getDatavisualPlugins() {
       const params = {
         train_id: this.trainJobID,
       };
       RequestService.getDatavisualPlugins(params)
           .then((res) => {
+            this.fileSearchBox.suggestions = [];
             if (
               !res ||
             !res.data ||
@@ -828,21 +830,27 @@ export default {
             !res.data.plugins.graph ||
             !res.data.plugins.graph.length
             ) {
+              this.initOver = true;
               return;
             }
-            this.fileSearchBox.suggestions = [];
             const tags = res.data.plugins.graph;
+            let hasFileSearchValue = false;
             tags.forEach((k) => {
               this.fileSearchBox.suggestions.push({
                 value: k,
               });
+              hasFileSearchValue = k === this.fileSearchBox.value || hasFileSearchValue;
             });
-            this.fileSearchBox.value = this.fileSearchBox.value || tags[0];
-            if (callback) {
-              callback();
+            if (!this.initOver) {
+              this.initOver = true;
+              this.fileSearchBox.value = tags.length ? tags[0] : '';
+              this.queryGraphData();
+            } else if (!hasFileSearchValue) {
+              this.fileSearchBox.value = '';
             }
           })
           .catch(() => {
+            this.initOver = true;
             this.loading.show = false;
           });
     },

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

@@ -257,7 +257,7 @@ export default {
         if (this.isTimeReload) {
           this.autoUpdateSamples();
         }
-        this.updateAllData();
+        this.updateAllData(false);
       }
     },
     /**
@@ -274,7 +274,10 @@ export default {
         this.stopUpdateSamples();
       }
     },
-    timeReloadValue(newVal) {
+    /**
+     *The refresh time is changed
+     */
+    timeReloadValue() {
       this.autoUpdateSamples();
     },
   },
@@ -295,6 +298,10 @@ export default {
   mounted() {
     this.getCharMainContentwidth();
     this.getTagAndRunList();
+    // Automatic refresh
+    if (this.isTimeReload) {
+      this.autoUpdateSamples();
+    }
   },
 
   methods: {
@@ -306,7 +313,7 @@ export default {
         plugin_name: 'image',
         train_id: this.trainingJobId,
       };
-      RequestService.getSingleTrainJob(params)
+      RequestService.getSingleTrainJob(params, false)
           .then((res) => {
             if (!res || !res.data || !res.data.train_jobs) {
               this.initOver = true;
@@ -371,11 +378,6 @@ export default {
 
             // Obtains data on the current page
             this.getCurPageDataArr();
-
-            // Automatic refresh
-            if (this.isTimeReload) {
-              this.autoUpdateSamples();
-            }
           }, this.requestErrorCallback)
           .catch((e) => {
             this.$message.error(this.$t('public.dataError'));
@@ -445,8 +447,13 @@ export default {
                 ];
               }
               this.$forceUpdate();
-            })
-            .catch((e) => {});
+            }, (e) => {
+              sampleItem.totalStepNum = 0;
+              sampleItem.sliderValue = 0;
+              sampleItem.curStep = '';
+              sampleItem.curImgUrl = '';
+              sampleItem.curTime = '';
+            }).catch((e) => {});
       });
     },
     /**
@@ -880,13 +887,14 @@ export default {
     },
     /**
      * Update all data.
+     * @param {Boolean} ignoreError whether ignore error tip
      */
-    updateAllData() {
+    updateAllData(ignoreError) {
       const params = {
         plugin_name: 'image',
         train_id: this.trainingJobId,
       };
-      RequestService.getSingleTrainJob(params)
+      RequestService.getSingleTrainJob(params, ignoreError)
           .then((res) => {
             if (this.isReloading) {
               this.$store.commit('setIsReload', false);
@@ -927,7 +935,7 @@ export default {
       }
       this.autoUpdateTimer = setInterval(() => {
         this.$store.commit('clearToken');
-        this.updateAllData();
+        this.updateAllData(true);
       }, this.timeReloadValue * 1000);
     },
     /**

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -509,7 +509,7 @@ export default {
         backgroundColor: 'white',
         parallelAxis: parallelAxis,
         parallel: {
-          top: 20,
+          top: 25,
           left: 50,
           right: 80,
           bottom: 10,

mindinsight/ui/src/views/train-manage/scalar-compare.vue

@@ -564,7 +564,11 @@ export default {
           ajaxArr.push(this.addAjax(params, yIndex));
         });
 
-        Promise.all(ajaxArr)
+        Promise.all(ajaxArr.map(function(promiseItem) {
+          return promiseItem.catch(function(err) {
+            return err;
+          });
+        }))
             .then((res) => {
               if (!res) {
                 return;
@@ -701,7 +705,7 @@ export default {
             formatter(value) {
               const symbol = Math.abs(value);
               if (symbol.toString().length > 6) {
-                return value.toExponential(0);
+                return value.toExponential(4);
               } else if (value >= 1000 || value <= -1000) {
                 return parseFloat((value / 1000).toFixed(2)) + 'k';
               } else if (value > 0) {
@@ -752,8 +756,8 @@ export default {
           show: false,
         },
         grid: {
-          left: 60,
-          right: 60,
+          left: 80,
+          right: 80,
         },
         xAxis: [
           {
@@ -953,7 +957,7 @@ export default {
       }
       const symbol = Math.abs(value);
       if (symbol.toString().length > 6) {
-        return value.toExponential(2);
+        return value.toExponential(4);
       } else if (value > 0) {
         return value;
       } else {

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

@@ -268,7 +268,7 @@ export default {
         if (this.isTimeReload) {
           this.autoUpdateSamples();
         }
-        this.updateAllData();
+        this.updateAllData(false);
       }
     },
     /**
@@ -285,15 +285,8 @@ export default {
       }
     },
 
-    timeReloadValue(newVal) {
-      if (this.autoUpdateTimer) {
-        clearInterval(this.autoUpdateTimer);
-        this.autoUpdateTimer = null;
-      }
-      this.autoUpdateTimer = setInterval(() => {
-        this.$store.commit('clearToken');
-        this.updateAllData();
-      }, newVal * 1000);
+    timeReloadValue() {
+      this.autoUpdateSamples();
     },
   },
   destroyed() {
@@ -343,6 +336,11 @@ export default {
       this.getScalarsList();
 
       this.firstNum = 1;
+
+      // auto refresh
+      if (this.isTimeReload) {
+        this.autoUpdateSamples();
+      }
     });
   },
   methods: {
@@ -354,7 +352,7 @@ export default {
         plugin_name: 'scalar',
         train_id: this.trainingJobId,
       };
-      RequestService.getSingleTrainJob(params)
+      RequestService.getSingleTrainJob(params, false)
           .then((res) => {
           // error;
             if (
@@ -436,11 +434,6 @@ export default {
               // Refresh the chart data on the current page
               this.freshCurPageData();
             }
-
-            // auto refresh
-            if (this.isTimeReload) {
-              this.autoUpdateSamples();
-            }
           }, this.requestErrorCallback)
           .catch((e) => {
             this.$message.error(this.$t('public.dataError'));
@@ -506,22 +499,28 @@ export default {
 
       promiseArr.push(this.addPromise(params));
 
-      Promise.all(promiseArr)
+      Promise.all(promiseArr.map(function(promiseItem) {
+        return promiseItem.catch(function(err) {
+          return err;
+        });
+      }))
           .then((res) => {
           // error
             if (!res || !res.length) {
               return;
             }
-            if (sampleObject.charObj) {
-              sampleObject.charObj.showLoading();
-            }
             let scalarIndex = 0;
             let hasInvalidData = false;
             for (let i = 0; i < res.length; i++) {
               if (!res[i] || !res[i].data) {
+                sampleObject.charObj.clear();
                 return;
               }
 
+              if (sampleObject.charObj) {
+                sampleObject.charObj.showLoading();
+              }
+
               const resData = res[i].data;
 
               const tempObject = {
@@ -764,7 +763,7 @@ export default {
               }
               const symbol = Math.abs(value);
               if (symbol.toString().length > 6) {
-                return value.toExponential(0);
+                return value.toExponential(4);
               } else if (value >= 1000 || value <= -1000) {
                 return parseFloat((value / 1000).toFixed(2)) + 'k';
               } else if (value > 0) {
@@ -776,7 +775,8 @@ export default {
           },
         },
         grid: {
-          left: 60,
+          left: 80,
+          right: 10,
         },
         animation: true,
         dataZoom: [
@@ -910,7 +910,6 @@ export default {
         },
         toolbox: {
           top: 20,
-          right: '10%',
 
           emphasis: {
             iconStyle: {
@@ -1519,14 +1518,15 @@ export default {
 
     /**
      * Updating Sliding Block Data
+     * @param {Boolean} ignoreError whether ignore error tip
      */
 
-    updateAllData() {
+    updateAllData(ignoreError) {
       const params = {
         plugin_name: 'scalar',
         train_id: this.trainingJobId,
       };
-      RequestService.getSingleTrainJob(params)
+      RequestService.getSingleTrainJob(params, ignoreError)
           .then((res) => {
             if (this.isReloading) {
               this.$store.commit('setIsReload', false);
@@ -1600,7 +1600,7 @@ export default {
       }
       this.autoUpdateTimer = setInterval(() => {
         this.$store.commit('clearToken');
-        this.updateAllData();
+        this.updateAllData(true);
       }, this.timeReloadValue * 1000);
     },
 
@@ -1728,7 +1728,7 @@ export default {
       }
       const symbol = Math.abs(value);
       if (symbol.toString().length > 6) {
-        return value.toExponential(2);
+        return value.toExponential(4);
       } else if (value > 0) {
         return value;
       } else {
@@ -2022,6 +2022,7 @@ export default {
     overflow-y: auto;
     display: flex;
     flex-wrap: wrap;
+    padding-right: 10px;
 
     .data-content {
       display: flex;

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

@@ -24,12 +24,12 @@ limitations under the License.
     </div>
     <div class="cl-dashboard-center">
       <div class="cl-dashboard-con-up"
-           :class="curPageArr.length ? '' : 'no-data-hover'"
+           :class="curPageArr.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="viewMoreScalars">
         <div class="cl-dashboard-title"> {{$t("trainingDashboard.trainingScalar")}}</div>
         <div class="cl-module">
           <div class="cl-scalar-tagName"
-               v-if="curPageArr.length">
+               v-if="curPageArr.length && !wrongPlugin">
             <div v-for="(sampleItem,index) in curPageArr"
                  :key="index"
                  :class="['tagNameLeft',index==1? 'tagNameRight':'']">
@@ -37,10 +37,10 @@ limitations under the License.
             </div>
           </div>
           <div id="module-chart"
-               v-if="curPageArr.length"
+               v-if="curPageArr.length && !wrongPlugin"
                key="chart-data"></div>
           <div class="no-data-img"
-               v-if="!curPageArr.length"
+               v-if="!curPageArr.length || wrongPlugin"
                key="no-chart-data">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
@@ -51,7 +51,7 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="firstFloorNodes.length ? '' : 'no-data-hover'"
+           :class="firstFloorNodes.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="jumpToGraph">
         <div class="cl-dashboard-title">
           {{$t("trainingDashboard.calculationChart")}}
@@ -59,9 +59,9 @@ limitations under the License.
         <div class="cl-module">
           <div id="graph"
                class="graph"
-               v-show="firstFloorNodes.length"></div>
+               v-show="firstFloorNodes.length && !wrongPlugin"></div>
           <div class="no-data-img"
-               v-show="!firstFloorNodes.length">
+               v-show="!firstFloorNodes.length || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
             <p class='no-data-text'>
@@ -71,16 +71,16 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="showDatasetGraph ? '' : 'no-data-hover'"
+           :class="showDatasetGraph && !wrongPlugin ? '' : 'no-data-hover'"
            @click="jumpToDataMap">
         <div class="cl-dashboard-title"> {{$t("trainingDashboard.dataMap")}}</div>
         <div class="cl-module">
           <div id="dataMapGraph"
                class="graph"
-               v-show="showDatasetGraph"></div>
+               v-show="showDatasetGraph && !wrongPlugin"></div>
           <div class="no-data-img"
                key="no-chart-data"
-               v-show="!showDatasetGraph">
+               v-show="!showDatasetGraph || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
             <p class='no-data-text'>
@@ -90,7 +90,7 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="originImageDataArr.length ? '' : 'no-data-hover'"
+           :class="originImageDataArr.length && !wrongPlugin ? '' : 'no-data-hover'"
            @click="linkToImage($event)">
         <div class="cl-dashboard-title">
           <div class="cl-dashboard-title-left"> {{$t("trainingDashboard.samplingData")}}</div>
@@ -104,15 +104,15 @@ limitations under the License.
         </div>
         <div class="cl-module">
           <div class="image-container"
-               :class="originImageDataArr.length ? '' : 'no-data-img'">
+               :class="originImageDataArr.length && !wrongPlugin ? '' : 'no-data-img'">
             <img class="sample-img select-disable"
                  :src="curImageShowSample.curImgUrl"
-                 v-if="originImageDataArr.length">
+                 v-if="originImageDataArr.length && !wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt=""
-                 v-if=" !originImageDataArr.length">
+                 v-if="!originImageDataArr.length || wrongPlugin">
             <p class='no-data-text'
-               v-if=" !originImageDataArr.length">
+               v-if=" !originImageDataArr.length || wrongPlugin">
               {{$t("public.noData")}}
             </p>
           </div>
@@ -157,6 +157,7 @@ export default {
       showDatasetGraph: false,
       datasetGraphviz: {},
       reloadStopTime: 1000,
+      wrongPlugin: false,
     };
   },
   computed: {
@@ -268,20 +269,30 @@ export default {
         train_id: this.trainingJobId,
         manual_update: fromInit || false,
       };
-      RequestService.getDatavisualPlugins(params).then((res) => {
-        if (!res || !res.data || !res.data.plugins) {
-          return;
-        }
-        const data = res.data.plugins;
-        const imageTags = data.image || [];
-        const scalarTags = data.scalar || [];
-        const graphIds = data.graph || [];
-        this.dealImageData(imageTags);
-        this.getScalarList(scalarTags);
-        if (!this.firstFloorNodes.length && graphIds.length) {
-          this.queryGraphData();
-        }
-      });
+      RequestService.getDatavisualPlugins(params)
+          .then((res) => {
+            this.wrongPlugin = false;
+            if (!res || !res.data || !res.data.plugins) {
+              return;
+            }
+            const data = res.data.plugins;
+            const imageTags = data.image || [];
+            const scalarTags = data.scalar || [];
+            const graphIds = data.graph || [];
+            this.dealImageData(imageTags);
+            this.getScalarList(scalarTags);
+            if (!this.firstFloorNodes.length && graphIds.length) {
+              this.queryGraphData();
+            }
+          })
+          .catch((error)=>{
+            if (!error.response || !error.response.data || !error.response.data.error_code) {
+              return;
+            }
+            if (error.response.data.error_code.toString() === '50545005') {
+              this.wrongPlugin = true;
+            }
+          });
     },
 
     /**
@@ -369,7 +380,7 @@ export default {
         plugin_name: 'scalar',
         train_id: this.trainingJobId,
       };
-      RequestService.getSingleTrainJob(params)
+      RequestService.getSingleTrainJob(params, true)
           .then((res) => {
             if (
               !res ||
@@ -598,13 +609,14 @@ export default {
       const tempOption = {
         legend: {
           data: legendData,
+          selectedMode: false,
           icon: 'circle',
           bottom: 0,
         },
         grid: {
           top: 20,
           bottom: 50,
-          left: 60,
+          left: 66,
           right: 60,
         },
         xAxis: [
@@ -1448,7 +1460,6 @@ export default {
       z-index: 999;
       line-height: 22px;
       display: flex;
-      margin-top: 18px;
       font-weight: 600;
       .tagNameLeft {
         text-align: left;
@@ -1533,7 +1544,7 @@ export default {
   // Public Style End
 
   #module-chart {
-    height: calc(100% - 60px);
+    height: calc(100% - 22px);
     canvas {
       cursor: pointer;
     }