github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2026-04-17 01:38:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct logic for the log pagination (#515)

Browse Source
This commit is contained in:
Fine0830
2026-01-05 18:42:31 +08:00
committed by GitHub
parent a4e9908b43
commit f74a59f757
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/store/modules/log.ts
View File

@@ -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(),

19
src/views/dashboard/related/log/List.vue
View File

@@ -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({