From efb6bab28463d433a3c421a9c84d07a5ddce11ea Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Mon, 27 Jul 2020 21:10:18 +0800
Subject: [PATCH] UI add loading icon in training dashboard

---
 mindinsight/ui/src/locales/zh-cn.json         |  3 +-
 .../views/train-manage/training-dashboard.vue | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 30bc05d..4d17e55 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -100,7 +100,8 @@
     "samplingData": "数据抽样",
     "imagesampleSwitch": "切换标签",
     "invalidId": "无效的训练作业",
-    "summaryDirPath": "训练日志路径："
+    "summaryDirPath": "训练日志路径：",
+    "loadingTip": "加载中"
   },
   "scalar": {
     "titleText": "标量",
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index ca18a44..56338b0 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -21,6 +21,9 @@ limitations under the License.
       <div class="cl-dashboard-top-title">
         {{$t('trainingDashboard.trainingDashboardTitle')}}
       </div>
+      <div :title="$t('trainingDashboard.loadingTip')"
+           v-if="trainJobCached"
+           class="el-icon-loading loading-icon"></div>
       <div class="path-message">
         <span>{{$t('symbols.leftbracket')}}</span>
         <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
@@ -234,6 +237,12 @@ export default {
         mousedown: 'mousedown',
         mouseup: 'mouseup',
       },
+      trainJobCached: false,
+      cacheKey: {
+        notInCache: 'NOT_IN_CACHE',
+        caching: 'CACHING',
+        cached: 'CACHED',
+      },
     };
   },
   computed: {
@@ -262,6 +271,7 @@ export default {
         }
         this.getDatavisualPlugins(true);
         this.queryDatasetGraph();
+        this.queryTrainJobCacheState();
         setTimeout(() => {
           this.$store.commit('setIsReload', false);
         }, this.reloadStopTime);
@@ -349,6 +359,7 @@ export default {
         this.startAutoUpdate();
       }
       this.queryDatasetGraph();
+      this.queryTrainJobCacheState();
     },
 
     /**
@@ -504,6 +515,7 @@ export default {
         if (!Object.keys(this.allDatasetGraphData).length) {
           this.queryDatasetGraph();
         }
+        this.queryTrainJobCacheState();
       }, this.timeReloadValue * 1000);
     },
     /**
@@ -1941,6 +1953,31 @@ export default {
           .selectAll('title')
           .remove();
     },
+    /**
+    * Query the cachee status of training jonb
+    */
+    queryTrainJobCacheState() {
+      const params = {
+        train_id: this.trainingJobId,
+      };
+      RequestService.querySummaryList(params, true).then((response) => {
+        if (
+          response &&
+          response.data &&
+          response.data.train_jobs &&
+          response.data.train_jobs.length
+        ) {
+          const curTrain = response.data.train_jobs[0];
+          if (curTrain.cache_status !== this.cacheKey.cached) {
+            this.trainJobCached = true;
+          } else {
+            this.trainJobCached = false;
+          }
+        } else {
+          this.trainJobCached = false;
+        }
+      });
+    },
   },
 };
 </script>
@@ -1963,6 +2000,9 @@ export default {
       padding: 18px 16px;
       font-weight: bold;
     }
+    .loading-icon {
+      margin-left: 5px;
+    }
     .cl-dashboard-top-title {
       float: left;
       color: #000000;
-- 
GitLab