github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 01:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

add pagination for endpoint list (#451)

Browse Source
This commit is contained in:
Fine0830 2025-02-28 17:15:55 +08:00 committed by GitHub
parent 7a690e6704
commit 9ab8ac44bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/dashboard/graphs/EndpointList.vue
View File

@ -27,7 +27,7 @@ limitations under the License. -->
</el-input> </el-input>
</div> </div>
<div class="list"> <div class="list">
<el-table v-loading="chartLoading" :data="endpoints" style="width: 100%"> <el-table v-loading="chartLoading" :data="currentEndpoints" style="width: 100%">
<el-table-column label="Endpoints" fixed min-width="220"> <el-table-column label="Endpoints" fixed min-width="220">
<template #default="scope"> <template #default="scope">
<span class="link" @click="clickEndpoint(scope)" :style="{ fontSize: `${config.fontSize}px` }"> <span class="link" @click="clickEndpoint(scope)" :style="{ fontSize: `${config.fontSize}px` }">
@ -48,6 +48,16 @@ limitations under the License. -->
/> />
</el-table> </el-table>
</div> </div>
<el-pagination
class="pagination flex-h"
layout="prev, pager, next"
:current-page="currentPage"
:page-size="pageSize"
:total="endpoints.length"
@current-change="handleCurrentChange"
@prev-click="changePage"
@next-click="changePage"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -94,13 +104,16 @@ limitations under the License. -->
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const endpoints = ref<Endpoint[]>([]); const endpoints = ref<Endpoint[]>([]); // all of endpoints
const currentEndpoints = ref<Endpoint[]>([]); // current page of endpoints
const searchText = ref<string>(""); const searchText = ref<string>("");
const colMetrics = ref<string[]>([]); const colMetrics = ref<string[]>([]);
const colSubMetrics = ref<string[]>([]); const colSubMetrics = ref<string[]>([]);
const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []); const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []); const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
const topN = ref<number>(20); const topN = ref<number>(20);
const currentPage = ref<number>(1);
const pageSize = 10;
const topNList = [ const topNList = [
{ label: "TopN20", value: 20 }, { label: "TopN20", value: 20 },
{ label: "TopN50", value: 50 }, { label: "TopN50", value: 50 },
@ -125,7 +138,8 @@ limitations under the License. -->
return; return;
} }
endpoints.value = resp.data.pods || []; endpoints.value = resp.data.pods || [];
queryEndpointMetrics(endpoints.value); currentEndpoints.value = endpoints.value.filter((d: unknown, index: number) => index < pageSize);
queryEndpointMetrics(currentEndpoints.value);
} }
async function queryEndpointMetrics(arr: Endpoint[]) { async function queryEndpointMetrics(arr: Endpoint[]) {
if (!arr.length) { if (!arr.length) {
@ -151,7 +165,7 @@ limitations under the License. -->
{ metricConfig: metricConfig.value || [], expressions, subExpressions }, { metricConfig: metricConfig.value || [], expressions, subExpressions },
EntityType[2].value, EntityType[2].value,
); );
endpoints.value = params.data; currentEndpoints.value = params.data;
colMetrics.value = params.names; colMetrics.value = params.names;
colSubMetrics.value = params.subNames; colSubMetrics.value = params.subNames;
metricConfig.value = params.metricConfigArr; metricConfig.value = params.metricConfigArr;
@ -160,7 +174,7 @@ limitations under the License. -->
return; return;
} }
endpoints.value = currentPods; currentEndpoints.value = currentPods;
colMetrics.value = []; colMetrics.value = [];
colSubMetrics.value = []; colSubMetrics.value = [];
metricConfig.value = []; metricConfig.value = [];
@ -184,6 +198,16 @@ limitations under the License. -->
async function searchList() { async function searchList() {
await queryEndpoints(); await queryEndpoints();
} }
function changePage() {
currentEndpoints.value = endpoints.value.filter(
(_, index: number) => index >= (currentPage.value - 1) * pageSize && index < currentPage.value * pageSize,
);
queryEndpointMetrics(currentEndpoints.value);
}
function handleCurrentChange(val: number) {
currentPage.value = val;
changePage();
}
watch( watch(
() => [ () => [
...(props.config.metricConfig || []), ...(props.config.metricConfig || []),