(skywalking-booster-ui) branch main updated: fix: correct logic for the log pagination (#515)

[wusheng]

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

wusheng 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 f74a59f7 fix: correct logic for the log pagination (#515)
f74a59f7 is described below

commit f74a59f7573d2a8f24120a38bc0f1e8d2cc83db2
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Mon Jan 5 18:42:31 2026 +0800

    fix: correct logic for the log pagination (#515)
---
 src/store/modules/log.ts                 |  4 +++-
 src/views/dashboard/related/log/List.vue | 19 +++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index 9500c1fb..50aa15ed 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -37,6 +37,8 @@ interface LogState {
 }
 const { getDurationTime } = useDuration();
 
+export const PageSizeDefault = 21;
+
 export const logStore = defineStore({
   id: "log",
   state: (): LogState => ({
@@ -45,7 +47,7 @@ export const logStore = defineStore({
     endpoints: [{ value: "0", label: "All" }],
     conditions: {
       queryDuration: getDurationTime(),
-      paging: { pageNum: 1, pageSize: 15 },
+      paging: { pageNum: 1, pageSize: PageSizeDefault },
     },
     supportQueryLogsByKeywords: true,
     selectorStore: useSelectorStore(),
diff --git a/src/views/dashboard/related/log/List.vue 
b/src/views/dashboard/related/log/List.vue
index 8307cf7a..11eeb760 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -14,17 +14,17 @@ See the License for the specific language governing 
permissions and
 limitations under the License. -->
 <template>
   <div>
-    <LogTable v-loading="logStore.loadLogs" :tableData="logStore.logs || []" 
:type="type" :noLink="false" :data="data">
+    <LogTable v-loading="logStore.loadLogs" :tableData="displayLogs" 
:type="type" :noLink="false" :data="data">
       <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") 
}}</div>
     </LogTable>
     <div class="mt-5 mb-5">
       <el-pagination
         v-model="logStore.conditions.paging.pageNum"
-        :page-size="pageSize"
+        :page-size="pageSize - 1"
         size="small"
         layout="prev, pager, next"
-        :pager-count="5"
         :total="total"
+        :pager-count="5"
         @current-change="updatePage"
         :style="`float: right`"
       />
@@ -37,7 +37,7 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { LayoutConfig } from "@/types/dashboard";
   import LogTable from "./LogTable/Index.vue";
-  import { useLogStore } from "@/store/modules/log";
+  import { useLogStore, PageSizeDefault } from "@/store/modules/log";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
 
@@ -54,11 +54,14 @@ limitations under the License. -->
   const logStore = useLogStore();
   const dashboardStore = useDashboardStore();
   const type = ref<string>(dashboardStore.layerId === "BROWSER" ? "browser" : 
"service");
-  const pageSize = ref<number>(15);
+  const pageSize = ref<number>(PageSizeDefault);
   const total = computed(() =>
-    logStore.logs.length === pageSize.value
-      ? pageSize.value * logStore.conditions.paging.pageNum + 1
-      : pageSize.value * logStore.conditions.paging.pageNum,
+    logStore.logs.length >= pageSize.value
+      ? (pageSize.value - 1) * logStore.conditions.paging.pageNum + 1
+      : (pageSize.value - 1) * logStore.conditions.paging.pageNum,
+  );
+  const displayLogs = computed(() =>
+    logStore.logs.length === pageSize.value ? logStore.logs.slice(0, 
pageSize.value - 1) : logStore.logs,
   );
   function updatePage(p: number) {
     logStore.setLogCondition({