From 03bde417d17a40381c9078a67f2ec81cf4988c2e Mon Sep 17 00:00:00 2001
From: ph <panhui3@huawei.com>
Date: Fri, 6 Nov 2020 15:25:04 +0800
Subject: [PATCH] UI support list page size setting

---
 .../ui/src/views/explain/summary-list.vue     | 19 ++++--
 .../ui/src/views/profiling-gpu/operator.vue   | 48 +++++++++++----
 .../ui/src/views/profiling/operator.vue       | 60 ++++++++++++++-----
 .../src/views/train-manage/data-traceback.vue | 24 ++++++--
 .../views/train-manage/model-traceback.vue    | 20 +++++--
 .../src/views/train-manage/summary-manage.vue | 15 ++++-
 6 files changed, 139 insertions(+), 47 deletions(-)

diff --git a/mindinsight/ui/src/views/explain/summary-list.vue b/mindinsight/ui/src/views/explain/summary-list.vue
index 43eaa711..26ff9a2a 100644
--- a/mindinsight/ui/src/views/explain/summary-list.vue
+++ b/mindinsight/ui/src/views/explain/summary-list.vue
@@ -70,10 +70,6 @@ limitations under the License.
                       @contextmenu.prevent="rightClick(scope.row, $event, 0)"
                       @click.stop="goToSaliencyMap(scope.row)">
                   {{$t('explain.title')}} </span>
-                <!-- <span class="menu-item operate-btn"
-                      @contextmenu.prevent="rightClick(scope.row, $event, 1)"
-                      @click.stop="goToConterfactualinterpretation(scope.row)">
-                  {{$t('explain.conterfactualInterpretation')}} </span> -->
               </template>
             </el-table-column>
           </el-table>
@@ -83,8 +79,10 @@ limitations under the License.
       <!--   outer Page   -->
       <div class="pagination-content">
         <el-pagination @current-change="currentPageChange"
+                       @size-change="currentPagesizeChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
+                       :page-sizes="pagination.pageSizes"
                        :layout="pagination.layout"
                        :total="pagination.total"
                        class="page">
@@ -113,9 +111,10 @@ export default {
       summaryList: [],
       pagination: {
         currentPage: 1,
-        pageSize: 16,
+        pageSize: 20,
+        pageSizes: [10, 20, 50],
         total: 0,
-        layout: 'total, prev, pager, next, jumper',
+        layout: 'total, sizes, prev, pager, next, jumper',
       },
       contextMenu: {
         show: false,
@@ -203,6 +202,14 @@ export default {
             this.loading = false;
           });
     },
+    currentPagesizeChange(pageSize) {
+      this.pagination.pageSize = pageSize;
+      const params = {
+        offset: this.pagination.currentPage - 1,
+        limit: this.pagination.pageSize,
+      };
+      this.querySummaryList(params);
+    },
     currentPageChange(currentPage) {
       this.pagination.currentPage = currentPage;
       const params = {
diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue
index 21b0adc5..df1075eb 100644
--- a/mindinsight/ui/src/views/profiling-gpu/operator.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/operator.vue
@@ -114,8 +114,10 @@ limitations under the License.
                     </el-table>
                     <el-pagination :current-page="props.row.opDetailPage.offset + 1"
                                    :page-size="props.row.opDetailPage.limit"
+                                   :page-sizes="[10, 20, 50]"
                                    @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
-                                   layout="total, prev, pager, next, jumper"
+                                   @size-change="(...args)=>{opDetailPageSizeChange(props.row, ...args)}"
+                                   layout="total, sizes, prev, pager, next, jumper"
                                    :total="props.row.pageTotal">
                     </el-pagination>
                     <div class="clear"></div>
@@ -162,8 +164,10 @@ limitations under the License.
                            v-if="opAllTypeList.opDetailList.length"
                            :current-page="opAllTypeList.opDetailPage.offset + 1"
                            :page-size="opAllTypeList.opDetailPage.limit"
+                           :page-sizes="[10, 20, 50]"
                            @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
-                           layout="total, prev, pager, next, jumper"
+                           @size-change="(...args)=>{opDetailPageSizeChange(opAllTypeList, ...args)}"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="opAllTypeList.pageTotal">
             </el-pagination>
           </div>
@@ -244,8 +248,10 @@ limitations under the License.
             <el-pagination v-if="coreList.opDetailList.length"
                            :current-page="coreList.opDetailPage.offset + 1"
                            :page-size="coreList.opDetailPage.limit"
-                           @current-change="(...args)=>{opCorePageChange(coreList, ...args)}"
-                           layout="total, prev, pager, next, jumper"
+                           :page-sizes="[10, 20, 50]"
+                           @current-change="opCorePageChange"
+                           @size-change="opCorePageSizeChange"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="coreList.pageTotal">
             </el-pagination>
           </div>
@@ -296,7 +302,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {
@@ -310,7 +316,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {},
@@ -465,7 +471,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {
@@ -493,7 +499,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {},
@@ -529,7 +535,7 @@ export default {
                     opDetailCol: [],
                     opDetailPage: {
                       offset: 0,
-                      limit: 15,
+                      limit: 10,
                     },
                     pageTotal: 0,
                     op_filter_condition: {
@@ -705,12 +711,30 @@ export default {
       this.getOperatorDetailList(row, false);
     },
     /**
-     * Core list page change
+     * Operator detail list page size change
      * @param {Object} row table cell
+     * @param {Number} pageSize current page
+     */
+    opDetailPageSizeChange(row, pageSize) {
+      row.opDetailPage.offset = 0;
+      row.opDetailPage.limit = pageSize;
+      this.getOperatorDetailList(row, false);
+    },
+    /**
+     * Core list page change
      * @param {Number} pageIndex current page
      */
-    opCorePageChange(row, pageIndex) {
-      row.opDetailPage.offset = pageIndex - 1;
+    opCorePageChange(pageIndex) {
+      this.coreList.opDetailPage.offset = pageIndex - 1;
+      this.getCoreList(false);
+    },
+    /**
+     * Core list page size change
+     * @param {Number} pageSize current page size
+     */
+    opCorePageSizeChange(pageSize) {
+      this.coreList.opDetailPage.offset = 0;
+      this.coreList.opDetailPage.limit = pageSize;
       this.getCoreList(false);
     },
     /**
diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue
index a1bf7488..f178c1d1 100644
--- a/mindinsight/ui/src/views/profiling/operator.vue
+++ b/mindinsight/ui/src/views/profiling/operator.vue
@@ -113,8 +113,10 @@ limitations under the License.
                     </el-table>
                     <el-pagination :current-page="props.row.opDetailPage.offset + 1"
                                    :page-size="props.row.opDetailPage.limit"
+                                   :page-sizes="[10, 20, 50]"
                                    @current-change="(...args)=>{opDetailPageChange(props.row, ...args)}"
-                                   layout="total, prev, pager, next, jumper"
+                                   @size-change="(...args)=>{opDetailPageSizeChange(props.row, ...args)}"
+                                   layout="total, sizes, prev, pager, next, jumper"
                                    :total="props.row.pageTotal">
                     </el-pagination>
                     <div class="clear"></div>
@@ -160,8 +162,10 @@ limitations under the License.
                            v-if="opAllTypeList.opDetailList.length"
                            :current-page="opAllTypeList.opDetailPage.offset + 1"
                            :page-size="opAllTypeList.opDetailPage.limit"
+                           :page-sizes="[10, 20, 50]"
                            @current-change="(...args)=>{opDetailPageChange(opAllTypeList, ...args)}"
-                           layout="total, prev, pager, next, jumper"
+                           @size-change="(...args)=>{opDetailPageSizeChange(opAllTypeList, ...args)}"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="opAllTypeList.pageTotal">
             </el-pagination>
           </div>
@@ -268,8 +272,10 @@ limitations under the License.
                     </el-table>
                     <el-pagination :current-page="props.row.opDetailPage.offset + 1"
                                    :page-size="props.row.opDetailPage.limit"
+                                   :page-sizes="[10, 20, 50]"
                                    @current-change="(...args)=>{opCpuDetailPageChange(props.row, ...args)}"
-                                   layout="total, prev, pager, next, jumper"
+                                   @size-change="(...args)=>{opCpuDetailPageSizeChange(props.row, ...args)}"
+                                   layout="total, sizes, prev, pager, next, jumper"
                                    :total="props.row.pageTotal">
                     </el-pagination>
                     <div class="clear"></div>
@@ -310,11 +316,13 @@ limitations under the License.
               </el-table-column>
             </el-table>
             <el-pagination v-show="cpuStatisticType"
-                            v-if="opCpuAllTypeList.opDetailList.length"
+                           v-if="opCpuAllTypeList.opDetailList.length"
                            :current-page="opCpuAllTypeList.opDetailPage.offset + 1"
                            :page-size="opCpuAllTypeList.opDetailPage.limit"
+                           :page-sizes="[10, 20, 50]"
                            @current-change="(...args)=>{opCpuDetailPageChange(opCpuAllTypeList, ...args)}"
-                           layout="total, prev, pager, next, jumper"
+                           @size-change="(...args)=>{opCpuDetailPageSizeChange(opCpuAllTypeList, ...args)}"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="opCpuAllTypeList.pageTotal">
             </el-pagination>
           </div>
@@ -393,7 +401,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {
@@ -407,7 +415,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {},
@@ -555,7 +563,10 @@ export default {
       this.$nextTick(() => {
         const item = this.$refs['expandCpuChild'];
         if (item && this.curCpuActiveRow.rowItem) {
-          item.sort(this.curCpuActiveRow.childProp, this.curCpuActiveRow.childOrder);
+          item.sort(
+              this.curCpuActiveRow.childProp,
+              this.curCpuActiveRow.childOrder,
+          );
         }
       });
     },
@@ -578,7 +589,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {},
@@ -603,7 +614,7 @@ export default {
         pageTotal: 0,
         opDetailPage: {
           offset: 0,
-          limit: 15,
+          limit: 10,
         },
         op_filter_condition: {},
         op_sort_condition: {},
@@ -639,7 +650,7 @@ export default {
                     opDetailCol: [],
                     opDetailPage: {
                       offset: 0,
-                      limit: 15,
+                      limit: 10,
                     },
                     pageTotal: 0,
                     op_filter_condition: {
@@ -778,7 +789,7 @@ export default {
                     opDetailCol: [],
                     opDetailPage: {
                       offset: 0,
-                      limit: 15,
+                      limit: 10,
                     },
                     pageTotal: 0,
                     op_filter_condition: {
@@ -809,10 +820,7 @@ export default {
                   this.cpuCharts.device_id = this.currentCard;
                   this.cpuCharts.data = [];
                   res.data.object.forEach((k) => {
-                    if (
-                      this.cpuCharts.data &&
-                    this.cpuCharts.data.length < 19
-                    ) {
+                    if (this.cpuCharts.data && this.cpuCharts.data.length < 19) {
                       this.cpuCharts.data.push({
                         name: k[0],
                         value: k[1],
@@ -896,6 +904,16 @@ export default {
       row.opDetailPage.offset = pageIndex - 1;
       this.getCoreDetailList(row, false);
     },
+    /**
+     * Operator detail list page size change
+     * @param {Object} row table cell
+     * @param {Number} pageSize current page size
+     */
+    opDetailPageSizeChange(row, pageSize) {
+      row.opDetailPage.offset = 0;
+      row.opDetailPage.limit = pageSize;
+      this.getCoreDetailList(row, false);
+    },
     /**
      * Cpu list page change
      * @param {Object} row table cell
@@ -905,6 +923,16 @@ export default {
       row.opDetailPage.offset = pageIndex - 1;
       this.getCpuDetailList(row, false);
     },
+    /**
+     * Cpu list page size change
+     * @param {Object} row table cell
+     * @param {Number} pageSize current page size
+     */
+    opCpuDetailPageSizeChange(row, pageSize) {
+      row.opDetailPage.offset = 0;
+      row.opDetailPage.limit = pageSize;
+      this.getCpuDetailList(row, false);
+    },
     /**
      * Get core list by search
      */
diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue
index cdddb335..4019d4c3 100644
--- a/mindinsight/ui/src/views/train-manage/data-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue
@@ -226,8 +226,10 @@ limitations under the License.
           </el-table>
           <div class="pagination-container">
             <el-pagination @current-change="handleCurrentChange"
+                           @size-change="currentPagesizeChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
+                           :page-sizes="pagination.pageSizes"
                            :layout="pagination.layout"
                            :total="pagination.total">
             </el-pagination>
@@ -446,9 +448,10 @@ export default {
       // Page data
       pagination: {
         currentPage: 1,
-        pageSize: 8,
+        pageSize: 10,
+        pageSizes: [10, 20, 50],
         total: 0,
-        layout: 'total, prev, pager, next, jumper',
+        layout: 'total, sizes, prev, pager, next, jumper',
       },
       // Summary path column
       dirPathList: ['summary_dir'],
@@ -1882,7 +1885,14 @@ export default {
         this.queryLineagesData(params);
       }, this.delayTime);
     },
-
+    /**
+     * Setting Table Data.Table flip
+     * @param {Number} pageSize
+     */
+    currentPagesizeChange(pageSize) {
+      this.pagination.pageSize = pageSize;
+      this.handleCurrentChange(this.pagination.currentPage);
+    },
     /**
      * Setting Table Data.Table flip
      * @param {Number} val
@@ -2136,9 +2146,11 @@ export default {
   overflow-y: auto;
   position: relative;
   background: #fff;
-  .el-select > .el-input {
-    width: 280px !important;
-    max-width: 500px !important;
+  .select-container {
+    .el-select > .el-input {
+      width: 280px !important;
+      max-width: 500px !important;
+    }
   }
   .el-table th.is-leaf {
     background: #f5f7fa;
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index 60c235af..8600bc08 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue
@@ -402,8 +402,10 @@ limitations under the License.
           </el-table>
           <div class="pagination-container">
             <el-pagination @current-change="pagination.pageChange"
+                           @size-change="pagination.currentPagesizeChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
+                           :page-sizes="pagination.pageSizes"
                            :layout="pagination.layout"
                            :total="pagination.total">
             </el-pagination>
@@ -625,10 +627,12 @@ export default {
       },
       pagination: {
         currentPage: 1,
-        pageSize: 8,
+        pageSize: 10,
+        pageSizes: [10, 20, 50],
         total: 0,
-        layout: 'total, prev, pager, next, jumper',
+        layout: 'total, sizes, prev, pager, next, jumper',
         pageChange: {},
+        currentPagesizeChange: {},
       },
       chartFilter: {}, // chart filter condition
       tableFilter: {lineage_type: {in: ['model']}}, // table filter condition
@@ -677,6 +681,10 @@ export default {
       this.pagination.currentPage = page;
       this.queryLineagesData(false);
     };
+    this.pagination.currentPagesizeChange = (pageSize) => {
+      this.pagination.pageSize = pageSize;
+      this.queryLineagesData(false);
+    };
     this.$nextTick(() => {
       this.init();
     });
@@ -2132,9 +2140,11 @@ export default {
     box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
     overflow: hidden;
     // select
-    .el-select > .el-input {
-      min-width: 280px !important;
-      max-width: 500px !important;
+    .select-container {
+      .el-select > .el-input {
+        min-width: 280px !important;
+        max-width: 500px !important;
+      }
     }
     .top-area {
       margin: 0px 32px 6px;
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index 41b1b62d..f3f86afd 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -114,8 +114,10 @@ limitations under the License.
       <!--   outer Page   -->
       <div class="pagination-content">
         <el-pagination @current-change="currentPageChange"
+                       @size-change="currentPagesizeChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
+                       :page-sizes="pagination.pageSizes"
                        :layout="pagination.layout"
                        :total="pagination.total"
                        class="page">
@@ -208,9 +210,10 @@ export default {
       },
       pagination: {
         currentPage: 1,
-        pageSize: 16,
+        pageSize: 20,
+        pageSizes: [10, 20, 50],
         total: 0,
-        layout: 'total, prev, pager, next, jumper',
+        layout: 'total, sizes, prev, pager, next, jumper',
       },
       contextMenu: {
         show: false,
@@ -304,6 +307,14 @@ export default {
             this.loading = false;
           });
     },
+    currentPagesizeChange(pageSize) {
+      this.pagination.pageSize = pageSize;
+      const params = {
+        offset: this.pagination.currentPage - 1,
+        limit: this.pagination.pageSize,
+      };
+      this.querySummaryList(params);
+    },
     currentPageChange(currentPage) {
       this.pagination.currentPage = currentPage;
       const params = {