From e5b69ec276e7d51efa03ac7359ab6310f869999e Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sun, 24 Apr 2022 10:54:51 +0800
Subject: [PATCH] add pagination for process list

---
 src/locales/lang/en.ts                        |  1 +
 src/locales/lang/zh.ts                        |  1 +
 .../related/ebpf/components/EBPFSchedules.vue | 57 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 8fe35b87..29c59024 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -134,6 +134,7 @@ const msg = {
   taskId: "Task ID",
   triggerType: "Trigger Type",
   targetType: "Target Type",
+  processSelect: "Click to select processes",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3942c4e0..21697545 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -132,6 +132,7 @@ const msg = {
   taskId: "任务ID",
   triggerType: "触发类型",
   targetType: "目标类型",
+  processSelect: "点击选择进程",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index 76287e2d..b3421b34 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -26,11 +26,24 @@ limitations under the License. -->
     <el-popover placement="bottom" :width="680" trigger="click">
       <template #reference>
         <el-button type="primary" size="small">
-          Click to select processes
+          {{ t("processSelect") }}
         </el-button>
       </template>
+      <el-input
+        v-model="searchText"
+        placeholder="Please input name"
+        class="input-with-search"
+        size="small"
+        @change="searchProcesses"
+      >
+        <template #append>
+          <el-button size="small">
+            <Icon size="sm" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
       <el-table
-        :data="processes"
+        :data="currentProcesses"
         ref="multipleTableRef"
         @selection-change="handleSelectionChange"
       >
@@ -44,10 +57,21 @@ limitations under the License. -->
         />
         <el-table-column width="300" label="Attributes">
           <template #default="scope">
-            {{ scope.row.attributes.map((d: any) => `${d.name}=${d.value}`).join("; ") }}
+            {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        class="pagination"
+        background
+        small
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :total="processes.length"
+        @current-change="changePage"
+        @prev-click="changePage"
+        @next-click="changePage"
+      />
     </el-popover>
     <el-button type="primary" size="small" @click="analyzeEBPF">
       {{ t("analyze") }}
@@ -69,6 +93,7 @@ import { ElMessage, ElTable } from "element-plus";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
+const pageSize = 5;
 /*global Nullable */
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const selectedProcesses = ref<string[]>([]);
@@ -76,7 +101,9 @@ const timeline = ref<Nullable<HTMLDivElement>>(null);
 const visGraph = ref<Nullable<any>>(null);
 const labels = ref<Option[]>([{ label: "All", value: "0" }]);
 const processes = ref<Process[]>([]);
+const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
+const searchText = ref<string>("");
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   new Date(dayjs(date).format(pattern));
 
@@ -155,6 +182,7 @@ function visTimeline() {
       };
     }
   );
+  searchProcesses();
   const items: any = new DataSet(schedules);
   const options = {
     height: 250,
@@ -167,6 +195,20 @@ function visTimeline() {
   visGraph.value = new Timeline(timeline.value, items, options);
 }
 
+function changePage(pageIndex: number) {
+  searchProcesses(pageIndex);
+}
+
+function searchProcesses(pageIndex?: any) {
+  const arr = processes.value.filter((d: { name: string }) =>
+    d.name.includes(searchText.value)
+  );
+  currentProcesses.value = arr.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
+}
+
 watch(
   () => ebpfStore.eBPFSchedules,
   () => {
@@ -187,4 +229,13 @@ watch(
 .inputs {
   width: 300px;
 }
+
+.input-with-search {
+  width: 650px;
+  margin-bottom: 5px;
+}
+
+.pagination {
+  margin-top: 10px;
+}
 </style>