UI / Keep the same page index when returning to the training list page

mindinsight/ui/src/components/header.vue

@@ -108,6 +108,7 @@ export default {
       timeReloadValue: this.$store.state.timeReloadValue,
       newReloadValue: this.$store.state.timeReloadValue,
       showDebugger: window.enableDebugger,
+      path: null,
     };
   },
   computed: {
@@ -135,9 +136,26 @@ export default {
       return isChinese;
     },
   },
-  watch: {},
+  watch: {
+    'path'(newValue, oldValue) {
+      if (oldValue) {
+        this.clearPageIndex();
+      }
+    },
+  },
   mounted() {},
   methods: {
+    /**
+     * The logic of clear page index memory
+     */
+    clearPageIndex() {
+      if (sessionStorage.getItem('XAIPageIndex')) {
+        sessionStorage.removeItem('XAIPageIndex');
+      }
+      if (sessionStorage.getItem('summaryPageIndex')) {
+        sessionStorage.removeItem('summaryPageIndex');
+      }
+    },
     // click reload
     setReload() {
       this.$store.commit('clearToken');
@@ -191,17 +209,29 @@ export default {
     // get active menu item
     getActive() {
       const str = this.$route.path.split('/');
+      let path;
       if (str.length > 1) {
         if (!str[1]) {
           return;
         }
         if (str[1] === 'debugger') {
-          return this.$route.path;
+          path = '/debugger';
         } else if (str[1] === 'explain') {
-          return `/${str[1]}`;
+          path = '/explain';
+        } else {
+          path = '/summary-manage';
         }
+      } else {
+        path = '/summary-manage';
+      }
+      if (this.path) {
+        if (this.path !== path) {
+          this.path = path;
+        }
+      } else {
+        this.path = path;
       }
-      return '/summary-manage';
+      return path;
     },
     changeLanguage(lan) {
       localStorage.setItem('milang', lan);

mindinsight/ui/src/views/explain/summary-list.vue

@@ -96,7 +96,7 @@ limitations under the License.
       <div class="pagination-content">
         <el-pagination @current-change="currentPageChange"
                        @size-change="currentPagesizeChange"
-                       :current-page="pagination.currentPage"
+                       :current-page.sync="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="pagination.pageSizes"
                        :layout="pagination.layout"
@@ -126,7 +126,7 @@ export default {
       // table filter condition
       summaryList: [],
       pagination: {
-        currentPage: 1,
+        currentPage: null,
         pageSize: 20,
         pageSizes: [10, 20, 50],
         total: 0,
@@ -154,7 +154,10 @@ export default {
     document.onclick = null;
     document.onscroll = null;
   },
-  activated() {},
+  created() {
+    const pageIndex = sessionStorage.getItem('XAIPageIndex');
+    this.pagination.currentPage = pageIndex ? +pageIndex : 1;
+  },
   mounted() {
     document.title = `${this.$t('explain.explain')}-MindInsight`;
     this.$nextTick(() => {
@@ -178,7 +181,6 @@ export default {
       document.onscroll = () => {
         this.contextMenu.show = false;
       };
-
       const params = {
         limit: this.pagination.pageSize,
         offset: this.pagination.currentPage - 1,
@@ -195,9 +197,12 @@ export default {
               (res) => {
                 this.loading = false;
                 if (res && res.data && res.data.explain_jobs) {
-                  const summaryList = JSON.parse(
-                      JSON.stringify(res.data.explain_jobs),
-                  );
+                  const summaryList = JSON.parse(JSON.stringify(res.data.explain_jobs));
+                  if (params.offset > 0 && !summaryList.length) {
+                    this.currentPage.currentPage = 1;
+                    this.currentPageChange();
+                    return;
+                  }
                   summaryList.forEach((i) => {
                     i.update_time = i.update_time ? i.update_time : '--';
                   });
@@ -226,8 +231,10 @@ export default {
       };
       this.querySummaryList(params);
     },
-    currentPageChange(currentPage) {
-      this.pagination.currentPage = currentPage;
+    currentPageChange() {
+      if (this.pagination.currentPage > 1) {
+        sessionStorage.setItem('XAIPageIndex', this.pagination.currentPage);
+      }
       const params = {
         offset: this.pagination.currentPage - 1,
         limit: this.pagination.pageSize,
@@ -241,7 +248,6 @@ export default {
     goToSaliencyMap(row) {
       this.contextMenu.show = false;
       const trainId = row.train_id;
-
       this.$router.push({
         path: '/explain/saliency-map',
         query: {id: trainId},
@@ -258,7 +264,6 @@ export default {
       const trainId = row.train_id;
       const path = row.relative_path;
       const router = '/explain/conterfactual-interpretation';
-
       this.$router.push({
         path: router,
         query: {

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

@@ -115,7 +115,7 @@ limitations under the License.
       <div class="pagination-content">
         <el-pagination @current-change="currentPageChange"
                        @size-change="currentPagesizeChange"
-                       :current-page="pagination.currentPage"
+                       :current-page.sync="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="pagination.pageSizes"
                        :layout="pagination.layout"
@@ -209,7 +209,7 @@ export default {
         },
       },
       pagination: {
-        currentPage: 1,
+        currentPage: null,
         pageSize: 20,
         pageSizes: [10, 20, 50],
         total: 0,
@@ -237,7 +237,10 @@ export default {
     document.onclick = null;
     document.onscroll = null;
   },
-  activated() {},
+  created() {
+    const pageIndex = sessionStorage.getItem('summaryPageIndex');
+    this.pagination.currentPage = pageIndex ? +pageIndex : 1;
+  },
   mounted() {
     document.title = `${this.$t('summaryManage.summaryList')}-MindInsight`;
     this.$nextTick(() => {
@@ -278,9 +281,12 @@ export default {
               (res) => {
                 this.loading = false;
                 if (res && res.data && res.data.train_jobs) {
-                  const summaryList = JSON.parse(
-                      JSON.stringify(res.data.train_jobs),
-                  );
+                  const summaryList = JSON.parse(JSON.stringify(res.data.train_jobs));
+                  if (params.offset > 0 && !summaryList.length) {
+                    this.currentPage.currentPage = 1;
+                    this.currentPageChange();
+                    return;
+                  }
                   summaryList.forEach((i) => {
                     i.relative_path = i.relative_path ? i.relative_path : '--';
                     i.update_time = i.update_time ? i.update_time : '--';
@@ -295,6 +301,7 @@ export default {
                 } else {
                   this.currentFolder = '--';
                   this.pagination.total = 0;
+                  this.pagination.currentPage = 1;
                   this.summaryList = [];
                   this.disableState = true;
                 }
@@ -315,8 +322,10 @@ export default {
       };
       this.querySummaryList(params);
     },
-    currentPageChange(currentPage) {
-      this.pagination.currentPage = currentPage;
+    currentPageChange() {
+      if (this.pagination.currentPage > 1) {
+        sessionStorage.setItem('summaryPageIndex', this.pagination.currentPage);
+      }
       const params = {
         offset: this.pagination.currentPage - 1,
         limit: this.pagination.pageSize,
@@ -330,7 +339,6 @@ export default {
     goToTrainDashboard(row) {
       this.contextMenu.show = false;
       const trainId = encodeURIComponent(row.train_id);
-
       this.$router.push({
         path: '/train-manage/training-dashboard',
         query: {id: trainId},
@@ -353,7 +361,6 @@ export default {
       } else if (row.profiler_type === 'cluster_gpu') {
         router = '/profiling-gpu-cluster';
       }
-
       this.$router.push({
         path: router,
         query: {