github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add pagination

Browse Source
This commit is contained in:
Fine 2023-06-05 15:34:57 +08:00
parent 8c6df4a3b4
commit 7fd2ec9466
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/continuous-profiling/Content.vue
View File

@ -35,7 +35,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
height: calc(100% - 30px); height: calc(100% - 50px);
width: 100%; width: 100%;
} }

37
src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<el-table :data="tableData" style="width: 100%"> <el-table :data="currentInstances" style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template #default="props"> <template #default="props">
<div class="child"> <div class="child">
@ -41,18 +41,28 @@ limitations under the License. -->
:width="item.width" :width="item.width"
/> />
</el-table> </el-table>
<el-pagination
class="mt-10"
small
background
layout="prev, pager, next"
:page-size="pageSize"
:total="instances.length"
@current-change="changePage"
@prev-click="changePage"
@next-click="changePage"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { ref, computed, watch } from "vue";
import type { EBPFTaskList } from "@/types/ebpf";
import { useContinousProfilingStore } from "@/store/modules/continous-profiling"; import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling"; import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling";
import { HeaderLabels, HeaderChildLabels } from "../data"; import { HeaderLabels, HeaderChildLabels } from "../data";
import { dateFormat } from "@/utils/dateFormat"; import { dateFormat } from "@/utils/dateFormat";
const continousProfilingStore = useContinousProfilingStore(); const continousProfilingStore = useContinousProfilingStore();
const pageSize = 12;
const tableData = computed(() => { const instances = computed(() => {
return continousProfilingStore.instances.map((d: MonitorInstance) => { return continousProfilingStore.instances.map((d: MonitorInstance) => {
const processes = (d.processes || []).map((p: MonitorProcess) => { const processes = (d.processes || []).map((p: MonitorProcess) => {
return { return {
@ -65,11 +75,22 @@ limitations under the License. -->
return { ...d, processes, lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "" }; return { ...d, processes, lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "" };
}); });
}); });
const currentInstances = ref<MonitorInstance[]>([]);
async function changeTask(item: EBPFTaskList) { async function changePage(pageIndex: number) {
continousProfilingStore.setselectedTask(item); currentInstances.value = instances.value.filter((d: unknown, index: number) => {
continousProfilingStore.getGraphData(); if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
return d;
}
});
} }
watch(
() => instances.value,
() => {
currentInstances.value = instances.value.filter((_: unknown, index: number) => index < pageSize);
},
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {