(skywalking-booster-ui) branch main updated: fix: correct services and instances when changing page numbers (#409)

[qiuxiafan]

This is an automated email from the ASF dual-hosted git repository.

qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new d9f819d1  fix: correct services and instances when changing page 
numbers (#409)
d9f819d1 is described below

commit d9f819d14382192acf1f6de1b7aa89a7da2ff0f3
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Fri Aug 16 10:52:52 2024 +0800

     fix: correct services and instances when changing page numbers (#409)
---
 src/views/dashboard/graphs/InstanceList.vue | 20 +++++++++++++-------
 src/views/dashboard/graphs/ServiceList.vue  | 14 +++++++++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/graphs/InstanceList.vue 
b/src/views/dashboard/graphs/InstanceList.vue
index f54c8c53..6bb18eb0 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -67,8 +67,9 @@ limitations under the License. -->
     <el-pagination
       class="pagination flex-h"
       layout="prev, pager, next"
+      :current-page="currentPage"
       :page-size="pageSize"
-      :total="pods.length"
+      :total="searchText ? pods.filter((d: any) => 
d.label.includes(searchText)).length : pods.length"
       @current-change="changePage"
       @prev-click="changePage"
       @next-click="changePage"
@@ -122,6 +123,7 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const chartLoading = ref<boolean>(false);
   const instances = ref<Instance[]>([]); // current instances
+  const currentPage = ref<number>(1);
   const pageSize = 10;
   const searchText = ref<string>("");
   const colMetrics = ref<string[]>([]);
@@ -213,18 +215,22 @@ limitations under the License. -->
   }
 
   function changePage(pageIndex: number) {
-    instances.value = pods.value.filter((d: unknown, index: number) => {
-      if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) 
{
-        return d;
-      }
-    });
+    let podList = pods.value;
+    if (searchText.value) {
+      podList = pods.value.filter((d: { label: string }) => 
d.label.includes(searchText.value));
+    }
+    instances.value = podList.filter(
+      (_, index: number) => index >= (pageIndex - 1) * pageSize && index < 
pageIndex * pageSize,
+    );
     queryInstanceMetrics(instances.value);
+    currentPage.value = pageIndex;
   }
 
   function searchList() {
     const searchInstances = pods.value.filter((d: { label: string }) => 
d.label.includes(searchText.value));
-    instances.value = searchInstances.filter((d: unknown, index: number) => 
index < pageSize);
+    instances.value = searchInstances.filter((_, index: number) => index < 
pageSize);
     queryInstanceMetrics(instances.value);
+    currentPage.value = 1;
   }
 
   watch(
diff --git a/src/views/dashboard/graphs/ServiceList.vue 
b/src/views/dashboard/graphs/ServiceList.vue
index 7a3a8bdd..a2560ea3 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -60,8 +60,9 @@ limitations under the License. -->
     <el-pagination
       class="pagination flex-h"
       layout="prev, pager, next"
+      :current-page="currentPage"
       :page-size="pageSize"
-      :total="selectorStore.services.length"
+      :total="searchText ? sortServices.filter((d: any) => 
d.label.includes(searchText)).length : sortServices.length"
       @current-change="changePage"
       @prev-click="changePage"
       @next-click="changePage"
@@ -112,6 +113,7 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const appStore = useAppStoreWithOut();
   const chartLoading = ref<boolean>(false);
+  const currentPage = ref<number>(1);
   const pageSize = 10;
   const services = ref<Service[]>([]);
   const colMetrics = ref<string[]>([]);
@@ -248,18 +250,24 @@ limitations under the License. -->
     return { rowspan: groups.value[param.row.group], colspan: 1 };
   }
   function changePage(pageIndex: number) {
-    const arr = sortServices.value.filter((d: Service, index: number) => {
+    let services = sortServices.value;
+    if (searchText.value) {
+      services = sortServices.value.filter((d: { label: string }) => 
d.label.includes(searchText.value));
+    }
+    const arr = services.filter((d: Service, index: number) => {
       if (index >= (pageIndex - 1) * pageSize && index < pageSize * pageIndex) 
{
         return d;
       }
     });
 
     setServices(arr);
+    currentPage.value = pageIndex;
   }
   function searchList() {
     const searchServices = sortServices.value.filter((d: { label: string }) => 
d.label.includes(searchText.value));
-    const services = searchServices.filter((d: unknown, index: number) => 
index < pageSize);
+    const services = searchServices.filter((_, index: number) => index < 
pageSize);
     setServices(services);
+    currentPage.value = 1;
   }
 
   watch(