From b5304a5b7cb050ac93c97e72539735380c45962a Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Mon, 30 Nov 2020 19:02:25 +0800
Subject: [PATCH] UI the error message of the image module is optimized

---
 mindinsight/ui/src/locales/en-us.json         |  2 +
 mindinsight/ui/src/locales/zh-cn.json         |  2 +
 mindinsight/ui/src/services/fetcher.js        |  2 +-
 .../ui/src/views/train-manage/image.vue       | 37 ++++++++++++++-----
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index e6369e73..ed5c32f4 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -189,6 +189,8 @@
   },
   "images": {
     "titleText": "Image",
+    "titleTip": "The Image only displays 10 images randomly.",
+    "imageErrorTip": "The current picture has been updated, Please wait until the data loading is complete.",
     "tagSelectTitle": "Tag Selection",
     "selectAll": "All",
     "open": "More",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 0485f49a..374f211c 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -188,6 +188,8 @@
   },
   "images": {
     "titleText": "图像",
+    "titleTip": "图像可视仅随机展示10张图片。",
+    "imageErrorTip": "当前图片被更新，请等待数据加载完后再查看。",
     "tagSelectTitle": "标签选择",
     "open": "展开",
     "close": "折叠",
diff --git a/mindinsight/ui/src/services/fetcher.js b/mindinsight/ui/src/services/fetcher.js
index c86f742c..133aca45 100644
--- a/mindinsight/ui/src/services/fetcher.js
+++ b/mindinsight/ui/src/services/fetcher.js
@@ -46,7 +46,7 @@ axios.interceptors.request.use(
 // Add a response interceptor
 axios.interceptors.response.use(
     function(response) {
-      if (typeof response.data === 'string') {
+      if (typeof response.data === 'string' && router.currentRoute.path !== '/train-manage/image') {
         const variant = new Date().getTime();
         response.data = JSON.parse(
             response.data
diff --git a/mindinsight/ui/src/views/train-manage/image.vue b/mindinsight/ui/src/views/train-manage/image.vue
index 00611306..31310f86 100644
--- a/mindinsight/ui/src/views/train-manage/image.vue
+++ b/mindinsight/ui/src/views/train-manage/image.vue
@@ -19,6 +19,18 @@ limitations under the License.
     <div class="image-bk">
       <div class="cl-title cl-image-title">
         <div class="cl-title-left">{{$t('images.titleText')}}
+          <el-tooltip placement="right-start"
+                      effect="light">
+            <div slot="content"
+                 class="tooltip-container">
+              <div class="cl-title-tip">
+                <div class="tip-part">
+                  {{$t('images.titleTip')}}
+                </div>
+              </div>
+            </div>
+            <i class="el-icon-info"></i>
+          </el-tooltip>
           <div class="path-message">
             <span>{{$t('symbols.leftbracket')}}</span>
             <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
@@ -392,16 +404,11 @@ export default {
             if (e.response && e.response.data && e.response.data.error_code) {
               sampleItem.curImgUrl = '';
               sampleItem.showErrMsg = true;
-              sampleItem.errMsg = this.$t('error')[e.response.data.error_code];
-            } else {
-              sampleItem.showErrMsg = false;
-              sampleItem.curImgUrl =
-              `${basePath}${this.imageBasePath}train_id=${encodeURIComponent(
-                  sampleItem.summaryId,
-              )}` +
-              `&tag=${encodeURIComponent(sampleItem.tagName)}&step=${
-                params.step
-              }&wt=${params.wt}`;
+              if (e.response.data.error_code === '5054500D') {
+                sampleItem.errMsg = this.$t('images.imageErrorTip');
+              } else {
+                sampleItem.errMsg = this.$t('error')[e.response.data.error_code];
+              }
             }
           },
       );
@@ -654,6 +661,16 @@ export default {
         font-weight: bold;
         vertical-align: bottom;
       }
+      .cl-title-tip {
+        padding: 10px;
+        .tip-part {
+          line-height: 20px;
+          word-break: normal;
+        }
+      }
+      .el-icon-info {
+        color: #6c7280;
+      }
     }
   }
   .title {